/* Unterseiten, Runde 31: dieselbe Sprache wie die Startseite.
   Grosse Schrift, echte Bilder, wenig Kaesten. Texte, Ueberschriften und Verweise
   bleiben, wie sie sind; hier aendert sich nur, wie sie aussehen.
   Auftrag: .design/onagero-web/DESIGN_BRIEF.md, Runde 31. */

/* ---------------- Kopf ---------------- */
/* Grund-Typografie, auch fuer den schlichten Kopf ohne Bild */
.h31 { padding: clamp(32px, 4.5vw, 72px) 0 clamp(64px, 8vw, 128px); background: var(--papier); }
.h31 .bahn { max-width: 1440px; }
.h31-schlicht .bahn { max-width: 1000px; }
.h31 h1 { font: 700 clamp(40px, 5.4vw, 84px)/.98 var(--display); font-stretch: 104%; letter-spacing: -.045em; color: var(--tinte); hyphens: manual; -webkit-hyphens: manual; text-wrap: balance; }
.h31-schlicht h1 { font-size: clamp(40px, 5.8vw, 88px); max-width: 16ch; }
.h31 .anlauf { margin-top: 26px; max-width: 34em; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--tinte-2); }
.h31 .tasten { margin-top: 30px; }
.h31-marken { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font: 500 14px/1.3 var(--text); color: var(--tinte-2); }
.h31-marken li { display: flex; align-items: center; gap: 8px; }
.h31-marken li::before { content: ''; width: 9px; height: 9px; border-radius: 50%; border: 2.5px solid var(--lime); }
.h31 .stand { margin-top: 14px; font: 500 13px/1.3 var(--mono); color: var(--tinte-3); }

/* Bild-Kopf: vollflaechig, kinoartig, Text darauf, wie die Startseite */
.h31:has(.h31-bild) { position: relative; display: flex; align-items: flex-end; min-height: min(86vh, 860px);
  margin-top: calc(-1 * (68px + var(--bar-gap))); padding: 0; overflow: hidden; background: var(--nacht); }
.h31:has(.h31-bild) > .bahn { position: relative; z-index: 2; display: block; width: 100%; max-width: 1480px;
  padding: clamp(104px, 14vh, 176px) var(--rand) clamp(48px, 6vw, 88px); }
.h31:has(.h31-bild) .h31-text { max-width: 46rem; }
.h31:has(.h31-bild) h1 { color: #fff; }
.h31:has(.h31-bild) .anlauf { color: rgba(255, 255, 255, .92); }
.h31:has(.h31-bild) .h31-marken { color: rgba(255, 255, 255, .86); }
.h31:has(.h31-bild) .stand { color: rgba(255, 255, 255, .72); }
.h31:has(.h31-bild) .taste-voll { background: #fff; color: var(--tinte); }
.h31:has(.h31-bild) .taste-voll .ring { color: var(--lime-tief); }
.h31:has(.h31-bild) .taste-rand { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.h31-bild { position: absolute; inset: 0; z-index: 0; margin: 0; padding: 0; }
.h31-bild .h31-foto, .h31-bild .h31-fenster { position: absolute; inset: 0; height: 100%; width: 100%; border: 0; border-radius: 0; box-shadow: none; aspect-ratio: auto; background: none; }
.h31-bild .h31-foto img, .h31-bild .h31-fenster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h31-leiste, .h31-blase { display: none; }
.h31:has(.h31-bild)::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(8,14,11,.95) 0%, rgba(8,14,11,.82) 30%, rgba(8,14,11,.5) 58%, rgba(8,14,11,.12) 85%, transparent 100%),
              linear-gradient(0deg, rgba(8,14,11,.66) 0%, rgba(8,14,11,0) 48%); }

/* Kopfleiste dunkel ueber dem Bild, hell sobald der Inhalt kommt (seite.js) */
.hero-bild main { position: relative; }
.hero-bild .brot { position: absolute; top: calc(68px + var(--bar-gap) + 16px); left: 0; right: 0; z-index: 3; }
.hero-bild .brot ol, .hero-bild .brot a { color: rgba(255, 255, 255, .8); }
.hero-bild .brot li[aria-current] { color: #fff; }
.hero-bild .brot li + li::before { color: rgba(255, 255, 255, .45); }
.held-dunkel .kopf::before { background: rgba(10, 14, 12, .26); box-shadow: none; }
.held-dunkel .kopf .marke span, .held-dunkel .kopf .nav > div > a, .held-dunkel .kopf .nav > div > button,
.held-dunkel .kopf .sprache, .held-dunkel .kopf .menue > summary { color: #f4f6f0; }
.held-dunkel .kopf .sprache, .held-dunkel .kopf .menue > summary { border-color: rgba(255, 255, 255, .4); }
.held-dunkel .kopf .nav > div > a:hover, .held-dunkel .kopf .nav > div:focus-within > a { background: rgba(255, 255, 255, .14); color: #fff; }
.held-dunkel .kopf .taste-voll { background: #fff; color: #16241b; }
.held-dunkel .kopf .taste-voll .ring { color: var(--lime-tief); }

/* ---------------- Abschnitte ---------------- */
main .abschnitt { padding: clamp(64px, 9vw, 130px) 0; }
main .abschnitt + .abschnitt { padding-top: 0; }
main .abschnitt-weiss + .abschnitt, main .abschnitt + .abschnitt-weiss { padding-top: clamp(64px, 9vw, 130px); }
main .abschnitt-weiss { border: 0; }
main .kopfzeile { max-width: 900px; margin-bottom: clamp(32px, 4.5vw, 56px); }
main .kopfzeile h2 { font: 700 clamp(32px, 4vw, 60px)/1.02 var(--display); font-stretch: 104%; letter-spacing: -.04em; text-wrap: balance; }
main .kopfzeile p { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; max-width: 40em; }

/* "Kurz gesagt": ein grosser Einleitungsabsatz, kein Kasten */
main .kurz-abschnitt { padding-bottom: clamp(40px, 6vw, 80px) !important; }
main .kurz { background: none; border: 0; border-radius: 0; padding: 0; max-width: 980px; box-shadow: none; }
main .kurz h2 { font: 600 15px/1 var(--text); color: var(--lime-tief); margin-bottom: 16px; }
main .kurz p { font: 500 clamp(20px, 1.9vw, 28px)/1.4 var(--text); letter-spacing: -.01em; color: var(--tinte); text-wrap: pretty; }

/* Karten ohne Rahmen und ohne Symbole: die Ueberschrift traegt */
main .raster { gap: clamp(36px, 4vw, 56px) clamp(28px, 3.5vw, 52px); }
main .raster > .karte { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
main .raster > .karte .glyphe { display: none; }
main .raster > .karte h3 { font: 700 clamp(22px, 2vw, 30px)/1.12 var(--display); letter-spacing: -.02em; color: var(--tinte); margin: 0 0 12px; text-wrap: balance; }
main .raster > .karte p { font-size: 17px; line-height: 1.55; color: var(--tinte-2); }
main .raster > a.karte { text-decoration: none; }
main .raster > a.karte h3 { text-decoration: underline; text-decoration-color: rgba(128, 181, 7, .55); text-decoration-thickness: 3px; text-underline-offset: 6px; transition: text-decoration-color .2s; }
main .raster > a.karte:hover h3 { text-decoration-color: var(--lime); }
main .raster > a.karte .mehr { color: var(--lime-tief); font-size: 15px; }
/* Karten, die bewusst Kaesten bleiben (Vergleichsurteil, Einwaende, Konditionen), behalten einen ruhigen Grund */
main .urteil .karte, main .raster > .karte.einwand { background: var(--flaeche); border: 1px solid var(--linie-2); border-radius: 22px; padding: 28px; }

/* Die Bitte aus dem Team: gross, in der Blase der Startseite */
main .karte.wunsch { background: none; border: 0; padding: 0; }
main .wunsch blockquote { font: 500 clamp(20px, 1.9vw, 26px)/1.4 var(--text); padding: 20px 24px; border-radius: 24px 24px 24px 6px; border: 1px solid rgba(128, 181, 7, .45); }
main .wunsch .abteilung { font: 600 14px/1 var(--text); color: var(--lime-tief); }

/* Listen mit Haken und Grenzen: groesser, luftiger */
main .haken li, main .grenzen li { font-size: 17px; line-height: 1.5; }
main .fliess p, main .fliess li { font-size: 18px; line-height: 1.65; }

/* Fragen wie auf der Startseite */
main .faq summary { font: 600 clamp(18px, 1.5vw, 21px)/1.35 var(--text); padding: 24px 2px; }
main .faq .antwort p { font-size: 17px; line-height: 1.6; }

/* Weiterlesen: ruhiger, groesser */
main .verweise h3 { font: 600 15px/1 var(--text); color: var(--lime-tief); }
main .verweise li a { font-size: 17px; padding: 15px 0; }

/* Artikel: Lesetypografie */
main article.fliess { max-width: 720px; }
main article.fliess h2 { font: 700 clamp(28px, 3vw, 42px)/1.08 var(--display); letter-spacing: -.03em; margin-top: 72px; }
main article.fliess p, main article.fliess li { font-size: 19px; line-height: 1.7; }
main .inhalt-liste { border-radius: 22px; }

/* ---------------- Einstieg: Foto ueber die ganze Breite ---------------- */
.e31 { position: relative; min-height: min(80vh, 760px); display: flex; align-items: center; overflow: hidden; color: #fff; background: var(--nacht); }
.e31 > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.e31::after { content: ''; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(10, 18, 14, .84) 0%, rgba(10, 18, 14, .5) 42%, rgba(10, 18, 14, 0) 72%); }
.e31-text { position: relative; z-index: 1; max-width: 1440px; width: 100%; margin: 0 auto; padding: 60px var(--rand); display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.e31-text h2 { font: 700 clamp(40px, 5.6vw, 92px)/.96 var(--display); font-stretch: 104%; letter-spacing: -.045em; color: #fff; max-width: 14ch; hyphens: manual; }
.e31-text p { margin: 22px 0 0; max-width: 34ch; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; color: rgba(255, 255, 255, .88); }
.e31 .tasten { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: flex-end; }
.e31 .taste-voll { background: var(--lime); color: var(--nacht); } .e31 .taste-voll .ring { color: var(--nacht); }
.e31-leise { color: #fff; font-weight: 600; text-underline-offset: 4px; }

/* ---------------- Telefon ---------------- */
@media (max-width: 960px) {
  .h31 .bahn { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .h31 h1 { font-size: clamp(36px, 10vw, 56px); }
  .h31-blase { left: 10px; right: 10px; max-width: none; font-size: 15.5px; }
  .h31-figur { width: 72px !important; right: 10px; bottom: auto; top: -30px; }
  .e31 { min-height: 620px; align-items: flex-end; }
  .e31 > img { object-position: 30% center; }
  .e31::after { background: linear-gradient(0deg, rgba(10, 18, 14, .88) 0%, rgba(10, 18, 14, .45) 55%, rgba(10, 18, 14, .1) 100%); }
  .e31-text { align-items: flex-start; text-align: left; padding-bottom: 48px; }
  .e31 .tasten { justify-content: flex-start; }
  main .raster { grid-template-columns: minmax(0, 1fr); }
}

/* Plattform: Onagero lernt mit, mit echten Fotos */
.lm-reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.lm-foto { margin: 0; }
.lm-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; }
.lm-foto figcaption { margin-top: 12px; font-size: 16px; line-height: 1.45; color: var(--tinte-2); }
@media (max-width: 900px) { .lm-reihe { grid-template-columns: 1fr; } }

/* Nachbesserung nach den Aufnahmen */
.h31 { overflow-x: clip; }
.h31 h1 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: normal; word-break: normal; font-size: clamp(38px, 4.6vw, 74px); }
.h31-schlicht h1 { font-size: clamp(38px, 5.2vw, 80px); }
@media (max-width: 960px) { .h31 h1 { font-size: clamp(34px, 9.4vw, 52px); } }

/* Vollflaechiger Bild-Kopf am Telefon: Text unten, Verlauf von unten */
@media (max-width: 960px) {
  /* Text oben unter der Brotkrume statt unten: ein langer, vierzeiliger Titel
     waechst sonst in die Brotkrume hinein (Aufnahme 15.10.2026). */
  .h31:has(.h31-bild) { min-height: min(92vh, 760px); align-items: flex-start; }
  .h31:has(.h31-bild) > .bahn { padding: 160px var(--rand) 48px; }
  .h31:has(.h31-bild)::after { background: linear-gradient(180deg, rgba(8,14,11,.9) 0%, rgba(8,14,11,.5) 46%, rgba(8,14,11,.22) 100%); }
  .hero-bild .brot { top: calc(68px + var(--bar-gap) + 8px); }
}