/* initiativesoubey.ch
 *
 * Farben und Schriften wie auf der WordPress-Seite (Elementor-Kit post-8),
 * damit der Umzug nicht wie ein Neuanfang aussieht.
 *
 * Schriften: Die alte Seite lud Cubano und Work Sans aus dem Adobe-Fonts-Konto
 * der Agentur. Das Konto gehört nicht uns, also kommt Work Sans jetzt von hier
 * (SIL OFL). Für die Titel wird zuerst /schrift/cubano.woff2 versucht; fehlt
 * die Datei, nimmt der Browser Lilita One.
 *
 * Cubano ist von Chandler Van De Water (Lost Type Co-op, 2012) und lag auch als
 * Datei in der Mediathek der alten Seite. Eine Lizenz wurde nie gekauft
 * (Auskunft meinRad, 05.10.2026), darum bleibt Lilita One. Mit Lizenz: als
 * schrift/cubano.woff2 ablegen, sonst nichts ändern.
 */

@font-face{font-family:cubano;src:url(/schrift/cubano.woff2) format("woff2"),url(/schrift/lilita-one-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:work-sans;font-weight:400;src:url(/schrift/work-sans-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:work-sans;font-weight:500;src:url(/schrift/work-sans-500.woff2) format("woff2");font-display:swap}
@font-face{font-family:work-sans;font-weight:500;font-style:italic;src:url(/schrift/work-sans-500-italic.woff2) format("woff2");font-display:swap}
@font-face{font-family:work-sans;font-weight:700;src:url(/schrift/work-sans-700.woff2) format("woff2");font-display:swap}
@font-face{font-family:work-sans;font-weight:800;src:url(/schrift/work-sans-800.woff2) format("woff2");font-display:swap}

:root{
  --gelb:#FFC500; --navy:#0F3E60; --nacht:#0F2E4D; --gruen:#5B7F53; --gruen-hell:#8BAA7A;
  --beige:#E6DCC1; --creme:#F4EFE6; --hell:#F4FAFF; --weiss:#fff;
  --text:work-sans,"Work Sans",system-ui,sans-serif; --titel:cubano,"Lilita One",work-sans,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--hell);color:var(--navy);font-family:var(--text);font-weight:500;font-size:19px;line-height:1.55}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--gelb);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--gruen)}
h1,h2,h3{font-family:var(--titel);font-weight:400;line-height:1.12;text-transform:uppercase;letter-spacing:.01em}
h2{font-size:clamp(28px,4vw,42px);margin:0 0 .5em}
h3{font-size:clamp(20px,2.4vw,26px);margin:1.6em 0 .6em;color:var(--gruen)}
p,ul{margin:0 0 1em}
:focus-visible{outline:3px solid var(--gelb);outline-offset:2px}

.springen{position:absolute;left:-999px;top:8px;background:var(--gelb);color:var(--nacht);padding:8px 12px;z-index:3000}
.springen:focus{left:8px}

/* Kopf: Logo mittig über dem Bild, Menü rechts – wie bisher. */
.kopf{position:absolute;top:0;left:0;right:0;z-index:1000;height:0}
.logo{position:absolute;left:50%;transform:translateX(-50%);top:20px;width:clamp(130px,16vw,200px)}
.logo img{width:100%;height:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
.sprachwahl{position:absolute;top:28px;left:16px;display:flex;border:2px solid var(--gelb);border-radius:4px;overflow:hidden;
  background:rgba(15,46,77,.55)}
.sprachwahl a{color:#fff;font-weight:700;font-size:15px;padding:4px 10px;text-decoration:none;letter-spacing:.04em}
.sprachwahl a[aria-current]{background:var(--gelb);color:var(--nacht);cursor:default}
.sprachwahl a:not([aria-current]):hover{background:rgba(255,197,0,.3)}
.menue{position:fixed;top:18px;right:16px;z-index:2000}
.menue summary{list-style:none;cursor:pointer;width:52px;height:46px;padding:8px 6px;display:flex;flex-direction:column;justify-content:space-between;
  background:rgba(15,46,77,.55);border-radius:6px}
.menue summary::-webkit-details-marker{display:none}
.menue summary span{display:block;height:5px;border-radius:3px;background:var(--gelb);transition:transform .2s,opacity .2s}
.menue[open] summary span:nth-child(1){transform:translateY(12px) rotate(45deg)}
.menue[open] summary span:nth-child(2){opacity:0}
.menue[open] summary span:nth-child(3){transform:translateY(-12px) rotate(-45deg)}
.menue nav{position:absolute;right:0;top:56px;width:min(86vw,340px);background:var(--nacht);border-radius:8px;padding:18px 22px;
  box-shadow:0 10px 30px rgba(0,0,0,.3)}
.menue ul{list-style:none;padding:0;margin:0}
.menue li a{display:block;color:#fff;text-decoration:none;font-family:var(--titel);text-transform:uppercase;font-size:21px;padding:7px 0;
  border-bottom:1px solid rgba(255,255,255,.12)}
.menue li a:hover,.menue li a[aria-current]{color:var(--gelb)}
.menue-klein{margin:14px 0 0;font-size:14px;color:#cfe0ee}
.menue-klein a{color:#cfe0ee}

/* Das Titelbild jeder Seite. */
/* Der Titel steht unten im Bild, das Logo oben. Bei langem Titel auf breiten,
   niedrigen Bildschirmen wuchs der Titel unter das Logo (gemessen: Focus Soubey
   bei 1280 x 650). Der Abstand oben hält ihm den Platz des Logos frei; reicht die
   Höhe nicht, wird das Bild höher statt der Titel überdeckt. */
.held{position:relative;min-height:clamp(480px,78vh,820px);display:flex;align-items:flex-end;
  padding-top:calc(20px + clamp(130px,16vw,200px) + 28px);
  background:linear-gradient(180deg,rgba(15,46,77,0) 35%,rgba(15,46,77,.75) 100%),var(--held) center 30%/cover no-repeat;color:#fff}
.held-innen{max-width:1100px;margin:0 auto;width:100%;padding:0 16px clamp(36px,6vw,72px)}
.held h1{font-size:clamp(34px,5.6vw,62px);margin:0 0 .4em;text-shadow:0 2px 12px rgba(0,0,0,.35);max-width:22ch}

/* Textblöcke */
.block{max-width:880px;margin:0 auto;padding:clamp(40px,6vw,80px) 16px 0}
.block.breit{max-width:1180px}
.block.text{max-width:760px}
.block.band{max-width:none;background:var(--beige);padding-bottom:clamp(40px,6vw,72px);margin-top:clamp(40px,6vw,72px)}
.block.band>*{max-width:848px;margin-left:auto;margin-right:auto}
.lead{font-size:1.15em}
.dachzeile{font-family:var(--titel);text-transform:uppercase;color:var(--gruen);font-size:20px;letter-spacing:.04em;margin-bottom:.3em}
.verweis{background:#fff;border-left:5px solid var(--gelb);border-radius:6px;padding:14px 18px;box-shadow:0 2px 14px rgba(15,62,96,.08)}
.hinweis{font-weight:700;text-align:center;margin-top:1.6em}
.mitte{text-align:center}
.klein{font-size:15px;color:#4a6880}
ul.haken{list-style:none;padding:0}
ul.haken li{position:relative;padding-left:34px;margin-bottom:.6em}
ul.haken li::before{content:"";position:absolute;left:0;top:.25em;width:22px;height:22px;border-radius:50%;background:var(--gruen)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
ul.schritte{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px;margin:1.4em 0}
ul.schritte li{background:var(--gelb);color:var(--nacht);font-weight:700;border-radius:999px;padding:6px 16px;font-size:16px}
.knopf{display:inline-block;background:var(--gelb);color:var(--nacht);font-weight:700;text-decoration:none;border-radius:3px;padding:.65em 1.3em;
  transition:transform .15s}
.knopf:hover{transform:scale(1.04);color:var(--nacht)}
.knopf.hell{background:transparent;color:#fff;border:2px solid var(--gelb)}
.knopf.hell:hover{background:var(--gelb);color:var(--nacht)}

.zwischenbild{margin:clamp(40px,6vw,80px) auto 0;max-width:1180px;padding:0 16px}
.zwischenbild img{width:100%}
.zwischenbild.fluss{max-width:560px}
.zwischenbild.fluss img{border-radius:0}

/* Focus Soubey */
.focus-logo{margin:0 0 1.2em}
.bildreihe{max-width:1180px;margin:clamp(40px,6vw,72px) auto 0;padding:0 16px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bildreihe figure,.karten figure,.personen figure{margin:0}
.bildreihe img,.karten img{border-radius:10px;aspect-ratio:16/9;object-fit:cover;width:100%}
.bildreihe figcaption{font-weight:700;margin-top:.6em}
.karten{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:1.4em}
.karten figcaption{background:var(--nacht);color:#fff;border-radius:0 0 10px 10px;padding:12px 14px;font-size:15px;margin-top:-10px;position:relative}
.karten figcaption strong{display:block;font-family:var(--titel);font-weight:400;text-transform:uppercase;font-size:19px;color:var(--gelb)}
.personen{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:1.4em 0}
.personen img{border-radius:50%;width:180px;aspect-ratio:1;object-fit:cover;margin-bottom:12px}
.personen figcaption strong{display:block;font-family:var(--titel);font-weight:400;text-transform:uppercase;font-size:22px;color:var(--gruen)}
.zitat{margin:1.6em 0;padding:22px 26px;background:var(--beige);border-radius:8px;border-left:6px solid var(--gruen);font-size:18px}
.zitat p{margin:0 0 .6em}
.zitat cite{font-style:normal;font-weight:700;color:var(--gruen)}
.zitat h2{font-size:clamp(21px,2.6vw,28px);margin:0 0 .6em;color:var(--navy)}
.anschluss{padding-top:22px}
.anschluss>.zitat:first-child{margin-top:0}
.video{margin:1.4em 0;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000}
.video iframe{width:100%;height:100%;border:0}
.video-start{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;
  background-size:cover;background-position:center;color:#fff;text-align:center;box-shadow:inset 0 0 0 2000px rgba(15,46,77,.45)}
.video-play{font-size:44px;width:84px;height:84px;border-radius:50%;background:var(--gelb);color:var(--nacht);display:flex;align-items:center;justify-content:center;padding-left:6px}
.video-hinweis{font-size:14px;max-width:34ch;padding:0 12px}

/* Über uns */
.wir{display:grid;gap:clamp(36px,5vw,56px)}
.wir-person{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,3vw,40px);align-items:start}
.wir-person:nth-child(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.wir-person:nth-child(even) img{order:2}
/* Jedes Foto in seinem eigenen Format: ein gemeinsames 4:3 hätte das Hochformat
   von Marc-Felix (nur er, ohne die Kollegen) quer beschnitten. */
.wir-person img{width:100%;border-radius:10px;box-shadow:0 2px 14px rgba(15,62,96,.12)}
.wir-person h2{margin-bottom:.2em}
.wir-rolle{font-weight:700;color:var(--gruen)}
.wir-kontakt{font-size:16px}
@media (max-width:760px){
  .wir-person,.wir-person:nth-child(even){grid-template-columns:1fr}
  .wir-person:nth-child(even) img{order:0}
}

/* Fuss */
.kontakt{background:var(--beige);margin-top:clamp(56px,8vw,100px);padding:clamp(40px,6vw,72px) 16px}
.kontakt-innen{max-width:880px;margin:0 auto;text-align:center}
.kontakt-innen img{margin:0 auto 12px}
.personen-kontakt{list-style:none;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:16px 48px;margin-top:1.2em}
.endbild{margin:0}
.endbild img{width:100%}
.fuss{background:var(--nacht);color:#cfe0ee;text-align:center;padding:32px 16px 40px;font-size:15px}
.fuss nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-bottom:12px}
.fuss a{color:#fff}
.fuss p{margin:0}

/* Die Informationsseite bringt ihren eigenen Stil (.isb-…) aus dem Word-Bau mit;
   hier nur, was sie an die übrige Seite angleicht. */
.isb-info h1,.isb-info h2{font-family:var(--titel)!important;font-weight:400!important;text-transform:uppercase!important}

@media (max-width:860px){
  .bildreihe,.karten{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  body{font-size:17.5px}
  .bildreihe,.karten,.personen{grid-template-columns:1fr}
  .sprachwahl{top:24px}
  .sprachwahl a{font-size:14px;padding:4px 8px}
  .menue{top:16px;right:12px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}