/* ============================================================
   Schriften — selbst ausgeliefert, nicht von Google

   Bis zum 24.08.2026 lud die Seite Cormorant Garamond und Jost von
   fonts.googleapis.com. Damit ging die IP-Adresse jedes Besuchers an
   Google, ohne dass er zugestimmt haette — genau der Punkt, wegen dem
   das LG Muenchen 2022 einen Website-Betreiber verurteilt hat, und
   genau das Gegenteil dessen, was die Datenschutzerklaerung behauptete.

   Jetzt liegen die Dateien im Repo und werden vom eigenen Server
   ausgeliefert. Es geht keine Anfrage mehr an eine fremde Domain.

   Es sind VARIABLE Schriften: eine Datei je Familie, Stil und Subset
   deckt alle Gewichte ab. Deshalb steht in font-weight ein Bereich und
   keine einzelne Zahl. Kyrillisch und Vietnamesisch sind bewusst nicht
   dabei — auf dieser Seite kommt beides nicht vor.

   unicode-range sorgt dafuer, dass latin-ext nur geladen wird, wenn
   auf der Seite tatsaechlich ein Zeichen daraus steht.

   Aktualisieren: tools/fetch-fonts.py
   ============================================================ */

@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic;
  font-weight:300 700;
  font-display:swap;
  src:url('/assets/fonts/cormorant-garamond-italic-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-ext */
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic;
  font-weight:300 700;
  font-display:swap;
  src:url('/assets/fonts/cormorant-garamond-italic-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;   /* latin */
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('/assets/fonts/cormorant-garamond-normal-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-ext */
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('/assets/fonts/cormorant-garamond-normal-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;   /* latin */
}
@font-face{
  font-family:'Jost';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/assets/fonts/jost-normal-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-ext */
}
@font-face{
  font-family:'Jost';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/assets/fonts/jost-normal-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;   /* latin */
}

/* ============================================================
   Deine Nordhilfe — gemeinsames Stylesheet
   Startseite + Leistungs-Unterseiten teilen sich diese Datei.
   ============================================================ */
:root{
  --navy:#12324A;
  --navy-2:#0A2032;
  --petrol:#2E7C86;
  --petrol-light:#8FC4CB;
  --blue:#1E6FB8;
  --blue-dark:#155091;
  --blue-light:#8FC4E8;
  --accent:#2F86C9;
  --sand:#F3F8FC;
  --sand-2:#E7F1F9;
  --ink:#22323C;
  --muted:#5c6d78;
  --line:rgba(18,50,74,.10);
  --white:#ffffff;
  --shadow:0 22px 60px -26px rgba(10,32,50,.5);
  --shadow-sm:0 12px 30px -18px rgba(10,32,50,.42);
  --radius:20px;
  --radius-sm:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Jost',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:var(--sand);
  line-height:1.62;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;line-height:1.1;font-weight:600;letter-spacing:.2px;color:var(--navy)}
/* Deutsche Komposita wie „Eigentümergemeinschaften" sprengen auf schmalen
   Bildschirmen jede Zeile — Silbentrennung statt seitlichem Überlauf. */
body{overflow-wrap:break-word}
/* Trennung nur dort, wo sie gebraucht wird — auf großen Schirmen sehen
   getrennte Überschriften unruhig aus. */
@media(max-width:700px){h1,h2,h3{-webkit-hyphens:auto;hyphens:auto}}
a{color:inherit;text-decoration:none}

/* ---------- Sprunglink (Tastatur) ----------
   Erstes fokussierbares Element der Seite. Sichtbar nur bei Fokus, sonst
   ausserhalb des Bildschirms — Screenreader- und Tastaturnutzer springen
   damit an Header und Anruf-Leiste vorbei direkt in den Inhalt. */
.skip{
  position:absolute;left:16px;top:-64px;z-index:200;
  display:inline-block;padding:12px 20px;border-radius:var(--radius-sm);
  background:var(--navy);color:#fff;font-size:.95rem;font-weight:500;
  box-shadow:var(--shadow-sm);transition:top .16s ease;
}
.skip:focus{top:16px;outline:2px solid var(--accent);outline-offset:2px}
/* Das Sprungziel selbst bekommt keinen Fokusrahmen — es ist nur Ankerpunkt. */
#main:focus{outline:none}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.gold-rule{width:56px;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Jost',sans-serif;font-size:.72rem;font-weight:400;letter-spacing:.28em;text-transform:uppercase;
  color:var(--petrol);
}
.eyebrow::before{content:"";width:24px;height:1.5px;background:linear-gradient(90deg,var(--blue-light),var(--blue));border-radius:2px}

/* ---------- Header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(243,248,252,.86);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px}
.brand{display:flex;align-items:center;gap:13px}
.brand .mark{width:46px;height:46px;flex:0 0 auto}
.brand .wm{display:flex;flex-direction:column;line-height:1}
.brand .wm .e{font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:var(--petrol);font-weight:400}
.brand .wm .n{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.5rem;color:var(--navy);margin-top:1px}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links > a,.nav-links .drop > button{font-weight:400;font-size:.92rem;color:var(--navy);transition:color .2s}
.nav-links > a:hover{color:var(--blue)}
.nav-links a[aria-current="page"]{color:var(--blue)}

/* Leistungen-Dropdown */
.drop{position:relative}
.drop > button{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:none;cursor:pointer;font-family:inherit;padding:0;
}
.drop > button svg{width:13px;height:13px;transition:transform .2s}
.drop[data-open="true"] > button{color:var(--blue)}
.drop[data-open="true"] > button svg{transform:rotate(180deg)}
.drop-menu{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow);padding:8px;min-width:238px;
  opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.drop[data-open="true"] .drop-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop-menu a{display:block;padding:10px 14px;border-radius:10px;font-size:.9rem;color:var(--navy);transition:background .16s,color .16s}
.drop-menu a:hover,.drop-menu a:focus-visible{background:var(--sand-2);color:var(--blue)}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Jost',sans-serif;font-weight:500;font-size:.92rem;letter-spacing:.02em;
  padding:12px 24px;border-radius:999px;cursor:pointer;border:none;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s, background .18s;
}
.btn-primary{background:linear-gradient(135deg,#2F86C9,#155091);color:#fff;box-shadow:0 12px 26px -14px rgba(21,80,145,.9)}
.btn-primary:hover{filter:brightness(1.06);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--navy);border:1px solid var(--accent)}
.btn-ghost:hover{background:rgba(30,111,184,.12)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
@media(max-width:980px){.nav-links{display:none}}

/* Bis 360 px passt „Jetzt anrufen" neben die Marke (nachgemessen bei 320/360/390).
   Erst darunter überlappt die Beschriftung die Wortmarke — dort wird der Button
   zum reinen Icon, die Beschriftung steckt weiter im aria-label. */
@media(max-width:359px){
  .cta-call .cta-text{display:none}
  .cta-call{padding:12px;border-radius:50%}
  .cta-call svg{margin:0}
  .nav{height:68px}
  .brand .mark{width:40px;height:40px}
  .brand .wm .n{font-size:1.3rem}
}
@media(max-width:400px){
  .wrap{padding:0 18px}
}

/* ---------- WhatsApp ----------
   Runder Knopf unten rechts, nur auf großen Schirmen: mobil sitzt WhatsApp
   bereits in der Anruf-Leiste, zwei Knöpfe übereinander wären Doppelung.
   Farbe bewusst Nordhilfe-Blau statt WhatsApp-Grün — der Knopf gehört
   zur Seite, nicht zu Meta. */
.wa-float{
  position:fixed;right:24px;bottom:24px;z-index:70;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#2F86C9,#155091);color:#fff;
  box-shadow:0 16px 36px -14px rgba(10,32,50,.65);
  transition:transform .18s ease,box-shadow .18s ease;
}
.wa-float:hover{transform:translateY(-3px);box-shadow:0 22px 44px -14px rgba(10,32,50,.7)}
.wa-float svg{width:28px;height:28px}
@media(max-width:980px){.wa-float{display:none}}
@media (prefers-reduced-motion: reduce){.wa-float,.wa-float:hover{transition:none;transform:none}}

/* ---------- Sticky Anruf-Leiste (mobil) ---------- */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  gap:1px;background:var(--line);
  box-shadow:0 -10px 30px -18px rgba(10,32,50,.7);
  padding-bottom:env(safe-area-inset-bottom);
}
.callbar a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 10px;font-size:.94rem;font-weight:500;font-family:'Jost',sans-serif;
}
.callbar .cb-call{background:linear-gradient(135deg,#2F86C9,#155091);color:#fff}
.callbar .cb-wa{background:#fff;color:var(--navy)}
.callbar .cb-wa svg{color:#155091}
.callbar svg{width:17px;height:17px;flex:0 0 auto}
@media(max-width:980px){
  .callbar{display:flex}
  body{padding-bottom:62px}
}

/* ---------- Hero (Startseite) ---------- */
.hero{position:relative;overflow:hidden;background:var(--sand)}
.hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(1100px 620px at 84% -10%, rgba(46,124,134,.14), transparent 60%),
             radial-gradient(720px 520px at -6% 112%, rgba(30,111,184,.16), transparent 60%);
}
.hero-inner{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:58px;align-items:center;padding:78px 0 92px}
.hero h1{font-size:clamp(2.7rem,5.2vw,4.2rem);margin:22px 0 22px;font-weight:600}
.hero h1 .accent{color:var(--blue);font-style:italic}
.hero p.lead{font-size:1.14rem;color:var(--muted);max-width:36ch;margin-bottom:32px;font-weight:300}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:32px}
.hero .gold-rule{margin-bottom:26px}
.trust-row{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--line);
  padding:9px 15px;border-radius:999px;font-size:.82rem;font-weight:400;color:var(--navy);
  box-shadow:var(--shadow-sm);
}
.chip svg{width:15px;height:15px;color:var(--blue)}

/* hero photo */
.hero-photo{position:relative;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/5;border:1px solid rgba(30,111,184,.35);background:var(--sand-2)}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,32,50,0) 52%,rgba(10,32,50,.6))}
.hero-badge{position:absolute;top:18px;left:18px;background:rgba(243,248,252,.94);backdrop-filter:blur(6px);border-radius:999px;padding:8px 15px;font-size:.78rem;font-weight:400;color:var(--navy);display:flex;align-items:center;gap:8px;box-shadow:var(--shadow-sm);z-index:2;letter-spacing:.02em}
.hero-badge svg{width:15px;height:15px;color:var(--blue)}
.callout{
  position:absolute;left:20px;bottom:20px;right:20px;z-index:2;
  background:linear-gradient(135deg,#2F86C9,#155091);border-radius:14px;padding:13px 17px;
  display:flex;align-items:center;gap:11px;font-size:.88rem;font-weight:500;color:#fff;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.6);
  transition:filter .18s ease, transform .18s ease;
}
a.callout:hover{filter:brightness(1.07);transform:translateY(-2px)}
.callout .arrow{margin-left:auto;flex:0 0 auto;display:flex}
.callout .arrow svg{width:16px;height:16px}
@media(max-width:860px){
  .hero-inner{grid-template-columns:1fr;gap:40px;padding:52px 0 64px}
  .hero p.lead{max-width:none}
}

/* ---------- Section basics ---------- */
section{padding:94px 0}
.sec-head{max-width:640px;margin-bottom:56px}
.sec-head .gold-rule{margin:16px 0 16px}
.sec-head h2{font-size:clamp(2.1rem,3.6vw,3rem);margin-bottom:14px;font-weight:600}
.sec-head p{color:var(--muted);font-size:1.05rem;font-weight:300}
.center{text-align:center;margin-left:auto;margin-right:auto}
.center .eyebrow{justify-content:center}
.center .gold-rule{margin-left:auto;margin-right:auto}

/* ---------- Leistungen ---------- */
#leistungen{background:linear-gradient(180deg,#fff,#F3F8FC)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:transform .22s ease, box-shadow .22s ease;position:relative;overflow:hidden;
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card-body{padding:30px 28px 32px;display:flex;flex-direction:column;flex:1}
.card-ico{width:54px;height:54px;border-radius:15px;background:linear-gradient(150deg,#17415C,#0F2C41);display:grid;place-items:center;margin-bottom:20px;box-shadow:var(--shadow-sm)}
.card-ico svg{width:26px;height:26px;color:var(--blue-light)}
.card h3{font-size:1.55rem;margin-bottom:10px;font-weight:600}
.card > .card-body > p{color:var(--muted);font-size:.94rem;margin-bottom:18px;font-weight:300}
.card ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.card li{display:flex;align-items:flex-start;gap:9px;font-size:.88rem;color:var(--navy);font-weight:300}
.card li svg{width:15px;height:15px;color:var(--blue);flex-shrink:0;margin-top:3px}
.card-more{
  margin-top:auto;padding-top:20px;display:inline-flex;align-items:center;gap:8px;
  font-size:.88rem;font-weight:500;color:var(--blue);transition:gap .18s ease;
}
.card-more:hover{gap:13px}
.card-more svg{width:15px;height:15px}
@media(max-width:860px){.cards{grid-template-columns:1fr}}

/* card media */
.card-media{height:190px;overflow:hidden;position:relative;background:var(--sand-2)}
.card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.card:hover .card-media img{transform:scale(1.05)}
.card-media.placeholder{background:linear-gradient(150deg,#2E7C86,#12324A);display:grid;place-items:center}
.card-media.placeholder > svg{width:44px;height:44px;color:rgba(255,255,255,.85)}
.card-media .ph-tag{position:absolute;bottom:10px;right:10px;background:rgba(10,32,50,.55);color:#fff;font-size:.64rem;font-weight:400;padding:4px 10px;border-radius:999px;letter-spacing:.08em;text-transform:uppercase}

/* ---------- Alles-Band ---------- */
.band{background:radial-gradient(130% 140% at 15% 0%,#17415C,#0A2032);color:#fff}
.band .wrap{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}
.band h2{color:var(--sand);font-size:clamp(2.1rem,3.6vw,3rem);margin:16px 0 18px;font-weight:600}
.band .eyebrow{color:var(--blue-light)}
.band p{color:rgba(243,248,252,.76);font-size:1.04rem;margin-bottom:14px;font-weight:300}
.band p em{color:var(--blue-light);font-style:italic}
.tag-cloud{display:flex;flex-wrap:wrap;gap:11px}
.tag{background:rgba(255,255,255,.06);border:1px solid rgba(30,111,184,.28);padding:11px 17px;border-radius:12px;font-size:.9rem;font-weight:300;display:flex;align-items:center;gap:9px;color:var(--sand)}
.tag svg{width:16px;height:16px;color:var(--blue-light)}
@media(max-width:860px){.band .wrap{grid-template-columns:1fr;gap:32px}}

/* ---------- ADS Prinzip ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px;box-shadow:var(--shadow-sm);position:relative}
.step .letter{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:600;color:var(--navy);margin-bottom:20px;background:linear-gradient(135deg,#8FC4E8,#2F86C9)}
.step h3{font-size:1.4rem;margin-bottom:8px;font-weight:600}
.step p{color:var(--muted);font-size:.92rem;font-weight:300}
.step .tick{position:absolute;top:40px;right:30px;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--petrol);font-weight:400}
@media(max-width:860px){.steps{grid-template-columns:1fr}}

/* ---------- Vermittler ---------- */
#vermittler{background:linear-gradient(180deg,#F3F8FC,#fff)}
.net{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.net h2{font-size:clamp(2.1rem,3.6vw,3rem);margin:16px 0 16px;font-weight:600}
.net > div > p{color:var(--muted);font-size:1.04rem;margin-bottom:14px;font-weight:300}
.net-visual{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow-sm)}
.net-row{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.net-row:last-of-type{border-bottom:none}
.net-dot{width:46px;height:46px;border-radius:12px;background:var(--sand);border:1px solid rgba(30,111,184,.3);display:grid;place-items:center;flex-shrink:0}
.net-dot svg{width:21px;height:21px;color:var(--petrol)}
.net-row b{display:block;font-size:.98rem;color:var(--navy);font-weight:500}
.net-row span{font-size:.84rem;color:var(--muted);font-weight:300}
.partner-note{margin-top:18px;font-size:.82rem;color:var(--muted);background:var(--sand);border:1px solid var(--line);border-radius:12px;padding:12px 15px;font-weight:300}
@media(max-width:860px){.net{grid-template-columns:1fr;gap:32px}}

/* ---------- Kontakt ---------- */
/* B7: Petrol-Rest raus — Kontaktblock zieht auf die Navy/Blau-Palette der Seite. */
#kontakt{background:radial-gradient(130% 130% at 80% 0%,#17415C,#0A2032);color:#fff}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:start}
#kontakt .eyebrow{color:var(--blue-light)}
#kontakt h2{color:var(--sand);font-size:clamp(2.1rem,3.6vw,3rem);margin:16px 0 16px;font-weight:600}
#kontakt .lead{color:rgba(243,248,252,.82);font-size:1.06rem;margin-bottom:30px;font-weight:300}
.contact-item{display:flex;align-items:center;gap:15px;margin-bottom:18px}
a.contact-item{transition:transform .18s ease}
a.contact-item:hover{transform:translateX(3px)}
a.contact-item:hover .ci{background:rgba(255,255,255,.18);border-color:var(--blue-light)}
.contact-item .ci{width:48px;height:48px;border-radius:13px;background:rgba(255,255,255,.10);border:1px solid rgba(30,111,184,.3);display:grid;place-items:center;flex-shrink:0;transition:background .18s,border-color .18s}
.contact-item .ci svg{width:21px;height:21px;color:var(--blue-light)}
.contact-item b{display:block;font-size:1.04rem;font-weight:500}
.contact-item span{font-size:.86rem;color:rgba(243,248,252,.68);font-weight:300}
.hours-note{
  margin-top:26px;padding:15px 18px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.07);border:1px solid rgba(143,196,232,.28);
  font-size:.88rem;color:rgba(243,248,252,.82);font-weight:300;
}
.hours-note b{color:var(--sand);font-weight:500}
.form{background:#fff;border-radius:var(--radius);padding:32px;box-shadow:var(--shadow);color:var(--ink)}
.form h3{font-size:1.5rem;margin-bottom:6px;font-weight:600}
.form .fsub{color:var(--muted);font-size:.9rem;margin-bottom:20px;font-weight:300}
.field{margin-bottom:15px}
.field label{display:block;font-size:.78rem;font-weight:400;letter-spacing:.04em;color:var(--navy);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:11px;
  font-family:inherit;font-size:.95rem;color:var(--ink);background:#F7FBFE;transition:border .2s;font-weight:300;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue)}
.form .btn-primary{width:100%;justify-content:center;margin-top:6px}
[hidden]{display:none!important}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.82rem;color:var(--muted);font-weight:300;margin:4px 0 16px}
.consent input{margin-top:4px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--blue)}
.consent a{color:var(--blue);text-decoration:underline}
/* Honeypot: aus dem Bild geschoben statt display:none — ein Feld,
   das gar nicht gerendert wird, ueberspringen manche Bots gezielt.
   Kein Screenreader-Ziel (aria-hidden im Markup), kein Tabstop. */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.form-msg{margin-top:16px;padding:14px 16px;border-radius:12px;font-size:.88rem;font-weight:400;line-height:1.5}
.form-msg.ok{background:var(--sand-2);border:1px solid rgba(30,111,184,.3);color:var(--navy)}
.form-msg.err{background:#FDF2F2;border:1px solid #E7B9B9;color:#8A2C2C}
.form-msg a{color:var(--blue);font-weight:500;white-space:nowrap}
@media(max-width:860px){.contact{grid-template-columns:1fr;gap:34px}}

/* ---------- Footer ---------- */
footer{background:var(--navy-2);color:rgba(243,248,252,.66);padding:58px 0 28px}
.foot-top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:38px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.08)}
.foot-brand{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.foot-brand .mark{width:42px;height:42px;flex:0 0 auto}
.foot-brand .n{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.4rem;color:var(--sand)}
.foot-col h4{color:var(--sand);font-family:'Jost';font-weight:400;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px}
.foot-col a{display:block;font-size:.9rem;margin-bottom:9px;color:rgba(243,248,252,.66);transition:color .2s;font-weight:300}
.foot-col a:hover{color:var(--blue-light)}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:22px;font-size:.8rem;color:rgba(243,248,252,.46);font-weight:300}
@media(max-width:860px){.foot-top{grid-template-columns:1fr}}

/* ---------- Wave dividers (Nord-Motiv) ---------- */
#prinzip{background:#fff}
.wave{line-height:0;display:block;overflow:hidden}
.wave svg{width:100%;height:74px;display:block}
@media(max-width:860px){.wave svg{height:42px}}

/* ============================================================
   Unterseiten
   ============================================================ */
.subhero{position:relative;overflow:hidden;background:var(--sand);padding:62px 0 70px}
.subhero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(900px 520px at 88% -20%, rgba(46,124,134,.13), transparent 60%),
             radial-gradient(660px 460px at -8% 118%, rgba(30,111,184,.15), transparent 60%);
}
.subhero .wrap{position:relative}
.subhero h1{max-width:22ch}
.subhero p{max-width:64ch}
.subhero h1{font-size:clamp(2.2rem,4.4vw,3.4rem);margin:20px 0 20px;font-weight:600}
.subhero .gold-rule{margin-bottom:24px}
.subhero p{font-size:1.1rem;color:var(--muted);font-weight:300;margin-bottom:30px}
.crumbs{display:flex;align-items:center;gap:9px;font-size:.82rem;color:var(--muted);font-weight:300;margin-bottom:22px}
.crumbs a{color:var(--blue)}
.crumbs a:hover{text-decoration:underline}
.crumbs svg{width:13px;height:13px;opacity:.5}

/* ---------- Bildband der Unterseite ----------
   Ein Bild je Unterseite, direkt unter dem Einleitungsblock und vor der
   ersten Inhaltssektion. Kein Text im Bild, keine Ueberlagerung.
   Die Hoehe steht ueber aspect-ratio fest, zusaetzlich tragen die
   img-Attribute width/height dieselben 1600x900 — damit reserviert der
   Browser den Platz auch dann, wenn das CSS noch nicht da ist, und beim
   Laden springt nichts.
   Abstaende kommen von den Nachbarn: .subhero bringt 70px nach unten mit,
   die folgende section 94px nach oben. Deshalb hier padding:0. */
.page-photo{padding:0}
.page-photo figure{
  margin:0;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);background:var(--sand-2);
}
.page-photo img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

/* Leistungsliste */
.svc-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.svc-group{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;box-shadow:var(--shadow-sm)}
.svc-group h3{font-size:1.32rem;margin-bottom:16px;font-weight:600}
.svc-group ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.svc-group li{display:flex;align-items:flex-start;gap:10px;font-size:.92rem;color:var(--navy);font-weight:300}
.svc-group li svg{width:15px;height:15px;color:var(--blue);flex-shrink:0;margin-top:4px}

/* Abgrenzung */
.limit{
  background:var(--sand-2);border:1px solid rgba(30,111,184,.22);border-left:3px solid var(--blue);
  border-radius:var(--radius-sm);padding:22px 26px;margin-top:34px;
  font-size:1rem;color:var(--navy);font-weight:300;line-height:1.65;
}
.limit b{font-weight:500}

/* Hausverwaltungs-Block */
.hv{
  background:radial-gradient(130% 140% at 12% 0%,#17415C,#0A2032);color:#fff;
  border-radius:var(--radius);padding:38px 36px;box-shadow:var(--shadow);
}
.hv h3{color:var(--sand);font-size:1.7rem;margin-bottom:12px;font-weight:600}
.hv p{color:rgba(243,248,252,.8);font-size:1rem;font-weight:300;margin-bottom:20px}
.hv ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.hv li{display:flex;align-items:flex-start;gap:10px;font-size:.92rem;color:var(--sand);font-weight:300}
.hv li svg{width:16px;height:16px;color:var(--blue-light);flex-shrink:0;margin-top:4px}
@media(max-width:480px){.hv{padding:28px 22px}}

/* ---------- Rechtsseiten ----------
   Reiner Fliesstext. Die Breite ist bewusst enger als das Inhaltsraster:
   Impressum und Datenschutz werden gelesen, nicht ueberflogen, und ueber
   die volle 1180px findet das Auge die naechste Zeile nicht mehr. */
/* Der Textblock beginnt an derselben linken Kante wie die Ueberschrift
   darueber — deshalb bleibt der wrap breit und nur der Fliesstext wird
   begrenzt. Ein zentrierter 760px-Block unter einer linksbuendigen H1
   sieht aus wie ein Fehler. */
.legal{padding-top:56px}
.legal h2,.legal p,.legal-tbd{max-width:72ch}
.legal h2{font-size:1.3rem;font-weight:600;margin:34px 0 12px;color:var(--navy)}
.legal h2:first-of-type{margin-top:0}
.legal p{font-size:1rem;font-weight:300;line-height:1.75;color:var(--ink);margin-bottom:14px}
.legal b{font-weight:500}
.legal a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.legal-stand{margin-top:34px;font-size:.86rem;color:var(--muted)}

/* Fehlende Pflichtangabe — sichtbar, nicht uebersehbar. Verschwindet,
   sobald die Werte in tools/build-legal.py eingetragen sind. */
.legal .tbd{background:#FFF3CD;color:#6b4e00;border:1px solid #E6C86B;border-radius:6px;padding:2px 7px;font-weight:400}
.legal-tbd{
  background:#FFF8E5;border:1px solid #E6C86B;border-left:3px solid #C79B21;
  border-radius:var(--radius-sm);padding:16px 20px;margin-bottom:30px;
  font-size:.95rem;color:#6b4e00;
}

/* ---------- FAQ-Akkordeon ---------- */
#faq{background:linear-gradient(180deg,#fff,#F3F8FC)}
.faq-list{max-width:840px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);overflow:hidden}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:none;border:none;cursor:pointer;text-align:left;
  padding:20px 24px;font-family:'Jost',sans-serif;font-size:1rem;font-weight:400;color:var(--navy);
  transition:background .16s;
}
.faq-q:hover{background:var(--sand)}
.faq-q .fi{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--sand-2);color:var(--blue);transition:transform .24s ease,background .16s;
}
.faq-q .fi svg{width:14px;height:14px}
.faq-item[data-open="true"] .faq-q{background:var(--sand)}
.faq-item[data-open="true"] .faq-q .fi{transform:rotate(180deg);background:var(--blue);color:#fff}
/* Ohne JS bleiben alle Antworten offen — dann gibt es nichts aufzuklappen. */
html:not(.js) .faq-q{cursor:default}
html:not(.js) .faq-q .fi{display:none}
.faq-a{display:grid;grid-template-rows:1fr;transition:grid-template-rows .28s ease}
.js .faq-item[data-open="false"] .faq-a{grid-template-rows:0fr}
.faq-a > div{overflow:hidden}
.faq-a p{padding:0 24px 22px;font-size:.95rem;color:var(--muted);font-weight:300;line-height:1.7}
.faq-a p a{color:var(--blue);text-decoration:underline}

/* ---------- Querverlinkung ---------- */
.crosslinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:8px}
.xlink{
  display:flex;flex-direction:column;gap:8px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 28px;box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease;
}
.xlink:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.xlink b{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:600;color:var(--navy)}
.xlink span{font-size:.9rem;color:var(--muted);font-weight:300}
.xlink .go{display:inline-flex;align-items:center;gap:7px;margin-top:6px;font-size:.86rem;font-weight:500;color:var(--blue);transition:gap .18s}
.xlink:hover .go{gap:12px}
.xlink .go svg{width:14px;height:14px}

/* ---------- reveal ---------- */
/* B6: Fallback zuerst — ohne JS (oder ohne IntersectionObserver) ist alles sichtbar.
   Die Startopazität setzt erst die .anim-Klasse, die site.js im <head> vergibt. */
.reveal{opacity:1;transform:none}
.anim .reveal{opacity:0;transform:translateY(14px);transition:opacity .42s ease, transform .42s ease}
.anim .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .anim .reveal{opacity:1!important;transform:none!important;transition:none}
  .faq-a{transition:none}
  .card:hover,.xlink:hover,.btn-primary:hover{transform:none}
}