/* Öffentliche Anleitung Website-Einbau (/website-einbau/, DE und EN).
   Bauvertrag docs/PLAN_WEBSITE_EINBAU_BAU.md, Paket G. Optik nach
   docs/mockups/website_einbau_0311.html, Reiter „Anleitung für alle“.
   HTML erzeugt tool/gen_website_einbau.py; dieses CSS steht von Hand. */

@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/SchibstedGrotesk-Regular.woff2') format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/SchibstedGrotesk-SemiBold.woff2') format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/SchibstedGrotesk-Bold.woff2') format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/SchibstedGrotesk-ExtraBold.woff2') format('woff2')}

:root{
  --bg:#F4F7F9;--card:#FFFFFF;--tx:#111827;--t2:#5B677A;--t3:#8390A2;--bd:#E3E8EF;--hd:#0B3A53;
  --teal:#12857E;--tealbg:#E7F4F3;--hov:#EEF2F5;
  --warn:#8A5A0E;--warnbg:#FBF3E4;--no:#A23B3B;--nobg:#FBECEC;--ok:#2E7D5B;--okbg:#ECF7F1;
  --code:#0F1D24;--codetx:#CFE9EC;
  --font:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,Consolas,'Cascadia Mono',monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0E171D;--card:#152229;--tx:#E6EDF2;--t2:#A3B1BE;--t3:#7D8C99;--bd:#24343E;--hd:#D9EEF5;
  --teal:#3FC1B6;--tealbg:#123A3A;--hov:#1B2B33;
  --warn:#F1C46B;--warnbg:#2E2511;--no:#F09A9A;--nobg:#351C1C;--ok:#7DD3A8;--okbg:#14301F;
  --code:#0A1217;--codetx:#CFE9EC;
  color-scheme:dark;
}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.55 var(--font);overflow-wrap:break-word}
a{color:var(--teal)}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

.top,.guide,.foot{max-width:812px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:16px;padding-bottom:16px}
.brand{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:17px;color:var(--hd);text-decoration:none;min-height:44px}
.brand img{width:20px;height:auto}
.langs{display:flex;gap:4px;background:var(--hov);border-radius:10px;padding:3px}
.langs a{display:inline-block;min-width:44px;padding:8px 10px;border-radius:8px;text-align:center;font-weight:700;font-size:14px;color:var(--t2);text-decoration:none}
.langs a[aria-current="page"]{background:var(--card);color:var(--tx);box-shadow:0 1px 3px rgba(0,0,0,.12)}

.guide{padding-bottom:40px}
.hero{background:linear-gradient(160deg,#0B3A53,#12857E);color:#fff;border-radius:20px;padding:30px 26px;display:flex;flex-direction:column;gap:10px}
.eyebrow{font-weight:700;font-size:13px;letter-spacing:.04em;opacity:.85}
.hero h1{margin:0;font-size:32px;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
.hero p{margin:0;opacity:.9;max-width:580px}

h2{font-size:21px;color:var(--hd);margin:30px 0 12px;letter-spacing:-.01em}
h3{font-size:16px;color:var(--hd);margin:0 0 4px}
.card{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:18px;min-width:0}
.card p{margin:0;font-size:14.5px;color:var(--t2)}

.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0 0}
.step .n{font-weight:800;color:var(--teal);font-size:13px;letter-spacing:.05em}
.step h3{margin:6px 0 4px}

.what{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mod{display:flex;gap:12px}
.mi{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;flex:none}
.mi svg{width:22px;height:22px}
.mi-leo{background:#12857E}.mi-req{background:#2F7FD8}.mi-checkin{background:#7559D9}.mi-price{background:#C2621E}

.block{display:flex;flex-direction:column;gap:10px}
.block h3{margin-top:12px}
.block p{color:var(--tx);font-size:15px}
.block p.muted{color:var(--t2);font-size:14px}
.code{margin:0;background:var(--code);color:var(--codetx);border-radius:10px;padding:12px 14px;font:13.5px/1.5 var(--mono);white-space:pre-wrap;word-break:break-all;overflow-wrap:anywhere;min-width:0;user-select:all}
.code code{font:inherit}
.ph{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ph li{display:flex;flex-direction:column;gap:4px;min-width:0}
.phl{font-weight:700;font-size:14px}

.legend{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--t2)}
.badge{display:inline-flex;align-items:center;border-radius:20px;padding:3px 10px;font-size:12.5px;font-weight:700;white-space:nowrap}
.badge.ok{background:var(--okbg);color:var(--ok)}
.badge.paid{background:var(--warnbg);color:var(--warn)}
.badge.no{background:var(--nobg);color:var(--no)}

details{border:1px solid var(--bd);border-radius:12px;background:var(--card);margin-bottom:8px}
summary{cursor:pointer;padding:13px 16px;font-weight:700;display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;list-style:none;min-height:48px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";margin-left:auto;font-size:20px;line-height:1;color:var(--t3);font-weight:500}
details[open] summary::after{content:"\2212"}
.pf{min-width:0}
details .in{padding:0 16px 14px;font-size:14.5px;color:var(--t2)}
details .in p{margin:0}
details .in .note{margin:0 0 8px;color:var(--tx)}
details .in ol{margin:6px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.path{background:var(--hov);border-radius:6px;padding:1px 6px;font-weight:600;color:var(--tx);font-size:13.5px;line-height:1.9;-webkit-box-decoration-break:clone;box-decoration-break:clone}

.faq h2{margin-top:30px}

.foot{display:flex;flex-wrap:wrap;gap:6px 18px;padding-top:18px;padding-bottom:calc(28px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--bd);font-size:14px}
.foot a{color:var(--t2);text-decoration:none;padding:6px 0}
.foot a:hover{color:var(--teal)}

@media (max-width:700px){
  .three,.what{grid-template-columns:1fr}
  .hero{padding:24px 20px}
  .hero h1{font-size:26px}
}