/* Koppelheck · Basis für alle Entwürfe. Farben und Schriften aus dem Markenpaket 2.0 (19.10.2026). */
@font-face{font-family:Anton;src:url(/fonts/Anton-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:Barlow;font-weight:400;src:url(/fonts/Barlow-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:Barlow;font-weight:500;src:url(/fonts/Barlow-Medium.woff2) format("woff2");font-display:swap}
@font-face{font-family:Barlow;font-weight:600;src:url(/fonts/Barlow-SemiBold.woff2) format("woff2");font-display:swap}
@font-face{font-family:Barlow;font-weight:700;src:url(/fonts/Barlow-Bold.woff2) format("woff2");font-display:swap}

:root{
  --nacht:#0E0E10; --schiefer:#1F1F23; --sand:#EDE7DD; --gelb:#F0D628;
  --nebel:#96928C; --nebelhell:#6F6B66; --linie:#3E3C3C; --liniehell:#D6D1C8; --weiss:#FFFFFF;
  --ton-nacht:#1B1B1F; --ton-schiefer:#2B2B30; --ton-sand:#E2DCD0;
  --anton:Anton,"Arial Narrow",sans-serif; --barlow:Barlow,system-ui,sans-serif;
  --ev:var(--gelb); --ev-text:var(--nacht);
  --rand:clamp(20px,5vw,80px); --max:1440px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;font-family:var(--barlow);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
[hidden]{display:none!important}
::selection{background:var(--gelb);color:var(--nacht)}
:focus-visible{outline:2px solid var(--gelb);outline-offset:3px;border-radius:2px}

/* Anton immer Versalien, Zeilenhöhe min. 1,1 wegen Ä/Ö/Ü */
.anton,h1,.h1,.h2{font-family:var(--anton);font-weight:400;text-transform:uppercase;line-height:1.1;letter-spacing:.005em}

.i{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--gelb);color:var(--nacht);padding:10px 16px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Offene Fakten bleiben sichtbar */
mark.fehlt{background:rgba(240,214,40,.16);color:inherit;outline:1px dashed var(--gelb);outline-offset:1px;padding:0 .2em;border-radius:2px;font-weight:500}

/* Testdatum-Leiste (nur mit ?heute=) */
.testdatum{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:200;background:var(--gelb);color:var(--nacht);font:600 14px/1 var(--barlow);padding:12px 16px;border-radius:999px;box-shadow:0 8px 30px rgba(0,0,0,.35);white-space:nowrap}
.testdatum a{margin-left:10px}

/* Formular-Basis */
.honig{position:absolute;left:-9999px}
.formular{display:grid;gap:20px}
.felder{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.feld{display:grid;gap:6px}
.feld-voll{grid-column:1/-1}
.feld label{font-weight:600;font-size:15px}
.feld label span{font-weight:400;opacity:.65;margin-left:4px}
.feld small{font-size:14px;opacity:.7}
.feld input,.feld textarea{font:inherit;font-size:17px;width:100%;padding:13px 14px;border-radius:4px;border:1px solid currentColor;background:transparent;color:inherit}
.feld textarea{resize:vertical;min-height:140px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.45}
.check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--gelb);flex:none}
.formular-fehler{padding:14px 16px;border-left:3px solid #E5484D;background:rgba(229,72,77,.12)}
@media (max-width:640px){.felder{grid-template-columns:1fr}}

/* Studio-Kante-Credit (Mono, übernimmt Schrift und Farbe) */
.sk-credit{display:inline-flex;align-items:center;gap:.55em;font:inherit;font-size:12px;line-height:1;color:inherit;text-decoration:none}
.sk-credit>span{opacity:.72;transition:opacity .2s ease}
.sk-credit:hover>span,.sk-credit:focus-visible>span{opacity:1}
.sk-credit svg{height:.92em;width:auto;display:block;flex:none}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Mieten: Angebote im Wechsel, Auswahl im Formular */
.miet-intro{margin-bottom:28px}
.miet-sprung{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(40px,6vw,72px)}
.miet-sprung a{padding:9px 16px;border:1px solid currentColor;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;opacity:.85}
.miet-sprung a:hover{opacity:1}
.angebote{display:grid;gap:clamp(56px,8vw,112px)}
.angebot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center;scroll-margin-top:96px}
.angebot:nth-child(even) .angebot-bild{order:2}
.angebot-bild img{width:100%;aspect-ratio:4/3;object-fit:cover}
.angebot-bild.platzhalter-bild{aspect-ratio:4/3}
.angebot-text{display:grid;gap:14px;justify-items:start}
.angebot-text .fakten-tabelle{width:100%;margin-top:8px}
.angebot-text .knopf{margin-top:8px}
@media (max-width:860px){.angebot{grid-template-columns:1fr}.angebot:nth-child(even) .angebot-bild{order:0}}
.wahl{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.wahl legend{font-weight:600;font-size:15px;margin-bottom:10px;padding:0}
.wahl label{position:relative;cursor:pointer}
.wahl input{position:absolute;opacity:0;width:1px;height:1px}
.wahl span{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border:1px solid currentColor;border-radius:999px;font-weight:600;font-size:15px;opacity:.75}
.wahl span::before{content:"";width:10px;height:10px;border-radius:50%;border:1.5px solid currentColor}
.wahl input:checked+span{opacity:1}
.wahl input:checked+span::before{background:currentColor}
.wahl input:focus-visible+span{outline:2px solid var(--gelb);outline-offset:3px}