/* Kunden-Ankaufstrecke — An & Verkauf Münster
   Papiersprache wie im Shop-Theme v24-a: heller Bogen, geschnittene Kanten,
   Kontaktschatten. Bewusst NICHT die interne Aufnahmestrecke (/neu/): Diese
   Seite lädt ein, jene ist ein Werkzeug.
   Mobile-first ab 320 px. */

@font-face{font-family:"Apfel Grotezk";src:url("../assets/fonts/ApfelGrotezk-Regular.woff2") format("woff2");font-display:swap;font-weight:400}
@font-face{font-family:"Apfel Grotezk";src:url("../assets/fonts/ApfelGrotezk-Mittel.woff2") format("woff2");font-display:swap;font-weight:500 700}
@font-face{font-family:"Apfel Grotezk";src:url("../assets/fonts/ApfelGrotezk-Satt.woff2") format("woff2");font-display:swap;font-weight:800 900}
@font-face{font-family:"Newsreader";src:url("../assets/fonts/Newsreader-Italic.woff2") format("woff2");font-display:swap;font-style:italic;font-weight:400 700}

:root{
  color-scheme:light;
  --tisch:#F4F1EB; --tisch-tief:#E7E1D5; --papier:#FFFDF9; --weiss:#fff;
  --tinte:#181613; --tinte-weich:#4F493F; --tinte-blass:#655F53;
  --linie:#D9D2C4;
  --gruen:#86C356; --gruen-tief:#54832F; --gruen-dunkel:#3F6223;
  --lila:#883893; --lila-tief:#6D2A77;
  --warn:#8E2F2F; --warn-feld:#FBEDEC;
  --sans:"Apfel Grotezk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:"Newsreader",Georgia,serif;
  --rand:3px;
  --cut:14px 5px 9px 7px / 11px 8px 6px 10px;
  --k0:0 1px 1px -.5px rgba(74,58,38,.30), 0 2px 4px -1px rgba(74,58,38,.17);
  --k1:0 1px 1.5px rgba(74,58,38,.28), 0 4px 7px -2px rgba(74,58,38,.17), 0 12px 20px -10px rgba(74,58,38,.22);
}

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

/* NATIVES hidden SCHLAEGT JEDE KOMPONENTENREGEL.
   ---------------------------------------------------------------------------
   `hidden` blendet nur ueber das Browser-Stylesheet aus (`display:none`). Jede
   Autorenregel mit eigenem `display` gewinnt dagegen — und zwar lautlos. Genau
   das ist am 18.08. passiert: `.feld`, `.audio`, `.fortschritt`, `.erfolg` und
   `.panne` setzen `display:grid`, also standen Telefonfeld, Audiovorschau,
   Ladebalken, Erfolgs- und Fehlerkarte trotz `hidden="true"` gleichzeitig auf
   der Seite. Gemessen: hidden true, computed display grid, getClientRects 1.

   Eine einzige Regel schliesst die ganze Klasse — und zwar fuer jedes kuenftige
   Bauteil mit, statt Komponente fuer Komponente nachzuruesten. `display:none`
   nimmt das Element zugleich aus der Fokusreihenfolge; `!important` ist hier
   kein Notnagel, sondern der Zweck: Ein ausgeblendetes Element darf sich von
   keiner Komponente ueberstimmen lassen.

   `hidden="until-found"` ist ausgenommen, damit die Browsersuche solche
   Abschnitte weiterhin aufklappen kann. Diese Seite nutzt es derzeit nicht —
   die Ausnahme kostet nichts und verhindert eine spaetere Falle. */
[hidden]:not([hidden="until-found"]){display:none!important}

html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tisch);color:var(--tinte);
  font-family:var(--sans);font-size:16px;line-height:1.55;
  overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}

/* Sichtbarer Fokus überall — nie entfernen, nur gestalten. */
:where(a,button,input,textarea,summary,label.knopf):focus-visible{
  outline:3px solid var(--lila);outline-offset:2px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:0;background:var(--papier);color:var(--tinte);
  padding:12px 18px;font-weight:800;z-index:20;border:var(--rand) solid var(--weiss);box-shadow:var(--k1)}
.skip:focus{left:12px;top:12px}

/* ── Kopf ───────────────────────────────────────────────── */
.kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px clamp(14px,4vw,28px);background:var(--papier);
  border-bottom:1px solid var(--linie)}
.kopf__marke{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;min-width:0}
/* 2026-08-20 (iPhone-Beleg 390px): flex-direction:column machte JEDES
   Textstueck der Wortmarke zum eigenen Flex-Item — "An", "&" und "Verkauf"
   standen untereinander (Marke 179x85px). Als Block fliesst der Name als
   eine Zeile; nur die Seit-1970-Zeile bricht bewusst um. nowrap sichert die
   Zeile auch bei vergroesserter Schrift. */
.kopf__wort{display:block;white-space:nowrap;font-weight:900;font-size:19px;line-height:1.05;letter-spacing:-.02em}
.kopf__wort small{display:block;font-weight:600;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--tinte-blass);margin-top:3px}
.kopf__amp{font-family:var(--serif);font-style:italic;color:var(--lila);padding:0 1px}
.kopf__tel{flex:none;display:inline-flex;align-items:center;gap:5px;min-height:44px;
  font-weight:800;font-size:14px;text-decoration:none;color:var(--tinte);
  background:var(--gruen);padding:9px 14px;border:var(--rand) solid var(--weiss);
  border-radius:var(--cut);box-shadow:var(--k0);white-space:nowrap}
/* Auf sehr schmalen Breiten verkuerzt sich der Telefonweg sichtbar auf
   "Anrufen" — die Nummer bleibt im zugaenglichen Namen (aria-label) und im
   tel:-Ziel vollstaendig erhalten. Ab 410px steht sie wieder daneben. */
@media(max-width:409px){ .kopf__tel .tel__nummer{display:none} }

/* ── Auftakt ────────────────────────────────────────────── */
main{max-width:720px;margin:0 auto;padding:0 clamp(14px,4vw,28px) 40px}
.kicker{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinte-blass);margin:0 0 8px}
.auftakt{padding:clamp(26px,6vw,44px) 0 clamp(18px,4vw,26px)}
h1{margin:0 0 14px;font-size:clamp(28px,7.4vw,44px);line-height:1.08;font-weight:900;letter-spacing:-.025em}
h1 em{font-family:var(--serif);font-style:italic;font-weight:600;color:var(--gruen-dunkel)}
h2{margin:0 0 12px;font-size:clamp(23px,5.4vw,32px);line-height:1.15;font-weight:900;letter-spacing:-.02em}
.vorspann{margin:0 0 18px;color:var(--tinte-weich);font-size:16.5px;line-height:1.6;max-width:56ch}

.ablauf{list-style:none;display:grid;gap:10px;margin:0 0 20px;padding:0;counter-reset:s}
/* Die Zeile hat DREI Rasterelemente: ::before, <b> und <span>. Ohne feste
   Zuordnung platziert der Browser sie automatisch — ::before nach (1,1), <b>
   nach (2,1), und der <span> rutscht in die naechste Zeile zurueck auf Spalte 1.
   Das sind 34 px, in denen der Beschreibungstext dann fast zeichenweise
   umbricht. Gemessen bei 390 px: <b> 278 px breit, <span> 34 px.

   Beide Textzeilen werden deshalb ausdruecklich an Spalte 2 geheftet. Die
   Ziffer bleibt in (1,1) und steht damit neben der Ueberschrift — genau dort,
   wo sie hingehoert. Spalte 1 Zeile 2 bleibt leer.

   Das ist zugleich tolerant: Kommt spaeter eine dritte Textzeile dazu, landet
   sie ebenfalls in Spalte 2 statt die Zeile zu sprengen. */
.ablauf li{counter-increment:s;display:grid;grid-template-columns:34px minmax(0,1fr);
  column-gap:11px;row-gap:3px;align-items:start;
  background:var(--papier);padding:13px 15px;border:var(--rand) solid var(--weiss);
  border-radius:var(--cut);box-shadow:var(--k0)}
.ablauf li::before{content:"0" counter(s);grid-column:1;grid-row:1;
  font-family:var(--serif);font-style:italic;
  font-size:20px;color:var(--lila-tief);line-height:1.3}
.ablauf b{grid-column:2;display:block;font-size:16px;line-height:1.3}
.ablauf span{grid-column:2;color:var(--tinte-weich);font-size:14.5px;line-height:1.5}

.hinweis{font-size:14.5px;line-height:1.6;color:var(--tinte-weich)}
.hinweis--ruhig{background:var(--tisch-tief);padding:13px 15px;border-radius:var(--cut);margin:0}
.hinweis a{color:var(--gruen-dunkel);font-weight:700}

/* ── Formular ───────────────────────────────────────────── */
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.formular{display:grid;gap:18px;margin:0}
.block{border:var(--rand) solid var(--weiss);border-radius:var(--cut);background:var(--papier);
  box-shadow:var(--k1);margin:0;padding:clamp(16px,4vw,24px);display:grid;gap:18px}
.block > legend{font-weight:900;font-size:clamp(18px,4.4vw,22px);letter-spacing:-.02em;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0;margin-bottom:2px}
.block__nr{font-family:var(--serif);font-style:italic;font-weight:600;font-size:19px;
  color:var(--lila-tief);background:var(--tisch);padding:2px 9px;border-radius:var(--cut);
  border:2px solid var(--weiss);box-shadow:var(--k0);line-height:1.2}

.feld{display:grid;gap:7px;min-width:0}
.feld--schmal{max-width:260px}
label,.label{font-weight:800;font-size:15px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.pflicht,.optional{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:2px 7px;border-radius:20px}
.pflicht{background:var(--tisch-tief);color:var(--tinte-weich)}
.optional{background:transparent;color:var(--tinte-blass);border:1px solid var(--linie)}
.hilfe{margin:0;font-size:13.5px;line-height:1.5;color:var(--tinte-blass)}

input[type=text],input[type=email],input[type=tel],textarea{
  font:inherit;font-size:16px;/* 16px verhindert den iOS-Zoom beim Fokus */
  width:100%;padding:12px 13px;color:var(--tinte);background:var(--weiss);
  border:2px solid var(--linie);border-radius:9px}
textarea{resize:vertical;min-height:78px;line-height:1.5}
input:focus,textarea:focus{border-color:var(--gruen-tief)}
[aria-invalid=true]{border-color:var(--warn);background:var(--warn-feld)}

.fehler{margin:0;font-size:13.5px;font-weight:700;color:var(--warn)}
.fehler--sammel{background:var(--warn-feld);padding:11px 13px;border-radius:9px;
  border:2px solid var(--warn)}

/* Auswahl — echte Radios, nur die Hülle ist gestaltet. */
.wahl{display:grid;gap:9px}
.wahl--reihe{grid-template-columns:repeat(auto-fit,minmax(108px,1fr))}
.wahl__opt{display:flex;align-items:flex-start;gap:10px;font-weight:400;
  background:var(--tisch);padding:12px 13px;border:2px solid transparent;border-radius:10px;cursor:pointer}
.wahl__opt input{flex:none;width:21px;height:21px;margin:1px 0 0;accent-color:var(--gruen-tief)}
.wahl__opt b{display:block;font-size:15px;font-weight:800}
.wahl__opt small{display:block;font-size:13px;color:var(--tinte-blass);line-height:1.4}
.wahl__opt:has(input:checked){border-color:var(--gruen-tief);background:var(--weiss)}
.wahl__opt:has(input:focus-visible){outline:3px solid var(--lila);outline-offset:2px}

.haken{display:flex;align-items:flex-start;gap:12px;font-weight:400;font-size:14.5px;line-height:1.55}
.haken input{flex:none;width:23px;height:23px;margin:2px 0 0;accent-color:var(--gruen-tief)}
.haken b{font-weight:800}

.datenschutz{background:var(--tisch);border-radius:10px;padding:14px 15px;display:grid;gap:8px}
.datenschutz__titel{margin:0;font-weight:800;font-size:14.5px}
.datenschutz p{margin:0;font-size:13.5px;line-height:1.55;color:var(--tinte-weich)}
.datenschutz__offen{color:var(--tinte-blass);font-style:italic;
  border-left:3px solid var(--linie);padding-left:11px}

.preis{position:relative}
.preis input{padding-right:38px}
.preis__euro{position:absolute;right:13px;top:50%;transform:translateY(-50%);
  font-weight:800;color:var(--tinte-blass)}

/* ── Knöpfe ─────────────────────────────────────────────── */
.knopfreihe{display:flex;flex-wrap:wrap;gap:10px}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-weight:800;font-size:15px;text-decoration:none;color:var(--tinte);
  background:var(--papier);padding:12px 19px;min-height:48px;cursor:pointer;
  border:var(--rand) solid var(--weiss);border-radius:var(--cut);box-shadow:var(--k0)}
.knopf--gruen{background:var(--gruen)}
.knopf--klein{font-size:13.5px;padding:8px 13px;min-height:40px}
.knopf--gross{width:100%;font-size:17px;min-height:56px}
.knopf:hover{transform:translateY(-1px);box-shadow:var(--k1)}
.knopf[disabled],.knopf[aria-disabled=true]{opacity:.55;cursor:default;transform:none}

/* ── Galerie ────────────────────────────────────────────── */
.galerie{list-style:none;margin:4px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.galerie:empty{display:none}
.galerie li{position:relative;background:var(--weiss);border:var(--rand) solid var(--weiss);
  border-radius:10px;box-shadow:var(--k0);overflow:hidden}
.galerie img{width:100%;aspect-ratio:1;object-fit:cover}
.galerie__weg{position:absolute;top:5px;right:5px;width:32px;height:32px;padding:0;
  min-height:0;border-radius:50%;font-size:17px;line-height:1;background:var(--weiss)}
.galerie__marke{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinte-blass);padding:5px 7px 6px;text-align:center}
.galerie li:first-child .galerie__marke{color:var(--gruen-dunkel)}

.aufnahme__status{margin:0;font-size:14px;font-weight:700;color:var(--tinte-weich);min-height:1.2em}
.aufnahme__status[data-laeuft=ja]{color:var(--warn)}
.audio{display:grid;gap:9px;justify-items:start}
.audio audio{width:100%}

/* ── Fortschritt, Erfolg, Panne ─────────────────────────── */
.absenden{display:grid;gap:10px;justify-items:stretch}
.fortschritt{display:grid;gap:9px;background:var(--papier);padding:17px;
  border:var(--rand) solid var(--weiss);border-radius:var(--cut);box-shadow:var(--k1)}
.fortschritt__text{margin:0;font-weight:800}
.balken{height:11px;background:var(--tisch-tief);border-radius:20px;overflow:hidden}
.balken__fuellung{height:100%;background:var(--gruen-tief);width:0;transition:width .25s ease}

.erfolg,.panne{background:var(--papier);border:var(--rand) solid var(--weiss);
  border-radius:var(--cut);box-shadow:var(--k1);padding:clamp(20px,5vw,30px);margin-top:20px;display:grid;gap:12px}
.erfolg:focus-visible,.panne:focus-visible{outline:3px solid var(--lila);outline-offset:3px}
.erfolg h2,.panne h2{margin:0}
.erfolg .vorspann,.panne .vorspann{margin:0}
.beleg{margin:0;font-size:15px;background:var(--tisch);padding:11px 14px;border-radius:10px}
.beleg b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14.5px;letter-spacing:.02em}
.panne .vorspann{color:var(--warn);font-weight:700}

/* ── Fuß ────────────────────────────────────────────────── */
.fuss{background:var(--tinte);color:#EDE7DC;padding:26px clamp(14px,4vw,28px);margin-top:26px}
.fuss p{margin:0 0 6px;font-size:14px}
.fuss__leise{color:#A8A093;font-size:13px}

@media(min-width:640px){
  .ablauf{grid-template-columns:repeat(3,1fr)}
  .knopf--gross{width:auto;justify-self:start;padding-inline:34px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .knopf:hover{transform:none}
}

@media(prefers-contrast:more){
  input[type=text],input[type=email],input[type=tel],textarea{border-color:var(--tinte)}
  .hilfe{color:var(--tinte-weich)}
}