/* Michael Quarz – Gestaltung nach der bisherigen Seite auf systeme.io und
   apple.com (2026-10-01): fixierte, durchscheinende Kopfzeile mit
   Unschärfe, Werkbilder und Farbfelder über die volle Breite, schwarzes
   Fußmenü. Überschriften Marcellus (entschieden 2026-09-27, ersetzt
   Cooper), Fließtext noch offen, daher Arial. Farben von der bisherigen
   Seite: Inner-Circle-Band #700000. Akzent #900000 wie Nadi Life, Text
   schwarz (Michael, 2026-10-05, statt #A22222 und #1d1d1f). */
@font-face {
  font-family: "Marcellus";
  src: url("/dateien/Marcellus-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
:root {
  --text: #000000;
  --grau: #6e6e73;
  --grund: #ffffff;
  --hell: #f5f5f7;
  --rot: #700000;
  --akzent: #900000;
  --kopf: 64px;
  --breite: 80rem; /* 1280 px, Inhaltsbreite aller Websites (Michael, 2026-10-01) */
  --lesebreite: 80rem; /* Text in voller Inhaltsbreite wie bei Nadi Life, mehrspaltig im Einzelfall (Michael, 2026-10-01) */
  --serif: "Marcellus", Georgia, serif;
}
* { box-sizing: border-box; }
html { scroll-padding-top: var(--kopf); }
body { margin: 0; padding-top: var(--kopf); font: 400 1.0625rem/1.6 Arial, Helvetica, sans-serif; color: var(--text); background: var(--grund); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
.sprung { position: absolute; left: -999px; }
.sprung:focus { left: 1rem; top: 1rem; z-index: 20; background: var(--grund); padding: .5rem; }

/* Kopfzeile wie bei apple.com: fixiert, durchscheinend, verschwimmend */
.kopf { position: fixed; top: 0; left: 0; right: 0; z-index: 10; height: var(--kopf);
  background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
/* ohne Linie an der Unterkante (Michael, 2026-10-06) */
/* Volle Fensterbreite, Einträge über den Platz neben dem Logo verteilt wie
   auf der produktiven Seite (Michael, 2026-10-06) */
.kopf-innen { height: 100%; padding: 0 1.5rem; display: flex; align-items: center; gap: 2rem; }
.marke { font-family: var(--serif); font-size: 1.35rem; text-decoration: none; white-space: nowrap; }
.marke img { display: block; height: 41px; width: auto; }
nav { flex: 1; display: flex; justify-content: space-around; align-items: center; gap: 1rem; font-family: var(--serif); }
nav a { text-decoration: none; color: var(--text); }
nav a[aria-current], nav a:hover { color: var(--akzent); }
.menue-knopf { display: none; }

/* Mobil: Hamburger öffnet eine Fläche über der Seite, große Einträge
   untereinander, die nacheinander einblenden (nach apple.com) */
@media (max-width: 800px) {
  /* Logo genau mittig, Menüknopf mittig zwischen Logo und rechtem Rand (Michael, 2026-10-06) */
  .kopf-innen { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; padding: 0; }
  .marke { grid-column: 2; }
  /* Logo mobil 220 px breit (Michael, 2026-10-06), Header dafür höher */
  :root { --kopf: 88px; }
  .marke img { width: 220px; height: auto; }
  .menue-knopf { grid-column: 3; justify-self: center; display: block; position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--text); cursor: pointer; }
  .menue-knopf span { position: absolute; left: 12px; width: 20px; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform .3s ease, top .3s ease; }
  .menue-knopf span:first-child { top: 18px; }
  .menue-knopf span:last-child { top: 25px; }
  .menue-offen .menue-knopf span:first-child { top: 21.5px; transform: rotate(45deg); }
  .menue-offen .menue-knopf span:last-child { top: 21.5px; transform: rotate(-45deg); }
  nav { position: absolute; top: var(--kopf); left: 0; right: 0; bottom: 0; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 0;
    padding: 1.5rem 2.5rem 3rem; overflow-y: auto; background: none;
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; }
  nav a { padding: .4rem 0; font-size: 1.75rem; line-height: 1.3;
    opacity: 0; transform: translateY(-6px); transition: opacity .3s ease, transform .3s ease; }
  nav a.sprache { margin-top: 1.5rem; font-size: 1.1rem; color: var(--grau); }
  .menue-offen nav { opacity: 1; visibility: visible; }
  .menue-offen nav a { opacity: 1; transform: none; }
  .menue-offen nav a:nth-child(2) { transition-delay: .03s; }
  .menue-offen nav a:nth-child(3) { transition-delay: .06s; }
  .menue-offen nav a:nth-child(4) { transition-delay: .09s; }
  .menue-offen nav a:nth-child(5) { transition-delay: .12s; }
  .menue-offen nav a:nth-child(6) { transition-delay: .15s; }
  .menue-offen nav a:nth-child(n+7) { transition-delay: .18s; }
  /* Offen klappt der Header über den ganzen Bildschirm auf, gleiche Transparenz
     und Unschärfe wie der Header (Michael, 2026-10-06) */
  .kopf-innen { height: var(--kopf); }
  .menue-offen .kopf { height: 100vh; height: 100dvh; }
  .menue-offen body { overflow: hidden; }
}
@media (max-width: 800px) and (prefers-reduced-motion: reduce) {
  nav, nav a, .menue-knopf span { transition: none; }
}

/* Abschnitte: normal mit Lesebreite, .voll über die ganze Breite */
.inhalt > section { max-width: var(--breite); margin: 0 auto; padding: 4rem 1rem; }
.inhalt > section > * { max-width: var(--lesebreite); margin-left: auto; margin-right: auto; }
.inhalt > section.voll { max-width: none; padding: 0; }
.inhalt > section.voll > * { max-width: none; }
.inhalt > section.voll > .rahmen { max-width: var(--lesebreite); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.15; letter-spacing: -.01em; }
h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); margin: .25em 0 .1em; text-align: center; } /* alle H1 mittig (Michael, 2026-10-06) */
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
.mitte { text-align: center; }
.untertitel { font-family: var(--serif); font-size: clamp(1.2rem, 2.4vw, 1.6rem); margin-top: 0; }

/* Einstieg mit rundem Porträt */
.held { text-align: center; }
/* Kopf der Über-mich-Seite mittig wie im Original (Michael 2026-10-06), Text direkt darunter */
.inhalt > section.held + section:not(.voll) { padding-top: 0; }
.held .portrait { display: block; width: 128px; height: 128px; margin: 0 auto 1rem; border-radius: 50%; object-fit: cover; }
/* Über mich: Überschrift über dem Bild, Abstand darüber wie darunter (Michael, 2026-10-06) */
.held h1 + .portrait, .held h1 + picture > .portrait { margin-top: 1.8rem; } /* sichtbar gemessen, gleicht den Zeilenabstand der Unterzeile aus */
/* Name als Logo-Schriftzug (SVG, Michael 2026-10-06, erst um 30 % verkleinert, dann um 25 % vergrößert), h1 bleibt für Suche und Screenreader */
.held .schriftzug { margin: .25rem 0 .5rem; }
.held .schriftzug img { display: block; width: min(22.75rem, 70vw); height: auto; margin: 0 auto; }

/* Werkbild über die volle Breite */
.bildband img { display: block; width: 100%; height: min(70vh, 56.25vw); object-fit: cover; }

/* Einmal einblenden, wenn ein Block ins Bild kommt (q-web, Muster 9; Weg hier kürzer).
   Ohne JavaScript und bei reduzierter Bewegung sofort sichtbar */
.js .cb-einblenden { opacity: 0; transform: translateY(16px); transition: opacity 1.2s cubic-bezier(.22, 1, .36, 1), transform 1.2s cubic-bezier(.22, 1, .36, 1); }
.js .cb-einblenden.cb-ist-sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .cb-einblenden { opacity: 1; transform: none; transition: none; } }

/* Farbfeld über die volle Breite */
.farbfeld { background: var(--rot); color: #fff; text-align: center; }
.farbfeld .rahmen { max-width: var(--lesebreite); margin: 0 auto; padding: 4.5rem 1rem; }
.farbfeld h2 { margin-top: 0; }

.knopf { display: inline-block; padding: .75rem 1.5rem; border-radius: 999px; text-align: center; line-height: 1.35; /* mittig auch bei Umbruch (Michael, 2026-10-06) */ background: var(--akzent); color: #fff; text-decoration: none; }
.knopf:hover { filter: brightness(1.1); }
.farbfeld .knopf { background: #fff; color: var(--rot); }

/* Fußmenü schwarz, vier Spalten, Inhalt mittig (Michael, 2026-10-06) */
.fuss { background: #000; color: #fff; padding: 3.5rem 1rem 2rem; text-align: center; }
.fuss-spalten { max-width: var(--breite); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 2rem; }
.fuss-spalten a { display: block; color: #d2d2d7; text-decoration: none; margin: .35rem 0; }
.fuss-spalten a:hover { color: #fff; text-decoration: underline; }
.fuss-titel { font-family: var(--serif); font-size: 1.1rem; margin: 0 0 .6rem; }
.fuss-recht { max-width: var(--breite); margin: 2.5rem auto 0; color: #86868b; font-size: .8125rem; }

/* Werk- und Blogseiten wie auf systeme.io (übernommen 2026-10-06): Titel
   mittig, Bilder mit runden Ecken (20 px), Text zweispaltig im Blocksatz
   mit Trennlinie (Spaltenbreite 400 px, Abstand 40 px, Linie #ddd),
   Silbentrennung, Detailbilder nebeneinander. Der Text bleibt schmaler
   als das Bild, wie bisher (844 statt 944 px). */
.artikel h1 { text-align: center; margin-bottom: 2.5rem; }
.artikel img { border-radius: 20px; }
.artikel .titelbild { display: block; width: 100%; }
.artikel .datum { text-align: center; color: var(--grau); font-size: .9375rem; margin: 1.5rem auto 0; }
.spalten { max-width: 53rem; margin: 2.5rem auto; column-width: 25rem; column-gap: 2.5rem; column-rule: 1px solid #ddd;
  text-align: justify; hyphens: auto; -webkit-hyphens: auto; line-height: 1.5; }
.spalten > :first-child { margin-top: 0; }
.spalten p { margin: 0 0 1rem; }
.artikel h2 { text-align: center; font-size: clamp(1.4rem, 2.6vw, 1.8rem); }
.knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: 2rem auto; }
.artikel hr { max-width: 53rem; border: 0; border-top: 1px solid #ddd; margin: 3rem auto; }
.nachweis { text-align: center; color: var(--grau); font-size: .9375rem; }
.stand { margin-top: 3rem; text-align: center; font-size: .8125rem; color: var(--grau); } /* Stand der Rechtstexte, wie sami (website-aufbau) */
.rechtstext h2 { text-align: left; } /* Zwischenüberschriften der Rechtstexte linksbündig (Michael, 2026-10-07) */
.rechtstext h2[id] { scroll-margin-top: calc(var(--kopf) + 1.5rem); } /* Sprungziel aus dem Inhaltsverzeichnis nicht unter der Kopfzeile */
.rechtstext ol a { text-decoration: none; } /* Inhaltsverzeichnis ohne Unterstrich, Rot beim Überfahren wie die Navigation (Michael, 2026-10-07) */
.rechtstext ol a:hover { color: var(--akzent); }
.impressum a { text-decoration: none; } /* Telefon, E-Mail, WhatsApp im Impressum, ebenso (Michael, 2026-10-08) */
.impressum a:hover { color: var(--akzent); }
.pfeil { font-size: .85em; } /* Links auf andere Websites, setzt der Generator (Michael, 2026-10-07) */
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* nur für Bildschirmleser */
.details { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.25rem; margin: 3rem auto 0; }
.details img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }

/* Werkübersicht als Mauerwerk (Masonry, Michael 2026-10-06): jedes Bild in
   seinem eigenen Format, Reihenfolge zeilenweise (Michael 2026-10-08): ein
   Raster mit 1-px-Zeilen, das Skript in basis.njk setzt je Bild die
   Zeilenzahl aus Breite und Seitenverhältnis. Ohne Skript ein normales
   Raster. Ecken 10 px, halb so rund wie sonst, weil sie das Werk selbst
   beschneiden (Michael 2026-10-08). Nur
   Bilder, keine Texte, über die volle Fensterbreite (Michael 2026-10-06);
   der Titel steht im Alt-Text. */
/* Fensterbreite Fläche unter der Überschrift, für Werk- und Blogübersicht
   (Michael, 2026-10-06), 1,5 rem Rand */
.inhalt > section.fensterbreit { padding: 0 1.5rem 4rem; }
.werkliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(18rem, calc((100% - 4.5rem) / 4)), 1fr)); gap: 1.5rem; align-items: start; }
.werkliste.mauer { grid-auto-rows: 1px; row-gap: 0; }
.werkliste a { display: block; position: relative; overflow: hidden; border-radius: 10px; text-decoration: none; }
.werkliste img { display: block; width: 100%; height: auto; }
/* Titel mittig im Bild, beim Überfahren eingeblendet; das Bild wird dabei
   dunkler und unscharf (Michael, 2026-10-08). Ohne Maus (Handy) kein Titel,
   die Bilder stehen für sich (Test, Michael, 2026-10-08). */
.werktitel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; text-align: center; font-family: var(--serif); font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.3; color: #fff; text-shadow: 0 0 .6rem rgba(0, 0, 0, .7), 0 0 .15rem rgba(0, 0, 0, .5); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.werkliste picture, .werkliste img { transition: filter .35s ease, transform .35s ease; }
.werkliste a:hover picture, .werkliste a:focus-visible picture { filter: brightness(.65) blur(4px); transform: scale(1.04); }
.werkliste a:hover .werktitel, .werkliste a:focus-visible .werktitel { opacity: 1; }
@media (hover: none) {
  .werkliste a:hover picture { filter: none; transform: none; }
  .werktitel { display: none; }
}
/* Schmal (Handy) zwei Spalten statt einer (Test, Michael, 2026-10-08);
   40,5 rem ist die Breite, unter der sonst nur eine Spalte passt. */
@media (max-width: 40.5rem) { .werkliste { grid-template-columns: repeat(2, 1fr); gap: .75rem; } }
@media (prefers-reduced-motion: reduce) { .werktitel, .werkliste picture { transition: none; } }

/* Blogübersicht als Karten wie auf der alten Seite: Bild, Titel, Kurztext */
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 2.5rem 1.5rem; }
.karten a { display: block; text-align: center; text-decoration: none; }
.karten img { display: block; width: 100%; aspect-ratio: 1205 / 844; object-fit: cover; border-radius: 20px; }
.kartentitel { display: block; margin: .9rem 0 .4rem; font-family: var(--serif); font-size: 1.25rem; line-height: 1.4; color: var(--akzent); }
.kartentext { display: block; color: var(--grau); font-size: .9375rem; line-height: 1.5; hyphens: auto; -webkit-hyphens: auto; }
.karten a:hover .kartentitel { text-decoration: underline; }
.werk-neuigkeiten h2 { text-align: center; margin: 0 auto 2rem; } /* Beiträge zum Werk, vom Generator (Michael, 2026-10-09) */
.werk-neuigkeiten .karten { grid-template-columns: repeat(auto-fit, minmax(18rem, 22rem)); justify-content: center; } /* eine Karte bleibt kartenbreit */
.seitenwahl { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin-top: 3rem; font-family: var(--serif); } /* Blog-Seiten, vom Generator */
.seitenwahl a, .seitenwahl span { min-width: 2.75rem; padding: .55rem .9rem; border-radius: 999px; text-align: center; text-decoration: none; color: var(--text); }
.seitenwahl a:hover { color: var(--akzent); }
.seitenwahl [aria-current] { background: var(--akzent); color: #fff; }

/* Linkseite unter /lp/ */
.links { text-align: center; }
.links .knopf { display: block; max-width: 28rem; margin: 0 auto .9rem; }
.links .profile { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.1rem; margin-top: 1.8rem; }

@media (max-width: 700px) {
  .inhalt > section { padding: 3rem 1rem; }
  .spalten { text-align: left; } /* Blocksatz reißt bei einer schmalen Spalte Lücken */
}

/* Pfeil nach oben wie bei Nadi Life (Michael, 2026-10-01): erscheint nach
   etwa 500 px Scrollen, mittig am unteren Rand, klebt per sticky am
   Bildschirmrand und bleibt am Seitenende über der Fußzeile stehen. */
html { scroll-behavior: smooth; }
.nach-oben-halter { position: sticky; bottom: 1rem; z-index: 5; height: 0; display: flex; justify-content: center; pointer-events: none; }
.nach-oben { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-top: -60px; border-radius: 50%;
  color: var(--text); background: rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18); opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s; pointer-events: auto; }
.nach-oben.sichtbar { opacity: 1; visibility: visible; transform: translateY(0); }
.nach-oben:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, .22); }
.nach-oben:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .nach-oben { transition: none; } .nach-oben:hover { transform: none; } }

/* Knöpfe: kein Unterstrich und kein Farbwechsel beim Überfahren, stattdessen
   leichtes Anheben mit Schatten wie bei Nadi Life (Michael, 2026-10-01) */
.knopf { transition: transform .15s ease, box-shadow .15s ease; }
.knopf:hover { text-decoration: none; filter: none; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(162, 34, 34, .28); }
.knopf:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(162, 34, 34, .25); }
@media (prefers-reduced-motion: reduce) { .knopf { transition: none; } .knopf:hover, .knopf:active { transform: none; } }
.farbfeld .knopf:hover { box-shadow: 0 6px 14px rgba(0, 0, 0, .25); }

/* Bento-Bilder, Bildbereich der Startseite (Michael 2026-10-11: nur eine Sektion
   mit Bildern im Bento-Raster, ersetzt das Lookbook; 2026-10-12: über die volle
   Breite, mehr Werke). 12er-Raster mit quadratischen Zellen; die Kachelformate
   folgen den Werkformaten (quer 6×4, hoch 4×6, quadratisch 4×4 und 2×2), damit
   kaum etwas beschnitten wird. Ohne Titel, Ecken 10 px wie die Werkübersicht.
   Die Zeilenhöhe rechnet aus der Rasterbreite (Containereinheit cqw). */
.inhalt > section.bento-bilder { --abstand: clamp(.6rem, 1.2vw, 1rem); padding: var(--abstand) 0 clamp(2rem, 4vw, 3.5rem); container-type: inline-size; } /* oben so breit wie der seitliche Rand (Michael, 2026-10-12) */
.inhalt > section.bento-bilder > .bento-bilder-innen { max-width: none; }
.bento-bilder-innen { --bw: calc(100cqw - 2 * var(--abstand));
  display: grid; width: var(--bw); margin: 0 auto; gap: var(--abstand);
  grid-template-columns: repeat(12, 1fr); grid-auto-rows: calc((var(--bw) - 11 * var(--abstand)) / 12);
  grid-template-areas:
    "dg dg dg dg dg dg es es es es es es"
    "dg dg dg dg dg dg es es es es es es"
    "dg dg dg dg dg dg es es es es es es"
    "dg dg dg dg dg dg es es es es es es"
    "wa wa wa wa ab ab ab ab ab ab ab ab"
    "wa wa wa wa ab ab ab ab ab ab ab ab"
    "wa wa wa wa ab ab ab ab ab ab ab ab"
    "wa wa wa wa ab ab ab ab ab ab ab ab"
    "wa wa wa wa pg pg lb lb gs gs ep ep"
    "wa wa wa wa pg pg lb lb gs gs ep ep"
    "ks ks ks ks gl gl gl gl gr gr gr gr"
    "ks ks ks ks gl gl gl gl gr gr gr gr"
    "ks ks ks ks gl gl gl gl gr gr gr gr"
    "ks ks ks ks gl gl gl gl gr gr gr gr"
    "ti ti ti ti ti ti sm sm sm sm sm sm"
    "ti ti ti ti ti ti sm sm sm sm sm sm"
    "ti ti ti ti ti ti sm sm sm sm sm sm"
    "ti ti ti ti ti ti sm sm sm sm sm sm"; }
.bento-bilder-innen a { display: block; overflow: hidden; border-radius: 10px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); } /* feine Kante, damit Werke mit weißem Grund (Lineart Blue) als Kachel lesbar bleiben */
.bento-bilder-innen picture, .bento-bilder-innen img { display: block; width: 100%; height: 100%; }
.bento-bilder-innen img { object-fit: cover; }
.bb-dg { grid-area: dg; } .bb-wa { grid-area: wa; } .bb-pg { grid-area: pg; } .bb-lb { grid-area: lb; }
.bb-ks { grid-area: ks; } .bb-gl { grid-area: gl; } .bb-gs { grid-area: gs; } .bb-ep { grid-area: ep; }
.bb-ti { grid-area: ti; } .bb-sm { grid-area: sm; } .bb-es { grid-area: es; } .bb-ab { grid-area: ab; } .bb-gr { grid-area: gr; }
/* „Alle Werke“ als Knopf (Michael, 2026-10-12) */
.bento-bilder .alle { margin: clamp(2rem, 4vw, 3rem) 0 0; text-align: center; }
/* Handy: zwei Spalten, quer und hoch über die ganze Breite im eigenen Format */
@media (max-width: 40.5rem) {
  .inhalt > section.bento-bilder { --abstand: .6rem; }
  .bento-bilder-innen { grid-template-columns: 1fr 1fr; grid-template-areas: none; grid-auto-rows: auto; }
  .bento-bilder-innen a { grid-area: auto; aspect-ratio: 1; }
  .bento-bilder-innen .bb-dg { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
  .bento-bilder-innen .bb-wa { grid-column: 1 / -1; aspect-ratio: 3364 / 4947; }
  .bento-bilder-innen .bb-ti { grid-column: 1 / -1; aspect-ratio: 2586 / 1838; }
  .bento-bilder-innen .bb-sm { grid-column: 1 / -1; aspect-ratio: 5204 / 3628; }
  .bento-bilder-innen .bb-es { grid-column: 1 / -1; aspect-ratio: 5906 / 4134; }
  .bento-bilder-innen .bb-ab { grid-column: 1 / -1; aspect-ratio: 8000 / 4571; }
  .bento-bilder-innen .bb-gr { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
}