/*
 * GOSU 2026 — Interim-Seiten.
 *
 * Übernommen aus akurai-child/assets/css/interim-homepage.css ab Zeile 234.
 * Die @font-face-Blöcke sind hier entfernt: sie stehen jetzt in tokens.css und
 * würden sonst doppelt deklariert.
 *
 * Der eigene :root-Block bleibt vorerst stehen. Er benutzt die unpräfixierten
 * Namen (--paper, --ink, …), tokens.css die präfixierten (--gosu-paper, …).
 * Beide Sätze tragen dieselben Werte; die Zusammenführung passiert, wenn die
 * Interim-Seiten durch reguläre Templates ersetzt werden.
 */

/* ---------- Prototype styles ---------- */
:root{--paper:#EFE9DF;--card:#FBF8F2;--ink:#16130E;--muted:#6F6659;--rule:#D6CBB8;--rule-strong:#B9AB92;--red:#C4362B;--green:#2E6B4E;
--display:"Anton",Impact,sans-serif;--ui:"Archivo",system-ui,sans-serif;--body:"Newsreader",Georgia,serif;--mono:"JetBrains Mono",ui-monospace,monospace;--wrap:1000px}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.62;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.kicker{font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.kicker b{color:var(--red)}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;line-height:.95;text-transform:uppercase}
h1{font-size:clamp(38px,5.6vw,66px)}
h2{font-size:clamp(23px,3vw,33px)}
h3{font-size:18px}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--ui);font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:13px 20px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;transition:background .16s,color .16s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn--red{background:var(--red);border-color:var(--red);color:#fff}
.btn--red:hover{background:#A82A20;border-color:#A82A20}
.btn--sm{padding:8px 13px;font-size:11px}

.head{border-bottom:2px solid var(--ink)}
.head__in{display:flex;align-items:center;height:60px;gap:16px}
.brand{font-family:var(--display);font-size:22px}
.brand i{font-style:normal;color:var(--red)}
.head__tag{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted)}

.notice{padding:56px 0 50px;border-bottom:2px solid var(--ink)}
.notice__in{display:grid;grid-template-columns:1.12fr .88fr;gap:48px;align-items:start}
.lede{font-size:20.5px;margin:22px 0 0;max-width:52ch}
.sub{color:var(--muted);margin:16px 0 0;max-width:56ch}

.card{border:1.5px solid var(--ink);background:var(--card);padding:24px}
.card h3{margin:0 0 12px}
.card p{margin:0;color:var(--muted);font-size:16.5px}
form{display:grid;gap:10px;margin-top:16px}
input{padding:13px 15px;border:1.5px solid var(--ink);background:var(--paper);font-family:var(--mono);font-size:13.5px;color:var(--ink)}
input::placeholder{color:var(--muted)}
.small{font-family:var(--ui);font-size:12px;color:var(--muted);margin-top:12px}

.sec{padding:50px 0;border-bottom:2px solid var(--ink)}
.sec--alt{background:var(--card)}

.list{list-style:none;margin:22px 0 0;padding:0}
.list li{display:grid;grid-template-columns:26px 1fr;gap:14px;padding:15px 0;border-bottom:1px solid var(--rule)}
.list li:last-child{border-bottom:0}
.list b{font-family:var(--mono);color:var(--red)}
.list em{font-style:normal;display:block;color:var(--muted);font-size:16px;margin-top:4px}

/* slip */
.slip{background:var(--card);border:1.5px solid var(--ink);padding:20px;font-family:var(--mono);font-size:12.5px}
.slip h4{margin:0 0 12px;font-family:var(--ui);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border-bottom:1px dashed var(--rule-strong);padding-bottom:10px}
.slip .r{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px dotted var(--rule)}
.slip .r:last-of-type{border-bottom:0}
.slip .r span:first-child{color:var(--muted)}
.stamp{margin-top:14px;border:2.5px solid var(--green);color:var(--green);padding:9px 12px;text-align:center;font-family:var(--display);font-size:18px;letter-spacing:.05em;transform:rotate(-2deg)}
.pending{border-color:var(--muted);color:var(--muted)}

.ch{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.stat{display:flex;gap:28px;margin-top:20px;flex-wrap:wrap}
.stat .v{font-family:var(--display);font-size:30px;line-height:1;color:var(--red)}
.stat .l{font-family:var(--ui);font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:4px}

.foot{background:var(--ink);color:#CFC8BC;padding:36px 0 24px;font-size:14.5px}
.foot .brand{color:var(--paper)}
.legal{margin-top:20px;padding-top:16px;border-top:1px solid #322C24;font-size:12.5px;color:#8C8578;line-height:1.6}
.age{display:inline-block;font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.1em;border:1.5px solid var(--red);color:#E8776C;padding:5px 10px;margin-top:12px}
.flinks{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-family:var(--ui);font-size:13.5px}

@media (max-width:900px){.notice__in,.ch{grid-template-columns:1fr;gap:30px}}
/* ---------- Interim adjustments (not from the prototype) ---------- */
/* Alignment and rhythm only. Type scale, families and palette are untouched
   apart from the two figures in .stat, which were asked to carry more weight. */

/* One column, shared by every section including header and footer: the column
   is centred on the page, the text inside it stays left aligned. The
   prototype's two-column grids (.notice__in, .ch) are no longer used in the
   markup. box-sizing is border-box, so the horizontal padding is added to
   max-width to keep the measure at a true 720px. */
:root { --wrap: 720px; }

.wrap {
	max-width: calc(var(--wrap) + 44px);
	margin: 0 auto;
	padding: 0 22px;
}

/* The measure now comes from the container alone, so text, the signup card and
   the test slip all break on the same line. 720px is roughly 75 characters at
   the body size, which is where the list measure was set before. */
.lede,
.sub,
.list li > span { max-width: none; }

/* Signup card and test slip run in the flow at container width. */
.card,
.slip { margin-top: 34px; }

/* Test slip: heavier rules so the empty values read as fields to be filled in. */
.slip .r .blank {
	flex: 0 0 240px;
	align-self: flex-end;
	margin-bottom: 4px;
	border-bottom: 2px dotted var(--rule-strong);
}

/* "Not started" is a warning state, not a neutral one. */
.stamp--not-started { border-color: var(--red); color: var(--red); }

/* The two Tipster figures carry that section — more size, more air. */
.stat { gap: 64px; margin-top: 40px; }
.stat .v { font-size: 56px; }
.stat .l { margin-top: 8px; }

@media (max-width: 620px) {
	.stat { gap: 36px; }
	.stat .v { font-size: 44px; }
}

/* Visually hidden label for the blank slip fields. */
.vh {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------- Interim Plain (Newsletter path) ---------- */
/* Same shell as the homepage; only the content column differs. The Newsletter
   plugin's own stylesheet still loads, these rules are printed after it. */

.plain__title { font-size: clamp(28px, 4vw, 44px); margin-bottom: 26px; }

.plain__body p { margin: 0 0 18px; }
.plain__body p:last-child { margin-bottom: 0; }
.plain__body a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.plain__body h2,
.plain__body h3 { margin: 34px 0 14px; }

/* Newsletter plugin form, matched to the signup box on the homepage. */
.plain__body .tnp,
.plain__body .tnp-subscription { max-width: none; margin: 0; }

.plain__body .tnp-field { margin: 0 0 12px; }

.plain__body .tnp-field label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--ui);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--muted);
}

.plain__body .tnp-field input[type="email"],
.plain__body .tnp-field input[type="text"],
.plain__body .tnp-field select {
	width: 100%;
	max-width: 420px;
	padding: 13px 15px;
	border: 1.5px solid var(--ink);
	border-radius: 0;
	background: var(--paper);
	font-family: var(--mono);
	font-size: 13.5px;
	color: var(--ink);
}

.plain__body .tnp-field input[type="submit"],
.plain__body .tnp-submit,
.plain__body .tnp-widget input[type="submit"] {
	display: inline-flex;
	align-items: center;
	width: auto;
	padding: 13px 20px;
	border: 1.5px solid var(--red);
	border-radius: 0;
	background: var(--red);
	color: #fff;
	font-family: var(--ui);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .16s, border-color .16s;
}

.plain__body .tnp-field input[type="submit"]:hover,
.plain__body .tnp-submit:hover { background: #A82A20; border-color: #A82A20; }

/* ---------- Methodik-Seite auf dem Plain-Template ----------
   Die Seite /how-we-test/ bringt Tabellen, Trennlinien und Hervorhebungen mit,
   die der Newsletter-Pfad nie brauchte. Sie stehen hier und nicht in
   components.css, weil das Plain-Template nur tokens.css und diese Datei lädt. */

.plain__body h2 {
	font-size: clamp(21px, 2.8vw, 30px);
	padding-bottom: 10px;
	border-bottom: 2px solid var(--ink);
}

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

.plain__body hr {
	border: 0;
	border-top: 1px solid var(--rule);
	margin: 34px 0;
}

.plain__body strong { font-weight: 600; }

/* Die einleitende Kursivzeile und ähnliche Randbemerkungen. */
.plain__body .gosu-note-line {
	font-family: var(--ui);
	font-size: 13px;
	color: var(--muted);
}

/* Breite Inhalte scrollen in sich, nie die Seite. */
.gosu-scroll-x { overflow-x: auto; margin: 0 0 18px; }

.plain__body table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--ui);
	font-size: 15px;
	line-height: 1.5;
}

.plain__body th {
	text-align: left;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
	border-bottom: 1px solid var(--ink);
	padding: 8px 14px 8px 0;
}

.plain__body td {
	padding: 10px 14px 10px 0;
	border-bottom: 1px solid var(--rule);
	vertical-align: top;
}

.plain__body td:first-child { padding-right: 22px; }
.plain__body tr:last-child td { border-bottom: 0; }

/*
 * Offene Platzhalter.
 *
 * Sie sollen beim Überfliegen ins Auge springen — der Zweck ist, dass niemand
 * sie übersieht, bevor die Seite öffentlich wird. Deshalb Signalfarbe und
 * gestrichelter Rahmen statt einer dezenten Markierung.
 */
.plain__body .gosu-todo {
	background: none;
	color: var(--red);
	font-family: var(--mono);
	font-size: .92em;
	font-weight: 700;
	padding: 1px 6px;
	border: 1px dashed var(--red);
	white-space: nowrap;
}

@media (max-width: 620px) {
	.plain__body table { font-size: 14px; }
	.plain__body th,
	.plain__body td { padding-right: 10px; }
}

/* ---------- Sticky footer ---------- */
/* Both interim templates are standalone documents whose direct children are
   the masthead, the sections and the footer. Making the body a column flex
   container lets the footer take the remaining space instead of floating
   mid-page — which the newsletter states did, since several of them carry
   only two lines of text. */

body.interim-homepage,
body.interim-plain {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

body.interim-homepage > .foot,
body.interim-plain > .foot { margin-top: auto; }

/* On the plain template the single content section grows, so its closing rule
   sits directly above the footer rather than leaving a ruled-off empty band. */
body.interim-plain > .sec { flex: 1 0 auto; }