/*!
 * aftersnap Snap-in v1 -- Layouts, Bildverhalten, Lightbox.
 *
 * EINE Datei fuer zwei Orte: Das Einbettungs-Skript zieht sie auf der fremden
 * Website nach, und das Dashboard bindet sie ein. Nur so zeigt das Raster im
 * Dashboard wirklich dasselbe wie die Seite der Fotografin -- zwei getrennte
 * Stylesheets waeren nach dem dritten Layout auseinandergedriftet.
 *
 * Alles unter .as- ist Namensraum, damit fremdes CSS nicht getroffen wird und
 * unseres nichts trifft.
 */

/* Auf fremden Seiten gilt mal border-box, mal content-box. Ohne diese Zeile
   rechnet dieselbe Mindesthoehe je nach Gastgeber unterschiedlich -- und die
   Kachel, die hier passt, laeuft dort ueber. */
.as-snapin,
.as-snapin *,
.as-snapin *::before,
.as-snapin *::after { box-sizing: border-box; }

.as-snapin {
    --as-snapin-gap: 12px;
    --as-snapin-radius: 8px;
    --as-snapin-zeile: 220px;
    /* Kurve aus dem Bewegungs-Regelwerk: startet schnell, kommt sanft an. */
    --as-snapin-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

.as-snapin__bild,
.as-snapin > * {
    border-radius: var(--as-snapin-radius);
    overflow: hidden;
    background: rgba(128, 128, 128, 0.08);
}

.as-snapin img {
    display: block;
    max-width: 100%;
}

/* ── Layout 1: Raster ───────────────────────────────────────────────────────
   Gleichmaessige Kacheln. Der ruhigste Auftritt, gut fuer viele Bilder. */
.as-snapin--raster {
    display: grid;
    gap: var(--as-snapin-gap);
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.as-snapin--raster > * { aspect-ratio: 1; }
.as-snapin--raster img { width: 100%; height: 100%; object-fit: cover; }

/* ── Layout 2: Reihen ───────────────────────────────────────────────────────
   Buendige Zeilen gleicher Hoehe, Breite nach Seitenverhaeltnis. Das ::after
   mit riesigem flex-grow haelt die LETZTE Zeile links, statt ihre zwei Bilder
   ueber die ganze Breite zu ziehen. */
.as-snapin--reihen { display: flex; flex-wrap: wrap; gap: var(--as-snapin-gap); }
.as-snapin--reihen > * {
    height: var(--as-snapin-zeile);
    flex-grow: var(--as-snapin-ratio, 1.5);
    flex-basis: calc(var(--as-snapin-ratio, 1.5) * var(--as-snapin-zeile));
}
.as-snapin--reihen img { width: 100%; height: 100%; object-fit: cover; }
.as-snapin--reihen::after { content: ''; flex-grow: 999999; }

/* ── Layout 3: Spalten ──────────────────────────────────────────────────────
   Natuerliche Hoehen, kein Beschnitt. Die Reihenfolge laeuft die Spalten
   hinunter, nicht quer -- deshalb heisst es Spalten und nicht Mauerwerk. */
.as-snapin--spalten { columns: 3; column-gap: var(--as-snapin-gap); }
.as-snapin--spalten > * {
    break-inside: avoid;
    display: block;
    margin: 0 0 var(--as-snapin-gap);
}
.as-snapin--spalten img { width: 100%; height: auto; }

/* ── Layout 4: Streifen ─────────────────────────────────────────────────────
   Eine Zeile zum Wischen. Fuer Beitraege, in denen die Bilder nicht die halbe
   Seite einnehmen sollen. */
.as-snapin--streifen {
    display: flex;
    gap: var(--as-snapin-gap);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 8px;
    scrollbar-width: thin;
}
.as-snapin--streifen > * {
    flex: 0 0 auto;
    height: 260px;
    aspect-ratio: var(--as-snapin-ratio, 1.5);
    scroll-snap-align: start;
}
.as-snapin--streifen img { width: 100%; height: 100%; object-fit: cover; }

/* ── Layout 5: Gross ────────────────────────────────────────────────────────
   Einspaltig, volle Breite. Ein Bild nach dem anderen. */
.as-snapin--gross {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--as-snapin-gap) * 1.75);
}
.as-snapin--gross img { width: 100%; height: auto; }

/* ── Layout 6: Mosaik ───────────────────────────────────────────────────────
   Asymmetrisches Raster: ein grosses Feld, dann kleinere in wechselndem
   Rhythmus. Das Muster wiederholt sich alle sechs Bilder, deshalb :nth-child(6n).
   Beschnitt ist hier gewollt -- die Form macht das Bild, nicht umgekehrt. */
.as-snapin--mosaik {
    display: grid;
    gap: var(--as-snapin-gap);
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 140px;
    grid-auto-flow: dense;
}
.as-snapin--mosaik > * { grid-column: span 1; grid-row: span 1; }
.as-snapin--mosaik:not(.as-snapin--zaehlt) > *:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; }
.as-snapin--mosaik:not(.as-snapin--zaehlt) > *:nth-child(6n + 4) { grid-column: span 2; grid-row: span 1; }
.as-snapin--mosaik img { width: 100%; height: 100%; object-fit: cover; }

/* ── Layout 7: Magazin ──────────────────────────────────────────────────────
   Ein grosses Bild, zwei kleinere daneben, und die Seite wechselt mit jedem
   Block. Das ist der Rhythmus einer aufgeschlagenen Doppelseite. */
.as-snapin--magazin {
    display: grid;
    gap: var(--as-snapin-gap);
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 190px;
}
.as-snapin--magazin > * { grid-column: span 1; grid-row: span 1; }
.as-snapin--magazin:not(.as-snapin--zaehlt) > *:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; }
.as-snapin--magazin:not(.as-snapin--zaehlt) > *:nth-child(6n + 4) { grid-column: span 2; grid-row: span 2; grid-column-start: 2; }
.as-snapin--magazin:not(.as-snapin--zaehlt) > *:nth-child(6n + 5),
.as-snapin--magazin:not(.as-snapin--zaehlt) > *:nth-child(6n + 6) { grid-column-start: 1; }
.as-snapin--magazin img { width: 100%; height: 100%; object-fit: cover; }

/* ── Layout 8: Versetzt ─────────────────────────────────────────────────────
   Zwei Spalten, die rechte um eine halbe Kachel nach unten geschoben. Die
   natuerlichen Hoehen bleiben, nichts wird beschnitten -- der Versatz allein
   nimmt dem Raster die Strenge. */
.as-snapin--versetzt {
    display: grid;
    gap: calc(var(--as-snapin-gap) * 1.5);
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
}
.as-snapin--versetzt:not(.as-snapin--zaehlt) > *:nth-child(even) { margin-top: 3.5rem; }
.as-snapin--versetzt img { width: 100%; height: auto; }

/* ── Layout 9: Setzkasten ───────────────────────────────────────────────────
   Faecher unterschiedlicher Groesse, lueckenlos ineinandergesetzt. Jede Zeile
   fuellt die volle Breite, die Zielhoehe wechselt von Zeile zu Zeile, und zwei
   Querformate koennen uebereinander in eine schmale Spalte.

   Das einzige Layout, das nicht ohne Skript auskommt: Es muss messen und
   rechnen. /s/raster.js setzt die Kacheln absolut, deshalb steht hier nur der
   Rahmen. Laeuft das Skript nicht, liegen alle Kacheln uebereinander -- darum
   bekommt der Behaelter erst mit data-as-gesetzt seine absolute Positionierung.
   Vorher stapelt er sie schlicht untereinander, und man sieht Bilder statt
   eines Haufens. */
.as-snapin--setzkasten { display: block; }
.as-snapin--setzkasten > * { margin: 0 0 var(--as-snapin-gap); }
.as-snapin--setzkasten img { width: 100%; height: 100%; object-fit: cover; }

.as-snapin--setzkasten[data-as-gesetzt] { position: relative; }
.as-snapin--setzkasten[data-as-gesetzt] > * { position: absolute; margin: 0; }

/* ── Rhythmus statt Kindposition ────────────────────────────────────────────
   Mosaik, Magazin und Versetzt setzen ihre Kacheln nach der Position im
   Sechser- bzw. Zweiertakt. Solange nur Bilder im Raster stehen, kann :nth-child
   das zaehlen. Ein Zwischentitel ist aber auch ein Kind: Ab dem ersten Titel
   waere jedes folgende Bild um eine Stelle verschoben, und bei Versetzt kippte
   sogar die Seite des Versatzes.

   Also zaehlt das Skript, nicht das CSS: Jedes BILD traegt seine Stelle im Takt
   als Klasse, Titel zaehlen nicht mit. Die Regeln oben tragen dafuer
   :not(.as-snapin--zaehlt) -- sie gelten nur noch fuer Ausschnitte, die ein
   aelteres v1.js gebaut hat, und koennen mit dem Uebergangsblock am Ende der
   Datei zusammen verschwinden. Beide Saetze schliessen sich gegenseitig aus:
   altes Markup hat keine Rhythmus-Klassen, neues traegt .as-snapin--zaehlt. */
.as-snapin--mosaik > .as-snapin-i1 { grid-column: span 2; grid-row: span 2; }
.as-snapin--mosaik > .as-snapin-i4 { grid-column: span 2; grid-row: span 1; }
.as-snapin--magazin > .as-snapin-i1 { grid-column: span 2; grid-row: span 2; }
.as-snapin--magazin > .as-snapin-i4 { grid-column: span 2; grid-row: span 2; grid-column-start: 2; }
.as-snapin--magazin > .as-snapin-i5,
.as-snapin--magazin > .as-snapin-i6 { grid-column-start: 1; }
.as-snapin--versetzt > .as-snapin-gerade { margin-top: 3.5rem; }

/* ── Zwischentitel ──────────────────────────────────────────────────────────
   Eine kurze Ueberschrift zwischen den Bildern. Was daraus wird, entscheidet
   das Layout: In Reihen, Spalten und Gross laeuft sie als Trenner ueber die
   volle Breite, in den uebrigen Rastern sitzt sie als grosse Kachel zwischen
   den Bildern. Im Streifen erscheint sie nicht -- eine Zeile zum Wischen hat
   keine Abschnitte.

   Beide Formen stehen als AUFZAEHLUNG der Layouts da, nicht als Grundform plus
   Ausnahme. Der erste Versuch hatte die Kachel als Grundform und die Trenner
   als Ausnahme: In der mobilen Media Query gewann dann die Kachelregel wieder,
   weil beide gleich spezifisch sind und die spaetere Stelle den Zuschlag
   bekommt. Die Trenner hatten auf dem Telefon ploetzlich 100 px Mindesthoehe.
   Aufzaehlen ist laenger und macht solche Rennen unmoeglich. */
.as-snapin__titel {
    font-weight: 600;
    line-height: 1.2;
}

/* ── Kachel ──
   container-type: size macht die Kachel zur Bezugsgroesse fuer cqw/cqh, damit
   die Schrift auf ihre WIRKLICHE Groesse reagieren kann und nicht auf die des
   Fensters. Voraussetzung ist eine Hoehe, die nicht am Inhalt haengt: Raster
   hat aspect-ratio, Mosaik und Magazin feste Zeilen, Versetzt eine
   Mindesthoehe. Ein kuenftiges Layout ohne solche Hoehe wuerde die Kachel
   flachdruecken -- dann gehoert hier eine Zeile dazu. */
.as-snapin--raster .as-snapin__titel,
.as-snapin--spalten .as-snapin__titel,
.as-snapin--mosaik .as-snapin__titel,
.as-snapin--magazin .as-snapin__titel,
.as-snapin--versetzt .as-snapin__titel,
.as-snapin--setzkasten .as-snapin__titel,
.as-snapin--streifen .as-snapin__titel {
    container-type: size;
    display: grid;
    place-items: center;
    text-align: center;
    margin: 0;
    padding: 14px;
    /* break-word, NICHT anywhere: `anywhere` rechnet die Bruchstelle schon in
       die Mindestbreite ein, und der Browser bricht dann auch Woerter, die
       eigentlich passen -- aus "Die Trauung" wurde "Die Trau-ung", obwohl es
       eine Zeile tiefer ganz gestanden haette. `break-word` bricht erst, wenn
       ein Wort wirklich nicht in die Zeile geht.

       Keine Silbentrennung: Ein Trennstrich in einer Ueberschrift sieht nach
       Textsatz-Unfall aus, und die Sprache des Titels kennen wir auf einer
       fremden Seite ohnehin nicht sicher. */
    overflow-wrap: break-word;
}

/* Grosse Kacheln in den asymmetrischen Rastern: Ein Zwischentitel ist ein
   Abschnittswechsel, kein Bild unter vielen. Bei Mosaik und Magazin nimmt er
   dasselbe Feld wie deren grosse Bilder, bei Versetzt (nur zwei Spalten) die
   volle Breite -- eine halbe Spalte waere dort keine grosse Kachel, sondern
   eine schmale. */
.as-snapin--mosaik .as-snapin__titel,
.as-snapin--magazin .as-snapin__titel { grid-column: span 2; grid-row: span 2; }
/* height, NICHT min-height: Unter container-type: size wird die
   Abfragegroesse gerechnet, als waere die Kachel leer -- eine Mindesthoehe
   zaehlt dabei nicht mit, cqh kam als 0 heraus und die Schrift blieb bei
   15 px stehen (gemessen 2026-08-20). Eine feste Hoehe ist hier ohnehin
   richtig: Versetzt hat keine Zeilenhoehe, an der sich die Kachel
   ausrichten koennte. */
.as-snapin--versetzt .as-snapin__titel { grid-column: 1 / -1; height: 190px; }

/* Spalten: Der Titel fliesst als Kachel in der Spalte mit, ohne den
   Spaltenfluss zu unterbrechen. Feste Hoehe aus demselben Grund wie bei
   Versetzt -- in einem Mehrspalten-Kasten haengt die Hoehe sonst am Inhalt,
   und container-type: size drueckte die Kachel flach. 240 px entspricht etwa
   der Hoehe eines Querformats bei drei Spalten. */
.as-snapin--spalten .as-snapin__titel { height: 240px; break-inside: avoid; }

/* Vor dem Skript-Lauf steht der Titel im Fluss und braucht eine Hoehe wie
   bei Spalten und Versetzt; danach setzt das Skript sie. */
.as-snapin--setzkasten .as-snapin__titel { height: 220px; }
.as-snapin--setzkasten[data-as-gesetzt] .as-snapin__titel { height: auto; }

/* Die Schrift steht im Kind, nicht in der Kachel selbst: Ein Element kann
   seine EIGENEN Container-Einheiten nicht benutzen.

   fw und fh kommen aus SnapInAufbau::schriftmass() bzw. der gleichen Rechnung
   im Skript -- fw haelt das laengste Wort in einer Zeile, fh den ganzen Text
   in der Hoehe. Die kleinere Zahl gewinnt, deshalb laeuft keine Kachel ueber.
   clamp deckelt beides ab: Ein Skript von gestern liefert keine Werte, dann
   greifen die Vorgaben. */
.as-snapin__titel > span {
    font-size: clamp(0.95rem, min(var(--as-snapin-fw, 20) * 1cqw, var(--as-snapin-fh, 30) * 1cqh), 6rem);
}

/* ── Trenner ──
   Nur noch Reihen und Gross. Der Titel steht dort als Zeile ueber der vollen
   Breite, ohne Kasten. overflow zurueck auf sichtbar, damit die Linie darunter
   nicht abgeschnitten wird. */
.as-snapin--reihen .as-snapin__titel,
.as-snapin--gross .as-snapin__titel {
    display: block;
    background: none;
    border-radius: 0;
    overflow: visible;
    min-height: 0;
    padding: 0;
    text-align: center;
    font-size: 1.5rem;
}
.as-snapin--reihen .as-snapin__titel > span,
.as-snapin--gross .as-snapin__titel > span { font-size: inherit; }

.as-snapin--reihen .as-snapin__titel { flex: 0 0 100%; height: auto; margin: 30px 0 20px; }
.as-snapin--gross .as-snapin__titel { margin: 40px 0 26px; }

/* Die kurze Linie macht aus einer Zeile Text einen Abschnittswechsel.
   currentColor, weil der Untergrund der fremden Seite unbekannt ist. */
.as-snapin--reihen .as-snapin__titel::after,
.as-snapin--gross .as-snapin__titel::after {
    content: '';
    display: block;
    width: 48px;
    height: 1px;
    margin: 14px auto 0;
    background: currentColor;
    opacity: 0.25;
}

/* Streifen: quadratische Kachel zwischen den Bildern. Ohne eigenes
   aspect-ratio erbte sie die 1.5 der Bilder und waere 390 px breit -- ein
   Zwischentitel soll den Streifen gliedern, nicht ihn dominieren.

   Bis 2026-08-20 war der Titel hier ausgeblendet und nur im Dashboard blass
   sichtbar. Das hiess: Die Fotografin sah beim Einrichten etwas, das ihre
   Besucher nie zu sehen bekamen. Jetzt zeigt ihn beides. */
.as-snapin--streifen .as-snapin__titel { aspect-ratio: 1; }

/* ── Schrift der Zwischentitel ──────────────────────────────────────────────
   Ohne Wahl steht hier nichts, und der Titel erbt die Schrift der fremden
   Seite. Wer eine waehlt, bekommt sie von unserem Server: Die Dateien liegen
   unter /fonts/overlay und tragen dort Access-Control-Allow-Origin, sonst
   verweigerte der Browser sie auf jeder fremden Domain. */
.as-snapin-s-anton       .as-snapin__titel { font-family: 'Anton', sans-serif; }
.as-snapin-s-antonio     .as-snapin__titel { font-family: 'Antonio', sans-serif; }
.as-snapin-s-bitter      .as-snapin__titel { font-family: 'Bitter', serif; }
.as-snapin-s-caveat      .as-snapin__titel { font-family: 'Caveat', cursive; }
.as-snapin-s-cormorant   .as-snapin__titel { font-family: 'Cormorant Garamond', serif; }
.as-snapin-s-great-vibes .as-snapin__titel { font-family: 'Great Vibes', cursive; }
.as-snapin-s-inter       .as-snapin__titel { font-family: 'Inter', sans-serif; }
.as-snapin-s-lora        .as-snapin__titel { font-family: 'Lora', serif; }
.as-snapin-s-montserrat  .as-snapin__titel { font-family: 'Montserrat', sans-serif; }
.as-snapin-s-playfair    .as-snapin__titel { font-family: 'Playfair Display', serif; }

/* ── Der Streifen laeuft ────────────────────────────────────────────────────
   Eine Endlosschleife, die beim Hovern stehen bleibt UND sich weiter von Hand
   schieben laesst.

   Genau daran ist die erste Fassung gescheitert: Sie schob ein Band per
   transform, und damit war natives Scrollen weg -- kein Wischen mehr, kein
   Trackpad. Jetzt bleibt der Behaelter ein gewoehnlicher Scroll-Bereich, und
   das Skript zaehlt scrollLeft langsam hoch. Wischen und Automatik teilen sich
   dieselbe Achse, statt sich zu bekaempfen.

   Nahtlos, weil das Skript die Bilder einmal verdoppelt: Sobald die Strecke
   einer Runde erreicht ist, springt scrollLeft um genau diese Strecke zurueck.
   An dieser Stelle sieht der Streifen exakt gleich aus, der Sprung faellt nicht
   auf.

   scroll-snap muss weg: Einrasten und gleichmaessiges Ziehen vertragen sich
   nicht. */
.as-snapin--streifen.as-snapin-laeuft { scroll-snap-type: none; scroll-behavior: auto; }

@media (max-width: 700px) {
    .as-snapin--mosaik { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 110px; }
    .as-snapin--magazin { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
    .as-snapin--magazin:not(.as-snapin--zaehlt) > *:nth-child(6n + 4) { grid-column-start: auto; }
    .as-snapin--versetzt:not(.as-snapin--zaehlt) > *:nth-child(even) { margin-top: 2rem; }
    .as-snapin--magazin > .as-snapin-i4 { grid-column-start: auto; }
    .as-snapin--versetzt > .as-snapin-gerade { margin-top: 2rem; }
    .as-snapin--raster .as-snapin__titel,
    .as-snapin--spalten .as-snapin__titel,
    .as-snapin--mosaik .as-snapin__titel,
    .as-snapin--magazin .as-snapin__titel,
    .as-snapin--versetzt .as-snapin__titel,
    .as-snapin--streifen .as-snapin__titel { padding: 10px; }
    .as-snapin--versetzt .as-snapin__titel { height: 150px; }
    .as-snapin--spalten .as-snapin__titel { height: 190px; }
    .as-snapin--reihen .as-snapin__titel,
    .as-snapin--gross .as-snapin__titel { font-size: 1.3rem; }
    .as-snapin--gross .as-snapin__titel { margin: 30px 0 20px; }
    .as-snapin--spalten { columns: 2; }
    .as-snapin--reihen { --as-snapin-zeile: 150px; }
    .as-snapin--streifen > * { height: 200px; }
}
@media (max-width: 460px) {
    .as-snapin--spalten { columns: 1; }
}

/* ── Bildfilter ─────────────────────────────────────────────────────────────
   Reine Anzeige. Sie liegen als CSS ueber den Bildern und aendern an den
   Dateien nichts -- ein Filter laesst sich jederzeit zuruecknehmen, und das
   Original bleibt, was es war. Deshalb auch auf dem Bild in der Lightbox: Was
   man anklickt, soll aussehen wie das, was man angeklickt hat.

   Zurueckhaltend dosiert: Ein Filter, der das Foto ueberschreibt, ist kein
   Filter mehr, sondern ein anderes Bild. */
/* ── Warum eine Variable und nicht direkt `filter` ──────────────────────────
 *
 * `filter` ist EINE Eigenschaft, keine Liste, die sich ergaenzt. Die
 * Hover-Regel weiter unten setzt ebenfalls `filter` -- und hat damit den
 * gewaehlten Look schlicht ueberschrieben: Beim Darueberfahren war das Bild
 * ploetzlich wieder farbig (gemeldet 2026-08-20).
 *
 * Deshalb steht der Look in einer Variablen, und jede Regel, die `filter`
 * setzt, baut ihn mit ein.
 *
 * Der Vorgabewert ist brightness(1) und nicht `none`: `none brightness(1.04)`
 * waere ein ungueltiger Wert, und der Browser wuerfe die ganze Regel weg --
 * dann fehlte beim Hovern die Aufhellung. brightness(1) tut nichts und laesst
 * sich verketten. */
/* „Ohne Look" ist eine WAHL, kein leeres Feld: Ein einzelnes Bild darf sich
   dem Look der Galerie entziehen. Ohne diese Zeile setzte die Klasse nichts,
   die Variable der Galerie bliebe stehen und das Bild waere trotz Wahl
   schwarzweiss. brightness(1) statt none, weil `none brightness(1.04)` in der
   Hover-Regel ein ungueltiger Wert waere. */
.as-snapin-f-keiner       { --as-snapin-look: brightness(1); }
.as-snapin-f-schwarzweiss { --as-snapin-look: grayscale(1); }
.as-snapin-f-retro        { --as-snapin-look: sepia(.45) contrast(1.06) saturate(.85); }
.as-snapin-f-warm         { --as-snapin-look: saturate(1.12) sepia(.18) hue-rotate(-8deg); }
.as-snapin-f-kuehl        { --as-snapin-look: saturate(.9) hue-rotate(12deg) brightness(1.02); }
.as-snapin-f-matt         { --as-snapin-look: contrast(.88) saturate(.82) brightness(1.06); }
.as-snapin-f-kraeftig     { --as-snapin-look: contrast(1.12) saturate(1.28); }

.as-snapin img,
.as-snapin-lb__bild { filter: var(--as-snapin-look, brightness(1)); }

/* ── Bildverhalten ──────────────────────────────────────────────────────────
   Zurueckhaltend mit Absicht: Ein Raster sieht man oft, und was man oft sieht,
   darf nicht auffallen. Nur echte Zeiger, nie auf Tippgeraeten -- dort loeste
   eine Beruehrung den Hover-Zustand aus und liesse ihn stehen. */
/* Die Kacheln sind Knoepfe (klickbar, mit Tastatur erreichbar) und bringen
   deshalb den Rahmen, das Innenmass und die Schrift des Browsers mit. Alles
   drei muss weg, sonst steht um jedes Bild ein grauer Kasten. */
/* Ohne Lightbox ist die Kachel kein Knopf mehr, sondern nur ein Bild. Dann
   darf sie auch nicht so aussehen. */
.as-snapin-ohne-lb .as-snapin__bild { cursor: default; }

.as-snapin__bild {
    display: block;
    padding: 0;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
    -webkit-appearance: none;
    appearance: none;
    cursor: zoom-in;
}
.as-snapin__bild img { transition: transform 320ms ease, filter 320ms ease; }

@media (hover: hover) and (pointer: fine) {
    /* Look UND Aufhellung, nicht Look ODER Aufhellung. */
    .as-snapin__bild:hover img { transform: scale(1.035); filter: var(--as-snapin-look, brightness(1)) brightness(1.04); }
    .as-snapin__bild:active img { transform: scale(1.01); transition-duration: 120ms; }
}

.as-snapin__bild:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Die Marke steht UNTER der Galerie, mittig, und gehoert bewusst NICHT mehr in
   den Layout-Behaelter. Als Kind des Rasters landete sie beim Streifen hinter
   dem letzten Bild und scrollte mit aus dem Blick (gemeldet 2026-08-20). Jetzt
   ist sie ein Geschwister und steht in jedem Layout an derselben Stelle. */
.as-snapin__marke {
    display: block;
    margin: 14px 0 0;
    text-align: center;
    font: 400 13px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
    color: inherit;
    opacity: 0.55;
    text-decoration: none;
    transition: opacity 200ms ease;
}
.as-snapin__marke:hover { opacity: 1; text-decoration: underline; }

/* ── Lightbox ───────────────────────────────────────────────────────────────
   Der Hintergrund kommt frueher und schneller als das Bild: Erst wird es
   dunkel, dann steht das Foto da. Andersherum wirkte es, als schwebe das Bild
   im Nichts. */
.as-snapin-lb {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(16px, 3vmin);
    background: rgba(12, 12, 14, 0.9);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    backdrop-filter: blur(14px) saturate(1.1);
    opacity: 0;
    transition: opacity 200ms ease-out;
    touch-action: none;
}
.as-snapin-lb[data-an] { opacity: 1; }

.as-snapin-lb__bild {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 260ms var(--as-snapin-ease-out, ease-out),
                transform 260ms var(--as-snapin-ease-out, ease-out);
    will-change: transform;
}
.as-snapin-lb[data-an] .as-snapin-lb__bild { opacity: 1; transform: scale(1); }

/* Beim Blaettern nur das Bild tauschen, nicht die ganze Buehne. */
.as-snapin-lb[data-blaettert] .as-snapin-lb__bild { opacity: 0; transform: scale(0.985); transition-duration: 130ms; }

.as-snapin-lb__knopf {
    position: absolute;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font: 400 22px/1 system-ui, sans-serif;
    cursor: pointer;
    transition: background 180ms ease, transform 160ms var(--as-snapin-ease-out, ease-out), opacity 180ms ease;
}
.as-snapin-lb__knopf:hover { background: rgba(255, 255, 255, 0.18); }
.as-snapin-lb__knopf:active { transform: scale(0.94); }
.as-snapin-lb__knopf:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.as-snapin-lb__zu { top: max(12px, 2vmin); right: max(12px, 2vmin); }
.as-snapin-lb__vor { right: max(12px, 2vmin); top: 50%; margin-top: -22px; }
.as-snapin-lb__zurueck { left: max(12px, 2vmin); top: 50%; margin-top: -22px; }

.as-snapin-lb__zaehler {
    position: absolute;
    bottom: max(14px, 2.5vmin);
    left: 50%;
    transform: translateX(-50%);
    font: 400 13px/1 system-ui, -apple-system, sans-serif;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.02em;
    pointer-events: none;
}

@media (max-width: 700px) {
    /* Auf dem Telefon wird gewischt, nicht geklickt. */
    .as-snapin-lb__vor, .as-snapin-lb__zurueck { display: none; }
}

@media (prefers-reduced-motion: reduce) {

    .as-snapin__bild img,
    .as-snapin-lb, .as-snapin-lb__bild, .as-snapin-lb__knopf { transition-property: opacity; }
    .as-snapin__bild:hover img,
    .as-snapin__bild:active img { transform: none; filter: var(--as-snapin-look, brightness(1)) brightness(1.04); }
    .as-snapin-lb__bild { transform: none; }
    .as-snapin-lb[data-an] .as-snapin-lb__bild { transform: none; }
    .as-snapin-lb[data-blaettert] .as-snapin-lb__bild { transform: none; }
    .as-snapin-lb__knopf:active { transform: none; }
}


/* ── Uebergang: die alten Klassennamen ──────────────────────────────────────
 *
 * Bis zum 2026-08-20 hiessen die Layouts .as-l-* und die Lightbox .as-lb*. Beim
 * Umbenennen ist etwas passiert, das man bei einer Datei mit FESTER Adresse
 * nicht darf: Eine Fassung des Skripts lief noch aus dem Rand-Cache und
 * erzeugte die alten Namen, waehrend diese Datei nur noch die neuen kannte.
 * Ergebnis: kein Layout mehr, weder im Dashboard noch auf fremden Seiten.
 *
 * Deshalb gelten die alten Namen weiter. Sie duerfen weg, wenn sicher keine
 * alte Fassung des Skripts mehr unterwegs ist -- fruehestens einen Tag nach
 * dem Umbau, denn so lange kann eine Kopie am Rand liegen.
 */
.as-l-raster   { display: grid; gap: var(--as-snapin-gap); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.as-l-raster > * { aspect-ratio: 1; border-radius: var(--as-snapin-radius); overflow: hidden; }
.as-l-raster img { width: 100%; height: 100%; object-fit: cover; }

.as-l-reihen   { display: flex; flex-wrap: wrap; gap: var(--as-snapin-gap); }
.as-l-reihen > * { height: var(--as-snapin-zeile); flex-grow: var(--as-ratio, 1.5);
                   flex-basis: calc(var(--as-ratio, 1.5) * var(--as-snapin-zeile));
                   border-radius: var(--as-snapin-radius); overflow: hidden; }
.as-l-reihen img { width: 100%; height: 100%; object-fit: cover; }
.as-l-reihen::after { content: ''; flex-grow: 999999; }

.as-l-spalten  { columns: 3; column-gap: var(--as-snapin-gap); }
.as-l-spalten > * { break-inside: avoid; display: block; margin: 0 0 var(--as-snapin-gap);
                    border-radius: var(--as-snapin-radius); overflow: hidden; }
.as-l-spalten img { width: 100%; height: auto; }

.as-l-streifen { display: flex; gap: var(--as-snapin-gap); overflow-x: auto; padding-bottom: 8px; }
.as-l-streifen > * { flex: 0 0 auto; height: 260px; aspect-ratio: var(--as-ratio, 1.5);
                     border-radius: var(--as-snapin-radius); overflow: hidden; }
.as-l-streifen img { width: 100%; height: 100%; object-fit: cover; }

.as-l-gross    { display: grid; grid-template-columns: 1fr; gap: calc(var(--as-snapin-gap) * 1.75); }
.as-l-gross > * { border-radius: var(--as-snapin-radius); overflow: hidden; }
.as-l-gross img { width: 100%; height: auto; }

/* Die alte Lightbox teilt sich das Aussehen mit der neuen. */
.as-lb { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center;
         justify-content: center; padding: max(16px, 3vmin); background: rgba(12, 12, 14, 0.9);
         -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
         opacity: 0; transition: opacity 200ms ease-out; }
.as-lb[data-an] { opacity: 1; }
.as-lb img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.as-lb button { position: absolute; background: rgba(255, 255, 255, .09); border: 0; color: #fff;
                font-size: 26px; line-height: 1; cursor: pointer; width: 44px; height: 44px;
                border-radius: 999px; }
.as-lb button:hover { background: rgba(255, 255, 255, .18); }
.as-zu { top: 12px; right: 12px; }
.as-vor { right: 12px; top: 50%; margin-top: -22px; }
.as-zurueck { left: 12px; top: 50%; margin-top: -22px; }

/* ── Schriftdateien ─────────────────────────────────────────────────────────
   Wortgleich aus resources/css/overlay-fonts.css. Sie stehen hier ein zweites
   Mal, weil das Dashboard sie ueber das App-Buendel bekommt, die fremde
   Website aber nur diese eine Datei zieht. Die Adressen sind absolut ab
   Wurzel und loesen sich gegen den Ursprung DIESES Stylesheets auf, also
   gegen unseren Server -- nicht gegen die fremde Seite.

   Heruntergeladen wird nichts, solange keine Regel die Familie benutzt. Wer
   keine Schrift waehlt, zahlt fuer diesen Block also keinen einzigen Aufruf.

   Die Adressen tragen ?cors=1. Grund: Die Dateien lagen am Rand schon
   gespeichert, aus der Zeit vor dem Access-Control-Kopf -- und eine Kopie ohne
   den Kopf haette der Browser auf jeder fremden Domain weiter abgewiesen. Ein
   anderer Cache-Schluessel holt sie einmal frisch. Derselbe Griff wie bei
   v1.css?v=N, und er kommt ohne Zugriff auf den Rand-Cache aus.

   SnapInZwischentitelTest haelt beide Dateien aneinander. */
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/overlay/anton-400-latin-ext.woff2?cors=1') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/overlay/anton-400-latin.woff2?cors=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: 'Antonio'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/overlay/antonio-400-latin-ext.woff2?cors=1') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Antonio'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/overlay/antonio-400-latin.woff2?cors=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Antonio'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/overlay/antonio-700-latin-ext.woff2?cors=1') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Antonio'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/overlay/antonio-700-latin.woff2?cors=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/overlay/playfair-400-latin-ext.woff2?cors=1') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/overlay/playfair-400-latin.woff2?cors=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/overlay/playfair-700-latin-ext.woff2?cors=1') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/overlay/playfair-700-latin.woff2?cors=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/overlay/lora-400-latin-ext.woff2?cors=1') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/overlay/lora-400-latin.woff2?cors=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/overlay/lora-700-latin-ext.woff2?cors=1') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/overlay/lora-700-latin.woff2?cors=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/overlay/montserrat-400-latin-ext.woff2?cors=1') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/overlay/montserrat-400-latin.woff2?cors=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/overlay/montserrat-700-latin-ext.woff2?cors=1') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/overlay/montserrat-700-latin.woff2?cors=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/overlay/caveat-400-latin-ext.woff2?cors=1') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/overlay/caveat-400-latin.woff2?cors=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/overlay/caveat-700-latin-ext.woff2?cors=1') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/overlay/caveat-700-latin.woff2?cors=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: 'Great Vibes'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/overlay/great-vibes-400-latin-ext.woff2?cors=1') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Great Vibes'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/overlay/great-vibes-400-latin.woff2?cors=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: 'Bitter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/overlay/bitter-400-latin-ext.woff2?cors=1') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bitter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/overlay/bitter-400-latin.woff2?cors=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bitter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/overlay/bitter-700-latin-ext.woff2?cors=1') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bitter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/overlay/bitter-700-latin.woff2?cors=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ── Cormorant Garamond und Inter ───────────────────────────────────────────
   Diese beiden liegen NICHT unter /fonts/overlay, sondern gehoeren zum
   Designsystem von aftersnap und stehen in resources/css/fonts.css. Fuer das
   Dashboard reicht das, weil dort das App-Buendel laedt. Auf einer fremden
   Website nicht: Dort zieht nur diese Datei, und die beiden fehlten -- die
   Ueberschrift fiel still auf die Systemschrift zurueck (gemessen auf
   mara-foto.aftersnap.io am 2026-08-20).

   Nur aufrechte Schnitte, 400 und der jeweils schwerste. Kursiv braucht eine
   Ueberschrift nicht, und jeder Block ist Gewicht in der Datei. */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpHtKgS4.woff2?cors=1') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYrXtKgS4.woff2?cors=1') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpntKgS4.woff2?cors=1') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2?cors=1') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2?cors=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpHtKgS4.woff2?cors=1') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYrXtKgS4.woff2?cors=1') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpntKgS4.woff2?cors=1') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2?cors=1') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2?cors=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2?cors=1') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2?cors=1') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2?cors=1') format('woff2');
  unicode-range: U+1F00-1FFF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2?cors=1') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2?cors=1') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2?cors=1') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2?cors=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2?cors=1') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2?cors=1') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2?cors=1') format('woff2');
  unicode-range: U+1F00-1FFF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2?cors=1') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2?cors=1') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2?cors=1') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2?cors=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }