/* ==============================================================================================
   abendmode.css — die Abendmode-Seite (AP-Abendmode, Schritt 6)

   Gehoert zu resources/views/template-abendmode_seite.blade.php.
   Grundlage: documentation/Entwurf-Abendmode-3.html

   JEDER SELEKTOR BEGINNT MIT .am — OHNE AUSNAHME.
   Diese Datei ist eigenstaendig und hat KEINE SCSS-Quelle. `sass` ist auf diesem Server nicht
   installiert, und `npm run build-css` uebersetzte den gesamten Ordner (Grundregel 10).
   Dieselbe Bauform wie designer-seite.css, ueber-uns.css, verteilerseite.css und wholesale.css.

   WARUM NICHT store-seite.css MITLADEN
   An dieser Datei haengen 24 Store-Seiten, Wholesale, Ueber uns und Designer. Sie zu erweitern
   hiesse, vier fremde Vorlagen anzufassen und in allen vieren die `?v=`-Kennung hochzuzaehlen.
   Diese Seite zeigt ausserdem etwas anderes: 9:16-Videokacheln, 4:5-Paare und 2:3-Modelle --
   drei Seitenverhaeltnisse, die store-seite.css nicht kennt.

   ⚠ DIE `?v=`-KENNUNG IN DER VORLAGE MUSS BEI JEDER AENDERUNG HIER HOCHGEZAEHLT WERDEN.
   nginx liefert diese Datei mit `Cache-Control: public, max-age=31536000, immutable` aus --
   ohne neue Kennung behaelt jeder wiederkehrende Besucher bis zu einem Jahr die alte Fassung.
   Stand: ?v=1.7

   ⚠ SCHRIFTSCHNITTE SIND EIGENE FAMILIEN, KEIN font-weight.
   Der Entwurf setzt Jost mit `font-weight:200/300`. Dieses Projekt hat Overpass, und dort ist
   jeder Schnitt eine eigene @font-face-Familie: "Overpass-Thin", "-Light", "-Regular",
   "-Medium". Ein `font-weight: 200` schaltet NICHTS um -- es laesst den Browser den geladenen
   Schnitt kuenstlich verzerren. Deshalb steht hier ueberall die Familie.

   ⚠ Overpass laeuft rund 6,4 % breiter als Jost. Diese Datei arbeitet deshalb durchweg mit
   relativen Massen und `clamp()`; feste px-Breiten fuer Textkaesten gibt es bewusst keine.
   ============================================================================================== */

.am {
    --am-ink:   #14100E;
    --am-paper: #FFFFFF;
    --am-shell: #F4F2F0;
    --am-line:  #DDD9D5;
    --am-muted: #6E6A66;
    --am-pad:   clamp(1.25rem, 5vw, 4rem);
    --am-max:   1180px;

    font-family: "Overpass-Light", sans-serif;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--am-ink);
    background: var(--am-paper);
    -webkit-font-smoothing: antialiased;

    /* Ausgleich fuer die feste Kopfzeile. `.header` ist projektweit `position: fixed` und steht
       damit ausserhalb des Textflusses; jede bestehende Seite haelt den Platz darunter ueber
       page.css frei (`.section`: 7vw, unter 1400px 100px). Diese Vorlage laedt page.css
       bewusst nicht -- ohne diesen Ausgleich liegt die Brotkrume hinter Logo und Menueschalter.
       Dieselben Werte wie page.css und store-seite.css, damit der Abstand oben ueberall gleich
       ist. Die Kopfzeile ist auf dem Telefon rund 90px hoch. */
    padding-top: 100px;
}

/* Der Umschaltpunkt ist 1400px und nicht 1200px: header.css wechselt genau dort die Hoehe der
   Kopfzeile (`.allHeader` bekommt 25px Polster, `.menuBtn` wird sichtbar). Ein anderer Wert
   waere entweder zu klein oder liesse eine Luecke. */
@media (min-width: 1401px) {
    .am {
        padding-top: 7vw;
    }
}

/* ---------- Ruecksetzungen: nur innerhalb von .am ----------
   Bootstrap-Reboot und global.css bringen eigene Abstaende, Farben und Listenpunkte mit.
   Hier wird ausschliesslich zurueckgesetzt, was in diesen Abschnitten wirklich vorkommt.

   DIE RESETS STEHEN IN :where(), UND ZWAR ABSICHTLICH — wie in store-seite.css seit dem
   2026-08-06. `:where()` zaehlt nicht zur Spezifitaet: `:where(.am) h2` liegt bei (0,0,1), und
   jede spaetere Regel dieser Datei schlaegt sie ohne !important. Stuende hier `.am h2`, laege
   der Reset bei (0,1,1) und gewaenne gegen `.am-weg h3`. */
:where(.am) h1,
:where(.am) h2,
:where(.am) h3,
:where(.am) p,
:where(.am) figure {
    margin: 0;
    padding: 0;
}

:where(.am) a {
    color: inherit;
    text-decoration: none;
}

.am img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ---------- Rahmen ---------- */
.am-wrap {
    max-width: var(--am-max);
    margin: 0 auto;
    padding-left: var(--am-pad);
    padding-right: var(--am-pad);
}

.am-schmal {
    max-width: 800px;
}

/* DREI KLASSEN OHNE EIGENE REGEL, UND DAS IST ABSICHT: `am-kopf`, `am-paare` und
   `am-modelle` stehen in der Vorlage als Marken am jeweiligen <section>. Ihren Abstand
   bekommen sie aus `.am section` darunter, eine eigene Gestaltung brauchen sie heute nicht.
   Sie stehen da, damit ein spaeterer Eingriff einen Angriffspunkt hat, ohne die Vorlage
   anzufassen. `am-wege-band` ist die einzige der vier mit einer eigenen Regel (Hintergrund).
   Wer die Datei gegen die Vorlage prueft, findet sie als "benutzt, aber ohne Regel" -- das
   ist kein Befund.

   Alle vier Abschnitte dieser Seite sind <section> -- `.am section` deckt sie ab. Die
   Klassennamen zusaetzlich aufzufuehren waere Redundanz, die beim naechsten Abschnitt
   vergessen wird. */
.am section {
    padding-top: clamp(2.2rem, 4vw, 3.4rem);
    padding-bottom: clamp(2.2rem, 4vw, 3.4rem);
}

/* ---------- Schrift ---------- */
.am h1 {
    font-family: "Overpass-Thin", sans-serif;
    font-size: clamp(2rem, 4.6vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
}

.am h2 {
    font-family: "Overpass-Thin", sans-serif;
    font-size: clamp(1.35rem, 2.6vw, 1.85rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.am h3 {
    font-family: "Overpass-Regular", sans-serif;
    font-size: 1.0625rem;
    line-height: 1.4;
}

.am p + p {
    margin-top: 1rem;
}

.am-eyebrow {
    display: block;
    font-family: "Overpass-Regular", sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--am-muted);
    margin-bottom: 1.1rem;
}

.am-strich {
    width: 44px;
    height: 1px;
    background: var(--am-ink);
    margin: 1.4rem 0;
}

/* ---------- Brotkrume ---------- */
.am-crumb {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--am-muted);
    padding-top: 1.4rem;
}

.am-crumb a:hover {
    color: var(--am-ink);
}

.am-crumb span {
    margin: 0 0.45em;
}

.am-crumb [aria-current="page"] {
    margin-right: 0;
}

/* ---------- Bildkaesten ----------
   Der Kasten haelt das Seitenverhaeltnis, das Bild fuellt ihn. `aspect-ratio` am Kasten und
   nicht am <img>: die Bilder tragen ihre echten Masse als width/height (das kann 1080x1620
   sein, wenn ein Bestandsmedium keine 2:3-Ableitung hat) -- ohne den Kasten wuerde die Reihe
   dann ungleich hoch. */
.am-bild {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--am-shell);
    border: 1px solid var(--am-line);
}

.am-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- Die drei Videos ----------
   Am Rechner drei nebeneinander, auf dem Telefon eine wischbare Reihe mit Einrastpunkten --
   wie im Entwurf. KEINE Slider-Bibliothek: `scroll-snap` leistet das in CSS, und Swiper waere
   68 KB fuer eine Reihe aus drei Kacheln. */
.am-videos {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
}

@media (min-width: 900px) {
    .am-videos {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.2rem;
    }
}

@media (max-width: 899px) {
    /* ⚠ EIN VIDEO FUELLT DIE BREITE, kein Rand des naechsten -- Entscheidung des
       Auftraggebers vom 2026-08-29. Bis dahin standen hier 78 % mit Vorschau auf die
       naechste Kachel; jetzt ist eine Kachel genau eine Bildschirmbreite.

       DESHALB KEIN SEITENPOLSTER an dieser Reihe: Die negativen Aussenabstaende ziehen sie
       auf volle Bildschirmbreite, und `flex: 0 0 100%` misst sich am Elternteil. Bliebe das
       Polster stehen, waere jede Kachel um 2 x var(--am-pad) schmaler als der Bildschirm --
       und genau der Rand des naechsten Videos, der wegsollte, waere wieder da.

       Die Reihe traegt `scroll-snap-align: start` statt `center`: bei voller Breite sind
       beide gleichwertig, `start` ist aber robuster, wenn das letzte Element schmaler
       ausfaellt. */
    .am-videos {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 0;
        padding-bottom: 0;
        margin-left: calc(-1 * var(--am-pad));
        margin-right: calc(-1 * var(--am-pad));
        padding-left: 0;
        padding-right: 0;
        /* Die native Bildlaufleiste stoert bei formatfuellenden Kacheln. */
        scrollbar-width: none;
    }

    .am-videos::-webkit-scrollbar {
        display: none;
    }

    .am-videos .am-video {
        flex: 0 0 100%;
        scroll-snap-align: start;
    }
}

/* ---------- Punkte unter der Videoreihe ----------
   ⚠ NICHT aus dem Bestand uebernommen, sondern nachgebaut -- und das ist eine Entscheidung,
   keine Bequemlichkeit. Die Punkte der Startseite sind `swiper-pagination-bullet`: Markup,
   Rundung, Anordnung und die Klasse fuer den aktiven Punkt kommen aus **Swiper**; home.css
   setzt nur Groesse und Farbe darueber (12-15 px, #ddd gegen #363636 bzw. #fff). Sie
   mitzunehmen hiesse, 68 KB JS und 13 KB CSS zu laden, damit drei Punkte erscheinen -- auf
   einer Seite, die ihre beiden Reihen bewusst ohne Bibliothek loest.

   Uebernommen ist deshalb das AUSSEHEN (12 px, #ddd/#363636), nicht die Mechanik. */
.am-punkte {
    display: flex;
    justify-content: center;
    gap: 0.55rem;
    margin-top: 0.9rem;
}

/* Am Rechner stehen alle drei Videos nebeneinander -- dann zeigen Punkte nichts an.

   ⚠ `:not(.am-punkte-immer)`: Die Modellreihe braucht ihre Punkte in JEDER Breite, denn
   rund 25 Modelle passen nirgends vollstaendig hinein -- anders als die drei Videos. Der
   Ausschluss steht hier und nicht als zweite Regel mit `!important` weiter unten: so bleibt
   eine Stelle, an der ueber das Ausblenden entschieden wird. */
@media (min-width: 900px) {
    .am-punkte:not(.am-punkte-immer) {
        display: none;
    }
}

.am-punkt {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ddd;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s;
}

.am-punkt-aktiv {
    background: var(--am-ink);
}

.am-video {
    position: relative;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: var(--am-shell);
    border: 1px solid var(--am-line);
}

.am-video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- Bild und Text nebeneinander ---------- */
.am-paar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.8rem;
    align-items: center;
}

@media (min-width: 900px) {
    .am-paar {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }

    /* Paar 2 steht spiegelverkehrt: das Bild rueckt nach rechts. Das ist die einzige
       Auswirkung von `am-paar-rechts` und der Grund, warum die Vorlage dafuer kein Feld hat --
       es ist Gestaltung, keine Redaktion.

       ⚠ `order` verschiebt nur die Darstellung, nicht die Vorlesereihenfolge. Bild und Text
       stehen im Quelltext in derselben Folge wie bei Paar 1; ein Screenreader liest bei beiden
       Paaren zuerst das Bild und dann den Text. Das ist beabsichtigt. */
    .am-paar-rechts .am-paar-bild {
        order: 2;
    }
}

.am-paar + .am-paar {
    margin-top: clamp(3rem, 6vw, 5rem);
}

.am-paar-bild {
    aspect-ratio: 4 / 5;
}

.am-paar-text .am-eyebrow {
    margin-bottom: 0.9rem;
}

.am-paar-text h2 + p {
    margin-top: 1.1rem;
}

/* Der weiterfuehrende Verweis unter dem Text steht etwas weiter ab als in einer Weg-Kachel:
   dort schliesst er eine kurze Kachel ab, hier haengt er unter zwei Absaetzen Fliesstext.
   Die Gestalt selbst kommt aus der gemeinsamen Regel weiter unten. */
.am-paar-text .am-paar-link {
    margin-top: 1.6rem;
}

/* ---------- Mehr Modelle: EINE durchgehende Reihe ----------
   ⚠ KEIN RASTER PLUS SLIDER MEHR. Bis zum 2026-08-29 standen hier zwei Bausteine: `.am-drei`
   als Raster fuer die ersten drei und `.am-slider` fuer den Rest -- so zeichnet es der
   Entwurf. Entscheidung des Auftraggebers vom 2026-08-29: "Also ein Slider, der drei
   gleichzeitig zeigt, nicht zwei getrennte Bloecke." Beide Klassen sind ersatzlos entfallen;
   wer sie in einem aelteren Stand sucht, findet sie in der Git-Geschichte.

   DIE BREITE IST GERECHNET, NICHT GESCHAETZT. `--am-luecke` ist der Abstand zwischen zwei
   Kacheln; bei drei sichtbaren liegen ZWEI davon dazwischen, bei zweien einer. Deshalb
   `calc((100% - 2 * var(--am-luecke)) / 3)` und nicht etwa 33 % -- mit 33 % waere die dritte
   Kachel um die Luecken zu breit und ragte aus dem Bild.

   Bezugsgroesse ist der Inhaltskasten der Reihe: die negativen Aussenabstaende ziehen sie an
   die Bildschirmkanten, das Polster stellt den Inhaltsrand wieder her. Damit stehen am
   Rechner genau drei Kacheln zwischen den Raendern -- und die vierte beginnt dahinter. */
.am-reihe {
    --am-luecke: 1rem;

    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--am-luecke);
    padding-bottom: 1rem;
    margin-top: 2rem;
    margin-left: calc(-1 * var(--am-pad));
    margin-right: calc(-1 * var(--am-pad));
    padding-left: var(--am-pad);
    padding-right: var(--am-pad);
}

/* ---------- Bildlaufleiste, Punkte und Maus-Ziehen der Modellreihe ----------
   ⚠ BEIDE KLASSEN SETZT DAS SKRIPT, NICHT DIE VORLAGE. Das ist der ganze Trick: laeuft
   kein JavaScript, bleibt die native Bildlaufleiste stehen und die Reihe ist bedienbar wie
   bisher. Stuende `scrollbar-width: none` fest im Stylesheet, waere die Reihe ohne Skript
   weder zu ziehen noch zu ueberblicken -- die Punkte kaemen ja auch nicht.

   Die Videoreihe darf ihre Leiste fest verbergen (weiter oben), weil dort eine Kachel die
   volle Breite fuellt und das Wischen auf dem Telefon geschieht. Hier wird am Rechner
   bedient, und dort ist die Leiste bis zum Beweis des Gegenteils die einzige Anzeige. */
.am-reihe-ohne-leiste {
    padding-bottom: 0;
    scrollbar-width: none;
}

.am-reihe-ohne-leiste::-webkit-scrollbar {
    display: none;
}

.am-reihe-ziehbar {
    cursor: grab;
}

.am-reihe-greift {
    cursor: grabbing;
    /* Ohne das faerbt der Zug die Bildunterschriften der Nachbarkacheln blau ein. */
    user-select: none;
}

/* Ein Bild in einem Ziehbereich darf nicht selbst ziehbar sein -- sonst startet der Browser
   sein eigenes Bild-Ziehen und der Griff bricht nach wenigen Pixeln ab. Das Skript faengt
   `dragstart` zusaetzlich ab; diese Regel ist die Fassung fuer den Fall, dass es nicht
   laeuft, und kostet nichts. */
.am-reihe img {
    -webkit-user-drag: none;
    user-drag: none;
}

.am-reihe .am-bild {
    /* Auf dem Telefon weniger als drei -- 62 % zeigen eine Kachel ganz und die naechste
       angeschnitten. Der Anschnitt ist die Ansage, dass es weitergeht; anders als bei den
       Videos, wo genau eine die Breite fuellen soll. */
    flex: 0 0 62%;
    /* ⚠ DAS FORMAT DER FOTOS, NICHT 2:3 (seit 2026-10-23). Die Modellbilder sind 736 x 1456 und
       werden als ORIGINAL ausgeliefert (Vorlage, Abschnitt 3) -- die 2:3-Ableitungen schnitten
       ihnen oben und unten je 12 % ab. Kasten = Bildformat, also schneidet `cover` nichts mehr.
       Ein spaeteres Foto in anderem Format fuellt den Kasten weiter vollstaendig (`cover`) und
       verliert dann an den Raendern -- neue Modellbilder deshalb ebenfalls in 736 x 1456 (1:2). */
    aspect-ratio: 736 / 1456;
    scroll-snap-align: start;
}

@media (min-width: 700px) {
    .am-reihe {
        --am-luecke: 1.2rem;
    }

    .am-reihe .am-bild {
        flex: 0 0 calc((100% - var(--am-luecke)) / 2);
    }
}

@media (min-width: 1100px) {
    .am-reihe {
        --am-luecke: 1.4rem;
    }

    .am-reihe .am-bild {
        flex: 0 0 calc((100% - 2 * var(--am-luecke)) / 3);
    }
}

/* ---------- Die Schaltflaeche unter der Modellreihe ----------
   Seit dem 2026-08-29. Auftraggeber: "als Schaltflaeche mit 'Mehr auf Instagram'".

   ⚠ WARUM SIE NICHT `.am-weg a` MITBENUTZT. Die Verweise der Wege weiter und der
   Bild-Text-Paare teilen sich eine Regel und sind unterstrichene Kleinschrift -- ein VERWEIS
   im Fliesstext. Hier ist ausdruecklich eine SCHALTFLAECHE bestellt: eine Flaeche, die man
   trifft, ohne sie zu suchen. Beides in eine Regel zu zwingen hiesse, die eine Gestalt mit
   Ausnahmen von der anderen abzuleiten -- und beim naechsten Eingriff zoege eine die andere
   mit.

   ⚠ GEMEINSAM BLEIBT DIE SCHRIFTSPRACHE: dieselbe Groesse, dieselbe Laufweite, dieselbe
   Grossschreibung wie die Verweise. Die Seite fuehrt damit EIN Alphabet fuer Handlungen und
   zwei Gestalten -- Flaeche und Unterstrich -- statt zweier Alphabete.

   ⚠ `text-transform: uppercase` RECHNET NACH DER SPRACHE DES DOKUMENTS. Auf `lang="tr"` wird
   aus einem `i` ein `İ`. Die tuerkische Beschriftung ist `Instagram'da daha fazlası` und
   traegt kein kleines `i` -- geprueft, nicht angenommen. Wer die Beschriftung aendert, prueft
   das erneut; die CSS kann es nicht erzwingen.

   ⚠ KEINE FESTE BREITE. Overpass laeuft rund 6,4 % breiter als die Entwurfsschrift, und die
   sechs Beschriftungen sind zwischen 17 und 25 Zeichen lang. Die Flaeche waechst mit dem
   Text; `min-width` haelt die kuerzeste davon ab, gedrungen zu wirken. */
.am-knopf-reihe {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.am-knopf {
    display: inline-block;
    min-width: 15rem;
    padding: 0.95rem 2.2rem;
    background: var(--am-ink);
    color: var(--am-paper);
    border: 1px solid var(--am-ink);
    text-align: center;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    /* Die Reset-Regel `:where(.am) a { color: inherit }` liegt bei (0,0,1) und wird von dieser
       Regel (0,1,0) geschlagen -- die Farbe oben steht also wirklich. Vermerkt, weil genau
       diese Reihenfolge auf den Store-Seiten schon einmal andersherum lag. */
    transition: background 0.2s, color 0.2s;
}

.am-knopf:hover {
    background: transparent;
    color: var(--am-ink);
}

/* Auf dem Telefon fuellt die Flaeche die Spalte -- eine mittige Schaltflaeche mit Luft links
   und rechts wirkt dort verloren, und der Daumen trifft die volle Breite sicherer.

   ⚠ 699px UND NICHT EIN EIGENER WERT: genau dort wechselt die Modellreihe von einer auf zwei
   Kacheln (`.am-reihe .am-bild`). Ein eigener Haltepunkt fuer die Schaltflaeche liesse sie in
   einem schmalen Streifen anders aussehen als die Reihe, unter der sie steht. Diese Datei
   kennt vier Haltepunkte -- 700, 900, 1100, 1400 -- und bekommt hier keinen fuenften. */
@media (max-width: 699px) {
    .am-knopf {
        width: 100%;
        min-width: 0;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ---------- Wege weiter ---------- */
.am-wege-band {
    background: var(--am-shell);
}

.am-wege {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

@media (min-width: 800px) {
    .am-wege {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }
}

/* ---------- Vier Wege ----------
   ⚠ DIE KLASSE HAENGT AN DER ANZAHL, NICHT AM HALTEPUNKT. `am-wege-vier` setzt die Vorlage
   erst ab dem vierten Eintrag. Wuerde das Raster fest auf 2x2 und 4 umgestellt, saehen die
   HEUTIGEN drei Wege schlechter aus als jetzt: bei 800-1099 px stuenden zwei oben und einer
   allein darunter. So bleibt der Bestand unveraendert, bis der vierte Eintrag da ist.

   Warum nicht vier Spalten schon ab 800 px: je Spalte blieben rund 180 px fuer Ueberschrift,
   Text und Verweis. Zwischen 800 und 1099 px stehen deshalb zwei mal zwei. */
@media (min-width: 800px) and (max-width: 1099px) {
    .am-wege-vier {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    .am-wege-vier {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
}

.am-weg p {
    margin-top: 0.6rem;
    color: var(--am-muted);
}

/* EIN VERWEIS, EINE GESTALT. `.am-paar-link` steht unter dem Text eines Bild-Text-Paares und
   sieht aus wie die Verweise der Wege weiter -- deshalb teilen sich beide diese Regel, statt
   dass die Seite zwei Verweissprachen fuehrt. Wer eine der beiden aendern will, trennt sie
   vorher; ein Nachziehen in zwei Bloecken laeuft erfahrungsgemaess auseinander.

   ⚠ `text-transform: uppercase` rechnet nach der Sprache des Dokuments. Auf der tuerkischen
   Fassung wird aus `i` ein `İ` -- richtig fuer tuerkische Woerter, aber ein Grund, hier keine
   fremdsprachige Beschriftung stehen zu lassen. Die Beschriftung gehoert in die Sprache der
   Seite, und das ist eine redaktionelle Auflage, die CSS nicht erzwingen kann. */
.am-weg a,
.am-paar-link {
    display: inline-block;
    margin-top: 1rem;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--am-line);
    padding-bottom: 0.25rem;
}

.am-weg a:hover,
.am-paar-link:hover {
    border-bottom-color: var(--am-ink);
}

/* ---------- Umrandete Schaltflaeche (seit 2026-10-23) ----------
   Auftraggeber: die Verweise unter Paar 1 und in den Wegen weiter „zu schwach“ — sie werden
   SCHALTFLAECHEN, aber umrandet, damit „Mehr auf Instagram“ (gefuellt, .am-knopf) der EINE
   Hauptknopf der Seite bleibt. Genau umgekehrt zum gefuellten: durchsichtig mit dunklem Rahmen,
   beim Darueberfahren gefuellt. Vorbild: .sto-btn-offen der Store-Seiten.

   ⚠ SPEZIFITAET. Die Verweisregel `.am-weg a, .am-paar-link` (direkt darueber, 0,1,1 bzw. 0,1,0)
   steht HINTER `.am-knopf` und setzt Unterstrich, padding-bottom und margin-top. Deshalb hier
   `.am-knopf.am-knopf-offen` (0,2,0) — und Polster und Rahmen VOLLSTAENDIG neu, sonst bliebe
   unten der schmale Unterstrich-Abstand von 0.25rem stehen. Die Schrift (Groesse, Laufweite,
   Grossschreibung) kommt unveraendert aus .am-knopf; .am-knopf selbst bleibt unberuehrt.
   Breite: am PC natuerlich (inline-block ohne Angabe), unter 700px voll — die Telefonregel von
   .am-knopf gilt auch hier. (Am 23.10. hielt eine eigene `width: auto` den Paar-Verweis auch auf dem
   Telefon schmal; auf Wunsch des Auftraggebers am 24.10. ersatzlos gestrichen.) */
.am-knopf.am-knopf-offen {
    padding: 0.95rem 2.2rem;
    background: transparent;
    color: var(--am-ink);
    border: 1px solid var(--am-ink);
}

.am-knopf.am-knopf-offen:hover {
    background: var(--am-ink);
    color: var(--am-paper);
}

/* ---------- Wege weiter: Schaltflaechen unten buendig, kachelbreit ----------
   Die Kacheln sind im Grid schon gleich hoch (Grid-Elemente strecken sich); nur ihr Inhalt
   floss von oben, und die Schaltflaeche stand unter Texten verschiedener Laenge auf
   verschiedener Hoehe. Als Spalte mit `margin-top: auto` sitzt sie unten. Kachelbreit, weil
   die Kachel bei 800px nur 213px breit ist — die Mindestbreite 15rem (240px) von .am-knopf
   ragte sonst hinaus. Der feste Abstand ueber der Schaltflaeche entfaellt durch `auto`; ihn
   leistet jetzt der Abstand unter dem Text. */
.am-weg {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.am-weg p {
    margin-bottom: 1.4rem;
}

.am-weg .am-knopf-offen {
    margin-top: auto;
    width: 100%;
    min-width: 0;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* ---------- Bewegung nur, wenn gewuenscht ----------
   ⚠ DIESE REGEL LEISTET WENIGER, ALS IHR NAME VERSPRICHT, und das gehoert hierhin statt in
   eine Fussnote: Sie nimmt dem Punktewechsel den Uebergang -- mehr nicht.

   DIE VIDEOS LAUFEN WEITER. Sie tragen `autoplay` im Markup (Entscheidung des Auftraggebers
   vom 2026-08-29: "Wie ein laufender Rahmen"), und dagegen kommt weder CSS noch ein Skript an,
   ohne genau jenes Pausieren einzufuehren, das nicht gewollt ist. Bis zum selben Tag loeste
   ein Skript das Abspielen aus und konnte die Einstellung abfragen; seit das Markup es
   ausloest, kann es das nicht mehr.

   Die Startseite verhaelt sich seit jeher genauso. Wer das aendern will, aendert die
   Entscheidung, nicht diese Datei. */
@media (prefers-reduced-motion: reduce) {
    .am-punkt {
        transition: none;
    }
}