/*
 * Produktseite „Interaktive Office-Kurse“.
 *
 * Die Seite ist als das Objekt gebaut, in dem gelernt wird: ein Word-Fenster
 * mit Blatt und angedocktem Kurs-Panel. Jede Sektion ist ein weiteres Stück
 * Papier auf dem grauen Grund, auf dem Word seine Seiten zeigt.
 * Farben und Schrift kommen aus dem Add-in (Geist, Tinte, Host-Farben).
 */

@font-face {
  font-family: "Geist";
  src: url("fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --tinte: #0a0a0a;
  --tinte-weich: #555555;
  --papier: #ffffff;
  --grund: #e7e7e4;
  --ton: #f1f1ef;
  --dunkel: #141414;
  --hell-auf-dunkel: #d9d9d6;

  --word: #185abd;
  --excel: #107c41;
  --powerpoint: #c43e1c;

  --rand: clamp(16px, 2.2vw, 32px);
  --spalt: clamp(12px, 1.4vw, 24px);
  --abschnitt: clamp(88px, 11vw, 176px);

  --schrift: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
  --gr-xl: clamp(2.75rem, 5.6vw, 5.5rem);
  --gr-l: clamp(1.5rem, 2.2vw, 2.25rem);
  --gr-m: 1.125rem;
  --gr-s: 0.875rem;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: var(--gr-m);
  line-height: 1.55;
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure {
  margin: 0;
}

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

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--word);
  outline-offset: 3px;
}

::selection {
  background: var(--word);
  color: var(--papier);
}

.unsichtbar {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Ohne Skript bleibt alles sichtbar; mit Skript blendet die Kurswahl aus. */
.js [data-verborgen] {
  display: none !important;
}

p {
  text-wrap: pretty;
}

/* ------------------------------------------------------------------ Schrift */

.anzeige {
  font-size: var(--gr-xl);
  font-weight: 650;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.gross {
  font-size: var(--gr-l);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.riesig {
  display: inline-block;
  font-size: 22cqw;
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.055em;
  white-space: nowrap;
}

.zeile {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.zeile > span {
  display: block;
}

/* ------------------------------------------------------------------ Bedienelemente */

.knopf,
.zelle,
.balken {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 550;
  transition:
    transform var(--t-press) var(--ease-out),
    background-color var(--t-hover) ease,
    color var(--t-hover) ease;
}

.knopf {
  min-height: 52px;
  padding: 0 26px;
  background: var(--tinte);
  color: var(--papier);
}

.knopf:active,
.zelle:active,
.balken:active {
  transform: scale(0.97);
}

.textlink {
  text-decoration: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color var(--t-hover) ease;
}

@media (hover: hover) and (pointer: fine) {
  .knopf:hover {
    background: #333333;
  }

  .textlink:hover,
  .leiste__links a:hover,
  .postkarte__adresse a:hover,
  .credits a:hover {
    text-decoration-color: currentColor;
  }
}

/* ------------------------------------------------------------------ Hero */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--spalt);
  align-items: center;
  padding: clamp(24px, 5vh, 56px) var(--rand);
  overflow: clip;
  background: #3a3a3a;
}

.hero__raum {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.55) contrast(1.05);
}

.hero__karte {
  position: relative;
  grid-column: 2 / 12;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  column-gap: var(--spalt);
  row-gap: clamp(24px, 3.4vh, 40px);
  padding: clamp(20px, 2.6vw, 40px);
  background: var(--papier);
}

.leiste {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: var(--gr-s);
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
}

.marke svg {
  color: var(--word);
}

.leiste__links {
  display: flex;
  gap: clamp(16px, 2vw, 32px);
  padding: 0;
  list-style: none;
}

.leiste__links a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.3em;
  transition: text-decoration-color var(--t-hover) ease;
  font-size: 1rem;
}

.hero__titel {
  grid-column: 1 / -1;
}

.hero__text {
  grid-column: 1 / 5;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.hero__satz {
  font-size: 1.25rem;
  line-height: 1.45;
  max-width: 34ch;
}

.hero__fakten {
  font-weight: 550;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.hero__probe {
  color: var(--tinte-weich);
  font-size: 1rem;
  max-width: 36ch;
}

.aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: auto;
}

/* ------------------------------------------------------------------ Word-Ausschnitt (eigene UI-Regeln) */

[data-ui].word {
  grid-column: 5 / -1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  background: #f3f3f3;
  color: #1f1f1f;
  font-size: 13px;
  line-height: 1.45;
  border: 1px solid #dcdcdc;
  min-height: 420px;
}

[data-ui] .word__band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 8px 12px;
  background: #ffffff;
  border-bottom: 1px solid #e1e1e1;
}

[data-ui] .word__reiter {
  font-weight: 600;
  color: var(--word);
  padding: 4px 2px;
  border-bottom: 2px solid var(--word);
}

[data-ui] .word__gruppe {
  display: flex;
  gap: 6px;
  padding-left: 14px;
  border-left: 1px solid #e1e1e1;
}

[data-ui] .word__knopf,
[data-ui] .word__vorlage {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #d1d1d1;
  border-radius: 4px;
  background: #ffffff;
  cursor: pointer;
  font-size: 13px;
  transition:
    background-color var(--t-hover) ease,
    border-color var(--t-hover) ease,
    transform var(--t-press) var(--ease-out);
}

[data-ui] .word__knopf--fett {
  font-weight: 700;
  min-width: 34px;
}

[data-ui] .word__vorlage--h1 {
  color: #0f4761;
  font-weight: 600;
}

[data-ui] .word__knopf[aria-pressed="true"],
[data-ui] .word__vorlage[aria-pressed="true"] {
  background: #dce6f4;
  border-color: #8fb0dc;
}

[data-ui] .word__knopf:active,
[data-ui] .word__vorlage:active,
[data-ui] .panel__pruefen:active {
  transform: scale(0.96);
}

@media (hover: hover) and (pointer: fine) {
  [data-ui] .word__knopf:hover,
  [data-ui] .word__vorlage:hover {
    background: #eef3fa;
  }
}

[data-ui] .word__flaeche {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.82fr);
  min-height: 0;
}

[data-ui] .word__blatt {
  margin: 18px 0 0 18px;
  padding: 32px 30px;
  background: #ffffff;
  border: 1px solid #e3e3e3;
  border-bottom: 0;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 13.5px;
  color: #1f1f1f;
}

[data-ui] .word__zeile {
  font-size: 13.5px;
  margin-bottom: 12px;
  transition:
    font-size var(--t-ui) var(--ease-out),
    color var(--t-ui) ease;
}

[data-ui] .word__zeile[data-vorlage="ueberschrift"] {
  font-size: 21px;
  font-weight: 500;
  color: #0f4761;
  margin-bottom: 10px;
}

[data-ui] .word__zeile.ist-fett {
  font-weight: 700;
}

[data-ui] .word__zeile.ist-gross {
  font-size: 21px;
}

[data-ui] .word__absatz {
  margin-bottom: 10px;
}

[data-ui] .word__absatz--kurz {
  max-width: 30ch;
}

[data-ui] .word__panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 16px;
  background: #f8f8f8;
  border-left: 1px solid #e3e3e3;
  font-family: var(--schrift);
  font-size: 13px;
}

[data-ui] .panel__kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ececec;
}

[data-ui] .panel__kopf svg {
  color: var(--word);
}

[data-ui] .panel__ort {
  color: #666666;
}

[data-ui] .panel__titel {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

[data-ui] .panel__aufgabe {
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
}

[data-ui] .panel__label {
  font-weight: 600;
  margin-bottom: 4px;
}

[data-ui] .panel__pruefen {
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  background: #141414;
  color: #ffffff;
  font-weight: 550;
  font-size: 13px;
  cursor: pointer;
  transition:
    background-color var(--t-hover) ease,
    transform var(--t-press) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  [data-ui] .panel__pruefen:hover {
    background: #333333;
  }
}

[data-ui] .panel__pruefen[aria-busy="true"] {
  background: #4a4a4a;
  cursor: progress;
}

[data-ui] .panel__ergebnis:empty {
  display: none;
}

[data-ui] .panel__ergebnis {
  padding: 10px 12px;
  border-radius: 8px;
  background: #ffedea;
  color: #831c1e;
  animation: ergebnis-rein 320ms var(--ease-out);
}

[data-ui] .panel__ergebnis.ist-bestanden {
  background: #dcfae5;
  color: #04250e;
}

[data-ui] .panel__ergebnis p + p {
  margin-top: 6px;
  color: #3d3d3d;
}

[data-ui] .panel__ergebnis strong {
  font-weight: 600;
}

[data-ui] .panel__hinweis {
  color: #666666;
}

@keyframes ergebnis-rein {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

[data-ui] .word__status {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 12px;
  background: #e9e9e9;
  color: #4a4a4a;
  font-size: 12px;
  border-top: 1px solid #dcdcdc;
}

/* ------------------------------------------------------------------ Kurse (Feld in der Host-Farbe) */

.kurse {
  --feld: var(--word);
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 88svh;
  background: var(--feld);
  color: var(--papier);
  transition: background-color 420ms ease;
}

.kurse[data-kurs-feld="excel"] {
  --feld: var(--excel);
}

.kurse[data-kurs-feld="powerpoint"] {
  --feld: var(--powerpoint);
}

.kurse__bild {
  position: relative;
  align-self: center;
  margin: var(--abschnitt) 40px;
  margin-left: var(--rand);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kurse__bild img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  background: color-mix(in srgb, var(--feld) 70%, black);
}

.kurse__bild img[data-kurs-bild="excel"] {
  object-position: 38% 50%;
}

.kurse__bild img[data-kurs-bild="word"] {
  object-position: 62% 50%;
}

.kurse__bild figcaption {
  font-size: var(--gr-s);
}

.kurse__text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  padding: var(--abschnitt) var(--rand) var(--abschnitt) 40px;
}

.reiter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 40px;
}

.reiter [role="tab"] {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: var(--gr-m);
  cursor: pointer;
  transition:
    background-color var(--t-hover) ease,
    color var(--t-hover) ease,
    transform var(--t-press) var(--ease-out);
}

.reiter [role="tab"]:active {
  transform: scale(0.97);
}

.reiter [role="tab"][aria-selected="true"] {
  background: var(--papier);
  color: var(--tinte);
  font-weight: 600;
}

.kurse .reiter [role="tab"][aria-selected="false"] {
  background: color-mix(in srgb, var(--feld) 80%, black);
}

@media (hover: hover) and (pointer: fine) {
  .kurse .reiter [role="tab"][aria-selected="false"]:hover {
    background: color-mix(in srgb, var(--feld) 62%, black);
  }
}

.kurse__kurs {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 40ch;
}

.kurse__kurs h3 {
  margin-bottom: 18px;
}

.kurse__kurs p:not(.kurse__stufen) {
  font-size: 1.25rem;
  line-height: 1.45;
}

.kurse__stufen {
  font-size: 1rem;
}

.kurse__aktionen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.zelle {
  min-height: 72px;
  padding: 0 18px;
  background: color-mix(in srgb, var(--feld) 78%, black);
  color: var(--papier);
  text-align: center;
}

.zelle--tinte {
  background: var(--tinte);
}

@media (hover: hover) and (pointer: fine) {
  .zelle:hover {
    background: color-mix(in srgb, var(--feld) 60%, black);
  }

  .zelle--tinte:hover {
    background: #2a2a2a;
  }
}

/* ------------------------------------------------------------------ Lehrplan */

.lehrplan {
  background: var(--papier);
  padding: var(--abschnitt) var(--rand);
}

.lehrplan__wort {
  container-type: inline-size;
}

.lehrplan__wort .riesig {
  margin-left: -0.04em;
}

.lehrplan__kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 24px 48px;
  margin: 40px 0 28px;
}

.lehrplan__satz {
  max-width: 44ch;
}

.reiter--hell {
  margin-top: 0;
}

.reiter--hell [role="tab"][aria-selected="false"] {
  background: var(--ton);
}

.reiter--hell [role="tab"][aria-selected="true"] {
  background: var(--tinte);
  color: var(--papier);
}

@media (hover: hover) and (pointer: fine) {
  .reiter--hell [role="tab"][aria-selected="false"]:hover {
    background: #e4e4e1;
  }
}

.plan__kurs {
  position: absolute;
  width: 1px;
  height: 1px; /* taste-skill-ignore: nur für Screenreader */
  overflow: hidden;
  clip-path: inset(50%);
}

.plan__stufe {
  font-size: var(--gr-l);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 48px 0 16px;
}

.plan__stufe:first-of-type {
  margin-top: 0;
}

.plan__modul {
  background: var(--ton);
  margin-bottom: 6px;
}

.plan__modul summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 24px;
  min-height: 60px;
  padding: 0 20px;
  cursor: pointer;
  list-style: none;
  transition: background-color var(--t-hover) ease;
}

.plan__modul summary::-webkit-details-marker {
  display: none;
}

.plan__modul summary::after {
  content: "+";
  font-size: 1.5rem;
  line-height: 1;
  text-align: center;
  transition: transform var(--t-ui) var(--ease-out);
}

.plan__modul[open] summary::after {
  transform: rotate(45deg);
}

@media (hover: hover) and (pointer: fine) {
  .plan__modul summary:hover {
    background: #e8e8e5;
  }
}

.plan__name {
  font-weight: 550;
}

.plan__wert {
  font-variant-numeric: tabular-nums;
  color: var(--tinte-weich);
  white-space: nowrap;
}

.plan__inhalt > div {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--spalt);
  row-gap: 16px;
  padding: 6px 20px 26px;
}

.plan__inhalt p {
  grid-column: 1 / 5;
  color: var(--tinte-weich);
}

.plan__inhalt ul {
  grid-column: 5 / -1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  list-style: none;
}

.plan__inhalt li {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

/* ------------------------------------------------------------------ Bildband */

.band {
  position: relative;
  height: 78svh;
  min-height: 420px;
  overflow: clip;
  background: #2b2b2b;
}

.band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  filter: grayscale(1) contrast(1.05);
}

.band figcaption {
  position: absolute;
  left: var(--rand);
  bottom: var(--rand);
  max-width: calc(100% - 2 * var(--rand));
  padding: 12px 16px;
  background: var(--papier);
  font-size: var(--gr-s);
}

/* ------------------------------------------------------------------ Eine Lektion (gehaltene Geschichte) */

.lektion {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--spalt);
  align-items: start;
  padding: var(--abschnitt) var(--rand);
  background: var(--grund);
}

.lektion__halt {
  grid-column: 1 / 6;
  position: sticky;
  top: 14vh;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.lektion__halt > p {
  max-width: 34ch;
}

[data-ui].pruefung {
  max-width: 360px;
  padding: 14px 16px;
  background: #dcfae5;
  color: #04250e;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.45;
}

[data-ui] .pruefung__ort {
  font-weight: 600;
  margin-bottom: 6px;
}

[data-ui] .pruefung__kriterien {
  margin-top: 10px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

[data-ui] .pruefung__kriterien li {
  display: flex;
  gap: 8px;
  animation: ergebnis-rein 320ms var(--ease-out) both;
  animation-delay: calc(var(--n, 0) * 70ms);
}

[data-ui] .pruefung__kriterien li::before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 5px;
  margin-top: 0.45em;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

.zettel {
  grid-column: 7 / 12;
  max-width: 480px;
  width: 100%;
  justify-self: start;
  padding: 36px 32px 72px;
  background: var(--papier);
  font-variant-numeric: tabular-nums;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 14px),
    95% 100%,
    90% calc(100% - 14px),
    85% 100%,
    80% calc(100% - 14px),
    75% 100%,
    70% calc(100% - 14px),
    65% 100%,
    60% calc(100% - 14px),
    55% 100%,
    50% calc(100% - 14px),
    45% 100%,
    40% calc(100% - 14px),
    35% 100%,
    30% calc(100% - 14px),
    25% 100%,
    20% calc(100% - 14px),
    15% 100%,
    10% calc(100% - 14px),
    5% 100%,
    0 calc(100% - 14px)
  );
}

.zettel__kopf {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--tinte-weich);
  font-size: 1rem;
}

.zettel__kopf h3 {
  color: var(--tinte);
}

.zettel__gruppe {
  padding-top: 8px;
}

.zettel__gruppe h4 {
  margin: 28px 0 10px;
  font-size: var(--gr-m);
  font-weight: 650;
}

.zettel__zeile {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 6px 0;
  font-size: 1rem;
}

.zettel__zeile span:first-child {
  flex: 0 1 auto;
  min-width: 0;
}

.zettel__zeile span:last-child {
  flex-shrink: 0;
}

.zettel__zeile::after {
  content: "";
  order: 1;
  flex: 1 0 20px;
  border-bottom: 4px dotted #bdbdb8;
  margin-bottom: 0.45em;
}

.zettel__zeile span:last-child {
  order: 2;
}

.zettel__ende {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 48px;
  margin: 32px -32px 0;
  padding: 0 32px;
  background: var(--tinte);
  color: var(--papier);
  font-weight: 600;
}

/* ------------------------------------------------------------------ Fragen (Karteikarten) */

.fragen {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--spalt);
  padding: var(--abschnitt) var(--rand);
  background: var(--papier);
}

.fragen h2,
.karten {
  grid-column: 3 / 11;
}

.karten {
  margin-top: 88px;
}

.karte {
  --reiter-breite: 200px;
  --karte-farbe: var(--word);
  position: relative;
  background: var(--karte-farbe);
  color: var(--papier);
}

.karte[data-farbe="excel"] {
  --karte-farbe: var(--excel);
}

.karte[data-farbe="powerpoint"] {
  --karte-farbe: var(--powerpoint);
}

.karte h3 {
  font: inherit;
}

.karte__kopf {
  display: block;
  width: 100%;
  min-height: 100px;
  padding: 22px 28px 50px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.karte__reiter {
  position: absolute;
  top: -40px;
  left: calc(28px + (100% - var(--reiter-breite) - 56px) * var(--i) / 5);
  width: var(--reiter-breite);
  height: 40px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  background: var(--karte-farbe);
  font-size: 1rem;
  font-weight: 550;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
}

.karte__frage {
  display: block;
  font-size: 1.25rem;
  font-weight: 550;
  line-height: 1.3;
  max-width: 34ch;
}

.karte__antwort {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 360ms var(--ease-out);
}

.karte__antwort > div {
  overflow: hidden;
}

.karte__antwort p {
  max-width: 52ch;
  padding: 0 28px 56px;
  font-size: 1.0625rem;
}

.karte.is-offen .karte__kopf,
html:not(.js) .karte__kopf {
  padding-bottom: 14px;
}

.js .karte:not(.is-offen) .karte__antwort {
  grid-template-rows: 0fr;
}

@media (hover: hover) and (pointer: fine) {
  .karte:not(.is-offen) .karte__frage {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 0.2em;
    transition: text-decoration-color var(--t-hover) ease;
  }

  .karte:not(.is-offen) .karte__kopf:hover .karte__frage {
    text-decoration-color: currentColor;
  }
}

/* ------------------------------------------------------------------ Installieren (Antwortkarte) */

.installieren {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--spalt);
  align-items: end;
  padding: clamp(96px, 9vw, 136px) var(--rand) 0;
  background: var(--dunkel);
  color: var(--hell-auf-dunkel);
  overflow: clip;
}

.installieren__satz {
  grid-column: 1 / 5;
  align-self: end;
  margin-bottom: 64px;
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  line-height: 1.4;
  color: #f4f4f2;
}

.antwortkarte {
  grid-column: 6 / 13;
  justify-self: end;
  width: min(100%, 44vw);
  aspect-ratio: 7 / 5;
  margin-bottom: -60px;
  padding: 48px 48px 108px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: var(--papier);
  color: var(--tinte);
  text-align: center;
  transform: rotate(2deg);
  transform-origin: 60% 100%;
}

.antwortkarte ol {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 44ch;
  padding-left: 1.4em;
  text-align: left;
  font-size: var(--gr-m);
}

.antwortkarte li::marker {
  font-weight: 650;
}

.balken {
  width: 100%;
  min-height: 56px;
  margin-top: 8px;
  background: var(--tinte);
  color: var(--papier);
}

@media (hover: hover) and (pointer: fine) {
  .balken:hover {
    background: #333333;
  }
}

/* ------------------------------------------------------------------ Rückseite (Postkarte) */

.rueckseite {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--spalt);
  padding: clamp(96px, 10vw, 152px) var(--rand) var(--rand);
  background: var(--grund);
}

.postkarte {
  --zacke: calc(100% / 12);
  grid-column: 2 / 12;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 64px;
  min-height: 420px;
  padding: 72px clamp(24px, 4vw, 64px) 28px;
  background: var(--papier);
}

.postkarte__zacken {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  transform: translateY(-50%);
}

.postkarte__zacken span {
  flex: 1;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--papier);
}

.postkarte__gruss {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.postkarte__gruss p {
  max-width: 36ch;
}

.postkarte__adresse {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.postkarte__adresse ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  list-style: none;
  font-size: var(--gr-m);
  order: -1;
}

.postkarte__adresse a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
  text-underline-offset: 0.22em;
  transition: text-decoration-color var(--t-hover) ease;
}

.postkarte__marke {
  flex-shrink: 0;
  width: 88px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 30% 50%;
  padding: 6px;
  background: var(--grund);
  filter: grayscale(1);
  transform: rotate(3deg);
}

.postkarte__druck {
  grid-column: 1 / -1;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--gr-s);
  line-height: 1.5;
}

.credits a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
  text-underline-offset: 0.2em;
}

/* ------------------------------------------------------------------ Bewegung */

@media (prefers-reduced-motion: no-preference) {
  .js .hero [data-zeile] {
    transform: translateY(105%);
    animation: zeile-hoch 900ms var(--ease-expo) forwards;
    animation-delay: calc(140ms + var(--i) * 100ms);
  }

  .js .hero [data-laden] {
    opacity: 0;
    transform: translateY(14px);
    animation: aufsteigen 520ms var(--ease-out) forwards;
    animation-delay: var(--d, 0ms);
  }

  .js .hero__raum {
    animation: raum-setzen 1600ms var(--ease-soft) both;
  }

  .js .hero__karte {
    animation: aufsteigen 700ms var(--ease-out) both;
  }

  .js [data-auftritt] {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 700ms var(--ease-out),
      transform 900ms var(--ease-expo);
    transition-delay: calc(var(--i, 0) * 80ms);
  }

  .js [data-auftritt].ist-da {
    opacity: 1;
    transform: none;
  }

  .js .kurse__bild img {
    transition:
      clip-path 900ms var(--ease-in-out),
      transform 1200ms var(--ease-soft);
  }

  .js .kurse__bild img.ist-neu {
    animation: bild-oeffnen 900ms var(--ease-in-out) both;
  }

  @media (min-width: 1101px) {
    .js .zettel__gruppe {
      opacity: 0.55;
      transition: opacity 500ms ease;
    }

    .js .zettel__gruppe.ist-aktiv {
      opacity: 1;
    }
  }

  @supports (animation-timeline: view()) {
    .band img {
      animation: band-treiben linear both;
      animation-timeline: view();
    }
  }

  .js .karte {
    transition: transform var(--t-ui) var(--ease-out);
  }

  .js .karte.ist-neu .karte__antwort p {
    animation: aufsteigen 420ms var(--ease-out) both;
    animation-delay: 120ms;
  }

  .js .antwortkarte.ist-da {
    transform: rotate(2deg);
  }

  .js .antwortkarte {
    transform: rotate(5deg) translateY(80px);
  }

  @supports (animation-timeline: view()) {
    .js .hero__raum {
      animation: raum-treiben linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }
}

@keyframes zeile-hoch {
  to {
    transform: none;
  }
}

@keyframes aufsteigen {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes raum-setzen {
  from {
    transform: scale(1.06);
  }
}

@keyframes raum-treiben {
  from {
    transform: scale(1.02) translateY(0);
  }

  to {
    transform: scale(1.08) translateY(6%);
  }
}

@keyframes band-treiben {
  from {
    transform: scale(1.1) translateY(-4%);
  }

  to {
    transform: scale(1.1) translateY(4%);
  }
}

@keyframes bild-oeffnen {
  from {
    clip-path: inset(0 0 100% 0);
    transform: scale(1.08);
  }

  to {
    clip-path: inset(0);
    transform: none;
  }
}

/* ------------------------------------------------------------------ Tablet */

@media (max-width: 1100px) {
  .hero__karte {
    grid-column: 1 / -1;
  }

  .hero__text {
    grid-column: 1 / -1;
  }

  [data-ui].word {
    grid-column: 1 / -1;
  }

  .hero__text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--spalt);
  }

  .hero__satz,
  .hero__fakten {
    grid-column: 1;
  }

  .hero__probe,
  .aktionen {
    grid-column: 2;
  }

  .hero__probe {
    grid-row: 1;
  }

  .aktionen {
    grid-row: 2;
    margin-top: 0;
    align-self: start;
  }

  .lektion {
    display: flex;
    flex-direction: column;
    gap: 56px;
  }

  .lektion__halt {
    position: static;
  }

  .zettel {
    max-width: 560px;
  }

  .fragen h2,
  .karten {
    grid-column: 1 / -1;
  }

  .installieren__satz {
    grid-column: 1 / 6;
  }

  .antwortkarte {
    grid-column: 6 / 13;
    width: calc(100% - 16px);
    aspect-ratio: auto;
  }

  .postkarte {
    grid-column: 1 / -1;
  }
}

/* ------------------------------------------------------------------ Telefon */

@media (max-width: 760px) {
  :root {
    --gr-xl: clamp(2.125rem, 9vw, 2.75rem);
  }

  .hero {
    padding: 16px var(--rand) 32px;
    align-items: start;
  }

  .hero__karte {
    padding: 20px 16px;
    row-gap: 24px;
  }

  .leiste__links {
    display: none;
  }

  .hero__text {
    display: flex;
  }

  .hero__satz {
    font-size: var(--gr-m);
  }

  .aktionen {
    margin-top: 4px;
  }

  [data-ui].word {
    min-height: 0;
  }

  [data-ui] .word__flaeche {
    grid-template-columns: 1fr;
  }

  [data-ui] .word__blatt {
    margin: 12px 12px 0;
    padding: 22px 18px;
    border-bottom: 1px solid #e3e3e3;
  }

  [data-ui] .word__panel {
    border-left: 0;
    border-top: 1px solid #e3e3e3;
  }

  [data-ui] .word__gruppe {
    padding-left: 0;
    border-left: 0;
  }

  .kurse {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .kurse__bild {
    margin: 72px var(--rand) 0;
    flex-direction: column-reverse;
  }

  .band {
    height: 56svh;
    min-height: 320px;
  }

  .band img {
    object-position: 30% 40%;
  }

  .kurse__text {
    padding: 40px var(--rand) 72px;
  }

  .reiter [role="tab"] {
    font-size: 1.0625rem;
    padding: 0 14px;
  }

  .kurse__aktionen {
    grid-template-columns: 1fr;
  }

  .zelle {
    min-height: 60px;
  }

  .lehrplan__kopf {
    margin-top: 28px;
  }

  .plan__modul summary {
    grid-template-columns: minmax(0, 1fr) 20px;
    gap: 4px 12px;
    min-height: 58px;
    padding: 12px 16px;
  }

  .plan__modul summary .plan__wert {
    grid-row: 2;
    font-size: var(--gr-s);
  }

  .plan__modul summary::after {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  .plan__inhalt > div {
    display: flex;
    flex-direction: column;
    padding: 4px 16px 22px;
  }

  .plan__inhalt li {
    flex-direction: column;
    gap: 0;
  }

  .plan__inhalt li .plan__wert {
    font-size: var(--gr-s);
  }

  .lektion {
    display: flex;
    flex-direction: column;
    gap: 48px;
  }

  .lektion__halt {
    position: static;
  }

  .zettel {
    max-width: none;
    padding: 28px 20px 64px;
  }

  .zettel__ende {
    margin-inline: -20px;
    padding-inline: 20px;
  }

  .karten {
    margin-top: 72px;
  }

  .karte {
    --reiter-breite: 120px;
  }

  .karte__reiter {
    left: calc(16px + (100% - var(--reiter-breite) - 32px) * var(--i) / 5);
    padding: 0 12px;
    font-size: 0.875rem;
  }

  .karte__kopf {
    padding: 18px 20px 48px;
  }

  .karte__frage {
    font-size: 1.125rem;
  }

  .karte__antwort p {
    padding: 0 20px 52px;
    font-size: 1rem;
  }

  .installieren {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    gap: 48px;
    padding-top: 88px;
  }

  .installieren__satz {
    margin-bottom: 0;
    font-size: 1.25rem;
  }

  .antwortkarte {
    width: 90%;
    align-self: center;
    padding: 32px 24px 96px;
    transform: rotate(1deg);
  }

  .js .antwortkarte.ist-da {
    transform: rotate(1deg);
  }

  .antwortkarte ol {
    font-size: 1rem;
  }

  .balken {
    min-height: 52px;
  }

  .postkarte {
    grid-template-columns: 1fr;
    padding: 56px 20px 24px;
    min-height: 0;
  }

  .postkarte__zacken span:nth-child(n + 7) {
    display: none;
  }

  .postkarte__marke {
    width: 64px;
  }

  .postkarte__adresse ul {
    font-size: 1.0625rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  [data-ui] .panel__ergebnis,
  [data-ui] .pruefung__kriterien li {
    animation: none;
  }
}