/* ==========================================================================
   okulus.ch · Startseite · gebaute Fassung ohne Gestaltung
   Stand 12.08.2026

   Das hier ist kein Mockup mit Notizen, sondern die Seite so, wie sie
   funktionieren soll: klebender Kopf, Klappmenü, ausklappbare Fragen,
   Tastaturbedienung, Verhalten auf dem Telefon.

   Gestaltung fehlt bewusst. Kein Farbsystem, keine Hausschrift, keine
   Rundungen, keine Schatten, keine Bewegung. Alles Grau ist Platzhalter.
   Justine ersetzt die Werte im Block «Stellschrauben», die Struktur bleibt.
   ========================================================================== */

/* --- Stellschrauben ------------------------------------------------------- */
:root {
  /* Farbe · alles Platzhalter, kommt vom Branding */
  --ton-text:      #111;
  --ton-gedaempft: #5a5a5a;
  --ton-linie:     #d4d4d4;
  --ton-linie-stark: #111;
  --ton-flaeche:   #ececec;   /* Bildflächen, solange es keine Bilder gibt */
  --ton-grund:     #fff;
  --ton-akzent:    #111;      /* wird der eine Akzent der Marke */

  /* Schrift · Systemschrift als Platzhalter */
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Grössen laut Layoutschema */
  --gr-h1:      44px;
  --gr-h2:      28px;
  --gr-kern:    32px;
  --gr-h3:      17px;
  --gr-lead-gr: 20px;
  --gr-lead:    18px;
  --gr-text:    16px;
  --gr-klein:   14px;
  --gr-mini:    13px;
  --gr-kicker:  12px;
  --gr-zahl:    48px;

  /* Abstände auf 8er-Basis */
  --a1: 8px; --a2: 16px; --a3: 24px; --a4: 32px; --a5: 40px;
  --a6: 48px; --a8: 64px; --a12: 96px; --a15: 120px;

  --rinne: 24px;
  --breite: 1240px;
  --rand: 24px;
}
@media (min-width: 700px) { :root { --rand: 40px; } }

/* --- Grundlage ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ton-grund);
  color: var(--ton-text);
  font-family: var(--schrift);
  font-size: var(--gr-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--ton-text);
  outline-offset: 3px;
}

.zum-inhalt {
  position: absolute; left: -9999px;
  background: var(--ton-text); color: var(--ton-grund);
  padding: 10px 16px; z-index: 100;
}
.zum-inhalt:focus { left: var(--rand); top: 8px; }

/* --- Breite und Raster ---------------------------------------------------- */
.bahn { max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }

.raster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--rinne);
  align-items: start;
}
.s1{grid-column-end:span 1}.s2{grid-column-end:span 2}.s3{grid-column-end:span 3}.s4{grid-column-end:span 4}
.s5{grid-column-end:span 5}.s6{grid-column-end:span 6}.s7{grid-column-end:span 7}.s8{grid-column-end:span 8}
.s12{grid-column-end:span 12}
.b5{grid-column-start:5}.b6{grid-column-start:6}.b7{grid-column-start:7}
.leer { display: block; }

/* --- Kopf ----------------------------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--ton-grund);
  border-bottom: 1px solid var(--ton-linie-stark);
}
.kopf .innen {
  display: flex; align-items: center; gap: var(--a3);
  min-height: 72px;
  padding-block: 8px;
}
.marke {
  font-size: 15px; font-weight: 600; letter-spacing: .02em;
  text-decoration: none; white-space: nowrap;
}

.haupt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--a3); font-size: var(--gr-klein); margin-left: var(--a5); }
.haupt a { text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.haupt a:hover { border-bottom-color: var(--ton-linie); }
/* Die Seite selbst wird kräftig markiert, der Abschnitt, in dem man steht, leise.
   So ist auf jeder Seite genau ein Eintrag als aktuell erkennbar.
   Markiert wird nur mit der Linie und nie mit dem Schriftschnitt: fetter Text ist
   breiter, und dann verschieben sich beim Seitenwechsel alle Einträge dahinter. */
.haupt a[aria-current="page"] { border-bottom-color: var(--ton-text); }
.haupt a[aria-current="true"] { border-bottom-color: var(--ton-linie-stark); }

.kopf .rechts { margin-left: auto; display: flex; align-items: center; gap: var(--a2); }

.menue-knopf {
  display: none;
  font: inherit; font-size: var(--gr-klein);
  background: none; border: 1px solid var(--ton-text);
  padding: 8px 12px; cursor: pointer;
}

/* --- Abschnittsnavigation ------------------------------------------------
   Eigene Zeile unter dem Kopf, nur auf Seiten, die in einem Abschnitt mit
   Unterseiten stehen. Sie stand früher in der Hauptnavigation, eingeschoben
   zwischen den Abschnitt und den nächsten Eintrag. Das hatte einen Fehler:
   die Hauptnavigation sah auf jeder Seite anders aus und ihre Einträge
   sprangen beim Seitenwechsel um mehrere Zentimeter. Jetzt steht die
   Hauptnavigation überall gleich, und die Unterseiten haben ihren eigenen Ort.
   ------------------------------------------------------------------------- */
.unterzeile { border-top: 1px solid var(--ton-linie); }
.unter { display: flex; align-items: center; gap: var(--a3); font-size: var(--gr-mini); padding-block: 7px; }
.unter a { text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.unter a:hover { border-bottom-color: var(--ton-linie); }
.unter a[aria-current="page"] { border-bottom-color: var(--ton-text); }

/* --- Knöpfe --------------------------------------------------------------- */
.knopf {
  display: inline-block;
  border: 1px solid var(--ton-akzent);
  padding: 10px 18px;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}
.knopf:hover { background: var(--ton-akzent); color: var(--ton-grund); }
.knopf.klein { padding: 7px 14px; font-size: var(--gr-klein); }
.daneben { font-size: var(--gr-klein); color: var(--ton-gedaempft); margin-left: var(--a2); }

/* --- Abschnitte ----------------------------------------------------------- */
/* Abstand zwischen Abschnitten über den oberen Rand, damit er nicht doppelt zählt */
.teil { padding: 0; margin-top: var(--a12); }
.teil.erster { margin-top: var(--a8); }
.teil.weit { margin-top: var(--a15); }   /* grosser Absatz, wo ein Abschnitt neu ansetzt */
main > .teil:last-child { margin-bottom: var(--a12); }

/* --- Typografie ----------------------------------------------------------- */
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
h1 { font-size: var(--gr-h1); line-height: 1.1; max-width: 22ch; }
h2 { font-size: var(--gr-h2); line-height: 1.25; max-width: 34ch; }
h3 { font-size: var(--gr-h3); line-height: 1.3; max-width: 40ch; }
.kern { font-size: var(--gr-kern); font-weight: 400; line-height: 1.2; max-width: 30ch; }

.kicker {
  font-size: var(--gr-kicker); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ton-gedaempft); margin: 0 0 var(--a1);
}
p { margin: 0 0 var(--a2); max-width: 68ch; }
p:last-child { margin-bottom: 0; }
.lead { font-size: var(--gr-lead); line-height: 1.5; max-width: 60ch; }
.lead.gross { font-size: var(--gr-lead-gr); }
.klein { font-size: var(--gr-klein); }
.gedaempft { color: var(--ton-gedaempft); }

.mark { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }

/* --- Hero ----------------------------------------------------------------- */
.zahl { border-top: 1px solid var(--ton-linie-stark); padding-top: var(--a2); margin-top: var(--a6); }
.zahl .wert { display: block; font-size: var(--gr-zahl); font-weight: 600; line-height: 1; }
.zahl .wert small { font-size: .5em; font-weight: 400; }
.zahl p { font-size: 15px; margin: var(--a1) 0 var(--a1); }
.zahl cite { font-style: normal; font-size: var(--gr-kicker); color: var(--ton-gedaempft); }

/* --- Grundsätze ----------------------------------------------------------- */
.grundsaetze { list-style: none; margin: 0; padding: 0; }
.grundsaetze li {
  display: flex; align-items: center; gap: var(--a2);
  border-top: 1px solid var(--ton-linie);
  padding-block: var(--a2);
  min-height: 64px;
  font-size: var(--gr-h3);
}
.grundsaetze li:last-child { border-bottom: 1px solid var(--ton-linie); }
.zeichen {
  flex: 0 0 38px; width: 38px; height: 38px;
  background: var(--ton-flaeche);
}

/* --- Angebot als Zeilen --------------------------------------------------- */
.angebot { border-top: 1px solid var(--ton-linie-stark); margin-top: var(--a5); }
.posten {
  display: grid;
  grid-template-columns: 3fr 6fr 3fr;
  column-gap: var(--rinne);
  padding-block: var(--a3);
  border-bottom: 1px solid var(--ton-linie);
}
.posten .preis { text-align: right; font-size: 15px; white-space: nowrap; }
.wege { display: flex; flex-direction: column; gap: 4px; margin-top: var(--a1); font-size: 15px; }
.wege a { text-decoration: underline; text-underline-offset: 3px; }

/* --- Nummerierte Teile ---------------------------------------------------- */
.teile { list-style: none; margin: var(--a4) 0 0; padding: 0; }
.teile li {
  display: grid;
  grid-template-columns: 1fr 7fr 4fr;
  column-gap: var(--rinne);
  border-top: 1px solid var(--ton-linie);
  padding-block: var(--a3);
}
.teile .zahlwort { font-size: var(--gr-mini); color: var(--ton-gedaempft); }

/* --- Flächen statt Bilder ------------------------------------------------- */
.flaeche { background: var(--ton-flaeche); display: block; }
.flaeche.breit { aspect-ratio: 4 / 3; }
.flaeche.portrait { aspect-ratio: 3 / 4; }

/* --- Fragen --------------------------------------------------------------- */
.fragen { border-top: 1px solid var(--ton-linie-stark); }
.fragen details { border-bottom: 1px solid var(--ton-linie); }
.fragen summary {
  cursor: pointer; list-style: none;
  padding-block: var(--a2);
  font-size: var(--gr-text); font-weight: 600;
  display: flex; justify-content: space-between; gap: var(--a2);
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; font-weight: 400; }
.fragen details[open] summary::after { content: "×"; }
.fragen details p { font-size: 15px; padding-bottom: var(--a3); max-width: 66ch; }

/* --- Karten der Menschen -------------------------------------------------- */
.menschen {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--rinne); margin-top: var(--a3); list-style: none; padding: 0;
}
.menschen .name { display: block; font-size: var(--gr-text); font-weight: 600; margin-top: var(--a2); }
.menschen .rolle { display: block; font-size: var(--gr-klein); }
.menschen .zusatz { display: block; font-size: var(--gr-mini); color: var(--ton-gedaempft); }
.menschen .spruch { display: block; font-size: var(--gr-klein); margin-top: var(--a1); }

/* --- Vorzüge -------------------------------------------------------------- */
.vorzuege { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 var(--rinne); list-style: none; margin: var(--a4) 0 0; padding: 0; }
.vorzuege li { border-top: 1px solid var(--ton-linie); padding-block: var(--a3); }
.vorzuege li:nth-child(-n+2) { border-top-color: var(--ton-linie-stark); }
.vorzuege h3 { margin-bottom: var(--a1); }

/* --- Kacheln, Absprung zu den Unterseiten --------------------------------- */
.kacheln {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rinne);
  margin-top: var(--a5);
  list-style: none; padding: 0;
}
.kachel {
  display: flex; flex-direction: column;
  height: 100%;
  border: 1px solid var(--ton-linie-stark);
  padding: var(--a3);
  text-decoration: none;
}
.kachel:hover { background: var(--ton-flaeche); }
.kachel .oben { display: flex; justify-content: space-between; gap: var(--a2); align-items: baseline; }
.kachel h2 { font-size: var(--gr-h2); margin: 0; }
.kachel .preis { font-size: 15px; white-space: nowrap; }
.kachel p { margin: var(--a2) 0 0; font-size: 15px; max-width: none; }
.kachel .fuehrt {
  margin-top: auto; padding-top: var(--a3);
  font-size: 15px; text-decoration: underline; text-underline-offset: 3px;
}
.kachel .drin { margin-top: var(--a2); font-size: var(--gr-mini); color: var(--ton-gedaempft); }

.sortierfrage {
  border-top: 1px solid var(--ton-linie-stark);
  border-bottom: 1px solid var(--ton-linie-stark);
  padding-block: var(--a3);
  margin-top: var(--a5);
}
.sortierfrage p { font-size: var(--gr-lead); max-width: 68ch; }

@media (max-width: 900px) {
  .kacheln { grid-template-columns: minmax(0, 1fr); }
}

/* --- Fragebogen, Aufbau 1:1 von ki.fruitjuicer.ch ------------------------- */
.fortschritt { display: flex; justify-content: space-between; font-size: var(--gr-mini); color: var(--ton-gedaempft); }
.balken { height: 2px; background: var(--ton-linie); margin-top: 6px; }
.balken i { display: block; height: 2px; background: var(--ton-text); width: 0; transition: width .2s linear; }
@media (prefers-reduced-motion: reduce) { .balken i { transition: none; } }

.schritt { display: none; margin-top: var(--a4); }
.schritt.aktiv { display: block; }
.schritt .frage { font-size: var(--gr-lead); font-weight: 600; margin: 0 0 4px; max-width: 46ch; }
.schritt .zusatz { font-size: var(--gr-klein); color: var(--ton-gedaempft); margin: 0 0 var(--a2); }
.zurueck { background: none; border: 0; padding: 0 0 var(--a2); font: inherit; font-size: var(--gr-klein); color: var(--ton-gedaempft); cursor: pointer; }
.zurueck:hover { color: var(--ton-text); }

.auswahl { display: grid; gap: 8px; }
.wahl {
  display: flex; align-items: flex-start; gap: 10px;
  border: 1px solid var(--ton-linie); padding: 12px 14px;
  font-size: 15px; cursor: pointer;
}
.wahl:hover { border-color: var(--ton-text); }
.wahl:has(input:checked) { border-color: var(--ton-text); background: var(--ton-flaeche); }
.wahl input { margin: 3px 0 0; flex: 0 0 auto; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--ton-linie); padding: 8px 12px;
  font-size: var(--gr-klein); cursor: pointer;
}
.chip:hover { border-color: var(--ton-text); }
.chip:has(input:checked) { border-color: var(--ton-text); background: var(--ton-flaeche); }

.hinweis { font-size: var(--gr-mini); color: var(--ton-gedaempft); margin-top: var(--a1); }
.tat { margin-top: var(--a3); }
.tat button, button.knopf {
  font: inherit; font-size: 15px; background: none; color: inherit;
  border: 1px solid var(--ton-akzent); padding: 10px 18px; cursor: pointer;
}
.tat button:hover:enabled, button.knopf:hover:enabled { background: var(--ton-akzent); color: var(--ton-grund); }
.tat button:disabled { border-color: var(--ton-linie); color: var(--ton-gedaempft); cursor: not-allowed; }

.feld { margin-top: var(--a2); }
.feld label { display: block; font-size: var(--gr-klein); margin-bottom: 4px; }
.feld input, .feld select, .feld textarea {
  width: 100%; font: inherit; font-size: 15px; padding: 9px 10px;
  border: 1px solid var(--ton-text); background: var(--ton-grund); color: inherit;
}
.feld textarea { min-height: 96px; resize: vertical; }
.feldpaar { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--a2); }
.gruppe { margin-top: var(--a4); }
.gruppe > .titel { display: block; font-size: var(--gr-klein); font-weight: 600; margin-bottom: 8px; }
.pflicht { color: var(--ton-gedaempft); }

.eckdaten { width: 100%; border-collapse: collapse; margin-top: var(--a2); }
.eckdaten th, .eckdaten td { text-align: left; vertical-align: top; padding: 10px 16px 10px 0; border-top: 1px solid var(--ton-linie); font-size: 15px; }
.eckdaten th { font-weight: 600; width: 34%; }

.bildreihe { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--rinne); margin-top: var(--a3); }
.bildreihe .flaeche { aspect-ratio: 3 / 2; }

.klebrig { position: sticky; top: 96px; }

@media (max-width: 900px) {
  .feldpaar { grid-template-columns: minmax(0,1fr); }
  .bildreihe { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .klebrig { position: static; }
}

/* --- Fuss ----------------------------------------------------------------- */
.fuss { border-top: 1px solid var(--ton-linie-stark); padding-block: var(--a5); }
.fuss .stolz { font-weight: 600; }
.fuss nav { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4px var(--a3); font-size: var(--gr-klein); }
.fuss nav a { text-decoration: none; }
.fuss nav a:hover { text-decoration: underline; }
.fuss .klein { color: var(--ton-gedaempft); }

/* --- Telefon und Tablet --------------------------------------------------- */
@media (max-width: 900px) {
  :root { --gr-h1: 32px; --gr-h2: 24px; --gr-kern: 26px; --gr-lead-gr: 18px; --gr-zahl: 40px; }

  .raster { grid-template-columns: minmax(0, 1fr); }
  .raster > * { grid-column: 1 / -1 !important; }
  .leer { display: none; }

  .teil, .teil.weit { margin-top: var(--a8); }

  .haupt {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0;
    margin: 0; padding: var(--a2) var(--rand) var(--a3);
    background: var(--ton-grund);
    border-bottom: 1px solid var(--ton-linie-stark);
  }
  .haupt.offen { display: flex; }
  .haupt a { padding-block: 10px; border-bottom: 1px solid var(--ton-linie); }
  /* Auf kleinen Fenstern wird die Abschnittszeile seitlich schiebbar, statt
     umzubrechen: ein Kopf, der drei Zeilen hoch ist, frisst den Inhalt. */
  .unter {
    overflow-x: auto; scrollbar-width: none;
    padding-inline: var(--rand); margin-inline: 0; max-width: none;
  }
  .unter::-webkit-scrollbar { display: none; }
  .kopf .innen { position: relative; }
  .menue-knopf { display: inline-block; }

  .posten { grid-template-columns: minmax(0,1fr); row-gap: var(--a1); }
  .posten .preis { text-align: left; }
  .teile li { grid-template-columns: auto 1fr; column-gap: var(--a2); }
  .teile li > *:last-child { display: none; }
  .menschen { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .vorzuege { grid-template-columns: minmax(0,1fr); }
  .fuss nav { grid-template-columns: minmax(0,1fr); }
}

/* --- Belegmarke ------------------------------------------------------------
   Nur fürs Mockup. Markiert eine Stelle, an der eine Angabe fehlt und keine
   erfunden wird. Ohne diese Regel liest sich «Sein Spruch» wie sein Spruch.
   Fliegt vor dem Livegang raus, zusammen mit der letzten Belegmarke.          */
.beleg {
  background: repeating-linear-gradient(45deg, transparent, transparent 4px, var(--ton-flaeche) 4px, var(--ton-flaeche) 8px);
  box-shadow: inset 0 -1px 0 var(--ton-linie-stark);
  padding: 1px 5px;
  color: var(--ton-gedaempft);
}
.beleg::before { content: "⟨"; }
.beleg::after { content: "⟩"; }

/* --- Druck ---------------------------------------------------------------- */
@media print {
  .kopf, .menue-knopf { position: static; }
  .fragen details { open: true; }
}