/* SCHIWE KI, Erklärseite für Andreas. Stil wie die Präsentation: Helvetica Neue, grosse fette
   Titel, rote Rubriken, weisse Kacheln mit weichem Schatten auf Hellgrau. Farben der Schule Zizers. */
:root {
  --weiss: #ffffff;
  --hell: #f5f5f7;
  --tinte: #1d1d1f;
  --grau: #6e6e73;
  --rot: #d3033c;
  --schatten: 0 4px 24px rgba(0, 0, 0, .07);
  --schrift: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--weiss); color: var(--tinte); font-family: var(--schrift); font-size: 18px; line-height: 1.55; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:focus-visible, input:focus-visible + span { outline: 3px solid var(--rot); outline-offset: 3px; }
::selection { background: var(--rot); color: #fff; }

.breite { width: min(1120px, 100% - 48px); margin: 0 auto; }
section[id] { scroll-margin-top: 72px; }
.zeitplan p a, .block a, .liste a, .kachel p a { color: var(--rot); }
.kachel.rot p a { color: #fff; }
.kachel h3 a { color: inherit; text-decoration-color: var(--rot); }
.eckdaten a { color: inherit; }

/* Kopfzeile */
.kopfzeile { position: sticky; top: 0; z-index: 10; background: var(--weiss); }
.kopfzeile-innen { display: flex; justify-content: space-between; align-items: center; height: 72px; }
.kopfzeile nav { display: flex; gap: 26px; font-size: 15px; }
.kopfzeile nav a { text-decoration: none; color: var(--tinte); transition: color .18s ease; }
.kopfzeile nav a:hover { color: var(--rot); }

/* Titel */
.titel { padding: 96px 0 112px; }
.rubrik { color: var(--rot); font-weight: 700; font-size: 15px; margin-bottom: 14px; }
.titel h1 { font-size: clamp(64px, 11vw, 148px); line-height: .95; font-weight: 700; letter-spacing: -0.035em; }
.untertitel { margin-top: 22px; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.3; color: var(--grau); max-width: 30ch; }
.eckdaten { list-style: none; padding: 0; margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.eckdaten li { background: var(--hell); border-radius: 18px; padding: 22px 24px; }
.eckdaten strong { display: block; font-size: 20px; }
.eckdaten span { display: block; margin-top: 4px; font-size: 16px; color: var(--grau); }

/* Abschnitte */
.abschnitt { padding: 104px 0; }
.abschnitt.hell { background: var(--hell); }
.abschnitt h2 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 44px; }
.einleitung { margin: -24px 0 36px; color: var(--grau); max-width: 60ch; }
.einleitung.gross { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.35; color: var(--tinte); max-width: 40ch; margin-top: -16px; }

/* Kacheln */
.kachel { background: var(--weiss); border-radius: 22px; box-shadow: var(--schatten); padding: 32px 34px; }
.abschnitt:not(.hell) .kachel { box-shadow: 0 2px 20px rgba(0, 0, 0, .08); }
.kachel h3 { font-size: 26px; line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 12px; }
.kachel p + p { margin-top: 12px; }
.kachel-rubrik { color: var(--rot); font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.kachel.rot { background: var(--rot); color: #fff; }
.kachel.rot .kachel-rubrik { color: #fff; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.breit-kachel { margin-top: 24px; }
.breit-kachel p:not(.kachel-rubrik) { max-width: 72ch; }
.knopf { display: inline-block; margin-top: 30px; padding: 14px 24px; border-radius: 980px; background: var(--rot); color: #fff; text-decoration: none; font-weight: 700; font-size: 17px; transition: background .18s ease, transform .12s var(--ease); }
.knopf:hover { background: #a8022f; }
.knopf:active { transform: scale(.97); }
.liste { padding-left: 1.1em; display: grid; gap: 10px; }
.liste li::marker { color: var(--rot); }

/* Zeitplan */
.zeitplan { list-style: none; padding: 12px 34px; }
.zeitplan li { display: grid; grid-template-columns: 90px 1fr 220px; gap: 20px; align-items: baseline; padding: 18px 0; }
.zeitplan li + li { box-shadow: 0 -1px 0 #ececee; }
.zeitplan .zeit { color: var(--rot); font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; }
.zeitplan strong { font-size: 20px; }
.zeitplan p { color: var(--grau); font-size: 16px; margin-top: 2px; }
.zeitplan .wer { font-size: 16px; text-align: right; }
.zeitplan .pause strong, .zeitplan .pause .zeit { color: var(--grau); }

/* Blöcke */
.bloecke { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.block-nr { font-size: 88px; line-height: 1; font-weight: 700; color: var(--rot); letter-spacing: -0.04em; margin-bottom: 14px; }
.block .karte { margin-top: 18px; padding: 16px 18px; background: var(--hell); border-radius: 14px; font-size: 16px; }

/* Material */
.material { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.stueck { display: flex; flex-direction: column; text-decoration: none; padding: 22px 22px 24px; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.stueck:hover { transform: translateY(-4px); box-shadow: 0 10px 34px rgba(0, 0, 0, .12); }
.stueck img { height: 210px; width: 100%; object-fit: contain; background: var(--hell); border-radius: 12px; padding: 14px; margin-bottom: 18px; }
.stueck strong { font-size: 19px; }
.stueck span { color: var(--grau); font-size: 15px; margin-top: 2px; }
.stueck.notebook { background: var(--tinte); color: #fff; }
.stueck.notebook span { color: #c7c7cc; }
.stueck .notebook-wort { display: flex; align-items: center; justify-content: center; height: 210px; margin: 0 0 18px; border-radius: 12px; background: var(--rot); color: #fff; font-size: 44px; font-weight: 700; letter-spacing: -0.03em; }

/* Redezeit */
.anteile { margin-top: 24px; }
.anteile h3 { margin-bottom: 6px; }
.anteile-erklaerung { color: var(--grau); font-size: 16px; max-width: 70ch; }
.anteile-balken { display: flex; height: 26px; border-radius: 13px; overflow: hidden; margin-top: 24px; background: var(--hell); }
.anteile-balken span { transition: flex-grow .5s var(--ease); }
.balken-andrin { background: var(--tinte); }
.balken-gemeinsam { background: #aeaeb2; }
.balken-andreas { background: var(--rot); }
.anteile-summe { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 12px; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.summe-gemeinsam { color: var(--grau); }
.summe-andreas { color: var(--rot); }
.anteile-liste { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.teil { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; box-shadow: 0 1px 0 #ececee; }
.teil-name { font-size: 16px; }
.teil-name small { color: var(--grau); font-size: 14px; margin-left: 6px; }
.wahl { display: flex; background: var(--hell); border-radius: 10px; padding: 3px; flex-shrink: 0; }
.wahl label { position: relative; cursor: pointer; }
.wahl input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.wahl span { display: block; padding: 6px 10px; font-size: 14px; border-radius: 8px; transition: background .15s ease, color .15s ease; }
.wahl input:checked + span { background: var(--tinte); color: #fff; }
.wahl input[value="gemeinsam"]:checked + span { background: var(--grau); }
.wahl input[value="andreas"]:checked + span { background: var(--rot); }

/* Konzept */
.gross-zahl { font-size: 120px; line-height: .9; font-weight: 700; letter-spacing: -0.05em; margin-bottom: 16px; }
.rot-text { color: var(--rot); }

/* Ortsbild und Fuss */
.ort img { width: 100%; height: min(66vh, 680px); object-fit: cover; object-position: 50% 45%; }
.fuss { padding: 48px 0 56px; }
.fuss-innen { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; font-size: 14px; color: var(--grau); }

/* Einblenden */
.js .zeigen { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .zeigen.da { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .zwei, .bloecke, .anteile-liste { grid-template-columns: 1fr; }
  .material { grid-template-columns: 1fr 1fr; }
  .eckdaten { grid-template-columns: 1fr; }
  .zeitplan li { grid-template-columns: 70px 1fr; }
  .zeitplan .wer { grid-column: 2; text-align: left; color: var(--grau); margin-top: -10px; }
  .kopfzeile nav { display: none; }
}
@media (max-width: 560px) {
  .breite { width: calc(100% - 32px); }
  .titel { padding: 56px 0 72px; }
  .abschnitt { padding: 72px 0; }
  .kachel { padding: 24px 22px; border-radius: 18px; }
  .zeitplan { padding: 6px 20px; }
  .material { grid-template-columns: 1fr; }
  .stueck img, .stueck .notebook-wort { height: 180px; }
  .teil { flex-direction: column; align-items: flex-start; }
  .fuss-innen { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .zeigen { transform: none; transition: opacity .3s ease; }
  .stueck:hover { transform: none; }
}