:root {
  --salbei:#2f5d3a; --mint:#d2f2c2; --creme:#f9f1e0; --orange:#f14806; --tinte:#2200a8; --schwarz:#111;
  --anzeige:"Helvetica Neue", "Arial Black", "Arial", system-ui, sans-serif;
  --fokus:#ffd92e;
}
* { box-sizing:border-box; }
html { font-size:106.25%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }
body { margin:0; background:var(--creme); color:var(--schwarz); font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; line-height:1.6; }
a { color:inherit; text-underline-offset:.2em; text-decoration-thickness:2px; }
a:focus-visible, summary:focus-visible, input:focus-visible, button:focus-visible { outline:4px solid var(--fokus); outline-offset:3px; border-radius:4px; }
.sprung { position:absolute; left:1rem; top:-4rem; background:var(--fokus); color:#111; padding:.6rem 1rem; z-index:10; font-weight:800; }
.sprung:focus { top:1rem; }
.innen { max-width:76rem; margin:0 auto; padding:0 24px; }
.schmal { max-width:46rem; }
.gross { font-family:var(--anzeige); font-weight:900; text-transform:uppercase; letter-spacing:-.03em; line-height:.86; }

/* Kopf: klein und ruhig, wie bei Peden + Munk */
.kopf { position:absolute; top:0; left:0; right:0; z-index:5; }
.kopf .innen { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.4rem; padding-top:1.1rem; padding-bottom:1.1rem; }
.marke { display:flex; align-items:center; gap:.6rem; text-decoration:none; font-weight:800; font-size:.95rem; letter-spacing:.04em; text-transform:uppercase; }
.marke img { width:34px; height:34px; border-radius:8px; }
nav ul { display:flex; flex-wrap:wrap; gap:.2rem 1.2rem; list-style:none; margin:0; padding:0; }
nav a { text-decoration:none; font-weight:700; font-size:.9rem; text-transform:uppercase; letter-spacing:.06em; padding:.3rem 0; border-bottom:2px solid transparent; }
nav a:hover, nav a[aria-current="page"] { border-bottom-color:currentColor; }
.wechsel { margin-left:auto; font-size:.85rem; font-weight:700; }
.auf-gruen { color:var(--creme); }
.auf-mint { color:var(--tinte); }

/* Einstieg: grün, riesiger Schriftzug, orange Bildkachel */
.einstieg { background:var(--salbei); color:var(--creme); padding:7rem 0 6rem; overflow:hidden; }
.einstieg { --wort:clamp(5.5rem, 21vw, 19rem); }
.wortmarke { font-size:var(--wort); margin:0; }
.wortmarke span { display:block; }
.wortmarke span + span { padding-left:22%; }
/* Spalte 2 beginnt dort, wo «PDF» beginnt (gleicher Versatz von 22 %) */
.einstieg .unterzeile { display:grid; grid-template-columns:22% 1fr; margin-top:1.8rem; align-items:start; }
.einstieg .etikett { margin:0; padding-right:1rem; }
.einstieg .lead { padding-left:calc(var(--wort) * .085); } /* Vorbreite des «P» ausgleichen */
.einstieg .etikett { font-weight:800; font-size:.95rem; line-height:1.35; }
.einstieg .lead { font-size:clamp(1.15rem, 2vw, 1.5rem); line-height:1.45; max-width:40rem; margin:0; }
.kachel { margin:3.5rem 0 0 22%; background:var(--orange); padding:clamp(1rem, 3vw, 2.6rem); padding-bottom:0; }
.kachel img { display:block; width:100%; height:auto; background:#fff; }

/* Abschnitte mit eigener Farbe */
section { padding:5.5rem 0; }
.mint { background:var(--mint); color:var(--tinte); }
.creme { background:var(--creme); color:var(--schwarz); }
.orange { background:var(--orange); color:var(--schwarz); }
.tinte { background:var(--tinte); color:var(--creme); }
.titel { font-size:clamp(2.6rem, 8vw, 6.5rem); margin:0 0 2.5rem; }
.liste { list-style:none; margin:0; padding:0; border-top:3px solid currentColor; }
.liste li { display:grid; grid-template-columns:4rem 1fr 1.4fr; gap:1.5rem; align-items:start; padding:1.4rem 0; border-bottom:3px solid currentColor; }
.liste .nr { font-family:var(--anzeige); font-weight:900; font-size:1.6rem; }
.liste h3 { font-family:var(--anzeige); font-weight:900; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(1.3rem, 2.4vw, 2rem); line-height:1.05; margin:0; display:flex; gap:.7rem; align-items:center; }
.liste .symbol { width:30px; height:30px; flex:none; }
.liste p { margin:0; font-size:1.1rem; }

/* Vorher/Nachher */
.paar { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.paar figure { margin:0; }
.paar figcaption { font-family:var(--anzeige); font-weight:900; text-transform:uppercase; font-size:1.4rem; margin-bottom:.6rem; }
.paar img { display:block; width:100%; height:auto; background:#fff; border:3px solid var(--schwarz); }
.vergleich { position:relative; border:3px solid var(--schwarz); background:#fff; max-width:52rem; margin:0 auto; }
.vergleich img { display:block; width:100%; height:auto; }
.vergleich .oben { position:absolute; inset:0; overflow:hidden; width:50%; border-right:4px solid var(--orange); }
.vergleich .oben img { width:var(--breite, 52rem); max-width:none; }
.regler-zeile { max-width:52rem; margin:1.2rem auto 0; display:flex; gap:1rem; align-items:center; font-weight:700; }
.regler { flex:1; accent-color:var(--orange); height:2rem; }
.mit-js .paar { display:none; }
.ohne-js .vergleich, .ohne-js .regler-zeile { display:none; }

/* Schritte */
.schritte { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:2rem; counter-reset:n; }
.schritte li { counter-increment:n; border-top:3px solid currentColor; padding-top:1rem; }
.schritte li::before { content:counter(n, decimal-leading-zero); display:block; font-family:var(--anzeige); font-weight:900; font-size:clamp(3rem, 7vw, 5.5rem); line-height:1; margin-bottom:.6rem; }
.schritte h3 { font-family:var(--anzeige); font-weight:900; text-transform:uppercase; font-size:1.5rem; margin:0 0 .3rem; }
.schritte p { margin:0; font-size:1.1rem; }

.abschluss p { font-size:1.25rem; max-width:36rem; }
.knopf { display:inline-block; background:var(--creme); color:var(--tinte); padding:1rem 1.6rem; font-weight:900; text-transform:uppercase; letter-spacing:.04em; text-decoration:none; margin-top:1rem; }
.knopf:hover { background:var(--fokus); color:#111; }

/* Unterseiten */
.unterseite-kopf { background:var(--mint); color:var(--tinte); padding:7rem 0 3rem; }
.unterseite-kopf .gross { font-size:clamp(3rem, 11vw, 8rem); margin:0; }
.inhalt { padding:3rem 0 5rem; font-size:1.1rem; }
.inhalt h1 { display:none; }
.inhalt h2 { font-family:var(--anzeige); font-weight:900; text-transform:uppercase; letter-spacing:-.01em; font-size:1.7rem; margin:2.6rem 0 .6rem; }
.inhalt h3 { font-size:1.25rem; }
.einleitung { font-size:1.35rem; line-height:1.45; }
.inhalt a { color:var(--tinte); }
details { border-top:3px solid var(--schwarz); padding:1rem 0; }
details:last-of-type { border-bottom:3px solid var(--schwarz); }
summary { font-weight:800; cursor:pointer; font-size:1.15rem; }

/* Weitere Apps, Über mich, Punkte */
.text-gross { font-size:clamp(1.15rem, 2vw, 1.45rem); line-height:1.5; max-width:44rem; margin:-1rem 0 2.5rem; }
.apps { list-style:none; margin:0; padding:0; border-top:3px solid currentColor; }
.apps > li { display:grid; grid-template-columns:96px 1fr 1.4fr; gap:1.5rem; align-items:start; padding:1.8rem 0; border-bottom:3px solid currentColor; }
.apps img { width:96px; height:96px; border-radius:22%; }
.apps h3 { font-family:var(--anzeige); font-weight:900; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(1.5rem, 2.6vw, 2.2rem); line-height:1.02; margin:0 0 .3rem; }
.apps .aufgabe { font-weight:700; margin:0; }
.apps p { margin:0 0 .8rem; font-size:1.1rem; }
.tags { list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0; }
.tags li { border:2px solid currentColor; padding:.15rem .7rem; font-size:.85rem; font-weight:700; }
.ueber { display:grid; grid-template-columns:minmax(0, 20rem) 1fr; gap:3rem; align-items:start; }
.ueber img { width:100%; height:auto; border:3px solid currentColor; }
.ueber p { font-size:1.15rem; margin:0 0 1rem; }
.punkte { list-style:none; margin:2rem 0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; }
.punkte li { border-top:3px solid currentColor; padding-top:.8rem; font-family:var(--anzeige); font-weight:900; text-transform:uppercase; font-size:1.3rem; }

.fuss { background:var(--schwarz); color:var(--creme); }
.fuss .innen { display:flex; flex-wrap:wrap; gap:1rem 1.6rem; align-items:center; padding-top:2rem; padding-bottom:2rem; }
.fuss .rechts { margin-left:auto; }

@media (max-width:820px) {
  .apps > li { grid-template-columns:72px 1fr; }
  .apps img { width:72px; height:72px; }
  .apps > li > div:last-child { grid-column:1 / -1; }
  .ueber { grid-template-columns:1fr; }
  .ueber img { max-width:16rem; }
  .punkte { grid-template-columns:1fr; }
  .liste li, .paar { grid-template-columns:1fr; }
  .einstieg .unterzeile { grid-template-columns:1fr; gap:1.5rem; }
  .einstieg .lead { margin-left:12%; }
  .liste li { gap:.5rem; }
  .schritte { grid-template-columns:1fr; }
  .kachel { margin-left:0; }
  .wortmarke span + span { padding-left:12%; }
  .wechsel, .fuss .rechts { margin-left:0; }
  .kopf { position:static; }
  .kopf.auf-gruen { background:var(--salbei); }
  .kopf.auf-mint { background:var(--mint); }
  .einstieg { padding-top:2rem; padding-bottom:4rem; }
  .unterseite-kopf { padding-top:2rem; }
}

/* Ruhige, von Capsules inspirierte Bewegungen. Inhalte bleiben ohne Animation lesbar. */
@keyframes sichtnah-auftakt {
  from { opacity:0; transform:translateY(24px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes sichtnah-abschnitt {
  from { transform:translateY(28px); }
  to { transform:translateY(0); }
}
@keyframes sichtnah-bild {
  from { clip-path:inset(5% 3% 0 round 28px); transform:translateY(18px); }
  to { clip-path:inset(0 round 0px); transform:translateY(0); }
}
@keyframes sichtnah-seite {
  from { opacity:0; transform:translateY(12px); }
  to { opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion:no-preference) {
  @view-transition { navigation:auto; }
  ::view-transition-old(root) { animation:160ms ease-out both sichtnah-seite reverse; }
  ::view-transition-new(root) { animation:360ms cubic-bezier(.22,1,.36,1) both sichtnah-seite; }
  .wortmarke span { animation:sichtnah-auftakt 800ms cubic-bezier(.22,1,.36,1) both; }
  .wortmarke span + span { animation-delay:100ms; }
  .einstieg .unterzeile { animation:sichtnah-auftakt 800ms 180ms cubic-bezier(.22,1,.36,1) both; }
  .knopf { transition:background-color 180ms, color 180ms, transform 240ms cubic-bezier(.22,1,.36,1); }
  .knopf:hover { transform:translateY(-3px); }
  nav a { transition:border-color 180ms; }
  @supports (animation-timeline:view()) {
    main section:not(.einstieg) .titel,
    .liste > li, .schritte > li, .apps > li, .punkte > li {
      animation:sichtnah-abschnitt linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 100%;
    }
    .ueber > img, .kachel, .vergleich {
      animation:sichtnah-bild linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 100%;
    }
    /* Tastaturfokus darf durch eine laufende Bewegung nicht erschwert werden. */
    main section:focus-within .titel,
    .liste > li:focus-within, .schritte > li:focus-within,
    .apps > li:focus-within, .vergleich:focus-within {
      animation:none; transform:none; clip-path:none;
    }
  }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; scroll-behavior:auto !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation:none !important; }
}
@media print {
  *, *::before, *::after { animation:none !important; transform:none !important; clip-path:none !important; }
}