/*
Theme Name: Raum 26 Child
Description: Child-Theme für Divi 5, Website Raum 26.
Author: iten.digital
Template: Divi
Version: 0.1.0
Text Domain: raum26-child
*/

/* Eigenes CSS nur hier. Keine Hardcodes für Farben, Schriften und Abstände: Design-Variablen und Presets verwenden. */

/* --------------------------------------------------------------------------
 * Schriften: variable Fonts mit Gewichtsbereich. Divi lädt hochgeladene
 * Schriften selbst (ohne Bereich); diese Regeln ergänzen den Bereich.
 * Aufrechte Schnitte lädt Divi aus uploads/et-fonts/, Kursive liegen in assets/fonts/ des Child-Themes.
 * -------------------------------------------------------------------------- */
@font-face { font-family: "Raum 26 Display"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("/wp-content/uploads/et-fonts/raum26-display-mulish-var.woff2") format("woff2"); }
@font-face { font-family: "Raum 26 Display"; font-style: italic; font-weight: 200 1000; font-display: swap; src: url("assets/fonts/raum26-display-mulish-italic-var.woff2") format("woff2"); }
@font-face { font-family: "Raum 26 Sans"; font-style: normal; font-weight: 100 1000; font-display: swap; src: url("/wp-content/uploads/et-fonts/raum26-sans-dmsans-var.woff2") format("woff2"); }
@font-face { font-family: "Raum 26 Sans"; font-style: italic; font-weight: 100 1000; font-display: swap; src: url("assets/fonts/raum26-sans-dmsans-italic-var.woff2") format("woff2"); }

/* Silbentrennung nur dort, wo die Spalten schmal werden. Auf Desktop trennt sie sonst mitten in
 * gut passenden Überschriften; lange Wörter fängt overflow-wrap ab. */
h1, h2, h3, h4, .et_pb_module_header { font-optical-sizing: auto; overflow-wrap: break-word; hyphens: manual; -webkit-hyphens: manual; }
@media (max-width: 767px) { h1, h2, h3, h4, .et_pb_module_header { hyphens: auto; -webkit-hyphens: auto; } }

/* Hero mit Hintergrundvideo (Sektion mit Klasse «ws-hero»): Overlay, Inhalt sofort sichtbar, Video auf Handys aus. */
.ws-hero.et_pb_section { position: relative; background-color: var(--gcid-primaer-dunkel); }
.ws-hero.et_pb_section::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: linear-gradient(90deg, rgba(34, 64, 90, 0.82) 0%, rgba(34, 64, 90, 0.62) 55%, rgba(34, 64, 90, 0.38) 100%); }
.ws-hero > .et_pb_row { position: relative; z-index: 1; }
.ws-hero.et_pb_preload > div { visibility: visible; }
.ws-hero .et_pb_button { visibility: visible !important; transition-property: color, background-color, border-color, box-shadow; }
@media (max-width: 767px), (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce) { .ws-hero .et-pb-background-video { display: none; } }

/* One Pager: die Navigation springt zu den Abschnitten. Sprungziele bleiben unter dem Sticky-Header,
 * das Scrollen ist sanft, ausser jemand hat reduzierte Bewegung eingestellt. */
.et_pb_section[id] { scroll-margin-top: 104px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Schwebende Freisteller dürfen über den Rand ragen, ohne horizontales Scrollen. */
.ws-schwebend { pointer-events: none; }
.et_pb_section { overflow: visible; }
html, body { overflow-x: clip; }

/* Tabellen und Listen im Textmodul. */
.et_pb_text table { width: 100%; border-collapse: collapse; margin-bottom: var(--gvid-abstand-m); }
/* Schmale Bildschirme: Tabelle scrollt seitwärts, statt die Seite zu verbreitern. */
@media (max-width: 767px) { .et_pb_text table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.et_pb_text th, .et_pb_text td { white-space: nowrap; } }
.et_pb_text th, .et_pb_text td { padding: 12px 0; border-bottom: 1px solid var(--gcid-flaeche); text-align: left; vertical-align: top; }
.et_pb_text th { font-weight: 600; color: var(--gcid-text-hell); font-size: 15px; text-transform: uppercase; letter-spacing: 0.08em; }
.et_pb_text ul { padding-left: 1.2em; margin-bottom: var(--gvid-abstand-m); }
.et_pb_text li { margin-bottom: var(--gvid-abstand-xs); }

/* --------------------------------------------------------------------------
 * Elemente aus dem Logo: die Blume des Lebens als Muster und als Kuppel, der
 * gepinselte Kreis als runde Bildform und Ring, «YOGA & KLANG» als Eyebrow mit
 * Strich, die drei Punkte als Trenner. Die SVG erzeugt design.py nach assets/.
 * Angesprochen über Divis Preset-Klassen, darum ohne zusätzliche Klassen im Markup.
 * -------------------------------------------------------------------------- */

/* Muster: nahtlose Kachel der Blume des Lebens, hinter dem Inhalt. */
.preset--module--divi-section--muster,
.preset--module--divi-section--muster-dunkel { position: relative; background-repeat: repeat; background-position: center; }
.preset--module--divi-section--muster { background-image: url("assets/muster-blume.svg"); background-size: 132px auto; }
.preset--module--divi-section--muster-dunkel { background-image: url("assets/muster-blume-hell.svg"); background-size: 132px auto; }
@media (max-width: 767px) { .preset--module--divi-section--muster, .preset--module--divi-section--muster-dunkel { background-size: 96px auto; } }

/* Kuppel: das Ornament des Logos, oben mittig in einer Sektion, hinter dem Inhalt. */
.ws-kuppel { position: relative; overflow: hidden; }
.ws-kuppel::before {
	content: ""; position: absolute; top: -8%; left: 50%; transform: translateX(-50%);
	width: min(760px, 92vw); aspect-ratio: 1; z-index: 0; pointer-events: none;
	background: url("assets/kuppel-blume.svg") no-repeat center top / contain; }
.ws-kuppel--hell::before { background-image: url("assets/kuppel-blume-hell.svg"); }
.ws-kuppel > .et_pb_row { position: relative; z-index: 1; }

/* Runde Bilder wie der Logokreis. Bilder werden quadratisch zugeschnitten (bilder.py «1:1»),
   der Zuschnitt hier sichert Abweichungen ab. Der Ring sitzt mit Abstand um das Bild. */
.preset--module--divi-image--bild-kreis .et_pb_image_wrap,
.preset--module--divi-image--bild-kreis-ring .et_pb_image_wrap { border-radius: 999px; overflow: hidden; display: block; }
.preset--module--divi-image--bild-kreis img,
.preset--module--divi-image--bild-kreis-ring img { border-radius: 999px; aspect-ratio: 1; object-fit: cover; width: 100%; }
.preset--module--divi-image--bild-kreis-ring .et_pb_image_wrap { outline: 2px solid var(--gcid-akzent); outline-offset: 12px; }
.preset--module--divi-image--bild-kreis-ring { padding: 14px; }
@media (max-width: 980px) { .preset--module--divi-image--bild-kreis-ring .et_pb_image_wrap { outline-offset: 8px; } }

/* Eyebrow: gesperrte Versalien mit Strich davor, wie «— YOGA & KLANG —» im Logo. */
.preset--module--divi-heading--eyebrow .et_pb_module_header,
.preset--module--divi-heading--eyebrow-auf-dunkel .et_pb_module_header { display: flex; align-items: center; gap: 14px; }
.preset--module--divi-heading--eyebrow .et_pb_module_header::before,
.preset--module--divi-heading--eyebrow-auf-dunkel .et_pb_module_header::before {
	content: ""; flex: 0 0 auto; width: 28px; height: 1px; background: currentColor; opacity: 0.8; }

/* Trenner: die drei Punkte des Logos, zentriert zwischen zwei Sektionen. */
.ws-punkte, .ws-punkte p { margin: 0; text-align: center; }
.ws-punkte span { display: inline-block; width: 52px; height: 10px;
	background: url("assets/punkte.svg") no-repeat center / contain; }
.ws-punkte--hell span { background-image: url("assets/punkte-hell.svg"); }

/* Karten mit rundem Bild: Bild und Text zentriert, Titel ohne Silbentrennung. */
.ws-kreiskarten .et_pb_column { text-align: center; }
.ws-kreiskarten .et_pb_image { margin-left: auto; margin-right: auto; }
.ws-kreiskarten .et_pb_heading .et_pb_module_header { hyphens: manual; overflow-wrap: break-word; }
.ws-kreiskarten .et_pb_heading a { color: inherit; text-decoration: none; }
.ws-kreiskarten .et_pb_heading a:hover { color: var(--gcid-primaer); }

/* Kontaktformular (Contact Form 7 im Divi-Modul). Button kommt aus dem Preset, Felder hier. Rand sichtbar auf Hintergrund und Weiss. */
.et_pb_contact_form_7 .ws-form p { margin-bottom: var(--gvid-abstand-s); }
.et_pb_contact_form_7 .ws-form label { display: block; font-weight: 600; color: var(--gcid-text); }
.et_pb_contact_form_7 .ws-form input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]), .et_pb_contact_form_7 .ws-form textarea, .et_pb_contact_form_7 .ws-form select {
	width: 100%; margin-top: var(--gvid-abstand-xs); padding: 14px 16px; font: inherit; font-size: 17px; color: var(--gcid-text); background-color: var(--gcid-weiss);
	border: 1px solid color-mix(in srgb, var(--gcid-text-hell) 60%, var(--gcid-weiss)); border-radius: var(--gvid-radius-klein); box-sizing: border-box; -webkit-appearance: none; appearance: none; }
.et_pb_contact_form_7 .ws-form textarea { min-height: 160px; }
.et_pb_contact_form_7 .ws-form input:focus, .et_pb_contact_form_7 .ws-form select:focus, .et_pb_contact_form_7 .ws-form textarea:focus { outline: 2px solid var(--gcid-primaer); outline-offset: 1px; border-color: var(--gcid-primaer); }
.et_pb_contact_form_7 .ws-form .wpcf7-not-valid { border-color: var(--gcid-warnung); }
.et_pb_contact_form_7 .ws-form .wpcf7-not-valid-tip { color: var(--gcid-warnung); font-size: 15px; margin-top: var(--gvid-abstand-xs); }
.et_pb_contact_form_7 .ws-form__hinweis { font-size: 15px; color: var(--gcid-text-hell); }
.et_pb_contact_form_7 .ws-form .wpcf7-spinner { display: none; }
.et_pb_contact_form_7 .ws-form .wpcf7-response-output { margin: var(--gvid-abstand-m) 0 0; padding: 14px 16px; border: 1px solid var(--gcid-flaeche); border-radius: var(--gvid-radius-klein); background: var(--gcid-flaeche); }
.et_pb_contact_form_7 .ws-form .wpcf7-form.sent .wpcf7-response-output { border-color: var(--gcid-primaer); background: var(--gcid-akzent); color: var(--gcid-text); }