/* design-your-weekly-planner.com — ein Stylesheet. Die vierte Landingpage von Design Your Planner (30.09.2026,
   infra/landingpages/README.md): die Woche. Das Bild der Seite ist die Doppelseite selbst, aus der Anwendung – keine
   Fotos. Wie im Buch nur neutrale Grautöne (gleiche Kanäle); die einzige Farbe ist das Grün von Design Your Planner, für
   die eine Aktion und den Namen. Vorne liegt die Woche auf einem grauen Tisch über die ganze Breite, und zwei Wahlen
   tauschen sie (CSS mit :has, ohne Skript). Source Sans 3 wie im Buch, die leichte 300 für die grossen Titel. Gebaut nach
   ../../planner-2027.com/page/assets/site.css; die Bilder macht ../../bilder/Bilder.java. */
/* 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: #f7f7f7;                           /* fast weiss, wie Papier */
  --tisch: #e6e6e6;                           /* der Tisch, auf dem die Woche liegt */
  --papier: #ffffff;
  --text: #222222;                            /* Graphit */
  --text-2: #595959;
  --linie: #bdbdbd;
  --linie-hell: #dcdcdc;
  --gruen: #2f5a3e;                           /* das Grün von Design Your Planner: die eine Aktion und der Name */
  --gruen-dunkel: #214330;
  --gruen-hell: #e8efea;
  --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(--gruen); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--gruen-dunkel); text-decoration-thickness: 2px; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
figure > img { width: 100%; }
figcaption { font-size: 15px; line-height: 1.45; margin-top: var(--space-3); color: var(--text-2); max-width: var(--measure); }
figcaption b { color: var(--text); font-weight: 600; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--gruen); outline-offset: 3px; }
::selection { background: #d9d9d9; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* — 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(--gruen); color: #fff; }
.btn-primary:hover { background: var(--gruen-dunkel); color: #fff; text-decoration: none; }
.nav .btn { font-size: 15px; padding: 10px 16px; min-height: 44px; }

/* — Kopf: 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(--gruen); }
.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: 900px) {
  .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: 901px) { .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: der Titel links, Text und Knopf rechts; darunter die Woche — */
.vorne { display: grid; gap: var(--space-6) var(--space-16); padding: clamp(24px, 5vw, 56px) 0 clamp(32px, 5vw, 56px); align-items: start; }
.vorne h1 { max-width: 12ch; margin: 0; }
.vorne .lede { max-width: 46ch; margin: 0; }
.vorne .cta a:not(.btn) { color: var(--text); }
@media (min-width: 900px) {
  .vorne { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .vorne-text { padding-top: 10px; }
}

/* Die Woche auf dem Tisch: ein grauer Streifen über die ganze Fensterbreite (das ::before), darauf die zwei Wahlen und
   vier Doppelseiten aus der Anwendung übereinander. Sichtbar ist die der gewählten Kombination; ohne :has bleibt es bei
   Montag und Linien. Die verborgenen sind «visibility: hidden», damit ein Screenreader nur die sichtbare liest. */
.woche { position: relative; padding: clamp(28px, 4vw, 48px) 0 clamp(40px, 5vw, 64px); }
.woche::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; background: var(--tisch); z-index: -1; }
.woche figcaption { margin-top: var(--space-4); }
.wahlen { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); margin-bottom: var(--space-6); }
.wahl { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-width: 0; }
.wahl legend { float: left; padding: 0; margin-right: var(--space-1); font-size: 16px; color: var(--text-2); }
.wahl .knoepfe { display: inline-flex; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--papier); padding: 3px; gap: 3px; }
.wahl 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; }
.wahl input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wahl label:hover { background: var(--grund); }
.wahl label:has(input:checked) { background: var(--text); color: #fff; }
.wahl label:has(input:focus-visible) { outline: 2px solid var(--gruen); outline-offset: 2px; }
.blatt { position: relative; }
.blatt img { width: 100%; opacity: 0; visibility: hidden; }
.blatt img + img { position: absolute; inset: 0; }
.blatt .mo-leer,
.woche:has(#wb-so:checked):has(#in-leer:checked) .so-leer,
.woche:has(#wb-mo:checked):has(#in-tag:checked) .mo-tag,
.woche:has(#wb-so:checked):has(#in-tag:checked) .so-tag { opacity: 1; visibility: visible; }
.woche:has(#wb-so:checked) .blatt .mo-leer,
.woche:has(#in-tag:checked) .blatt .mo-leer { opacity: 0; visibility: hidden; }
/* Überblenden nur, wenn jemand wählt – nicht beim Vorwählen nach dem Land (data-bewegt setzt woche.js) */
@media (prefers-reduced-motion: no-preference) {
  .woche[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(--gruen-hell); border-left: 3px solid var(--gruen); padding: var(--space-3) var(--space-4); max-width: 46ch; margin: var(--space-8) 0 0; font-size: 17px; }
.gift strong { color: var(--gruen-dunkel); }
html.ohne-geschenk [data-geschenk] { display: none !important; }

/* — Die Teile einer Woche: drei kurze Punkte nebeneinander, mit einer Linie darüber wie ein Tageskopf im Buch — */
.teile { list-style: none; padding: 0; margin: var(--space-8) 0 var(--space-6); max-width: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6) var(--space-12); }
.teile li { border-top: 2px solid var(--text); padding-top: var(--space-3); }
.teile p { margin: 0; font-size: 17px; color: var(--text-2); }
.breit { margin-top: var(--space-8); }

/* — Text und eine Doppelseite nebeneinander — */
.zwei { display: grid; gap: var(--space-8) var(--space-12); align-items: start; }
@media (min-width: 900px) { .zwei { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }

/* — Einzelne Tage untereinander, zwei Wochen nebeneinander — */
.tage { display: grid; gap: var(--space-8); margin-top: var(--space-8); max-width: 760px; }
.paar { display: grid; gap: var(--space-8); margin-top: var(--space-8); }
@media (min-width: 900px) { .paar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* — 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); }

/* — 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: ein Satz, 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); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.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(--gruen); font-weight: 600; text-decoration: none; }
footer a { color: var(--text-2); }
footer .fotos { flex-basis: 100%; max-width: none; margin: var(--space-2) 0 0; font-size: 14px; }