/*
Theme Name:   dwp-child
Theme URI:    https://www.7einhalb.de
Description:  Standard-Child-Theme der Agentur 7einhalb für GeneratePress. Enthält Helferklassen, Formularstile und projektspezifisches CSS.
Author:       7einhalb - Maik Bernstein
Author URI:   https://www.7einhalb.de
Template:     generatepress
Version:      1.0.0
*/

/* =========================================================================
   Diese Datei enthält nur, was sich mit Blöcken nicht lösen lässt:
   (a) Helferklassen, (b) Formularstile, (c) Projektspezifisches.
   Design-Bausteine gehören als globale GenerateBlocks-Klassen in den
   Editor, nicht hierher.
   Die Versionierung im Frontend übernimmt functions.php per filemtime().
   ========================================================================= */


/* =========================================================================
   (a) Helferklassen
   Das Editor-Pendant zu .hideme (opacity .3) steht in
   assets/css/gutenberg.css.
   Konvention: "hideme-" mit angehängtem Bindestrich kennzeichnet eine
   bewusst deaktivierte Sektion und wird nie stillschweigend repariert.
   ========================================================================= */

/* Inhalt verstecken */
.hideme {
    display: none !important;
}
@media screen and (max-width: 768px) {
    .mobile-hideme {
        display: none !important;
    }
}
@media screen and (min-width: 769px) {
    .desktop-hideme {
        display: none !important;
    }
}

/* Außenabstand entfernen. Schreibweise ist "nomargin"; der Alias
   "no-margin" wird nicht mehr verwendet. */
.nomargin {
    margin: 0;
}

/* Element hinter die Fläche legen */
.layer-back {
    z-index: -1;
}

/* Klebendes Element beim Scrollen */
.stickme {
    position: sticky;
    top: 5%;
}

/* Zeiger-Ereignisse abschalten */
.nopointer {
    pointer-events: none;
}

/* Bild-Hover: Skalierung und Schatten */
.hover-shadow figure.wp-block-image {
    transition: transform 0.5s ease 0s;
}
.hover-shadow figure.wp-block-image:hover {
    transform: scale(1.1);
    box-shadow: 0px 5px 20px 5px rgba(0, 0, 0, 0.4);
}


/* =========================================================================
   (b) dwp-form — Formularstile für Contact Form 7
   Contact Form 7 rendert eigenes Markup, das sich mit Blöcken nicht
   gestalten lässt. Deshalb stehen diese Regeln hier.
   ========================================================================= */

/* Label in einer Zeile mit dem Feld */
.inline-row label {
    display: flex;
    gap: 30px;
    align-items: center;
}

/* Allgemeines */
.wpcf7 .wpcf7-list-item {
    margin-left: 0;
}
.wpcf7 p label {
    font-size: 0.9em;
}
.wpcf7 .input-row label,
.label {
    padding: 5px 10px 0 10px;
    display: block;
    margin: 0;
    min-width: 130px;
}

/* Eingabefelder. Die Rahmenfarbe kommt aus der Palette der Website;
   der Slug "base" muss in den GP Global Colors existieren.
   color: inherit statt eines festen Werts, damit die Felder auf hellen
   wie auf dunklen Seiten lesbar bleiben. */
.wpcf7 input[type="email"],
.wpcf7 input[type="number"],
.wpcf7 input[type="password"],
.wpcf7 input[type="search"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="text"],
.wpcf7 input[type="url"],
.wpcf7 select,
.wpcf7 textarea {
    width: 100%;
    border: unset;
    background: transparent;
    border: 1px solid var(--base);
    border-radius: 10px;
    color: inherit;
    margin-top: 5px;
}

/* Mehrzeiliges Textfeld */
.wpcf7 .is-textarea p {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.wpcf7-textarea {
    height: 100px;
}

/* Abstand bei Auswahlfeldern */
.wpcf7-form .wpcf7-list-item:first-of-type {
    margin-left: 0;
}
.wpcf7-form .wpcf7-form-control.wpcf7-radio {
    display: flex;
    gap: 1em;
}

/* Fehlermeldungen bündig */
.wpcf7 form .wpcf7-response-output {
    margin: 0 0.5em 0;
}

/* Absende-Button: notwendiges Duplikat des Primär-Buttons, weil der
   Contact-Form-7-Submit keine GenerateBlocks-Klasse tragen kann. Bei
   Redesigns mit dwp-button--primary synchron halten. Die Farb-Slugs
   (accent, accent-2, black, white) müssen in der Palette existieren. */
.wpcf7-form-control.wpcf7-submit {
    align-items: center;
    background-color: var(--accent);
    color: var(--black);
    column-gap: .5rem;
    display: inline-flex;
    font-weight: bold;
    justify-content: center;
    letter-spacing: 2px;
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
    transition: all .5s ease 0s;
    border-radius: 3px;
    padding: .75rem 1.25rem;
}
.wpcf7-form-control.wpcf7-submit:is(:hover, :focus) {
    background-color: var(--accent-2);
    color: var(--white);
}

/* Spinner mittig unter dem Button */
.wpcf7-spinner {
    display: block;
    margin: 0 auto;
}

/* Spalten-Raster, einfache Fassung */
.dwp-form {
    width: 100%;
    margin: 0 auto;
}
.dwp-form-row {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.dwp-form-row .wpcf7-form-control,
.wpcf7-form label {
    width: 100%;
}
.dwp-form-column {
    flex: 1;
    padding: 0.5rem 0;
    width: 100%;
}
.dwp-form-column:first-of-type {
    padding-left: 0;
}
.dwp-form-column:last-of-type {
    padding-right: 0;
}

/* Raster ab Notebook-Breite */
@media only screen and (min-width: 48em) {
    .dwp-form-row {
        flex-direction: row;
    }
    .dwp-form-column {
        padding: 0.5rem 1rem;
    }
}


/* =========================================================================
   (c) projektspezifisch — bleibt leer, bis etwas gebraucht wird
   Hierher kommt nur, was sich mit Blöcken nicht lösen lässt:
   Elementselektoren, Sonderfälle bei Contact Form 7, Blockstil-Varianten.
   Gegliedert mit einem Kommentar-Banner je Seite ("# Seite <Name>").
   Design-Bausteine werden globale GenerateBlocks-Klassen, nie Child-CSS.
   ========================================================================= */


/* =========================================================================
   Wiederkehrender Fall: mobiles Menü ohne Hintergrund

   Hier steht bewusst KEIN CSS. Der Fall wird über eine Einstellung gelöst,
   nicht über diese Datei.

   Symptom: Liegt die Kopfleiste transparent über einem Hero
   (navigation_background_color mit Alpha 0), klappt das mobile Menü ohne
   Hintergrund auf — GeneratePress hat für das klassische Aufklappmenü
   keinen eigenen Farbwert und erbt denselben.

   Lösung: Customizer → Menüs → Mobiles Menü auf "Off-Canvas-Panel".
   Das Panel bringt eigene Farbfelder mit (slideout_background_color,
   slideout_text_color), die Desktop-Transparenz bleibt unberührt.

   Falle: Das Panel öffnet sich danach in der richtigen Farbe, aber LEER.
   Es ist eine eigene Menüposition — das Menü muss zusätzlich der Position
   "slideout" zugewiesen werden, sonst steht nur das Schließkreuz da.

   Herleitung, Werte und Messweg: _wissensbasis/gp-mobiles-menue.md.
   Geprüft wird mit seed/pruefweg/mobiles-menue-pruefen.py.

   CSS ist hier nur der Notweg, wenn das Off-Canvas-Panel gestalterisch
   nicht gewollt ist. Die Regel dafür steht in der Wissensdatei,
   Abschnitt 3 — mitsamt der Spezifitäts- und z-index-Stolperstelle.
   ========================================================================= */

/* === mb-tokens:start (erzeugt von aufbau/04-tokens.php) === */
/* ---------------------------------------------------------------------
   MilchBärtchen · Gestaltungs-Tokens v0.4 "Dunkle Eiche"
   Quelle: ÜBERGABE v0.4 WordPress.md. Farben stehen NICHT hier, sondern
   als GP Global Colors (var(--mb-ink) usw.) — hier nur, was keine Farbe
   ist: Flächen, Schatten, Maße, Schalter.
   --------------------------------------------------------------------- */
:root {
	/* Maße */
	--mb-breite: 980px;          /* Inhaltsbreite der Bögen */
	--mb-breite-stoer: 800px;    /* schwarzes Blatt ist schmaler */
	--mb-bogen-padding: 76px 60px;
	--mb-bogen-ueberlappung: -28px;

	/* Linien */
	--mb-line: rgba(23, 20, 15, .2);
	--mb-hair: rgba(23, 20, 15, .12);
	--mb-stoer-line: rgba(244, 240, 230, .45);

	/* Flächen — --mb-sheet-info ist eine reine Bildliste; die Kachelgröße
	   14px/auto setzen die Klassen über background-size. Position und Größe
	   im Token (0 0 / 14px 14px) machen background-image ungültig, der Fuß
	   und die Infobögen standen dadurch durchsichtig (Befund 21.09.2026). */
	--mb-sheet: linear-gradient(#FBFAF7, #F3F1EC);
	--mb-sheet-info:
		radial-gradient(rgba(23, 20, 15, .09) .7px, rgba(0, 0, 0, 0) .9px),
		linear-gradient(#F6F4F0, #EEECE6);
	--mb-band-kapitale: linear-gradient(180deg, #ECEEE9, #F4F4F0 42%, #FAFAF7);
	--mb-papier-schwarz: url(assets/bilder/paper-black.jpg);

	/* Schatten — die Bögen werfen auf den Tisch */
	--mb-shadow: 0 32px 64px -20px rgba(0, 0, 0, .85), 0 -16px 30px -20px rgba(0, 0, 0, .6);
	--mb-shadow-s: 0 14px 28px -14px rgba(0, 0, 0, .75), 0 -9px 18px -13px rgba(0, 0, 0, .45);
	--mb-shadow-d: 0 36px 70px -20px rgba(0, 0, 0, .85), 0 -16px 30px -20px rgba(0, 0, 0, .5);

	/* Werkzeugkasten */
	--mb-tape: linear-gradient(180deg, rgba(255, 255, 252, .6), rgba(236, 234, 226, .46));
	--mb-tape-edge: rgba(255, 255, 255, .4);
	--mb-tape-show: block;       /* Entscheidung C1 vom 19.09.2026: Klebeband an */
	--mb-tilt: .5;               /* Entscheidung C2: Drehung 0,5× der Basiswinkel */
	--mb-mark: rgba(242, 208, 74, .55);
	--mb-postit-gelb: linear-gradient(160deg, #FBEBA0, #EFD877);
	--mb-postit-gruen: linear-gradient(160deg, #D8E8D6, #BAD4B8);

	/* Tisch */
	--mb-tisch-bild: url(assets/bilder/tisch-06-original.jpg);
	--mb-tisch-kachel: url(assets/bilder/tisch-06.jpg);   /* Rückfall für iOS */
	--mb-tisch-dim: .14;
	--mb-tisch-overlay: linear-gradient(rgba(6, 4, 2, var(--mb-tisch-dim)), rgba(6, 4, 2, var(--mb-tisch-dim)));
}

/* Nachtmodus — vorbereitet, nicht eingeschaltet (Entscheidung B9).
   Es gibt keinen Umschalter; wer prüfen will, setzt von Hand
   data-mb-modus="nacht" am <html>-Element. */
[data-mb-modus="nacht"] {
	--mb-sheet: linear-gradient(#211E19, #1A1815);
	--mb-sheet-info:
		radial-gradient(rgba(244, 240, 230, .07) .7px, rgba(0, 0, 0, 0) .9px),
		linear-gradient(#1E1C18, #191714);
	--mb-band-kapitale: linear-gradient(180deg, #1C1A16, #221F1A 42%, #262219);
	--mb-line: rgba(244, 240, 230, .24);
	--mb-hair: rgba(244, 240, 230, .14);
	--mb-tisch-dim: .42;
	--mb-tape: linear-gradient(180deg, rgba(120, 116, 106, .35), rgba(90, 86, 78, .28));
	--mb-ink: #EDE7DA;
	--mb-ink-2: #B6AE9B;
	--mb-papier: #211E19;
	--mb-papier-2: #1A1815;
	--mb-papier-3: #1E1C18;
	--mb-papier-4: #191714;
	--mb-zettel: #2A2620;
	--mb-zettel-ink: #E8E2D5;
}

.mb-stoer {
	background-image: var(--mb-papier-schwarz);
}

/* Jede dunkle Fläche trägt das schwarze Papier, nie nur die Farbe (Ansage
   Maik, 22.09.2026). Eigene dunkle Bauteile: Klasse mb-preiskarte. */
.mb-preiskarte {
	background-image: var(--mb-papier-schwarz);
	background-size: cover;
	background-position: center;
}

/* Schreibtisch als Seitengrund. background-attachment:fixed greift auf
   iOS Safari nicht; dort übernimmt die gekachelte Fassung (Media Query
   unten), damit keine leere Fläche entsteht. */
body {
	background-color: var(--mb-tisch, #2A1C14);
	background-image: var(--mb-tisch-overlay), var(--mb-tisch-bild);
	background-size: auto, max(1600px, 100vw) auto;
	background-repeat: repeat;
	background-attachment: fixed, fixed;
}
@supports (-webkit-touch-callout: none) {
	body {
		background-image: var(--mb-tisch-overlay), var(--mb-tisch-kachel);
		background-attachment: scroll, scroll;
		background-size: auto, 1200px auto;
	}
}
/* === mb-tokens:end === */