/* Ohne JavaScript (Custom Element nicht registriert/nicht :defined): Bild und Rueckseiten-Text stehen einfach lesbar untereinander -- keine Ueberlagerung, kein Klick noetig, kein Inhalt verloren. Mit JavaScript (:defined) wird daraus die Umdreh-Karte. Faerbung ausschliesslich ueber Rollen. Guardlane-Check: traegt den Fall nicht ohne weiteres -- Guardlane hat keine Kunstwerk-/Attributions-Strecke. Bliebe eine todayislife-spezifische Komponente, kein universeller Baustein. Notiert, nicht geloest. */@layer komponenten{.art-flipcard{display:block;max-width:26rem}.art-flipcard__buehne{position:relative}.art-flipcard__vorderseite{margin:0}.art-flipcard__bild{display:block;width:auto;max-width:100%;max-height:var(--art-flipcard-max-hoehe, 20rem);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl)}.art-flipcard__copyright{display:none}.art-flipcard__dreh-hinweis{display:none}/* Bild-Fallback (kein stiller Fallback, siehe art-flipcard.mustache onerror): kaputtes Browser-Icon ausblenden, Vorderseite bekommt sichtbaren Platzhalter. Greift in beiden Modi -- ohne JS (gestapelte Lesefassung, braucht eigene Mindesthoehe, da das img sonst auf 0 kollabiert) und mit JS (:defined, dort bleibt position:absolute/inset:0 aus der Regel weiter unten erhalten, diese Regel ergaenzt nur Darstellung/Zentrierung -- keine Eigenschaftskollision). */.art-flipcard__bild[data-bild-fehlt]{display:none}.art-flipcard__vorderseite:has(.art-flipcard__bild[data-bild-fehlt]){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);min-height:10rem;background:var(--farbe-flaeche);border:1px dashed var(--farbe-linie-stark);border-radius:var(--radius-xl);color:var(--farbe-text-dezent);text-align:center;padding:var(--space-4)}.art-flipcard__vorderseite:has(.art-flipcard__bild[data-bild-fehlt])::after{content:'Bild nicht verfügbar';font-size:var(--text-sm)}/* Fallback-Illustration -- unsichtbar im Normalfall (Bild laedt), nur wenn das Bild danaben data-bild-fehlt traegt sichtbar (Lotti-Audit Punkt 6: reduzierte Portrait-Silhouette statt nackter Graubox mit Systemtext, siehe art-flipcard.mustache fuer die Begruendung des Inline-Einbindungswegs). */.art-flipcard__fallback-icon{display:none}.art-flipcard__vorderseite:has(.art-flipcard__bild[data-bild-fehlt]) .art-flipcard__fallback-icon{display:block;width:3.5rem;height:3.5rem}/* Kein sichtbarer 1px-Rahmen mehr -- shadow-xl statt Linie traegt die Abgrenzung zur Flaeche, wie beim Vorderseiten-Bild (Lotti, 2026-08-18: "Bild bricht direkt zur Flaeche"). */.art-flipcard__rueckseite{margin-block-start:var(--space-4);padding:var(--space-5);background:var(--farbe-grund);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl)}.art-flipcard__ort{font-size:var(--text-xs);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--farbe-text-dezent);margin-block-end:var(--space-1)}.art-flipcard__rueck-titel{font-family:var(--font-sans);font-size:var(--text-lg);color:var(--farbe-text);margin-block-end:var(--space-1)}.art-flipcard__story{margin-block-start:var(--space-3);font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--farbe-text-gedaempft)}.art-flipcard__attribution{margin-block-start:var(--space-2);padding-block-start:var(--space-3);border-top:1px solid var(--farbe-linie);font-size:var(--text-xs);color:var(--farbe-text-gedaempft)}.art-flipcard__quelle{margin-block-start:var(--space-1);font-size:var(--text-xs);color:var(--farbe-text-gedaempft)}.art-flipcard__quelle a,.art-flipcard__attribution a{color:inherit;text-decoration:underline;text-underline-offset:2px}.art-flipcard__attribution a:hover,.art-flipcard__quelle a:hover{color:var(--farbe-text)}/* Keine Kuerzung mehr: die Rueckseite waechst mit den Attributionszeilen (siehe :defined unten), lange Commons-Dateititel brechen nur um. */.art-flipcard__attribution,.art-flipcard__quelle{overflow-wrap:anywhere}/* Bearbeitungshinweis: reiner Fliesstext, kleiner als die Attributionszeilen, ohne Box (kein Hintergrund, Rand, Streifen oder Padding); nur Abstand setzt ihn ab. */.art-flipcard__bearbeitung{margin-block-start:var(--space-2);padding:0;background:none;border:0;font-size:max(0.8125rem, calc(var(--text-xs) * 0.92));font-weight:var(--weight-normal);line-height:var(--leading-relaxed);color:var(--farbe-text-gedaempft);text-align:left;overflow-wrap:anywhere}.art-flipcard__bearbeitung strong{font-weight:inherit;color:inherit}.art-flipcard__beschriftung{margin-block-start:var(--space-4);text-align:center;font-size:var(--text-sm);color:var(--farbe-text-gedaempft)}.art-flipcard__beschriftung-titel{font-weight:var(--weight-semibold);color:var(--farbe-text)}.art-flipcard__beschriftung-meta{margin-inline-start:var(--space-1)}.art-flipcard__beschriftung-text{display:block;margin-block-start:var(--space-1)}/* Ab hier: nur aktiv, wenn das Custom Element tatsaechlich registriert ist (JavaScript geladen). Ohne JS bleibt die gestapelte Lesefassung oben stehen. */art-flipcard:defined{display:inline-flex;flex-direction:column;align-items:center}art-flipcard:defined .art-flipcard__buehne{width:calc(var(--art-flipcard-max-hoehe, 20rem) * 0.78);height:var(--art-flipcard-max-hoehe, 20rem);perspective:60rem;cursor:pointer;--art-flipcard-deg:0deg}art-flipcard:defined .art-flipcard__vorderseite,art-flipcard:defined .art-flipcard__rueckseite{position:absolute;inset:0;margin:0;backface-visibility:hidden;transition:transform var(--transition-slow);overflow:hidden}art-flipcard:defined .art-flipcard__vorderseite{transform:rotateY(var(--art-flipcard-deg))}art-flipcard:defined .art-flipcard__vorderseite picture,art-flipcard:not(:defined) .art-flipcard__vorderseite picture{display:block;width:100%;height:100%}art-flipcard:defined .art-flipcard__bild{width:100%;height:100%;max-height:none;object-fit:cover}art-flipcard:defined .art-flipcard__copyright{display:flex;position:absolute;inset:auto var(--space-2) var(--space-2) auto;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:var(--radius-full);background:rgb(0 0 0 / 0.5);color:var(--color-white);font-size:var(--text-xs)}/* Groesserer Flip-Hinweis statt der winzigen (c)-Marke allein -- signalisiert eindeutig "hier laesst sich etwas drehen", nicht nur "hier ist eine Bildrechte-Notiz". Rotiert bei Hover 180 Grad als Vorschau der eigentlichen Klick-Aktion -- Mikrointeraktion mit Bedeutung, nicht Animation um der Animation willen (Lotti, 2026-08-18). */art-flipcard:defined .art-flipcard__dreh-hinweis{display:flex;position:absolute;inset:auto auto var(--space-3) var(--space-3);align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:var(--radius-full);background:rgb(0 0 0 / 0.45);color:var(--color-white);transition:transform var(--transition-base),background var(--transition-fast)}art-flipcard:defined .art-flipcard__dreh-hinweis svg{width:1.15rem;height:1.15rem}art-flipcard:defined .art-flipcard__buehne:hover .art-flipcard__dreh-hinweis{transform:rotate(180deg);background:rgb(0 0 0 / 0.62)}/* Rueckseite als Spalte: Ort/Titel, Attribution und Bearbeitungshinweis bleiben ohne Scrollen stehen, nur die Story scrollt. Die Buehne behaelt ihre feste Groesse (Hero- Layout springt nicht); die Rueckseite ist mindestens so gross wie die Vorderseite, wird aber bei Bedarf breiter (ab Kartenbreite bis 21rem) und hoeher und ragt dann nach unten ueber die Buehne hinaus (oben bleibt buendig, sonst verschwindet der Kopf unter dem Sticky-Header) -- sie ueberlagert, verdraengt nichts. */art-flipcard:defined .art-flipcard__rueckseite{inset:auto;top:0;/* Zentrierung ueber left statt translateX(-50%): im 3D-Kontext (perspective + rotateY(180deg)) wirkte die Verschiebung nicht, die Rueckseite lief um die halbe Breite nach rechts aus der Seite (scrollWidth 531 bei 390 px). */--art-flipcard-rueck-breite:max(100%, min(21rem, calc(100vw - 2rem)));left:calc(50% - var(--art-flipcard-rueck-breite) / 2);width:var(--art-flipcard-rueck-breite);height:auto;min-height:100%;transform:rotateY(calc(var(--art-flipcard-deg) + 180deg));margin:0;overflow:visible;display:flex;flex-direction:column;z-index:2;/* Geschlossen: unsichtbar UND nicht fokussierbar (Lena H1/H3). backface-visibility greift bei den scrollbaren Kindern (overflow:auto = eigene Compositing-Ebene) nicht, die Rueckseite schien gespiegelt durch das Foto. visibility ist verlaesslich in allen Engines; die Verzoegerung haelt sie waehrend des Zudrehens sichtbar. */visibility:hidden;transition:transform var(--transition-slow),visibility 0s linear 700ms}art-flipcard[aufgeklappt]:defined .art-flipcard__rueckseite{visibility:visible;transition-delay:0s}art-flipcard:defined .art-flipcard__rueckseite > *{backface-visibility:hidden}/* Schalter (echter