/* ==================================================================
   KEROLINA – Merkzettel & Teilen (merkzettel.css)
   ------------------------------------------------------------------
   Gestaltung fuer:
     1. Hilfsklassen (Screenreader, Toast)
     2. Aktionsgruppe "Reise merken / Seite teilen"
     3. Teilen-Menue (Popover)
     4. Merkzettel-Seite (Karten, leere Ansicht, Dialog)

   Verwendet ausschliesslich die vorhandenen CI-Farb-Tokens der
   Website (--ink, --plum, --gold, --cream, --gold-deep ...). Falls
   eine Seite diese Tokens nicht definiert, greifen die Rueckfall-
   werte in var(..., #wert), damit die Bausteine ueberall tragen.
   ================================================================== */

/* ==================================================================
   1. Hilfsklassen
   ================================================================== */

/* Eigene Screenreader-Klasse: die Detailseiten bringen .sr-only mit,
   eigenstaendige Seiten nicht zwingend. */
.kerolina-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Kurze Rueckmeldung. position:fixed – erzeugt keine Layoutverschiebung.
   Liegt ueber der mobilen Sticky-CTA-Leiste (z-index 120).
   width:max-content ist hier wichtig: Ohne diese Angabe wuerde die
   automatische Breite bei left:50% nur die halbe Bildschirmbreite als
   Bezug haben, und schon kurze Meldungen braechen unnoetig um.
   max-content ignoriert diese Begrenzung, max-width haelt den Kasten
   trotzdem im Bild. */
.kerolina-toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    z-index: 130;
    width: max-content;
    max-width: min(30rem, calc(100% - 32px));
    transform: translateX(-50%) translateY(8px);
    padding: 12px 20px;
    border-radius: var(--radius-sm, 8px);
    background: var(--ink, #1e1122);
    color: var(--cream, #fdf1d1);
    border: 1px solid var(--gold-45, rgba(210, 196, 133, .45));
    box-shadow: 0 10px 30px rgba(30, 17, 34, .35);
    font-family: var(--font-body, sans-serif);
    font-size: .93rem;
    line-height: 1.5;
    text-align: center;
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}
.kerolina-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.kerolina-toast[data-tone="error"] {
    border-color: var(--gold, #d2c485);
    background: var(--plum-mid, #3e2a4a);
}

/* Auf Mobilgeraeten oberhalb der Sticky-CTA-Leiste bleiben. */
@media (max-width: 860px) {
    .kerolina-toast {
        bottom: 84px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kerolina-toast,
    .kerolina-toast.is-visible {
        transition: none;
        /* Nur die Einblend-Bewegung entfaellt; die Zentrierung bleibt. */
        transform: translateX(-50%);
    }
}

/* ==================================================================
   2. Aktionsgruppe "Reise merken / Seite teilen"
   Merken und Teilen gehoeren sichtbar zusammen und stehen bewusst
   ruhiger als der Anfrage-CTA.
   ================================================================== */
.trip-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    font-family: var(--font-body, sans-serif);
}

.trip-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;             /* mobile Bedienflaeche >= 44 px */
    min-width: 46px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid var(--plum-45, rgba(42, 28, 51, .45));
    background: transparent;
    color: var(--plum, #2a1c33);
    font-family: inherit;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.trip-action:hover {
    border-color: var(--plum, #2a1c33);
    background: var(--plum-06, rgba(42, 28, 51, .06));
}
.trip-action:focus-visible {
    outline: 3px solid var(--gold, #d2c485);
    outline-offset: 2px;
}
.trip-action__icon {
    font-size: 1.1rem;
    line-height: 1;
}

/* Gemerkter Zustand: kraeftigere Flaeche. Die Information selbst
   traegt zusaetzlich das Symbol (♡ / ♥), die Beschriftung
   ("Reise merken" / "Reise gemerkt") und aria-pressed – der Zustand
   wird also nie allein ueber Farbe vermittelt. */
.trip-action--save.is-saved {
    border-color: var(--gold-deep, #bca572);
    background: var(--gold-12, rgba(210, 196, 133, .12));
    color: var(--plum, #2a1c33);
}
.trip-action--save.is-saved .trip-action__icon {
    color: var(--gold-deep, #bca572);
}

/* Textlink zum Merkzettel */
.trip-actions__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 4px 6px;
    color: var(--plum, #2a1c33);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.trip-actions__link:focus-visible {
    outline: 3px solid var(--gold, #d2c485);
    outline-offset: 2px;
}
.trip-actions__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--plum, #2a1c33);
    color: var(--cream, #fdf1d1);
    font-size: .76rem;
    font-weight: 700;
    text-decoration: none;
}

/* --- Variante auf dunklem Grund (Hero der Detailseiten) --- */
.trip-actions--on-dark .trip-action {
    border-color: var(--gold-45, rgba(210, 196, 133, .45));
    color: var(--cream, #fdf1d1);
}
.trip-actions--on-dark .trip-action:hover {
    border-color: var(--gold, #d2c485);
    background: var(--cream-06, rgba(253, 241, 209, .06));
}
.trip-actions--on-dark .trip-action--save.is-saved {
    border-color: var(--gold, #d2c485);
    background: var(--gold-25, rgba(210, 196, 133, .25));
    color: var(--cream, #fdf1d1);
}
.trip-actions--on-dark .trip-action--save.is-saved .trip-action__icon {
    color: var(--gold, #d2c485);
}
.trip-actions--on-dark .trip-actions__link {
    color: var(--gold, #d2c485);
}
.trip-actions--on-dark .trip-actions__count {
    background: var(--gold, #d2c485);
    color: var(--ink, #1e1122);
}

/* Sehr schmale Geraete: Buttons duerfen umbrechen und volle Breite
   nutzen, damit die Beschriftung lesbar bleibt. */
@media (max-width: 380px) {
    .trip-actions {
        gap: 8px;
    }
    .trip-actions .trip-action {
        flex: 1 1 100%;
    }
}

/* ==================================================================
   3. Teilen-Menue (Popover)
   Wird per JavaScript ans Ende des <body> gehaengt und mit
   position:fixed am Button ausgerichtet – so kann kein Elternteil
   mit overflow:hidden (z. B. der Hero) das Menue abschneiden.
   ================================================================== */
.share-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 140;
    width: min(19rem, calc(100vw - 24px));
    padding: 10px;
    border-radius: var(--radius, 14px);
    border: 1px solid var(--gold-45, rgba(210, 196, 133, .45));
    background: var(--ink, #1e1122);
    color: var(--cream, #fdf1d1);
    box-shadow: 0 14px 38px rgba(30, 17, 34, .38);
    font-family: var(--font-body, sans-serif);
}
.share-menu[hidden] {
    display: none;
}
.share-menu__title {
    margin: 4px 6px 8px;
    font-family: var(--font-body, sans-serif);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold, #d2c485);
}
/* Der Gegenstand des Teilens. Bewusst NICHT in Versalien wie die
   Ueberschrift darueber: Reisetitel sind lang, und gesperrte
   Grossbuchstaben machen sie schwer lesbar und dreizeilig. */
.share-menu__subject {
    margin: -4px 6px 10px;
    font-family: var(--font-body, sans-serif);
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--cream, #fdf1d1);
    overflow-wrap: anywhere;
}
.share-menu__subject[hidden] {
    display: none;
}
.share-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
}
.share-menu__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 8px);
    background: transparent;
    color: var(--cream, #fdf1d1);
    font-family: inherit;
    font-size: .93rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.share-menu__item:hover {
    background: var(--cream-06, rgba(253, 241, 209, .06));
    border-color: var(--gold-25, rgba(210, 196, 133, .25));
}
.share-menu__item:focus-visible {
    outline: 3px solid var(--gold, #d2c485);
    outline-offset: -1px;
}
/* Icons sind eigenstaendige Inline-SVGs bzw. Buchstaben – keine
   Icon-Schrift, kein externes Skript, keine Netzwerkanfrage. */
.share-menu__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--gold, #d2c485);
}
.share-menu__icon--letter {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
}

/* Manuelles Kopieren, falls die Zwischenablage nicht erreichbar ist. */
.share-manual {
    margin: 8px 6px 4px;
    padding-top: 10px;
    border-top: 1px solid var(--gold-25, rgba(210, 196, 133, .25));
}
.share-manual[hidden] {
    display: none;
}
.share-manual label {
    display: block;
    margin-bottom: 6px;
    font-size: .8rem;
    color: var(--cream-80, rgba(253, 241, 209, .8));
}
.share-manual input {
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid var(--gold-45, rgba(210, 196, 133, .45));
    border-radius: var(--radius-sm, 8px);
    background: rgba(253, 241, 209, .06);
    color: var(--cream, #fdf1d1);
    font-family: inherit;
    font-size: .85rem;
}
.share-manual input:focus-visible {
    outline: 3px solid var(--gold, #d2c485);
    outline-offset: 1px;
}

/* ==================================================================
   4. Merkzettel-Seite
   ================================================================== */
.mz-intro {
    max-width: 780px;
}
.mz-summary {
    margin-top: 14px;
    font-weight: 600;
    color: var(--gold-deep, #bca572);
}

.mz-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 24px;
}
.mz-toolbar[hidden] {
    display: none;
}

.mz-notice {
    margin-top: 22px;
    padding: 16px 20px;
    border: 1px solid var(--gold-45, rgba(210, 196, 133, .45));
    border-left: 5px solid var(--gold, #d2c485);
    border-radius: var(--radius, 14px);
    background: var(--gold-12, rgba(210, 196, 133, .12));
    font-size: .93rem;
}
.mz-notice[hidden] {
    display: none;
}

/* --- Kartenraster --- */
.mz-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 32px;
    list-style: none;
    padding: 0;
}
.mz-list[hidden] {
    display: none;
}
@media (max-width: 1080px) {
    .mz-list {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .mz-list {
        grid-template-columns: 1fr;
    }
}

.mz-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--plum-12, rgba(42, 28, 51, .12));
    border-radius: var(--radius, 14px);
    overflow: hidden;
    box-shadow: var(--shadow-soft, 0 4px 16px rgba(30, 17, 34, .10));
}

/* Festes Seitenverhaeltnis: das Raster bleibt ruhig, unabhaengig
   davon, welche Bildgroesse gespeichert wurde.
   Das Verhaeltnis steht bewusst am <img> selbst (wie bei .hl-card img
   auf den Detailseiten). Am Container wuerde die Eigenhoehe des Bildes
   die Vorgabe ueberstimmen, weil der Inhalt die Mindesthoehe bestimmt. */
.mz-card__media {
    background: var(--plum-06, rgba(42, 28, 51, .06));
    overflow: hidden;
}
.mz-card__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
/* Die Ersatzflaeche hat keinen hoehenbestimmenden Inhalt – hier traegt
   der Container das Seitenverhaeltnis. */
.mz-card__media--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 2;
    background: linear-gradient(135deg, var(--plum, #2a1c33), var(--plum-mid, #3e2a4a));
}
.mz-card__mark {
    font-size: 1.9rem;
    color: var(--gold, #d2c485);
    opacity: .85;
}

.mz-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px 20px 20px;
}
.mz-card__region {
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-deep, #bca572);
    margin-bottom: 8px;
}

/* Reisecode neben der Region (Auftrag 9F, B-9F-4).
   Zwei Reisen koennen denselben Namen tragen; erst der Code macht die Karte
   eindeutig. Er steht in derselben Zeile wie die Region und erbt deren
   Auszeichnung - keine zweite Zeile, keine zusaetzliche Hoehe, kein neuer
   Rhythmus in der Karte. Die Ziffern stehen bewusst nicht in Versalien-
   Sperrung allein: text-transform wirkt auf sie ohnehin nicht, aber die
   Laufweite der Elternregel wuerde "W-1284" auseinanderziehen. */
.mz-card__code {
    letter-spacing: .08em;
}
.mz-card__trenner {
    opacity: .6;
}
.mz-card__title {
    font-family: var(--font-display, serif);
    font-size: 1.12rem;
    line-height: 1.3;
    font-weight: 700;
    margin: 0 0 10px;
    /* Lange Reisetitel duerfen umbrechen, nicht ueberlaufen. */
    overflow-wrap: anywhere;
}
.mz-card__link {
    color: inherit;
    text-decoration: none;
}
.mz-card__link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.mz-card__link:focus-visible {
    outline: 3px solid var(--gold, #d2c485);
    outline-offset: 2px;
}
.mz-card__facts {
    list-style: none;
    /* 12 statt 16: Die Abstandsleiter im Kartenkoerper lautet damit
       8 (Region) / 10 (Titel) / 12 (Fakten) – eine steigende Reihe
       statt eines Sprungs von 10 auf 16. Der Aktionsblock traegt
       seit der Teilen-Zeile zwei Zeilen und damit genug eigenes
       Gewicht; er braucht den groesseren Abstand nicht mehr, um
       sich abzusetzen. Gemessen 21.08.2026: 4 px je Karte. */
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: .86rem;
    color: var(--ink-70, rgba(30, 17, 34, .70));
}
.mz-card__facts li {
    display: inline-flex;
    align-items: center;
}
.mz-card__facts li + li::before {
    content: "·";
    margin-right: 10px;
    color: var(--gold-deep, #bca572);
}
/* --- Aktionsreihe: ansehen / teilen / entfernen ---------------
   Die Reihenfolge im HTML ist die Rangfolge. Das CSS sortiert sie
   NICHT um – Auge, Tastatur und Vorlesesoftware sehen dieselbe.

   WARUM ZWEI ZEILEN UND NICHT DREI KNOEPFE NEBENEINANDER
   ------------------------------------------------------
   Gemessen am 21.08.2026 im echten Kartenraster. Mindestbreiten
   ohne Umbruch: "Reise ansehen" 142 px, "Entfernen" 109 px,
   "Teilen" mit Symbol und Wort 100 px. Die Aktionsreihe einer
   Karte ist aber nur so breit:

     320-430 px (1 Spalte)   234-344 px
     768 px    (2 Spalten)   309 px
     1024 px   (2 Spalten)   437 px
     ab 1280   (3 Spalten)   322 px

   Drei nebeneinander brauchen 371 px. Das passt bei 1024 px – und
   sonst nirgends: nicht auf einem einzigen Telefon, nicht bei
   768 px und auf keiner Desktopbreite ab 1280 px, weil das Raster
   dort auf drei Spalten geht und die Karte WIEDER schmal wird.
   Eine Zeile waere also die Ausnahme, nicht die Regel.

   Deshalb: "Reise ansehen" nimmt Zeile eins allein – damit ist es
   auf jeder Breite unuebersehbar die primaere Aktion, breiter als
   zuvor. Teilen und Entfernen teilen sich Zeile zwei. EIN Aufbau
   fuer alle Breiten, kein Umschaltpunkt, keine Variante, die nur
   der Entwickler auf seinem Bildschirm sieht. */
.mz-card__actions {
    display: flex;
    flex-wrap: wrap;
    /* Zeilenabstand 8, Spaltenabstand 10. Der senkrechte Abstand
       darf kleiner sein als der waagerechte: senkrecht trennt er
       die primaere Aktion von dem Paar darunter, waagerecht zwei
       gleichrangige Knoepfe. 8 ist die naechste Stufe der
       Abstandsleiter; 6 und 4 sehen nach Versehen aus, und 0 laesst
       die Trefferflaeche von "Entfernen" unmittelbar an die des
       Hauptknopfes stossen – ein Vergreifen mit Folgen. */
    gap: 8px 10px;
    margin-top: auto;       /* Buttons stehen bei ungleich langen Titeln buendig */
}
/* Zeilenhoehe festnageln – der Grund ist nicht Kosmetik:
   .mz-card__cta ist ein <a> und erbt die Zeilenhoehe 1,65 des
   Fliesstextes; .mz-card__remove und .mz-card__share sind <button>
   und bekommen vom Browser "normal". Dadurch war der Hauptknopf
   47 px hoch, die beiden anderen 44 px – ein Unterschied, den
   niemand entschieden hat. Mit 1,2 sind alle drei 44 px hoch
   (Mindesthoehe), die Zeile wirkt als ein Block, und die Karte
   spart 4 px (3 px in der Reihe, 1 px Rundung). Der Text steht
   weiter mittig (align-items:center); geprueft, dass keine Glyphe
   beschnitten wird (scrollHeight == clientHeight). */
.mz-card__actions .btn,
.mz-card__actions .mz-card__share {
    line-height: 1.2;
}
.mz-card__actions .btn {
    flex: 1 1 auto;
    font-size: .88rem;
    padding: 10px 16px;
    min-height: 44px;
}
/* Zeile eins allein. Der Selektor nennt bewusst auch den Elternteil:
   .mz-card__actions .btn ist zweigliedrig und wuerde eine einzelne
   Klasse ueberstimmen – die Regel waere vorhanden und wirkungslos. */
.mz-card__actions .mz-card__cta {
    flex: 1 1 100%;
}

/* Teilen. Dieselbe Box wie die Knoepfe daneben (Polsterung, Rahmen-
   staerke, Mindesthoehe), damit Zeile zwei eine gemeinsame Achse
   hat. Unterschieden wird ueber die FARBE des Rahmens und des
   Symbols, nicht ueber die Groesse:
     Reise ansehen  gefuellt gold      – primaer
     Teilen         Goldkante          – die einladende Nebenaktion
     Entfernen      Pflaumenkante      – neutrale Verwaltung
   Die Beschriftung steht in Pflaume, nicht in Gold: Gold traegt auf
   hellen Flaechen Linien, keinen Text. */
.mz-card__share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 44px;
    padding: 10px 14px;
    border: 2px solid var(--gold-deep, #bca572);
    border-radius: var(--radius-sm, 8px);
    background: transparent;
    color: var(--plum, #2a1c33);
    font-family: var(--font-body, sans-serif);
    font-size: .88rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}
.mz-card__share:hover {
    background: var(--gold-12, rgba(210, 196, 133, .12));
}
.mz-card__share:focus-visible {
    outline: 3px solid var(--gold, #d2c485);
    outline-offset: 2px;
}
/* Das Symbol ist eine Linie – hier darf die CI-Goldstufe stehen.
   aria-hidden im Markup: den Namen traegt das aria-label des
   Schalters, der die Reise nennt. */
.mz-card__share-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--gold-deep, #bca572);
}

/* --- Leere Ansicht --- */
.mz-empty {
    margin-top: 32px;
    max-width: 720px;
    padding: 34px 32px;
    border: 1px solid var(--gold-45, rgba(210, 196, 133, .45));
    border-left: 5px solid var(--gold, #d2c485);
    border-radius: var(--radius, 14px);
    background: #fff;
    box-shadow: var(--shadow-soft, 0 4px 16px rgba(30, 17, 34, .10));
}
.mz-empty[hidden] {
    display: none;
}
.mz-empty h2 {
    font-size: 1.3rem;
    margin-bottom: 12px;
}
.mz-empty p {
    margin-bottom: 18px;
}

/* --- Bestaetigungsdialog --- */
.mz-dialog {
    width: min(30rem, calc(100vw - 32px));
    padding: 28px 30px;
    border: 1px solid var(--gold-45, rgba(210, 196, 133, .45));
    border-radius: var(--radius, 14px);
    background: #fff;
    color: var(--ink, #1e1122);
    font-family: var(--font-body, sans-serif);
    box-shadow: 0 24px 60px rgba(30, 17, 34, .35);
}
.mz-dialog::backdrop {
    background: rgba(30, 17, 34, .55);
}
.mz-dialog h2 {
    font-size: 1.25rem;
    margin-bottom: 12px;
}
.mz-dialog p {
    font-size: .95rem;
    margin-bottom: 22px;
}
.mz-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}
.mz-dialog__actions .btn {
    min-height: 44px;
}