/**
 * Impressed Download Gate.
 *
 * Bewusst zurueckhaltend: Wo das Theme eigene Klassen mitbringt
 * (gbp-text-button-secondary-v2), bleiben dessen Buttons unangetastet.
 * Hier steht nur, was das Gate strukturell braucht.
 */

/*
 * Formular auf den Produktseiten.
 *
 * Die Werte sind am bisherigen CF7-Formular abgenommen (Live-Stand), damit der
 * Wechsel optisch nicht auffaellt:
 *   Feld      #F9FAFB auf 1px #DDE3EA, Radius 6px, Innenabstand 11px/14px, 14px Schrift
 *   Label     13px / 600 / #555
 *   Beiwerk   13px / 400 / #666
 *   Haekchen  17px, accent-color in der Hausfarbe
 * Der Absende-Button traegt allein die Theme-Klasse gbp-text-button-secondary-v2 --
 * hier wird bewusst nichts dagegen gesetzt.
 *
 * Bewusst ohne Dark-Mode-Varianten: Die Seite selbst kennt nur die helle
 * Darstellung, eigene Umschaltungen wuerden hier aus dem Rahmen fallen.
 */

.idg-gate {
	font-size: 14px;
	line-height: 1.5;
}

.idg-gate[hidden],
.idg-gate .idg-step[hidden],
.idg-gate .idg-help[hidden] {
	display: none;
}

.idg-field {
	margin-bottom: 0.85rem;
}

.idg-field label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 13px;
	font-weight: 600;
	color: #555;
}

.idg-gate input[type="email"] {
	display: block;
	width: 100%;
	/* Halbe Breite gegenueber dem bisherigen Formular: dort lief das Feld ueber
	   die volle Spalte (rund 680px). Auf schmalen Bildschirmen bleibt es dank
	   width:100% trotzdem voll nutzbar. */
	max-width: 21rem;
	padding: 11px 14px;
	border: 1px solid #dde3ea;
	border-radius: 6px;
	background: #f9fafb;
	color: #222;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
}

/*
 * Kein Fokusring, wie bei der Code-Eingabe -- ausdruecklich so gewuenscht
 * (21.08.2026).
 *
 * Der Ring hing an :focus-visible in der Annahme, er erscheine nur bei
 * Tastaturbedienung. Das trifft fuer Texteingaben nicht zu: Browser setzen
 * :focus-visible dort immer, auch beim Mausklick.
 *
 * Sichtbar bleiben muss der Fokus trotzdem, und beim E-Mail-Feld wechselte ohne
 * den Ring nichts -- weder Rahmen noch Fuellung, entgegen einer frueheren
 * Annahme ueber das Theme. Deshalb dasselbe Mittel wie bei den Code-Kaesten:
 * die Fuellung wechselt von Grau auf Weiss. Die Rahmenfarbe bleibt unberuehrt,
 * die Hausfarbe kommt nicht vor.
 *
 * Die Kette .idg-gate .idg-field input[...] liegt mit (0,3,1) ueber
 * GeneratePress' input[type="email"]:focus (0,2,1), das sonst seine eigene
 * Fuellung setzt.
 */
.idg-gate .idg-field input[type="email"]:focus,
.idg-gate .idg-field input[type="email"]:focus-visible {
	background-color: #fff;
	outline: 0;
}

/*
 * Code-Eingabe: sechs Ziffern mit weitem Zeichenabstand brauchen echte Breite,
 * sonst wirkt das Feld gequetscht und die letzte Ziffer klebt am Rand.
 */
/*
 * Code-Eingabe: EIN Feld, das wie sechs Kaesten aussieht.
 *
 * Aufbau: .idg-code-boxes liegt mit sechs leeren Elementen hinter dem Feld und
 * liefert Rahmen und graue Fuellung. Das Feld selbst ist transparent und liegt
 * darueber; seine Ziffern sitzen dank fester Zeichenbreite im gleichen Raster
 * wie die Kaesten.
 *
 * Das Raster ist gemeinsam gerechnet:
 *
 *   Kasten 2ch + Luecke 0.6ch          = 2.6ch pro Stelle
 *   Zeichen 1ch + letter-spacing 1.6ch = 2.6ch pro Stelle
 *   Gesamtbreite 6 x 2ch + 5 x 0.6ch   = 15ch
 *   text-indent = (2ch - 1ch) / 2      = 0.5ch  -> Ziffer mittig im Kasten
 *
 * Wichtig: Die Schriftangaben stehen auf der Huelle, nicht nur auf dem Feld.
 * Die Einheit ch bezieht sich immer auf die Schrift des jeweiligen Elements --
 * ohne das waeren die ch-Werte der Kaesten an der Grundschrift des Themes
 * gemessen und die der Ziffern an der Monospace-Schrift, und beide Raster
 * liefen auseinander.
 *
 * Monospace ist deshalb Bedingung, nicht Geschmack: nur dort ist 1ch
 * tatsaechlich die Breite einer Ziffer.
 */
.idg-field--code {
	margin-bottom: 1.1rem;
	/*
	 * Feld und Meldung stehen nebeneinander, das Label darueber. Reicht der Platz
	 * nicht -- auf dem Telefon --, rutscht die Meldung unter das Feld.
	 */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 0.9rem;
	row-gap: 0.3rem;
}

.idg-field--code > label {
	flex: 0 0 100%;
}

.idg-code-wrap {
	position: relative;
	display: inline-block;
	/* Schrift auf der Huelle, damit ch hier und im Feld dasselbe bedeutet. */
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.3;
	width: 15ch;
}

.idg-code-boxes {
	position: absolute;
	inset: 0;
	display: flex;
	gap: 0.6ch;
	pointer-events: none;
}

.idg-code-boxes > span {
	flex: 0 0 2ch;
	/* Rahmen auch bei der Fuellung, damit beide Ebenen deckungsgleich sind. */
	border: 1px solid transparent;
	border-radius: 6px;
	transition: border-color 0.12s ease, background-color 0.12s ease;
}

/* Untere Ebene: graue Fuellung, hinter dem Feld. */
.idg-code-boxes--fuellung { z-index: 0; }

.idg-code-boxes--fuellung > span {
	background: #f9fafb;
}

/* Obere Ebene: nur Rahmen, vor dem Feld -- deshalb ohne Fuellung, sonst waeren
   die Ziffern verdeckt. */
.idg-code-boxes--rahmen { z-index: 2; }

.idg-code-boxes--rahmen > span {
	border-color: #dde3ea;
	background: transparent;
}

/* Das Feld selbst: unsichtbar bis auf die Ziffern. */
.idg-gate .idg-code {
	position: relative;
	z-index: 1;
	display: block;
	margin: 0;
	padding: 0.42rem 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #222;
	font: inherit;
	letter-spacing: 1.6ch;
	text-indent: 0.5ch;
	/*
	 * Der Zeichenabstand wirkt auch hinter der letzten Ziffer. Der Inhalt ist
	 * damit 1.1ch breiter als die Kaesten (6 x 2.6ch + 0.5ch Einzug = 16.1ch
	 * gegen 15ch), und sobald der Cursor am Ende steht, scrollt der Browser um
	 * genau diesen Betrag: beim Einfuegen und beim Autofill sofort, beim Tippen
	 * mit der sechsten Ziffer. Die Ziffern sassen dann neben ihren Kaesten und
	 * die erste war links angeschnitten.
	 *
	 * Deshalb bekommt das Feld die Breite seines Inhalts -- dann gibt es nichts
	 * zu scrollen. Sichtbar ist der Ueberhang nicht, weil das Feld transparent
	 * ist und dort nur der leere Abstand hinter der letzten Ziffer liegt.
	 */
	width: calc(100% + 1.1ch);
	/* Farbe des Cursors -- ausgeblendet wird er ueber .is-vollstaendig, siehe unten. */
	caret-color: auto;
	/*
	 * max-width muss mit: Das Theme setzt input { max-width: 100% } und faengt
	 * die Breite oben sonst wieder auf 15ch ein -- die Angabe darueber waere
	 * wirkungslos, ohne dass man es im Stylesheet sieht.
	 */
	max-width: none;
	overflow: hidden;
	-webkit-appearance: none;
	appearance: none;
}

/*
 * Der Hintergrund muss auch im Fokus durchsichtig bleiben.
 *
 * GeneratePress setzt input[type="text"]:focus { background: var(--base-2) }.
 * Dieser Selektor hat Spezifitaet (0,2,1) und schlaegt damit ein einfaches
 * .idg-gate .idg-code (0,2,0) -- das Feld bekam im Fokus einen deckenden
 * Hintergrund und verdeckte die Kaesten dahinter vollstaendig. Die Kette
 * .idg-gate .idg-code-wrap .idg-code:focus liegt mit (0,4,0) darueber.
 */
.idg-gate .idg-code-wrap .idg-code:focus,
.idg-gate .idg-code-wrap .idg-code:focus-visible {
	background-color: transparent;
	outline: 0;
}

/*
 * Steht der Code vollstaendig, verschwindet der Cursor: Er sass hinter dem
 * sechsten Kasten, in der Flaeche des Zeichenabstands, und blinkte dort im
 * Leeren. Die Klasse setzt idg-gate.js, sobald sechs Ziffern erfasst sind.
 */
.idg-gate .idg-code.is-vollstaendig {
	caret-color: transparent;
}

/*
 * Kein Fokusring um die Gruppe -- ausdruecklich so gewuenscht (21.08.2026). Der
 * graue Ring um alle sechs Kaesten erschien auch beim Klick mit der Maus, weil
 * Browser :focus-visible bei Texteingaben immer setzen, und wirkte dabei
 * dominanter als das Feld selbst.
 *
 * Erkennbar bleibt der Fokus an zwei Dingen: Die Fuellung der Kaesten wechselt
 * von Grau auf Weiss (Regel weiter unten), und im ersten Kasten blinkt der
 * Cursor -- die uebliche Anzeige einer Texteingabe. Wer das wieder einbauen
 * will, sollte vorher fragen; es war eine bewusste Entscheidung, keine
 * Nachlaessigkeit.
 */

/*
 * Fokus gilt fuer alle Kaesten gemeinsam -- es ist ein Feld, keine sechs.
 * Eine einzelne Stelle hervorzuheben waere eine Behauptung, die nicht stimmt.
 */
/*
 * Im Fokus bleibt die Rahmenfarbe unveraendert -- ausdruecklich so gewuenscht.
 * Erkennbar ist der Fokus an der Fuellung, die von Grau auf Weiss wechselt, am
 * blinkenden Cursor und, bei Tastaturbedienung, am Ring um die Gruppe.
 */
.idg-code-wrap:focus-within .idg-code-boxes--fuellung > span {
	background: #fff;
}

@media (max-width: 26rem) {
	.idg-code-wrap {
		font-size: 1.3rem;
	}
}

.idg-check {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	margin-bottom: 0.55rem;
	font-size: 13px;
	color: #666;
}

.idg-check input[type="checkbox"] {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin: 0.15rem 0 0;
	accent-color: #e40039;
}

.idg-check a { color: #e40039; }

.idg-turnstile {
	margin: 0.9rem 0;
}

/*
 * Platz fuer das Widget vorab reservieren.
 *
 * Es entsteht erst, wenn jemand das Formular anfasst. Ohne reservierte Hoehe
 * schiebt es in diesem Moment den Absende-Button nach unten -- der Besucher
 * klickt dann womoeglich ins Leere. 65px entspricht der normalen Widget-Hoehe
 * von Cloudflare.
 *
 * Nur im sichtbaren Modus noetig: bei interaction-only bleibt das Widget
 * ohnehin meist unsichtbar und braucht keinen Platz.
 */
.idg-turnstile--reserviert {
	min-height: 65px;
}

.idg-gate button[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.idg-sent {
	margin: 0 0 0.85rem;
	font-size: 13px;
	color: #666;
}

.idg-sent strong { color: #222; }

/* Hilfe-Optionen -- erscheinen nach der eingestellten Wartezeit oder einem Fehlversuch. */
.idg-help {
	margin-top: 1.2rem;
	padding-top: 0.8rem;
	border-top: 1px solid #e6e6e6;
	font-size: 13px;
	color: #666;
}

.idg-help__intro {
	margin: 0 0 0.5rem;
}

.idg-help__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.idg-help__list li + li {
	margin-top: 0.35rem;
}

.idg-link {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: #e40039;
	text-align: left;
	text-decoration: underline;
	cursor: pointer;
}

.idg-link:hover { text-decoration: none; }
.idg-link:focus-visible { outline: 2px solid #e40039; outline-offset: 2px; }

.idg-message {
	margin: 0.8rem 0 0;
	font-size: 13px;
	min-height: 1.4em;
}

.idg-message:empty {
	margin: 0;
	min-height: 0;
}

.idg-message.is-error {
	color: #b32d2e;
	font-weight: 600;
}

.idg-message.is-success { color: #1a7f37; }
.idg-message.is-working { color: #666; }

/*
 * Die Meldung neben dem Code-Feld. Kein Abstand nach oben, weil sie in der Zeile
 * des Feldes sitzt; die Mindestbreite verhindert, dass ein kurzer Satz in
 * Einzelwoerter zerfaellt, statt umzubrechen.
 */
.idg-message--am-feld {
	margin: 0;
	flex: 1 1 16ch;
	min-width: 16ch;
	/*
	 * Breit genug, dass "Der Code stimmt nicht. Noch 4 Versuche." auf dem Rechner
	 * in eine Zeile passt. Reicht der Platz nicht, bricht die Zeile zwischen den
	 * beiden Saetzen -- "Noch 4 Versuche." haengt durch die geschuetzten
	 * Leerzeichen in IDG_DB::verify() zusammen.
	 */
	max-width: 40ch;
	text-wrap: pretty;
}

/* ------------------------------------------------ Download-Seite */

.idg-page {
	padding: 3rem 1.25rem 5rem;
}

.idg-page__inner {
	max-width: 44rem;
	margin: 0 auto;
}

.idg-page__eyebrow {
	margin: 0 0 0.5rem;
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.7;
}

.idg-page__title {
	margin: 0 0 0.75rem;
	font-size: clamp( 1.75rem, 4vw, 2.5rem );
	line-height: 1.2;
}

.idg-page__lead {
	font-size: 1.125rem;
}

.idg-page__action {
	margin: 2rem 0;
}

/*
 * Der Download-Button ist der wichtigste Klick der Seite und muss als Schaltflaeche
 * erkennbar sein. Die Selektoren sind absichtlich spezifisch und die Farben explizit:
 * Die Theme-Regeln fuer Links im Inhaltsbereich sind sonst staerker und machen daraus
 * wieder einen blossen Textlink. #E40039 ist die Akzentfarbe des Themes.
 */
.idg-page a.idg-button,
.idg-gate a.idg-button,
a.idg-button {
	display: inline-block;
	padding: 0.85rem 1.75rem;
	border: 1px solid #e40039;
	border-radius: 3px;
	background: transparent;
	color: #e40039;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.idg-page a.idg-button--primary,
a.idg-button--primary {
	padding: 1rem 2.25rem;
	background: #e40039;
	border-color: #e40039;
	color: #fff;
	font-size: 1.125rem;
}

.idg-page a.idg-button--primary:hover,
.idg-page a.idg-button--primary:focus,
a.idg-button--primary:hover,
a.idg-button--primary:focus {
	background: #b8002f;
	border-color: #b8002f;
	color: #fff;
	text-decoration: none;
}

.idg-page a.idg-button:focus-visible,
a.idg-button:focus-visible {
	outline: 2px solid #222;
	outline-offset: 2px;
}

.idg-page__notice {
	margin: 2rem 0;
	padding: 1rem 1.25rem;
	border-left: 3px solid currentColor;
	background: rgba( 0, 0, 0, 0.035 );
}

.idg-page__notice h2 {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
}

.idg-page__notice p:last-child {
	margin-bottom: 0;
}

.idg-page__section {
	margin: 2rem 0;
}

.idg-page__meta {
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.idg-page__meta li + li {
	margin-top: 0.4rem;
}

.idg-page__hint {
	margin-top: 2rem;
	font-size: 0.9375rem;
	opacity: 0.75;
}