/* Gewerbehof Oyten – Farben und Komponenten nach docs/02_design.md */
:root{
  --head:#23343A; --dark:#23343A; --ink:#474747; --muted:#6B6B6B;
  --red:#D0202E; --red-dark:#A91824; --red-soft:rgba(208,32,46,.08);
  --gruen:#1E7A3C; --gelb:#E0A100;
  --sand:#F2F4F4; --line:#DCDCDC; --paper:#FFFFFF; --on-dark:#E4E7E8;
  --display:"Century Gothic","Didact Gothic","URW Gothic","Avant Garde",Arial,sans-serif;
  --text:Arial,"Liberation Sans",Helvetica,sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:16px;line-height:1.6}
img,svg{max-width:100%}
a{color:var(--head);text-underline-offset:2px}
a:hover{color:var(--red)}
h1,h2,h3{line-height:1.15;text-wrap:balance;margin:0;color:var(--head);font-family:var(--display);font-weight:700}
h1,.h1{font-size:clamp(34px,5.4vw,62px);letter-spacing:-.02em}
h2,.h2{font-size:clamp(26px,3.4vw,38px);letter-spacing:-.015em}
h3,.h3{font-size:22px}
b,strong{color:var(--head)}
p{margin:0}
figure{margin:0}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.wrap{max-width:1160px;margin:0 auto;padding-inline:24px}
.narrow{max-width:760px}
.label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red);font-family:var(--display)}
.mt{margin-top:16px}.mt-s{margin-top:10px}.mt-l{margin-top:56px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--head);color:#fff;padding:10px 16px}
.skip:focus{top:12px}
.small{font-size:13px;margin-top:10px}
.aside{max-width:420px}

/* Kopf */
.draft{background:var(--red);color:#fff;font-size:13px;text-align:center;padding:7px 16px}
.meta{border-bottom:1px solid var(--line);font-size:13px}
.meta .wrap{display:flex;justify-content:flex-end;gap:20px;padding-block:8px;flex-wrap:wrap}
.meta a{text-decoration:none;color:var(--ink)}
.meta a:hover{color:var(--red)}
.meta-claim{margin-right:auto;color:var(--muted)}
header.nav{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
header.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.brand{display:block;line-height:0}
.brand img{height:46px;width:auto}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;align-items:center}
nav a{display:block;text-decoration:none;padding:9px 12px;border-radius:2px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#535353;font-family:var(--display);font-weight:700}
nav a:hover{color:var(--red)}
nav a[aria-current="page"]:not(.btn){background:var(--dark);color:#fff}
nav li:last-child{margin-left:8px}
.btn.call,.menu-toggle{display:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid var(--head);background:var(--paper);color:var(--head);padding:11px 20px;border-radius:2px;text-transform:uppercase;letter-spacing:.05em;font-size:13px;font-weight:700;text-decoration:none;cursor:pointer;font-family:var(--display);line-height:1.2}
.btn.solid{background:var(--red);border-color:var(--red);color:#fff}
.btn:hover,nav a.btn:hover{background:var(--head);border-color:var(--head);color:#fff}
nav a.btn{padding:9px 18px}
.ctas{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}

section{padding-block:64px}
section.tight{padding-top:0}

/* Hero */
.hero{padding-block:40px 24px}
.heroimg,.photo{position:relative;border-radius:4px;overflow:hidden;border:1px solid var(--line);background:var(--sand)}
.heroimg img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.heroimg .badge{position:absolute;left:0;bottom:0;background:var(--red);color:#fff;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(12px,1.6vw,16px);padding:12px 18px}
.cap{position:absolute;right:10px;bottom:10px;font-size:11px;color:var(--ink);background:rgba(255,255,255,.92);padding:3px 8px;border-radius:2px}
.hero-text{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:end;margin-top:36px}
.hero h1{margin-top:14px}
.hero h1 em{font-style:normal;color:var(--red)}
.lead{font-size:19px;max-width:560px}
.photo{margin-bottom:36px}
.photo img{display:block;width:100%;height:auto;aspect-ratio:21/8;object-fit:cover}

.facts{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:48px}
.facts div{padding:20px 14px;border-left:1px solid var(--line)}
.facts div:first-child{border-left:0}
.facts b{display:block;color:var(--red);font-family:var(--display);font-size:34px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.2}

.h2row{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px;flex-wrap:wrap}

/* Karten */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pillar{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--red);border-radius:2px;padding:26px;display:flex;flex-direction:column;gap:12px}
.pillar .price{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-weight:700;color:var(--head)}
.pillar > a:last-child:not(.btn){font-weight:700}
.pillar .btn{align-self:flex-start}
.dot{width:10px;height:10px;border-radius:2px;background:var(--red);display:inline-block}

.ladder{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:2px;overflow:hidden}
.ladder li{padding:22px 22px 30px;border-left:1px solid var(--line);position:relative}
.ladder li:first-child{border-left:0}
.ladder li::before{content:"";position:absolute;left:0;right:0;bottom:0;background:var(--red)}
.ladder li:nth-child(1)::before{height:4px}.ladder li:nth-child(2)::before{height:8px}.ladder li:nth-child(3)::before{height:12px}.ladder li:nth-child(4)::before{height:16px}
.ladder b{display:block;font-size:18px;margin:6px 0 4px}

/* Tabellen */
.filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--paper);border-radius:2px;padding:7px 14px;font:inherit;font-size:14px;cursor:pointer;color:var(--ink)}
.chip:hover{border-color:var(--head)}
.chip[aria-pressed="true"]{border-color:var(--dark);background:var(--dark);color:#fff;font-weight:700}
.tablebox{position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:2px}
table{width:100%;border-collapse:collapse;min-width:600px}
th,td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;vertical-align:top}
th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:var(--dark);color:#fff;font-family:var(--display);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--sand)}
td:first-child{font-weight:700;color:var(--head);white-space:nowrap}
td small{display:block;color:var(--muted);font-size:13px}
.num{text-align:right;white-space:nowrap}
td.act{text-align:right;white-space:nowrap}
td.act a{font-weight:700;font-size:14px}
/* Ampel: grün frei · gelb reserviert · rot vermietet. Das Wort steht immer daneben,
   damit die Information nicht allein an der Farbe hängt. */
.status{display:inline-flex;align-items:center;gap:7px;font-size:14px;white-space:nowrap}
.status::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--gruen);flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.status.frei{font-weight:700;color:var(--head)}
.status.vorvermietung::before{background:var(--paper);border:3px solid var(--gruen);box-shadow:none}
.status.reserviert::before{background:var(--gelb)}
.status.vermietet{color:var(--muted)}
.status.vermietet::before{background:var(--red)}
.legende{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:14px;color:var(--ink)}
.legende .status{font-size:14px}
tr.is-vermietet td{color:var(--muted)}
tr[hidden]{display:none}

.features{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 18px}
.features.three{grid-template-columns:repeat(3,1fr)}
.feature{border-top:2px solid var(--red);padding-top:12px}
.feature b{display:block;font-size:17px;font-family:var(--display);margin-bottom:2px}

.partner{margin-top:24px;font-size:15px;padding:14px 18px;border-left:4px solid var(--red);background:var(--sand)}
.note{font-size:14px;margin-top:12px;color:var(--muted)}

.plan{border:1px solid var(--line);border-radius:4px;padding:12px;background:var(--paper)}
.plan svg{display:block;width:100%;height:auto}

/* Pakete */
.packs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pack{border:1px solid var(--line);border-radius:2px;padding:30px;display:flex;flex-direction:column}
.pack.feat{border:2px solid var(--red);box-shadow:inset 0 6px 0 var(--red)}
.pack h2{margin-top:10px;font-size:26px}
.amount{font-size:58px;font-weight:700;letter-spacing:-.03em;line-height:1;margin:18px 0 4px;color:var(--head);font-family:var(--display)}
.amount small{font-size:16px;font-weight:400;letter-spacing:0;font-family:var(--text);color:var(--ink)}
.pack ul{list-style:none;padding:18px 0 0;margin:18px 0 0;border-top:1px solid var(--line);display:grid;gap:10px}
.pack li{display:grid;grid-template-columns:20px 1fr}
.pack li::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--red);margin-top:8px}
.pack li.no::before{background:transparent;border:1.5px solid var(--red)}
.pack .btn{margin-top:auto;align-self:flex-start}
.pack ul{margin-bottom:26px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
.step{counter-increment:s;background:var(--sand);border-radius:2px;padding:22px}
.step::before{content:counter(s);display:grid;place-items:center;width:32px;height:32px;border-radius:2px;background:var(--red);color:#fff;font-weight:700;margin-bottom:12px}
.step b{display:block;margin-bottom:4px}
.faq details{border:1px solid var(--line);border-radius:2px;padding:16px 20px}
.faq details+details{margin-top:10px}
summary{cursor:pointer;font-weight:700;color:var(--head)}
details p{margin-top:10px}

dl.kv{display:grid;grid-template-columns:max-content 1fr;gap:10px 24px;margin:0}
dl.kv dt{font-weight:700;color:var(--head)}
dl.kv dd{margin:0}

/* Formular */
.form-layout{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start}
.side{display:grid;gap:20px;position:sticky;top:110px}
.side .partner{margin-top:0;font-size:14px}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.formgrid .full{grid-column:1/-1}
label{display:block;font-size:14px;font-weight:700;margin-bottom:6px;color:var(--head)}
input,select,textarea{width:100%;font:inherit;color:var(--ink);background:var(--paper);border:1px solid #9AA2A5;border-radius:2px;padding:11px 14px}
input:focus,select:focus,textarea:focus{border-color:var(--head)}
textarea{min-height:130px;resize:vertical}
.req{color:var(--red)}
.hint{font-size:13px;margin-top:6px;color:var(--muted)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:400;color:var(--ink)}
.check input{width:18px;height:18px;margin-top:3px;flex:none;accent-color:var(--red)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ok,.alert{margin-top:16px;padding:14px 18px;border-left:4px solid var(--red);background:var(--sand)}
.ok:focus{outline:none}
button[disabled]{opacity:.6;cursor:wait}

.two{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.map{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--paper)}
.map svg{display:block;width:100%;height:auto}
.map .note{padding:0 14px 12px}

/* Rechtstexte */
.legal{max-width:760px}
.legal h1{font-size:40px;margin-bottom:24px}
.legal h2{font-size:20px;margin:30px 0 10px}
.legal p,.legal li{margin-bottom:8px}
.legal ol{padding-left:22px}

/* Typenschild-Band */
.plateband{background:var(--sand);border-top:4px solid var(--red)}
.plategrid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.plate{width:100%;max-width:520px;height:auto;display:block;transform:rotate(-2deg);filter:drop-shadow(0 10px 18px rgba(35,52,58,.25))}
.plategrid h2{margin-top:10px}

/* Fuß */
footer{background:var(--dark);color:var(--on-dark);padding-block:48px;font-size:14px}
footer b{display:block;margin-bottom:8px;color:#fff;font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:13px}
footer a{display:block;color:var(--on-dark);text-decoration:none;margin-bottom:4px}
footer a:hover{color:#fff;text-decoration:underline}
footer p+p{margin-top:10px}
footer .cols{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:28px}
.footlogo{height:48px;width:auto;display:block;margin-bottom:14px}

/* Responsiv */
@media (max-width:960px){
  .js .menu-toggle{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);background:var(--paper);border-radius:2px;cursor:pointer;padding:0}
  .menu-toggle span:first-child,.menu-toggle span:first-child::before,.menu-toggle span:first-child::after{display:block;width:20px;height:2px;background:var(--head);position:relative}
  .menu-toggle span:first-child::before,.menu-toggle span:first-child::after{content:"";position:absolute;left:0}
  .menu-toggle span:first-child::before{top:-6px}.menu-toggle span:first-child::after{top:6px}
  .menu-toggle[aria-expanded="true"] span:first-child{background:transparent}
  .menu-toggle[aria-expanded="true"] span:first-child::before{top:0;transform:rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:first-child::after{top:0;transform:rotate(-45deg)}
  .js .btn.call{display:inline-flex;margin-left:auto;padding:10px 14px}
  header.nav .wrap{flex-wrap:wrap}
  .js nav{display:none;flex-basis:100%}
  .js nav.open{display:block}
  nav ul{flex-wrap:wrap}
  .js nav ul{flex-direction:column;align-items:stretch;padding-block:8px 4px}
  .js nav li:last-child{margin:8px 0 0}
  .js nav a{padding:12px}
  .brand img{height:38px}
}
@media (max-width:860px){
  .hero-text,.two,.packs,.plategrid,.form-layout{grid-template-columns:1fr;gap:24px}
  .side{position:static}
  .pillars,.steps,.features.three{grid-template-columns:1fr}
  .facts{grid-template-columns:repeat(3,1fr)}
  .facts div:nth-child(4){border-left:0}
  .facts div:nth-child(n+4){border-top:1px solid var(--line)}
  .ladder{grid-template-columns:1fr 1fr}
  .ladder li:nth-child(3){border-left:0}
  .ladder li:nth-child(n+3){border-top:1px solid var(--line)}
  .features{grid-template-columns:1fr 1fr}
  footer .cols{grid-template-columns:1fr 1fr}
  .formgrid{grid-template-columns:1fr}
  .photo img{aspect-ratio:16/9}
  .meta-claim{display:none}
}
@media (max-width:640px){
  /* Tabelle als kompakte Karten: Einheit | Art, Größe | Miete, Status | Aktion */
  table{min-width:0}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  tbody tr{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:14px 16px;border-bottom:1px solid var(--line)}
  tbody tr:last-child{border-bottom:0}
  tbody td{padding:0;border:0}
  tbody td:nth-child(odd){text-align:left}
  tbody td:nth-child(even){text-align:right}
  td small{font-size:12px}
  tbody tr:hover td{background:none}
}
@media (max-width:520px){
  .wrap{padding-inline:16px}
  section{padding-block:48px}
  .facts{grid-template-columns:1fr 1fr}
  .facts div{border-left:0!important}
  .facts div:nth-child(n+3){border-top:1px solid var(--line)}
  .ladder,.features,footer .cols{grid-template-columns:1fr}
  .ladder li{border-left:0;border-top:1px solid var(--line)}
  .ladder li:first-child{border-top:0}
  .amount{font-size:46px}
  .pack{padding:22px}
  dl.kv{grid-template-columns:1fr;gap:2px}
  dl.kv dd{margin-bottom:10px}
  .meta .wrap{justify-content:center;gap:14px}
  .heroimg .badge{padding:8px 12px}
  .cap{font-size:10px}
  .brand img{height:32px}
}
@media (prefers-reduced-motion:no-preference){.btn,.chip,nav a{transition:background-color .15s,color .15s,border-color .15s}}
@media print{.meta,header.nav,footer,.ctas,.draft{display:none}}