/* ══════════════════════════════════════════════════════════════════════════
   ATMOS Verkauf — Schaufenster.

   Designsprache = die des gedruckten A5-Uhrenzertifikats (lib/zertifikat/
   template.ts im Cockpit-Repo): Crimson Pro als Serif, Jost gesperrt für
   Rubriken, Weinrot #981e29 als CD-Farbe, Messing #a8823c ausschließlich als
   Linie/Rahmen/Raute, weißes Papier.

   MESSING TRÄGT KEINEN TEXT: #a8823c erreicht auf Weiß nur 3,5:1 und fällt
   damit durch WCAG AA. Wo Messing als Text nötig ist (Eyebrow), steht die
   dunklere Stufe #7f6229 (5,8:1). Die beiden Töne nicht zusammenziehen.
   Eine Ausnahme, und nur diese: das kursive „by" im Uhrentitel (32–48 px) darf
   #a8823c tragen — für Großtext verlangt AA nur 3:1, das ist erfüllt.

   Radien und Schatten: keine. Tiefe entsteht durch Schleier und Linien.
   ══════════════════════════════════════════════════════════════════════════ */

.atmos-verkauf {
  --av-papier:      #ffffff;
  --av-papier-2:    #f7f4ef;   /* Formulargrund, eine Spur wärmer */
  --av-tinte:       #262b34;
  --av-dim:         #5d6370;
  --av-weinrot:     #981e29;   /* Rubriken, Preis, Knopfgrund */
  --av-messing:     #a8823c;   /* NUR Linie, Rahmen, Raute */
  --av-messing-txt: #7f6229;   /* Messing, wo es Text tragen muss */
  --av-linie:       rgba(168, 130, 60, .5);    /* tragend */
  --av-linie-fein:  rgba(168, 130, 60, .25);   /* trennend */
  --av-linie-blass: rgba(168, 130, 60, .28);   /* inaktive Auswahlfelder */
  --av-fehler:      #8c3a2a;

  --av-serif: 'Crimson Pro', 'Crimson Text', Georgia, serif;
  --av-sans:  'Jost', 'Helvetica Neue', Arial, sans-serif;

  background: var(--av-papier);
  border-top: 1px solid var(--av-linie);
  border-bottom: 1px solid var(--av-linie);
  padding: 70px 0 78px;
  color: var(--av-tinte);
}

.atmos-verkauf *, .atmos-verkauf *::before, .atmos-verkauf *::after { box-sizing: border-box; }

/* Zwei Fassungen desselben Satzes stehen im Markup, das CSS zeigt eine davon.
   Umgeschaltet wird per Breakpoint und nicht per JS: ein Drehen des Telefons soll
   nicht die falsche Fassung stehen lassen. */
.atmos-verkauf-schmal { display: none; }

/* Das Theme setzt Ueberschriften in gesperrte Versalien — im Panel erschien der
   Uhrenname dadurch als „ATMOS ROYALE WAJIMA LACQUERWARE". Gezielt zuruecknehmen,
   NICHT pauschal ueber h1–h4: ein Blankett-Reset haette hoehere Spezifitaet als die
   eigenen Rubrik-Klassen und deren Versalien gleich mitgenommen. */
.atmos-verkauf .atmos-verkauf-detail__titel,
.atmos-verkauf .atmos-verkauf-anfrage__titel,
.atmos-verkauf .atmos-verkauf-leer__titel,
.atmos-verkauf .atmos-verkauf-dank__titel,
.atmos-verkauf-panel .atmos-verkauf-detail__titel,
.atmos-verkauf-panel .atmos-verkauf-anfrage__titel,
.atmos-verkauf-panel .atmos-verkauf-dank__titel {
  text-transform: none; letter-spacing: normal; text-align: left; border: 0; padding: 0;
}

/* ── Einleitung ───────────────────────────────────────────────────────── */
/* Zentriert, weil die Theme-Ueberschrift darueber es auch ist — linksbuendig
   wirkte der Absatz gegen sie versetzt. Das Kachel-Raster bleibt linksbuendig:
   zentrierte Fliesstexte in schmalen Spalten liest niemand gern. */
.atmos-verkauf-einleitung {
  margin: 0 auto 34px; max-width: 78ch;
  font-family: var(--av-serif); font-size: 20px; line-height: 1.62;
  color: var(--av-tinte); text-align: center;
  /* hyphens: none — das Theme trennte sonst „Faszinati-on" und „Garantie-zeit".
     text-wrap: balance gleicht die Zeilenlaengen aus; bei zentriertem Satz faellt
     eine einzelne kurze Schlusszeile sonst unangenehm auf. */
  hyphens: none; -webkit-hyphens: none; text-wrap: balance;
}

/* ── Rubrikzeile: Etikett · Linie · Zahl ──────────────────────────────── */
.atmos-verkauf-rubrik { display: flex; align-items: baseline; gap: 20px; margin-bottom: 20px; }
.atmos-verkauf-rubrik__titel {
  margin: 0; font-family: var(--av-sans); font-weight: 500; font-size: 12px;
  letter-spacing: .26em; text-transform: uppercase; color: var(--av-weinrot);
}
.atmos-verkauf-rubrik__linie { flex: 1; height: 1px; background: var(--av-linie); }
.atmos-verkauf-rubrik__zahl {
  font-family: var(--av-sans); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--av-dim);
}

/* Bestandszahl · Linie · Sortierung — dieselbe Formel wie .atmos-verkauf-rubrik,
   eine Zeile tiefer und unmittelbar ueber dem Raster, auf das sich beides bezieht.
   Kein negativer Margin mehr: die Zeile traegt ihren Abstand selbst. */
.atmos-verkauf-leiste {
  display: flex; align-items: center; gap: 4px 18px; flex-wrap: wrap;
  margin-bottom: 30px;
}
.atmos-verkauf-sortierung {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 18px;
}
.atmos-verkauf-sortierung__label {
  font-family: var(--av-sans); font-size: 10px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--av-dim); margin-right: 2px;
}
/* 40 px Hoehe statt 18: am Telefon sind das neben den Kacheln die einzigen
   Bedienelemente der Seite, und sie stehen umgebrochen in zwei Reihen. Die Kante
   des aktiven Zustands sitzt deshalb auf einem ::after knapp unter den Versalien
   und nicht am Rand des Knopfes — sonst rutschte sie 12 px unter die Schrift. */
.atmos-verkauf-sortierung__knopf {
  position: relative; display: inline-flex; align-items: center;
  min-height: 40px; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--av-sans); font-weight: 500; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--av-dim);
  transition: color .15s ease;
}
.atmos-verkauf-sortierung__knopf::after {
  content: ''; position: absolute; left: 0; right: 0; top: calc(50% + 9px);
  height: 2px; background: transparent; transition: background-color .15s ease;
}
/* :not(--aktiv) ist Pflicht, nicht Kosmetik: :hover hat die hoehere Spezifitaet
   und faerbte sonst den AKTIVEN Knopf beim Ueberfahren zurueck auf Tinte —
   er sah dann aus wie „nicht gewaehlt, aber unterstrichen". */
.atmos-verkauf-sortierung__knopf:not(.atmos-verkauf-sortierung__knopf--aktiv):hover { color: var(--av-tinte); }
.atmos-verkauf-sortierung__knopf:active { color: var(--av-weinrot); }
.atmos-verkauf-sortierung__knopf--aktiv { color: var(--av-weinrot); }
.atmos-verkauf-sortierung__knopf--aktiv::after { background: var(--av-weinrot); }
/* Tastatur-Fokus muss sichtbar bleiben — das Theme setzt outline:none auf Buttons.
   --av-messing-txt wie ueberall sonst in dieser Datei; --av-messing erreicht auf
   Weiss nur 3,5:1. */
.atmos-verkauf-sortierung__knopf:focus-visible {
  outline: 2px solid var(--av-messing-txt); outline-offset: 3px;
}
/* Meldung nur fuer Screenreader — sehende Nutzer sehen das Raster springen. */
.atmos-verkauf-nurlesbar {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── Kachel-Raster ────────────────────────────────────────────────────── */
.atmos-verkauf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 58px 42px; }

/* Der Rahmen umschliesst Bild UND Text: so gehoert sichtbar zusammen, was zu einer
   Uhr gehoert. height:100% + margin-top:auto am Preis laesst die Preiszeile ueber
   alle Kacheln einer Reihe auf gleicher Hoehe stehen, egal wie lang Titel und
   Teaser ausfallen. */
.atmos-verkauf-kachel {
  display: flex; flex-direction: column; height: 100%;
  text-decoration: none; color: inherit;
  border: 1px solid var(--av-linie);
  transition: border-color .16s ease-out;
}
.atmos-verkauf-kachel--aus { display: none; }
.atmos-verkauf-kachel:hover, .atmos-verkauf-kachel:focus-visible { text-decoration: none; }
.atmos-verkauf-kachel:hover { border-color: var(--av-messing); }
.atmos-verkauf-kachel:focus-visible { outline: 2px solid var(--av-messing-txt); outline-offset: 4px; }

/* Bildfeld: Messinglinie auf Papier, Foto eingepasst statt beschnitten — die
   Aufnahmen haben teils schwarzen, teils weißen Hintergrund; ein farbiger Grund
   entschiede sich gegen eine der beiden Sorten. */
.atmos-verkauf-bildfeld {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3 / 4; padding: 16px;
  background: var(--av-papier);
  border-bottom: 1px solid var(--av-linie-fein);
}
.atmos-verkauf-bild { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.atmos-verkauf-bild--leer { width: 100%; height: 100%; background: #f2f1ee; }

.atmos-verkauf-kachel__text { display: flex; flex-direction: column; flex: 1; gap: 11px; padding: 20px 20px 20px; }

.atmos-verkauf-eyebrow {
  font-family: var(--av-sans); font-size: 10px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--av-messing-txt);
}
.atmos-verkauf-name {
  position: relative; font-family: var(--av-serif); font-weight: 300; font-size: 26px;
  line-height: 1.2; color: var(--av-tinte); padding-bottom: 10px;
  /* Keine Silbentrennung: das Theme trennt sonst „Mondpha-se". Zwei Zeilen fest
     reserviert, damit Teaser und Preis in einer Reihe auf gleicher Hoehe beginnen. */
  hyphens: none; -webkit-hyphens: none;
  min-height: calc(2 * 1.2em + 10px);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Der Strich unter dem Namen wächst beim Hover — das ist die einzige Bewegung
   im Raster und ersetzt jede „Details ansehen"-Aufforderung. */
.atmos-verkauf-strich {
  position: absolute; left: 0; bottom: 0; width: 26px; height: 1px;
  background: var(--av-messing); transition: width .16s ease-out;
}
.atmos-verkauf-kachel:hover .atmos-verkauf-strich { width: 64px; }
.atmos-verkauf-teaser { font-family: var(--av-serif); font-size: 17px; hyphens: none; -webkit-hyphens: none; line-height: 1.54; color: var(--av-tinte); text-wrap: pretty; }
.atmos-verkauf-preis {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--av-linie-fein);
  font-family: var(--av-serif); font-weight: 600; font-size: 22px; color: var(--av-weinrot);
}

/* ── Nachladen ────────────────────────────────────────────────────────── */
.atmos-verkauf-mehr { display: flex; justify-content: center; margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--av-linie-fein); }
.atmos-verkauf-mehr__link {
  background: none; border: 0; cursor: pointer; padding: 0 0 5px;
  font-family: var(--av-sans); font-weight: 500; font-size: 11.5px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--av-messing-txt); border-bottom: 1px solid var(--av-linie);
}
.atmos-verkauf-mehr__link:focus-visible { outline: 2px solid var(--av-messing-txt); outline-offset: 4px; }

/* ── Leer-Zustand ─────────────────────────────────────────────────────── */
.atmos-verkauf-leer { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 30px 0 40px; }
.atmos-verkauf-raute { color: var(--av-messing); font-size: 12px; }
.atmos-verkauf-leer__titel { margin: 0; font-family: var(--av-serif); font-weight: 300; font-size: 30px; color: var(--av-tinte); }
.atmos-verkauf-leer__text { margin: 0 auto; font-family: var(--av-serif); font-size: 19px; line-height: 1.62; color: var(--av-tinte); max-width: 58ch; }

/* ══ Detailansicht (Overlay) ═══════════════════════════════════════════ */
.atmos-verkauf-overlay {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; justify-content: center; align-items: flex-start;
  padding: 44px 16px; overflow: hidden;
}
.atmos-verkauf-overlay[hidden] { display: none; }
.atmos-verkauf-overlay__schleier { position: fixed; inset: 0; background: rgba(22, 35, 63, .6); }
/* Das Panel ist der Scroll-Container, nicht die Huelle: auf der Huelle scrollte in
   der Praxis gar nichts, und der Entwurf sieht es ohnehin so vor. */
.atmos-verkauf-panel {
  position: relative; width: 100%; max-width: 1040px;
  max-height: calc(100vh - 88px);
  /* 100vh zaehlt auf dem Telefon die eingeblendete Adressleiste mit — der untere
     Panelrand lag damit hinter der Browserleiste. Die vh-Zeile bleibt als Rueckfall
     fuer Browser ohne dvh davor stehen.
     dvh und nicht svh: das uebliche Gegenargument (die Hoehe springt, wenn die
     Adressleiste beim Scrollen einfaehrt) trifft hier nicht zu. Solange das Overlay
     offen ist, steht der Body auf position:fixed und das Dokument scrollt gar nicht
     — iOS blendet die Leiste aber nur beim Dokument-Scroll um, nicht beim Scrollen
     eines inneren Elements. Die Leistenstellung bleibt also die des Moments, in dem
     die Uhr geoeffnet wurde, und dvh trifft genau sie. svh liesse stattdessen dauerhaft
     einen Schleierstreifen am unteren Rand stehen. */
  max-height: calc(100dvh - 88px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;   /* kein Weiterscrollen auf die Seite dahinter */
  background: var(--av-papier); border: 1px solid var(--av-linie);
  color: var(--av-tinte); animation: atmos-verkauf-auf .18s ease-out;
}
@keyframes atmos-verkauf-auf { from { opacity: 0; } to { opacity: 1; } }
.atmos-verkauf-panel:focus { outline: none; }

/* Kein justify-content mehr: die Linie unten nimmt als flex:1 den freien Raum auf,
   es bleibt keiner zu verteilen. */
.atmos-verkauf-panel__kopf {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 40px; border-bottom: 1px solid var(--av-linie);
}
.atmos-verkauf-panel__pfad {
  font-family: var(--av-sans); font-weight: 500; font-size: 10px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--av-dim);
}
/* Etikett · Linie · Angabe — dieselbe Formel wie .atmos-verkauf-rubrik und
   .atmos-verkauf-unterrubrik. Ohne die Linie klaffte zwischen Pfad und Schließen
   eine leere Mitte (am Telefon rund 110 px, am Desktop 498 px), und der Kopf las
   sich als App-Titelleiste statt als Kopfzeile eines Zertifikats.
   ABER: anders als in den Rubrikzeilen steht diese Linie nicht allein — 22 px
   darunter laeuft schon die border-bottom des Kopfes. Zwei gleich starke Striche
   im selben Ton gaeben dem Kopf mehr Gewicht statt weniger, mobil dauerhaft im
   Blick. Deshalb hier die trennende Stufe: die Unterlinie traegt, diese trennt. */
.atmos-verkauf-panel__kopf i { flex: 1; height: 1px; background: var(--av-linie-fein); }
.atmos-verkauf-zu {
  background: none; border: 0; cursor: pointer; padding: 0 0 4px;
  font-family: var(--av-sans); font-weight: 500; font-size: 10.5px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--av-messing-txt); border-bottom: 1px solid var(--av-linie);
}
.atmos-verkauf-zu:focus-visible { outline: 2px solid var(--av-messing-txt); outline-offset: 4px; }

.atmos-verkauf-oben { display: grid; grid-template-columns: 452px 1fr; gap: 56px; padding: 44px 40px 52px; }
/* Im Markup steht die Info-Spalte VOR der Bildspalte — so hoert ein Screenreader
   ueberall zuerst Name und Preis, auch dort, wo `order` nur die Optik dreht. Fuers
   zweispaltige Layout schiebt `order` das Bild wieder nach links. Unter 1024 px ist
   die Huelle display:contents, dann greift der Wert nicht mehr (und muss es nicht:
   die Bausteine tragen ihre eigenen).

   BEWUSST ERKAUFT, auf ALLEN Breiten: der Tabulator laeuft jetzt Schliessen → CTA →
   Miniaturen, also gegen die Leserichtung (WCAG 2.4.3). Vorher stimmte die
   Tabreihenfolge und dafuer war die Vorlesereihenfolge kaputt: man hoerte Foto-Alt,
   fuenf „Aufnahme N" und bis zu elf Datenzeilen, BEVOR der Name der Uhr kam — man
   wusste nicht, worueber man liest. Der Tausch ist der bessere; bitte nicht
   zurueckdrehen. Beides zugleich ginge nur, wenn die Bausteine flach in mobiler
   Reihenfolge im DOM laegen und der Desktop per grid-row/grid-column gebaut wuerde —
   bei fuenf optionalen Bausteinen muessten die Zeilennummern dynamisch vergeben
   werden. Fuer den Gewinn zu teuer. */
.atmos-verkauf-spalte--bild { order: -1; }

/* Bilder */
.atmos-verkauf-haupt { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 4; padding: 12px; border: 1px solid var(--av-linie); }
.atmos-verkauf-haupt img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.atmos-verkauf-auswahl { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; margin-top: 16px; }
.atmos-verkauf-mini {
  aspect-ratio: 3 / 4; padding: 4px; background: var(--av-papier); cursor: pointer;
  border: 1px solid var(--av-linie-blass); display: flex; align-items: center; justify-content: center;
  font-family: var(--av-serif); font-weight: 600; font-size: 18px; color: var(--av-dim);
}
.atmos-verkauf-mini img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.atmos-verkauf-mini[aria-current="true"] { border-color: var(--av-messing); }
.atmos-verkauf-mini:focus-visible { outline: 2px solid var(--av-messing-txt); outline-offset: 2px; }
.atmos-verkauf-anzahl { display: block; margin-top: 12px; font-family: var(--av-sans); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--av-dim); }

/* Kopf der rechten Spalte */
.atmos-verkauf-detail__eyebrow { font-family: var(--av-sans); font-weight: 500; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--av-messing-txt); }
.atmos-verkauf-detail__titel { margin: 16px 0 0; font-family: var(--av-serif); font-weight: 300; font-size: 48px; line-height: 1.1; color: var(--av-tinte); }
.atmos-verkauf-detail__titel em { font-style: italic; color: var(--av-messing); }
.atmos-verkauf-detail__unter { display: block; margin-top: 12px; font-family: var(--av-serif); font-style: italic; font-size: 19px; color: var(--av-dim); }

/* Preisbox */
.atmos-verkauf-preisbox { margin-top: 32px; border: 1px solid var(--av-linie); padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.atmos-verkauf-preisbox__zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.atmos-verkauf-preisbox__label { font-family: var(--av-sans); font-weight: 500; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--av-dim); }
.atmos-verkauf-preisbox__wert { font-family: var(--av-serif); font-weight: 600; font-size: 32px; color: var(--av-weinrot); }
/* Neupreis: dieselbe Zeilenform wie der Preis, eine Stufe leiser. Er steht als
   Einordnung da, nicht als Rabatt — deshalb kein Durchstreichen, kein Weinrot und
   ein knapper Abstand nach oben, damit die beiden Zeilen als EIN Block lesen.
   Die Preisbox hat gap:14px; die -8px holen die Zeile wieder an den Preis heran. */
.atmos-verkauf-preisbox__zeile--neben { margin-top: -8px; }
.atmos-verkauf-preisbox__wert--neben {
  font-family: var(--av-serif); font-weight: 600; font-size: 19px; color: var(--av-dim);
  font-variant-numeric: lining-nums tabular-nums;
}
/* Quelle und Stand: Fussnote unter dem Betrag, rechtsbuendig an derselben Kante.
   Getrennte Zeile, damit „Neupreis lt. Jaeger-LeCoultre-Liste · Stand 07/2026"
   auf schmalen Telefonen nicht in die Betragszeile hineinbricht. */
.atmos-verkauf-preisbox__quelle {
  margin-top: -10px; text-align: right;
  font-family: var(--av-serif); font-size: 13.5px; line-height: 1.4; color: var(--av-dim);
}
/* Der Steuersatz ist Kleingedrucktes: er muss dastehen, darf aber dem Preis und dem
   Knopf nicht die Aufmerksamkeit nehmen. Seit 2.6.0 steht hier nur noch er — die
   Versandangabe ist in den unteren Panelbereich gewandert. Die p+p-Regel bleibt als
   Vorsorge stehen, falls der Feed wieder eine zweite Zeile mitliefert. */
.atmos-verkauf-preisbox__klein { padding-top: 14px; border-top: 1px solid var(--av-linie-fein); }
.atmos-verkauf-preisbox__klein p {
  margin: 0; font-family: var(--av-serif); font-size: 14.5px; line-height: 1.45; color: var(--av-dim);
}
.atmos-verkauf-preisbox__klein p + p { margin-top: 7px; }

/* Der einzige gefuellte Knopf ausserhalb des Formulars — bewusst derselbe Ton wie
   „Anfrage senden", damit erkennbar ist, dass beide zum selben Ziel fuehren. */
.atmos-verkauf-cta {
  display: block; width: 100%; height: 50px; border: 0; border-radius: 0; cursor: pointer;
  background: var(--av-weinrot); color: #fff;
  font-family: var(--av-sans); font-weight: 500; font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; text-align: center;
}
.atmos-verkauf-cta:focus-visible { outline: 2px solid var(--av-messing-txt); outline-offset: 3px; }

.atmos-verkauf-detail__teaser { margin: 30px 0 0; font-family: var(--av-serif); font-size: 20px; line-height: 1.6; color: var(--av-tinte); max-width: 42ch; text-wrap: pretty; }

/* Rubrik innerhalb des Panels */
.atmos-verkauf-unterrubrik { display: flex; align-items: baseline; gap: 16px; margin-bottom: 16px; }
.atmos-verkauf-unterrubrik span:first-child { font-family: var(--av-sans); font-weight: 500; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--av-weinrot); }
.atmos-verkauf-unterrubrik i { flex: 1; height: 1px; background: var(--av-linie); }

/* Datentabelle — Zeile nur, wenn ein Wert vorliegt (kein „unbekannt") */
.atmos-verkauf-tabelle { margin-top: 30px; }
.atmos-verkauf-zeile { display: grid; grid-template-columns: 132px 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--av-linie-fein); }
.atmos-verkauf-zeile:last-child { border-bottom: 0; }
.atmos-verkauf-zeile__k { font-family: var(--av-sans); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--av-dim); padding-top: 5px; }
.atmos-verkauf-zeile__v { font-family: var(--av-serif); font-size: 18px; line-height: 1.45; color: var(--av-tinte); }

/* Zur Uhr (rechte Spalte oben) + unterer Bereich */
.atmos-verkauf-zuruhr { margin-top: 36px; }
/* Zwei gleiche Spalten: links die ausgefuehrten Arbeiten, rechts Garantie und
   Versand. Die alte 1fr/344px-Teilung liess die kurze Punkteliste ueber die halbe
   Panelbreite laufen. */
.atmos-verkauf-unten { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding: 20px 40px 52px; border-top: 1px solid var(--av-linie-fein); margin: 0 40px; }
.atmos-verkauf-fliess p { margin: 0 0 20px; font-family: var(--av-serif); font-size: 19px; line-height: 1.68; color: var(--av-tinte); max-width: 62ch; text-wrap: pretty; }
.atmos-verkauf-fliess p:last-child { margin-bottom: 0; }
.atmos-verkauf-arbeiten { display: flex; flex-direction: column; gap: 12px; }
.atmos-verkauf-arbeit { display: grid; grid-template-columns: 17px 1fr; gap: 8px; font-family: var(--av-serif); font-size: 17.5px; line-height: 1.48; color: var(--av-tinte); }
.atmos-verkauf-arbeit span:first-child { color: var(--av-messing); font-size: 11px; padding-top: 6px; }
.atmos-verkauf-garantie + .atmos-verkauf-garantie { margin-top: 34px; }
.atmos-verkauf-garantie p { margin: 0; font-family: var(--av-serif); font-size: 17px; line-height: 1.56; color: var(--av-tinte); }
.atmos-verkauf-garantie p + p { margin-top: 14px; font-style: italic; font-size: 16px; color: var(--av-dim); }

/* ── Anfrage-Formular ─────────────────────────────────────────────────── */
.atmos-verkauf-anfrage { background: var(--av-papier-2); border-top: 1px solid var(--av-linie); padding: 52px 40px 58px; }
.atmos-verkauf-anfrage__innen { max-width: 760px; display: flex; flex-direction: column; gap: 26px; }
.atmos-verkauf-anfrage__titel { margin: 12px 0 0; font-family: var(--av-serif); font-weight: 300; font-size: 34px; line-height: 1.14; color: var(--av-tinte); }
.atmos-verkauf-anfrage__intro { margin: 12px 0 0; font-family: var(--av-serif); font-size: 18.5px; line-height: 1.62; color: var(--av-tinte); max-width: 56ch; }

.atmos-verkauf-feldpaar { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.atmos-verkauf-feld { display: flex; flex-direction: column; gap: 9px; }
.atmos-verkauf-feld label { font-family: var(--av-sans); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--av-dim); }
.atmos-verkauf-feld input, .atmos-verkauf-feld textarea {
  width: 100%; background: var(--av-papier); border: 1px solid var(--av-linie); border-radius: 0;
  padding: 0 14px; height: 48px; font-family: var(--av-serif); font-size: 18px; color: var(--av-tinte);
}
.atmos-verkauf-feld textarea { min-height: 130px; height: auto; padding: 14px; line-height: 1.58; resize: vertical; }
/* Platzhalter bewusst nicht heller als --av-dim — sonst fällt der Kontrast unter AA. */
.atmos-verkauf-feld input::placeholder, .atmos-verkauf-feld textarea::placeholder { color: var(--av-dim); opacity: 1; }
.atmos-verkauf-feld input:focus, .atmos-verkauf-feld textarea:focus {
  border-color: var(--av-messing); outline: 2px solid rgba(168, 130, 60, .35); outline-offset: 2px;
}
.atmos-verkauf-feld--fehler label { color: var(--av-fehler); }
.atmos-verkauf-feld--fehler input, .atmos-verkauf-feld--fehler textarea { border-color: var(--av-fehler); }
.atmos-verkauf-feldfehler { font-family: var(--av-serif); font-size: 16px; color: var(--av-fehler); }
.atmos-verkauf-hint { font-family: var(--av-serif); font-style: italic; font-size: 16px; color: var(--av-dim); }
.atmos-verkauf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.atmos-verkauf-absenden { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding-top: 4px; }
/* Die einzige gefüllte Fläche im ganzen Abschnitt. */
.atmos-verkauf-knopf {
  height: 50px; padding: 0 34px; border: 0; border-radius: 0; cursor: pointer;
  background: var(--av-weinrot); color: #fff;
  font-family: var(--av-sans); font-weight: 500; font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
}
/* Beim Senden NICHT aufhellen — halbe Deckkraft unterschreitet den AA-Wert. */
.atmos-verkauf-knopf:disabled { cursor: default; }
.atmos-verkauf-knopf:focus-visible { outline: 2px solid var(--av-messing-txt); outline-offset: 3px; }
.atmos-verkauf-absenden__note { font-family: var(--av-serif); font-size: 16px; line-height: 1.5; color: var(--av-dim); max-width: 38ch; }

.atmos-verkauf-form--sendet .atmos-verkauf-feld { opacity: .6; }
.atmos-verkauf-fortschritt { height: 1px; background: var(--av-linie-fein); overflow: hidden; }
.atmos-verkauf-fortschritt i { display: block; height: 1px; width: 30%; background: var(--av-messing); animation: atmos-verkauf-lauf 1.1s ease-in-out infinite; }
@keyframes atmos-verkauf-lauf { 0% { margin-left: -30%; } 100% { margin-left: 100%; } }

.atmos-verkauf-dank { background: var(--av-papier); border: 1px solid var(--av-linie); padding: 44px 36px 48px; display: flex; flex-direction: column; gap: 14px; }
.atmos-verkauf-dank__titel { margin: 0; font-family: var(--av-serif); font-weight: 300; font-size: 30px; color: var(--av-tinte); }
.atmos-verkauf-dank p { margin: 0; font-family: var(--av-serif); font-size: 18.5px; line-height: 1.6; color: var(--av-tinte); }
.atmos-verkauf-dank__zurueck {
  align-self: flex-start; margin-top: 8px; background: none; border: 0; cursor: pointer; padding: 0 0 5px;
  font-family: var(--av-sans); font-weight: 500; font-size: 11px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--av-messing-txt); border-bottom: 1px solid var(--av-linie);
}

/* ── Mobil ────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .atmos-verkauf-grid { grid-template-columns: repeat(2, 1fr); gap: 44px 30px; }
  .atmos-verkauf-unten { grid-template-columns: 1fr; gap: 40px; padding: 20px 0 40px; margin: 0 24px; }
  .atmos-verkauf-detail__titel { font-size: 38px; }

  /* Einspaltig kippt die Leserichtung: die Bildspalte traegt auch „Das Exemplar" und
     stuende damit KOMPLETT vor Name und Preis — auf dem Telefon erschien der Uhrenname
     gemessen erst nach rund 1400 px Foto und Datentabelle. display:contents loest die
     beiden Spaltenhuellen auf, `order` sortiert die Bausteine danach neu:
     Name → Foto → Preis → Text → Daten. Die Abstaende kommen weiter aus den Margins
     der Bausteine selbst, deshalb gap: 0 — sonst zaehlte beides doppelt. */
  .atmos-verkauf-oben { grid-template-columns: 1fr; gap: 0; padding: 32px 24px 40px; }
  .atmos-verkauf-spalte--bild, .atmos-verkauf-spalte--info { display: contents; }
  .atmos-verkauf-detail__eyebrow { order: 1; }
  .atmos-verkauf-detail__titel   { order: 2; }
  .atmos-verkauf-detail__unter   { order: 3; }
  .atmos-verkauf-haupt           { order: 4; margin-top: 30px; }
  .atmos-verkauf-auswahl         { order: 5; }
  .atmos-verkauf-anzahl          { order: 6; }
  .atmos-verkauf-preisbox        { order: 7; }
  .atmos-verkauf-detail__teaser  { order: 8; }
  .atmos-verkauf-zuruhr          { order: 9; }
  .atmos-verkauf-tabelle         { order: 10; }

  /* Das Panel scrollt ueber 5000 px. Ohne festen Kopf ist der Schliessen-Knopf nach
     der ersten Wischbewegung weg — und ein Telefon hat keine Esc-Taste. */
  .atmos-verkauf-panel__kopf {
    position: sticky; top: 0; z-index: 3; background: var(--av-papier);
  }

  /* Ohne Deckel nimmt das 3:4-Bildfeld einspaltig die volle Panelbreite: auf dem
     iPad hochkant gemessen 671 × 895 px, Miniaturen 127 px breit — und die Preisbox
     rutschte damit auf 1376 px, also wieder dorthin, wo sie vor dem Umbau stand.
     452 px ist die Breite der Desktop-Bildspalte; auf dem Telefon (335 px) greift
     der Deckel nicht. Linksbuendig lassen — die Satzkante traegt das Layout.
     Die Preisbox gehoert mit in die Kolumne: liesse man sie voll laufen, stuende
     bei 768 px ein 452er Foto ueber einer 686 px breiten Box, in der „Preis" und
     Betrag per space-between 600 px auseinandergerissen wuerden — und der Knopf
     waere ein flaches Band. Teaser und Fliesstext haben ihre eigenen max-width in
     ch, die Datentabelle darf breit bleiben: zwei Spalten vertragen das. */
  .atmos-verkauf-haupt, .atmos-verkauf-auswahl, .atmos-verkauf-preisbox { max-width: 452px; }

  /* Kopf und Formular hingen auf 40 px fest, waehrend Inhalt und Fliesstext schon
     auf 24 px stehen — sichtbarer Kantenversatz genau dort, wo das Layout seine
     Ruhe aus einer durchgehenden Satzkante zieht. */
  .atmos-verkauf-panel__kopf { padding: 18px 24px; }
  .atmos-verkauf-anfrage { padding: 44px 24px 50px; }

  /* Fingerflaeche auf gut 44 px bringen, ohne die Linienfuehrung anzufassen: die
     Flaeche waechst im Pseudoelement, der sichtbare Strich bleibt am Text. */
  .atmos-verkauf-zu, .atmos-verkauf-mehr__link, .atmos-verkauf-dank__zurueck { position: relative; }
  .atmos-verkauf-zu::after, .atmos-verkauf-mehr__link::after, .atmos-verkauf-dank__zurueck::after {
    content: ''; position: absolute; inset: -15px -14px;
  }
}
@media (max-width: 767px) {
  .atmos-verkauf { padding: 44px 0 50px; }
  /* 20 px sind in einer 300-px-Spalte rund 28 Zeichen je Zeile — 18 px liest sich
     dort ruhiger, ohne dass der Absatz seinen Ton verliert. Linksbuendig, weil aus
     zwei balancierten Desktop-Zeilen hier acht bis zehn werden: zentriert franst
     dann jede Kante aus, und text-wrap: balance wirkt ab etwa sechs Zeilen ohnehin
     nicht mehr. Das Argument fuer die Zentrierung (die Theme-Ueberschrift darueber)
     dreht sich mobil um — dort ist die Ueberschrift kurz und der Absatz lang. */
  .atmos-verkauf-einleitung { font-size: 18px; text-align: left; }

  /* Auf 335 px sind alle Spalten gleich breit. Die Desktop-Staffelung (20/19/18.5/
     18/17.5/17 px) staffelt sich gegen 78ch/62ch/42ch — hier nebeneinander liest
     sie sich nicht mehr als Hierarchie, sondern als sechs zufaellig verschiedene
     Groessen. Mobil zwei Stufen: Erzaehltext 18, Belegtext 16.5. Das Kleingedruckte
     an der Preisbox bleibt als dritte Stufe bei 14.5. */
  .atmos-verkauf-detail__teaser,
  .atmos-verkauf-fliess p,
  .atmos-verkauf-anfrage__intro,
  .atmos-verkauf-dank p { font-size: 18px; }
  .atmos-verkauf-zeile__v,
  .atmos-verkauf-arbeit,
  .atmos-verkauf-garantie p { font-size: 16.5px; }
  /* Der Leer-Zustand stand als einziger Erzaehltext ausserhalb der Skala — und das
     ist ausgerechnet die Ansicht, die ein Besucher sieht, wenn der Feed schweigt. */
  .atmos-verkauf-leer__text { font-size: 18px; }
  /* 30 px waere mobil GROESSER als die Anfrage-Ueberschrift (28 px), die dieser Block
     ersetzt — beim Absenden waere die Ueberschrift also gewachsen statt
     zurueckzutreten. Am Desktop stimmt das Verhaeltnis (30 gegen 34) von selbst. */
  .atmos-verkauf-dank__titel { font-size: 26px; }
  .atmos-verkauf-grid { grid-template-columns: 1fr; gap: 30px; }
  .atmos-verkauf-rubrik { margin-bottom: 14px; }
  .atmos-verkauf-leiste { margin-bottom: 22px; gap: 10px 14px; }
  .atmos-verkauf-sortierung { gap: 10px 14px; }
  /* Gemessen bei 375 px: Beschriftung (72) + drei Knoepfe (114/130/93) + Abstaende
     ergeben 453 px gegen 335 px verfuegbar — es bricht ohnehin um. Mit Beschriftung
     landen „Hoechster Preis" und „Niedrigster Preis" auf VERSCHIEDENEN Zeilen, und
     genau die beiden soll man vergleichen. Ohne sie stehen sie nebeneinander
     (258 px) und nur „Neuzugaenge" rutscht. Der Name der Gruppe bleibt erhalten:
     aria-labelledby zeigt weiterhin auf dieses Element. */
  .atmos-verkauf-sortierung__label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin-right: 0;
  }
  /* Einspaltig richtet sich nichts mehr aneinander aus: die zwei fest reservierten
     Namenszeilen liessen unter kurzen Namen eine Luecke stehen und schnitten lange
     Namen ab. Beides faellt hier weg. */
  .atmos-verkauf-name { font-size: 24px; min-height: 0; display: block; overflow: visible; }
  .atmos-verkauf-overlay { padding: 0; }
  .atmos-verkauf-panel {
    max-width: none; border-left: 0; border-right: 0;
    max-height: 100vh; min-height: 100vh;
    max-height: 100dvh; min-height: 100dvh;
  }
  .atmos-verkauf-panel__kopf { padding: 14px 20px; }
  .atmos-verkauf-oben { padding-left: 20px; padding-right: 20px; }
  .atmos-verkauf-unten { margin: 0 20px; padding-left: 0; padding-right: 0; }
  .atmos-verkauf-detail__titel { font-size: 32px; }
  /* overscroll-behavior-x: ohne das loest ein Wisch am Ende der Reihe auf iOS die
     Zurueck-Geste aus — und schliesst damit die Uhr, statt weiterzublaettern. */
  .atmos-verkauf-auswahl {
    display: flex; overflow-x: auto; gap: 9px; padding-bottom: 4px;
    overscroll-behavior-x: contain;
  }
  .atmos-verkauf-mini { flex: 0 0 52px; }
  .atmos-verkauf-zeile { grid-template-columns: 100px 1fr; gap: 12px; }
  .atmos-verkauf-anfrage { padding: 36px 20px 44px; }
  .atmos-verkauf-feldpaar { grid-template-columns: 1fr; gap: 18px; }
  .atmos-verkauf-anfrage__titel { font-size: 28px; }
  /* Der Absendeknopf ist auf dem Telefon der Abschluss der Seite, nicht eine
     Schaltflaeche neben anderen — volle Breite, Hinweis darunter. */
  .atmos-verkauf-knopf { width: 100%; }
  .atmos-verkauf-absenden { gap: 16px; }
}

/* Die Kurzfassung haengt nicht an der Breite, sondern am Geraet: „Esc" ist auf jedem
   Tablet ohne Tastatur eine Anweisung ins Leere, auch auf einem breiten. pointer:
   coarse trifft genau das — auf einem Rechner mit Touchscreen bleibt der Zeiger
   `fine`, weil dort die Maus das primaere Eingabegeraet ist. */
@media (max-width: 767px), (pointer: coarse) {
  .atmos-verkauf-breit { display: none; }
  .atmos-verkauf-schmal { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .atmos-verkauf *, .atmos-verkauf *::before, .atmos-verkauf *::after {
    transition: none !important; animation: none !important;
  }
}