/* Safer Shorelines · Partner- und Ambassador-Seiten · Werte aus CI_SAFER_SHORELINES.md (json) */
@font-face{font-family:'Montserrat';src:url('/fonts/Montserrat-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Montserrat';src:url('/fonts/Montserrat-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Montserrat';src:url('/fonts/Montserrat-Black.ttf') format('truetype');font-weight:900;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('/fonts/SourceSans3-VF.ttf') format('truetype');font-weight:200 900;font-display:swap}
:root{
  --grund:#08403A; --marke:#0E736F; --sek:#3E8F8C; --hell:#67B2AE; --zart:#A4D1CE;
  --sand:#EADEC2; --weiss:#FFFFFF; --tinte:#0D0D0D; --grau:#808080; --grau-hell:#BFBFBF;
  --papier:#F6F4EE; --linie:rgba(13,13,13,.12); --linie-dunkel:rgba(234,222,194,.18);
  --r-klein:4px; --r-gross:12px;
  --mont:'Montserrat',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --sans:'Source Sans 3',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--weiss);color:var(--tinte);font-family:var(--sans);font-size:1.125rem;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,.mont{font-family:var(--mont);font-weight:900;letter-spacing:-.02em;line-height:1.05;margin:0}
h1{font-size:clamp(2rem,6vw,4rem)}
h2{font-size:clamp(1.5rem,3.4vw,2.25rem);margin-bottom:1.5rem}
h3{font-size:1.125rem;font-weight:700;letter-spacing:0}
p{margin:0 0 1rem}
a{color:var(--marke)}
img{max-width:100%;display:block}
.wrap{max-width:72rem;margin:0 auto;padding:0 clamp(1rem,4vw,3rem)}
.eyebrow{font-family:var(--mont);font-weight:600;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--marke)}
.dunkel .eyebrow{color:var(--hell)}

/* Kopf */
.top{background:var(--grund);color:var(--sand)}
.top a{color:var(--sand);text-decoration:none}
.top .zeile{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1rem 0;flex-wrap:wrap}
.top .zeile img{height:2.5rem;width:auto}
.top nav{display:flex;gap:1.5rem;flex-wrap:wrap;font-family:var(--mont);font-weight:600;font-size:.875rem;letter-spacing:.06em;text-transform:uppercase}
.top nav a{opacity:.85}.top nav a:hover,.top nav a[aria-current]{opacity:1;border-bottom:2px solid var(--hell)}
.lang{display:inline-flex;border:1px solid var(--linie-dunkel);border-radius:var(--r-klein);overflow:hidden;font-family:var(--mont);font-weight:600;font-size:.875rem}
.lang a,.lang button{padding:.375rem .75rem;background:transparent;border:0;color:var(--sand);cursor:pointer;font:inherit}
.lang [aria-current],.lang .an{background:var(--marke);color:var(--weiss)}

/* Hero */
.hero{position:relative;background:var(--grund);color:var(--weiss);overflow:hidden}
.hero .bild{position:absolute;inset:0}
.hero .bild img{width:100%;height:100%;object-fit:cover;opacity:.55}
.hero .bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,64,58,.15) 0%,rgba(8,64,58,.55) 60%,var(--grund) 100%)}
.hero .inhalt{position:relative;padding:clamp(6rem,18vw,14rem) 0 3rem;max-width:44rem}
.hero h1{color:var(--weiss);margin:.5rem 0 1rem}
.hero .lead{font-size:clamp(1.125rem,2.2vw,1.5rem);color:var(--zart);max-width:36rem}
.hero .meta{display:flex;gap:1rem 2rem;flex-wrap:wrap;margin-top:1.5rem;font-family:var(--mont);font-weight:600;font-size:.875rem;color:var(--zart)}

/* Abschnitte */
section{padding:clamp(3rem,7vw,5rem) 0}
.sandblock{background:var(--sand)}
.papier{background:var(--papier)}
.dunkel{background:var(--grund);color:var(--sand)}
.dunkel h2{color:var(--weiss)}
.dunkel a{color:var(--zart)}

/* Fünf Sätze */
.fuenf{display:grid;gap:1rem;counter-reset:tipp;margin:0;padding:0;list-style:none}
.fuenf li{display:grid;grid-template-columns:3.5rem 1fr;gap:1rem;align-items:start;font-family:var(--mont);font-weight:700;font-size:clamp(1.125rem,2.4vw,1.5rem);line-height:1.3}
.fuenf li::before{counter-increment:tipp;content:counter(tipp);font-size:clamp(2rem,5vw,3rem);font-weight:900;color:var(--marke);line-height:1}
.fuenf li small{display:block;font-family:var(--sans);font-weight:400;font-size:1rem;color:var(--grau);margin-top:.25rem}

/* Zehn Regeln */
.regeln{display:grid;gap:0;border-top:1px solid var(--linie)}
.regel{display:grid;grid-template-columns:4.5rem 1fr;gap:1.5rem;padding:1.5rem 0;border-bottom:1px solid var(--linie);align-items:start}
.regel img{width:4.5rem;height:4.5rem}
.regel h3{font-size:1.25rem;font-weight:900;letter-spacing:-.01em;margin-bottom:.25rem}
.regel h3 span{color:var(--grau);font-weight:600;margin-right:.5rem}
.regel .safety{font-style:italic;color:var(--marke);margin-bottom:.5rem}
.regel .ort{background:var(--papier);border-left:3px solid var(--marke);padding:.75rem 1rem;margin:.5rem 0 0;border-radius:0 var(--r-klein) var(--r-klein) 0}
.regel .ort strong{font-family:var(--mont);font-weight:700;font-size:.875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--marke);display:block;margin-bottom:.25rem}
.herkunft{display:inline-block;font-family:var(--mont);font-weight:600;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sek);border:1px solid var(--zart);border-radius:var(--r-klein);padding:.125rem .5rem;margin-left:.5rem;vertical-align:middle}
.pruefen{color:var(--grau);font-size:.875rem}

/* Notfall */
.notfall{border:2px solid var(--marke);border-radius:var(--r-gross);padding:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.notfall .zahl{font-family:var(--mont);font-weight:900;font-size:clamp(2rem,5vw,3rem);color:var(--marke);line-height:1}
.notfall .was{font-family:var(--mont);font-weight:600;font-size:.875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grau);margin-top:.5rem}

/* Bildband */
.band{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1rem}
.band figure{margin:0;border-radius:var(--r-gross);overflow:hidden;aspect-ratio:3/2;background:var(--papier)}
.band img{width:100%;height:100%;object-fit:cover}

/* Mitnehmen */
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.5rem}
.karte{border:1px solid var(--linie);border-radius:var(--r-gross);padding:1.5rem;background:var(--weiss);display:flex;flex-direction:column;gap:.75rem}
.karte h3{font-size:1.125rem}
.karte .vorschau{border-radius:var(--r-klein);overflow:hidden;aspect-ratio:1/1.414;background:var(--papier)}
.karte .vorschau img{width:100%;height:100%;object-fit:cover;object-position:top}
.knopf{display:inline-block;font-family:var(--mont);font-weight:700;font-size:.875rem;letter-spacing:.04em;padding:.75rem 1.25rem;border-radius:var(--r-klein);background:var(--marke);color:var(--weiss);text-decoration:none;border:2px solid var(--marke);cursor:pointer;line-height:1.2}
.knopf:hover{background:var(--grund);border-color:var(--grund)}
.knopf.leer{background:transparent;color:var(--marke)}
.knopf.leer:hover{background:var(--marke);color:var(--weiss)}
.dunkel .knopf.leer{color:var(--sand);border-color:var(--zart)}
.knoepfe{display:flex;gap:.75rem;flex-wrap:wrap}

/* Personen */
.person{display:grid;grid-template-columns:minmax(10rem,16rem) 1fr;gap:2rem;align-items:start}
.person > img{border-radius:var(--r-gross);aspect-ratio:3/4;object-fit:cover;width:100%}
.person blockquote{margin:0;font-family:var(--mont);font-weight:700;font-size:clamp(1.25rem,2.6vw,1.75rem);line-height:1.25}
.person cite{display:block;font-style:normal;font-family:var(--sans);font-size:1rem;color:var(--grau);margin-top:1rem}
@media(max-width:40rem){.person{grid-template-columns:1fr}.person > img{max-width:14rem}}

/* Galerie */
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:1.5rem}
.profil{border:1px solid var(--linie);border-radius:var(--r-gross);overflow:hidden;background:var(--weiss);text-decoration:none;color:inherit;display:block}
.profil img{aspect-ratio:1/1;object-fit:cover;width:100%}
.profil .text{padding:1rem 1.25rem 1.25rem}
.profil h3{font-size:1.125rem}
.profil .rolle{color:var(--grau);font-size:.875rem}
.profil:hover{border-color:var(--marke)}

/* Badge */
.badge{width:6rem;height:6rem;flex:0 0 6rem}

/* Formular */
form.ss{display:grid;gap:1.5rem;max-width:44rem}
fieldset{border:1px solid var(--linie);border-radius:var(--r-gross);padding:1.5rem;margin:0;display:grid;gap:1rem}
legend{font-family:var(--mont);font-weight:900;font-size:1.25rem;padding:0 .5rem}
label{display:grid;gap:.25rem;font-family:var(--mont);font-weight:600;font-size:.875rem;color:var(--grund)}
label small{font-family:var(--sans);font-weight:400;color:var(--grau)}
input[type=text],input[type=email],input[type=url],input[type=tel],select,textarea{font:inherit;font-size:1rem;padding:.75rem;border:1px solid var(--grau-hell);border-radius:var(--r-klein);background:var(--weiss);color:var(--tinte);width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--hell);outline-offset:1px;border-color:var(--marke)}
textarea{min-height:6rem;resize:vertical}
.kreuze{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.5rem}
.zweier{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:36rem){.zweier{grid-template-columns:1fr}}
.kreuze label,.radio label{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;font-family:var(--sans);font-weight:400;font-size:1rem;padding:.5rem .75rem;border:1px solid var(--linie);border-radius:var(--r-klein);cursor:pointer}
.kreuze input,.radio input{width:1.125rem;height:1.125rem;accent-color:var(--marke)}
.kreuze label small{flex-basis:100%;padding-left:1.875rem;margin-top:-.25rem}
.safety-sagt{display:grid;grid-template-columns:4rem 1fr;gap:1rem;align-items:center;background:var(--papier);border-radius:var(--r-gross);padding:1rem}
.safety-sagt img{width:4rem;height:4rem;border-radius:var(--r-gross);object-fit:cover}
.safety-sagt p{margin:0;font-style:italic}
.hinweis{font-size:.875rem;color:var(--grau)}

/* Fuß */
footer.ss{background:var(--grund);color:var(--zart);padding:3rem 0 2rem;font-size:.875rem}
footer.ss .logos{display:flex;gap:2rem;align-items:center;flex-wrap:wrap;margin-bottom:1.5rem}
footer.ss .logos img{height:2rem;width:auto}
footer.ss a{color:var(--zart)}
footer.ss .zeilen{display:flex;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;border-top:1px solid var(--linie-dunkel);padding-top:1.5rem}

/* Sprachen: nur eine Fassung sichtbar */
[data-lang]{display:none}
html[lang=de] [data-lang=de],html[lang=en] [data-lang=en]{display:revert}
html[lang=de] li[data-lang=de],html[lang=en] li[data-lang=en]{display:grid}
html[lang=de] span[data-lang=de],html[lang=en] span[data-lang=en]{display:inline}

@media print{.top nav,.lang,.knoepfe,.hero .bild{display:none}.hero{color:var(--tinte);background:var(--weiss)}.hero h1{color:var(--tinte)}section{padding:1rem 0}}