/* ═══════════════════════════════════════════════════════════════════
   WEATHERHUNTERS — Shop-Oberfläche (Bildarchiv, Kasse, Konto)

   Eigenes Stylesheet, damit die Verkaufsseiten wie ein Shop wirken und
   nicht wie ein Formularsatz. Lädt nach dashboard.css und übersteuert
   dort, wo die alten Regeln zu eng waren.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --shop-gold:      #E8C96B;
    --shop-gold-soft: rgba(232, 201, 107, .14);
    --shop-ink:       #f2f2f4;
    --shop-dim:       rgba(255, 255, 255, .55);
    --shop-faint:     rgba(255, 255, 255, .35);
    --shop-line:      rgba(255, 255, 255, .10);
    --shop-line-hi:   rgba(255, 255, 255, .18);
    --shop-card:      rgba(255, 255, 255, .038);
    --shop-card-hi:   rgba(255, 255, 255, .06);
    --shop-good:      #7fd18d;
    --shop-warn:      #E8C96B;
    --shop-bad:       #e88c8c;
    --shop-r:         14px;
    --shop-r-sm:      10px;
    --shop-shadow:    0 10px 30px rgba(0, 0, 0, .35);
}


/* ─────────────── Seitenkopf ─────────────── */

.shop-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin: 0 0 1.4rem;
}

.shop-hero h1 {
    margin: 0 0 .3rem;
    letter-spacing: .02em;
}

.shop-hero p {
    margin: 0;
    color: var(--shop-dim);
    font-size: .95rem;
}

.shop-hero-actions {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}


/* ─────────────── Schaltflächen ─────────────── */

.sbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .62rem 1.1rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s ease, background .15s ease, border-color .15s ease;
    white-space: nowrap;
}

.sbtn:active { transform: translateY(1px); }

.sbtn-primary {
    background: var(--shop-gold);
    color: #16171a;
}
.sbtn-primary:hover { background: #f0d580; }

.sbtn-ghost {
    background: transparent;
    border-color: var(--shop-line-hi);
    color: var(--shop-ink);
}
.sbtn-ghost:hover { border-color: var(--shop-gold); color: var(--shop-gold); }

.sbtn-quiet {
    background: transparent;
    color: var(--shop-dim);
    padding: .5rem .7rem;
}
.sbtn-quiet:hover { color: var(--shop-ink); }

.sbtn-block { width: 100%; }
.sbtn-lg { padding: .8rem 1.5rem; font-size: 1rem; }
.sbtn[disabled] { opacity: .4; cursor: not-allowed; }


/* ─────────────── Karten ─────────────── */

.shop-card {
    background: var(--shop-card);
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-r);
    padding: 1.3rem 1.4rem;
    margin-bottom: 1.2rem;
}

.shop-card > h2 {
    margin: 0 0 .2rem;
    font-size: 1.15rem;
    letter-spacing: .04em;
}

.shop-card > h2 + p { margin-top: 0; color: var(--shop-dim); font-size: .9rem; }


/* ─────────────── Filterleiste ─────────────── */

.shop-filters {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(20, 21, 24, .92);
    backdrop-filter: blur(12px);
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-r);
    padding: .9rem 1rem;
    margin-bottom: 1.2rem;
}

.shop-filter-row {
    display: flex;
    gap: .7rem;
    align-items: center;
    flex-wrap: wrap;
}

.shop-search {
    position: relative;
    flex: 1 1 18rem;
    min-width: 12rem;
}

.shop-search input {
    width: 100%;
    padding: .68rem .9rem .68rem 2.4rem;
    font-size: 16px;
    color: var(--shop-ink);
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--shop-line-hi);
    border-radius: 999px;
    transition: border-color .15s;
}

.shop-search input:focus { outline: none; border-color: var(--shop-gold); }

.shop-search svg {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--shop-faint);
    pointer-events: none;
}

.shop-filters select,
.shop-filters input[type="date"] {
    padding: .6rem .8rem;
    font-size: .9rem;
    color: var(--shop-ink);
    /* background-color statt der Kurzform: `background:` wuerde das
       Hintergrundbild loeschen — und damit den Pfeil der Auswahl. */
    background-color: rgba(255, 255, 255, .05);
    border: 1px solid var(--shop-line-hi);
    border-radius: 999px;
    cursor: pointer;
}

/* Pfeil ausdruecklich, damit man der Auswahl ansieht, dass sie
   aufklappt — und mit Platz dafuer. */
.shop-filters select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff88' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    background-size: 15px;
    padding-right: 2.1rem;
}

.shop-filters select:focus,
.shop-filters input[type="date"]:focus { outline: none; border-color: var(--shop-gold); }
.shop-filters select:focus { background-color: rgba(255, 255, 255, .08); }

.shop-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .9rem;
    border: 1px solid var(--shop-line-hi);
    border-radius: 999px;
    font-size: .88rem;
    color: var(--shop-dim);
    cursor: pointer;
    user-select: none;
    transition: all .15s;
}
.shop-chip input { position: absolute; opacity: 0; pointer-events: none; }
.shop-chip:hover { color: var(--shop-ink); }
.shop-chip:has(input:checked) {
    background: var(--shop-gold-soft);
    border-color: var(--shop-gold);
    color: var(--shop-gold);
}

.shop-result-count {
    margin-left: auto;
    color: var(--shop-dim);
    font-size: .88rem;
    white-space: nowrap;
}


/* ─────────────── Umschalter Verkauf / Community ─────────────── */

.shop-tabs {
    display: inline-flex;
    padding: .25rem;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--shop-line);
    border-radius: 999px;
    gap: .2rem;
}

.shop-tab {
    padding: .48rem 1.1rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--shop-dim);
    font: inherit;
    font-size: .9rem;
    cursor: pointer;
    transition: all .15s;
}
.shop-tab:hover { color: var(--shop-ink); }
.shop-tab.is-active { background: var(--shop-gold); color: #16171a; font-weight: 500; }


/* ─────────────── Produktraster ─────────────── */

.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.1rem;
}

.shop-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--shop-card);
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-r);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.shop-tile:hover {
    transform: translateY(-3px);
    border-color: var(--shop-line-hi);
    box-shadow: var(--shop-shadow);
}

.shop-tile-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #15171a;
    overflow: hidden;
}

.shop-tile-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.shop-tile:hover .shop-tile-media img { transform: scale(1.05); }

.shop-badge {
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .02em;
    backdrop-filter: blur(6px);
    background: rgba(10, 11, 13, .7);
    color: var(--shop-ink);
}
.shop-badge-gold { background: rgba(232, 201, 107, .92); color: #16171a; }
.shop-badge-good { background: rgba(127, 209, 141, .9); color: #10231a; }

.shop-tile-body {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .8rem .9rem 1rem;
    flex: 1;
}

.shop-tile-title {
    font-size: .96rem;
    font-weight: 500;
    line-height: 1.35;
}

.shop-tile-meta {
    font-size: .8rem;
    color: var(--shop-dim);
    line-height: 1.45;
}

.shop-tile-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-top: auto;
    padding-top: .55rem;
}

.shop-price {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--shop-gold);
}
.shop-price small { font-size: .72rem; font-weight: 400; color: var(--shop-faint); }


/* ─────────────── Fotofeed (Bildarchiv) ───────────────

   Die Trefferliste unter der Archivkarte läuft als eine einzige
   Spalte: ein Beitrag unter dem anderen, in Lesebreite mittig
   gestellt. Das Kachelraster darüber (.shop-grid/.shop-tile) bleibt
   unangetastet — es trägt weiterhin andere Shopseiten.

   Der Beitrag ist als Ganzes kein Link. Klickbar sind zwei Stellen:
   der Weg zum Profil im Kopf und das Bild darunter. Über dem Bild
   liegt nichts.

   Zum Bildformat: Das Foto behält sein natürliches Seitenverhältnis
   (height: auto) und wird erst bei sehr hohen Hochformaten auf 80vh
   gedeckelt; dann legt object-fit: contain es mittig auf dunklen
   Grund. Bewusst KEIN cover: Wetterfotos leben von der ganzen
   Wolkenszene — vom Amboss oben bis zum Horizont unten. Ein fester
   Ausschnitt würde genau die Ränder abschneiden, die das Bild
   ausmachen, und aus einem Panorama einen Streifen machen. Das
   Kachelraster durfte beschneiden, weil dort die Rasterordnung
   wichtiger war als das einzelne Bild; im Feed ist es umgekehrt. */

.arch-feed {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

/* Die Karte selbst kommt aus dem Designsystem: .glass bringt Grund,
   Rahmen, goldene Oberkante, Radius und Schatten mit. Hier steht nur
   noch, was der Feed zusaetzlich braucht — Aufbau und der saubere
   Beschnitt des Bildes an den Ecken. */

.feed-post {
    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* ── Endloser Feed: das Sparen uebernimmt der Browser (ToDo #164,
          30.08.2026) ──

       Seit der Feed nicht mehr blaettert, sondern waechst, stehen
       nach einer Weile mehrere hundert Beitraege im Dokument. Ohne
       Zutun bedeutet das mehrere hundert Mal Layout, Stil und
       Zeichnen bei jedem Scrollen — auf dem Handy der Punkt, an dem
       es zaeh wird.

       content-visibility: auto sagt dem Browser: Was weit ausserhalb
       des Bildes liegt, brauchst du nicht auszurechnen. Er
       ueberspringt fuer diese Beitraege Layout und Zeichnen und holt
       es nach, sobald sie in die Naehe kommen. Das ist dasselbe
       Ergebnis, das eine Virtualisierung von Hand liefert — nur ohne
       ihren Preis: Die Beitraege BLEIBEN im DOM. Anker, Rueck-Sprung
       aus der Lightbox, Suchen im Text und der Tieflink auf einen
       Kommentar funktionieren deshalb unveraendert.

       contain-intrinsic-size ist die Hoehe, mit der ein
       uebersprungener Beitrag gerechnet wird — ohne sie fiele die
       Bildlaufleiste bei jedem Sprung in sich zusammen. `auto` davor
       ist der wichtige Teil: Der Browser merkt sich die ZULETZT
       GEMESSENE echte Hoehe und nimmt den Schaetzwert nur, solange
       er noch keine hat. Ein Beitrag mit aufgeklappten Kommentaren
       behaelt damit seine wirkliche Groesse.

       620 px ist die Schaetzung fuer die Spalte am Rechner:
       Kopfzeile ~56 px, Bild im 3:2-Format bei 640 px Breite
       ~427 px, Aktionszeile mit Unterschrift ~140 px. */

    content-visibility: auto;
    contain-intrinsic-size: auto 620px;
}

/* ── Kopfzeile ── */

.feed-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .7rem .9rem;
}

/* Im Kopf steht der Namensweg nicht mitten im Fließtext, sondern
   allein in seiner Zeile — hier darf er ein Flex-Kasten sein und den
   32er-Avatar sauber neben den Namen setzen. */

.feed-user,
a.feed-user {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    color: var(--shop-ink);
}

.feed-user > .cavatar {
    width: 32px;
    height: 32px;
    font-size: .72rem;
    vertical-align: baseline;
    margin-right: 0;
}

.feed-user > .wh-namelink-txt {
    font-weight: 500;
    font-size: .92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Bild ── */

.feed-media {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    appearance: none;
    background: #0d0e10;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

/* Seit dem 26.08.2026 (Perf-Welle 2) steckt das Beitragsbild in einem
   <picture>: WebP als <source>, das JPEG als <img>-Rückfall.
   <picture> ist von Haus aus ein Inline-Element — ohne diese Zeile
   säße unter dem Bild die Grundlinie der Zeile als heller Streifen,
   und die Breitenangabe des <img> bezöge sich auf eine Hülle, die
   selbst nicht die volle Breite hat. */

.feed-media picture {
    display: block;
    width: 100%;
}

.feed-media img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
    margin: 0 auto;
}

/* ── Fußzeile ── */

.feed-foot {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .75rem .9rem .9rem;
}

/* Die Aktionszeile steht ganz oben in der Fusszeile, direkt unter dem
   Bild. Sie traegt heute nur das Herz — als Zeile angelegt ist sie
   trotzdem, damit sich Spaeteres danebenstellen kann, ohne dass der
   Aufbau wackelt. */

.feed-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .15rem;
}

/* Ungeliked ist das Herz nur ein goldener Umriss, innen leer. Damit
   ist es ein Angebot und keine Behauptung — gefuellt wird es erst,
   wenn jemand es wirklich so meint. */

.feed-like {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem 0;
    border: 0;
    background: none;
    color: var(--shop-dim);
    font: inherit;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.feed-like svg {
    width: 24px;
    height: 24px;
    fill: transparent;
    stroke: var(--shop-gold);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform-origin: center;
    transition: fill .18s ease, stroke .18s ease, transform .18s ease;
}

.feed-like:hover svg { transform: scale(1.1); }

/* Geliked: satt rot, gefuellt UND umrandet. Ein nur halb gefuelltes
   Herz sieht nach Zwischenstand aus, und ein Like ist keiner. */

.feed-like.is-liked svg {
    fill: #E0344A;
    stroke: #E0344A;
}

.feed-like.is-liked .feed-like-count { color: #E0344A; }

/* Der Klopfer haengt an .is-pop, NICHT an .is-liked: Beim Aufbau der
   Seite sollen schon geliked Bilder ihr rotes Herz sofort tragen, aber
   nicht alle gleichzeitig aufpoppen — das waere beim Scrollen ein
   Herzregen. archive-map.js setzt .is-pop nur beim echten Klick und
   nimmt sie am Animationsende wieder ab; dadurch feuert sie bei JEDEM
   neuen Like erneut. */

.feed-like.is-pop svg {
    animation: likepop .45s cubic-bezier(.2, 1.6, .4, 1);
}

@keyframes likepop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.35); }
    60%  { transform: scale(.92); }
    100% { transform: scale(1); }
}

/* Die Zahl bleibt dezent und verschwindet bei null — eine "0" unter
   jedem frischen Bild liest sich wie ein Urteil. Tabellenziffern,
   damit die Zeile beim Zaehlen nicht springt. */

.feed-like-count {
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
}

.feed-like-count[hidden] { display: none; }


/* ── "Gefaellt Anna und 4 weiteren" (25.08.2026) ──
   Die Zeile ist ein Knopf und muss trotzdem wie Text aussehen: kein
   Rahmen, kein Hintergrund, linksbuendig in der Spalte. Sie liegt
   dicht unter dem Herzen — beides gehoert zusammen, waehrend Titel
   und Ort darunter eine eigene Gruppe bilden. */

.feed-likedby {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0 0 .15rem;
    border: 0;
    background: none;
    color: var(--shop-ink);
    font: inherit;
    font-size: .86rem;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.feed-likedby[hidden] { display: none; }

.feed-likedby-name { font-weight: 600; }

.feed-likedby:hover .feed-likedby-name,
.feed-likedby:focus-visible .feed-likedby-name {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(232, 201, 107, .6);
}


/* ── Bildunterschrift: Name, Text, Hashtags ──
   Gekuerzt wird mit -webkit-line-clamp auf zwei Zeilen. Die Eigenschaft
   traegt zwar bis heute ein Herstellerpraefix, ist aber in allen
   Browsern zu Hause, die dieses Portal bedient — und sie ist die
   einzige Kuerzung, die MEHRERE Zeilen kann. Aufgeklappt (.is-open)
   faellt der Deckel weg; die Hoehe wechselt bewusst ohne Uebergang,
   weil eine Hoehen-Animation auf unbekannte Zielhoehe entweder
   ruckelt oder gar nicht laeuft. */

.feed-caption {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
    margin-bottom: .1rem;
}

.feed-caption-txt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .88rem;
    line-height: 1.45;
    color: var(--shop-ink);
    overflow-wrap: anywhere;
}

.feed-caption-txt.is-open {
    display: block;
    -webkit-line-clamp: none;
    line-clamp: none;
    overflow: visible;
}

.feed-caption-user { font-weight: 600; }

/* Der Name ist seit ToDo #170 (30.08.2026) ein Link aufs Profil.

   Er steht mitten im Satz, direkt vor der Beschreibung — deshalb
   KEINE Dauer-Unterstreichung wie am .wh-namelink im Kopf des
   Beitrags: Eine Linie unter dem ersten Wort jeder Bildunterschrift
   zerschnitte den Absatz optisch in zwei Teile. Die Optik bleibt
   also exakt die von vorher (fett, Textfarbe), und erst beim
   Darueberfahren zeigt sich, dass hier ein Weg liegt — in Gold, mit
   dem das Portal ueberall auf Anklickbares zeigt.

   :focus-visible ist gleichberechtigt dabei: Wer mit der Tastatur
   durch den Feed geht, muss den Namen genauso finden. */

a.feed-caption-user {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: color .15s;
}

a.feed-caption-user:hover,
a.feed-caption-user:focus-visible {
    color: var(--shop-gold);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Die Hashtags in Gold — dieselbe Farbe, mit der das Portal ueberall
   sagt "hier steht eine Einordnung", vom Filter-Chip bis zum Preis. */

.feed-tag { color: var(--shop-gold); }

.feed-more {
    padding: 0;
    border: 0;
    background: none;
    color: var(--shop-dim);
    font: inherit;
    font-size: .82rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.feed-more:hover { color: var(--shop-gold); }

.feed-more[hidden] { display: none; }


/* ── Das Liker-Fenster ──
   Die dunkle Ebene kommt von .arch-lb (dieselbe Klasse steht am
   Element), hier steht nur die Karte darin. Sie ist schmal: Eine
   Namensliste in Bildschirmbreite waere eine Wueste aus Weissraum
   neben zwanzig Zeichen Text. */

.feed-likers-box {
    position: relative;
    width: min(420px, 92vw);
    max-height: min(70vh, 560px);
    display: flex;
    flex-direction: column;
    background: var(--wh-surface);
    border: 1px solid var(--wh-line);
    border-radius: var(--wh-r);
    overflow: hidden;
}

.feed-likers-title {
    margin: 0;
    padding: 1rem 3.25rem 1rem 1.1rem;
    border-bottom: 1px solid var(--wh-line);
    font-size: 1rem;
    font-weight: 600;
    color: var(--wh-text);
}

.feed-likers-list {
    display: flex;
    flex-direction: column;
    padding: .35rem 0;
    overflow-y: auto;
}

.feed-liker {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem 1.1rem;
    color: var(--wh-text);
    text-decoration: none;
}

.feed-liker:hover { background: rgba(255, 255, 255, .05); }

.feed-liker > .cavatar,
.feed-liker > .wh-presence-wrap > .cavatar {
    width: 34px;
    height: 34px;
    font-size: .76rem;
    vertical-align: baseline;
    margin-right: 0;
}

.feed-liker-name {
    font-size: .92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ── Melden: die Flagge in der Aktionszeile (25.08.2026) ──
   Sie sitzt am rechten Rand derselben Zeile wie das Herz —
   `margin-left:auto` schiebt sie dorthin, ohne dass die Zeile dafuer
   ein Platzhalterelement braucht. Kleiner und blasser als das Herz:
   Der Meldeweg muss leicht zu finden sein (Art. 16 DSA), aber er ist
   nicht das Angebot dieser Seite. */

.feed-flag {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: .2rem;
    border: 0;
    background: none;
    color: var(--shop-dim);
    font: inherit;
    line-height: 1;
    cursor: pointer;
    opacity: .55;
    transition: opacity .15s ease, color .15s ease;
    -webkit-tap-highlight-color: transparent;
}

.feed-flag svg { width: 17px; height: 17px; }

.feed-flag:hover,
.feed-flag:focus-visible { opacity: 1; color: var(--shop-gold); }


/* ── Kommentare (25.08.2026) ──
   Die Zeile "Alle 7 Kommentare anzeigen" sieht aus wie der
   Aufklapper der Beschreibung darueber (.feed-more) — sie tut ja auch
   dasselbe. Der Kasten darunter erscheint erst auf Klick; ausgeklappt
   traegt er eine feine Trennlinie nach oben, damit das Gespraech
   sichtbar unter dem Beitrag beginnt und nicht in ihm. */

.feed-comments {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    margin-top: .15rem;
}

.feed-comments-toggle {
    padding: 0;
    border: 0;
    background: none;
    color: var(--shop-dim);
    font: inherit;
    font-size: .82rem;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.feed-comments-toggle:hover { color: var(--shop-gold); }

.feed-comments-box {
    width: 100%;
    padding-top: .5rem;
    border-top: 1px solid var(--wh-line);
}

.feed-comments-box[hidden] { display: none; }

.feed-comment-list {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

/* Eine Zeile je Kommentar: Name und Text laufen im selben Fluss —
   wie bei der Bildunterschrift —, das Symbol steht rechts daneben.
   `align-items: baseline` waere hier falsch: Der Mini-Avatar im
   Namen ist hoeher als die Schrift und zoege die Grundlinie schief. */

.feed-comment {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    font-size: .88rem;
    line-height: 1.45;
}

.feed-comment-user {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--shop-ink);
    font-weight: 600;
}

.feed-comment-user > .cavatar {
    width: 22px;
    height: 22px;
    font-size: .6rem;
    vertical-align: baseline;
    margin-right: 0;
}

.feed-comment-txt {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--shop-ink);
    overflow-wrap: anywhere;
    white-space: pre-line;
}

/* Papierkorb oder Flagge, je nachdem was der Server erlaubt. Blass,
   bis die Maus daraufliegt — an einer Liste aus zwanzig Kommentaren
   waeren zwanzig kraeftige Symbole eine Reihe Ausrufezeichen. */

.feed-comment-act {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: .1rem;
    border: 0;
    background: none;
    color: var(--shop-dim);
    line-height: 1;
    cursor: pointer;
    opacity: .45;
    transition: opacity .15s ease, color .15s ease;
    -webkit-tap-highlight-color: transparent;
}

.feed-comment-act svg { width: 15px; height: 15px; }

.feed-comment:hover .feed-comment-act,
.feed-comment-act:focus-visible { opacity: 1; }

.feed-comment-act:hover { color: var(--shop-gold); }

/* Eingabe: ein Feld, ein Knopf, eine Zeile. Das Feld waechst nicht
   von selbst mit — ein Kommentar ist ein Satz, und wer mehr schreibt,
   scrollt im Feld. Eine mitwachsende Hoehe wuerde beim Tippen die
   halbe Seite unter sich verschieben. */

.feed-comment-form {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    margin-top: .6rem;
}

.feed-comment-field {
    flex: 1 1 auto;
    min-width: 0;
    max-height: 6rem;
    padding: .45rem .6rem;
    border: 1px solid var(--wh-line);
    border-radius: var(--wh-r-input);
    background: rgba(255, 255, 255, .03);
    color: var(--shop-ink);
    font: inherit;
    font-size: .86rem;
    line-height: 1.4;
    resize: vertical;
}

.feed-comment-field:focus {
    outline: none;
    border-color: var(--shop-gold);
}

.feed-comment-send {
    flex: 0 0 auto;
    padding: .45rem .2rem;
    border: 0;
    background: none;
    color: var(--shop-gold);
    font: inherit;
    font-size: .86rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.feed-comment-send:hover { text-decoration: underline; }

/* Der Weg zur Anmeldung steht dort, wo fuer Mitglieder das Feld ist —
   gleiche Stelle, gleiche Groesse, andere Auskunft. */

.feed-comment-login {
    display: inline-block;
    margin-top: .6rem;
    color: var(--shop-gold);
    font-size: .84rem;
}

.feed-comment-msg {
    margin: .5rem 0 0;
    color: #e8a2a2;
    font-size: .82rem;
}

.feed-comment-msg[hidden] { display: none; }


/* ── Der Melden-Dialog ──
   Aufbau wie das Liker-Fenster: dunkle Ebene aus .arch-lb, schmale
   Karte darin. Er ist ein Formular und kein Text, deshalb hat er
   unten einen Knopf und keine Liste. */

.feed-report-box {
    position: relative;
    width: min(420px, 92vw);
    max-height: min(80vh, 620px);
    display: flex;
    flex-direction: column;
    padding: 0 1.1rem 1.1rem;
    background: var(--wh-surface);
    border: 1px solid var(--wh-line);
    border-radius: var(--wh-r);
    overflow-y: auto;
}

.feed-report-title {
    margin: 0 0 .8rem;
    padding: 1rem 2.5rem 0 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--wh-text);
}

.feed-report-body {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.feed-report-body[hidden] { display: none; }

.feed-report-reason {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .2rem;
    color: var(--wh-text);
    font-size: .9rem;
    cursor: pointer;
}

.feed-report-reason input { accent-color: var(--shop-gold); }

.feed-report-note {
    margin-top: .7rem;
    padding: .5rem .6rem;
    border: 1px solid var(--wh-line);
    border-radius: var(--wh-r-input);
    background: rgba(255, 255, 255, .03);
    color: var(--wh-text);
    font: inherit;
    font-size: .86rem;
    line-height: 1.4;
    resize: vertical;
}

.feed-report-note:focus {
    outline: none;
    border-color: var(--shop-gold);
}

.feed-report-msg {
    margin: .9rem 0 0;
    color: var(--wh-text);
    font-size: .88rem;
    line-height: 1.45;
}

.feed-report-msg[hidden] { display: none; }

.feed-report-send { margin-top: 1rem; }

.feed-report-send[hidden] { display: none; }


/* ── Der Anwesenheitspunkt am Avatar (25.08.2026) ──
   Er kann NICHT in den Avatar hinein: .cavatar ist ein Kreis mit
   overflow:hidden, alles am Rand wuerde abgeschnitten. Deshalb
   bekommt der Avatar eine Huelle, sobald ein Punkt gewuenscht ist,
   und der Punkt sitzt als Geschwister daneben — halb ueber dem Rand,
   unten rechts, wie das Kamera-Abzeichen am eigenen Profil.

   Die Huelle erbt bewusst `flex: 0 0 auto`: In den Mitgliederkarten
   trug diese Eigenschaft bisher der Avatar selbst, und ohne sie
   wuerde der Kreis bei langen Namen zusammengedrueckt.

   Die dunkle Kante ist keine Zierde, sondern die Trennung: Ohne sie
   verschwaende ein gruener Punkt auf einem gruenen Foto. Sie
   uebernimmt den Ton von .arch-glyph, das an den Kartenmarkern
   dieselbe Aufgabe hat.

   Rot statt "kein Punkt" fuer offline ist eine Entscheidung des
   Betreibers: Ein fehlender Punkt liesse offen, ob jemand offline ist
   oder ob die Anzeige nur nichts weiss. */

.wh-presence-wrap {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    line-height: 0;
}

.wh-presence {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid #16171c;
    box-sizing: content-box;
}

.wh-presence.is-online  { background: #3dd68c; }
.wh-presence.is-offline { background: #c2606a; }

/* Am grossen Profilavatar (96 px) darf der Punkt mitwachsen — sonst
   waere er dort ein Staubkorn. */

.cavatar-xl + .wh-presence {
    width: 15px;
    height: 15px;
    right: 4px;
    bottom: 4px;
}

/* Am Mini-Avatar (20 px) sitzt er knapp ueber dem Rand: Innen waere
   er groesser als das Gesicht darunter. */

.cavatar-xs + .wh-presence {
    width: 8px;
    height: 8px;
    right: -2px;
    bottom: -2px;
    border-width: 1.5px;
}

/* Im Feedkopf traegt der Avatar 32 px (siehe .feed-user oben). Mit
   Huelle greift der bisherige Kindselektor nicht mehr — die Groesse
   wird deshalb hier noch einmal gesetzt, statt den alten Selektor zu
   lockern und damit ueberall zu wirken. */

.feed-user > .wh-presence-wrap > .cavatar {
    width: 32px;
    height: 32px;
    font-size: .72rem;
    vertical-align: baseline;
    margin-right: 0;
}

.feed-user > .wh-presence-wrap > .cavatar-xs + .wh-presence {
    width: 10px;
    height: 10px;
    right: 0;
    bottom: 0;
    border-width: 2px;
}

/* Wer Bewegung abbestellt hat, bekommt den Farbwechsel — der traegt
   die Aussage —, aber keinen Sprung. */

@media (prefers-reduced-motion: reduce) {
    .feed-like svg { transition: fill .18s ease, stroke .18s ease; }
    .feed-like:hover svg { transform: none; }
    .feed-like.is-pop svg { animation: none; }
}

.feed-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--shop-ink);
}

.feed-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .6rem;
}

/* Im Feed sind die Platzhalter so breit wie ein Beitrag — das alte
   4:3 der Kachel wäre hier ein Klotz. */

.arch-feed .shop-skeleton { aspect-ratio: 16 / 10; }


/* ═══════════ Der Fotofeed am Handy (ToDo #162, 30.08.2026) ═══════════

   Am Rechner bleibt der Feed, wie er war: eine Spalte aus Karten, die
   im Seitenraster steht. Am Handy ist die Karte aber ein Rahmen um
   etwas, das ohnehin die ganze Breite hat — und jeder Millimeter
   Rahmen geht dem Bild ab. Deshalb hier der Aufbau, den jeder von
   Instagram kennt: schmale Kopfzeile, Bild von Kante zu Kante,
   darunter dicht Herz, Beschreibung und Kommentare, und statt eines
   Rahmens nur eine dünne Linie zum nächsten Beitrag.

   640 px ist die Grenze, die shop.css durchgehend benutzt — und
   zugleich genau die Breite, ab der die Feedspalte (max-width: 640px)
   überhaupt noch Luft an den Seiten hätte.

   ALLE Regeln hängen an .arch-feed bzw. an body:has(.arch-feed).
   Das ist keine Ziererei: .feed-* steht auch in der Lightbox des
   Bildarchivs (.arch-lb-actions .feed-actions weiter unten), und dort
   soll sich nichts ändern. */

@media (max-width: 640px) {

    /* ── Kopfzeile: klein und einzeilig ──
       „Foto Feed" in 2.6rem Bebas Neue ist am Rechner ein Schild über
       der Seite; am Handy ist es eine Bauchbinde, die eine halbe
       Bildhöhe frisst. Der Untertext erklärt darunter, was man
       darunter ohnehin sieht — er entfällt am Handy ganz. Überschrift
       und Bildarchiv-Knopf teilen sich stattdessen EINE Zeile. */

    body:has(.arch-feed) .shop-hero {
        flex-wrap: nowrap;
        align-items: center;
        gap: .6rem;
        margin-bottom: .6rem;
    }

    body:has(.arch-feed) .shop-hero > div { min-width: 0; }

    body:has(.arch-feed) .shop-hero h1 {
        margin: 0;
        font-size: 1.3rem;
        letter-spacing: .04em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body:has(.arch-feed) .shop-hero p { display: none; }

    body:has(.arch-feed) .shop-hero-actions { flex-wrap: nowrap; flex: none; }

    body:has(.arch-feed) .shop-hero-actions .sbtn {
        padding: .34rem .7rem;
        font-size: .78rem;
        white-space: nowrap;
    }

    /* ── Randlos ──
       .wh-page trägt ab 1024 px ein Seitenpolster von --wh-3; der Feed
       nimmt es sich mit demselben Wert wieder. Über die Variable und
       nicht über einen festen Pixelwert, damit beides zusammen bleibt,
       falls das Polster einmal wächst. */

    .arch-feed {
        width: auto;
        max-width: none;
        margin-left: calc(var(--wh-3) * -1);
        margin-right: calc(var(--wh-3) * -1);
        gap: 0;
    }

    /* ── Aus der Karte wird ein Beitrag ──
       Kein Grund, kein Rahmen, kein Radius, kein goldener Deckel und
       kein Schatten (alles aus .glass) — nur die Linie nach unten.
       Beim letzten Beitrag fällt auch die weg: Über dem Blätterwerk
       steht sonst ein Strich ohne Gegenüber. */

    .arch-feed .feed-post {
        background: none;
        border: 0;
        border-bottom: 1px solid var(--wh-line);
        border-radius: 0;
        box-shadow: none;

        /* Am Handy ist die Spalte schmaler und der Beitrag damit
           kuerzer — die Schaetzhoehe fuer content-visibility geht
           mit (ToDo #164): Kopfzeile ~44 px, Bild im 3:2-Format bei
           ~390 px Breite ~260 px, dichte Aktionszeile ~130 px.

           Ein zu grosser Schaetzwert waere hier besonders
           unangenehm: Die Bildlaufleiste behauptete eine Laenge, die
           der Feed nicht hat, und der Daumen liefe beim Scrollen
           gegen einen Boden, der staendig nachgibt. */

        contain-intrinsic-size: auto 440px;
    }

    .arch-feed .feed-post:last-child { border-bottom: 0; }

    .arch-feed .shop-skeleton { border-radius: 0; }

    /* ── Kopfzeile des Beitrags: Avatar und Name, sonst nichts ──
       Das Aufnahmedatum steht hier bewusst nicht (Betreiber-Anweisung
       vom 25.08.2026, siehe tile() in archive-map.js) — ein Wetterfoto
       ist keine Nachricht, die veraltet. Wer es sucht, findet es in
       der Lightbox. */

    .arch-feed .feed-head { padding: .45rem .75rem; }

    .arch-feed .feed-user > .cavatar,
    .arch-feed .feed-user > .wh-presence-wrap > .cavatar {
        width: 28px;
        height: 28px;
    }

    /* ── Das Bild trägt die Seite ──
       max-height: 80vh war die Bremse für das Panorama in einer
       schmalen Spalte am Rechner. Am Handy ist die Spalte der ganze
       Bildschirm; die Deckelung würde jetzt seitlich weiße Ränder
       erzeugen statt sie zu verhindern. */

    .arch-feed .feed-media img { max-height: none; }

    /* ── Alles unter dem Bild rückt zusammen ──
       Reihenfolge bleibt: Herz → „gefällt X" → Beschreibung →
       Kommentare → Titel → Ort. Nur die Abstände schrumpfen. */

    .arch-feed .feed-foot {
        padding: .45rem .75rem .6rem;
        gap: .1rem;
    }

    .arch-feed .feed-actions {
        gap: 1rem;
        margin-bottom: .05rem;
    }

    .arch-feed .feed-likedby { margin-bottom: .05rem; }
    .arch-feed .feed-caption { margin-bottom: 0; }
    .arch-feed .feed-comments { margin-top: .05rem; }

    /* Titel und Ort treten zurück: Im Insta-Aufbau ist die
       Beschreibung der Text des Beitrags, der Portaltitel nur noch
       eine Fußnote dazu. */

    .arch-feed .feed-title { font-size: .9rem; }
    .arch-feed .feed-line { font-size: .82rem; }

    /* Das Blätterwerk steht wieder im Polster der Seite — es gehört
       zur Seite, nicht zum Bild.

       .cpager kam mit ToDo #164 dazu: Seit dem endlosen Feed ist das
       Blätterwerk ein Satz echter Links im Designsystem-Aussehen
       (für Google und für den Aufruf ohne JavaScript) statt zweier
       Knöpfe im Shop-Aussehen. Die alte Regel bleibt daneben stehen
       — .shop-pager gibt es weiterhin im Handelsteil. */

    body:has(.arch-feed) .shop-pager,
    body:has(.arch-feed) .cpager { margin-top: 1.2rem; }

    /* Auch die Schlusszeile steht im Seitenpolster: Der randlose
       Insta-Aufbau gilt den Bildern, nicht dem Text darunter. */

    body:has(.arch-feed) .feed-more { padding-left: var(--wh-3); padding-right: var(--wh-3); }

}


/* ─────────────── Karte ─────────────── */

.shop-map-wrap {
    border-radius: var(--shop-r);
    overflow: hidden;
    border: 1px solid var(--shop-line);
}

#archMap { height: min(58vh, 480px); background: #0e1013; }

.arch-cluster {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    font-weight: 600;
    font-size: .85rem;
    color: #14161a;
    background: rgba(232, 201, 107, .94);
    border: 2px solid rgba(255, 255, 255, .6);
    box-shadow: 0 3px 14px rgba(0, 0, 0, .5);
    transition: transform .15s;
}
.arch-cluster:hover { transform: scale(1.08); }
.arch-cluster.c-m  { background: rgba(233, 172, 84, .95); }
.arch-cluster.c-l  { background: rgba(228, 132, 72, .95); color: #fff; }
.arch-cluster.c-xl { background: rgba(212, 88, 74, .96); color: #fff; }

.arch-spot {
    position: relative;
    width: 52px; height: 39px;
    box-sizing: border-box;
    border-radius: 6px;
    border: none;
    /* Der Goldring ist bewusst KEIN border, sondern ein Schatten-Ring:
       er folgt der Rundung exakt und bleibt auch bei krummen
       Rendergroessen (Vorfahren-Transforms) an jeder Kante gleich dick. */
    box-shadow: 0 0 0 2px rgba(232, 201, 107, .95), 0 3px 14px rgba(0, 0, 0, .55);
    background: #1a1c1e;
    overflow: visible;
    transition: transform .15s;
}
.arch-spot:hover { transform: scale(1.1); }
.arch-spot img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 6px;   /* identisch zur Kachel - keine aufblitzenden Ecken */
    display: block;
}


/* ─────────────── Detailseite ─────────────── */

.shop-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
    gap: 1.4rem;
    align-items: start;
}

.shop-detail-media {
    border-radius: var(--shop-r);
    overflow: hidden;
    border: 1px solid var(--shop-line);
    background: #101215;
}
.shop-detail-media img { width: 100%; height: auto; display: block; }
.shop-detail-note {
    padding: .7rem .95rem;
    font-size: .82rem;
    color: var(--shop-dim);
    border-top: 1px solid var(--shop-line);
}

.shop-side { display: flex; flex-direction: column; gap: 1.1rem; position: sticky; top: 1rem; }

.shop-specs {
    display: grid;
    grid-template-columns: minmax(7rem, auto) 1fr;
    gap: .45rem 1.1rem;
    font-size: .9rem;
    margin: .9rem 0 0;
}
.shop-specs dt { color: var(--shop-dim); }
.shop-specs dd { margin: 0; }

.shop-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .9rem;
}
.shop-keyword {
    padding: .22rem .6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--shop-line);
    font-size: .76rem;
    color: var(--shop-dim);
}


/* ─────────────── Lizenzrechner ─────────────── */

.shop-licence { display: flex; flex-direction: column; gap: .85rem; }

.shop-field { display: flex; flex-direction: column; gap: .3rem; }
.shop-field > span { font-size: .82rem; color: var(--shop-dim); }

.shop-field select,
.shop-field input[type="text"] {
    padding: .65rem .8rem;
    font-size: 16px;
    color: var(--shop-ink);
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--shop-line-hi);
    border-radius: var(--shop-r-sm);
}
.shop-field select:focus,
.shop-field input:focus { outline: none; border-color: var(--shop-gold); }

.shop-pricebox {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .6rem;
    padding: .85rem 1rem;
    border-radius: var(--shop-r-sm);
    background: var(--shop-gold-soft);
    border: 1px solid rgba(232, 201, 107, .3);
}
.shop-pricebox strong { font-size: 1.55rem; color: var(--shop-gold); line-height: 1; }
.shop-pricebox span { font-size: .78rem; color: var(--shop-dim); }

.shop-trust {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    margin-top: .3rem;
    font-size: .82rem;
    color: var(--shop-dim);
}
.shop-trust div { display: flex; align-items: center; gap: .5rem; }
.shop-trust svg { width: 15px; height: 15px; color: var(--shop-good); flex: none; }


/* ─────────────── Warenkorb ─────────────── */

.shop-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
    gap: 1.4rem;
    align-items: start;
}

.shop-line {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 1rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--shop-line);
    align-items: start;
}
.shop-line:last-of-type { border-bottom: 0; padding-bottom: .2rem; }
.shop-line-media img { width: 120px; height: 86px; object-fit: cover; border-radius: var(--shop-r-sm); display: block; }
.shop-line-body { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.shop-line-title { font-weight: 500; text-decoration: none; color: inherit; }
.shop-line-title:hover { color: var(--shop-gold); }
.shop-line-opts { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .15rem; }
.shop-line-opts select {
    padding: .38rem .6rem;
    font-size: .84rem;
    color: var(--shop-ink);
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--shop-line-hi);
    border-radius: 999px;
}
.shop-line-right { text-align: right; display: flex; flex-direction: column; gap: .5rem; align-items: flex-end; }
.shop-line-price { font-weight: 600; font-size: 1.02rem; }

.shop-summary { position: sticky; top: 1rem; }
.shop-sum-rows { display: grid; grid-template-columns: 1fr auto; gap: .45rem 1rem; font-size: .92rem; margin: 0 0 1rem; }
.shop-sum-rows dt { color: var(--shop-dim); }
.shop-sum-rows dd { margin: 0; text-align: right; }
.shop-sum-total { padding-top: .7rem; border-top: 1px solid var(--shop-line-hi); font-size: 1.2rem; font-weight: 600; color: #fff; }

.shop-pay { display: flex; flex-direction: column; gap: .55rem; margin: .3rem 0 1rem; }
.shop-pay label {
    display: flex;
    gap: .7rem;
    padding: .8rem .9rem;
    border: 1px solid var(--shop-line-hi);
    border-radius: var(--shop-r-sm);
    cursor: pointer;
    transition: all .15s;
}
.shop-pay label:hover { border-color: var(--shop-line-hi); background: var(--shop-card-hi); }
.shop-pay label:has(input:checked) { border-color: var(--shop-gold); background: var(--shop-gold-soft); }
.shop-pay input { margin-top: .15rem; accent-color: var(--shop-gold); }
.shop-pay strong { display: block; font-weight: 500; font-size: .93rem; }
.shop-pay small { color: var(--shop-dim); font-size: .8rem; line-height: 1.4; }


/* ─────────────── Bestellungen ─────────────── */

/* Bestellkachel: Abstaende liegen in Kopf und Rumpf, nicht auf der
   Kachel — sonst laesst sich die Kopfzeile nicht farbig absetzen.
   Alles, was direkt in der Kachel steht, bekommt den Einzug deshalb
   von Hand; ohne das klebt es am Rand. */
.shop-order { padding: 0; overflow: hidden; }
.shop-order > p,
.shop-order > .shop-notice { margin-left: 1.4rem; margin-right: 1.4rem; }
.shop-order > .shop-notice:last-child { margin-bottom: 1.2rem; }
.shop-order-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.1rem 1.4rem;
    background: rgba(255, 255, 255, .03);
    border-bottom: 1px solid var(--shop-line);
}
.shop-order-head h2 { margin: 0; font-size: 1.05rem; letter-spacing: .04em; }
.shop-order-head .shop-tile-meta { margin-top: .15rem; }
.shop-order-total { font-size: 1.1rem; font-weight: 600; }
.shop-order-body { padding: .4rem 1.4rem 1.2rem; }
.shop-order-item {
    display: grid;
    grid-template-columns: 84px 1fr auto;
    gap: .9rem;
    align-items: center;
    padding: .8rem 0;
    border-bottom: 1px solid var(--shop-line);
}
.shop-order-item:last-child { border-bottom: 0; }

@media (max-width: 640px) {
    .shop-order-head { flex-wrap: wrap; gap: .5rem; padding: 1rem 1.1rem; }
    .shop-order-body { padding: .4rem 1.1rem 1.1rem; }
    .shop-order > p,
    .shop-order > .shop-notice { margin-left: 1.1rem; margin-right: 1.1rem; }
    /* Bild, Angaben und Preis untereinander statt gequetscht nebeneinander */
    .shop-order-item { grid-template-columns: 64px 1fr; row-gap: .5rem; }
    .shop-order-nothumb { width: 64px; height: 48px; }
    .shop-order-item > div:last-child { grid-column: 1 / -1; flex-direction: row !important;
                                        align-items: center !important; justify-content: space-between; }
    .shop-order-item img { width: 64px; height: 48px; }
}
.shop-order-item img { width: 84px; height: 62px; object-fit: cover; border-radius: 8px; display: block; }

/* Platzhalter, wenn kein Vorschaubild da ist: Ohne ihn rueckt jedes
   folgende Kind eine Spalte nach links, und der Titel bricht in der
   84-px-Bildspalte nach jedem Wort um. */
.shop-order-nothumb {
    width: 84px; height: 62px; border-radius: 8px; display: block;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--shop-line);
}

/* Titel und Lizenztext duerfen die Breite auch wirklich nutzen */
.shop-order-item > div { min-width: 0; }
.shop-order-item strong { display: block; }
.shop-order-item .shop-tile-meta { display: block; }


/* ─────────────── Statusanzeigen ─────────────── */

.shop-state {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .22rem .7rem;
    border-radius: 999px;
    font-size: .78rem;
    background: rgba(255, 255, 255, .07);
    color: var(--shop-dim);
}
.shop-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.shop-state-good { background: rgba(127, 209, 141, .14); color: var(--shop-good); }
.shop-state-warn { background: rgba(232, 201, 107, .14); color: var(--shop-warn); }
.shop-state-bad  { background: rgba(232, 140, 140, .14); color: var(--shop-bad); }

.shop-notice {
    display: flex;
    gap: .7rem;
    padding: .8rem 1rem;
    border-radius: var(--shop-r-sm);
    font-size: .88rem;
    line-height: 1.5;
    margin: .8rem 0 0;
}
.shop-notice-info { background: rgba(255, 255, 255, .05); color: var(--shop-dim); }
.shop-notice-warn { background: rgba(232, 201, 107, .1); color: var(--shop-warn); }


/* ─────────────── Leere Zustände ─────────────── */

.shop-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--shop-dim);
}
.shop-empty svg { width: 42px; height: 42px; color: var(--shop-faint); margin-bottom: .9rem; }
.shop-empty h3 { margin: 0 0 .4rem; font-size: 1.05rem; color: var(--shop-ink); }
.shop-empty p { margin: 0 0 1.2rem; font-size: .92rem; }


/* ─────────────── Ladeskelett ─────────────── */

.shop-skeleton {
    border-radius: var(--shop-r);
    background: linear-gradient(100deg, rgba(255,255,255,.04) 30%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 70%);
    background-size: 220% 100%;
    animation: shopShimmer 1.3s linear infinite;
    aspect-ratio: 4 / 3;
}
@keyframes shopShimmer { to { background-position: -220% 0; } }


/* ─────────────── Der Fuehler unter dem endlosen Feed ───────────────

   ToDo #164 (30.08.2026). Ein Element mit vier Zustaenden, direkt
   unter der Liste:

     leer   — es ist nichts zu tun, der Beobachter wartet
     load   — die naechste Portion ist unterwegs
     end    — die letzte Portion steht, mehr gibt es nicht
     fail   — eine Portion kam nicht an, mit Knopf zum Wiederholen

   Die Hoehe bleibt in allen Zustaenden gleich (min-height), damit
   der Feed beim Wechsel nicht springt — und weil der Fuehler eine
   Flaeche braucht, die der Beobachter ueberhaupt schneiden kann.
   Ein Element mit Hoehe 0 loest je nach Browser gar nicht aus.

   Wichtig fuers Zusammenspiel mit dem Feed: Der Fuehler steht
   AUSSERHALB von .arch-feed und traegt selbst KEIN
   content-visibility — was uebersprungen wird, meldet sich nicht. */

/* ── Das Blaetterwerk verschwinden lassen (ToDo #164) ──

   Das Skript blendet den Pager aus, sobald das Nachladen steht — mit
   dem hidden-Attribut, weil der Knoten IM HTML BLEIBEN muss (Google
   folgt seinen Links). hidden allein reicht hier aber nicht: Es wirkt
   ueber ein display:none aus dem Browser-Standardblatt, und
   .cpager setzt display:flex — jede Autorenregel schlaegt das
   Standardblatt. Ohne diese Zeile stuende das Blaetterwerk trotz
   hidden sichtbar unter dem endlosen Feed.

   Die Regel haengt an .feed-pager und nicht an .cpager: Sie loest ein
   Problem dieser einen Seite; die Pager von Blog und Mitgliederliste
   werden nie versteckt. */

.feed-pager[hidden] { display: none; }


.feed-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    flex-wrap: wrap;
    min-height: 64px;
    margin: .4rem auto 0;
    width: 100%;
    max-width: 640px;
    color: var(--shop-dim);
    font-size: .88rem;
    text-align: center;
}

/* Der Ladepunkt: dieselbe Sprache wie das Ladeskelett darueber —
   ein ruhiges Pulsieren, kein kreisender Kringel. */

.feed-more-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wh-gold, #d8b25a);
    animation: feedMoreDot 1.1s ease-in-out infinite;
}

@keyframes feedMoreDot {
    0%, 100% { opacity: .25; transform: scale(.75); }
    50%      { opacity: 1;   transform: scale(1); }
}

/* Die Schlusszeile ist bewusst leise: Sie ist eine Auskunft, keine
   Aufforderung. Die duenne Linie darueber schliesst den Strom ab,
   so wie die Trennlinien zwischen den Beitraegen ihn gliedern. */

.feed-more.is-end {
    padding-top: 1.1rem;
    border-top: 1px solid var(--wh-line);
    margin-top: 1.2rem;
    color: var(--shop-faint);
    font-size: .84rem;
    letter-spacing: .02em;
}

.feed-more-note { color: var(--shop-dim); }

.feed-more-retry { font-size: .85rem; }

@media (prefers-reduced-motion: reduce) {
    .feed-more-dot { animation: none; opacity: .7; }
}


/* ─────────────── Seitenumbruch ─────────────── */

.shop-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    margin-top: 1.6rem;
    color: var(--shop-dim);
    font-size: .9rem;
}


/* ─────────────── Warenkorb im Kopf ─────────────── */

.nav-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--shop-ink);
    text-decoration: none;
    transition: background .15s;
}
.nav-cart:hover { background: rgba(255, 255, 255, .08); }
.nav-cart svg { width: 19px; height: 19px; }
.nav-cart-count {
    position: absolute;
    top: -1px; right: -1px;
    min-width: 17px; height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--shop-gold);
    color: #16171a;
    font-size: .68rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ─────────────── Kleinere Bildschirme ─────────────── */

@media (max-width: 900px) {
    .shop-detail, .shop-checkout { grid-template-columns: 1fr; }
    .shop-side, .shop-summary { position: static; }
}

@media (max-width: 640px) {
    .shop-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
    .shop-filters { padding: .75rem; border-radius: var(--shop-r-sm); }
    .shop-result-count { margin-left: 0; width: 100%; }
    .shop-line { grid-template-columns: 84px 1fr; }
    .shop-line-media img { width: 84px; height: 62px; }
    .shop-line-right { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
    .shop-order-item { grid-template-columns: 64px 1fr; }
    .shop-order-item img { width: 64px; height: 48px; }
    .shop-order-item > div:last-child { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
}


/* ─────────────── Breiterer Rahmen auf den Shopseiten ───────────────
   Der Community-Rahmen ist auf Lesbarkeit von Text ausgelegt. Ein
   Produktraster braucht mehr Platz, sonst passen nur drei Kacheln
   nebeneinander. */

/* .arch-feed steht hier mit in der Reihe: Der Feed selbst ist schmal,
   aber Karte und Filter darüber brauchen im Bildarchiv weiterhin den
   breiten Rahmen. */

body:has(.shop-grid) .community-wrap,
body:has(.arch-feed) .community-wrap,
body:has(.shop-checkout) .community-wrap,
body:has(.shop-detail) .community-wrap {
    max-width: min(1440px, 94vw);
}

/* Auf der Detailseite darf der Text schmal bleiben */
body:has(.shop-detail) .shop-hero { max-width: none; }


/* ═══════════════ Bereich Stormchasing ═══════════════ */

.sc-status {
    background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-r);
    padding: 1.1rem 1.3rem 1.3rem;
    margin-bottom: 1.3rem;
}
.sc-status.is-active {
    border-color: rgba(232, 140, 140, .45);
    background: linear-gradient(135deg, rgba(232,140,140,.10), rgba(255,255,255,.02));
}

.sc-status-head { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.sc-status-head strong { font-size: 1rem; letter-spacing: .02em; }

.sc-pulse {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--shop-good);
    box-shadow: 0 0 0 0 rgba(127, 209, 141, .6);
}
.sc-status.is-active .sc-pulse {
    background: #e88c8c;
    animation: scPulse 1.8s ease-out infinite;
}
@keyframes scPulse {
    0%   { box-shadow: 0 0 0 0 rgba(232, 140, 140, .55); }
    100% { box-shadow: 0 0 0 12px rgba(232, 140, 140, 0); }
}

.sc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .8rem; }

.sc-stat {
    display: flex; flex-direction: column; gap: .2rem;
    padding: .8rem .9rem;
    border-radius: var(--shop-r-sm);
    background: rgba(0, 0, 0, .22);
    border: 1px solid var(--shop-line);
    text-decoration: none; color: inherit;
    transition: border-color .15s, transform .15s;
}
.sc-stat:hover { border-color: var(--shop-gold); transform: translateY(-2px); }
.sc-stat-value { font-size: 1.7rem; font-weight: 600; line-height: 1; color: var(--shop-gold); }
.sc-stat-label { font-size: .8rem; color: var(--shop-dim); }

.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }

.sc-tool {
    display: flex; gap: 1rem; align-items: flex-start;
    padding: 1.2rem;
    background: var(--shop-card);
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-r);
    text-decoration: none; color: inherit;
    transition: transform .16s, border-color .16s, box-shadow .16s;
}
.sc-tool:hover { transform: translateY(-3px); border-color: var(--shop-line-hi); box-shadow: var(--shop-shadow); }
.sc-tool-wide { grid-column: span 2; }
.sc-tool h2 { margin: 0 0 .3rem; font-size: 1.05rem; letter-spacing: .03em; }
.sc-tool p { margin: 0; font-size: .88rem; color: var(--shop-dim); line-height: 1.5; }

.sc-tool-icon {
    flex: none;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: var(--shop-gold-soft);
    color: var(--shop-gold);
}
.sc-tool-icon svg { width: 24px; height: 24px; }

.sc-tool-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; }
.sc-tool-tags span {
    padding: .18rem .6rem; border-radius: 999px;
    background: rgba(255, 255, 255, .05); border: 1px solid var(--shop-line);
    font-size: .74rem; color: var(--shop-dim);
}

/* Navigationspunkt mit Live-Anzeige */
.nav-live {
    display: inline-flex; align-items: center; gap: .4rem;
}
.nav-live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--shop-good); flex: none;
}
.nav-live.is-active .nav-live-dot {
    background: #e88c8c;
    animation: scPulse 1.8s ease-out infinite;
}
.nav-live-count {
    padding: .05rem .42rem; border-radius: 999px;
    background: rgba(232, 140, 140, .18); color: #f0a3a3;
    font-size: .7rem; font-weight: 600;
}

@media (max-width: 640px) {
    .sc-tool-wide { grid-column: span 1; }
    .sc-stat-value { font-size: 1.4rem; }
}

/* Verkaufszeile unter der Karte — steht dort, weil sie nur den
   Verkaufsbestand betrifft und im Community-Archiv verschwindet. */
.arch-sale-line {
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid var(--shop-line);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    font-size: .9rem;
}
.arch-sale-line strong { color: var(--shop-ink); }
.arch-sale-line span { color: var(--shop-dim); font-size: .85rem; }

/* Kennzahl ohne Ziel — sieht aus wie die anderen, reagiert aber nicht
   auf den Zeiger. Ein Feld, das sich wie ein Link anfühlt und keiner
   ist, ist schlimmer als eines, das gar nicht erst danach aussieht. */
.sc-stat.is-plain { cursor: default; }
.sc-stat.is-plain:hover { background: inherit; border-color: inherit; transform: none; }


/* ── Community-Popup und Lightbox im Bildarchiv (09.08.2026) ──
   Community-Bilder haben keine Detailseite — Karten-Popup und
   Lightbox sind ihre Ansicht. Farben aus den wh-Tokens. */

#archMap .arch-popup .leaflet-popup-content-wrapper {
    background: var(--wh-surface-2);
    color: var(--wh-text);
    border: 1px solid var(--wh-line);
    border-radius: var(--wh-r);
    box-shadow: var(--wh-shadow-lg);
}

#archMap .arch-popup .leaflet-popup-tip { background: var(--wh-surface-2); }

#archMap .arch-popup .leaflet-popup-content { margin: 10px 12px; }

#archMap .arch-popup a.leaflet-popup-close-button { color: var(--wh-text-muted); }

.arch-pop {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 220px;
}

.arch-pop img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
}

.arch-pop strong { font-size: .92rem; }

.arch-pop-meta {
    color: var(--wh-text-muted);
    font-size: .78rem;
}

.arch-pop-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.arch-pop-badges span {
    padding: 1px 8px;
    border: 1px solid var(--wh-gold);
    border-radius: 999px;
    color: var(--wh-gold);
    font-size: .72rem;
}

.arch-pop-desc {
    margin: 0;
    color: var(--wh-text-dim);
    font-size: .8rem;
    max-height: 5.5em;
    overflow: hidden;
}

.arch-pop-btn { margin-top: 2px; }

/* Dialog-Ebene 1400 — wie die übrigen Dialoge des Portals. */

.arch-lb {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: rgba(8, 9, 12, .82);
    display: grid;
    place-items: center;
    padding: 24px;
}

.arch-lb[hidden] { display: none; }

.arch-lb-box {
    position: relative;
    max-width: min(1100px, 96vw);
    max-height: 92vh;
    background: var(--wh-surface);
    border: 1px solid var(--wh-line);
    border-radius: var(--wh-r);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.arch-lb-img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    background: var(--wh-bg);
}

.arch-lb-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    overflow-y: auto;
}

.arch-lb-desc {
    margin: 0;
    color: var(--wh-text-dim);
    font-size: .9rem;
}

/* ── Das Herz in der Lightbox (ToDo #76, 27.08.2026) ──

   Herz, Melde-Flagge und Gefällt-Zeile kommen aus derselben Quelle wie
   im Feed (likeRow() in archive-map.js) und tragen deshalb auch
   dieselben Klassen. Die Feed-Regeln weiter oben passen hier ohne
   Zutun: Der Grund ist in beiden Fällen dunkel, und die Farben hängen
   an --shop-ink/--shop-dim.

   Der Kasten drumherum ist nur eine Halterung. Er steht schon da,
   bevor die Zahlen da sind: Kommt ein Bild aus dem Karten-Zweig, fehlen
   ihm likes/liked/liker_first, und sie werden beim Öffnen einzeln
   nachgeladen. Die reservierte Höhe ist die des Herzens (24px Symbol
   plus dessen Innenabstand) — dadurch rückt beim Nachtragen nichts
   nach unten, was der Leser schon vor Augen hatte.

   Der Innenabstand nach unten fällt weg: Den Abstand zum Titel macht
   der gap der Lightbox-Fußzeile. */

.arch-lb-actions {
    min-height: 30px;
}

.arch-lb-actions .feed-actions { margin-bottom: 0; }
.arch-lb-actions .feed-likedby { margin-bottom: 0; }

.arch-lb-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    background: rgba(10, 11, 14, .7);
    border: 1px solid var(--wh-line);
    border-radius: 50%;
    color: var(--wh-text);
    cursor: pointer;
    z-index: 2;
}

.arch-lb-close svg { width: 18px; height: 18px; }


/* ── Galerie-Popup für enge Bildgruppen auf der Karte (09.08.2026) ── */

.arch-gal {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 240px;
    max-height: 300px;
    overflow-y: auto;
}

.arch-gal-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    border: 1px solid var(--wh-line);
    border-radius: 4px;
    background: none;
    color: var(--wh-text);
    text-align: left;
    cursor: pointer;
}

.arch-gal-row:hover { border-color: var(--wh-gold); }

.arch-gal-row img {
    width: 64px;
    height: 48px;
    object-fit: cover;
    border-radius: 3px;
    flex: 0 0 64px;
}

.arch-gal-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.arch-gal-body strong {
    font-size: .85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ── Phänomen-Filter als Suchfeld (ATMOS-Taxonomie, 09.08.2026) ── */

.arch-combo {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 210px;
}

.arch-combo input[type="search"] {
    width: 100%;
    padding-right: 34px;
}

.arch-combo #archPhenClear {
    position: absolute;
    right: 6px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--wh-text-muted);
    cursor: pointer;
}

.arch-combo #archPhenClear:hover { color: var(--wh-text); }

.arch-combo #archPhenClear svg { width: 14px; height: 14px; }

.arch-combo-suggest {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    min-width: 100%;
    width: max-content;
    max-width: min(480px, 90vw);
    max-height: 340px;
    overflow-y: auto;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--wh-line);
    border-radius: var(--wh-r);
    background: var(--wh-surface-2);
    box-shadow: var(--wh-shadow-lg);
}

.arch-combo-suggest li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    padding: 9px 12px;
    font-size: .85rem;
    cursor: pointer;
    border-bottom: 1px solid var(--wh-line);
}

.arch-combo-suggest li:last-child { border-bottom: 0; }

.arch-combo-suggest li:hover { background: rgba(255, 255, 255, .05); }

.arch-combo-suggest li em {
    color: var(--wh-text-muted);
    font-size: .78rem;
}

.arch-combo-suggest li > span {
    margin-left: auto;
    color: var(--wh-gold);
    font-size: .72rem;
    white-space: nowrap;
}


/* ── Bildarchiv: Universalsuche, Chips, Zeitraum, Marker & Feed
      (Karten-/Feed-/Geo-Modul, 09.08.2026) ── */

.arch-uni { flex: 1 1 340px; position: relative; }

.arch-uni-suggest {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    margin-top: 6px;
    max-height: 380px;
    overflow-y: auto;
    border: 1px solid var(--wh-line);
    border-radius: var(--wh-r);
    background: rgba(22, 23, 28, .92);
    box-shadow: var(--wh-shadow-lg);
}

/* Blur nur am Rechner — am Handy ruckelt backdrop-filter beim
   Scrollen (Portal-Performance-Regel). */

@media (min-width: 781px) {
    .arch-uni-suggest { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
}

.arch-uni-sec {
    padding: 8px 12px 4px;
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--wh-gold);
}

.arch-uni-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 12px;
    font-size: .88rem;
    cursor: pointer;
    border-bottom: 1px solid var(--wh-line);
}

.arch-uni-row:last-child { border-bottom: 0; }

.arch-uni-row:hover,
.arch-uni-row.is-active { background: rgba(255, 255, 255, .06); }

.arch-uni-row em {
    color: var(--wh-text-muted);
    font-size: .78rem;
}

.arch-uni-row > span {
    margin-left: auto;
    color: var(--wh-gold);
    font-size: .72rem;
    white-space: nowrap;
}

.arch-filter-row2 {
    margin-top: .55rem;
    align-items: center;
}

.arch-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
    min-height: 4px;
}

.arch-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 12px;
    border: 1px solid var(--wh-gold);
    border-radius: 999px;
    color: var(--wh-gold);
    background: rgba(212, 175, 55, .08);
    font-size: .8rem;
}

.arch-chip button {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: inherit;
    cursor: pointer;
}

.arch-chip button:hover { background: rgba(212, 175, 55, .18); }

.arch-chip svg { width: 12px; height: 12px; }

/* Marker: Phänomen-Glyphe am Foto-Icon */

.arch-glyph {
    position: absolute;
    right: -6px;
    bottom: -6px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--wh-gold);
    color: #16150f;
    border: 1px solid rgba(0, 0, 0, .35);
    /* dunkle Kante: hebt die Glyphe vom Goldring und von
       Nachbarkacheln ab. */
    box-shadow: 0 0 0 2px #1a1c1e;
}

.arch-glyph svg { width: 12px; height: 12px; }

/* Marker-Vorschau beim Überfahren */

.arch-tip-wrap .leaflet-tooltip-content { margin: 0; }

.leaflet-tooltip.arch-tip-wrap {
    padding: 0;
    border: 1px solid var(--wh-line);
    border-radius: var(--wh-r);
    background: rgba(22, 23, 28, .94);
    color: var(--wh-text);
    box-shadow: var(--wh-shadow-lg);
    /* Leaflet gibt jedem Tooltip white-space: nowrap mit. Diese Vorschau
       hat aber eine feste Breite von 190 px und mehrere Textzeilen —
       Ort mit Datum und die Phänomen-Kette liefen dadurch beim
       Überfahren weit aus dem Kasten heraus (ToDo #181, 30.08.2026).
       Also umbrechen lassen; overflow schneidet den Rest sauber ab,
       falls doch einmal etwas anstößt. */
    white-space: normal;
    overflow: hidden;
}

.leaflet-tooltip.arch-tip-wrap::before { display: none; }

.arch-tip {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 190px;
    padding: 8px;
}

.arch-tip img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: 4px;
}

.arch-tip strong {
    font-size: .85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.arch-tip span {
    color: var(--wh-text-muted);
    font-size: .74rem;
    /* Lange Ortsnamen und Phänomen-Ketten brechen um statt auszubrechen;
       ein einzelnes überlanges Wort wird notfalls hart getrennt. Mehr
       als zwei Zeilen bekommt eine Hover-Vorschau nicht — sie soll
       neugierig machen, nicht alles erzählen. */
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.arch-tip .arch-tip-tags { color: var(--wh-gold); }

/* Region-Band über der Karte */

.arch-geobadge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 800;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 14px;
    border: 1px solid var(--wh-line);
    border-radius: 999px;
    background: rgba(22, 23, 28, .9);
    color: var(--wh-text);
    font-size: .8rem;
    box-shadow: var(--wh-shadow);
}

.arch-geobadge button {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--wh-text-muted);
    cursor: pointer;
}

.arch-geobadge button:hover { color: var(--wh-text); }

.arch-geobadge svg { width: 13px; height: 13px; }

/* Feed-Karten: sanfter Bild-Zoom beim Überfahren */

.shop-tile-media { overflow: hidden; }

.shop-tile-media img { transition: transform .35s; }

.shop-tile:hover .shop-tile-media img { transform: scale(1.05); }

/* Eigener Standort auf der Bildarchiv-Karte: goldener Punkt mit
   Puls-Ring — nur transform/opacity (Performance-Regel). */

.arch-self { position: relative; width: 18px; height: 18px; }

.arch-self span {
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--wh-gold);
    border: 2px solid #fff;
}

.arch-self::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--wh-gold);
    animation: archSelfPulse 2.2s ease-out infinite;
}

@keyframes archSelfPulse {
    0%   { transform: scale(.6);  opacity: .9; }
    100% { transform: scale(2.3); opacity: 0; }
}

/* Pin des gewählten Suchorts (Universalsuche) */

.arch-placepin {
    color: var(--wh-gold);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6));
}

.arch-placepin svg { width: 30px; height: 30px; }

/* Leaflet 1.9 erzwingt fuer Bilder im Marker-Pane width:auto — mit
   Spezifitaet 0,3,1 schlaegt das ".arch-spot img". Deshalb hier die
   staerkere Fassung: Die Foto-Kachel fuellt immer exakt ihre 52x39. */
.leaflet-container .leaflet-marker-pane .arch-spot img {
    width: 100%;
    height: 100%;
}


/* ═══════════ Bildarchiv: Vollbild-Fotokarte (24.08.2026) ═══════════

   Seit der Fotofeed eine eigene Seite hat (/feed/), steht im
   Bildarchiv nur noch die Karte — und die bildschirmfüllend, wie auf
   der Radarseite. Die Portal-Navigation bleibt oben stehen; "Vollbild"
   heißt hier: volle Breite, volle Resthöhe darunter.

   Die Resthöhe wird NICHT gerechnet, sondern verteilt: Die Seite wird
   zur Spalte (Flexbox), Kopfleiste und Meldungsband nehmen sich, was
   sie brauchen, die Karte bekommt den Rest. Eine feste Kopfhöhe hätte
   sich an jeder Störmeldung und an jedem Zeilenumbruch verschätzt.

   Angesprochen wird die Seite über eine Klasse am body, die die
   Bildarchivseite selbst setzt (communityHeader(..., "arch-map-body")),
   NICHT über body:has(.arch-mapshell). Das war der Stand bis zum
   24.08.2026 — und der Grund, warum „einige Nutzer“ gar keine Karte
   sahen: Browser ohne :has() (ältere Safari, Firefox vor 121, Chrome
   vor 105) überspringen den ganzen Block. Ohne die Flex-Regeln fällt
   .arch-mapshell auf Höhe 0 zusammen — sein einziges Kind, die Karte,
   liegt absolut. Eine Klasse versteht jeder Browser.

   100dvh statt 100vh: Am Handy wächst und schrumpft die Adressleiste,
   mit vh springt der Kartenboden dabei mit. Die vh-Zeile davor ist der
   Rückfall für Browser ohne dvh. Die Fußleiste am Handy braucht keinen
   Sonderfall — sie steckt schon im padding-bottom des body, und mit
   border-box zählt das gegen die Mindesthöhe. */

body.arch-map-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;

    /* Nichts scrollt: Unter der Karte gäbe es sonst immer einen
       leeren Streifen zu erwischen. */
    overflow: hidden;
}

/* Der Seitenrahmen muss für die Karte weichen: kein max-width, keine
   Innenabstände, kein Fuß. */

body.arch-map-body .wh-page {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-width: none;
    margin: 0;
    padding: 0;
}

body.arch-map-body .site-footer { display: none; }

.arch-mapshell {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

/* Schlägt die Höhenvorgabe aus dem Kachel-Zeitalter (#archMap mit
   min(58vh, 480px)) über die höhere Spezifität. */

.arch-mapshell #archMap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #0e1013;
}

/* Das erkannte-Region-Band saß bisher oben rechts — dort steht jetzt
   das Filterpanel. Es zieht nach unten links. */

.arch-mapshell .arch-geobadge {
    top: auto;
    right: auto;
    bottom: 12px;
    left: 12px;
}


/* ── Schwebendes Filterpanel auf der Karte ──
   Zuschnitt und Verhalten wie das Ebenen-Panel der Radarseite: rechts
   unter der Kopfleiste, aufklappbar, dunkles Glas. Links oben bleibt
   frei — dort sitzen Leaflets Zoomknöpfe.

   Ebene 1100: über Leaflets Bedienelementen (1000) und unter der
   Kopfleiste (1200) — wie der Upload-Knopf weiter unten, nur eine
   Stufe darunter, weil sich beide nie in die Quere kommen (Knopf
   unten rechts, Panel oben rechts; am Handy startet das Panel
   zugeklappt).

   Bis zum 27.08.2026 stand hier 1200, also GLEICHAUF mit der
   Kopfleiste. Bei Gleichstand entscheidet die Dokumentreihenfolge,
   und das Panel steht im <main> nach dem <header>: Es malte damit
   über Navigation und Profilmenü. Am iPad fiel es besonders auf, weil
   dort zusätzlich das backdrop-filter greift und WebKit die Ebene
   damit sicher nach vorn zieht. Das Profilmenü selbst konnte nie
   dagegenhalten — es sitzt im Stapelkontext der Kopfleiste und kommt
   über deren Ebene grundsätzlich nicht hinaus (ToDo #75). */

.arch-mappanel {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1100;
    width: 320px;
    max-width: calc(100% - 24px);
    border: 1px solid var(--wh-line);
    border-radius: var(--wh-r);
    background: rgba(18, 19, 24, .94);
    box-shadow: var(--wh-shadow);
}

/* Blur nur am Rechner — am Handy kostet backdrop-filter bei jeder
   Kartenbewegung Rechenzeit (Portal-Performance-Regel). */

@media (min-width: 781px) {
    .arch-mappanel { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
}

.arch-mappanel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: .7rem .85rem;
    border: 0;
    background: none;
    color: var(--wh-gold);
    font: inherit;
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: .03em;
    cursor: pointer;
}

.arch-mappanel-head svg { width: 18px; height: 18px; flex: none; }

.arch-mappanel-chev { margin-left: auto; transition: transform .2s; }

.arch-mappanel:not(.is-open) .arch-mappanel-body { display: none; }
.arch-mappanel.is-open .arch-mappanel-chev { transform: rotate(180deg); }

.arch-mappanel-body {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 0 .85rem .85rem;
}

/* Im schmalen Panel teilen sich die beiden Reiter die volle Breite —
   als Pillenzeile mittig wirkten sie hier verloren. */

.arch-mappanel .shop-tabs { display: flex; }
.arch-mappanel .shop-tab { flex: 1; padding: .45rem .5rem; font-size: .84rem; }

.arch-mappanel .arch-uni { flex: 1 1 auto; }

.arch-mappanel .shop-chip { justify-content: center; }

.arch-mappanel-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.arch-mappanel-actions .sbtn { flex: 1 1 auto; }

.arch-mappanel .arch-sale-line {
    margin-top: 0;
    padding-top: .6rem;
    font-size: .78rem;
}

/* Am Handy über die ganze Breite und zugeklappt (das übernimmt
   archive-map.js) — die Karte soll frei liegen. */

@media (max-width: 780px) {
    .arch-mappanel {
        top: 8px;
        left: 8px;
        right: 8px;
        width: auto;
        max-width: none;
    }
}


/* ── Der Upload-Knopf auf der Karte (25.08.2026) ──
   Vorher steckte er im Filterpanel — am Rechner unauffällig, am Handy
   gar nicht zu sehen, weil das Panel zugeklappt startet. Jetzt ein
   einziger, immer sichtbarer Knopf unten rechts.

   Ebene 1150: über Leaflets Bedienelementen (1000), unter Kopfleiste
   und Fußleiste (1200) sowie dem Wizard-Dialog (1400).

   Der Abstand nach unten hält Leaflets Quellenangabe frei, die in
   derselben Ecke sitzt. Am Handy braucht die Fußleiste keinen
   Aufschlag: Ihre Höhe samt safe-area steckt schon im padding-bottom
   des body (--wh-tabbar), und die Kartenschale endet darüber. */

.arch-fab {
    position: absolute;
    right: 16px;
    bottom: 34px;
    z-index: 1150;

    display: inline-flex;
    align-items: center;
    gap: .5rem;

    padding: .72rem 1.05rem;
    border: 1px solid var(--wh-gold-bright);
    border-radius: var(--wh-r-btn);

    background: var(--wh-gold);
    color: #16171a;

    font: inherit;
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;

    box-shadow: var(--wh-shadow);
    cursor: pointer;

    /* Portal-Performance-Regel: nur transform und opacity bewegen. */
    transition: transform .15s ease, opacity .15s ease;
}

.arch-fab svg {
    width: 20px;
    height: 20px;
    flex: none;
}

.arch-fab:hover  { transform: translateY(-2px); }
.arch-fab:active { transform: translateY(0); opacity: .88; }

@media (prefers-reduced-motion: reduce) {
    .arch-fab { transition: none; }
    .arch-fab:hover { transform: none; }
}

/* Am Handy bleibt die Beschriftung stehen — nur schmaler geschnitten. */

@media (max-width: 780px) {
    .arch-fab {
        right: 12px;
        bottom: 30px;
        gap: .4rem;
        padding: .6rem .8rem;
        font-size: .82rem;
    }

    .arch-fab svg { width: 18px; height: 18px; }
}


/* ═══════════════════════════════════════════════════════════════
   FOTOKALENDER (ToDo #49 und #50, 26.08.2026)
   ═══════════════════════════════════════════════════════════════

   Hier standen bis heute die Regeln des Zeitstrahls (.arch-days) —
   Schieberegler samt Beschriftung, auf beiden Seiten. Sie sind mit
   dem Regler entfallen; an seiner Stelle steht der Kalender.

   Ein Bauteil, zwei Auslöser: Im Feed eine schmale Leiste über den
   Beiträgen, auf der Vollbildkarte ein Knopf im Filterpanel. Das
   Fenster selbst baut archive-map.js — es gehört keiner der beiden
   Seiten, also steht sein Markup auch in keiner von beiden. */


/* ── Auslöser 1: die Leiste im Feed ──
   Standard ist ZU: eine Zeile mit Symbol und aktuellem Filterstand.
   Aufgeschlagen wird das Fenster, nicht die Leiste. */

.arch-calbar {
    display: flex;
    align-items: center;
    gap: var(--wh-2);
    width: 100%;
    min-height: var(--wh-touch);
    margin-bottom: var(--wh-3);
    padding: .55rem .85rem;
    border: 1px solid var(--wh-line);
    border-radius: var(--wh-r);
    background: var(--wh-surface);
    color: var(--wh-text-dim);
    font: inherit;
    font-size: .88rem;
    text-align: left;
    cursor: pointer;
}

.arch-calbar:hover { border-color: var(--wh-line-strong); }

.arch-calbar svg { width: 18px; height: 18px; flex: none; }

.arch-calbar > svg:first-child { color: var(--wh-gold); }

.arch-calbar-chev { margin-left: auto; opacity: .6; }

/* Gesetzter Filter: dieselbe Goldsprache wie die Chips darunter —
   man sieht auf einen Blick, dass der Feed eingeschränkt ist. */

.arch-calbar.is-set {
    border-color: var(--wh-gold-line);
    background: var(--wh-gold-soft);
    color: var(--wh-gold);
}


/* ── Auslöser 2: der Knopf im Kartenpanel ── */

.arch-calbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wh-2);
    width: 100%;
}

.arch-calbtn svg { width: 17px; height: 17px; flex: none; }

.arch-calbtn.is-set { color: var(--wh-gold); border-color: var(--wh-gold-line); }


/* ── Das Symbol im Filter-Chip ── */

.arch-chip-ico {
    display: grid;
    place-items: center;
    flex: none;
}

.arch-chip-ico svg { width: 13px; height: 13px; }


/* ── Das Fenster ──
   Dialog-Ebene 1400 wie Lightbox und Rechtstext-Dialog. Zu jedem
   Bauteil mit eigener display-Angabe gehoert ein [hidden] — sonst
   liegt es unsichtbar ueber der Seite und schluckt jeden Klick
   (siehe database/UI.md). */

.arch-cal {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: grid;
    place-items: start center;
    padding: var(--wh-3);
    background: rgba(8, 9, 12, .84);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.arch-cal[hidden] { display: none; }

/* Waehrend das Fenster offen steht, scrollt die Seite darunter nicht
   mit — sonst verliert man beim Blaettern im Kalender seine Stelle
   im Feed. */

body.arch-cal-open { overflow: hidden; }

.arch-cal-box {
    width: min(980px, 100%);
    display: flex;
    flex-direction: column;
    gap: var(--wh-3);
    padding: var(--wh-4);
    border: 1px solid var(--wh-line);
    border-radius: var(--wh-r);
    background: var(--wh-bg-raised);
    box-shadow: var(--wh-shadow);
}

.arch-cal-head {
    display: flex;
    align-items: center;
    gap: var(--wh-2);
    flex-wrap: wrap;
}

.arch-cal-nav {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    border: 1px solid var(--wh-line);
    border-radius: var(--wh-r-sm);
    background: none;
    color: var(--wh-text);
    cursor: pointer;
}

.arch-cal-nav:hover { border-color: var(--wh-gold-line); color: var(--wh-gold); }
.arch-cal-nav svg { width: 18px; height: 18px; }

.arch-cal-title {
    font-size: 1.02rem;
    letter-spacing: .02em;
    color: var(--wh-text);

    /* Der Titel nimmt den Platz zwischen den Pfeilen und schiebt
       Region und Schliessen nach rechts. */
    flex: 1 1 auto;
    min-width: 6ch;
}

.arch-cal-region {
    flex: none;
    max-width: 15rem;
    padding: .42rem .6rem;
    border: 1px solid var(--wh-line);
    border-radius: var(--wh-r-input);
    background: var(--wh-bg);
    color: var(--wh-text);
    font: inherit;
    font-size: .86rem;
}

.arch-cal-close {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    border: 1px solid var(--wh-line);
    border-radius: 50%;
    background: none;
    color: var(--wh-text);
    cursor: pointer;
}

.arch-cal-close svg { width: 16px; height: 16px; }

.arch-cal-hint {
    display: flex;
    align-items: center;
    gap: var(--wh-3);
    flex-wrap: wrap;
    font-size: .8rem;
    color: var(--wh-text-faint);
}

.arch-cal-clear { flex: none; margin-left: auto; }
.arch-cal-clear[hidden] { display: none; }

.arch-cal-dow,
.arch-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.arch-cal-dow {
    font-size: .74rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--wh-text-faint);
}

.arch-cal-dow span { padding-left: 2px; }


/* ── Eine Tageszelle ──
   Tage mit Fotos sind ein <button>, Tage ohne ein <div>: Ein Knopf
   verspricht, dass etwas passiert. */

.arch-cal-day {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: var(--wh-touch);
    padding: 5px;
    border: 1px solid var(--wh-line);
    border-radius: var(--wh-r-sm);
    background: var(--wh-surface);
    color: var(--wh-text);
    font: inherit;
    text-align: left;

    /* Kein Springen, waehrend die Vorschaubilder nachkommen. */
    content-visibility: auto;
    contain-intrinsic-size: 92px;
}

.arch-cal-pad { min-height: 0; }

.arch-cal-day.has-photos { cursor: pointer; }

.arch-cal-day.has-photos:hover { border-color: var(--wh-gold-line); }

/* Tage ohne Fotos: gedaempft, aber lesbar — die Zahl gehoert zur
   Orientierung im Monat. */

.arch-cal-day.is-empty { opacity: .34; }

.arch-cal-day.is-loading { opacity: .5; }

.arch-cal-num {
    font-size: .76rem;
    line-height: 1;
    color: var(--wh-text-dim);
}

.arch-cal-shot {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    overflow: hidden;
    background: var(--wh-bg);
}

.arch-cal-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.arch-cal-count {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    padding: 1px 5px;
    border-radius: var(--wh-r-pill);
    background: rgba(10, 11, 14, .82);
    border: 1px solid var(--wh-gold-line);
    color: var(--wh-gold);
    font-size: .68rem;
    line-height: 1.5;
    text-align: center;
}

.arch-cal-phen {
    font-size: .68rem;
    line-height: 1.2;
    color: var(--wh-gold);

    /* Zweizeilig abschneiden statt die Zelle in die Laenge zu ziehen —
       lange Phaenomennamen sprengen sonst das Raster. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Auswahl: der vorgemerkte Starttag zuerst, danach die ganze Spanne.
   Nur Rahmen und Flaeche — kein Groessenwechsel, der das Raster
   verrueckt. */

.arch-cal-day.is-sel {
    border-color: var(--wh-gold-line);
    background: var(--wh-gold-soft);
}

.arch-cal-day.is-start {
    border-color: var(--wh-gold);
    box-shadow: inset 0 0 0 1px var(--wh-gold);
}


/* ── Am Handy ──
   Nur Bildchen und Zahl. Der Phaenomenname braucht Breite, die eine
   Zelle von einem Siebtel Bildschirm nicht hat. */

@media (max-width: 640px) {

    .arch-cal { padding: 0; }

    .arch-cal-box {
        min-height: 100%;
        border: 0;
        border-radius: 0;
        padding: var(--wh-3);
        gap: var(--wh-2);
    }

    .arch-cal-title { font-size: .94rem; }

    .arch-cal-region {
        order: 3;
        max-width: none;
        flex: 1 1 100%;
    }

    .arch-cal-dow,
    .arch-cal-grid { gap: 3px; }

    .arch-cal-day {
        padding: 3px;
        contain-intrinsic-size: 64px;
    }

    .arch-cal-phen { display: none; }

    .arch-cal-num { font-size: .68rem; }

    .arch-cal-count {
        top: 2px;
        right: 2px;
        font-size: .62rem;
    }

}