/* Vorschau E · Ideen aus dem Vergleich mit madebyfelix.com (03.11.2026)
   Nur Prinzipien, eigene Umsetzung. Basis ist die Startseite aus c-grosse-typo (unverändert). */

/* ---------- 1 Intro: erst der Name groß, dann wandert er in die Leiste ---------- */
.intro-stage { display: none; }
html.intro-pending .intro-stage { display: flex; position: fixed; inset: 0; z-index: 2000; align-items: center; justify-content: center; background: var(--paper); }
html.intro-morph .intro-stage { background: transparent; pointer-events: none; transition: background-color .24s ease .45s; } /* 04.11.: nur die Fläche öffnet sich für die Leiste, der Satz bleibt bis zur Landung verborgen */
.intro-name { position: relative; display: inline-flex; font-family: var(--font-display); font-feature-settings: "ss02" 1; font-weight: 500; font-size: clamp(38px, 5.4vw, 80px); letter-spacing: -.03em; line-height: 1; color: var(--ink); white-space: pre; transform-origin: left top; will-change: transform; }
.intro-name .lw { position: relative; display: inline-block; }
.intro-name .m { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em 0 .12em; margin: -.08em 0 -.12em; }
.intro-name .g { display: inline-block; transform: translateY(115%); }
html.intro-go .intro-name .g { transform: none; transition: transform .7s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(24ms * var(--i) + .05s); }
/* i-Punkte: fallen nacheinander ein und federn kurz nach (in Schwarz, ohne Farbe) */
.intro-name .g { position: relative; }
.intro-name .m { overflow: visible; clip-path: inset(-.6em -.1em 0 -.1em); } /* oben offen, damit die Punkte hochspringen können */
/* 04.11.: i aus der Schrift, an der Lücke zwischen Punkt und Stamm geteilt (.2325em von oben, in Pangram gemessen); der Punkt hüpft nacheinander kurz hoch wie bei Felix */
.intro-name .i-st { display: inline-block; clip-path: inset(.2325em -.1em -.3em -.1em); }
.intro-name .i-pt { position: absolute; left: 0; top: 0; clip-path: inset(-.1em -.1em calc(100% - .2325em) -.1em); }
html.intro-dots .intro-name .i-pt { animation: e-dot-hop .4s cubic-bezier(.3, 0, .2, 1) both; animation-delay: calc(90ms * var(--d)); }
@keyframes e-dot-hop { 0%, 100% { transform: none; } 45% { transform: translateY(-.26em); } }
@keyframes e-dot-drop {
  0% { opacity: 0; transform: translateY(-1.4em); }
  45% { opacity: 1; transform: translateY(0); }
  65% { transform: translateY(-.24em); }
  100% { transform: translateY(0); }
}
/* Name wandert in die Leiste; die Leiste erscheint erst, wenn er ankommt, der Einstiegssatz danach */
html.intro-morph .intro-name { transition: transform .9s cubic-bezier(.62, .02, .2, 1), opacity .16s ease; will-change: transform, opacity; }
html.intro-morph .intro-name .m { clip-path: none; } /* ohne Maske im Flug, sonst muss jeder Buchstabe neu gezeichnet werden */
.intro-name .in-sw, .intro-name .in-we { display: inline-flex; }
.intro-name .in-we { position: absolute; left: 0; top: 0; color: #fff; opacity: 0; }
html.intro-morph .intro-name .in-sw { opacity: 0; transition: opacity .12s linear .59s; } /* kurzer Wechsel genau in der Mitte der Leisten-Einblendung, so bleibt der Name durchgehend lesbar */
html.intro-morph .intro-name .in-we { opacity: 1; transition: opacity .12s linear .59s; }
html.intro-landed .nn-txt { transition: opacity .16s ease; }
html.intro-pending:not(.intro-morph) header.nav { opacity: 0 !important; }
html.intro-morph header.nav { transition: opacity .33s ease .49s !important; } /* 04.11.: Leiste erreicht ihre volle Deckkraft genau, wenn der Name landet */
html.intro-pending:not(.intro-texte) header.nav > :not(.nav-id), html.intro-pending:not(.intro-texte) header.nav .nav-status > * { opacity: 0; } /* solange der Name fliegt, ist die Leiste leer: er würde sonst »Offen für Rollen« überlagern */
html.intro-texte header.nav > :not(.nav-id), html.intro-texte header.nav .nav-status > *, html.intro-reveal header.nav > :not(.nav-id), html.intro-reveal header.nav .nav-status > * { transition: opacity .85s cubic-bezier(.22, .7, .3, 1) .05s; } /* 04.11.: Status, Links und Satz kommen gleichzeitig (gleiche Kurve wie der Satz), das hält den Ablauf ruhig */
html.intro-pending:not(.intro-landed) .nn-txt { opacity: 0; }
@keyframes e-fade-in { from { opacity: 0; } to { opacity: 1; } }
html.intro-pending:not(.intro-texte) main .intro-in { visibility: hidden; }
html.intro-pending main .hero-id, html.intro-pending main .intro-hint { opacity: 0; }
html.intro-reveal main .hero-id, html.intro-reveal main .intro-hint { transition: opacity .8s ease 1.1s; }

/* ---------- 4 Playground-Walze, aufgebaut wie die Walze auf madebyfelix.com:
   fünf Bilder im Format 3:2 auf einer nach außen gewölbten Trommel (−72° … +72°), diagonal von −14,4 bis +14,4 vh versetzt,
   Breiten 20/16/22/16/20 vw, eigene Tiefe je Bild, Perspektive 1700 px. Beim Scrollen schwenkt die Trommel von +32° auf −32°
   und wandert 162 px nach oben – so drehen sich die äußeren Bilder nacheinander ins Bild. Satz darüber, Knopf rechts darunter. ---------- */
.play-cyl { position: relative; width: 100vw; margin: 160px 0 0 calc(50% - 50vw); padding-bottom: 160px; overflow-x: clip; overflow-y: visible; /* seitlich randlos abschneiden, unten Schatten weich auslaufen lassen */ }
.cyl-teaser { position: relative; z-index: 0; max-width: 1680px; min-height: 80vh; margin: 56px auto 0; /* Abstand Knopf → Walze */ padding: 0 var(--gutter); }
.cyl-head { position: relative; z-index: 2; max-width: 1680px; margin: 0 auto 16px; padding: 0 var(--gutter); } /* Titel bleibt über den Bildern lesbar */
html body .play-cyl .cyl-head .cyl-title { margin: 0 !important; }
/* Satz und Knopf über der Walze, links bündig; die Bilder laufen darunter durch */
.cyl-foot { position: relative; z-index: 2; max-width: 1680px; margin: 0 auto; padding: 0 var(--gutter); } /* Bilder laufen unter dem Text durch */
.play-cyl .cyl-foot > .btn { margin-top: 24px; transition: background-color .25s, color .25s, box-shadow .25s; }
/* Hover wie beim früheren Playground-Teaser: Knopf wird zur Kontur */
@media (hover: hover) { .play-cyl .cyl-foot > .btn:hover { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); } }
/* Bilder der Walze sind klickbar (führen zum Playground) */
.cyl-card { pointer-events: auto; cursor: pointer; }
html[data-play]:root body .play-cyl .cyl-line { position: relative; z-index: 1; max-width: 22em; margin: 0; font-size: clamp(32px, 3.2vw, 46px) !important; font-weight: 500 !important; line-height: 1.18 !important; letter-spacing: -.018em !important; text-wrap: balance; }
/* Lage des Playground-Satzes (Schalter »Satzlage«): links an der Seitenkante, an der Kante von R!SE (Spalte 4 im 12er-Raster), oder mittig */
html[data-satzlage="kante"] .cyl-foot { padding-left: calc(var(--gutter) + (min(100vw, 1680px) - 2 * var(--gutter)) / 4 + 6px); }
html[data-satzlage="mitte"] .cyl-foot { width: fit-content; max-width: 100%; padding-left: 0; padding-right: 0; }
@media (max-width: 1239px) { html[data-satzlage] .cyl-foot { width: auto; padding: 0 var(--gutter); } }
/* Satzgröße: Standard 32 px (kleinste Aussage-Stufe), Schalter »Satz« vergleicht mit 24 px (jetzige Startseite) */
html[data-play]:root:not([data-satz="gross"]) body .play-cyl .cyl-line { max-width: 24em; font-size: 32px !important; line-height: 1.2 !important; letter-spacing: -.018em !important; }
html[data-play]:root[data-satz="klein"] body .play-cyl .cyl-line { max-width: 30em; font-size: 24px !important; line-height: 1.3 !important; letter-spacing: -.01em !important; }
.cyl-stage { position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; /* volle Fensterbreite, nicht nur Inhaltsbreite */ z-index: 0; perspective: 1700px; perspective-origin: 50% 45%; pointer-events: none; }
.cyl-ring { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.cyl-card { position: absolute; top: 50%; left: 50%; width: var(--w); aspect-ratio: var(--ar, 3 / 2); margin-top: var(--dy); border-radius: 14px; overflow: hidden; background: var(--mist); box-shadow: 0 34px 70px -24px rgba(0, 0, 0, .38); transform: translate(-50%, -50%) rotateY(var(--a)) translateZ(min(var(--z), 46vw)); opacity: 0; transition: opacity .7s ease-out calc(var(--ci) * .17s); }
.play-cyl.is-in .cyl-card { opacity: 1; }
.cyl-card video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Satz bleibt schwarz (Einfärben beim Scrollen von Victoria verworfen) */
/* unter 1240 px: flaches Band zum Wischen (wie bei ihm) */
@media (max-width: 1239px) {
  .cyl-teaser { min-height: 0; }
  .cyl-foot { padding-left: var(--gutter); }
  .cyl-teaser { margin-top: 32px; }
  .cyl-stage { position: relative; inset: auto; width: auto; left: auto; margin: 0 calc(var(--gutter) * -1); perspective: none; pointer-events: auto; overflow: auto hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .cyl-stage::-webkit-scrollbar { display: none; }
  .cyl-ring { position: static; display: flex; gap: 12px; width: max-content; padding: 0 var(--gutter); transform: none !important; transform-style: flat; will-change: auto; }
  .cyl-card { position: relative; top: auto; left: auto; flex: 0 0 auto; width: auto; height: 46vw; aspect-ratio: var(--ar, 4 / 5); margin: 0; transform: none; opacity: 1; transition: none; border-radius: 12px; box-shadow: none; scroll-snap-align: start; }
  }
@media (max-width: 760px) { html body .cyl-card.cyl-card { width: auto; height: 60vw; aspect-ratio: var(--ar, 4 / 5) !important; } /* Handy: gleiche Höhe, jedes Werk im eigenen Format */  html[data-play]:root:not([data-satz="gross"]) body .play-cyl .cyl-line { font-size: 21px !important; } }
@media (prefers-reduced-motion: reduce) { .cyl-ring { transform: none !important; } }

/* ---------- 5 Footer: Uhrzeit Berlin mit Pin (Dunkel-Modus und »Frag deine KI« von Victoria verworfen) ---------- */
.site-footer-legal .e-mid { margin-left: auto; display: inline-flex; align-items: baseline; }
.site-footer-legal .e-mid span { margin-left: 0; }
.site-footer-legal .e-copy { margin-left: auto; } /* 04.11.: Uhrzeit im Footer der Startseite von Victoria wieder entfernt */
.e-clock { display: inline-flex; align-items: center; gap: 6px; }
.e-clock .e-pin { flex: none; position: relative; top: -.5px; }
.e-clock time { font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .site-footer-legal .e-mid { order: 3; margin-left: 0; width: 100%; }
  .site-footer-legal .e-copy { margin-left: auto; }
}

/* ---------- Schalter nur für die Vorschau ---------- */
.e-panel { position: fixed; z-index: 2100; left: 16px; bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: calc(100vw - 32px); padding: 6px; border-radius: 14px; background: rgba(20, 20, 20, .92); color: #fff; font: 500 12px/1 var(--font-sans); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.e-panel-t { padding: 0 8px; color: rgba(255, 255, 255, .55); font-weight: 600; }
.e-panel button { height: 28px; padding: 0 10px; border-radius: 8px; color: #fff; font-family: "Inter", sans-serif !important; }
.e-panel button:hover { background: rgba(255, 255, 255, .12); }
.e-panel b { font-weight: 600; }
html.intro-pending .e-panel { opacity: 0; }
@media (max-width: 760px) { .e-panel { left: 8px; bottom: 8px; padding: 4px; gap: 0; font-size: 11px; } .e-panel-t { display: none; } .e-panel button { padding: 0 7px; } }

/* ---------- 6 Layout »frei« (Schalter): weniger Kacheln, mehr Luft, unterschiedliche Größen, versetzt ---------- */
/* Dabei! bleibt die Kachel wie im Kachel-Layout (freie Fassung von Victoria verworfen) */
/* drei Hauptprojekte: unterschiedliche Breiten, versetzt im 12er-Raster */
html[data-layout="frei"] body .grid-3 { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; column-gap: 24px !important; row-gap: 0 !important; margin-top: 160px !important; align-items: start; }
html[data-layout="frei"] body .grid-3 > .card:nth-child(1) { grid-column: 1 / span 7; }
html[data-layout="frei"] body .grid-3 > .card:nth-child(2) { grid-column: 9 / span 4; margin-top: 26vh; }
html[data-layout="frei"] body .grid-3 > .card:nth-child(3) { grid-column: 4 / span 6; margin-top: 120px; }
html[data-layout="frei"] body .grid-3 .card-text { padding-top: 14px !important; }
/* Weitere Arbeiten: Titel wie im Kachel-Layout (graues Versal-Label verworfen), etwas mehr Luft davor */
html[data-layout="frei"] body .more-title { margin-top: 120px !important; } /* gleich wie Open Rooms → R!SE */
/* Weitere Arbeiten: gerade Reihe wie im Kachel-Layout (Komposition von Victoria verworfen) */
@media (max-width: 760px) {
  html[data-layout="frei"] body .grid-3 { display: flex !important; flex-direction: column; gap: 56px !important; margin-top: 96px !important; }
  html[data-layout="frei"] body .grid-3 > .card:nth-child(n) { margin-top: 0; }
  html[data-layout="frei"] body .grid-3 > .card:nth-child(2) { margin-left: 16%; }
  html[data-layout="frei"] body .grid-3 > .card:nth-child(3) { margin-right: 10%; }
  html[data-layout="frei"] body .more-title { margin-top: 112px !important; }
}

/* ---------- 8 Zeiger-Variante »Pille« (Schalter) ---------- */
.cursor-pill { position: fixed; z-index: 1001; left: 0; top: 0; padding: 11px 18px; border-radius: 999px; background: #0b0b0b; color: #fff; font: 500 12px/1 var(--font-sans); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .14s ease-out; }
.cursor-pill.is-on { opacity: 1; }
html[data-cursor="pille"].is-over-case .cursor-dot { opacity: 0 !important; }
@media (hover: none) { .cursor-pill { display: none; } }

/* ---------- 6 Weitere Arbeiten als Mosaik (nur Layout »frei«): Positionen und Größen aus dem Tasteboard-Teaser, auf 1440 px bezogen ---------- */
.more-mosaic { display: none; }
html[data-layout="frei"]:is([data-more="mosaik"], [data-more="liste"]) body .grid-5 { display: none !important; }
html[data-layout="frei"][data-more="mosaik"] body .more-mosaic { display: block; position: relative; width: min(100%, 1440px); margin: 0 auto; container-type: inline-size; }
html[data-layout="frei"] body .more-mosaic::before { content: ""; display: block; padding-top: calc(746 / 1440 * 100%); }
.mo-tile { position: absolute; left: calc(var(--x) / 1440 * 100%); top: calc(var(--y) / 1440 * 100cqw); width: calc(var(--w) / 1440 * 100%); aspect-ratio: var(--w) / var(--h); border-radius: 6px; overflow: hidden; background: var(--c, var(--mist)); }
.mo-tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
/* Overlay beim Darüberfahren: ganze Karte dunkel, Name und Leistungen unten links */
.mo-info { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 20px; background: var(--c); color: var(--t); opacity: 0; transition: opacity .35s ease; }
.mo-info b { font-family: var(--font-display); font-feature-settings: "ss02" 1; font-size: 20px; font-weight: 600; line-height: 1.3; }
.mo-info span { font-size: 16px; line-height: 1.5; opacity: .82; }
@media (hover: hover) { .mo-tile:hover img { transform: scale(1.03); } .mo-tile:hover .mo-info, .mo-tile:focus-visible .mo-info { opacity: 1; } }
/* auf Touch-Geräten steht der Name dauerhaft unten im Bild */
@media (hover: none) { .mo-info { position: static; opacity: 1; padding: 12px 14px 14px; } .mo-tile { aspect-ratio: auto !important; } .mo-tile img { aspect-ratio: var(--w) / var(--h); height: auto; } }
@media (max-width: 760px) {
  html[data-layout="frei"][data-more="mosaik"] body .more-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
  html[data-layout="frei"] body .more-mosaic::before { display: none; }
  .mo-tile { position: relative; left: auto; top: auto; width: auto; }
  .mo-tile:nth-child(3), .mo-tile:nth-child(4) { grid-column: 1 / -1; }
}
.mo-tile[href*="johanna-perret"] img { object-position: 64% 50%; } /* Buch sitzt rechts der Mitte */

/* (9 Dabei! frei: von Victoria verworfen 03.11., Dabei! bleibt die Kachel) */

/* ---------- 10 Weniger Kanten (Schalter »Kanten«): nur vier Linien – links, Spalte 4, Spalte 8, rechter Rand ---------- */
@media (min-width: 761px) {
  html[data-layout="frei"][data-kanten="wenig"] body .grid-3 > .card:nth-child(2) { grid-column: 8 / span 5; }
  html[data-layout="frei"][data-kanten="wenig"] body .grid-3 > .card:nth-child(3) { grid-column: 4 / span 9; }
}

/* ---------- 13 Weitere Arbeiten als Liste (Schalter »Weitere: Liste«): Name, Leistungen, Pfeil; Vorschaubild folgt der Maus ---------- */
.more-list { display: none; }
html[data-layout="frei"][data-more="liste"] body .more-list { display: block; }
.more-list { border-bottom: 1px solid rgba(11, 11, 11, .12); }
.ml-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; /* gleiches 12er-Raster: Leistungen beginnen an der R!SE-Kante */ align-items: baseline; padding: 22px 0; border-top: 1px solid rgba(11, 11, 11, .12); color: inherit; text-decoration: none; }
.ml-name { grid-column: 1 / span 7; grid-row: 1; font-family: var(--font-display); font-feature-settings: "ss02" 1; font-size: 20px; font-weight: 600; line-height: 1.3; }
.ml-sub { grid-column: 1 / span 7; grid-row: 2; margin-top: 4px !important; font-size: 16px; line-height: 1.5; color: var(--ink-2); } /* Subline direkt unter dem Namen, damit beides zusammen gelesen wird */
.ml-meta { grid-column: 9 / span 3; grid-row: 1; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.ml-arrow { grid-column: 12; grid-row: 1; justify-self: end; width: 18px; height: 18px; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.ml-thumb { display: none; }
@media (hover: hover) { .ml-row:hover .ml-arrow { transform: translateX(4px); } }
.ml-preview { position: fixed; z-index: 50; left: 0; top: 0; width: 340px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.92); transition: opacity .22s ease, transform .3s cubic-bezier(.16, 1, .3, 1); }
.ml-preview.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ml-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (hover: none), (max-width: 760px) {
  .ml-preview { display: none; }
  .ml-row { grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto auto auto; row-gap: 2px; align-items: start; align-content: center; padding: 16px 0; column-gap: 16px; }
  .ml-name, .ml-sub, .ml-meta { grid-column: 2; grid-row: auto; } .ml-sub { margin-top: 0 !important; }
  .ml-thumb { display: block; grid-row: 1 / span 3; width: 72px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; align-self: center; }
  .ml-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .ml-name { font-size: 18px; } .ml-sub, .ml-meta { font-size: 14px; } .ml-arrow { display: none; }
}
html body .more-list .ml-meta, html body .more-list .ml-name { margin: 0 !important; }

/* »Weitere Arbeiten« als Überschrift im Stil des Playground-Satzes (Schalter »Titel«) */
html:not([data-mtitel="klein"]) body .more-title.more-title { font-size: 32px !important; font-weight: 500 !important; line-height: 1.2 !important; letter-spacing: -.018em !important; margin-bottom: 32px !important; }
@media (max-width: 760px) { html:not([data-mtitel="klein"]) body .more-title.more-title { font-size: 24px !important; margin-bottom: 16px !important; } }
html[data-kanten="wenig"] body .ml-meta { grid-column: 8 / span 4; } /* Leistungen an der Open-Rooms-Kante */
@media (max-width: 760px) { html[data-kanten="wenig"] body .ml-meta { grid-column: 2; } }

/* Hover der Liste (Schalter »Hover«): ganze Zeile grau oder schwarz, oder nur Bild. Fläche ragt 16 px über die Spalten hinaus, damit der Text nicht an der Kante klebt */
@media (hover: hover) and (min-width: 761px) {
  html:not([data-mhover="aus"]) body .ml-row { margin: 0 -16px; padding-left: 16px; padding-right: 16px; transition: background-color .2s ease, color .2s ease; }
  html:not([data-mhover="aus"]) body .ml-row:hover .ml-arrow { transform: none; }
  html:not([data-mhover]) body .ml-row:hover { background: #f2f2f2; }
  html[data-mhover="schwarz"] body .ml-row:hover { background: var(--ink, #0b0b0b); color: #fff; border-top-color: transparent; }
  html[data-mhover="schwarz"] body .ml-row:hover .ml-sub, html[data-mhover="schwarz"] body .ml-row:hover .ml-meta { color: rgba(255, 255, 255, .62); }
  html[data-mhover="schwarz"] body .ml-row:hover + .ml-row { border-top-color: transparent; }
}

/* ---------- 03.11. abends: Handy und Liste weiter ---------- */
/* Handy: Hauptprojekte im ruhigen Raster untereinander, ohne Versatz (frei funktioniert auf schmalen Bildschirmen nicht) */
@media (max-width: 760px) {
  html[data-layout="frei"] body .grid-3 > .card:nth-child(n) { margin-left: 0; margin-right: 0; width: 100% !important; max-width: none !important; align-self: stretch; }
}

/* Liste, Desktop-Variante »Bild in der Zeile« (wie Felix’ Thinking-Seite: Text links, Bild rechts, immer sichtbar) */
@media (min-width: 761px) {
  html[data-mlbild="zeile"] body .ml-row { align-items: start; grid-template-rows: auto auto 1fr; padding: 24px 0; }
  html[data-mlbild="zeile"] body .ml-thumb { display: block; grid-column: 9 / span 4; grid-row: 1 / span 3; width: 100%; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; }
  html[data-mlbild="zeile"] body .ml-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
  html[data-mlbild="zeile"] body .ml-row:hover .ml-thumb img { transform: scale(1.03); }
  html[data-mlbild="zeile"] body .ml-meta.ml-meta { grid-column: 1 / span 7; grid-row: 3; margin-top: 12px !important; }
  html[data-mlbild="zeile"] body .ml-arrow { display: none; }
  html[data-mlbild="zeile"] body .ml-row:hover { background: none !important; color: inherit !important; }
  html[data-mlbild="zeile"] body .ml-row:hover .ml-sub, html[data-mlbild="zeile"] body .ml-row:hover .ml-meta { color: var(--ink-2) !important; }
}

/* Liste auf dem Handy: große Bilder statt Mini-Vorschau. »wischen« = Karten nebeneinander zum Wischen, »untereinander« = Bild in voller Breite, darunter Text (wie Felix mobil) */
@media (max-width: 760px) {
  html body .more-list .ml-row { display: block; padding: 0; border: 0; }
  html body .more-list .ml-thumb { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 6px; margin-bottom: 12px; }
  html body .more-list .ml-name { display: block; font-size: 20px; }
  html body .more-list .ml-sub, html body .more-list .ml-meta { display: block; font-size: 16px; margin-top: 2px !important; }
  html body .more-list .ml-meta { margin-top: 6px !important; }
  html body .more-list { border-bottom: 0; }
  html:not([data-mlmob="untereinander"]) body .more-list { display: flex !important; gap: 12px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  html:not([data-mlmob="untereinander"]) body .more-list::-webkit-scrollbar { display: none; }
  html:not([data-mlmob="untereinander"]) body .more-list .ml-row { flex: 0 0 78vw; scroll-snap-align: start; }
  html[data-mlmob="untereinander"] body .more-list .ml-row + .ml-row { margin-top: 40px; }
  html[data-mlmob="untereinander"] body .more-list .ml-thumb { aspect-ratio: 16 / 9; }
}

/* Playground auf dem Handy: höhere Karten, Maybe Baby zuerst, die Karte in der Mitte groß, die Nachbarn etwas kleiner und blasser */
@media (max-width: 760px) {
  .play-cyl { padding-bottom: 64px; }
  html body .cyl-card.cyl-card { height: min(112vw, 580px); max-width: 80vw; border-radius: 6px; scroll-snap-align: center; transform-origin: 50% 50%; will-change: transform; }
  .cyl-card:nth-child(2) { order: -1; } /* Maybe Baby (Hochformat) als erstes Bild */
  .cyl-stage { scroll-padding-inline: 0; }
  .cyl-ring { padding: 0 10vw; }
}

/* 04.11. flachere Walze: Bilder auf Radius 70vw (Winkel nach Bildbreite mit 3,5vw Lücke neu verteilt, siehe --a in index.html) */
@media (min-width: 1240px) { .cyl-card { transform: translate(-50%, -50%) rotateY(var(--a)) translateZ(70vw); } }

/* 04.11.: Fassungen des Übergangs in die Leiste (Schalter in e2-teaser) */
/* oben: die Leiste kommt von oben dem Namen entgegen, beide treffen sich */
html[data-flug="oben"].intro-pending:not(.intro-morph) header.nav { translate: 0 -120px; }
html[data-flug="oben"].intro-morph header.nav { transition: translate .9s cubic-bezier(.62, .02, .2, 1) !important; }
html[data-flug="oben"].intro-morph .intro-stage { background: transparent; transition: none; }
/* landen: Name landet schwarz auf Weiß, kurzer Moment, dann erscheint die Leiste um ihn */
html[data-flug="landen"].intro-morph:not(.intro-da) header.nav, html[data-flug="landen"].intro-morph:not(.intro-da):not(.intro-landed) header.nav { opacity: 0 !important; }
html[data-flug="landen"].intro-da header.nav { transition: opacity .34s ease !important; }
html[data-flug="landen"].intro-morph:not(.intro-da):not(.intro-landed) .intro-name .in-sw { opacity: 1; }
html[data-flug="landen"].intro-morph:not(.intro-da):not(.intro-landed) .intro-name .in-we { opacity: 0; }
html[data-flug="landen"].intro-da .intro-name .in-sw, html[data-flug="landen"].intro-da .intro-name .in-we { transition: opacity .12s linear .12s; }
html[data-flug="landen"].intro-morph:not(.intro-da) .intro-stage { background: var(--paper); transition: none; }
html[data-flug="landen"].intro-da .intro-stage { background: transparent; transition: none; }
/* auf: um den landenden Namen entsteht eine kleine Leiste, sie zieht sich nach rechts auf, dann kommen die Inhalte */
html[data-flug="auf"].intro-morph:not(.intro-landed) header.nav { clip-path: inset(-24px calc(100% - var(--nn-w, 200px)) -24px -24px round 999px); }
html[data-flug="auf"].intro-landed header.nav, html[data-flug="auf"].intro-reveal header.nav { clip-path: inset(-24px -24px -24px -24px round 999px); transition: clip-path .62s cubic-bezier(.65, 0, .2, 1) !important; }
html[data-flug="auf"].intro-landed header.nav > :not(.nav-id), html[data-flug="auf"].intro-landed header.nav .nav-status > *, html[data-flug="auf"].intro-reveal header.nav > :not(.nav-id), html[data-flug="auf"].intro-reveal header.nav .nav-status > * { transition: opacity .4s ease .3s; }
/* 04.11. (Victoria: »komische Konturlinie unten«): die Linie unter dem Bild stammte vom alten Kartenstil »Outline«, auf hellen Bildern wie Bundesregister sichtbar */
html[data-karten="4"] body .card-img { border-bottom: 0; }
/* 04.11. (Victoria: »Rundung noch nicht drin«): Grundwert fest im Stylesheet, ecken() in ideen.js setzt nur noch die größeren Stufen; sonst hingen die Karten bis zum nächsten Lauf eckig */
html[data-karten][data-kacheln] body main .card .card-img.card-img.card-img { border-radius: 10px !important; }
html[data-karten][data-kacheln] body main .grid-5 .card .card-img.card-img.card-img { border-radius: 6px !important; }