/*
 * kunde.css · Die einzige CSS-Datei, die der Agent für einen Kunden anpasst.
 *
 * Aufbau, Abstände und Texte bleiben immer gleich. Farbe und Schriften kommen aus der Marke
 * deines Nutzers, genau wie in seinem Buch (Arturs Entscheidung vom 13.10.2026):
 * #A8123E ist die Akzentfarbe aus cover-freigabe.md, {{STIL}} im <body> der drei HTML-Dateien
 * ist der Stil des Buchs (modern, klassisch oder freundlich). Alle anderen Farbtöne leiten sich
 * aus der Akzentfarbe ab. Eigene Markenschriften nur lokal einbinden (Datei in schriften/,
 * Eintrag in schriften.css) und unten im Block „Eigene Schriften“ eintragen.
 */

:root {
    /* Farben, alle aus der einen Akzentfarbe abgeleitet */
    --kunde-akzent: #A8123E;                                                      /* Knopf „GRATIS DOWNLOAD“, Fokusrahmen */
    --kunde-akzent-dunkel: color-mix(in srgb, var(--kunde-akzent) 82%, #000000);     /* Knopf beim Überfahren */
    --kunde-akzent-schatten: color-mix(in srgb, var(--kunde-akzent) 14%, transparent);
    --kunde-hintergrund: color-mix(in srgb, var(--kunde-akzent) 5%, #ffffff);         /* Seitenhintergrund */
    --kunde-ueberzeile: var(--kunde-akzent);                                         /* „Kostenloses Buch“ über dem Titel */

    /* Wortmarke: Name des Kunden in Großbuchstaben. Erscheint auf dem Handy über dem Titel. */
    --kunde-wortmarke: "RALPH WALTHER";

    /* Danke-Seite (Lieferseite) nutzt dieselben Werte */
    --brand-accent: var(--kunde-akzent);
    --brand-accent-strong: var(--kunde-akzent-dunkel);
    --brand-gold: var(--kunde-ueberzeile);
    --brand-champagne: var(--kunde-hintergrund);
}

/* ---------- Schriften der drei Stile, dieselben wie im Buch ---------- */

.stil-modern {
    --kunde-schrift-text: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --kunde-schrift-titel: "Montserrat", "Helvetica Neue", Arial, sans-serif;
    --kunde-schrift-wortmarke: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}

.stil-klassisch {
    --kunde-schrift-text: "Libertinus Serif", Georgia, "Times New Roman", serif;
    --kunde-schrift-titel: "Libertinus Serif", Georgia, "Times New Roman", serif;
    --kunde-schrift-wortmarke: "Libertinus Serif", Georgia, serif;
}

.stil-freundlich {
    --kunde-schrift-text: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --kunde-schrift-titel: "Poppins", "Helvetica Neue", Arial, sans-serif;
    --kunde-schrift-wortmarke: "Poppins", "Helvetica Neue", Arial, sans-serif;
}

/* Eigene Schriften der Marke: Familiennamen aus schriften.css eintragen und die Zeilen einkommentieren.
body {
    --kunde-schrift-text: "Eigene Textschrift", Arial, sans-serif;
    --kunde-schrift-titel: "Eigene Titelschrift", Arial, sans-serif;
    --kunde-schrift-wortmarke: "Eigene Titelschrift", Arial, sans-serif;
}
*/

body {
    --brand-font-heading: var(--kunde-schrift-titel);
    --brand-font-body: var(--kunde-schrift-text);
}

/* ---------- Buchseite ---------- */

html,
body.nr-home--minimal-light,
.nr-home--minimal-light .newsletter-page {
    background: var(--kunde-hintergrund);
}

body.nr-home--minimal-light {
    --brand-accent: var(--kunde-akzent);
    --brand-accent-dark: var(--kunde-akzent-dunkel);
    font-family: var(--kunde-schrift-text);
}

@media (min-width: 901px) {
    .nr-home--minimal-light .navbar {
        background: var(--kunde-hintergrund);
    }
}

.nr-home--minimal-light h1 {
    font-family: var(--kunde-schrift-titel);
}

.nr-home--minimal-light .navbar-logo {
    font-family: var(--kunde-schrift-wortmarke);
}

.nr-home--minimal-light .hero-eyebrow {
    color: var(--kunde-ueberzeile);
}

.nr-home--minimal-light .newsletter-form button {
    background: var(--kunde-akzent);
}

.nr-home--minimal-light .newsletter-form button:hover:not(:disabled) {
    background: var(--kunde-akzent-dunkel);
}

.nr-home--minimal-light .newsletter-form input:not([type="checkbox"]):focus,
.nr-home--minimal-light .newsletter-form input:not([type="checkbox"])[aria-invalid="true"] {
    border-color: var(--kunde-akzent);
    box-shadow: 0 0 0 3px var(--kunde-akzent-schatten);
}

.nr-home--minimal-light .newsletter-form .form-submit-note {
    font-family: var(--kunde-schrift-text);
}

/* Wortmarke auf dem Handy (im Original fest „ARTUR NEUMANN“) */
.nr-home--minimal-light .hero-copy::before,
.nr-home--privatier-image-first.nr-home--hero-media .hero::before {
    content: var(--kunde-wortmarke);
    font-family: var(--kunde-schrift-wortmarke);
}

/* ---------- Hinweis zum Newsletter unter dem Formular ----------
   Empfohlen und standardmäßig sichtbar. Will dein Nutzer ihn ausdrücklich nicht,
   im <body> die Klasse „ohne-newsletter-hinweis“ ergänzen. */
.nr-home--minimal-light .newsletter-form .form-newsletter-hinweis {
    margin: 10px auto 0;
    max-width: 460px;
    color: #6b6b70;
    font-family: var(--kunde-schrift-text);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    text-align: center;
}

.nr-home--minimal-light .newsletter-form .form-newsletter-hinweis a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

body.ohne-newsletter-hinweis .form-newsletter-hinweis {
    display: none !important;
}

/* ---------- Variante ohne Kopfzeile ----------
   Im <body> die Klasse „kopf-ohne“ ergänzen. Dann verschwinden Wortmarke oben
   (Computer) und über dem Titel (Handy). Alle anderen Abstände bleiben. */
body.kopf-ohne .navbar,
body.kopf-ohne .hero-copy::before,
body.kopf-ohne .site-header,
body.kopf-ohne .hub-header {
    display: none !important;
}

body.kopf-ohne.fast-fertig {
    padding-top: 28px;
}

/* ---------- Versteckte Felder des Newsletter-Programms ----------
   Manche Programme verstecken ein Spamschutzfeld nur mit eigenem CSS, Brevo zum Beispiel
   mit der Klasse „input--hidden“. Ohne diese Regel wäre es hier als drittes Feld sichtbar. */
.newsletter-form .input--hidden,
.newsletter-form input[name="email_address_check"],
.newsletter-form .feld-versteckt {
    display: none !important;
}

/* ---------- Lange Wörter in Überschriften ----------
   Nur ein Wort, das allein breiter ist als das Handy, wird umbrochen.
   Alle anderen Titel brechen genau wie im Original. */
.nr-home--minimal-light h1,
.hub-page h1 {
    overflow-wrap: break-word;
}

/* ---------- Fast-fertig-Seite und Danke-Seite ---------- */

.fast-fertig .logo,
.hub-logo {
    font-family: var(--kunde-schrift-wortmarke);
}

/* ---------- Schriften und Farben überall dort, wo die Originaldateien sie fest setzen ---------- */

body.nr-home--minimal-light,
body.fast-fertig,
body.hub-page {
    font-family: var(--kunde-schrift-text);
}

.nr-home--minimal-light h1,
.nr-home--minimal-light h2,
.nr-home--minimal-light h3,
.fast-fertig h1,
.hub-page h1,
.hub-page h2,
.hub-page h3,
.hub-section h2,
.hub-card h3,
.hub-book h3 {
    font-family: var(--kunde-schrift-titel);
}

.nr-home--minimal-light .navbar-logo {
    font-family: var(--kunde-schrift-wortmarke);
}

body.fast-fertig .site-header {
    background: color-mix(in srgb, var(--kunde-hintergrund) 92%, transparent);
}

body.fast-fertig,
body.hub-page {
    background: var(--kunde-hintergrund);
}

.hub-button {
    background: var(--kunde-akzent);
}

.hub-button:hover {
    background: var(--kunde-akzent-dunkel);
}

.hub-kicker {
    color: var(--kunde-ueberzeile);
}

.hub-book small {
    color: var(--kunde-akzent);
}

.hub-card:focus-within,
.hub-book:focus-visible {
    outline-color: var(--kunde-akzent);
}