/* Inter, lokal eingebunden. Variable Schrift: eine Datei deckt die
   Schnitte 400–800 ab. Nur latin und latin-ext — kyrillische, griechische
   und vietnamesische Zeichen kommen auf der Seite nicht vor. */
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --navy:#0E2A47;
  --teal:#0F6C7C;
  --teal-bright:#6FBECB;
  --ink-soft:#5B6B7A;
  --line:#E8E5E0;

  /* Abstandsskala. Alles Vertikale auf dieser Seite stammt aus diesen
     Werten - keine Zwischengroessen, keine Inline-Abstaende im HTML. */
  --header-h:84px;    /* Hoehe der fixen Kopfzeile */
  --gap-hero:32px;    /* Kopfzeile -> schwebendes Bild */
  --gap-page:64px;    /* Kopfzeile -> Text auf Unterseiten */
  --s-section:72px;   /* Luft ueber und unter jeder Sektion */
  --s-block:56px;     /* Sektionskopf -> Inhaltsblock, Block -> Schaltflaeche */
  --s-grid:48px;      /* Zeilenabstand in Rastern */
  --s-card:24px;      /* Abstand zwischen Karten, Innenrand kleiner Flaechen */
  --s-text:16px;      /* Ueberschrift -> Text, Symbol -> Titel */
  --s-tight:12px;     /* Titel -> Beschreibung, Listenzeilen */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--navy);background:#fff;line-height:1.65;font-size:16px}
img{max-width:100%;display:block}
a{color:var(--teal);text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* ---- Ladeschirm ----
   Zwei Navy-Haelften mit der Wortmarke dazwischen. Nach kurzem Stand
   faehrt die obere nach oben, die untere nach unten, und geben die Seite
   frei. Bewusst reines CSS: ohne JavaScript kann nichts haengen bleiben.
   Ablauf: 0,45 s Wortmarke -> 0,5 s Vorhang oeffnet -> nach 1,15 s weg. */
.splash{position:fixed;inset:0;z-index:300;pointer-events:none;
  animation:splash-end .01s linear 1.15s forwards}
@keyframes splash-end{to{visibility:hidden}}

.splash__half{position:absolute;left:0;right:0;height:50.5%;background:var(--navy)}
.splash__half--top{top:0;animation:curtain-up .6s cubic-bezier(.76,0,.24,1) .5s forwards}
.splash__half--bottom{bottom:0;animation:curtain-down .6s cubic-bezier(.76,0,.24,1) .5s forwards}
@keyframes curtain-up{to{transform:translateY(-100%)}}
@keyframes curtain-down{to{transform:translateY(100%)}}

.splash__logo{position:absolute;top:50%;left:50%;width:min(360px,54vw);height:auto;
  transform:translate(-50%,-50%);
  animation:logo-in .45s cubic-bezier(.2,.7,.3,1) both, logo-out .3s ease .45s forwards}
@keyframes logo-in{from{opacity:0;transform:translate(-50%,-46%) scale(.94)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes logo-out{to{opacity:0;transform:translate(-50%,-50%) scale(1.05)}}

@media(prefers-reduced-motion:reduce){.splash{display:none}}
/* Beim Wechsel zwischen den Seiten der Website bleibt der Ladeschirm aus;
   die Klasse setzt das Skript im Kopf der Seite. */
.no-splash .splash{display:none}

/* Inhalt liegt ueber dem Hintergrund-Grundriss (body::before) */
main,footer{position:relative;z-index:1}

/* Kopfzeile — immer weiss, Button immer Navy */
header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:84px}
.nav .logo img{height:28px;width:auto}
.nav ul{display:flex;align-items:center;gap:32px;list-style:none}
.nav ul a{color:var(--navy);font-weight:500;font-size:15px;transition:color .2s}
.nav ul a:hover{color:var(--teal)}
.nav ul a.active{font-weight:700;color:var(--teal)}
.btn{display:inline-flex;align-items:center;gap:12px;padding:16px 32px;border-radius:999px;font-weight:600;font-size:15px;transition:all .25s;cursor:pointer}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--teal)}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{background:#EFF3F5}
.btn-ghost{border:1.5px solid rgba(255,255,255,.7);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.14)}
.btn-ghost-dark{border:1.5px solid rgba(14,42,71,.28);color:var(--navy)}
.btn-ghost-dark:hover{background:rgba(14,42,71,.06)}
.nav .btn{padding:12px 24px;background:var(--navy);color:#fff}
.nav .btn:hover{background:var(--teal);color:#fff}
.menu-toggle{display:none;background:none;border:none;font-size:26px;color:var(--navy);cursor:pointer}

/* Eyebrow-Labels (ohne Box) */
.eyebrow{display:block;color:var(--teal);font-weight:700;font-size:13.5px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:20px}
.eyebrow-light{color:var(--teal-bright)}

h1{font-size:clamp(38px,5vw,62px);line-height:1.08;font-weight:800;letter-spacing:-.025em}
h2{font-size:clamp(28px,3.4vw,42px);line-height:1.15;font-weight:800;letter-spacing:-.02em}

/* Hero — full bleed bis ganz oben */
/* Der Seitenkopf traegt seinen Abstand nach unten selbst — wie jede
   andere Sektion auch. Sonst beginnt ein getoentes Band direkt an der
   Bildkante (Handy: „Unsere Vision", Unser Ansatz: „Der Weg zu uns"). */
.hero{position:relative;padding:0 0 var(--s-section)}
/* Eckige Ecken am Video (gemeldet: Firefox am Handy, dauerhaft):
   ein <video> ist dort keine gemalte Flaeche, sondern eine eigene
   Compositor-Ebene, die der Hardware-Decoder fuellt. Der runde Rand
   des Elters ist fuer diese Ebene kein Clip, sondern eine Maske, die
   separat mitlaufen muss — und genau die greift auf manchen
   Geraeten/Treibern nicht. Deshalb clippt das Video sich selbst per
   clip-path: ein echter Clip auf der Ebene, anderer Render-Pfad als
   overflow:hidden + border-radius. Kein transform:translateZ(0) am
   Elter mehr — eine zusaetzliche GPU-Ebene hilft nur am Desktop und
   drueckt das Video auf Android eher in den Hardware-Overlay-Pfad,
   in dem die Maske erst fragil wird. */
.hero-media{position:relative;margin-top:0;width:100%;height:680px;border-radius:24px;overflow:hidden;background:var(--navy);
  isolation:isolate;clip-path:inset(0 round 24px)}
.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 15%;
  border-radius:inherit;clip-path:inset(0 round 24px)}
.hero-media::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(to top,rgba(9,26,44,.82) 0%,rgba(9,26,44,.5) 34%,rgba(9,26,44,0) 66%)}
.hero-overlay{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 56px 56px}
.hero-overlay h1{color:#fff;max-width:780px}
/* Sachzeile ueber dem Leitsatz, Teil der Hauptueberschrift: sagt in
   Klartext, worum es geht -- fuer Besucher und fuer Suchmaschinen. */
.h1-kicker{display:block;margin-bottom:14px;font-size:18px;line-height:1.4;font-weight:600;letter-spacing:0}
.hero-overlay .lead{margin:16px 0 32px;font-size:18px;color:#fff;max-width:560px}
.hero-inner{position:relative;z-index:2;width:100%;
  padding:calc(var(--header-h) + var(--gap-hero)) 0 0}
.hero-actions{display:flex;gap:var(--s-text);flex-wrap:wrap;align-items:center}

/* Sections */
section{padding:var(--s-section) 0}
.center{text-align:center}
.center h2,.h2-narrow{max-width:760px}
.center h2{margin:0 auto}
.section-intro{margin:var(--s-text) auto 0;color:var(--ink-soft);font-size:17px;max-width:620px}

/* Anliegen — zentriert, Aufzaehlung mit kurzem Strich */
.criteria{display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--s-block);margin-top:var(--s-block)}
.criterion{text-align:center}
.criterion h3{font-size:18.5px;font-weight:700;margin-bottom:var(--s-tight)}
.criterion ul{list-style:none;display:inline-block;text-align:left;color:var(--ink-soft);font-size:15px;max-width:320px}
.criterion ul li{padding-left:24px;position:relative;margin-bottom:8px}
.criterion ul li::before{content:"";position:absolute;left:0;top:11px;width:14px;height:1.5px;background:var(--teal)}

/* Angebot: sechs Punkte links, Foto rechts */
.angebot-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.72fr);
  gap:var(--s-block);align-items:stretch}
.angebot-head{grid-column:1;max-width:640px}
.promises{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.promise .p-icon{width:54px;height:54px;border-radius:50%;background:rgba(15,108,124,.1);display:flex;align-items:center;justify-content:center;margin:0 0 var(--s-text)}
.promise h3{font-size:17.5px;font-weight:700;margin-bottom:var(--s-tight)}
.promise p{color:var(--ink-soft);font-size:15px;max-width:300px;margin:0 auto}
.angebot-photo{grid-column:2;grid-row:1/span 2;align-self:stretch;min-height:760px;border-radius:24px;background:url('/assets/images/stock/handshake.jpg') 78% 10%/cover no-repeat}
@media(max-width:900px){.angebot-grid{grid-template-columns:1fr;gap:var(--s-grid)}.angebot-head{max-width:none}.angebot-photo{grid-column:1;grid-row:auto;height:320px;min-height:0}}

/* Kontakt-Dialog */
.modal-back{position:fixed;inset:0;display:none;align-items:flex-start;justify-content:center;z-index:200;padding:48px 24px;overflow-y:auto}
.modal-back.open{display:flex}
.modal-scrim{position:fixed;inset:0;background:rgba(14,42,71,.55);backdrop-filter:blur(3px);opacity:0}
.modal{background:#fff;border-radius:24px;max-width:560px;width:100%;padding:40px 40px 32px;position:relative;box-shadow:0 24px 64px rgba(14,42,71,.28);will-change:clip-path,transform}
/* Inhalt blendet erst ein, wenn das Fenster fast ausgewachsen ist */
.modal-body{opacity:1}
.modal-back.animating .modal-body{opacity:0}
.modal h3{font-size:25px;font-weight:700;letter-spacing:-.01em;margin-bottom:var(--s-tight)}
.modal .modal-intro{color:var(--ink-soft);font-size:15.5px;margin-bottom:var(--s-card)}
.modal-close{position:absolute;top:20px;right:20px;background:none;border:0;font-size:26px;line-height:1;color:var(--ink-soft);cursor:pointer;padding:4px 8px;border-radius:8px}
.modal-close:hover{background:#F2F6F7;color:var(--navy)}
.field{display:grid;gap:8px;margin-bottom:20px}
.field label{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--navy)}
.field input,.field textarea,.field select{font-family:inherit;font-size:15.5px;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 16px;width:100%;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(15,108,124,.12)}
.field textarea{min-height:104px;resize:vertical}
.field{align-content:start}
.field [aria-invalid="true"],.field [aria-invalid="true"]:focus{border-color:#8A2B2B;box-shadow:0 0 0 3px rgba(138,43,43,.12)}
.field-error{font-size:15px;line-height:1.45;color:#8A2B2B;margin:0}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-note{font-size:13.5px;color:var(--ink-soft);margin:8px 0 var(--s-card);line-height:1.55}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-error{font-size:15.5px;line-height:1.55;color:#8A2B2B;background:#FBF0F0;border:1px solid #E8CFCF;border-radius:12px;padding:16px;margin:0 0 20px}
.form-error a{color:#8A2B2B}
.modal .btn[aria-busy="true"]{opacity:.55;pointer-events:none}
.modal .btn{width:100%;justify-content:center}
.form-done{text-align:center;padding:12px 0 4px}
.form-done h3{margin-bottom:12px}
@media(max-width:560px){.modal{padding:32px 24px 24px}.field-row{grid-template-columns:1fr}}

/* Unser Ansatz: Ablauf, Zeitleiste links, Foto rechts mitlaufend */
.ablauf-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:var(--s-block);align-items:start}
.ablauf-head{grid-column:1/-1}
.ablauf-grid .timeline{margin-top:0}
.photo-band{position:sticky;top:120px;height:600px;border-radius:24px;overflow:hidden;background:url('/assets/images/stock/meeting.jpg') 55% 35%/cover no-repeat}

/* CTA — full bleed */
.cta{position:relative;color:#fff;padding:var(--s-section) 40px;background:var(--navy);
  text-align:center;max-width:1200px;margin:64px auto;border-radius:24px}
.cta .container{position:relative;z-index:2}
.cta h2{color:#fff;margin:0 auto var(--s-text);max-width:680px}
.cta p{color:rgba(255,255,255,.78);max-width:520px;margin:0 auto 32px}
.cta .cta-note{margin:-24px auto 32px;font-size:14.5px;color:rgba(255,255,255,.62)}

/* Footer */
footer{padding:var(--s-section) 0 32px;font-size:14.5px;color:var(--ink-soft)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-brand img{height:28px;margin-bottom:16px}
footer h4{color:var(--navy);font-size:13px;text-transform:uppercase;letter-spacing:.14em;margin-bottom:16px;font-weight:700}
footer ul{list-style:none}
footer ul li{margin-bottom:var(--s-tight)}
footer a{color:var(--ink-soft)}
footer a:hover{color:var(--teal)}
.footer-bottom{border-top:1px solid var(--line);padding-top:32px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13.5px;color:#93A0AC}

@media(max-width:900px){
  .criteria{grid-template-columns:1fr;gap:var(--s-grid)}
  .footer-grid{grid-template-columns:1fr}
  .hero-inner{padding:calc(var(--header-h) + var(--s-card)) 0 0}
  .hero-media{height:520px}
  /* Am Handy nur Leitsatz und eine Schaltflaeche ueber dem Video:
     Leitsatz oben am Bild, Schaltflaeche unten. Der Lead-Satz und
     „So laeuft die Uebergabe" entfallen hier; derselbe Verweis steht
     weiter unten unter „Unser Angebot". */
  .hero-overlay{top:0;display:flex;flex-direction:column;
    justify-content:space-between;padding:32px 24px}
  .hero-overlay .lead{display:none}
  .hero-actions .btn-ghost{display:none}
  /* Abdunklung oben und unten, weil oben jetzt Text steht */
  .hero-media::after{background:linear-gradient(to bottom,
    rgba(9,26,44,.82) 0%,rgba(9,26,44,.40) 32%,
    rgba(9,26,44,.32) 56%,rgba(9,26,44,.80) 100%)}
  /* Ecken zusaetzlich uebermalen statt nur clippen. Greift auch dann,
     wenn der Browser die Video-Ebene gar nicht am runden Rand
     beschneidet (Firefox am Handy, alte Versionen und manche
     GPU-Treiber): vier Viertelkreis-Keile in Seitenweiss decken den
     Zwickel zwischen Rechteckecke und Rundung ab. Nur hier am Handy,
     weil der Grundriss (body::before) ab 900px abgeschaltet ist und
     der Grund dahinter deshalb rein weiss ist — am Desktop wuerde
     Weiss die Zeichnung ausstanzen. Die Keile liegen innerhalb der
     Box, weil overflow:hidden alles abschneiden wuerde, was nach
     aussen ragt. */
  .hero-media::before{content:"";position:absolute;inset:0;z-index:3;
    pointer-events:none;background-repeat:no-repeat;background-size:24px 24px;
    background-position:top left,top right,bottom left,bottom right;
    background-image:
      radial-gradient(circle 24px at bottom right,transparent 0 23.5px,#fff 24.5px),
      radial-gradient(circle 24px at bottom left,transparent 0 23.5px,#fff 24.5px),
      radial-gradient(circle 24px at top right,transparent 0 23.5px,#fff 24.5px),
      radial-gradient(circle 24px at top left,transparent 0 23.5px,#fff 24.5px)}

  /* Abschluss-Block: schmalere Raender, kleinere Ueberschrift,
     Schaltflaeche ueber die volle Breite statt dreizeilig */
  .cta{margin:40px 24px;padding:48px 24px;border-radius:18px}
  .cta .container{padding:0}
  .cta h2{font-size:25px;line-height:1.22}
  .cta p{font-size:15px;margin-bottom:var(--s-card)}
  .cta .cta-note{font-size:13.5px;margin:-16px auto var(--s-card)}
  .cta .btn{width:100%;justify-content:center;padding:16px;font-size:14.5px}
  .ablauf-grid{grid-template-columns:1fr;gap:var(--s-grid)}
  .photo-band{position:static;height:320px}
  .nav ul{display:none}
  .nav ul.open{display:flex;position:absolute;top:84px;left:0;right:0;background:#fff;flex-direction:column;padding:24px;border-bottom:1px solid var(--line);gap:var(--s-text)}
  .menu-toggle{display:block}
}

/* ---- Unterseiten ---- */
.page-hero{position:relative;color:var(--navy);padding:0}
/* Nur ein Kopf MIT Bild braucht den Weissraum darunter. Ein reiner
   Textkopf („Ueber Manereal") kommt mit dem Abstand der naechsten
   Sektion aus — sonst stehen dort 144 px zwischen Lead und Portraits. */
.page-hero.with-media{padding-bottom:var(--s-section)}
.page-hero-media{margin-top:var(--gap-hero);width:100%;height:460px;border-radius:24px;background-image:var(--pg);background-size:cover;background-position:var(--pgpos,center 65%)}
.page-hero-inner{position:relative;z-index:2;width:100%;
  padding:calc(var(--header-h) + var(--gap-page)) 0 0}
.page-hero h1{font-size:clamp(32px,4vw,48px)}
.page-hero .lead{margin-top:var(--s-text);font-size:17.5px;color:var(--ink-soft);max-width:620px}

/* Symbol, Titel, Text zentriert:
   Vision (vier Spalten) und Versprechen auf Ueber uns (zwei Spalten) */
.challenges{display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--s-block) var(--s-grid);margin-top:var(--s-block)}
.challenge{text-align:center}
.challenge h3{font-size:18.5px;font-weight:700;margin-bottom:var(--s-tight)}
.challenge .ch-problem{color:var(--ink-soft);font-size:15px;max-width:430px;margin:0 auto var(--s-text)}

/* Timeline */
.timeline{max-width:760px;margin:var(--s-block) auto 0;text-align:left;position:relative}
.timeline::before{content:"";position:absolute;left:26px;top:10px;bottom:10px;width:2px;background:rgba(15,108,124,.25)}
.tl-step{position:relative;padding:0 0 var(--s-grid) 84px}
.tl-step:last-child{padding-bottom:0}
.tl-dot{position:absolute;left:0;top:0;width:52px;height:52px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13.5px;z-index:1}
.tl-phase{color:var(--teal);font-weight:700;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase}
/* Eigene line-height: sonst erbt die Ueberschrift die 1.65 des
   Fliesstexts und die zwei Zeilen, in die sie am Handy umbricht,
   stehen viel zu weit auseinander. */
.tl-step h3{font-size:18.5px;line-height:1.25;margin:4px 0 var(--s-tight)}
.tl-step p{color:var(--ink-soft);font-size:15px;max-width:560px}

/* FAQ */
.faq{max-width:760px;margin:var(--s-block) auto 0;text-align:left}
.faq details{border-bottom:1px solid var(--line);padding:var(--s-card) 4px}
.faq summary{cursor:pointer;font-weight:600;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--teal);font-size:24px;font-weight:600;flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin-top:var(--s-tight);color:var(--ink-soft);font-size:15px}

/* Team */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-block);margin-top:var(--s-block)}
.member{text-align:center}
.member .avatar{width:180px;height:180px;border-radius:50%;overflow:hidden;margin:0 auto var(--s-card);box-shadow:0 16px 40px rgba(14,42,71,.16)}
.member .avatar img{width:100%;height:100%;object-fit:cover}
.member h3{font-size:19px;font-weight:700}
.member p{color:var(--ink-soft);font-size:14.5px;max-width:300px;margin:0 auto}

.team-2{grid-template-columns:repeat(2,1fr);max-width:820px;margin-left:auto;margin-right:auto}
.team-1{grid-template-columns:1fr;max-width:280px;margin-left:auto;margin-right:auto}
.team-4{grid-template-columns:repeat(4,1fr);max-width:1040px;margin-left:auto;margin-right:auto}
#wer-dahinter .avatar{width:150px;height:150px}

/* Schaltflaeche am Ende einer Sektion - ueberall derselbe Abstand */
.section-action{margin-top:var(--s-block)}
@media(max-width:900px){.team-2{grid-template-columns:1fr}}

/* Legal */
.legal{max-width:780px;margin:0 auto;
  padding:calc(var(--header-h) + var(--gap-page)) 24px 96px;position:relative;z-index:1}
.legal h1{font-size:clamp(30px,3.6vw,42px);margin-bottom:32px}
.legal h2{font-size:20px;margin:32px 0 var(--s-tight)}
.credits-wrap{overflow-x:auto;margin:var(--s-text) 0 8px;border:1px solid var(--line);border-radius:16px}
table.credits{width:100%;border-collapse:collapse;font-size:15px;line-height:1.55}
table.credits th{text-align:left;font-weight:600;color:var(--navy);background:#FAF9F7;padding:var(--s-text) 20px;border-bottom:1px solid var(--line);white-space:nowrap}
table.credits td{padding:var(--s-text) 20px;border-bottom:1px solid var(--line);color:var(--ink-soft);vertical-align:top}
table.credits tr:last-child td{border-bottom:0}
table.credits td:first-child{color:var(--navy)}
table.credits td:last-child{white-space:nowrap}
@media(max-width:640px){table.credits{font-size:14px}table.credits th,table.credits td{padding:var(--s-tight) var(--s-text)}}

.legal p, .legal li{color:var(--ink-soft);font-size:15.5px}
.legal ul{padding-left:24px;margin:var(--s-tight) 0}


@media(max-width:900px){
  .challenges{grid-template-columns:1fr;gap:var(--s-grid)}
  .team{grid-template-columns:1fr}
}

/* ---- Vision: Label oben, Satz darunter ---- */
.vision-split{max-width:900px;margin:0 auto;padding:var(--s-block) 0;text-align:center;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.vision-split .eyebrow{margin:0 0 20px}
.vision-split .vq-text{font-size:clamp(21px,2.1vw,29px);line-height:1.35;
  font-weight:400;letter-spacing:-.008em;color:var(--navy);max-width:720px;
  margin:0 auto;text-align:center;text-wrap:balance}
@media(max-width:820px){
  .vision-split{padding:40px 0}
  .vision-split .eyebrow{margin-bottom:16px}
}

/* ---- Vision: die vier Schlagwoerter mit Erklaertext ---- */
#vision .cw-keywords{grid-template-columns:repeat(4,1fr);gap:var(--s-grid) 40px;
  margin-top:var(--s-block)}
#vision .cw-keywords .p-icon{display:flex;align-items:center;justify-content:center;
  margin:0 auto var(--s-text)}
#vision .cw-keywords .p-icon svg{width:48px;height:48px;stroke-width:1.5}
#vision .cw-keywords .challenge h3{font-size:19px;font-weight:700;line-height:1.3;
  margin-bottom:var(--s-tight);color:var(--navy);text-wrap:balance}
#vision .cw-keywords .ch-problem{font-size:15px;line-height:1.55;max-width:none;
  margin:0;color:var(--ink-soft)}

@media(max-width:1100px){
  #vision .cw-keywords{grid-template-columns:repeat(2,1fr);gap:var(--s-block) var(--s-grid)}
}
@media(max-width:640px){
  #vision .cw-keywords{grid-template-columns:1fr;gap:var(--s-grid)}
  #vision .cw-keywords .p-icon svg{width:40px;height:40px}
}

/* ---- Hintergrund: Grundriss in den Aussenspalten ---- */
/* Auf weissem Grund in Navy bei 13 % (wirkt grau-blau),
   im grauen Band dieselbe Zeichnung bei 34 %. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:url("/assets/images/brand/blueprint.svg");background-size:700px;
  opacity:.13;
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 9%,transparent 27%,transparent 73%,#000 91%,#000 100%);mask-image:linear-gradient(to right,#000 0,#000 9%,transparent 27%,transparent 73%,#000 91%,#000 100%)}

.tinted, #wer-dahinter, #ablauf, #faq, #versprechen-4{position:relative;background:#E7EEF1}
.tinted > *, #wer-dahinter > *, #ablauf > *, #faq > *,
#versprechen-4 > *{position:relative;z-index:1}
.tinted::before, #wer-dahinter::before, #ablauf::before, #faq::before,
#versprechen-4::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("/assets/images/brand/blueprint.svg");
  background-attachment:fixed;background-size:700px;opacity:.34;
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 9%,transparent 27%,transparent 73%,#000 91%,#000 100%);mask-image:linear-gradient(to right,#000 0,#000 9%,transparent 27%,transparent 73%,#000 91%,#000 100%)}

@media(max-width:900px){
  body::before, .tinted::before, #wer-dahinter::before, #ablauf::before,
  #faq::before, #versprechen-4::before{display:none}
}

/* ---- Unser Ansatz: Herausforderungen als Karten,
       Loesung unten auf getoenter Flaeche ---- */
.ch-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-card);
  margin-top:var(--s-block);text-align:left}
.ch-card{background:#fff;border:1px solid var(--line);border-radius:18px;
  overflow:hidden;display:flex;flex-direction:column}
.ch-card h3{font-size:21px;font-weight:700;color:var(--navy);margin-bottom:var(--s-tight)}
.chv-top{padding:32px 32px var(--s-card)}
.ch-card-problem{color:var(--ink-soft);font-size:16px;line-height:1.6;margin:0}
.chv-bottom{margin-top:auto;padding:var(--s-card) 32px 32px;background:#EAF3F4;
  border-top:1px solid rgba(15,108,124,.18)}
.chv-sol{color:var(--navy);font-size:16px;line-height:1.6;margin:0}
@media(max-width:820px){
  .ch-cards{grid-template-columns:1fr;gap:var(--s-card)}
  .chv-top{padding:var(--s-card) 24px 20px}
  .chv-bottom{padding:20px 24px var(--s-card)}
}

/* ---- Ueber uns: Hausverwaltungsteam,
       Symbol und Titel links, Text rechts ---- */
/* Ohne Trennstrich: Hausverwaltungsteam und die vier Portraits
   daruber gehoeren zusammen. Der Strich sitzt stattdessen vor dem
   Beirat — siehe #beirat weiter unten. */
.hv-team{display:grid;grid-template-columns:240px 1fr;gap:48px;align-items:center;
  max-width:1000px;margin:var(--s-block) auto 0;padding-top:var(--s-block);
  text-align:left}
.hv-team-head{text-align:center}
.hv-icon{width:88px;height:88px;border-radius:50%;background:#E7EDEF;
  display:flex;align-items:center;justify-content:center;margin:0 auto var(--s-text)}
.hv-team h3{font-size:20px;margin:0;text-wrap:balance}
.hv-team p{color:var(--ink-soft);font-size:16px;line-height:1.65;margin:0}
.hv-team p + p{margin-top:var(--s-text)}
@media(max-width:820px){
  /* Untereinander und zentriert wie der Rest der Sektion */
  .hv-team{grid-template-columns:1fr;gap:24px;text-align:center}
}

/* ---- Ueber uns: Versprechen mit groesseren Symbolen ---- */
#versprechen-4 .p-icon{display:flex;align-items:center;justify-content:center;
  margin:0 auto var(--s-text)}
#versprechen-4 .p-icon svg{width:44px;height:44px;stroke-width:1.5}
#versprechen-4 .ch-problem{margin-bottom:0}

/* ---- Kompetenzen: Verzeichnis mit kleinen Symbolen ---- */
.kv-a{max-width:980px;margin:var(--s-block) auto 0;text-align:left}
.kv-a-row{display:grid;grid-template-columns:360px 1fr;gap:40px;align-items:center;
  padding:var(--s-card) 0;border-top:1px solid var(--line)}
.kv-a-row:last-child{border-bottom:1px solid var(--line)}
.kv-a-row h3{display:flex;align-items:center;gap:16px;font-size:20px;font-weight:700;
  color:var(--navy);margin:0}
.kv-a-row p{font-size:17px;line-height:1.6;color:var(--ink-soft);margin:0}
.kv-a-ic{flex:0 0 auto;display:flex}
.kv-a-ic svg{width:28px;height:28px;stroke:var(--teal);stroke-width:1.5}
@media(max-width:900px){
  .kv-a-row{grid-template-columns:1fr;gap:8px;padding:var(--s-card) 0}
}

/* ---- Ueber uns: Kopf zentriert, fuehrt direkt zum Team ---- */
[data-page="ueber-uns"] .page-hero .container{text-align:center}
[data-page="ueber-uns"] .page-hero .lead{max-width:640px;margin-left:auto;margin-right:auto}
#menschen{padding-top:var(--s-section);padding-bottom:var(--s-block)}
#menschen .team{margin-top:0}
/* Der Trennstrich sitzt hier, nicht mehr innerhalb von „Die Menschen
   dahinter". Er trennt jetzt das Team vom Beirat — also zwei
   Personenkreise voneinander — statt das Team in sich zu zerteilen.
   Gleiche Breite wie zuvor (1000 px), damit die Optik gleich bleibt.

   Stand 28.09.2026: Die Sektion #beirat ist im HTML auskommentiert, diese
   beiden Regeln greifen also gerade ins Leere. Sie bleiben absichtlich
   stehen, damit das Wiedereinsetzen des Beirats eine reine HTML-Aenderung
   ist. Auf „Die Menschen dahinter" folgt derzeit direkt der getoente
   Block #versprechen-4 -- der Farbwechsel trennt dort von selbst, ein
   Strich wird nicht gebraucht. */
#beirat{padding-top:0}
#beirat .container::before{content:"";display:block;max-width:1000px;
  margin:0 auto var(--s-block);border-top:1px solid var(--line)}

/* ---- Startseite am Handy ----
   Alles hier gilt nur unter 900 px. Am Desktop bleibt alles, wie es ist:
   die .m-* Blocke sind dort ausgeblendet, die Fassungen des Bestands
   werden nur unter 900 px ersetzt. */
.m-acc, .m-people2, .m-h2{display:none}
@media(max-width:900px){
  /* Bestandsfassungen weichen den Handy-Fassungen.
     Die vier Vision-Punkte entfallen am Handy ganz,
     ebenso der ganze Abschnitt „Unser Anliegen" (.tinted). */
  #vision .cw-keywords, #angebot .promises,
  #wer-dahinter .team-4, .tinted{display:none}

  /* Kopf der Unterseiten: weniger Luft ueber der Eyebrow.
     Steht hier am Ende, weil .page-hero-inner weiter oben definiert ist. */
  .page-hero-inner{padding-top:calc(var(--header-h) + var(--gap-page))}
  .legal{padding-top:calc(var(--header-h) + var(--gap-page))}

  /* Mit dem Anliegen ist auch das graue Band weg. Damit sich helle und
     getoente Flaechen weiter abwechseln, liegt die Vision jetzt im Band. */
  #vision{background:#E7EEF1;padding:var(--s-section) 0}
  .vision-split{border-top:0;border-bottom:0;padding:0}

  /* Am Handy traegt das Angebot die Ueberschrift des dort
     entfallenen Abschnitts „Unser Anliegen". */
  #angebot h2:not(.m-h2){display:none}
  #angebot h2.m-h2{display:block}

  /* Kleine Fassung des Fotos: 1440 x 960 statt 8530 x 5687,
     120 KB statt 16,1 MB. Angezeigt wird es mit 327 x 320 px. */
  .angebot-photo{background-image:url('/assets/images/stock/handshake-small.jpg')}

  /* Angebot: Klappliste */
  .m-acc{display:block;text-align:left}
  .m-acc details{border-bottom:1px solid var(--line)}
  .m-acc details:first-child{border-top:1px solid var(--line)}
  .m-acc summary{list-style:none;display:flex;align-items:center;gap:12px;
    padding:var(--s-text) 0;font-size:16px;font-weight:700;cursor:pointer;text-align:left}
  .m-acc summary::-webkit-details-marker{display:none}
  .m-acc summary svg{flex:none;width:24px;height:24px;stroke-width:1.5}
  .m-acc summary::after{content:"+";margin-left:auto;color:var(--teal);
    font-size:22px;font-weight:600;line-height:1}
  .m-acc details[open] summary::after{content:"\2212"}
  .m-acc details p{margin:0 0 var(--s-text);font-size:14.5px;line-height:1.5;color:var(--ink-soft)}

  /* Personen nebeneinander */
  .m-people2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-text);margin-top:40px}
  .m-people2 .avatar{width:112px;height:112px;border-radius:50%;overflow:hidden;
    margin:0 auto var(--s-tight);box-shadow:0 16px 40px rgba(14,42,71,.16)}
  .m-people2 img{width:100%;height:100%;object-fit:cover}
  .m-people2 h3{font-size:16px;font-weight:700;text-align:center;margin:0}
}

/* ---- Nur ab Laptop-Breite ----
   Zwischen Bildunterkante und „Unsere Vision" lagen 200 px: 72 aus dem
   Hero, 72 aus der Sektion, 56 aus dem Zitatblock. Der Anschluss ans
   Bild traegt die Haelfte davon, das Bild bringt seine Ruhe selbst mit.
   Am Handy bleibt alles, wie es war. */
@media(min-width:901px){
  .hero{padding-bottom:0}
}

/* ---- Ueber uns: Abstand vor dem Abschluss-Block ----
   Auf der Startseite endet vor der Box das graue Band, die weisse Luft
   ist dort nur der Aussenrand der Box. Hier ist alles weiss, deshalb
   lagen 72 + 64 px offen. Der Innenabstand entfaellt, die weisse Luft
   entspricht damit der Startseite. */
[data-page="ueber-uns"] #kompetenzen{padding-bottom:0}