/* Çeyiz — gemeinsames Aussehen für Startseite und alle Formulare.
   Warmes Dunkel mit Mint. Alle Kontraste gegen WCAG AA gemessen,
   die Werte stehen als Kommentar hinter den Farben. */

:root{
  /* Grundflächen — warmes Anthrazit mit Olivstich, kein Blaugrau */
  --grund:#201E19;
  --karte:#302C25;        /* 1.20:1 gegen Grund — sichtbar abgesetzt */
  --karte-hoch:#3A3529;
  --linie:#3A362E;        /* rein dekorative Haarlinie */
  --feldlinie:#847D70;    /* 3.40:1 gegen Karte — Bedienelement, muss sichtbar sein */

  /* Schrift */
  --text:#F2EDE3;         /* 14.27:1 auf Grund · 11.90:1 auf Karte */
  --weich:#B5AEA0;        /*  7.55:1 auf Grund ·  6.30:1 auf Karte */

  /* Akzent */
  --mint:#6FD9C0;         /*  9.80:1 auf Grund ·  8.17:1 auf Karte */
  --mint-text:#1A2723;    /*  9.10:1 auf Mint — Schrift im aktiven Chip */
  --mint-schatten:rgba(111,217,192,.22);

  /* Musterkanten — gedämpft, alle ≥4.6:1 mit --text */
  --sw-raum:#467260; --sw-produkt:#846439; --sw-beschaffung:#3C6E75;
  --sw-content:#9C5740; --sw-sonst:#6E6A60;
  --sw-eigen:#6F638C; --sw-dienst:#41735B; --sw-handwerk:#7C6248; --sw-digital:#496B99;
  --spine:var(--sw-sonst);

  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Karla',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--grund); color:var(--text); font-family:var(--body);
  font-size:16px; line-height:1.55; padding:28px 18px 140px;
  background-image:radial-gradient(circle at 1px 1px, rgba(242,237,227,.05) 1px, transparent 0);
  background-size:24px 24px;
  -webkit-font-smoothing:antialiased;
}
body.start{padding-top:52px; padding-bottom:64px}
.wrap{max-width:660px; margin:0 auto}

header{margin:0 0 24px 4px}
.marke{font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--weich)}
h1{font-family:var(--display); font-weight:800; font-size:clamp(30px,7.5vw,46px); line-height:1.0;
   letter-spacing:-.025em; margin:10px 0 8px; color:var(--text)}
body.start h1{font-size:clamp(46px,13vw,78px); line-height:.92; letter-spacing:-.03em}
body.start header{margin-bottom:30px}
.sub{color:var(--weich); max-width:46ch; margin:0}

/* ---------- Fortschritt ------------------------------------------------ */
.fortschritt{position:sticky; top:0; z-index:5; margin:0 0 14px;
  padding:10px 0 8px; background:linear-gradient(var(--grund) 72%, transparent)}
.balken{height:3px; border-radius:2px; background:var(--linie); overflow:hidden}
.balken i{display:block; height:100%; width:0; border-radius:2px; background:var(--mint);
  transition:width .35s cubic-bezier(.2,.7,.3,1)}
.fortschritt small{display:block; margin-top:7px; font-family:var(--mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--weich)}

/* ---------- Karte mit Musterkante -------------------------------------- */
.karte{position:relative; background:var(--karte); border:1px solid var(--linie);
  border-radius:10px; padding:30px 28px 30px 50px;
  box-shadow:0 10px 30px rgba(0,0,0,.30), 0 1px 0 rgba(242,237,227,.04) inset}
.spine{position:absolute; left:0; top:0; bottom:0; width:28px; background:var(--spine);
  transition:background .45s ease; display:flex; align-items:center; justify-content:center;
  border-radius:9px 0 0 9px}
.spine span{font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text); writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap}

/* ---------- Abschnitte -------------------------------------------------- */
.abschnitt{margin:6px 0 26px; padding-top:26px; border-top:1px solid var(--linie)}
.abschnitt:first-child{margin-top:0; padding-top:0; border-top:0}
.abschnitt .nr{font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--mint); display:block; margin-bottom:6px}
.abschnitt h2{font-family:var(--display); font-weight:800; font-size:25px; letter-spacing:-.02em;
  margin:0 0 6px; color:var(--text)}
.abschnitt p{margin:0; color:var(--weich); font-size:14.5px; max-width:46ch}

/* ---------- Felder ------------------------------------------------------ */
label{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--weich); margin:0 0 8px}
.feld{margin-bottom:34px}
.feld.folgt{margin-top:-22px}
.pflicht{color:var(--mint); font-weight:700; margin-left:.4em; letter-spacing:0}
.frage{font-family:var(--display); font-weight:600; font-size:19.5px; line-height:1.3;
  letter-spacing:-.012em; margin:0 0 6px; color:var(--text)}
.beikopf{font-size:14.5px; color:var(--weich); margin:0 0 12px; max-width:48ch}

input[type=text],input[type=url],textarea,select{
  width:100%; font-family:var(--body); font-size:16px; color:var(--text);
  background:transparent; border:0; border-bottom:1.5px solid var(--feldlinie);
  padding:11px 2px; border-radius:0; -webkit-appearance:none; appearance:none;
}
textarea{resize:vertical; min-height:112px; line-height:1.6}
select{background:transparent; cursor:pointer}
select option{background:var(--karte); color:var(--text)}
input::placeholder,textarea::placeholder{color:var(--weich); opacity:.65}
input:focus,textarea:focus,select:focus{outline:none; border-bottom-color:var(--mint)}
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--mint); outline-offset:4px; border-radius:2px}

/* ---------- Chips ------------------------------------------------------- */
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{position:relative}
.chip input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.chip span{display:flex; align-items:center; min-height:46px; padding:11px 18px;
  border:1.5px solid var(--feldlinie); border-radius:999px; font-size:15.5px;
  color:var(--text); background:transparent; transition:.18s ease; cursor:pointer; line-height:1.25}
.chip:hover span{border-color:var(--mint); background:rgba(111,217,192,.07)}
.chip input:checked + span{background:var(--mint); color:var(--mint-text);
  border-color:var(--mint); font-weight:700; box-shadow:0 0 0 4px var(--mint-schatten)}
.chip input:focus-visible + span{outline:2px solid var(--mint); outline-offset:3px}
.chip.mehrfach input:checked + span::before{content:"✓ "; font-weight:700}

.zeile{display:flex; gap:20px; flex-wrap:wrap}
.zeile > .feld{flex:1 1 230px}
.trenner{border:0; border-top:1px solid var(--linie); margin:30px 0 28px}

/* ---------- Knöpfe ------------------------------------------------------ */
button{font-family:var(--body); font-weight:700; font-size:16.5px; cursor:pointer}
.sendeleiste{position:sticky; bottom:0; z-index:6; margin:8px -28px -30px -50px;
  padding:16px 28px 18px 50px;
  background:linear-gradient(transparent, var(--karte) 32%);
  border-radius:0 0 10px 10px}
.senden{width:100%; padding:17px; background:var(--mint); color:var(--mint-text);
  border:0; border-radius:8px; letter-spacing:.01em; transition:filter .2s, transform .1s}
.senden:hover{filter:brightness(1.08)}
.senden:active{transform:translateY(1px)}
.senden:focus-visible{outline:2px solid var(--text); outline-offset:3px}
.senden:disabled{opacity:.5; cursor:wait}

.hinweis{font-size:13.5px; color:var(--weich); margin:16px 4px 0}
.hinweis b{color:var(--text)}

/* ---------- Zustände ---------------------------------------------------- */
.panel{display:none; background:var(--karte); border:1px solid var(--linie);
  border-left:28px solid var(--spine); border-radius:10px; padding:28px;
  box-shadow:0 10px 30px rgba(0,0,0,.30)}
.panel.an{display:block}
.panel h2{font-family:var(--display); font-weight:800; font-size:27px; margin:0 0 10px;
  letter-spacing:-.02em; color:var(--text)}
.panel p{margin:0 0 16px; color:var(--weich)}
.wert{font-family:var(--mono); font-size:13px; background:var(--grund);
  border:1px solid var(--linie); color:var(--text);
  padding:14px; border-radius:6px; white-space:pre-wrap; word-break:break-word;
  max-height:240px; overflow:auto}
.zweit{background:transparent; border:1.5px solid var(--mint); color:var(--mint);
  padding:12px 20px; border-radius:8px; margin-top:16px; margin-right:8px}
.zweit:hover{background:rgba(111,217,192,.10)}
.zweit:focus-visible{outline:2px solid var(--mint); outline-offset:3px}
.fehler{color:#FFB4A2; font-size:14.5px; margin-top:14px; display:none;
  background:rgba(156,87,64,.20); border-left:3px solid var(--sw-content);
  padding:12px 14px; border-radius:0 6px 6px 0}
.fehler.an{display:block}
.karte.weg{display:none}

/* ---------- Startseite -------------------------------------------------- */
.liste{display:flex; flex-direction:column; gap:16px}
a.kachel{position:relative; display:block; text-decoration:none; color:inherit;
  background:var(--karte); border:1px solid var(--linie); border-radius:10px;
  padding:24px 26px 24px 50px; box-shadow:0 8px 24px rgba(0,0,0,.26);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
a.kachel:hover{transform:translateY(-2px); box-shadow:0 14px 32px rgba(0,0,0,.34);
  border-color:var(--mint); background:var(--karte-hoch)}
a.kachel:focus-visible{outline:2px solid var(--mint); outline-offset:4px}
a.kachel .spine{transition:none}
.titel{font-family:var(--display); font-weight:700; font-size:22px; line-height:1.2;
  letter-spacing:-.015em; margin:0 0 6px; color:var(--text)}
.wofuer{color:var(--weich); font-size:15px; margin:0; max-width:48ch}
.wofuer b{color:var(--text)}
.pfeil{position:absolute; right:22px; top:50%; transform:translateY(-50%);
  color:var(--mint); font-size:21px; opacity:.55; transition:opacity .18s ease, transform .18s ease}
a.kachel:hover .pfeil{opacity:1; transform:translateY(-50%) translateX(4px)}
.fuss{font-size:13.5px; color:var(--weich); margin:34px 4px 0; max-width:48ch}

@media (prefers-reduced-motion:no-preference){
  .karte,.panel,a.kachel{animation:auf .5s cubic-bezier(.2,.7,.3,1) both}
  a.kachel:nth-child(2){animation-delay:.06s}
  a.kachel:nth-child(3){animation-delay:.12s}
  @keyframes auf{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }

@media (max-width:560px){
  body{padding-left:14px; padding-right:14px}
  .karte{padding:24px 18px 24px 44px; border-radius:8px}
  .sendeleiste{margin:8px -18px -24px -44px; padding:14px 18px 16px 44px}
  a.kachel{padding:20px 18px 20px 44px}
  .pfeil{display:none}
  .feld{margin-bottom:30px}
}