/* ===========================================================================
   NOVENTRA, Bestell- und Dankeseite

   Eigenständiges Stylesheet. Die bestehende index.html trägt ihr CSS
   inline, deshalb lässt es sich nicht teilen. Die Variablen unten sind
   1:1 aus der Startseite übernommen, damit beide Seiten gleich aussehen.

   Übernommene Gestaltungsmittel der Startseite:
     - Dunkler Grund #0F0F0F mit abgestuften Flächen
     - Abgeschnittene Ecke unten links über clip-path (.cut, .btn)
     - Mono-Kleinlabels in Großbuchstaben mit Strich davor (.eyebrow)
     - Archivo als Displayschrift mit font-stretch 110%

   SCHRIFTEN: Hier werden bewusst KEINE Google Fonts geladen.
   Die Startseite tut das noch, das ist ein Datenschutzproblem
   (LG München I, 20.01.2022, Az. 3 O 17493/20). Siehe README.
   Solange die Schriften nicht lokal liegen, greift die Fallback-Kette
   auf Systemschriften zurück. Sobald sie lokal liegen, sehen beide
   Seiten identisch aus.
   =========================================================================== */

:root{
  --ink:#0F0F0F;
  --ink-2:#131315;
  --surface:#161619;
  --surface-2:#1A1A1E;
  --field:#121214;
  --line:#26262C;
  --line-soft:#1E1E23;

  --steel-hi:#FAFAFB;
  --steel:#B4B7BE;
  --steel-dim:#84878F;
  --muted:#63666D;

  --alarm:#FF6B6B;

  --display:'Archivo',system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:'Instrument Sans',system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --cut:18px;
  --pad:clamp(18px,4vw,44px);
  --maxw:1120px;
  --sec:clamp(44px,6.2vw,78px);

  --klick:44px;   /* Mindestgröße für Klickflächen nach WCAG 2.5.5 */
}

/* ---------------------------------------------------------------------------
   KONTRASTE, geprüft nach WCAG 2.1 AA
   Fließtext braucht 4.5:1, Bedienelemente und Rahmen 3:1.

   --steel-hi  #FAFAFB auf --ink     #0F0F0F  = 18.8:1  (AAA)
   --steel     #B4B7BE auf --ink     #0F0F0F  =  9.5:1  (AAA)
   --steel-dim #84878F auf --ink     #0F0F0F  =  5.1:1  (AA)
   --steel-dim #84878F auf --surface #161619  =  4.8:1  (AA)
   --muted     #63666D auf --ink     #0F0F0F  =  3.1:1  -> NUR für
               Rahmen und sehr kleine Nebenangaben, nie für Fließtext
   --ink       #0F0F0F auf #F2F3F5 (Primärknopf) = 17.9:1 (AAA)
   --alarm     #FF6B6B auf --ink     #0F0F0F  =  7.2:1  (AAA)
   --line      #26262C Trennlinie, reine Dekoration
   --------------------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ink);
  color:var(--steel);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0}

h1,h2,h3{
  font-family:var(--display);
  color:var(--steel-hi);
  margin:0;
  font-weight:700;
  font-stretch:110%;
  letter-spacing:-.026em;
  line-height:1.05;
}
h1{font-size:clamp(2rem,4.8vw,3.2rem);font-weight:800;line-height:1}
h2{font-size:clamp(1.4rem,2.8vw,1.9rem)}
h3{font-size:1.05rem;line-height:1.3}

:focus-visible{outline:2px solid #fff;outline-offset:3px}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}

/* Abgeschnittene Ecke unten links. Das Erkennungsmerkmal der Marke. */
.cut{clip-path:polygon(0 0,100% 0,100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}

/* Sprungmarke, erstes fokussierbares Element */
.sprungmarke{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:#F2F3F5;color:var(--ink);
  padding:13px 20px;font-weight:600;
}
.sprungmarke:focus{left:10px;top:10px}

/* ---------------------------------------------------------------------------
   KOPFBEREICH
   --------------------------------------------------------------------------- */
header.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(15,15,15,.9);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.nav-in{display:flex;align-items:center;gap:20px;min-height:60px}

.marke{
  display:flex;align-items:center;gap:9px;
  margin-right:auto;text-decoration:none;
  font-family:var(--display);font-stretch:112%;
  font-weight:800;font-size:1.06rem;letter-spacing:-.03em;
  color:var(--steel-hi);
  min-height:var(--klick);
}
.marke svg{width:22px;height:22px;flex:none}

.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a:not(.btn){
  display:inline-flex;align-items:center;min-height:var(--klick);
  padding:0 11px;
  font-size:.86rem;color:var(--steel-dim);text-decoration:none;
  transition:color .18s ease;
}
.nav-links a:not(.btn):hover{color:var(--steel-hi)}

/* ---------------------------------------------------------------------------
   KNÖPFE
   Ecke unten links abgeschnitten, wie auf der Startseite.
   Ausdrücklich keine Pillenform.
   --------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--klick);
  font-family:var(--body);font-size:.9rem;font-weight:500;
  padding:12px 20px;
  border:1px solid var(--line);
  background:var(--surface);color:var(--steel-hi);
  cursor:pointer;text-decoration:none;text-align:center;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
  clip-path:polygon(0 0,100% 0,100% 100%,11px 100%,0 calc(100% - 11px));
}
.btn:hover{background:var(--surface-2);border-color:#33333B;color:var(--steel-hi)}
.btn-primary{background:#F2F3F5;color:#0F0F0F;border-color:#F2F3F5;font-weight:600}
.btn-primary:hover{background:#FFFFFF;color:#0F0F0F;border-color:#FFFFFF}
.btn-voll{width:100%}
.btn[disabled]{opacity:.55;cursor:progress}

/* ---------------------------------------------------------------------------
   KLEINLABEL
   --------------------------------------------------------------------------- */
.eyebrow{
  font-family:var(--mono);font-size:.68rem;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--steel-dim);
  display:flex;align-items:center;gap:10px;
  margin:0 0 14px;
}
.eyebrow::before{content:"";width:20px;height:1px;background:var(--steel-dim);flex:none}

/* ---------------------------------------------------------------------------
   SEITENAUFBAU
   --------------------------------------------------------------------------- */
main{padding-block:var(--sec)}
.spalte{max-width:660px}
.sec-head{margin-bottom:28px}
.sec-head p{color:var(--steel-dim);font-size:.95rem;margin:12px 0 0;max-width:54ch}

/* ---------------------------------------------------------------------------
   PAKETAUSWAHL
   --------------------------------------------------------------------------- */
.auswahl{border:0;padding:0;margin:0 0 26px}
.auswahl legend{
  font-family:var(--mono);font-size:.66rem;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--steel-dim);padding:0;margin-bottom:12px;
}

.paket{
  display:flex;gap:13px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line);
  padding:17px 19px;margin-bottom:9px;cursor:pointer;
  min-height:var(--klick);
  transition:border-color .18s ease,background .18s ease;
  clip-path:polygon(0 0,100% 0,100% 100%,14px 100%,0 calc(100% - 14px));
}
.paket:hover{background:var(--surface-2);border-color:#33333B}
.paket input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:#F2F3F5}
/* Auswahl auch ohne Farbwahrnehmung erkennbar: hellerer Rahmen plus Fläche */
.paket:has(input:checked){border-color:#5A5D66;background:var(--surface-2)}
.paket:has(input:focus-visible){outline:2px solid #fff;outline-offset:2px}

.paket-name{
  display:block;font-family:var(--display);font-stretch:106%;
  font-weight:700;font-size:1.02rem;color:var(--steel-hi);
}
.paket-preis{display:block;color:var(--steel-dim);font-size:.88rem;margin-top:3px}

/* ---------------------------------------------------------------------------
   BESTÄTIGUNGEN
   --------------------------------------------------------------------------- */
.zwischenschritt{
  font-family:var(--mono);font-size:.66rem;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--steel-dim);
  margin:30px 0 14px;padding-top:22px;
  border-top:1px solid var(--line);
}

.zustimmung{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px}
.zustimmung input{width:20px;height:20px;margin:12px 0 0;flex:none;accent-color:#F2F3F5}
.zustimmung label{
  font-size:.88rem;color:var(--steel-dim);line-height:1.55;
  font-family:var(--body);
}
.zustimmung a{color:var(--steel-hi);text-decoration:underline;text-underline-offset:3px}

.fehlertext{
  display:none;margin-top:5px;
  color:var(--alarm);font-size:.84rem;font-weight:500;
}
.fehlertext.sichtbar{display:block}
[aria-invalid="true"]{border-color:var(--alarm)}

/* ---------------------------------------------------------------------------
   PFLICHTANGABEN NACH § 312j ABS. 2 BGB
   Muss unmittelbar über dem Bestellknopf stehen, deshalb deutlich abgesetzt.
   --------------------------------------------------------------------------- */
.pflichtangaben{
  background:var(--surface);
  border:1px solid #3A3A44;
  padding:24px 22px;margin:26px 0 14px;
  clip-path:polygon(0 0,100% 0,100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
}
.pflichtangaben h2{font-size:1.1rem;margin-bottom:16px}
.pflichtangaben dl{margin:0}
.pflichtangaben dl > div{
  display:flex;justify-content:space-between;gap:16px;
  padding:10px 0;border-bottom:1px solid var(--line-soft);
}
.pflichtangaben dt{color:var(--steel-dim);font-size:.88rem}
.pflichtangaben dd{
  margin:0;text-align:right;font-weight:600;color:var(--steel-hi);
  font-family:var(--display);font-stretch:104%;
}
.pflichtangaben .gesamt{
  border-bottom:0;border-top:1px solid #3A3A44;
  margin-top:6px;padding-top:14px;
}
.pflichtangaben .gesamt dt{color:var(--steel-hi);font-weight:600;font-size:.95rem}
.pflichtangaben .gesamt dd{font-size:1.2rem}
.pflichtangaben .klein{
  margin-top:14px;font-size:.82rem;color:var(--steel-dim);line-height:1.6;
}

.hinweis-unten{margin-top:14px;font-size:.84rem;color:var(--steel-dim);line-height:1.6}
.hinweis-unten a{color:var(--steel-hi);text-decoration:underline;text-underline-offset:3px}

/* ---------------------------------------------------------------------------
   STATUSMELDUNG
   Steht ganz oben, damit sie nicht zwischen Inhalten verschwindet.
   --------------------------------------------------------------------------- */
.status{margin:0;font-size:.9rem}
.status:not(:empty){
  padding:13px 16px;margin-bottom:22px;
  background:var(--surface);
  border-left:2px solid var(--steel-dim);
  color:var(--steel-hi);
}
.status.schlecht:not(:empty){border-left-color:var(--alarm)}
.status.gut:not(:empty){border-left-color:#F2F3F5}

/* ---------------------------------------------------------------------------
   DANKESEITE
   --------------------------------------------------------------------------- */
.kasten{
  background:var(--surface);border:1px solid var(--line);
  padding:24px 22px;margin-top:24px;
  clip-path:polygon(0 0,100% 0,100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
}
.kasten p{color:var(--steel-dim);font-size:.92rem}
.kasten p + p{margin-top:10px}
.kasten a{color:var(--steel-hi);text-decoration:underline;text-underline-offset:3px}

.kontaktzeile{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}

/* ---------------------------------------------------------------------------
   FUSSBEREICH
   --------------------------------------------------------------------------- */
footer{
  border-top:1px solid var(--line-soft);
  padding-block:30px;margin-top:var(--sec);
}
.fuss-links{display:flex;flex-wrap:wrap;gap:2px 6px;list-style:none;margin:0;padding:0}
.fuss-links a{
  display:inline-flex;align-items:center;min-height:var(--klick);
  padding:0 9px;font-size:.84rem;color:var(--steel-dim);text-decoration:none;
}
.fuss-links a:hover{color:var(--steel-hi);text-decoration:underline;text-underline-offset:3px}
.fuss-klein{margin-top:12px;font-size:.82rem;color:var(--steel-dim)}

/* ---------------------------------------------------------------------------
   BEWEGUNG
   Diese Seiten enthalten keine Scroll-Animationen. Der Block schaltet
   auch die wenigen Zustandswechsel ab.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width:640px){
  .nav-links a:not(.btn){display:none}     /* nur der Knopf bleibt stehen */
  .pflichtangaben{padding:20px 17px}
  .pflichtangaben dl > div{flex-direction:column;gap:2px;align-items:flex-start}
  .pflichtangaben dd{text-align:left}
  .kontaktzeile .btn{width:100%}
}

@media (hover:none){
  .btn:hover{background:var(--surface)}
  .btn-primary:hover{background:#F2F3F5}
  .paket:hover{background:var(--surface)}
}