/* agenda-2027.ch — ein Stylesheet. Die Agenda fürs Kalenderjahr, für die Schweiz (28.09.2026, infra/landingpages/README.md).
   Aussehen «Raster»: Schweizer Typografie wie auf einem Plakat – weisses Papier, echtes Schwarz, ein Raster aus zwölf
   Spalten, alles linksbündig, die Überschrift eines Abschnitts in der linken Spalte, der Inhalt rechts davon, ein
   schwarzer Balken über jedem Abschnitt. Eine Schrift, Archivo, in drei Stärken. Rot (das der Fahne) hat allein die eine
   Aktion. Innen ist das Buch grau, Farbe hat nur das Foto auf dem Umschlag – die Seite hält sich daran. Das Eine, das man
   sich merken soll: das Band der Kalenderwochen vorne, aus JAHR gerechnet (../../quelle/Seiten.java, {{kw-band}}). */
/* Schriften von dieser Seite, nicht von Google: Die Seite verspricht «keine Cookies», und jeder Abruf bei Google Fonts
   schickt die IP-Adresse dorthin. Archivo (Omnibus-Type) unter der SIL Open Font License (assets/fonts/OFL-Archivo.txt),
   von Fontsource 5.3.0, Latein. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/archivo-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/archivo-600-latin.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/archivo-800-latin.woff2") format("woff2"); }

:root {
  --papier: #ffffff;
  --schwarz: #000000;
  --grau: #5c5c5c;                            /* Nebentext, 6.6 : 1 auf Weiss */
  --grau-hell: #9a9a9a;                       /* die Woche aus dem Vorjahr im Band */
  --linie: #d0d0d0;                           /* der Rand um Seiten aus dem Buch */
  --flaeche: #f2f2f2;
  --rot: #da291c;                             /* das Rot der Fahne – nur für die eine Aktion */
  --rot-dunkel: #b01f13;
  --schrift: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px; --s16: 64px; --s24: 96px;
  --rand: clamp(16px, 4.5vw, 56px);
  --breite: 1180px;
  --spalt: clamp(16px, 2vw, 24px);            /* Abstand der zwölf Spalten */
  --mass: 64ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--schwarz); font-family: var(--schrift); font-size: 18px; line-height: 1.5; text-wrap: pretty; overflow-x: clip; font-variant-numeric: lining-nums; }
h1, h2, h3 { margin: 0 0 var(--s4); text-wrap: balance; }
h2 { font-weight: 800; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.1; letter-spacing: -0.015em; }
h3 { font-weight: 600; font-size: 19px; line-height: 1.25; margin-bottom: var(--s1); }
p, ul, ol { margin: 0 0 var(--s4); max-width: var(--mass); }
ul, ol { padding-left: 1.2em; }
a { color: var(--schwarz); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { 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(--s3); color: var(--grau); max-width: var(--mass); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--schwarz); outline-offset: 3px; }
::selection { background: #d9d9d9; }
.blatt { background: #fff; outline: 1px solid var(--linie); outline-offset: -1px; }

/* — Knöpfe: der eine rote, sonst Links — */
.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: 14px 22px; min-height: 48px; border: 0; border-radius: 0; }
.btn-primary { background: var(--rot); color: #fff; }
.btn-primary:hover { background: var(--rot-dunkel); color: #fff; }
.btn-primary:focus-visible { outline-color: var(--rot); }
.nav .btn { font-size: 15px; padding: 10px 16px; min-height: 44px; }

/* — Kopf — */
header { position: relative; z-index: 5; }
.nav { display: flex; align-items: center; gap: var(--s6); padding: var(--s4) var(--rand); position: relative; max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; }
.nav-brand { flex: 1 1 0; min-width: 0; color: var(--schwarz); text-decoration: none; line-height: 1.1; }
.nav-brand b { display: block; font-weight: 800; font-size: clamp(19px, 4.6vw, 22px); letter-spacing: -0.02em; }
.nav-brand span { display: block; font-size: 13px; color: var(--grau); }
.nav-links { display: flex; align-items: center; gap: var(--s6); }
.nav-links a { color: var(--schwarz); text-decoration: none; font-size: 16px; padding: 10px 0; }
.nav-links a:hover { 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; font-weight: 600; padding: 10px 12px; border: 1px solid var(--schwarz); 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(--flaeche); }
.sprachen ul { position: absolute; right: 0; top: calc(100% + 4px); z-index: 10; list-style: none; margin: 0; padding: 4px; min-width: 150px; background: #fff; border: 1px solid var(--schwarz); }
.sprachen li a { display: block; padding: 9px 12px; color: inherit; text-decoration: none; font-size: 15px; }
.sprachen li a:hover { background: var(--flaeche); }
.sprachen li a[aria-current] { font-weight: 600; }
.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--schwarz); background: transparent; color: inherit; cursor: pointer; align-items: center; justify-content: center; }
.nav-toggle:hover { background: var(--flaeche); }
.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: 860px) {
  .nav { flex-wrap: wrap; gap: var(--s2); }
  .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(--s2) 0 var(--s3); }
  .nav.open .nav-links { display: flex; }
  .nav-links a { padding: 14px 0; font-size: 19px; border-bottom: 1px solid var(--linie); }
  .nav-links a:last-child { border-bottom: 0; }
  .nav-links .btn { display: inline-flex; margin-top: var(--s3); justify-content: center; }
}
@media (min-width: 861px) { .nav-links .btn { display: none; } }

/* — Seite — */
main { padding: 0 var(--rand); max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; }
.lede { font-size: clamp(19px, 1.8vw, 22px); line-height: 1.45; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s6); margin-top: var(--s6); }
.note { color: var(--grau); font-size: 16px; margin-top: var(--s6); }

/* — Vorne: der Titel über sieben Spalten, rechts Ninas Umschlag, darunter über die ganze Breite die Wochen — */
.vorne { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: var(--s12); padding: clamp(24px, 5vw, 64px) 0 clamp(40px, 6vw, 72px); }
.vorne-text { grid-column: 1 / span 7; }
.vorne-umschlag { grid-column: 9 / span 4; align-self: start; }
.wochen { grid-column: 1 / -1; }
.vorne h1 { margin: 0 0 var(--s8); }
.vorne h1 .titel { display: block; font-weight: 800; font-size: clamp(56px, 10.5vw, 136px); line-height: 0.9; letter-spacing: -0.045em; margin-left: -0.05em; }
.vorne h1 .unter { display: block; font-weight: 600; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -0.015em; margin-top: var(--s4); }
.vorne .lede { max-width: 40ch; }
.vorne .cta a:not(.btn) { color: var(--schwarz); }
@media (max-width: 799px) {
  .vorne { row-gap: var(--s8); }
  .vorne-text, .vorne-umschlag { grid-column: 1 / -1; }
  .vorne-umschlag { max-width: 62%; }
}

/* Das Band der Kalenderwochen: je Woche ein Strich und ihre Nummer, über der Woche mit dem 1. eines Monats sein Name
   und ein langer Strich. Vier Vierteljahre nebeneinander, je so breit, wie sie Wochen haben (--n); schmal eines je Zeile.
   Die Woche aus dem Vorjahr ist grau. */
.kw-band { display: flex; gap: var(--s3); border-top: 3px solid var(--schwarz); padding-top: var(--s2); }
.kw-band ol { flex: var(--n) 1 0; min-width: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; max-width: none; }
.kw-band li { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 64px; font-size: 13px; line-height: 1; font-variant-numeric: tabular-nums; }
.kw-band li::before { content: ""; display: block; width: 1px; height: 12px; background: var(--schwarz); margin-bottom: 6px; }
.kw-band li.monat::before { width: 2px; height: 30px; }
.kw-band li span { position: absolute; top: 0; left: 0; white-space: nowrap; font-weight: 600; font-size: 12px; }
.kw-band li b { font-weight: 400; }
.kw-band li.vorjahr { color: var(--grau-hell); }
.kw-band li.vorjahr::before { background: var(--grau-hell); }
.kw-band li.vorjahr span { color: var(--schwarz); }
.wochen figcaption { max-width: 70ch; }
@media (max-width: 1000px) {
  .kw-band { flex-direction: column; gap: var(--s4); }
  .kw-band ol { grid-template-columns: repeat(14, minmax(0, 1fr)); }
  .kw-band li { font-size: 14px; }
}

/* Das Geschenk für neue Konten, die über diese Seite kommen (geschenk=promo) */
.gift { border-left: 3px solid var(--rot); padding: var(--s1) 0 var(--s1) var(--s4); max-width: 46ch; margin: var(--s8) 0 0; font-size: 17px; }
html.ohne-geschenk [data-geschenk] { display: none !important; }

/* — Ein Abschnitt: schwarzer Balken, links die Überschrift über drei Spalten, rechts der Inhalt über neun — */
.abschnitt { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); border-top: 3px solid var(--schwarz); padding: var(--s4) 0 clamp(48px, 7vw, 88px); }
.abschnitt > h2, .abschnitt > .kopf { grid-column: 1 / span 3; }
.abschnitt > .inhalt { grid-column: 4 / -1; min-width: 0; }
.abschnitt > .inhalt > :last-child { margin-bottom: 0; }
@media (max-width: 799px) {
  .abschnitt > h2, .abschnitt > .kopf, .abschnitt > .inhalt { grid-column: 1 / -1; }
  .abschnitt > h2 { margin-bottom: var(--s6); }
}
.breit { margin-top: var(--s8); }
.paar { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--spalt); align-items: start; margin-top: var(--s8); }
@media (max-width: 599px) { .paar { grid-template-columns: minmax(0, 1fr); } .paar > figure + figure { max-width: 62%; } }

/* Die Sprachen: der Kopf derselben Wochenseite viermal, zwei nebeneinander */
.sprachen-koepfe { list-style: none; padding: 0; margin: var(--s8) 0 0; max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8) var(--spalt); }
.sprachen-koepfe span { display: block; margin-top: var(--s2); font-weight: 600; font-size: 16px; }
@media (max-width: 599px) { .sprachen-koepfe { grid-template-columns: minmax(0, 1fr); gap: var(--s6); } }

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

/* Die Vorlagen: zwei Spalten, je eine Linie darüber */
.vorlagen { list-style: none; padding: 0; margin: var(--s8) 0 0; max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8) var(--spalt); }
.vorlagen li { border-top: 1px solid var(--schwarz); padding-top: var(--s3); display: flex; flex-direction: column; }
.vorlagen p { margin: 0 0 var(--s3); font-size: 17px; color: var(--grau); }
.vorlagen .wege { margin: auto 0 0; display: flex; gap: var(--s6); font-size: 16px; font-weight: 600; }
.vorlagen .wege a { color: var(--schwarz); }
@media (max-width: 599px) { .vorlagen { grid-template-columns: minmax(0, 1fr); gap: var(--s6); } }

/* Drei Schritte: eine Folge, darum mit Nummern – gross, im Raster */
.schritte { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s8) var(--spalt); counter-reset: schritt; }
.schritte li { counter-increment: schritt; }
.schritte li::before { content: counter(schritt); display: block; font-weight: 800; font-size: 56px; line-height: 1; letter-spacing: -0.04em; margin-bottom: var(--s3); }
.schritte p { margin: 0; font-size: 17px; color: var(--grau); }
.schritte p a { color: var(--schwarz); }
@media (max-width: 799px) { .schritte { grid-template-columns: minmax(0, 1fr); gap: var(--s6); } .schritte li::before { font-size: 44px; } }

/* Kosten */
.gross { font-size: clamp(21px, 2.2vw, 26px); line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; max-width: 36ch; }
.punkte { list-style: none; padding: 0; margin: var(--s8) 0 0; max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6) var(--spalt); }
.punkte li { border-top: 1px solid var(--schwarz); padding-top: var(--s3); font-size: 17px; }
@media (max-width: 799px) { .punkte { grid-template-columns: minmax(0, 1fr); gap: var(--s4); } }

/* Zum Schluss: der Wochentag des Neujahrs, ein Knopf */
.schluss { border-top: 3px solid var(--schwarz); padding: var(--s8) 0 var(--s24); }
.schluss h2 { font-size: clamp(34px, 5.4vw, 68px); line-height: 0.98; letter-spacing: -0.035em; max-width: 16ch; margin-bottom: var(--s6); }

/* — Unterseiten: Preise, Drucken, Kontakt, Impressum — */
.seitenkopf { padding: clamp(24px, 5vw, 64px) 0 clamp(40px, 6vw, 64px); }
.seitenkopf h1 { font-weight: 800; font-size: clamp(44px, 7vw, 88px); line-height: 0.95; letter-spacing: -0.04em; margin: 0 0 var(--s6); max-width: 14ch; }
.seitenkopf .gift { margin-top: var(--s6); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spalt); margin: 0; }
.plan { border-top: 1px solid var(--schwarz); padding-top: var(--s3); }
.plan h3 { margin-bottom: var(--s2); }
.plan .betrag { font-weight: 800; font-size: clamp(34px, 3.6vw, 44px); line-height: 1; letter-spacing: -0.03em; margin-bottom: var(--s3); font-variant-numeric: tabular-nums; }
.plan p { margin: 0; font-size: 16px; color: var(--grau); }
@media (max-width: 699px) { .plans { grid-template-columns: minmax(0, 1fr); gap: var(--s6); } }
.table { border-collapse: collapse; width: 100%; max-width: 760px; margin: var(--s6) 0 0; font-variant-numeric: tabular-nums; }
.table th, .table td { text-align: left; padding: var(--s3) var(--s4) var(--s3) 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.table thead th { font-weight: 600; font-size: 15px; border-bottom: 1px solid var(--schwarz); }
.table .zahl { text-align: right; white-space: nowrap; }
@media (max-width: 560px) { .table .reicht { display: none; } .table th, .table td { padding-right: var(--s2); } }
.einstellungen { list-style: none; padding: 0; margin: 0; max-width: none; }
.einstellungen li { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--s2) var(--spalt); padding: var(--s4) 0; border-bottom: 1px solid var(--linie); }
.einstellungen li:first-child { border-top: 1px solid var(--schwarz); }
.einstellungen span { max-width: var(--mass); }
@media (max-width: 560px) { .einstellungen li { grid-template-columns: minmax(0, 1fr); } }
.inhalt h3 { margin-top: var(--s6); }
.inhalt h3:first-child { margin-top: 0; }
.statistik-schalter button { font: inherit; font-size: 16px; margin-left: var(--s2); padding: 6px 12px; border: 1px solid var(--schwarz); background: var(--papier); cursor: pointer; }

/* — Fuss — */
footer { border-top: 3px solid var(--schwarz); }
footer .inner { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: var(--s6) var(--rand) var(--s12); display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); align-items: baseline; font-size: 15px; color: var(--grau); }
footer .brand { flex: 1 1 18rem; }
footer .brand a { color: var(--schwarz); font-weight: 600; }
footer a { color: var(--grau); }
footer .fotos { flex-basis: 100%; margin: var(--s2) 0 0; font-size: 14px; }