/* ==========================================================================
   Café Senku · Unterseiten (Matcha, Bestellen, Über uns, FAQ, 404, Rechtsseiten)
   Lädt nach /styles.css. Nur eigene Klassen mit Präfix .s-, keine Selektoren
   aus styles.css überschreiben. Ruhige helle Seiten auf --paper,
   Text 7 von 12 Spalten links, Bild 5 rechts versetzt, unter 900 px einspaltig.
   ========================================================================== */

/* ---------- Seitenrahmen ---------- */
/* Die Kopfzeile steht auf .page-light im Fluss: Abstand ab ihrer Unterkante, oben wie .c-kopf (Catering) */
.s-seite { padding: clamp(32px, 5vw, 72px) 0 clamp(72px, 9vw, 128px); background: var(--paper); }
/* Seite mit Bild-Hero (Bestellen): das Bild beginnt knapp unter der Kopfzeile */
.s-seite.s-mit-bild { padding-top: clamp(16px, 2vw, 24px); }

.s-kopf { max-width: 860px; margin-bottom: clamp(40px, 6vw, 80px); }
.s-lede { margin-top: 22px; max-width: 62ch; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--ink-soft); }

/* ---------- Raster 7/5 ---------- */
.s-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(20px, 4vw, 56px); align-items: start; }
.s-text { grid-column: 1 / span 7; min-width: 0; }
.s-bild { grid-column: 8 / span 5; min-width: 0; position: sticky; top: 40px; margin-top: clamp(24px, 6vw, 96px); }
.s-raster-mitte { align-items: center; min-height: 52dvh; }
.s-raster-mitte .s-bild { position: static; margin-top: 0; }

/* ---------- Text ---------- */
.s-frage + .s-frage, .s-absatz + .s-absatz { margin-top: clamp(40px, 5vw, 64px); }
.s-frage h2, .s-absatz h2, .s-weg h2 { font-weight: 500; font-size: clamp(28px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -0.005em; }
.s-frage p, .s-absatz p, .s-weg p { max-width: 62ch; margin-top: 14px; color: var(--ink-soft); }
.s-seite p a, .s-seite li a, .s-rechtsseite p a { color: var(--deep); text-decoration: underline; text-decoration-color: var(--usucha); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: text-decoration-color 0.3s var(--ease); }
.s-seite p a:hover, .s-seite li a:hover { text-decoration-color: var(--deep); }
.s-klein { font-size: 14px; color: var(--ink-mute); }
.s-weg p.s-klein { margin-top: 18px; color: var(--ink-mute); }

.s-aktion { margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--line); }
.s-aktion p { color: var(--ink-soft); max-width: 62ch; margin-bottom: 24px; }
.s-weg .s-aktion { margin-top: 32px; padding-top: 0; border-top: 0; }

/* ---------- Bestellen: drei Wege, Überschrift 5, Inhalt 7 ---------- */
.s-weg { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px clamp(20px, 4vw, 56px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); }
.s-weg + .s-weg { margin-top: clamp(48px, 6vw, 80px); }
.s-weg > h2 { grid-column: 1 / span 5; }
.s-weg-inhalt { grid-column: 6 / span 7; min-width: 0; }
.s-weg-inhalt > :first-child { margin-top: 0; }
.s-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.s-zwischen { margin-top: clamp(36px, 4vw, 52px); font-weight: 500; font-size: clamp(20px, 1.8vw, 24px); }

/* ---------- Fragen: zwei Gruppen, aufklappbar ---------- */
.s-gruppe + .s-gruppe { margin-top: clamp(56px, 7vw, 96px); }
.s-gruppe > h2 { font-weight: 600; font-size: clamp(28px, 2.8vw, 38px); margin-bottom: 18px; }
.s-auf { border-top: 1px solid var(--line); }
.s-auf:last-child { border-bottom: 1px solid var(--line); }
.s-auf summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px 0; }
.s-auf summary::-webkit-details-marker { display: none; }
.s-auf summary h3 { font-weight: 500; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.3; transition: color 0.3s var(--ease); }
.s-auf summary:hover h3 { color: var(--deep); }
.s-auf summary::after { content: ""; width: 14px; height: 14px; color: var(--deep); background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transition: background-size 0.25s var(--ease); }
.s-auf[open] summary::after { background-size: 100% 2px, 2px 0; }
.s-auf p { max-width: 62ch; margin: -4px 0 0; padding-bottom: 22px; color: var(--ink-soft); }
.s-aktion p + p { margin-top: -12px; }

/* Lieferkarte: Namensliste in zwei Spalten */
.s-liste { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 40px); }
.s-liste li { padding: 9px 0; border-bottom: 1px solid var(--line); }
.s-name { display: block; font-size: 16px; line-height: 1.35; color: var(--ink); }
.s-hinweis { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--ink-mute); }

/* ---------- Bildblock Matcha: zwei Freisteller versetzt vor Farbflächen ---------- */
.s-dosen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 2vw, 24px); align-items: start; }
.s-dose { position: relative; isolation: isolate; margin: 0; }
.s-dose::before { content: ""; position: absolute; inset: 22% 0 7%; z-index: -1; border-radius: 62% 38% 55% 45% / 44% 56% 40% 60%; background: var(--s-ton); transform: rotate(-7deg); }
.s-dose img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: contain; }
.s-dose-tief { margin-top: 42%; }
.s-dose-tief::before { border-radius: 40% 60% 47% 53% / 58% 42% 60% 40%; transform: rotate(9deg); }
.s-ton-matcha { --s-ton: var(--matcha); }
.s-ton-hojicha { --s-ton: var(--bamboo); }

/* ---------- Bildblock Grübchen: Render im Blob-Ausschnitt ---------- */
.s-figuren { display: grid; gap: clamp(16px, 3vw, 32px); }
.s-figur { margin: 0; overflow: hidden; border-radius: var(--blob); background: var(--cream); }
.s-figur img { width: 100%; height: auto; }
.s-figuren .s-figur:first-child { width: 88%; }
.s-figur-tief { width: 64%; margin-left: auto; margin-top: -12%; border-radius: 46% 54% 41% 59% / 57% 45% 55% 43%; }
.s-figur-klein { width: min(100%, 380px); margin-left: auto; }

/* ---------- Unter 900 px einspaltig ---------- */
@media (max-width: 899px) {
  .s-raster, .s-weg { grid-template-columns: minmax(0, 1fr); }
  .s-text, .s-bild, .s-weg > h2, .s-weg-inhalt { grid-column: auto; }
  .s-bild { position: static; order: -1; margin-top: 0; }
  .s-dosen { max-width: 320px; }
  .s-figuren { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; max-width: 520px; }
  .s-figuren .s-figur:first-child, .s-figur-tief { width: 100%; margin-top: 0; }
  .s-figur-tief { margin-top: 28%; }
  .s-figur-klein { width: min(60%, 260px); margin-left: 0; }
  .s-raster-mitte { min-height: 0; }
  .s-liste { grid-template-columns: minmax(0, 1fr); }
  .s-bild-breit { display: none; }
}
@media (max-width: 559px) {
  .s-kacheln { grid-template-columns: minmax(0, 1fr); }
}
.s-seite p a.marke { text-decoration: none; }
/* Über uns: Bild-Hero (Grübchen lugt über die Mauer), Seitenbreite, festes Seitenverhältnis */
.s-heldbild { position: relative; width: min(100%, calc(66vh * 1.786)); aspect-ratio: 1.786; margin: 0 auto clamp(40px, 6vw, 80px); border-radius: var(--r-l); overflow: hidden; background: #e9dcc0; }
.s-heldbild picture, .s-heldbild img { position: absolute; inset: 0; width: 100%; height: 100%; }
.s-heldbild img { object-fit: cover; object-position: 50% 40%; }
@media (max-width: 759px), (max-aspect-ratio: 1/1) { .s-heldbild { width: min(100%, calc(60vh * 0.8)); aspect-ratio: 0.8; } }
.s-figur-bild { border-radius: var(--r-l); }
.s-figur-bild img { display: block; }