/* Hawkshelf – eine Datei für alle Seiten. Keine Schriften von außen, keine Skripte (CSP: style-src 'self'). */
:root{
  --orange:#F26B1D;--orange-dunkel:#EA580C;--orange-hell:#FFF4EC;--orange-rand:#FCD9C2;
  --text:#111827;--grau:#6B7280;--grau-hell:#9CA3AF;--rand:#E5E7EB;--flaeche:#F9FAFB;--weiss:#fff;
  --schatten:0 1px 2px rgba(17,24,39,.04),0 8px 24px rgba(17,24,39,.06);
  --radius:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:#fff;-webkit-font-smoothing:antialiased}
a{color:var(--orange-dunkel)}
img{display:block}
.icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.innen{max-width:1200px;margin:0 auto;padding:0 24px}
.schmal{max-width:780px}

/* Kopf */
.kopf{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid rgba(229,231,235,.7)}
.kopf .innen{display:flex;align-items:center;gap:32px;height:72px}
.marke{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:800;font-size:22px;letter-spacing:-.02em}
.marke img{width:32px;height:32px}
.menue{display:flex;gap:28px;flex:1}
.menue a{color:#374151;text-decoration:none;font-size:15px;font-weight:500}
.menue a:hover{color:var(--orange-dunkel)}
.kopf-rechts{display:flex;align-items:center;gap:18px}
.sprachwahl{position:relative}
.sprachwahl summary{display:flex;align-items:center;gap:6px;list-style:none;cursor:pointer;color:#374151;font-size:15px;padding:6px 8px;border-radius:8px}
.sprachwahl summary::-webkit-details-marker{display:none}
.sprachwahl summary:hover{background:var(--flaeche)}
.sprachwahl .icon{width:18px;height:18px}
.sprach-menue{position:absolute;right:0;top:calc(100% + 6px);min-width:150px;padding:6px;border:1px solid var(--rand);border-radius:10px;background:#fff;box-shadow:var(--schatten);z-index:20}
.sprach-menue a,.sprach-menue span{display:block;padding:8px 10px;border-radius:8px;color:#374151;text-decoration:none;font-size:15px}
.sprach-menue a:hover{background:var(--flaeche);color:var(--orange-dunkel)}
.sprach-menue span{font-weight:600;color:var(--orange-dunkel)}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:10px;border:1px solid var(--orange);background:linear-gradient(180deg,#F97316,var(--orange-dunkel));color:#fff;text-decoration:none;font-weight:600;font-size:16px;box-shadow:0 6px 16px rgba(234,88,12,.22);white-space:nowrap}
.knopf:hover{filter:brightness(1.05)}
.knopf .icon{width:18px;height:18px}
.knopf.klein{padding:9px 16px;font-size:15px;box-shadow:none}
.knopf.zweit{background:#fff;color:var(--orange-dunkel);box-shadow:none}
.knopf.leicht{background:#fff;color:var(--text);border-color:var(--rand);box-shadow:none}
.knopf.aus{background:var(--flaeche);border-color:var(--rand);color:var(--grau);font-weight:500;box-shadow:none}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0}

/* Startseite: Kopfbereich */
.held{position:relative;overflow:hidden;padding:64px 0 40px}
.held::before{content:"";position:absolute;right:-200px;top:-120px;width:900px;height:700px;background:radial-gradient(closest-side,rgba(251,146,60,.28),rgba(251,146,60,0));pointer-events:none}
.held .innen{position:relative;display:grid;grid-template-columns:1.02fr 1fr;gap:48px;align-items:center}
.augenbraue{margin:0 0 18px;color:var(--orange-dunkel);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.held h1{margin:0;font-size:64px;line-height:1.02;letter-spacing:-.035em;font-weight:800}
.held h1 span{display:block;background:linear-gradient(90deg,#F97316,#EA580C);-webkit-background-clip:text;background-clip:text;color:transparent}
.einleitung{margin:24px 0 0;font-size:19px;line-height:1.55;color:#374151;max-width:520px}
.vertrauen{display:flex;flex-wrap:wrap;gap:12px 28px;margin:28px 0 0;padding:0;list-style:none;color:#374151;font-size:15px}
.vertrauen li{display:flex;align-items:center;gap:8px}
.vertrauen .icon{color:#374151}

/* Bühne mit Browser und Panel */
.buehne{position:relative;min-height:440px}
.browser{position:absolute;left:0;top:30px;width:78%;border-radius:12px;background:#fff;border:1px solid var(--rand);box-shadow:var(--schatten);overflow:hidden}
.browser-leiste{display:flex;align-items:center;gap:6px;padding:10px 12px;background:#F3F4F6;border-bottom:1px solid var(--rand)}
.punkt{width:9px;height:9px;border-radius:50%;background:#F87171}.punkt.g{background:#FBBF24}.punkt.gr{background:#34D399}
.adresse{margin-left:10px;flex:1;padding:4px 10px;border-radius:6px;background:#fff;border:1px solid var(--rand);font-size:12px;color:var(--grau);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.suchleiste{display:flex;gap:8px;padding:12px;background:#232F3E}
.suchleiste span{flex:1;padding:7px 10px;border-radius:6px;background:#fff;font-size:13px;color:#111}
.suchleiste b{width:38px;border-radius:6px;background:#FDBA74}
.treffer{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:14px}
.treffer div{height:150px;border-radius:8px;background:linear-gradient(180deg,#F3F4F6,#E5E7EB)}
.panel{position:absolute;right:0;top:0;width:62%;padding:18px;border-radius:14px;background:#fff;border:1px solid var(--rand);box-shadow:0 20px 50px rgba(17,24,39,.14);font-size:13px}
.panel-kopf{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px}
.panel-kopf img{width:20px;height:20px}
.panel h3{margin:10px 0 10px;font-size:19px;letter-spacing:-.01em}
.begriff{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--rand);border-radius:8px;color:#374151;margin-bottom:12px}
.begriff .icon{width:16px;height:16px;color:var(--orange)}
.begriff small{margin-left:auto;color:var(--grau)}
.kacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kachel{padding:10px 12px;border:1px solid var(--rand);border-radius:10px;background:#fff}
.kachel b{display:block;font-size:17px;letter-spacing:-.01em}
.kachel span{color:var(--grau);font-size:12px}
.panel h4{margin:14px 0 8px;font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:4px 9px;border:1px solid var(--rand);border-radius:999px;font-size:12px;color:#374151;background:#fff}
.panel-fuss{display:flex;gap:8px;margin-top:14px;align-items:center;flex-wrap:wrap}
.mini-knopf{padding:6px 10px;border:1px solid var(--rand);border-radius:8px;font-size:12px;background:#fff;color:#374151}
.panel-fuss small{color:var(--grau);margin-left:auto}

/* Werkzeug-Karten */
.abschnitt{padding:40px 0}
.abschnitt h2{margin:0 0 6px;font-size:34px;letter-spacing:-.025em;text-align:center}
.unterzeile{margin:0 0 28px;text-align:center;color:var(--grau)}
.werkzeuge{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.werkzeug{display:grid;grid-template-columns:1.25fr 1fr;gap:20px;padding:26px;border:1px solid var(--rand);border-radius:18px;background:#fff;box-shadow:var(--schatten)}
.werkzeug-kopf{display:flex;gap:16px;align-items:flex-start}
.werkzeug-icon{display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:12px;background:linear-gradient(180deg,#F97316,#EA580C);color:#fff}
.werkzeug-icon .icon{width:26px;height:26px}
.werkzeug h3{margin:2px 0 6px;font-size:21px;letter-spacing:-.015em}
.werkzeug p{margin:0;color:var(--grau);font-size:15px}
.haken{list-style:none;padding:0;margin:18px 0 20px}
.haken li{display:flex;align-items:flex-start;gap:10px;margin:8px 0;font-size:15px;color:#374151}
.haken .icon{color:var(--orange);margin-top:2px}
.vorschau{align-self:center;padding:12px;border:1px solid var(--rand);border-radius:12px;background:#fff;box-shadow:var(--schatten);font-size:12px}
.vorschau .kacheln{grid-template-columns:repeat(3,1fr)}
.vorschau .kachel b{font-size:14px}
.balken{margin-top:10px}
.balken span{display:flex;justify-content:space-between;color:var(--grau);font-size:11px;margin-bottom:4px}
.balken progress{width:100%;height:8px;border:0;border-radius:99px;appearance:none;-webkit-appearance:none;background:#F3F4F6;overflow:hidden}
.balken progress::-webkit-progress-bar{background:#F3F4F6;border-radius:99px}
.balken progress::-webkit-progress-value{background:linear-gradient(90deg,#FB923C,#EA580C);border-radius:99px}
.balken progress::-moz-progress-bar{background:linear-gradient(90deg,#FB923C,#EA580C);border-radius:99px}
.liste{list-style:none;margin:8px 0 0;padding:0}
.liste li{display:flex;align-items:center;gap:8px;padding:5px 2px;border-top:1px solid #F3F4F6;color:#374151}
.liste li:first-child{border-top:0}
.liste .icon{width:14px;height:14px;color:var(--grau)}
.liste em{margin-left:auto;font-style:normal;color:var(--grau-hell);font-size:11px}

/* So funktioniert es */
.schritte{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:18px;align-items:center;margin-top:10px}
.schritt{display:flex;gap:16px;align-items:flex-start}
.nummer{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:var(--orange-hell);color:var(--orange-dunkel);font-weight:700;font-size:18px}
.schritt b{display:block;margin-bottom:2px}
.schritt span{color:var(--grau);font-size:15px}
.zwischen{color:#374151}

/* Preise */
.preisbox{display:grid;grid-template-columns:1fr 1.1fr 1.25fr 1.1fr;gap:20px;align-items:stretch;padding:26px;border:1px solid var(--rand);border-radius:18px;background:#fff;box-shadow:var(--schatten)}
.preisbox h2{text-align:left;font-size:28px}
.preisbox .unterzeile{text-align:left;margin:0}
.preis{padding:22px;border:1px solid var(--rand);border-radius:14px}
.preis.pro{border:2px solid #FDBA74;background:var(--orange-hell)}
.preis h3{margin:0 0 6px;font-size:20px}
.preis p{margin:0;color:#374151;font-size:15px}
.betrag{margin-top:16px;font-size:34px;font-weight:800;letter-spacing:-.02em}
.betrag small{font-size:15px;font-weight:500;color:var(--grau)}
.jahr{margin:4px 0 0;font-weight:600}
.spar{display:inline-block;margin-left:8px;padding:1px 8px;border:1px solid #FDBA74;border-radius:6px;color:var(--orange-dunkel);font-size:13px;font-weight:600}
.pro .knoepfe{margin:16px 0 0}
.preisliste .haken{margin:0 0 10px}
.klein-text{font-size:13px;color:var(--grau)}

/* Vertrauensleiste und Fuß */
.leiste{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 28px;padding:18px 0;margin-top:26px;border-top:1px solid var(--rand);color:#374151;font-size:14px}
.leiste span{display:flex;align-items:center;gap:8px}
.leiste .icon{color:var(--orange)}
.fuss{border-top:1px solid var(--rand);margin-top:24px}
.fuss .innen{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;padding:22px 24px 34px}
.fuss .marke{font-size:17px}
.fuss .marke img{width:24px;height:24px}
.fuss nav{display:flex;flex-wrap:wrap;gap:8px 20px;flex:1}
.fuss nav a{color:#4B5563;text-decoration:none;font-size:14px}
.fuss nav a:hover{color:var(--orange-dunkel)}
.hinweis{width:100%;margin:0;color:var(--grau-hell);font-size:12px}

/* Unterseiten: Werkzeuge, Rechtliches, Danke */
.inhalt{padding:48px 0 24px}
.inhalt h1{margin:0 0 12px;font-size:42px;line-height:1.1;letter-spacing:-.03em}
.inhalt h2{margin:40px 0 10px;font-size:24px;letter-spacing:-.015em;text-align:left}
.inhalt h3{margin:24px 0 6px;font-size:18px}
.inhalt p,.inhalt li{color:#374151}
.inhalt ul,.inhalt ol{padding-left:22px}
.inhalt address{font-style:normal;color:#374151}
.inhalt .preise{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:18px 0}
.karte{padding:20px 22px;border:1px solid var(--rand);border-radius:var(--radius);background:#fff}
.karte.pro{border:2px solid #FDBA74;background:var(--orange-hell)}
.karte b{font-size:20px}
.leise{color:var(--grau);font-size:14px}
.titelzeile{display:flex;gap:16px;align-items:center;margin-bottom:8px}

@media (max-width:1000px){
  .held .innen,.werkzeuge,.werkzeug,.preisbox{grid-template-columns:1fr}
  .held h1{font-size:46px}
  .buehne{min-height:420px}
  .schritte{grid-template-columns:1fr}
  .zwischen{display:none}
  .menue{display:none}
}
@media (max-width:560px){
  .kopf .innen{gap:12px}
  .kopf-rechts .knopf{display:none}
  .held{padding-top:36px}
  .held h1{font-size:38px}
  .buehne{display:none}
  .inhalt h1{font-size:32px}
}