/* ============================================================
   MDA — Auftragsstrecke
   Bewusst monochrom: Dokument, nicht Marketing. Die Schriften
   bleiben die der Website, damit es zur Marke gehoert.
   Schriften liegen lokal -> keine Drittabrufe.
   ============================================================ */
@font-face{
  font-family:'Bricolage Grotesque'; font-style:normal;
  font-weight:200 800; font-stretch:100%; font-display:swap;
  src:url(fonts/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Bricolage Grotesque'; font-style:normal;
  font-weight:200 800; font-stretch:100%; font-display:swap;
  src:url(fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Space Grotesk'; font-style:normal;
  font-weight:300 700; font-display:swap;
  src:url(fonts/space-grotesk-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Grotesk'; font-style:normal;
  font-weight:300 700; font-display:swap;
  src:url(fonts/space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --paper:#0E0E0E;          /* Kartenflaeche */
  --surface:#000000;        /* Seitengrund */
  --ink:#FFFFFF;
  --ink-70:rgba(255,255,255,.70);
  --ink-50:rgba(255,255,255,.48);
  --ink-34:rgba(255,255,255,.32);
  --line:rgba(255,255,255,.13);
  --line-mid:rgba(255,255,255,.28);
  --ease:cubic-bezier(.23,1,.32,1);
  --gut:clamp(1.15rem,4vw,2.5rem);
  --maxw:760px;
}

*,*::before,*::after{ box-sizing:border-box }

/* [hidden] verliert sonst gegen display:grid/flex aus den Klassen —
   betrifft Firmenblock, Widerrufszustimmung und Fristbestaetigung. */
[hidden]{ display:none !important }
html{ -webkit-text-size-adjust:100% }
body{
  /* Sonst zeichnet der Browser Kalender- und Uhr-Symbol schwarz auf
     Schwarz und die Datumsfelder sehen leer aus. */
  color-scheme:dark;
  margin:0; background:var(--surface); color:var(--ink);
  font-family:'Space Grotesk',sans-serif; font-weight:400;
  font-size:16px; line-height:1.6; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
}
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
a{ color:inherit; text-underline-offset:3px }
::selection{ background:var(--ink); color:var(--paper) }

h1,h2,h3{ font-family:'Bricolage Grotesque',sans-serif; font-weight:500; letter-spacing:-.03em; margin:0 }
h1{ font-size:clamp(1.8rem,1.2rem+2.4vw,2.9rem); line-height:1.06 }
h2{ font-size:clamp(1.35rem,1rem+1.5vw,1.95rem); line-height:1.12 }
h3{ font-size:1.02rem; line-height:1.3; letter-spacing:-.015em }

/* ---------- Geruest ---------- */
.shell{ max-width:var(--maxw); margin-inline:auto; padding:0 var(--gut) 7rem }
.top{
  position:sticky; top:0; z-index:20; background:rgba(0,0,0,.84);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.top__in{
  max-width:var(--maxw); margin-inline:auto; padding:1rem var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; letter-spacing:-.045em; font-size:1.05rem }
.ref{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-50); font-variant-numeric:tabular-nums }

/* Fortschritt */
.bar{ height:2px; background:var(--line); position:relative; overflow:hidden }
.bar i{ position:absolute; inset:0; background:var(--ink); transform-origin:0 50%;
        transform:scaleX(0); transition:transform .55s var(--ease) }
.steps{
  max-width:var(--maxw); margin-inline:auto; padding:.75rem var(--gut) 0;
  display:flex; gap:.4rem; flex-wrap:wrap; font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-34);
}
.steps span{ white-space:nowrap }
.steps span[data-on]{ color:var(--ink) }
.steps span + span::before{ content:'·'; margin-right:.4rem; color:var(--ink-34) }

/* ---------- Karten ---------- */
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:clamp(1.3rem,4vw,2.4rem); margin-top:1.1rem;
}
.card--flat{ background:transparent; border:0; padding-inline:0 }
.eyebrow{
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-50); display:block; margin-bottom:.7rem;
}
.lede{ color:var(--ink-70); margin:.9rem 0 0; max-width:58ch }
.hint{ font-size:13px; color:var(--ink-50); margin:.45rem 0 0 }

/* ---------- Schritte ---------- */
.step{ display:none }
.step.on{ display:block; animation:stepIn .45s var(--ease) both }
@keyframes stepIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

/* ---------- Formular ---------- */
.grid{ display:grid; gap:1rem; margin-top:1.6rem }
.grid-2{ grid-template-columns:1fr 1fr }
/* Gitterzellen stehen auf min-width:auto und geben nicht nach, wenn ein
   Feld breiter sein will als die Spalte. Genau daran ragten die
   Datumsfelder unter iOS aus der Karte. */
.grid > *, .field{ min-width:0 }
.field input, .field textarea, .field select{ max-width:100% }
@media (max-width:620px){ .grid-2{ grid-template-columns:1fr } }

.field label, .legend{
  display:block; font-size:12px; letter-spacing:.04em; font-weight:500;
  margin-bottom:.42rem; color:var(--ink);
}
.field .opt{ color:var(--ink-34); font-weight:400; letter-spacing:0 }
input[type=text],input[type=email],input[type=tel],input[type=date],
input[type=time],input[type=number],textarea,select{
  width:100%; padding:.78rem .9rem; font:inherit; font-size:15px;
  color:var(--ink); background:var(--paper);
  border:1px solid var(--line-mid); border-radius:9px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
textarea{ min-height:118px; resize:vertical; line-height:1.55 }
select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:2.6rem }
/* ---------- Datum und Uhrzeit ----------
   iOS Safari zeigt bei einem leeren Datumsfeld gar nichts an: kein
   "tt.mm.jjjj", kein Symbol. Das Feld wirkt tot und wird uebersehen.
   Deshalb ein eigenes Symbol, das auf jedem Geraet gleich aussieht —
   das native blenden wir aus, damit es nicht doppelt steht. */
input[type=date],input[type=time]{
  /* iOS leitet aus dem nativen Aussehen eine Mindestbreite ab und
     ignoriert width:100% — das Feld ragt dann aus der Karte heraus.
     appearance:none nimmt ihm das; Rahmen, Grund und Symbol kommen
     ohnehin von uns. min-height, weil manche Safari-Versionen das
     Feld sonst flachdruecken. */
  -webkit-appearance:none; appearance:none;
  min-width:0; max-width:100%; min-height:3rem;
  background-repeat:no-repeat;
  background-position:right .95rem center;
  background-size:17px 17px;
  padding-right:2.9rem;
}
input[type=date]{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.5' stroke-width='1.7' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M8 3v4M16 3v4M3 10.5h18'/%3E%3C/svg%3E");
}
input[type=time]{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.5' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 6.8v5.4l3.4 2'/%3E%3C/svg%3E");
}
/* Das native Symbol verschwindet, seine Trefferflaeche bleibt. */
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator{
  opacity:0; cursor:pointer; width:1.6rem; margin-right:-.4rem;
}
/* Ohne das zentriert iOS den gewaehlten Wert im Feld. */
input[type=date]::-webkit-date-and-time-value,
input[type=time]::-webkit-date-and-time-value{ text-align:left; margin:0 }

/* Nur iOS: dort fehlt die Formatangabe im leeren Feld ganz. */
@supports (-webkit-touch-callout:none){
  input[type=date][data-leer]::before,
  input[type=time][data-leer]::before{
    content:attr(data-leer); color:var(--ink-34);
  }
}

input:focus,textarea:focus,select:focus{
  outline:0; border-color:var(--ink); box-shadow:0 0 0 3px rgba(255,255,255,.13);
}
input[aria-invalid=true],textarea[aria-invalid=true],select[aria-invalid=true]{
  border-color:var(--ink); border-width:2px; background:rgba(255,255,255,.05);
}
.err{
  display:none; font-size:12.5px; margin-top:.4rem; font-weight:500;
  padding-left:1.25rem; position:relative;
}
.err::before{
  content:'!'; position:absolute; left:0; top:1px;
  width:15px; height:15px; border:1.5px solid var(--ink); border-radius:50%;
  font-size:10px; line-height:12px; text-align:center; font-weight:700;
}
.field.bad .err{ display:block }

/* Auswahlkacheln */
.choice{ display:grid; gap:.6rem; margin-top:.3rem }
.choice label{
  display:flex; gap:.85rem; align-items:flex-start; cursor:pointer;
  border:1px solid var(--line-mid); border-radius:11px; padding:.95rem 1.05rem;
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
  margin:0; font-size:15px; font-weight:400; letter-spacing:0;
}
.choice input{ margin:.25rem 0 0; accent-color:#FFFFFF; flex:none; width:16px; height:16px }
.choice label:has(input:checked){ border-color:var(--ink); border-width:2px; padding:calc(.95rem - 1px) calc(1.05rem - 1px) }
.choice b{ display:block; font-weight:500 }
.choice small{ display:block; color:var(--ink-50); font-size:13px; margin-top:.15rem; line-height:1.45 }
.choice .price{ margin-left:auto; font-weight:500; white-space:nowrap; font-variant-numeric:tabular-nums }
@media (hover:hover){ .choice label:hover{ background:rgba(255,255,255,.045) } }

/* Zustimmungen */
.agree{ display:flex; gap:.8rem; align-items:flex-start; padding:.9rem 0; border-top:1px solid var(--line) }
.agree:first-of-type{ border-top:0 }
.agree input{ margin:.28rem 0 0; accent-color:#FFFFFF; flex:none; width:17px; height:17px }
.agree span{ font-size:14.5px; line-height:1.55 }
.agree.bad span{ font-weight:500 }
.agree.bad input{ outline:2px solid var(--ink); outline-offset:3px }

/* Rechtstext-Fenster */
.legal{
  border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.03);
  max-height:340px; overflow-y:auto; padding:1.2rem 1.3rem; margin-top:.8rem;
  font-size:13.6px; line-height:1.62; color:var(--ink-70);
}
.legal h4{
  font-family:'Bricolage Grotesque',sans-serif; font-size:13.5px; font-weight:600;
  letter-spacing:-.01em; margin:1.5rem 0 .4rem; color:var(--ink);
}
.legal h4:first-child{ margin-top:0 }
.legal p{ margin:0 0 .7rem }
.legal ol,.legal ul{ margin:0 0 .7rem; padding-left:1.2rem }
.legal li{ margin-bottom:.3rem }
.legal::-webkit-scrollbar{ width:9px }
.legal::-webkit-scrollbar-thumb{ background:var(--line-mid); border-radius:9px }

details.doc{ border:1px solid var(--line); border-radius:11px; margin-top:.75rem; background:var(--paper) }
details.doc > summary{
  cursor:pointer; padding:.95rem 1.1rem; font-size:14.5px; font-weight:500;
  list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
details.doc > summary::-webkit-details-marker{ display:none }
details.doc > summary::after{ content:'+'; font-size:18px; color:var(--ink-50); line-height:1 }
details.doc[open] > summary::after{ content:'–' }
details.doc > div{ padding:0 1.1rem 1.1rem }

/* Platzhalter-Markierung */
mark{ background:rgba(255,255,255,.15); color:var(--ink); padding:.05em .3em; border-radius:3px;
      box-shadow:inset 0 0 0 1px var(--line-mid); font-size:.95em }
.todo{
  border:1px dashed var(--line-mid); border-radius:10px; padding:.95rem 1.1rem;
  font-size:13px; color:var(--ink-70); margin-top:1rem; background:rgba(255,255,255,.035);
}
.todo b{ font-weight:600 }

/* Unterschrift */
.sigwrap{ border:1px solid var(--line-mid); border-radius:11px; background:var(--paper); overflow:hidden; margin-top:.3rem }
.sigpad{ display:block; width:100%; height:180px; touch-action:none; cursor:crosshair; background:
  repeating-linear-gradient(0deg,transparent,transparent 179px,var(--line) 179px,var(--line) 180px) }
.sigbar{ display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.6rem .85rem; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-50) }

/* Zusammenfassung */
.sum{ margin-top:1.4rem; border-top:1px solid var(--line) }
.sum__row{ display:flex; gap:1.2rem; padding:.72rem 0; border-bottom:1px solid var(--line); font-size:14.5px }
.sum__row dt{ flex:0 0 38%; color:var(--ink-50); font-size:13px; margin:0 }
.sum__row dd{ margin:0; flex:1; word-break:break-word }
.sum__grp{ font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; padding:1.5rem 0 .5rem; color:var(--ink) }
.sum img{ max-width:260px; border:1px solid var(--line); border-radius:8px; background:#fff }

/* Knoepfe */
.nav{ display:flex; gap:.7rem; align-items:center; margin-top:1.8rem; flex-wrap:wrap }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  background:var(--ink); color:var(--paper);
  border-radius:999px; padding:.85rem 1.6rem; font-size:14.5px; font-weight:500;
  transition:transform .16s var(--ease), opacity .2s var(--ease);
  text-decoration:none; border:1px solid var(--ink);
}
.btn:active{ transform:scale(.97) }
.btn[disabled]{ opacity:.35; pointer-events:none }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-mid) }
.btn--wide{ width:100%; padding-block:1rem; font-size:15.5px }
.btn svg{ width:13px; height:13px; flex:none }
@media (hover:hover){ .btn:hover{ opacity:.86 } .btn--ghost:hover{ border-color:var(--ink); opacity:1 } }

/* Zahlung */
.pay{ text-align:center }
.pay__amount{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:500; letter-spacing:-.04em;
  font-size:clamp(2.6rem,10vw,4.4rem); line-height:1; margin:.4rem 0 .2rem;
  font-variant-numeric:tabular-nums;
}
.pay__meta{ font-size:13px; color:var(--ink-50) }
.pay__card{ border:1px solid var(--line); border-radius:14px; background:var(--paper); padding:clamp(1.6rem,5vw,2.6rem); margin-top:1.1rem }
.pay__secure{ display:flex; align-items:center; justify-content:center; gap:.5rem;
  font-size:12px; color:var(--ink-50); margin-top:1rem }

/* Status */
.done{ text-align:center; padding:1rem 0 }
.done__mark{
  width:62px; height:62px; border:2px solid var(--ink); border-radius:50%;
  display:grid; place-items:center; margin:0 auto 1.4rem;
}
.done__mark svg{ width:26px; height:26px }
.sending{ display:none; align-items:center; gap:.6rem; font-size:14px; color:var(--ink-50) }
.sending.on{ display:flex }
.spin{ width:15px; height:15px; border:2px solid var(--line-mid); border-top-color:var(--ink);
       border-radius:50%; animation:spin .7s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }
.fail{
  display:none; border:2px solid var(--ink); border-radius:11px; padding:1rem 1.15rem;
  margin-top:1.1rem; font-size:14px; background:var(--paper);
}
.fail.on{ display:block }

.foot{ margin-top:3rem; padding-top:1.4rem; border-top:1px solid var(--line);
  font-size:12px; color:var(--ink-34); display:flex; flex-wrap:wrap; gap:.8rem; justify-content:space-between }
.foot a{ color:var(--ink-50) }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

/* Druck: Vertrag sauber auf Papier
   ============================================================ */
@media print{
  /* Auf Papier wieder schwarz auf weiss */
  :root{
    --paper:#FFFFFF; --surface:#FFFFFF; --ink:#000000;
    --ink-70:rgba(0,0,0,.72); --ink-50:rgba(0,0,0,.52); --ink-34:rgba(0,0,0,.36);
    --line:#DDDDDD; --line-mid:#BBBBBB;
  }
  .top,.nav,.steps,.bar,.foot,.todo,.sending,.fail{ display:none !important }
  body{ color-scheme:light; background:#fff; color:#000; font-size:11pt }
  /* Auf Papier braucht niemand ein Kalendersymbol. */
  input[type=date],input[type=time]{ background-image:none; padding-right:.9rem }
  mark{ background:#EEE; color:#000; box-shadow:inset 0 0 0 1px #CCC }
  .shell{ max-width:none; padding:0 }
  .card{ border:0; padding:0; margin:0 }
  .step{ display:none !important }
  .step.on{ display:block !important; animation:none }
  .legal{ max-height:none; overflow:visible; border:0; background:#fff; padding:0 }
  details.doc{ border:0 } details.doc > summary{ display:none }
  details.doc > div{ padding:0 }
  .sum__row{ break-inside:avoid }
}

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