/* planner-2027.com — ein Stylesheet. Die zweite Landingpage von Design Your Planner (28.09.2026, infra/landingpages/README.md):
   die Agenda fürs Kalenderjahr. Das Aussehen folgt der Regel des Buchs: innen nur Grau, Farbe hat allein das Foto auf dem
   Umschlag. Darum Papier und Graphit in neutralen Grautönen (gleiche Kanäle, wie im Buch), Farbe nur auf den Umschlägen
   und für die eine Aktion – das Leder der Anwendung, zu der jeder Knopf führt. Source Sans 3 wie im Buch, die leichte 300
   für die grossen Titel. Vorne liegt das Jahr auf einem Blatt, und die Wahl des ersten Wochentags tauscht es (CSS mit
   :has, ohne Skript). Die Bilder macht ../../bilder/Bilder.java aus der Anwendung und Toms Fotos. */
/* Schriften von dieser Seite, nicht von Google: Die Seite verspricht «keine Cookies», und jeder Abruf bei Google Fonts
   schickt die IP-Adresse dorthin. Source Sans 3 unter der SIL Open Font License (assets/fonts/OFL-SourceSans3.txt), auf
   Latein verkleinert. */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/sourcesans3-300-latin.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/sourcesans3-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/sourcesans3-600-latin.woff2") format("woff2"); }

:root {
  --grund: #e9e9e9;                           /* der Tisch, auf dem das Papier liegt – grau wie das Innere des Buchs */
  --papier: #ffffff;
  --text: #222222;                            /* Graphit */
  --text-2: #595959;
  --linie: #bdbdbd;
  --linie-hell: #d4d4d4;
  --leder: #7a4b23;                           /* die eine Aktion, wie in der Anwendung */
  --leder-dunkel: #5f3919;
  --leder-hell: #f3ece5;
  --marke: #2f5a3e;                           /* das Grün von Design Your Planner, nur im Namen */
  --sans: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --radius: 4px;
  --schatten-papier: 0 1px 2px rgba(0, 0, 0, .14), 0 10px 28px rgba(0, 0, 0, .12);
  --edge: clamp(16px, 5vw, 64px);
  --breite: 1120px;
  --measure: 62ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund); color: var(--text); font-family: var(--sans); font-size: 18px; line-height: 1.55; text-wrap: pretty; overflow-x: clip; font-variant-numeric: lining-nums; }
h1, h2, h3 { line-height: 1.1; margin: 0 0 var(--space-4); text-wrap: balance; }
h1 { font-weight: 300; font-size: clamp(42px, 6vw, 72px); letter-spacing: -0.025em; line-height: 1.02; }
h2 { font-weight: 300; font-size: clamp(30px, 3.6vw, 42px); letter-spacing: -0.015em; max-width: 22ch; }
h3 { font-weight: 600; font-size: 20px; line-height: 1.25; margin-bottom: var(--space-2); }
p, ul, ol { margin: 0 0 var(--space-4); max-width: var(--measure); }
ul, ol { padding-left: 1.2em; }
a { color: var(--leder-dunkel); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--leder); text-decoration-thickness: 2px; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
figcaption { font-size: 15px; line-height: 1.45; margin-top: var(--space-3); color: var(--text-2); max-width: var(--measure); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--leder); outline-offset: 3px; }
::selection { background: #d9d9d9; }

/* — Knöpfe — */
.btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; font: inherit; font-weight: 600; font-size: 17px; line-height: 1.2; padding: 13px 22px; min-height: 48px; border-radius: var(--radius); border: 1px solid transparent; }
.btn-primary { background: var(--leder); color: #fff; }
.btn-primary:hover { background: var(--leder-dunkel); color: #fff; text-decoration: none; }
.nav .btn { font-size: 15px; padding: 10px 16px; min-height: 44px; }

/* — Kopf: auf dem Tisch, ohne Band; der Name in Graphit, «Design Your Planner» klein und grün darunter — */
header { position: relative; z-index: 5; }
.nav { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-4) var(--edge); position: relative; max-width: calc(var(--breite) + 2 * var(--edge)); margin: 0 auto; }
.nav-brand { flex: 1 1 0; min-width: 0; color: var(--text); text-decoration: none; line-height: 1.15; }
.nav-brand b { display: block; font-weight: 600; font-size: clamp(19px, 4.6vw, 22px); letter-spacing: -0.01em; }
.nav-brand span { display: block; font-size: 13px; color: var(--marke); }
.nav-brand:hover { color: var(--text); text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: var(--space-6); }
.nav-links a { color: var(--text-2); text-decoration: none; font-size: 16px; padding: 10px 0; }
.nav-links a:hover, .nav-links a[aria-current='page'] { color: var(--text); text-decoration: underline; }
.nav-links a.btn, .nav-links a.btn:hover { color: #fff; text-decoration: none; }
/* Die Sprache: ein Aufklappmenü, ein <details> – geht auch ohne Skript; das Skript unten in jeder Seite schliesst es
   bei einem Klick daneben */
.sprachen { position: relative; }
.sprachen summary { list-style: none; cursor: pointer; font-size: 14px; letter-spacing: 0.04em; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--linie); min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.sprachen summary::-webkit-details-marker { display: none; }
.sprachen summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.sprachen[open] summary::after { transform: translateY(2px) rotate(225deg); }
.sprachen summary:hover { background: var(--papier); }
.sprachen ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; list-style: none; margin: 0; padding: 4px; min-width: 150px; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.sprachen li a { display: block; padding: 9px 12px; border-radius: 2px; color: inherit; text-decoration: none; font-size: 15px; }
.sprachen li a:hover { background: var(--grund); }
.sprachen li a[aria-current] { font-weight: 600; }
.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--linie); background: transparent; border-radius: var(--radius); color: inherit; cursor: pointer; align-items: center; justify-content: center; }
.nav-toggle:hover { background: var(--papier); }
.nav-toggle svg { display: block; }
.nav-toggle .x { display: none; }
.nav.open .nav-toggle .x { display: block; }
.nav.open .nav-toggle .bars { display: none; }
@media (max-width: 820px) {
  .nav { flex-wrap: wrap; gap: var(--space-2); }
  .nav-toggle { display: inline-flex; order: 3; }
  .sprachen { order: 2; }
  .nav > .btn { display: none; }
  .nav-links { display: none; order: 4; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-2) 0 var(--space-3); }
  .nav.open .nav-links { display: flex; }
  .nav-links a { padding: 14px 0; font-size: 19px; border-bottom: 1px solid var(--linie-hell); }
  .nav-links a:last-child { border-bottom: 0; }
  .nav-links .btn { display: inline-flex; margin-top: var(--space-3); justify-content: center; }
}
@media (min-width: 821px) { .nav-links .btn { display: none; } }

/* — Seite — */
main { padding: 0 var(--edge); max-width: calc(var(--breite) + 2 * var(--edge)); margin: 0 auto; }
.section { padding: clamp(44px, 7vw, 80px) 0; border-top: 1px solid var(--linie-hell); }
.section:first-child { border-top: 0; }
.lede { font-size: clamp(19px, 1.7vw, 21px); line-height: 1.5; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); margin-top: var(--space-6); }
.note { color: var(--text-2); font-size: 16px; margin-top: var(--space-6); }
.papier { background: #fff; box-shadow: var(--schatten-papier); }

/* — Vorne: links Titel und Knopf, rechts das Jahr auf seinem Blatt — */
.vorne { display: grid; gap: var(--space-8) var(--space-16); padding: clamp(24px, 5vw, 56px) 0 clamp(48px, 7vw, 88px); align-items: start; }
.vorne h1 { max-width: 14ch; margin-bottom: var(--space-6); }
.vorne .lede { max-width: 40ch; }
.vorne .cta a:not(.btn) { color: var(--text); }
@media (min-width: 900px) {
  .vorne { grid-template-columns: minmax(0, 1fr) minmax(0, min(470px, 42%)); }   /* bei 900 px bekäme der Titel sonst nur 280 px */
  .vorne-text { padding-top: clamp(16px, 4vw, 64px); }
}

/* Das Jahr: drei Blätter aus der Anwendung übereinander, sichtbar ist das des gewählten ersten Wochentags. Ohne :has
   bleibt es beim Montag. Die verborgenen sind «visibility: hidden», damit ein Screenreader nur das sichtbare liest. */
.jahr { margin: 0; }
.wochenbeginn { border: 0; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.wochenbeginn legend { float: left; padding: 0; margin-right: var(--space-2); font-size: 16px; color: var(--text-2); }
.wochenbeginn .wahl { display: inline-flex; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--papier); padding: 3px; gap: 3px; }
.wochenbeginn label { position: relative; cursor: pointer; font-size: 16px; line-height: 1.2; padding: 8px 14px; border-radius: 2px; min-height: 38px; display: inline-flex; align-items: center; }
.wochenbeginn input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wochenbeginn label:hover { background: var(--grund); }
.wochenbeginn label:has(input:checked) { background: var(--text); color: #fff; }
.wochenbeginn label:has(input:focus-visible) { outline: 2px solid var(--leder); outline-offset: 2px; }
.blatt { position: relative; }
.blatt img { width: 100%; opacity: 0; visibility: hidden; }
.blatt img + img { position: absolute; inset: 0; }
.blatt .wb-mo,
.jahr:has(#wb-so:checked) .blatt .wb-so,
.jahr:has(#wb-sa:checked) .blatt .wb-sa { opacity: 1; visibility: visible; }
.jahr:has(#wb-so:checked) .blatt .wb-mo,
.jahr:has(#wb-sa:checked) .blatt .wb-mo { opacity: 0; visibility: hidden; }
/* Überblenden nur, wenn jemand wählt – nicht beim Vorwählen nach dem Land (data-bewegt setzt wochenbeginn.js) */
@media (prefers-reduced-motion: no-preference) {
  .jahr[data-bewegt] .blatt img { transition: opacity .22s ease, visibility .22s; }
}

/* Das Geschenk für neue Konten, die über diese Seite kommen (geschenk=promo, die ersten 50) */
.gift { background: var(--leder-hell); border-left: 3px solid var(--leder); padding: var(--space-3) var(--space-4); max-width: 44ch; margin: var(--space-8) 0 0; font-size: 17px; }
.gift strong { color: var(--leder-dunkel); }
html.ohne-geschenk [data-geschenk] { display: none !important; }

/* — Die Umschläge: die einzige Farbe der Seite — */
.umschlaege { list-style: none; padding: 0; margin: var(--space-8) 0 0; max-width: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.umschlaege img { width: 100%; }
.umschlaege .wer { display: block; margin-top: var(--space-3); font-size: 16px; line-height: 1.35; color: var(--text-2); }
.umschlaege .wer b { display: block; color: var(--text); font-weight: 600; }
@media (max-width: 700px) { .umschlaege { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); } }

/* — Seiten aus dem Buch: eine Doppelseite breit, eine Einzelseite schmal daneben — */
.seiten { display: grid; gap: var(--space-8); margin-top: var(--space-8); align-items: start; }
@media (min-width: 900px) { .seiten { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); } }
@media (max-width: 899px) { .seiten > figure + figure { max-width: 300px; } }

/* — Nach Mass: sechs kurze Punkte in zwei oder drei Spalten — */
.mass { list-style: none; padding: 0; margin: var(--space-8) 0 0; max-width: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-8) var(--space-12); }
.mass p { margin: 0; font-size: 17px; color: var(--text-2); }

/* — Die Vorlagen: Zeilen wie im Buch, mit einer Linie darunter — */
.vorlagen { list-style: none; padding: 0; margin: var(--space-8) 0 0; max-width: 880px; border-top: 1px solid var(--linie); }
.vorlagen li { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: var(--space-2) var(--space-6); align-items: baseline; padding: var(--space-4) 0; border-bottom: 1px solid var(--linie); }
.vorlagen h3 { margin: 0; font-size: 19px; }
.vorlagen p { margin: 0; font-size: 17px; color: var(--text-2); }
.vorlagen .wege { display: flex; gap: var(--space-4); white-space: nowrap; font-size: 16px; }
@media (max-width: 700px) {
  .vorlagen li { grid-template-columns: minmax(0, 1fr); }
  .vorlagen .wege { margin-top: var(--space-1); }
}

/* — Drei Schritte: eine Folge, darum mit Nummern — */
.steps { list-style: none; padding: 0; margin: var(--space-8) 0 0; max-width: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-8); counter-reset: schritt; }
.steps li { counter-increment: schritt; }
.steps li::before { content: counter(schritt); display: block; font-weight: 300; font-size: 44px; line-height: 1; margin-bottom: var(--space-3); color: var(--text-2); }
.steps p { margin: 0; font-size: 17px; color: var(--text-2); }

/* — Kosten — */
.kosten { display: grid; gap: var(--space-8) var(--space-16); }
@media (min-width: 900px) { .kosten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.big { font-size: clamp(21px, 2.2vw, 25px); line-height: 1.4; }
.umgerechnet { display: block; font-size: 15px; font-weight: 400; color: var(--text-2); }
.big .umgerechnet { display: inline; font-size: 17px; margin-left: 0.4em; }
.umgerechnet:empty { display: none; }
.trust { list-style: none; padding: 0; margin: 0; }
.trust li { padding: var(--space-3) 0; border-bottom: 1px solid var(--linie-hell); font-size: 17px; }
.trust li:first-child { padding-top: 0; }

/* — Zum Schluss: der Wochentag des Neujahrs, ein Knopf — */
.schluss h2 { max-width: none; }

/* — Unterseiten: Preise, Drucken, Kontakt, Impressum — */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.plan { background: var(--papier); padding: var(--space-6); border-radius: var(--radius); }
.plan h3 { margin-bottom: var(--space-3); }
.plan .betrag { font-weight: 300; font-size: 34px; line-height: 1.1; margin-bottom: var(--space-3); }
.plan p { margin: 0; font-size: 16px; color: var(--text-2); }
.table { border-collapse: collapse; width: 100%; max-width: 720px; margin-top: var(--space-6); background: var(--papier); font-variant-numeric: tabular-nums; }
.table th, .table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--linie-hell); vertical-align: top; }
.table th { font-weight: 600; font-size: 15px; color: var(--text-2); }
.table .zahl { text-align: right; white-space: nowrap; }
.table .zahl .umgerechnet { font-size: 14px; }
@media (max-width: 560px) { .table .reicht { display: none; } .table th, .table td { padding: var(--space-3) var(--space-2); } }
.einstellungen { list-style: none; padding: 0; margin: var(--space-6) 0 0; }
.einstellungen li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-2) var(--space-6); padding: var(--space-4) 0; border-bottom: 1px solid var(--linie-hell); }
.einstellungen li:first-child { border-top: 1px solid var(--linie-hell); }
@media (max-width: 560px) { .einstellungen li { grid-template-columns: minmax(0, 1fr); } }
.kurz h2 { font-size: clamp(24px, 2.6vw, 30px); margin-top: var(--space-8); }
.kurz h2:first-child { margin-top: 0; }
.statistik-schalter button { font: inherit; font-size: 16px; margin-left: var(--space-2); padding: 6px 12px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--papier); cursor: pointer; }

/* — Fuss — */
footer { border-top: 1px solid var(--linie-hell); margin-top: var(--space-8); }
footer .inner { max-width: calc(var(--breite) + 2 * var(--edge)); margin: 0 auto; padding: var(--space-8) var(--edge) var(--space-12); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: baseline; font-size: 15px; color: var(--text-2); }
footer .brand { flex: 1 1 18rem; }
footer .brand a { color: var(--marke); font-weight: 600; text-decoration: none; }
footer a { color: var(--text-2); }
footer .fotos { flex-basis: 100%; margin: var(--space-2) 0 0; font-size: 14px; }