/* ══════════════════════════════════════════════════════════════════
   zeichnungsassistent.css
   Seitenspezifische Ergänzung für zeichnungsassistent.html

   Einbau:
     <link rel="stylesheet" href="assets/zeichnungsassistent.css">
     NACH der gemeinsamen style.css einbinden.

   Kollisionsfrei: Alle Klassen tragen das Präfix .za-, alle Variablen
   das Präfix --za-. Nichts überschreibt bestehende Regeln.

   Anbindung an die Homepage-Tokens: Nur den :root-Block unten anpassen –
   z. B. --za-rot: var(--accent); wenn die Seite bereits eine solche
   Variable führt. Sonst bleiben die Werte wie sie sind.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* An die Tokens der Homepage angebunden (style.css), damit sich die Seite
     farblich exakt in den uebrigen Auftritt einfuegt. */
  --za-rot:var(--rot);
  --za-rot-dunkel:var(--rot-dunkel);
  --za-grau:var(--grau-hell);
  --za-bg:var(--papier);
  --za-karte:var(--weiss);
  --za-linie:var(--linie);
  --za-linie-stark:#c9ced2;
  --za-text:var(--tinte);
  --za-text-dim:var(--grau);
  --za-blau:#2F6FE4;          /* Ballonfarbe der Anwendung */
  --za-max:1120px;            /* wie .wrap der uebrigen Seiten */
}

/* ── Grundraster ────────────────────────────────────────────────── */
.za-wrap{max-width:var(--za-max); margin:0 auto; padding:0 24px}
.za-sektion{padding:88px 0}
.za-sektion + .za-sektion{border-top:1px solid var(--za-linie)}
.za-hell{background:var(--za-karte)}

/* Eyebrow-Label wie auf den übrigen Seiten */
.za-label{
  font-family:var(--mono);
  font-size:12px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--za-rot);
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.za-label::after{content:""; height:1px; flex:1; background:var(--za-linie); max-width:120px}

.za-h1{font-size:clamp(2.3rem,5.2vw,3.6rem); line-height:1.06; font-weight:700;
  letter-spacing:-.025em; color:var(--za-text); margin:0}
.za-h2{font-size:clamp(1.65rem,3.3vw,2.4rem); line-height:1.18; font-weight:600;
  letter-spacing:-.015em; color:var(--za-text); margin:0}
.za-h3{font-size:1.15rem; font-weight:600; margin:0 0 8px; color:var(--za-text)}
.za-lead{font-size:1.14rem; line-height:1.6; color:var(--za-text-dim);
  max-width:64ch; margin-top:18px}

/* ── Hero ───────────────────────────────────────────────────────── */
.za-hero{background:var(--za-karte); border-bottom:1px solid var(--za-linie); padding:76px 0 0}
.za-hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
@media(max-width:900px){.za-hero-grid{grid-template-columns:1fr; gap:36px}}

.za-badges{display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 30px}
.za-badge{font-family:var(--mono); font-size:12px;
  color:var(--za-text-dim); border:1px solid var(--za-linie); border-radius:2px;
  padding:5px 10px; background:var(--za-bg)}

.za-knopfreihe{display:flex; flex-wrap:wrap; gap:12px}
.za-knopf{display:inline-block; padding:13px 24px; border-radius:2px;
  text-decoration:none; font-weight:600; font-size:.97rem;
  border:1px solid transparent; transition:background .15s,border-color .15s,color .15s}
.za-knopf-rot{background:var(--za-rot); color:#fff}
.za-knopf-rot:hover{background:var(--za-rot-dunkel); color:#fff}
.za-knopf-linie{border-color:var(--za-linie-stark); color:var(--za-text)}
.za-knopf-linie:hover{border-color:var(--za-rot); color:var(--za-rot)}

/* ── Signaturelement: Zeichnungsausschnitt mit Ballons ──────────── */
.za-buehne{background:var(--za-grau); border:1px solid var(--za-linie-stark);
  border-radius:3px; padding:18px; margin:0}
.za-buehne svg{display:block; width:100%; height:auto; background:#fff}
.za-buehne figcaption{font-family:var(--mono); font-size:11px;
  color:#fff; letter-spacing:.08em; text-transform:uppercase; margin-top:12px; opacity:.85}

.za-ballon{opacity:0; animation:za-auf .5s ease forwards}
.za-ballon:nth-of-type(1){animation-delay:.35s}
.za-ballon:nth-of-type(2){animation-delay:.65s}
.za-ballon:nth-of-type(3){animation-delay:.95s}
@keyframes za-auf{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@media(prefers-reduced-motion:reduce){.za-ballon{opacity:1; animation:none}}

/* Maßstab als Trenner – Motiv aus dem übrigen Auftritt */
.za-massstab{height:26px; margin-top:56px; border-top:1px solid var(--za-linie);
  background-image:repeating-linear-gradient(to right,var(--za-linie-stark) 0 1px,transparent 1px 20px);
  background-size:100% 8px; background-repeat:no-repeat}

/* ── Karten ─────────────────────────────────────────────────────── */
.za-karten{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:22px; margin-top:44px}
.za-karte{background:var(--za-karte); border:1px solid var(--za-linie);
  border-radius:3px; padding:28px 26px; transition:border-color .15s}
.za-karte:hover{border-color:var(--za-linie-stark)}
.za-hell .za-karte{background:var(--za-bg)}
.za-kicker{font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--za-grau); margin-bottom:12px}
.za-karte p{font-size:.97rem; color:var(--za-text-dim); margin:0}
.za-karte ul{list-style:none; margin:16px 0 0; padding:0; font-size:.94rem}
.za-karte li{padding-left:18px; position:relative; margin-bottom:7px; color:var(--za-text-dim)}
.za-karte li::before{content:"–"; position:absolute; left:0; color:var(--za-rot)}

/* ── Rechenbeispiel ─────────────────────────────────────────────── */
.za-rechnung{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:0; margin-top:44px; border:1px solid var(--za-linie); border-radius:3px;
  background:var(--za-karte); overflow:hidden}
.za-hell .za-rechnung{background:var(--za-bg)}
.za-posten{padding:28px 26px; border-right:1px solid var(--za-linie)}
.za-posten:last-child{border-right:0}
@media(max-width:760px){
  .za-posten{border-right:0; border-bottom:1px solid var(--za-linie)}
  .za-posten:last-child{border-bottom:0}
}
.za-zahl{font-family:var(--mono); font-size:2rem;
  font-weight:500; color:var(--za-text); line-height:1.1; display:block}
.za-posten:last-child .za-zahl{color:var(--za-rot)}
.za-posten p{font-size:.92rem; color:var(--za-text-dim); margin:8px 0 0}

/* ── Ablauf (echte Reihenfolge, daher nummeriert) ───────────────── */
.za-ablauf{counter-reset:za-s; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:22px; margin-top:44px}
.za-schritt{position:relative; padding-top:44px; border-top:1px solid var(--za-linie)}
.za-schritt::before{counter-increment:za-s; content:counter(za-s,decimal-leading-zero);
  position:absolute; top:16px; left:0; font-family:var(--mono);
  font-size:12px; color:var(--za-rot); letter-spacing:.1em}
.za-schritt p{font-size:.95rem; color:var(--za-text-dim); margin:6px 0 0}

/* ── Lizenzen ───────────────────────────────────────────────────── */
.za-lizenz{background:var(--za-karte); border:1px solid var(--za-linie); border-radius:3px;
  padding:30px 26px; display:flex; flex-direction:column}
.za-hell .za-lizenz{background:var(--za-bg)}
.za-lizenz.za-hervor{border-color:var(--za-rot); box-shadow:0 0 0 1px var(--za-rot)}
.za-preis{font-family:var(--mono); font-size:1.05rem;
  color:var(--za-text); margin:14px 0 4px}
.za-preis small{display:block; font-family:inherit; font-size:.8rem;
  color:var(--za-grau); margin-top:5px}
.za-lizenz ul{list-style:none; margin:18px 0 24px; padding:0; font-size:.94rem; flex:1}
.za-lizenz li{padding-left:18px; position:relative; margin-bottom:7px; color:var(--za-text-dim)}
.za-lizenz li::before{content:"✓"; position:absolute; left:0; color:var(--za-rot); font-size:.85em}

/* ── Hinweiskasten ──────────────────────────────────────────────── */
.za-kasten{background:var(--za-karte); border:1px solid var(--za-linie);
  border-left:3px solid var(--za-rot); border-radius:3px; padding:30px 32px; margin-top:36px}
.za-hell .za-kasten{background:var(--za-bg)}
.za-kasten p{color:var(--za-text-dim); font-size:.99rem; margin:0}
.za-kasten p + p{margin-top:14px}

/* ── Kontakt ────────────────────────────────────────────────────── */
.za-kontakt-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:52px; margin-top:36px}
@media(max-width:860px){.za-kontakt-grid{grid-template-columns:1fr; gap:32px}}
.za-kontaktdaten{list-style:none; margin:0; padding:0; font-size:.97rem}
.za-kontaktdaten li{display:flex; gap:14px; padding:13px 0; border-bottom:1px solid var(--za-linie)}
.za-kontaktdaten span{font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--za-grau);
  min-width:78px; padding-top:3px}
.za-kontaktdaten a{color:var(--za-text); text-decoration:none;
  border-bottom:1px solid var(--za-linie)}
.za-kontaktdaten a:hover{color:var(--za-rot); border-color:var(--za-rot)}

/* ── Fußnote ────────────────────────────────────────────────────── */
.za-fussnote{font-size:.84rem; color:var(--za-grau); margin-top:52px;
  padding-top:18px; border-top:1px solid var(--za-linie); max-width:78ch}

.za-wrap a:focus-visible,.za-knopf:focus-visible{outline:2px solid var(--za-rot); outline-offset:3px}

/* ── Lizenzanfrage-Formular ─────────────────────────────────────
   Nutzt bewusst dieselbe Mechanik wie die Seminaranmeldung:
   Formular auf der Seite, Versand über die API, Bestätigung per Mail. */
.za-formular{background:var(--za-karte); border:1px solid var(--za-linie);
  border-radius:3px; padding:30px 28px; margin-top:8px}
.za-hell .za-formular{background:var(--za-bg)}
.za-formular h3{margin:0 0 6px}
.za-formular .za-form-hinweis{font-size:.9rem; color:var(--za-text-dim); margin:0 0 22px}
.za-zeile{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:640px){.za-zeile{grid-template-columns:1fr}}
.za-feld{display:flex; flex-direction:column; margin-bottom:16px}
.za-feld label{font-family:var(--mono); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--za-grau); margin-bottom:6px}
.za-feld input,.za-feld select,.za-feld textarea{
  font-family:inherit; font-size:.97rem; color:var(--za-text);
  background:var(--za-karte); border:1px solid var(--za-linie);
  border-radius:2px; padding:11px 12px; width:100%}
.za-hell .za-feld input,.za-hell .za-feld select,.za-hell .za-feld textarea{background:#fff}
.za-feld textarea{resize:vertical; min-height:84px}
.za-feld input:focus,.za-feld select:focus,.za-feld textarea:focus{
  outline:none; border-color:var(--za-rot); box-shadow:0 0 0 2px rgba(210,32,47,.12)}
.za-pflicht{color:var(--za-rot)}
.za-status{margin-top:16px; font-size:.94rem; line-height:1.55; padding:0}
.za-status.za-fehler{color:var(--za-rot-dunkel); background:rgba(210,32,47,.06);
  border-left:3px solid var(--za-rot); padding:12px 14px; border-radius:2px}
.za-status.za-ok{color:var(--za-text); background:rgba(26,157,106,.08);
  border-left:3px solid #1a9d6a; padding:14px 16px; border-radius:2px}
.za-formular button[disabled]{opacity:.6; cursor:default}