/* Fasannet IT-Service, fasannet.at
   Eine Stildatei fuer das ganze Theme (seiten.css ist hier aufgegangen).

   Markenwelt wie PDFs und fasannet.com: Navy, Orange, Papier, Inter.
   Dunkler Kopfbereich mit orangem Lichtakzent, darunter ruhige Abschnitte
   abwechselnd weiss und Papier, ein dunkler Abschluss vor dem Fuss.

   Grundsatz: nichts ist ohne JavaScript unsichtbar. Es gibt keine
   Einblend-Animation, die Inhalte mit opacity:0 startet. */

:root{
  --navy:#1b2380; --navy-mid:#0a1438; --navy-deep:#080d24;
  --orange:#da5003; --orange-hover:#b84400; --orange-link:#a83e00; --orange-hell:#f26a1b;
  --gold:#f0a022;
  --paper:#f1f1e9; --paper-2:#e9e9df; --white:#fff;
  --ink:#14161d; --ink-2:#434857; --ink-3:#5f6472;
  --rule:#dcdcd0; --rule-2:#c6c6b6;
  --ok:#1f7a3d; --err:#b00020;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --wrap:1120px; --gutter:32px; --kopf:72px; --hero-h:760px; --ueberlapp:40px;
  --r:10px;
}

/* ---- Grundlagen ---- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;color-scheme:light;background-color:var(--navy-deep);scroll-padding-top:calc(var(--kopf) + 16px)}
/* Kurze Seiten wie 404 fuellen den Schirm nicht. Ohne Flex endet der Fuss auf
   halber Hoehe und darunter bleibt die helle Seitenfarbe stehen. Nicht der Fuss
   wird nach unten geschoben, sondern der letzte Inhaltsabschnitt waechst. Sonst
   entsteht der Zwischenraum ueber dem Fuss und zeigt dort die Body-Farbe. */
body{margin:0;min-height:100vh;display:flex;flex-direction:column;font-family:var(--sans);font-size:17px;line-height:1.6;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;font-feature-settings:'cv02','cv03','cv11','ss01'}
body > section:last-of-type{flex:1 0 auto}
img,svg{max-width:100%}
.wrap{max-width:calc(var(--wrap) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
a{color:var(--ink);text-decoration:none}
p{margin:0 0 1em;max-width:65ch}
h1,h2,h3{margin:0;font-weight:800;color:var(--navy);letter-spacing:-.02em;overflow-wrap:break-word}
h1{font-size:clamp(2.125rem,1.2rem + 3.2vw,3.5rem);line-height:1.1;letter-spacing:-.03em}
h2{font-size:clamp(1.625rem,1.1rem + 1.5vw,2.25rem);line-height:1.18;max-width:24ch}
h3{font-size:1.25rem;line-height:1.3}
h1 em,h2 em{font-style:normal;color:var(--orange)}
strong{font-weight:700;color:var(--navy)}
.mono{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* Fliesstext-Links: dunkleres Orange, weil das Markenorange bei normaler
   Schriftgroesse nur 3.6:1 erreicht (WCAG AA). */
.lnk{color:var(--orange-link);text-decoration:underline;text-underline-offset:2px}
.lnk:hover{color:var(--orange)}

/* ---- Leiste oben ---- */
.bar{background:var(--navy);font-size:13px;color:rgba(255,255,255,.7)}
.bar .wrap{display:flex;justify-content:space-between;gap:20px;padding-top:8px;padding-bottom:8px}
.bar b{color:var(--white);font-weight:600}
.bar a{color:var(--gold)}
.bar .bar-en{margin-left:14px;padding-left:14px;border-left:1px solid rgba(255,255,255,.25);color:var(--white);font-weight:600;letter-spacing:.06em}
.bar .bar-en:hover{color:var(--gold)}

/* ---- Kopf und Navigation ---- */
header.site{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.97);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--rule)}
header.site .wrap{display:flex;align-items:center;gap:28px;min-height:var(--kopf)}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand img{height:38px;width:auto;display:block}
.brand span{font-weight:600;color:var(--ink-3);letter-spacing:.13em;font-size:10.5px;text-transform:uppercase;padding-left:12px;border-left:1px solid var(--rule-2);line-height:1;white-space:nowrap}
.hauptnav{display:flex;align-items:center;gap:26px;margin-left:auto}
.hauptnav a{color:var(--ink-2);font-weight:500;font-size:15.5px;white-space:nowrap;padding:8px 0;box-shadow:inset 0 -2px 0 transparent;transition:color .15s,box-shadow .15s}
.hauptnav a:hover{color:var(--navy)}
.hauptnav a.active{color:var(--navy);font-weight:600;box-shadow:inset 0 -2px 0 var(--orange)}
.callbtn{flex:none;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;background:var(--navy);color:var(--white)!important;font-weight:600;font-size:15px;line-height:1;padding:11px 16px;border-radius:8px;transition:background .15s}
.callbtn:hover{background:var(--navy-mid)}
.callbtn .i{color:var(--orange-hell);flex:none}
.callbtn .an{display:none}
.wabtn{flex:none;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;border:1.5px solid var(--navy);color:var(--navy)!important;font-weight:600;font-size:15px;line-height:1;padding:9.5px 14px;border-radius:8px;transition:background .15s}
.wabtn:hover{background:var(--paper)}
.i.wa{flex:none}
.wa-link{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--navy);text-decoration:underline;text-decoration-color:#25D366;text-underline-offset:3px}
.hero .wa-link{color:var(--white)}
/* Mobil: feste Leiste unten mit Anrufen und WhatsApp */
.mobilleiste{display:none}
.burger{display:none;flex:none;width:44px;height:44px;align-items:center;justify-content:center;background:var(--white);border:1px solid var(--rule-2);border-radius:8px;cursor:pointer;padding:0}
.burger .strich,.burger .strich::before,.burger .strich::after{display:block;width:20px;height:2px;background:var(--navy);border-radius:2px;transition:transform .2s,background .2s}
.burger .strich{position:relative}
.burger .strich::before,.burger .strich::after{content:'';position:absolute;left:0}
.burger .strich::before{top:-6px}
.burger .strich::after{top:6px}
.burger[aria-expanded="true"] .strich{background:transparent}
.burger[aria-expanded="true"] .strich::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] .strich::after{transform:translateY(-6px) rotate(-45deg)}

@media(max-width:1300px){.brand span{display:none}}
@media(max-width:1180px){
  header.site .wrap{gap:18px}
  .hauptnav{gap:18px}
  .hauptnav a{font-size:15px}
  .wabtn span{display:none}
  .wabtn{padding:9.5px 10px}
}
@media(max-width:1100px) and (min-width:1024px){
  .callbtn .nr{display:none}
  .callbtn .an{display:inline}
}
@media(max-width:1023px){
  .hauptnav{margin-left:0}
  .callbtn{margin-left:auto}
  .burger{display:inline-flex}
  /* Mit JavaScript: Menue als Klappliste unter dem Kopf */
  .js .hauptnav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--white);border-bottom:1px solid var(--rule);box-shadow:0 18px 30px -18px rgba(8,13,36,.35);padding:6px var(--gutter) 14px}
  .js .hauptnav.open{display:flex}
  .js .hauptnav a{font-size:17px;padding:14px 2px;border-bottom:1px solid var(--rule);box-shadow:none}
  .js .hauptnav a:last-child{border-bottom:0}
  .js .hauptnav a.active{color:var(--orange-link)}
  /* Ohne JavaScript: Navigation offen als zweite Zeile */
  html:not(.js) header.site .wrap{flex-wrap:wrap;padding-bottom:10px}
  html:not(.js) .hauptnav{order:3;width:100%;flex-wrap:wrap;gap:4px 20px}
  html:not(.js) .burger{display:none}
}
@media(max-width:640px){
  :root{--gutter:16px;--kopf:64px}
  .bar{display:none}
  .brand img{height:32px}
  .callbtn{padding:11px 14px}
  .callbtn .nr{display:none}
  .callbtn .an{display:inline}
  header.site .wrap{gap:10px}
  .wabtn{display:none}
  .mobilleiste{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--rule);box-shadow:0 -8px 20px -12px rgba(8,13,36,.3)}
  .mobilleiste a{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:15.5px;padding:11px 10px;border-radius:8px;line-height:1.2}
  .mobilleiste .ml-tel{background:var(--navy);color:var(--white)}
  .mobilleiste .ml-tel .i{color:var(--orange-hell)}
  .mobilleiste .ml-wa{border:1.5px solid var(--navy);color:var(--navy)}
  body{padding-bottom:64px}
}

/* ---- Brotkrumen, als Teil des dunklen Kopfbereichs ---- */
.krumen{font-size:13.5px;color:rgba(255,255,255,.55);background:var(--navy-deep);border-bottom:1px solid rgba(255,255,255,.08)}
.krumen .wrap{padding-top:10px;padding-bottom:10px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.krumen a{color:rgba(255,255,255,.85);text-decoration:underline;text-decoration-color:rgba(242,106,27,.7);text-underline-offset:3px}
.krumen a:hover{color:var(--white)}

/* ---- Kopfbereich (Hero) ---- */
.hero{position:relative;overflow:hidden;overflow:clip;background:linear-gradient(160deg,var(--navy-deep) 0%,var(--navy-mid) 58%,var(--navy) 100%);color:var(--white);padding:56px 0 calc(var(--ueberlapp) + 40px);
  /* Feste Hoehe auf allen Seiten, damit beim Seitenwechsel nichts springt.
     Inhalt oben ausgerichtet: Kicker und Titel stehen ueberall pixelgleich. */
  min-height:var(--hero-h);display:flex;align-items:stretch}
.hero>.wrap{width:100%}
.hero::before{content:'';position:absolute;top:-300px;right:-220px;width:760px;height:760px;background:radial-gradient(circle,rgba(218,80,3,.32) 0%,rgba(218,80,3,0) 62%);pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-320px;left:-260px;width:640px;height:640px;background:radial-gradient(circle,rgba(240,160,34,.12) 0%,rgba(240,160,34,0) 65%);pointer-events:none}
.hero>.wrap{position:relative;z-index:1}
/* Weicher Uebergang zum Inhalt: der erste Abschnitt liegt als abgerundete
   Flaeche mit Schatten ueber der Unterkante des Kopfbereichs (auf allen
   Seiten Papier: section.paper oder section.kurz). */
.hero+section{position:relative;z-index:2;margin-top:calc(-1 * var(--ueberlapp));border-radius:32px 32px 0 0;box-shadow:0 -18px 48px rgba(3,6,23,.28);clip-path:inset(-80px 0 0 0)}
.hero+section.kurz{border-top:0;padding-top:36px}
/* Variante "fasan" (Konstante FASANNET_UEBERGANG, Standard): der Fasan aus dem
   Logo als Ausschnitt in Papierfarbe, der rechts aus der Flaeche in den Kopf
   ragt. Variante "flaeche" = nur die abgerundete Flaeche. */
body.uebergang-fasan .hero+section{clip-path:inset(-260px 0 0 0)}
/* Der Fasan sitzt in Papierfarbe auf der Kante; --fasan-oben ist der Teil
   ueber der Kante, der Rest liegt unsichtbar Papier auf Papier. */
body.uebergang-fasan .hero+section{--fasan-oben:166px}
body.uebergang-fasan .hero+section::before{content:'';position:absolute;z-index:0;right:max(24px,calc(50% - var(--wrap) / 2));top:calc(-1 * var(--fasan-oben));width:232px;height:209px;background:var(--paper);-webkit-mask:url(../img/bird.png) center/contain no-repeat;mask:url(../img/bird.png) center/contain no-repeat;pointer-events:none}
.hero .kicker{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:22px}
.hero .kicker::before{content:'';width:28px;height:2px;background:var(--orange-hell)}
.hero h1{color:var(--white);font-size:clamp(2rem,1.2rem + 2.6vw,3rem);line-height:1.12;min-height:2.24em}
.hero h1 em{color:var(--orange-hell)}
.hero .sub{font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);line-height:1.55;color:rgba(255,255,255,.8);max-width:60ch;margin:24px 0 0;min-height:4.65em}
.hero .stand{margin:16px 0 0;font-size:14px;color:rgba(255,255,255,.6)}
.hero strong{color:var(--white)}
.hero .lnk{color:var(--white);text-decoration-color:var(--orange-hell)}
.hero .lnk:hover{color:var(--gold)}
.herometa{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:12px;margin-top:40px;max-width:980px}
.herometa>div{min-width:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:var(--r);padding:18px 20px}
.herometa .v{font-size:1.375rem;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--white)}
/* Genau zwei Zeilen, nicht mehr und nicht weniger. Die Kachelreihe muss auf
   jeder Seite gleich hoch sein, sonst springt die Telefonzeile darunter beim
   Seitenwechsel. Richtwert fuer den Text: hoechstens 40 Zeichen in den schmalen
   Spalten, in der ersten breiten Spalte etwa 55. */
.herometa .k{font-size:13.5px;color:rgba(255,255,255,.66);margin-top:6px;line-height:1.4;
  min-height:2.8em;max-height:2.8em;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:32px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:16px;line-height:1.2;padding:15px 26px;border-radius:8px;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.btn-orange{background:var(--orange);color:var(--white)!important}
.btn-orange:hover{background:var(--orange-hover)}
.btn-umriss{border:1.5px solid rgba(255,255,255,.6);color:var(--white)!important;padding:13.5px 24.5px}
.btn-umriss:hover{background:var(--white);color:var(--navy)!important;border-color:var(--white)}
.hero-textlinks{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-left:10px}
.hero-tel{display:inline-flex;align-items:center;gap:9px;color:var(--white);font-weight:600;font-size:17px;white-space:nowrap}
.hero-preise{color:rgba(255,255,255,.85);font-size:16px;text-decoration:underline;text-decoration-color:var(--orange-hell);text-underline-offset:3px}
.hero-preise:hover{color:var(--white)}
.btn-umriss .i.wa{width:20px;height:20px}
.hero-tel .i{color:var(--orange-hell)}
.hero-tel:hover span{text-decoration:underline;text-decoration-color:var(--orange-hell);text-underline-offset:3px}
.hero-links{margin:30px 0 0;font-size:16px}
@media(max-width:900px){
  :root{--hero-h:800px}
  .herometa{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Schmaler Schirm, mehr Umbrueche: die laengste Ueberschrift braucht hier drei
     Zeilen, die laengste Subline eine mehr als am Schreibtisch. Beide reservieren
     deshalb den schlechtesten Fall, damit Kacheln und Telefonzeile auf jeder Seite
     an derselben Stelle stehen. */
  .hero h1{min-height:3.36em}
  .hero .sub{min-height:8em}
}
@media(max-width:640px){
  :root{--hero-h:800px;--ueberlapp:24px}
  .hero{padding:32px 0 calc(var(--ueberlapp) + 32px)}
  .hero+section{border-radius:20px 20px 0 0}
  body.uebergang-fasan .hero{padding-bottom:calc(var(--ueberlapp) + 128px)}
  body.uebergang-fasan .hero+section{clip-path:inset(-140px 0 0 0)}
  body.uebergang-fasan .hero+section{--fasan-oben:96px}
  body.uebergang-fasan .hero+section::before{right:16px;width:134px;height:121px}
  .hero h1{font-size:1.875rem}
  .hero .sub{margin-top:18px}
  .herometa{gap:10px;margin-top:28px}
  .herometa>div{padding:14px 14px}
  .herometa .v{font-size:1.125rem}
  .herometa .k{font-size:12.5px}
  .aktionen{margin-top:26px;gap:10px}
  .btn{flex:1 1 0;padding-left:10px;padding-right:10px}
  .hero-textlinks{flex:1 1 100%;justify-content:center;margin:4px 0 0}
}

/* ---- Abschnitte: abwechselnd weiss und Papier ---- */
/* Der Faktenstreifen (falls vorhanden) ist der erste Abschnitt und traegt
   Papier; danach wechseln weiss und Papier. */
section{padding:88px 0;background:var(--paper)}
section:nth-of-type(even){background:var(--white)}
.split{display:grid;grid-template-columns:220px minmax(0,1fr);gap:44px;align-items:start}
.split>.lab{position:sticky;top:calc(var(--kopf) + 28px);padding-top:10px}
.lab{display:flex;align-items:flex-start;gap:10px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);margin-bottom:18px;line-height:1.3}
.lab::before{content:'';flex:none;width:18px;height:2px;margin-top:7px;background:var(--orange)} /* auf Hoehe der ersten Zeile */
.split>.lab{margin-bottom:0}
.lead{font-size:1.1875rem;line-height:1.55;color:var(--ink-2);max-width:60ch;margin:20px 0 0}
.lead+p{margin-top:18px}
.pnote{margin:22px 0 0;font-size:15px;color:var(--ink-3);max-width:72ch}
.paper .stand{margin:0 0 14px;font-size:14px;color:var(--ink-3)}
.pnote strong{color:var(--ink)}
@media(max-width:1023px){section{padding:72px 0}}
@media(max-width:900px){
  .split{grid-template-columns:1fr;gap:16px}
  .split>.lab{position:static;padding-top:0}
}
@media(max-width:640px){
  section{padding:48px 0}
  .lead{font-size:1.0625rem}
}

/* ---- Kurz gesagt: flacher Faktenstreifen unter dem Seitentitel ----
   Drei Spalten mit Icon, Kernwert und einem Satz. Keine Kacheln, nur
   Papierton mit duenner Linie oben und unten. */
section.kurz{padding:28px 0 32px;background:var(--paper);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.kurz-titel{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-link);line-height:1.3;margin:0 0 16px;max-width:none}
.kurz-reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 40px}
.kurz-punkt{min-width:0}
.kurz-wert{display:flex;align-items:center;gap:10px;margin:0;font-size:1.375rem;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--navy)}
.kurz-wert .i{flex:none;width:22px;height:22px;color:var(--orange)}
.kurz-satz{margin:8px 0 0;font-size:15.5px;line-height:1.5;color:var(--ink-2);max-width:40ch}
@media(max-width:760px){
  section.kurz{padding:24px 0}
  .kurz-reihe{grid-template-columns:1fr;gap:0}
  .kurz-punkt{padding:14px 0;border-top:1px solid var(--rule)}
  .kurz-punkt:first-child{border-top:0;padding-top:0}
  .kurz-punkt:last-child{padding-bottom:0}
  .kurz-wert{font-size:1.25rem}
}

/* ---- Karten: Leistungen ---- */
.get{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:36px}
.get>div{background:var(--white);border:1px solid var(--rule);border-radius:var(--r);padding:24px 24px 22px}
.get .ico{display:block;width:46px;height:46px;padding:11px;border-radius:50%;background:var(--paper);stroke:var(--orange);stroke-width:1.8;fill:none;margin-bottom:16px}
.get h3{font-size:1.125rem;margin-bottom:8px}
.get p{margin:0;font-size:15.5px;color:var(--ink-2)}
@media(max-width:640px){.get{grid-template-columns:1fr;gap:12px}.get>div{padding:20px}}

/* ---- Karten: Faelle ---- */
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:36px}
.case{background:var(--white);border:1px solid var(--rule);border-radius:var(--r);padding:24px}
.case h3{font-size:1.125rem;margin-bottom:8px}
.case h3 span{color:var(--orange);margin-right:8px;font-weight:600}
.case p{margin:0;color:var(--ink-2);font-size:15.5px}

/* ---- Schritte ---- */
.steps{margin-top:36px;border-top:1px solid var(--rule)}
.step{display:grid;grid-template-columns:48px minmax(0,1fr);gap:20px;padding:24px 0;border-bottom:1px solid var(--rule);align-items:start}
.step .no{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--orange);color:var(--orange-link);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;letter-spacing:0;font-variant-numeric:tabular-nums}
.step h3{font-size:1.1875rem;margin:7px 0 8px}
.step p{margin:0;color:var(--ink-2);font-size:16px}
@media(max-width:640px){.step{grid-template-columns:36px minmax(0,1fr);gap:14px;padding:20px 0}.step .no{width:34px;height:34px;font-size:13px}.step h3{margin-top:5px;font-size:1.0625rem}}

/* ---- Paketraster ---- */
.pk{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,150px);margin-top:36px;font-size:15.5px;background:var(--white);border:1px solid var(--rule);border-radius:12px;overflow:hidden}
.pk>div{padding:13px 16px;border-bottom:1px solid var(--rule);display:flex;align-items:center;min-height:50px}
.pk .l{color:var(--ink-2);padding-left:22px;line-height:1.4}
.pk .c{justify-content:center;text-align:center;color:var(--navy);font-weight:600;line-height:1.3}
.pk .c.empf{background:var(--paper)}
.pk .h{background:var(--navy);color:var(--white);flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;padding:20px 10px 18px;border-bottom:0}
.pk .h.l{align-items:flex-start}
.pk .h.empf{background:var(--navy-mid);box-shadow:inset 0 3px 0 var(--orange)}
.pk .tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:18px;height:18px;padding:0 8px;border-radius:99px;margin-bottom:10px}
.pk .h.empf .tag{background:var(--orange);color:var(--white)}
.pk .name{display:block;font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:8px}
.pk .price{display:block;font-size:1.625rem;font-weight:800;letter-spacing:-.02em;color:var(--white);line-height:1.05;white-space:nowrap}
.pk .h.empf .price{color:var(--orange-hell)}
.pk .unit{display:block;font-size:12px;color:rgba(255,255,255,.66);margin-top:6px}
.pk>div:nth-last-child(-n+4){border-bottom:0}
.ok{display:inline-block;width:18px;height:18px;border-radius:50%;background:var(--orange);position:relative;flex:none}
.ok::after{content:'';position:absolute;left:5px;top:5px;width:7px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.pk .c.no,.pk-karte dd .no{color:#9ea2ab;font-weight:400}
.pk-karten{display:none}
.pk-hinweis{margin:18px 0 0;font-size:15.5px;color:var(--ink-2);max-width:72ch}
@media(max-width:760px){
  .pk{display:none}
  .pk-karten{display:grid;gap:14px;margin-top:28px}
  .pk-karte{background:var(--white);border:1px solid var(--rule);border-radius:12px;overflow:hidden}
  .pk-karte .kopf{background:var(--navy);color:var(--white);padding:16px 18px;display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 12px}
  .pk-karte.empf .kopf{background:var(--navy-mid);box-shadow:inset 0 3px 0 var(--orange)}
  .pk-karte .tag{grid-column:1/-1;justify-self:start;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--orange);color:var(--white);padding:2px 8px;border-radius:99px;margin-bottom:6px}
  .pk-karte .name{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
  .pk-karte .price{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;grid-row:span 2;text-align:right}
  .pk-karte.empf .price{color:var(--orange-hell)}
  .pk-karte .unit{font-size:12.5px;color:rgba(255,255,255,.66)}
  .pk-karte.empf dl{background:var(--paper)}
  .pk-karte dl{margin:0}
  .pk-karte dl>div{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 18px;border-top:1px solid var(--rule)}
  .pk-karte dl>div:first-child{border-top:0}
  .pk-karte dt{font-size:14.5px;color:var(--ink-2);line-height:1.35}
  .pk-karte dd{margin:0;flex:none;max-width:42%;text-align:right;font-size:14.5px;font-weight:600;color:var(--navy);line-height:1.3}
}

/* Nicht enthalten, daneben der Stundensatz */
.extra{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);margin-top:28px;background:var(--white);border:1px solid var(--rule);border-radius:12px;overflow:hidden}
.extra h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px;color:var(--navy)}
.extra-liste{padding:22px 26px}
.extra-liste ul{list-style:none;margin:0;padding:0;columns:2;column-gap:28px}
.extra-liste li{position:relative;padding:6px 0 6px 22px;font-size:15.5px;color:var(--ink-2);break-inside:avoid}
.extra-liste li::before{content:'';position:absolute;left:2px;top:17px;width:10px;height:2px;background:#9ea2ab}
.extra-satz{padding:22px 26px;background:var(--paper);border-left:1px solid var(--rule)}
.extra-satz p{margin:0 0 12px}
.extra-satz .v{display:block;font-size:1.625rem;font-weight:800;letter-spacing:-.02em;color:var(--navy);line-height:1.1}
.extra-satz .k{display:block;font-size:14px;color:var(--ink-2);margin-top:2px}
.extra-satz .klein{font-size:13.5px;color:var(--ink-3);margin:0}
@media(max-width:760px){
  .extra{grid-template-columns:1fr}
  .extra-satz{border-left:0;border-top:1px solid var(--rule)}
  .extra-liste,.extra-satz{padding:18px}
}
@media(max-width:420px){.extra-liste ul{columns:1}}

/* ---- Preislisten (Zeilen) ---- */
.plist{margin-top:32px;border-top:2px solid var(--navy)}
.prow{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,190px);gap:18px;padding:14px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.prow.c2{grid-template-columns:minmax(0,1fr) repeat(2,minmax(120px,210px))}
.prow.c3{grid-template-columns:minmax(0,1fr) repeat(3,minmax(96px,160px))}
.prow .lbl{font-size:16px;color:var(--ink-2)}
.prow .val{text-align:right;font-size:16px;font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums}
.prow.head{padding:12px 0 10px;border-bottom:1px solid var(--rule-2)}
.prow.head .lbl,.prow.head .val{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.prow.big{padding:22px 0}
.prow.big .lbl{font-size:1.0625rem;color:var(--navy);font-weight:600}
.prow.big .val{font-size:1.75rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.prow.big .val.hl{color:var(--orange)}
@media(max-width:640px){
  .prow{grid-template-columns:minmax(0,1fr) auto;gap:4px 14px}
  .prow .val{max-width:46vw}
  .prow.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prow.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .prow.c2 .lbl,.prow.c3 .lbl{grid-column:1/-1}
  .prow.c2 .val,.prow.c3 .val{text-align:left;font-size:15px}
  .prow.head.c2 .val,.prow.head.c3 .val{font-size:11px}
  .prow.big .val{font-size:1.25rem}
  .prow.big .lbl{font-size:1rem}
}

/* ---- Zwei Listen nebeneinander ---- */
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:36px}
.two>div{background:var(--white);border:1px solid var(--rule);border-radius:var(--r);padding:22px 24px 12px}
.two h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);font-weight:700;margin-bottom:8px}
.two ul{list-style:none;margin:0;padding:0}
.two li{position:relative;padding:10px 0 10px 26px;border-bottom:1px solid var(--rule);font-size:16px;line-height:1.5}
.two li:last-child{border-bottom:0}
.two li::before{content:'';position:absolute;left:3px;top:17px;width:10px;height:5px;border-left:2px solid var(--orange);border-bottom:2px solid var(--orange);transform:rotate(-45deg)}
.two ul.neg li{color:var(--ink-2)}
.two ul.neg li::before{top:21px;width:11px;height:0;border-left:0;border-bottom:2px solid #9ea2ab;transform:none}

/* ---- Kennzahlen in Abschnitten ---- */
.fakten{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:32px}
.fakten>div{background:var(--white);border:1px solid var(--rule);border-radius:var(--r);padding:18px 20px}
.fakten .v{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;color:var(--navy);line-height:1.2}
.fakten .k{font-size:14px;color:var(--ink-2);margin-top:6px;line-height:1.45}

/* ---- Hinweis ---- */
.note{background:var(--white);border:1px solid var(--rule);border-left:4px solid var(--orange);border-radius:0 var(--r) var(--r) 0;padding:16px 22px;margin:28px 0 0;font-size:16px;max-width:72ch}
.note strong{color:var(--ink)}
section:nth-of-type(even) .note{background:var(--paper);border-color:var(--paper);border-left-color:var(--orange)}

/* ---- Referenzen ---- */
@media(max-width:1000px){}
@media(max-width:560px){}

/* ---- Ansprechpartner ---- */
.person{display:grid;grid-template-columns:180px minmax(0,1fr);gap:36px;align-items:start;margin-top:36px}
.person img{width:180px;height:180px;object-fit:cover;border-radius:var(--r);display:block}
.person p:last-child{margin-bottom:0}
@media(max-width:640px){.person{grid-template-columns:1fr;gap:20px}.person img{width:140px;height:140px}}

/* ---- Haeufige Fragen ---- */
.faq{margin-top:32px}
.faq details{background:var(--white);border:1px solid var(--rule);border-radius:var(--r);margin-bottom:10px}
.faq summary{padding:17px 56px 17px 22px;font-weight:700;color:var(--navy);cursor:pointer;list-style:none;position:relative;font-size:1.0625rem;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:20px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:var(--paper);color:var(--orange);font-size:1.25rem;font-weight:500;line-height:26px;text-align:center}
.faq details[open] summary::after{content:'\2212'}
.faq summary:hover{color:var(--orange-link)}
.faq .a{padding:0 22px 20px;color:var(--ink-2);font-size:16px;max-width:68ch}
.faq .a p{margin:0 0 .8em}
.faq .a p:last-child{margin:0}
.faq a{color:var(--orange-link);text-decoration:underline;text-underline-offset:2px}
@media(max-width:640px){.faq summary{padding:15px 50px 15px 16px;font-size:1rem}.faq summary::after{right:14px}.faq .a{padding:0 16px 16px}}

/* ---- Branchen als Marken ---- */
.branch{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.branch span{border:1px solid var(--rule-2);padding:8px 15px;border-radius:99px;font-size:15px;color:var(--ink-2);background:var(--white)}

/* ---- Formulare ---- */
.form{margin-top:32px;background:var(--white);border:1px solid var(--rule);border-radius:12px;padding:28px}
.felder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.felder .voll{grid-column:1/-1}
.felder p.klein{margin:-8px 0 0}
.form label{display:block;font-size:15px;font-weight:600;color:var(--navy);margin-bottom:6px;line-height:1.3}
.form .opt{font-weight:400;font-size:13.5px;color:var(--ink-3);margin-left:4px}
.form input[type=text],.form input[type=email],.form input[type=tel],.form textarea{display:block;width:100%;padding:12px 14px;border:1px solid var(--rule-2);background:var(--white);font-family:var(--sans);font-size:16px;line-height:1.4;color:var(--ink);border-radius:8px;margin:0;transition:border-color .15s,box-shadow .15s}
.form>input[type=text],.form>input[type=email],.form>input[type=tel],.form>textarea{margin-bottom:16px}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(218,80,3,.18)}
.form textarea{min-height:110px;resize:vertical}
.form button{display:inline-flex;align-items:center;justify-content:center;margin-top:22px;background:var(--orange);color:var(--white);border:0;padding:15px 30px;font-family:var(--sans);font-size:16.5px;font-weight:700;border-radius:8px;cursor:pointer;transition:background .15s}
.form button:hover{background:var(--orange-hover)}
.form button[disabled]{opacity:.6;cursor:progress}
.form .hint{font-size:13.5px;color:var(--ink-3);margin:14px 0 0;max-width:none}
.form .klein{font-size:14px;color:var(--ink-3)}
.form .formmsg{margin:16px 0 0;font-size:15.5px;padding:12px 16px;border-radius:8px;border-left:4px solid var(--ok);background:#e8f5ec;color:#14532d;max-width:none}
.form .formmsg.err{border-left-color:var(--err);background:#fdecee;color:#7a0016}
.form fieldset{border:1px solid var(--rule);border-radius:var(--r);padding:16px 18px 4px;margin:20px 0 0;background:var(--paper)}
.form legend{float:left;width:100%;font-size:14px;font-weight:700;color:var(--navy);padding:0;margin:0 0 10px;line-height:1.4}
.form legend+*{clear:both}
.form .check{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;margin:0 0 14px;font-size:15.5px;font-weight:400;color:var(--ink-2)}
.form .check input{width:20px;height:20px;margin:2px 0 0;padding:0;accent-color:var(--orange)}
.form .check strong{color:var(--navy)}
/* Honigtopf: fuer Menschen unsichtbar, fuer einfache Bots ein Pflichtfeld.
   Nicht display:none, das erkennen bessere Bots. */
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:640px){
  .form{padding:20px 18px}
  .felder{grid-template-columns:1fr}
  .form button{width:100%}
}

/* ---- Linkseite Instagram und 404 ---- */
.linkliste{display:grid;gap:12px;margin-top:30px;max-width:560px}
.linkliste a{display:block;border:1px solid var(--rule-2);background:var(--white);padding:18px 20px;border-radius:var(--r)}
.linkliste a strong{display:block;font-size:1.125rem;color:var(--navy)}
.linkliste a span{display:block;font-size:15px;color:var(--ink-2);margin-top:4px}
.linkliste a:hover,.linkliste a:focus-visible{border-color:var(--orange)}
.linkliste a.haupt{background:var(--orange);border-color:var(--orange)}
.linkliste a.haupt strong,.linkliste a.haupt span{color:var(--white)}

/* ---- Karte als statisches Bild, keine eingebettete Karte ---- */
.karte{margin:32px 0 0;max-width:640px}
.karte .bild{aspect-ratio:16/9;background:var(--paper-2);border:1px dashed var(--rule-2);border-radius:var(--r);display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;color:var(--ink-3);font-size:15px}
.karte img{display:block;width:100%;height:auto;border-radius:var(--r)}
.karte figcaption{font-size:14px;color:var(--ink-3);margin-top:10px}

/* ---- Platzhalter und Entwurfshinweis ---- */
.ph{background:#fff1b8;color:#5a4300;padding:1px 5px;border-radius:3px;font-weight:600;font-size:.92em}
.end .ph{background:#5a4300;color:#fff1b8}
.entwurf-hinweis{background:#fff1b8;color:#5a4300;font-size:14.5px;padding:12px 0;border-bottom:1px solid #e6d27a}
.entwurf-hinweis p{margin:0;max-width:none}

/* ---- Textseiten ---- */
.prose h1.titel{font-size:clamp(1.625rem,1.1rem + 1.5vw,2.25rem);line-height:1.18;max-width:24ch;margin-top:4px}
.prose h2{margin-top:8px}
.prose h3{font-size:1.125rem;margin:32px 0 10px}
.prose ul{padding-left:20px}
.prose li{margin-bottom:8px}
/* AGB: Teilueberschriften optisch abgesetzt, im Dokument auf derselben Ebene */
.prose h2.teil{margin-top:52px;font-size:1.375rem;padding-top:18px;border-top:2px solid var(--navy)}
/* Rechtsseiten: Abschnittstitel auf Ebene 2, optisch klein */
.prose h2:not(.titel):not(.teil){font-size:1.125rem;line-height:1.35;margin:32px 0 10px;max-width:none}
.prose h2.teil+h2:not(.titel){margin-top:22px}

/* ---- Der dunkle Abschluss ---- */
section.end{background:linear-gradient(160deg,var(--navy-deep) 0%,var(--navy-mid) 55%,var(--navy) 100%);color:var(--paper);padding:88px 0;position:relative;overflow:hidden;overflow:clip}
/* overflow:clip statt hidden: hidden macht den Abschnitt zum Scrollcontainer,
   dann klebt das sticky Label 100 px unter der Abschnittskante. */
.end::after{content:'';position:absolute;top:-180px;right:-180px;width:560px;height:560px;background:radial-gradient(circle,rgba(218,80,3,.26) 0%,rgba(218,80,3,0) 62%);pointer-events:none}
.end::before{content:'';position:absolute;right:32px;bottom:28px;width:340px;height:306px;background:var(--paper);-webkit-mask:url('../img/bird.png') no-repeat center/contain;mask:url('../img/bird.png') no-repeat center/contain;opacity:.06;pointer-events:none}
.end .wrap{position:relative;z-index:1}
.end .lab{color:var(--gold)}
.end .lab::before{background:var(--orange-hell)}
.end h2{color:var(--white);max-width:20ch}
.end h2 em{color:var(--orange-hell)}
.end h2+p{margin-top:22px}
.end p{color:rgba(255,255,255,.78);max-width:58ch;font-size:1.125rem}
.end p strong{color:var(--white)}
.end .phone{display:inline-block;font-size:clamp(1.75rem,1.2rem + 2vw,2.75rem);font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--white)!important;margin-top:22px;border-bottom:2px solid var(--orange);padding-bottom:4px;white-space:nowrap}
.end .phone:hover{color:var(--gold)!important}
.end .small{font-size:14.5px;color:rgba(255,255,255,.6);margin-top:18px}
.end .lnk{color:var(--gold)}
@media(max-width:900px){.end::before{display:none}}
@media(max-width:640px){section.end{padding:56px 0}}

/* ---- Fuss ---- */
footer{background:var(--navy-deep);color:rgba(255,255,255,.62);font-size:14.5px;padding:64px 0 28px}
footer .cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
footer .cols-lokal{margin-top:36px;padding-top:28px;border-top:1px solid rgba(255,255,255,.1)}
footer h3{color:var(--white);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px;font-weight:700}
footer p{margin:0;line-height:1.7;max-width:none;color:rgba(255,255,255,.85)}
footer p.links{margin-top:14px}
footer strong{color:rgba(255,255,255,.9);font-weight:600}
footer a{color:rgba(255,255,255,.85)}
footer a:hover{color:var(--white);text-decoration:underline;text-decoration-color:var(--orange-hell);text-underline-offset:3px}
footer .social{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
footer .social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.18);border-radius:50%;color:rgba(255,255,255,.78)}
footer .social a:hover{color:var(--orange-hell);border-color:var(--orange-hell);text-decoration:none}
footer .legal{margin-top:44px;border-top:1px solid rgba(255,255,255,.1);padding-top:20px;font-size:13px;color:rgba(255,255,255,.45)}
@media(max-width:1180px) and (min-width:1101px){footer{font-size:13.5px}footer .cols{gap:24px}}
/* Unter 1100 px zwei gleich breite Spalten, damit keine Zeile umbricht */
@media(max-width:1100px){footer .cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}}
@media(max-width:480px){footer{padding-top:48px}footer .cols{grid-template-columns:1fr;gap:28px}}

/* ---- Druck ---- */
@media print{
  .bar,header.site,.krumen,.burger,.aktionen,footer,.form{display:none}
  .hero,section.end{background:none;color:var(--ink)}
  .hero h1,.hero .sub,.herometa .v,.herometa .k,.end h2,.end p{color:var(--ink)}
  .hero::before,.hero::after,.end::before,.end::after{display:none}
  .hero+section{margin-top:0;border-radius:0;box-shadow:none;clip-path:none}
  .hero+section::before,.hero+section::after{display:none}
}

/* Sternchen zur Gutschrift beim Bestandscheck: klein, aber sichtbar,
   und in derselben Farbe wie der Wert, damit es nicht wie Kleingedrucktes wirkt. */
.fn{font-size:.52em;vertical-align:super;line-height:0;margin-left:.08em}



/* Partner-Section auf der Ueber-uns-Seite. Als Liste gebaut, damit weitere Partner
   nur einen Eintrag im Array brauchen. Die Logos liegen auf weisser Flaeche, weil
   fremde Marken nicht umgefaerbt werden duerfen und der Grund hier hell bleibt.
   Bewusst kein Footer-Link auf allen Seiten: ein sitewide Linktausch brachte uns
   nichts und sieht fuer Suchmaschinen konstruiert aus. */
.partner{display:grid;gap:20px;margin-top:28px}
.pt{display:flex;align-items:flex-start;gap:20px;padding:20px;border:1px solid var(--rule);border-radius:var(--r);background:var(--white)}
.pt-bild{flex:0 0 auto;display:block}
.pt-bild img{width:104px;height:auto;display:block}
.pt h3{margin:0 0 6px;font-size:16px}
.pt p{margin:0;font-size:15px;color:var(--ink-2)}
@media(max-width:640px){.pt{flex-direction:column;gap:14px}}