/* NORDIX — Kontaktseite
   Eigene Seite statt Abschluss-Sektion. Sie muss genau eine Aufgabe erfüllen:
   den Weg von „ich brauche das" zu „ich habe mich gemeldet" so kurz wie
   möglich machen. Deshalb steht die Rufnummer ganz oben und groß — telefonieren
   ist bei einem Ein-Mann-Betrieb der direkteste Weg, und auf dem Handy ist es
   ein Fingertipp. */

/* ---------- Kopf ---------- */
.kseite{padding:clamp(40px,7vh,96px) var(--pad) clamp(60px,9vh,120px)}
.kseite .kopfzeile{max-width:74ch}
.kseite h1{max-width:15ch}
.kseite .vor{margin-top:22px;max-width:56ch;color:var(--ink-2)}

/* ---------- Die Wege ---------- */
.wege{
  margin-top:clamp(34px,4.5vw,58px);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,256px),1fr));
  gap:12px;
  max-width:1180px;
}

.weg{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;gap:10px;
  padding:clamp(20px,2.2vw,28px);
  border:1px solid var(--line);border-radius:14px;
  background:var(--panel);
  color:inherit;text-decoration:none;
  transition:border-color .3s ease,transform .3s cubic-bezier(.25,1,.5,1);
}
.weg::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 100% 0%,
    color-mix(in srgb,var(--orange) 9%,transparent) 0%,transparent 62%);
  opacity:.85;transition:opacity .4s ease;
}
.weg:hover,.weg:focus-visible{border-color:var(--orange);transform:translateY(-2px)}
.weg:hover::before,.weg:focus-visible::before{opacity:1}

.weg .lbl2{
  font-size:var(--fs-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--orange);
}
.weg .gross{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(23px,2.6vw,34px);line-height:1.04;
  letter-spacing:var(--tr-h2);color:var(--ink);
  /* Rufnummern und Adressen dürfen nicht mitten im Wort brechen */
  overflow-wrap:anywhere;
}
.weg .klein{font-size:13.5px;line-height:1.55;color:var(--ink-2)}

/* UMBRUCH IN DEN KARTEN ZURÜCKHOLEN (Befund vom 18.08.2026)
   Die Anrufen-Karte IST ein `tel:`-Verweis. Damit greift auf ihr die Regel
   `a[href^="tel:"]{white-space:nowrap}` aus tokens.css und vererbt sich auf
   den kompletten Inhalt — der Fließtext stand seit Runde 71 in einer einzigen
   1644 px breiten Zeile, die `overflow:hidden` bei 327 px abgeschnitten hat.
   Sichtbar war „Direkt bei mir, ohne Warteschleife. Melde ic…".

   Ein `.weg{white-space:normal}` hilft NICHT: `a[href^="tel:"]` hat mit
   (0,1,1) die höhere Spezifität als `.weg` mit (0,1,0). Deshalb steht die
   Angabe hier direkt an den Kindern — gegen einen geerbten Wert gewinnt jede
   direkte Angabe, unabhängig von der Spezifität. */
.weg .lbl2,
.weg .gross,
.weg .klein{white-space:normal}

/* Der Anruf ist der kürzeste Weg — entsprechend hervorgehoben */
.weg.laut{
  border-color:color-mix(in srgb,var(--orange) 55%,transparent);
  background:color-mix(in srgb,var(--orange) 7%,var(--panel));
}
.weg.laut .gross{color:var(--orange);
  /* Nur die Rufnummer selbst bleibt ungebrochen — nicht die ganze Karte.
     Gemessen passt sie auch bei 375 px Schirmbreite in eine Zeile. */
  white-space:nowrap;overflow-wrap:normal}

/* ---------- Formular ---------- */
.kform{
  margin-top:clamp(44px,6vw,78px);
  max-width:74ch;
  border-top:1px solid var(--line);
  padding-top:clamp(26px,3vw,40px);
}
.kform h2{margin-bottom:10px}
.kform .hinweis{max-width:60ch;color:var(--ink-2)}

.feldreihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px;margin-top:26px}
.feld{display:flex;flex-direction:column;gap:7px}
.feld.weit{grid-column:1/-1}
.feld label{
  font-size:var(--fs-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--ink-3);
}
.feld input,.feld textarea,.feld select{
  font:inherit;font-size:14.5px;
  color:var(--ink);background:var(--panel);
  border:1px solid var(--line-2);border-radius:9px;
  padding:12px 14px;
  transition:border-color .25s ease,background-color .25s ease;
}
.feld textarea{min-height:132px;resize:vertical}
.feld input:focus,.feld textarea:focus,.feld select:focus{
  border-color:var(--orange);
  background:color-mix(in srgb,var(--orange) 5%,var(--panel));
}
.feld input::placeholder,.feld textarea::placeholder{color:var(--ink-3)}

.kform .absenden{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:20px}

/* Eigene Schaltfläche statt `.cta-a`: die lebt von ihrer Punktanimation im
   Vorschaufeld, und die gehört nicht in ein Formular. Hier zählt, dass man
   sie als Absendeknopf erkennt. */
.ksend{
  font:inherit;cursor:pointer;
  padding:15px 30px;border-radius:999px;
  border:1px solid var(--orange);background:var(--orange);color:var(--bg);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  transition:background-color .25s ease,border-color .25s ease,transform .2s ease;
}
.ksend:hover,.ksend:focus-visible{
  background:var(--orange-hell);border-color:var(--orange-hell);
}
.ksend:active{transform:translateY(1px)}
.kform .datenschutz{font-size:12.5px;color:var(--ink-3);max-width:46ch}
.kform .datenschutz a{color:var(--ink-2)}

/* ---------- Hinweise, Prüfung, Ergebnis (Runde 63) ----------

   EINE AUSNAHME VON DER EINEN AKZENTFARBE.
   Die ganze Seite kennt genau ein Orange. Fehlermeldungen bekommen trotzdem
   einen eigenen Ton: Orange ist hier schon vergeben — es markiert den Fokus,
   die aktive Navigation und jeden Aufruf zum Handeln. Ein Fehler in derselben
   Farbe wie „hier bist du gerade" ist keine Warnung, sondern Rauschen. Der
   Ton ist bewusst nah am Orange gewählt, damit er nicht wie aus einem anderen
   Formular aussieht.

   Und er trägt nie allein: Am Feld steht Text, das Feld bekommt
   `aria-invalid`, und der Fokus springt hin. Wer keine Farben unterscheidet,
   verliert dadurch nichts. */
.kform{--warn:#ff7a66}

.feldfehler{
  font-size:12.5px;line-height:1.45;color:var(--warn);
}
.feldfehler:empty{display:none}

.feld input[aria-invalid="true"],
.feld textarea[aria-invalid="true"]{
  border-color:var(--warn);
  background:color-mix(in srgb,var(--warn) 6%,var(--panel));
}
/* Der Fokusring bleibt orange und gewinnt sichtbar über die Fehlerfarbe —
   sonst wüsste man bei einem markierten Feld nicht mehr, wo man steht. */
.feld input[aria-invalid="true"]:focus,
.feld textarea[aria-invalid="true"]:focus{border-color:var(--orange)}

/* Der Honigtopf. Nicht `display:none` und nicht `visibility:hidden` —
   beides erkennt ein Formularroboter am Ausgangswert. Stattdessen wird das
   Feld aus dem Bild geschoben; im Baum sieht es aus wie jedes andere.
   `aria-hidden` und `tabindex="-1"` im HTML halten Tastatur und
   Sprachausgabe davon fern. */
.honigtopf{
  position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;
}

.pruefung{margin-top:22px;min-height:0}
.pruefung:not(:empty){min-height:65px}

.ergebnis{
  margin-top:18px;max-width:52ch;
  font-size:13.5px;line-height:1.5;
  color:var(--ink-2);
}
.ergebnis:empty{display:none}
.ergebnis[data-art="fehler"]{color:var(--warn)}
.ergebnis[data-art="gut"]{color:var(--orange)}
/* „Noch nicht eingerichtet" ist kein Fehler des Besuchers, sondern eine
   Auskunft über den Stand der Seite. Deshalb dieselbe gestrichelte Kachel,
   die vorher unter dem Knopf stand. */
.ergebnis[data-art="offen"]{
  display:inline-block;
  font-size:var(--fs-micro);letter-spacing:var(--tr-micro);text-transform:uppercase;
  color:var(--ink-3);border:1px dashed var(--line-2);padding:8px 13px;border-radius:6px;
}

.ksend:disabled{
  opacity:.45;cursor:not-allowed;
  background:transparent;color:var(--ink-3);border-color:var(--line-2);
}
.ksend:disabled:hover{background:transparent;border-color:var(--line-2)}

/* ---------- Instagram-Weg in der Projektsektion ---------- */
.insta{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:22px;padding:13px 20px;
  border:1px solid var(--line-2);border-radius:999px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;
  transition:color .25s ease,border-color .25s ease,background-color .25s ease;
}
.insta:hover,.insta:focus-visible{
  color:var(--orange);border-color:var(--orange);
  background:color-mix(in srgb,var(--orange) 10%,transparent);
}
/* Das Herz ist ein Emoji und wird vom System gezeichnet — Buchstabenabstand
   und Versalien dürfen es nicht mitnehmen. */
.insta .herz{
  font-size:15px;letter-spacing:0;text-transform:none;line-height:1;
  transition:transform .3s cubic-bezier(.25,1,.5,1);
}
.insta:hover .herz{transform:scale(1.2)}

@media(prefers-reduced-motion:reduce){
  .weg,.weg::before,.insta,.insta .herz{transition:none}
  .weg:hover{transform:none}
}

/* ---------- Einzelheiten zu den Wegen ----------
   Was im Ablauf auf der Startseite bewusst nicht mehr steht. Bewusst ruhig
   gesetzt: Wer hier ankommt, hat den Link gezielt angeklickt und will lesen,
   nicht überzeugt werden. Deshalb Fließtext zwischen Trennlinien und keine
   weiteren Karten — die stehen schon oben. */
.details{
  margin-top:clamp(52px,7vw,92px);
  /* Die Kopfzeile steht fest oben. Ohne diesen Abstand landet die Überschrift
     beim Sprung aus dem Ablauf halb dahinter. */
  scroll-margin-top:96px;
  max-width:74ch;
  border-top:1px solid var(--line);
  padding-top:clamp(26px,3vw,40px);
}
.details h2{margin-bottom:6px}
.dblock{padding:26px 0;border-bottom:1px solid var(--line)}
.dblock:last-child{border-bottom:0}
.dblock h3{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(19px,2vw,25px);text-transform:uppercase;
  letter-spacing:var(--tr-h2);color:var(--orange);
  margin-bottom:10px;
}
.dblock p{color:var(--ink-2)}
.dblock p + p{margin-top:14px}
.dblock .chips{margin:16px 0}

/* ---------- Anhänge (18.08.2026) ---------- */

.feld.anhang{margin-top:6px}
.feld.anhang .opt{
  font-size:var(--fs-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--ink-3);margin-left:8px;
}

/* Das eigene Aussehen des Dateifelds ist in jedem Browser anders und in
   keinem schön. Statt es zu verstecken und mit einem falschen Knopf zu
   ersetzen — was Tastatur und Sprachausgabe regelmäßig bricht — bleibt das
   echte Feld stehen und bekommt nur einen Rahmen in der Sprache der übrigen
   Eingaben. Der Auswahlknopf darin gehört dem Browser; das ist gut so. */
#k-dateien{
  width:100%;
  padding:12px 14px;
  border:1px dashed var(--line-2);border-radius:10px;
  background:color-mix(in srgb,var(--panel) 70%,transparent);
  color:var(--ink-2);font:inherit;font-size:13px;
  cursor:pointer;
  transition:border-color .25s ease,background-color .25s ease;
}
#k-dateien:hover{border-color:var(--orange)}
#k-dateien::file-selector-button{
  margin-right:12px;padding:7px 14px;
  border:1px solid var(--line-2);border-radius:999px;
  background:transparent;color:var(--ink);
  font:inherit;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;
}
#k-dateien::file-selector-button:hover{border-color:var(--orange);color:var(--orange)}

.anhanghinweis{
  margin-top:8px;font-size:12.5px;line-height:1.6;color:var(--ink-3);
}
.anhanghinweis a{color:var(--orange)}

/* Liste der gewählten Dateien. Sie ist die einzige Rückmeldung darüber, was
   tatsächlich mitgeht — der Dateiname im Eingabefeld verschwindet bei
   Mehrfachauswahl hinter „3 Dateien". */
.dateiliste{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.dateiliste li{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;
  border:1px solid var(--line);border-radius:8px;
  background:var(--panel);font-size:12.5px;
}
.dateiliste .nam{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.dateiliste .gr{flex:0 0 auto;color:var(--ink-3);font-size:11.5px}
.dateiliste .klein{flex:0 0 auto;color:var(--orange);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.dateiliste .weg{
  flex:0 0 auto;width:24px;height:24px;padding:0;
  border:1px solid var(--line-2);border-radius:6px;background:transparent;
  color:var(--ink-3);font:inherit;line-height:1;cursor:pointer;
}
.dateiliste .weg:hover,.dateiliste .weg:focus-visible{border-color:var(--warn);color:var(--warn)}

.dateiliste .summe{
  border-style:dashed;background:transparent;color:var(--ink-3);
  font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
}
.dateiliste .summe.zuviel{border-color:var(--warn);color:var(--warn)}

/* ---------------------------------------------------------------------------
   E-Mail und Telefon als Paar — neu am 14.10.2026 (Runde W-219).

   Die beiden gehören zusammen und stehen deshalb in einem gemeinsamen Block
   über die volle Breite, nicht als zwei Felder in der normalen Reihe. Die
   Fußzeile darunter begründet das Pflichtfeld; sie gehört zum Block und nicht
   zu einem der beiden Eingabefelder.

   Unter 620 px fallen die beiden untereinander — zwei Eingabefelder
   nebeneinander sind auf dem Telefon nicht mehr bedienbar.
   --------------------------------------------------------------------------- */
.paar-in{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(12px,1.6vw,20px);
}
@media (max-width:620px){.paar-in{grid-template-columns:1fr}}
.paar-halb{display:flex;flex-direction:column;min-width:0}
.paarfuss{
  margin-top:10px;
  font-size:12.5px;
  line-height:1.6;
  color:var(--ink-3);
  max-width:78ch;
}

/* ---------------------------------------------------------------------------
   Bestätigung am Knopf statt als Text darunter — W-220, 14.10.2026.

   Vorher: Der Knopf blieb `disabled` und `.ksend:disabled` machte ihn
   transparent, grau und auf 45 % Deckkraft — der Erfolg wurde also aktiv
   ausgegraut. Die Bestätigung stand nur als Satz darunter.

   ⚠ `disabled` BLEIBT gesetzt. Ohne die Sperre ließe sich dieselbe Anfrage ein
   zweites Mal abschicken. Die Färbung kommt deshalb über diese Klasse, die die
   disabled-Regel überschreibt — niemals dadurch, dass `disabled` wegfällt.
   --------------------------------------------------------------------------- */
.ksend.ab{
  opacity:1;cursor:default;
  display:inline-grid;grid-template-columns:auto 1fr;align-items:center;
  column-gap:13px;row-gap:2px;text-align:left;
  padding:14px 26px;border-radius:14px;
  background:color-mix(in srgb,var(--orange) 16%,transparent);
  border-color:var(--orange);color:var(--orange);
}
.ksend.ab:hover{background:color-mix(in srgb,var(--orange) 16%,transparent);border-color:var(--orange)}
.ksend.ab .hk{grid-row:1/3;width:20px;height:20px;flex:none}
.ab-wort{font-size:14px;letter-spacing:.12em}
.ab-unter{font-size:10.5px;letter-spacing:.08em;color:var(--ink-3);text-transform:none}

/* Die sichtbare Meldung entfällt — die Bestätigung steht jetzt am Knopf.
   Der Text bleibt aber im `role="status"`-Element stehen, nur unsichtbar:
   Eine Vorlesehilfe meldet den Wechsel des Knopftextes nicht zuverlässig,
   und ohne diesen Satz bekäme sie gar keine Rückmeldung. */
.ergebnis[data-art="still"]{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}