/* SCC Court-Designer-Seite – Gestaltung nach scc-courts.de (Farben und Schriften wie der Designer, ../court-designer/index.html) */
@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url(../court-designer/vendor/fonts/BarlowCondensed-SemiBold.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(../court-designer/vendor/fonts/BarlowCondensed-Bold.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-weight:400;font-display:swap;src:url(../court-designer/vendor/fonts/open-sans-400.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-weight:600;font-display:swap;src:url(../court-designer/vendor/fonts/open-sans-600.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-weight:700;font-display:swap;src:url(../court-designer/vendor/fonts/open-sans-700.woff2) format("woff2")}

:root{--gruen:#036147;--gruen-hell:#12b878;--dunkel:#0f1e1b;--mint:#7daa9b;--sand:#f6f3ee;--weiss:#fff;--linie:#ded8ce;--grau:#6b6b6b;--rot:#b3261e;
  --titel:"Barlow Condensed","Arial Narrow",Arial,sans-serif;--text:"Open Sans",Arial,Helvetica,sans-serif;
  --rand:clamp(16px,4vw,56px);--breite:1240px;color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font:15px/1.65 var(--text);color:var(--dunkel);background:var(--sand);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--titel);font-weight:700;text-transform:uppercase;line-height:.95;margin:0 0 14px;text-wrap:balance}
h1{font-size:clamp(52px,8vw,108px)}
h2{font-size:clamp(36px,4.6vw,62px)}
h3{font-size:clamp(24px,2.4vw,30px);line-height:1}
p{margin:0 0 14px;max-width:62ch}
.kicker{font-family:var(--titel);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--gruen);margin:0 0 10px;display:block}
.klein{font-size:13px;color:var(--grau)}
.sprung{position:absolute;left:-9999px}.sprung:focus{left:16px;top:16px;z-index:99;background:#fff;padding:8px 12px}
:focus-visible{outline:3px solid var(--gruen-hell);outline-offset:2px}

/* Knöpfe */
.knopf,.knopf-zart,.knopf-link,.chip,.umschalter button,.antwort{font:inherit;cursor:pointer;border-radius:0;text-decoration:none;transition:background .2s,color .2s,border-color .2s,transform .2s}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--titel);font-weight:600;font-size:16px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--gruen);color:#fff;border:1px solid var(--gruen);padding:13px 22px;min-height:48px}
.knopf:hover{background:var(--dunkel);border-color:var(--dunkel)}
.dunkel .knopf:hover{background:var(--gruen-hell);border-color:var(--gruen-hell);color:var(--dunkel)}
.knopf:disabled{opacity:.45;cursor:not-allowed}
.knopf-zart{display:inline-flex;align-items:center;justify-content:center;font-family:var(--titel);font-weight:600;font-size:15px;letter-spacing:.06em;text-transform:uppercase;
  background:transparent;color:var(--dunkel);border:1px solid var(--dunkel);padding:12px 18px;min-height:48px}
.knopf-zart:hover,.knopf-zart[aria-pressed=true]{background:var(--dunkel);color:#fff}
.knopf-zart.hell{color:#fff;border-color:rgba(255,255,255,.5)}.knopf-zart.hell:hover{background:#fff;color:var(--dunkel)}
.knopf-link{background:none;border:0;padding:8px 0;color:var(--gruen);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.klein-knopf{min-height:40px;padding:8px 16px;font-size:14px}
.karte-knoepfe{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.chip{background:#fff;border:1px solid var(--linie);padding:10px 14px;font-size:13.5px;font-weight:600;min-height:44px;color:var(--dunkel)}
.chip:hover{border-color:var(--gruen)}
.chip[aria-pressed=true]{background:var(--gruen);border-color:var(--gruen);color:#fff}
.umschalter{display:inline-flex;border:1px solid var(--dunkel)}
.umschalter button{background:transparent;border:0;padding:10px 18px;font-family:var(--titel);font-weight:600;font-size:16px;letter-spacing:.05em;text-transform:uppercase;color:var(--dunkel);min-height:44px}
.umschalter button[aria-pressed=true]{background:var(--dunkel);color:#fff}

/* Kopfzeile */
.kopfzeile{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:20px;padding:10px var(--rand);background:rgba(246,243,238,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--linie)}
.logo img{height:34px;width:auto}
.seiten-nav{display:flex;gap:22px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.seiten-nav a{font-family:var(--titel);font-weight:600;font-size:15px;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;color:var(--grau);padding:8px 0;border-bottom:2px solid transparent;white-space:nowrap}
.seiten-nav a:hover,.seiten-nav a[aria-current]{color:var(--dunkel);border-color:var(--gruen)}
@media (max-width:900px){.seiten-nav{display:none}.kopfzeile .knopf{margin-left:auto}}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center;max-width:calc(var(--breite) + 2*var(--rand));margin:0 auto;padding:clamp(40px,7vw,96px) var(--rand) clamp(32px,5vw,64px)}
.einleitung{font-size:17px}
.hero-bild{margin:0}.hero-bild img{mix-blend-mode:multiply;animation:auftauchen .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes auftauchen{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.zahlen{display:flex;gap:32px;list-style:none;padding:24px 0 0;margin:24px 0 0;border-top:1px solid var(--linie)}
.zahlen strong{display:block;font-family:var(--titel);font-size:40px;line-height:1;color:var(--gruen)}
.zahlen span{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--grau)}
@media (max-width:820px){.hero{grid-template-columns:1fr}.hero-bild{order:-1}}

/* Abschnitte */
.abschnitt{padding:clamp(56px,8vw,112px) var(--rand)}
.abschnitt > *{max-width:var(--breite);margin-left:auto;margin-right:auto}
.abschnitt.hell{background:#fff}
.abschnitt.dunkel{background:var(--dunkel);color:#fff}
.abschnitt.dunkel .kicker{color:var(--gruen-hell)}
.abschnitt.dunkel .klein{color:#b9c7c2}
.abschnitt-kopf{margin-bottom:clamp(28px,4vw,48px)}
.abschnitt-kopf p:last-child{font-size:16px}

/* Court-Finder */
.finder{background:var(--sand);padding:clamp(20px,4vw,48px);border:1px solid var(--linie)}
.fortschritt{height:4px;background:var(--linie);margin-bottom:28px}
.fortschritt span{display:block;height:100%;width:var(--anteil,0%);background:var(--gruen);transition:width .4s cubic-bezier(.2,.7,.2,1)}
.frage{border:0;margin:0;padding:0;animation:auftauchen .4s both}
.frage legend{padding:0;margin-bottom:20px}
.frage-text{display:block;font-family:var(--titel);font-weight:700;text-transform:uppercase;font-size:clamp(28px,3.2vw,40px);line-height:1}
.antworten{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:12px}
.antwort{background:#fff;border:1px solid var(--linie);padding:22px 18px;text-align:left;font-family:var(--titel);font-weight:600;font-size:20px;text-transform:uppercase;letter-spacing:.03em;min-height:72px;color:var(--dunkel)}
.antwort:hover{border-color:var(--gruen);transform:translateY(-2px)}
.antwort[aria-pressed=true]{border-color:var(--gruen);box-shadow:inset 4px 0 0 var(--gruen)}
.finder-ergebnis{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:center;animation:auftauchen .5s both}
.finder-ergebnis[hidden]{display:none}
.finder-ergebnis img{background:#fff;border:1px solid var(--linie)}
.finder-ergebnis h3:focus{outline:none}
@media (max-width:760px){.finder-ergebnis{grid-template-columns:1fr}}
.punkte{list-style:none;padding:0;margin:0 0 12px}
.punkte li{position:relative;padding-left:18px;margin-bottom:6px;font-size:14px}
.punkte li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--gruen)}

/* Modelle */
.leiste{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;margin-bottom:8px}
.serien{margin:0}
.vergleich-zahl{margin:8px 0 18px}
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.karte{background:#fff;border:1px solid var(--linie);display:flex;flex-direction:column;transition:border-color .2s,box-shadow .2s,transform .2s;animation:auftauchen .45s both}
.karte:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(15,30,27,.45)}
.karte.gewaehlt{border-color:var(--gruen);box-shadow:inset 0 0 0 1px var(--gruen)}
.karte img,.karte-bild{aspect-ratio:16/10;object-fit:cover;width:100%;background:#eceae6}
.karte-bild.leer{display:grid;place-items:center;font-family:var(--titel);font-weight:700;font-size:26px;text-transform:uppercase;color:var(--mint);background:repeating-linear-gradient(45deg,#f0eee9 0 12px,#ebe8e2 12px 24px)}
.karte-inhalt{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.karte-inhalt .karte-knoepfe{margin-top:auto;padding-top:14px}
.karte-inhalt .knopf,.karte-inhalt .knopf-zart{font-size:14px;padding:10px 14px;min-height:44px}
.fakten{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0 0 4px;font-size:13px}
.fakten dt{color:var(--grau)}.fakten dd{margin:0;font-weight:600}
.vergleich{margin-top:28px;background:#fff;border:1px solid var(--gruen);padding:clamp(16px,3vw,28px);animation:auftauchen .4s both}
.vergleich[hidden]{display:none}
.vergleich-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.tabellen-huelle{overflow-x:auto}
.tabelle{width:100%;border-collapse:collapse;font-size:14px}
.vergleich .tabelle{min-width:520px}
.tabelle th,.tabelle td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--linie)}
.tabelle thead th{font-family:var(--titel);font-size:18px;text-transform:uppercase;letter-spacing:.03em}
.tabelle tbody th{font-weight:600;color:var(--grau);width:24%}
.tabelle tr.anders td{background:#eef6f2;font-weight:600}

/* Designer */
.designer-huelle{position:relative;height:min(86vh,900px);min-height:560px;background:#0a1512;border:1px solid rgba(255,255,255,.12)}
.designer-huelle iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent}
.designer-laden{position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;font-family:var(--titel);font-size:20px;text-transform:uppercase;letter-spacing:.06em;color:#cfdad6;pointer-events:none;transition:opacity .4s}
.designer-bereit .designer-laden{opacity:0}
.drehen{width:36px;height:36px;border:3px solid rgba(255,255,255,.2);border-top-color:var(--gruen-hell);border-radius:50%;animation:drehen 1s linear infinite}
@keyframes drehen{to{transform:rotate(1turn)}}
.designer-leiste{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:16px}

/* Ausstattung */
.ausstattung{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);border:1px solid var(--linie);background:var(--sand)}
.ausstattung-liste{display:flex;flex-direction:column;border-right:1px solid var(--linie);background:#fff}
.ausstattung-liste [role=tab]{text-align:left;background:none;border:0;border-left:4px solid transparent;border-bottom:1px solid var(--linie);padding:12px 16px;cursor:pointer;font:inherit;color:var(--dunkel)}
.ausstattung-liste [role=tab] .kicker{font-size:11px;margin:0;color:var(--grau)}
.tab-titel{font-family:var(--titel);font-weight:600;font-size:19px;text-transform:uppercase;letter-spacing:.02em}
.ausstattung-liste [role=tab]:hover{background:var(--sand)}
.ausstattung-liste [role=tab][aria-selected=true]{border-left-color:var(--gruen);background:var(--sand)}
.ausstattung-liste [role=tab][aria-selected=true] .kicker{color:var(--gruen)}
.ausstattung-feld{padding:clamp(20px,3.5vw,44px);min-height:460px}
.wann{background:#fff;border-left:4px solid var(--gruen);padding:12px 16px;font-size:14px}
.unterzeile{font-family:var(--titel);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--grau);margin:18px 0 0}
.palette{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.farbe{width:40px;height:40px;border:1px solid rgba(0,0,0,.18);background:var(--f);cursor:pointer;padding:0;position:relative;transition:transform .15s}
.farbe:hover{transform:scale(1.1)}
.farbe[aria-pressed=true]{outline:3px solid var(--dunkel);outline-offset:2px}
.farbe.art-metallic{background:linear-gradient(135deg,rgba(255,255,255,.45),transparent 45%,rgba(0,0,0,.25)),var(--f)}
.farbe.art-glossy{background:linear-gradient(160deg,rgba(255,255,255,.6),transparent 40%),var(--f)}
.farbe.art-glow{background:var(--f);box-shadow:0 0 12px var(--f)}
.palette .farbe.art-sonder::after,.palette .farbe.art-metallic::after,.palette .farbe.art-glossy::after,.palette .farbe.art-glow::after{content:"€";position:absolute;right:2px;bottom:0;font-size:10px;font-weight:700;color:#fff;text-shadow:0 0 3px #000}
.farbe.mini{width:16px;height:16px;display:inline-block;vertical-align:middle;margin-right:6px;cursor:default}
.farbe.mini:hover{transform:none}
.farb-info{min-height:1.6em;font-size:14px}
.legende{list-style:none;padding:0;margin:8px 0 18px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--grau)}
.turf{display:grid;grid-template-columns:minmax(180px,240px) 1fr;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--linie)}
.turf b{display:block;font-family:var(--titel);font-size:17px;text-transform:uppercase}
.turf .palette{margin:0}
.ausstattung-feld .tabelle{margin:12px 0 18px;background:#fff}
@media (max-width:820px){.ausstattung{grid-template-columns:1fr}.ausstattung-liste{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--linie)}
  .ausstattung-liste [role=tab]{border-left:0;border-bottom:4px solid transparent;flex:0 0 auto;white-space:nowrap}
  .ausstattung-liste [role=tab][aria-selected=true]{border-bottom-color:var(--gruen)}.turf{grid-template-columns:1fr}}

/* Werkzeuge (Flächenplaner, Rechner) */
.werkzeug{display:grid;grid-template-columns:minmax(260px,360px) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:start}
@media (max-width:860px){.werkzeug{grid-template-columns:1fr}}
.felder{display:flex;flex-direction:column;gap:14px}
.felder label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
.felder input:not([type=range]):not([type=checkbox]),.felder select,.felder textarea{font:inherit;font-size:16px;font-weight:400;padding:11px 12px;border:1px solid var(--linie);background:#fff;color:var(--dunkel);border-radius:0;min-height:46px;width:100%}
.felder input:focus,.felder select:focus,.felder textarea:focus{border-color:var(--gruen);outline:none;box-shadow:0 0 0 3px rgba(18,184,120,.25)}
.regler label{display:grid;grid-template-columns:1fr auto;align-items:center}
.regler label input{grid-column:1/-1}
.regler output{font-family:var(--titel);font-size:20px;font-weight:700;color:var(--gruen)}
input[type=range]{accent-color:var(--gruen);width:100%;height:28px;margin:0}
details{border-top:1px solid var(--linie);padding-top:10px}
details[open]{display:flex;flex-direction:column;gap:14px}
summary{cursor:pointer;font-family:var(--titel);font-weight:600;font-size:17px;text-transform:uppercase;letter-spacing:.04em}
.plan{background:#fff;border:1px solid var(--linie);padding:clamp(14px,2.5vw,24px)}
.plan-text{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-family:var(--titel);font-size:24px;text-transform:uppercase;font-weight:600;max-width:none}
.plan-text .gross{font-size:64px;line-height:.9;color:var(--gruen)}
.plan-text .klein{font-family:var(--text);text-transform:none;font-weight:400;flex-basis:100%}
.plan-text .warnung{color:var(--rot)}
.plan-bild svg{width:100%;height:auto;max-height:560px;display:block}
.plan-halle{fill:#ebe7df;stroke:var(--dunkel);stroke-width:.15}
.plan-court rect{fill:#1d5fae;stroke:#0f1e1b;stroke-width:.12;animation:auftauchen .35s calc(var(--i)*40ms) both;transform-box:fill-box;transform-origin:center}
.plan-court line{stroke:#fff;stroke-width:.12}
.plan-court text{fill:#fff;font-family:var(--titel);font-weight:700}
.plan-mass{stroke:var(--grau);stroke-width:.06}
.plan-masstext{fill:var(--grau);font-family:var(--text)}
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kachel{background:var(--sand);border-left:4px solid var(--gruen);padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.kachel .kicker{font-size:12px;margin:0;color:var(--grau)}
.kachel strong{font-family:var(--titel);font-size:clamp(24px,2.2vw,30px);line-height:1.05;white-space:nowrap}
.kachel.minus{border-color:var(--rot)}.kachel.minus strong{color:var(--rot)}
.kachel.plus strong{color:var(--gruen)}
.roi-grafik{margin:20px 0 0;background:var(--sand);padding:14px}
.roi-grafik svg{width:100%;height:auto;display:block}
.roi-null{stroke:var(--dunkel);stroke-width:1}
.roi-plus{fill:var(--gruen)}.roi-minus{fill:#c8a79b}
.roi-jahr{font-size:11px;fill:var(--grau);font-family:var(--text)}
.fazit{font-weight:600;margin-top:14px}

/* Anfrage */
.anfrage{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,4vw,48px);align-items:start}
@media (max-width:860px){.anfrage{grid-template-columns:1fr}}
.felder.zwei{display:grid;grid-template-columns:1fr 1fr;margin-bottom:18px}
.felder.zwei .breit{grid-column:1/-1}
@media (max-width:560px){.felder.zwei{grid-template-columns:1fr}}
.dunkel .felder label{color:#dfe8e4}
.dunkel .felder input:not([type=checkbox]),.dunkel .felder textarea{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#fff}
.felder .haken{flex-direction:row;align-items:center;gap:10px;align-self:end;min-height:46px}
.haken input{width:20px;height:20px;accent-color:var(--gruen-hell)}
.konfig{border:1px solid rgba(255,255,255,.18);padding:clamp(18px,3vw,28px);background:rgba(255,255,255,.04)}
.konfig .fakten dt{color:#9fb1ab}.konfig .fakten dd{color:#fff}

.fuss{padding:28px var(--rand);font-size:13px;color:var(--grau);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}
.fuss p{margin:0}

/* Rückmeldung */
.hinweis{position:fixed;left:50%;bottom:24px;transform:translate(-50%,24px);opacity:0;background:var(--dunkel);color:#fff;padding:12px 20px;font-weight:600;font-size:14px;z-index:50;pointer-events:none;transition:opacity .25s,transform .25s;box-shadow:0 10px 30px -10px rgba(0,0,0,.5);border-left:4px solid var(--gruen-hell);max-width:calc(100vw - 32px)}
.hinweis.sichtbar{opacity:1;transform:translate(-50%,0)}

/* Spam-Falle unsichtbar; eingebettet auf scc-courts.de: eigener Kopf und Fuß entfallen (die Website hat Header und Footer) */
.hp { position: absolute; left: -9999px; }
.eingebettet .kopfzeile, .eingebettet .fuss { display: none; }
/* Eingebettet wächst der Rahmen auf Seitenhöhe – vh würde mitwachsen und alles darunter verschieben; daher an der Breite ausrichten */
.eingebettet .designer-huelle { height: clamp(560px, 62vw, 900px); }

/* versteckte Knöpfe (z. B. PDF in der Website-Version) wirklich ausblenden */
[hidden]{display:none !important}