/* grit berger · FINALER LOOK — "Tief & meditativ" (dunkel) FESTGESCHRIEBEN: enthält nur diesen einen Look. Der Umschalter ist nicht mehr nötig — das Attribut data-grit-look am wird nicht mehr gebraucht. Generiert aus grit-umschalter.css (Stand: dieser Datei). Farben später hier oder in custom.css anpassen. */ :root { --grit-bg: #1E2230; --grit-bg-alt: #242A3A; --grit-surface: #2A3142; --grit-primary: #C9A24B; --grit-primary-dark: #B58E38; --grit-accent: #C9A24B; --grit-ochre: #C9A24B; --grit-text-strong: #F1ECE0; --grit-text: #CFC8B8; --grit-muted: #9B958A; --grit-line: rgba(255,255,255,0.13); --grit-radius: 12px; --grit-radius-lg: 18px; --grit-shadow-sm: 0 2px 14px rgba(0,0,0,0.30); --grit-shadow: 0 20px 50px rgba(0,0,0,0.40); --grit-shadow-lg: 0 30px 80px rgba(0,0,0,0.50); --grit-cta-bg: #161A24; --grit-on-dark: #F1ECE0; } /* ========================================================= grit berger — Divi Custom CSS (Struktur) Klassen-System: in Divi unter "CSS-Klasse" am Modul eintragen. Schriften: Cormorant Garamond (Überschriften), Mulish (Text) in Divi → Website → Typografie global setzen. DIVI 5 HINWEIS: Divi 5 behält aus Rückwärtskompatibilität die .et_pb_*-Klassen im Frontend bei — dieses CSS greift also auch dort. Zur Sicherheit sind die Selektoren zusätzlich auf generische h2–h4 / img / p innerhalb der grit-…-Container erweitert, falls sich die innere Verschachtelung ändert. Für zusammengesetzte Bausteine (Kacheln, Kurs-Karten, FAQ …) sind die selbst-enthaltenen Code-Module unter divi/snippets/ die robusteste Wahl — sie sind komplett unabhängig von der Divi-Version. ========================================================= */ /* ---- Seiten-Hintergrund an den Look koppeln ---- Sonst bleibt der Body-/Seiten-Hintergrund auf der Theme-Farbe stehen und wechselt NICHT mit dem Umschalter. Wir setzen Body + ALLE gängigen Divi-4- und Divi-5-Wrapper auf die Look-Variable. Im dunklen Look auch die Standard-Textfarbe aufhellen. */ /* WICHTIG: Diese GLOBALEN Regeln sind bewusst vom Divi-Builder ausgenommen (body.et-fb = Visual Builder, body.et-bfb = Backend-Builder). Sonst würden auch die Bedienfelder des Builders eingefärbt und unlesbar. */ body:not(.et-fb):not(.et-bfb):not(.wp-admin), body:not(.et-fb):not(.et-bfb):not(.wp-admin) #page-container, body:not(.et-fb):not(.et-bfb):not(.wp-admin) #et-main-area, body:not(.et-fb):not(.et-bfb):not(.wp-admin) #main-content, body:not(.et-fb):not(.et-bfb):not(.wp-admin) #et-boc, body:not(.et-fb):not(.et-bfb):not(.wp-admin) .et-l, body:not(.et-fb):not(.et-bfb):not(.wp-admin) .et-l--body, body:not(.et-fb):not(.et-bfb):not(.wp-admin) .et-l--post, body:not(.et-fb):not(.et-bfb):not(.wp-admin) .et_builder_inner_content, body:not(.et-fb):not(.et-bfb):not(.wp-admin) .et-boc-inner, body:not(.et-fb):not(.et-bfb):not(.wp-admin) .et_pb_section:not(.grit-bg-alt):not(.grit-surface):not(.grit-cta-bg):not([style*="background"]) { background-color: var(--grit-bg) !important; } body:not(.et-fb):not(.et-bfb):not(.wp-admin), body:not(.et-fb):not(.et-bfb):not(.wp-admin) #main-content { color: var(--grit-text); } /* Dunkler Look: Überschriften hell — Divi setzt sonst ein festes #333. Nur im Seiteninhalt, NICHT in der Builder-Oberfläche. */ body:not(.et-fb):not(.et-bfb):not(.wp-admin) h1, body:not(.et-fb):not(.et-bfb):not(.wp-admin) h2, body:not(.et-fb):not(.et-bfb):not(.wp-admin) h3, body:not(.et-fb):not(.et-bfb):not(.wp-admin) h4, body:not(.et-fb):not(.et-bfb):not(.wp-admin) h5, body:not(.et-fb):not(.et-bfb):not(.wp-admin) h6, body:not(.et-fb):not(.et-bfb):not(.wp-admin) .et_pb_module_header, body:not(.et-fb):not(.et-bfb):not(.wp-admin) .et_pb_text_inner h1, body:not(.et-fb):not(.et-bfb):not(.wp-admin) .et_pb_text_inner h2, body:not(.et-fb):not(.et-bfb):not(.wp-admin) .et_pb_text_inner h3, body:not(.et-fb):not(.et-bfb):not(.wp-admin) .et_pb_heading_container h1, body:not(.et-fb):not(.et-bfb):not(.wp-admin) .et_pb_heading_container h2, body:not(.et-fb):not(.et-bfb):not(.wp-admin) .et_pb_heading_container h3 { color: var(--grit-text-strong) !important; } /* Ausnahme: auf dem dunklen CTA-Band bleibt die eigene helle Farbe */ html .grit-cta-bg h1, html .grit-cta-bg h2, html .grit-cta-bg h3 { color: var(--grit-on-dark) !important; } /* Google Fonts (falls nicht über Divi geladen) */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Mulish:wght@300;400;500;600;700&display=swap'); /* ---- Stapel-Reihenfolge (z-index) ---- grit-front = nach vorne (klickbar), grit-back = nach hinten. z-index wirkt nur auf positionierte Elemente → position:relative ist dabei. */ .grit-front { position: relative !important; z-index: 10 !important; } .grit-back { position: relative !important; z-index: 0 !important; } /* ---- Allgemeine Marken-Hilfsklassen ---- */ .grit-eyebrow { font-family: "Mulish", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--grit-primary); display: inline-flex; align-items: center; gap: 12px; } .grit-eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--grit-primary); display: inline-block; } /* Buttons (oder Divi-Buttons global an diese Werte angleichen) */ .grit-btn, a.grit-btn { display: inline-flex; align-items: center; gap: 10px; font-family: "Mulish", sans-serif; font-weight: 600; font-size: 15px; padding: 15px 28px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform .25s ease, background .25s ease, box-shadow .25s ease; } .grit-btn-primary { background: var(--grit-primary); color: #fff; box-shadow: var(--grit-shadow-sm); } .grit-btn-primary:hover { background: var(--grit-primary-dark); transform: translateY(-2px); box-shadow: var(--grit-shadow); } .grit-btn-ghost { background: transparent; color: var(--grit-text-strong); border-color: var(--grit-line); } .grit-btn-ghost:hover { background: var(--grit-surface); transform: translateY(-2px); } /* ---- Full-Bleed-Hero mit überlappender Karte ---- Aufbau in Divi: Fullwidth-Section (Klasse grit-hero) mit Hintergrundbild, darunter eine normale Section/Row mit Klasse grit-hero-wrap, darin eine einspaltige Row mit Klasse grit-hero-card. */ .grit-hero .et_pb_fullwidth_header, .grit-hero { min-height: 60vh; } .grit-hero-wrap { position: relative; } .grit-hero-card { background: var(--grit-surface) !important; border-radius: var(--grit-radius-lg); box-shadow: var(--grit-shadow-lg); padding: 46px 52px !important; max-width: 680px; margin-top: -150px !important; position: relative; z-index: 3; } .grit-hero-card h1, .grit-hero-card h2 { font-family: "Cormorant Garamond", serif; color: var(--grit-text-strong); line-height: 1.05; } .grit-hero-card .grit-accent { color: var(--grit-primary); font-style: italic; } .grit-aside { margin-top: 22px; font-size: 14.5px; color: var(--grit-muted); border-top: 1px solid var(--grit-line); padding-top: 16px; } .grit-aside a { color: var(--grit-primary); font-weight: 600; } @media (max-width: 980px){ .grit-hero-card { margin-top: -90px !important; padding: 30px 26px !important; } } /* ---- Hero-Card (selbst-enthaltener Code-Modul-Hero, Klassen grit-herocard…) ---- Für die fertigen Snippets divi/snippets/hero-card*.html. Liegt hier global, damit alle drei Hero-Code-Module (Mediation/Yoga/Ayurveda) nur HTML brauchen. */ .grit-herocard { position: relative; } .grit-herocard__media { width: 100%; height: var(--hero-h,64vh); overflow: hidden; } .grit-herocard__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .grit-herocard__wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; position: relative; } .grit-herocard__panel { background: var(--grit-surface); color: var(--grit-text); border-radius: var(--grit-radius-lg); box-shadow: var(--grit-shadow-lg); padding: 46px 52px; max-width: 660px; margin-top: -150px; position: relative; z-index: 3; } .grit-herocard__panel h1 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; color: var(--grit-text-strong); line-height: 1.04; font-size: clamp(38px,5vw,62px); letter-spacing: -.01em; margin: .12em 0 .35em; } .grit-herocard__panel .grit-accent { color: var(--grit-primary); font-style: italic; } .grit-herocard__lead { font-family: "Mulish", sans-serif; font-size: 18px; color: var(--grit-muted); line-height: 1.6; max-width: 46ch; margin: 0; } .grit-herocard__row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; } .grit-herocard .grit-btn { text-decoration: none; } @media (max-width: 980px){ .grit-herocard__media { height: var(--hero-h-m,46vh); } .grit-herocard__panel { margin-top: -90px; padding: 30px 26px; } } /* ---- Drei-Wege-Kacheln (Divi: 3 Blurbs mit Klasse grit-way) ---- */ .grit-way { background: var(--grit-surface) !important; border: 1px solid var(--grit-line); border-radius: var(--grit-radius-lg); overflow: hidden; height: 100%; transition: transform .35s ease, box-shadow .35s ease; } .grit-way:hover { transform: translateY(-6px); box-shadow: var(--grit-shadow); } .grit-way .et_pb_main_blurb_image { margin: 0 !important; } /* Bild: Divi-4 (.et_pb_main_blurb_image img) + Divi-5/generisch (jedes img) */ .grit-way .et_pb_main_blurb_image img, .grit-way img { width: 100%; height: 200px; object-fit: cover; border-radius: 0; } .grit-way .et_pb_blurb_content { max-width: none; padding: 24px 26px 28px; text-align: left; } /* Überschrift: Divi-4 (.et_pb_module_header) + generisch (h2–h4) */ .grit-way h2, .grit-way h3, .grit-way h4, .grit-way .et_pb_module_header { font-family: "Cormorant Garamond", serif; font-size: 27px; color: var(--grit-text-strong); } .grit-way, .grit-way p { color: var(--grit-muted); font-family: "Mulish", sans-serif; } /* ---- Pills (Eigenschaften) ---- */ .grit-pills { display: flex; flex-wrap: wrap; gap: 10px; } .grit-pill { display: inline-block; padding: 8px 16px; border: 1px solid var(--grit-line); border-radius: 999px; font-size: 14px; color: var(--grit-text); font-family: "Mulish", sans-serif; } /* ---- Ablauf-Schritte (Divi: nummerierte Blurbs/Text mit grit-step) ---- */ .grit-step { display: flex; gap: 20px; padding: 18px 0; border-top: 1px solid var(--grit-line); } .grit-step .grit-n { font-family: "Cormorant Garamond", serif; font-size: 20px; color: var(--grit-primary); width: 38px; height: 38px; border: 1px solid var(--grit-line); border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; } .grit-step h2, .grit-step h3, .grit-step h4 { font-family: "Cormorant Garamond", serif; font-size: 21px; color: var(--grit-text-strong); margin: 0 0 3px; } .grit-step p { font-size: 15.5px; color: var(--grit-muted); margin: 0; } /* ---- Zielgruppen / Karten (Divi: Blurbs mit grit-aud) ---- */ .grit-aud { border: 1px solid var(--grit-line); border-radius: var(--grit-radius); padding: 34px 30px; background: var(--grit-surface) !important; height: 100%; transition: border-color .3s ease, transform .3s ease; } .grit-aud:hover { border-color: var(--grit-accent); transform: translateY(-4px); } .grit-aud h2, .grit-aud h3, .grit-aud h4 { font-family: "Cormorant Garamond", serif; font-size: 24px; color: var(--grit-text-strong); } .grit-aud .et_pb_main_blurb_image { color: var(--grit-accent); } /* ---- FAQ (Divi 4: Accordion/Toggle .et_pb_toggle. In Divi 5 ggf. abweichend → im Zweifel das FAQ als selbst-enthaltenes Code-Modul bauen.) ---- */ .grit-faq .et_pb_toggle { border: none; border-top: 1px solid var(--grit-line); background: transparent; padding: 0; } .grit-faq .et_pb_toggle:last-child { border-bottom: 1px solid var(--grit-line); } .grit-faq .et_pb_toggle_title { font-family: "Cormorant Garamond", serif; font-size: 24px; color: var(--grit-text-strong); padding: 24px 0; } .grit-faq .et_pb_toggle_content { color: var(--grit-muted); font-family: "Mulish", sans-serif; font-size: 17px; } .grit-faq .et_pb_toggle_title::before, .grit-faq .et_pb_toggle_open .et_pb_toggle_title::before { color: var(--grit-primary); } /* ---- Kurs-Karte (Divi: 2-Spalten-Row, Klasse grit-course) ---- */ .grit-course { background: var(--grit-surface) !important; border: 1px solid var(--grit-line); border-radius: var(--grit-radius-lg); overflow: hidden; box-shadow: var(--grit-shadow-sm); } .grit-course-meta { background: var(--grit-bg-alt) !important; border-radius: 0; } .grit-course h2, .grit-course h3, .grit-course .et_pb_module_header { font-family: "Cormorant Garamond", serif; color: var(--grit-text-strong); } .grit-course .grit-tag { font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--grit-primary); } .grit-price-amt { font-family: "Cormorant Garamond", serif; font-size: 27px; color: var(--grit-primary); } /* ---- Rezept-Karten (Divi: Blurbs mit grit-recipe) ---- */ .grit-recipe { background: var(--grit-surface) !important; border: 1px solid var(--grit-line); border-radius: var(--grit-radius); overflow: hidden; height: 100%; } .grit-recipe img { width: 100%; height: 150px; object-fit: cover; } .grit-recipe h3, .grit-recipe h4 { font-family: "Cormorant Garamond", serif; font-size: 21px; color: var(--grit-text-strong); } .grit-recipe .grit-cat { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--grit-accent); } /* ---- Preis-Karten (Divi: Text/Blurb mit grit-pricecard) ---- */ .grit-pricecard { background: var(--grit-surface) !important; border: 1px solid var(--grit-line); border-radius: var(--grit-radius-lg); padding: 34px 34px 36px; height: 100%; } .grit-pricecard h2, .grit-pricecard h3 { font-family: "Cormorant Garamond", serif; font-size: 25px; color: var(--grit-text-strong); } .grit-pricecard ul { list-style: none; padding: 0; margin: 14px 0 0; } .grit-pricecard li { font-size: 15px; color: var(--grit-text); padding-left: 24px; position: relative; margin-bottom: 9px; } .grit-pricecard li::before { content: "✓"; position: absolute; left: 0; color: var(--grit-accent); font-weight: 700; } /* ---- CTA-Band (Divi: Section mit Klasse grit-cta) ---- */ .grit-cta { background: var(--grit-cta-bg) !important; text-align: center; } .grit-cta h2 { font-family: "Cormorant Garamond", serif; color: var(--grit-on-dark) !important; } .grit-cta p { color: rgba(255,255,255,0.85) !important; } /* ---- About-Band (Divi: Section mit Klasse grit-about) ---- */ .grit-about { background: var(--grit-cta-bg) !important; } .grit-about h2, .grit-about .grit-sign { color: var(--grit-on-dark) !important; font-family: "Cormorant Garamond", serif; } .grit-about p { color: rgba(255,255,255,0.86) !important; } .grit-sign { font-style: italic; font-size: 30px; } /* ---- Sektions-Hintergründe (Klasse an der Divi-SECTION) ---- Folgen automatisch dem Umschalter, weil sie an die Variablen gekoppelt sind. */ .grit-bg { background: var(--grit-bg) !important; } /* Standard-Seitenton */ .grit-bg-alt { background: var(--grit-bg-alt) !important; } /* ruhiger Sand-/Abhebe-Ton */ .grit-surface { background: var(--grit-surface) !important; } /* Karten-/Weißton */ .grit-cta-bg { background: var(--grit-cta-bg) !important; } /* dunkles Band (Salbei/Nacht) */ /* Auf dunklem Band (grit-cta-bg) automatisch helle Schrift, damit eigener Text/Überschriften nicht „verschwinden". */ .grit-cta-bg, .grit-cta-bg p, .grit-cta-bg li { color: var(--grit-on-dark) !important; } .grit-cta-bg h1, .grit-cta-bg h2, .grit-cta-bg h3, .grit-cta-bg h4, .grit-cta-bg h5, .grit-cta-bg h6 { color: var(--grit-on-dark) !important; } /* ---- Überschriften/Text, die dem Look folgen (Klasse am Text-MODUL) ---- Lösung gegen „H1/H3 wird im Dunkel-Look falsch": eine im Modul gesetzte FESTE Farbe (oder Divis eigene Überschrift-Farbe) wechselt nie mit. Diese Klassen binden die Farbe an die Look-Variable. WICHTIG: html[data-grit-look]-Präfix hebt die Spezifität bewusst an, damit diese Regeln Divis eigene Überschrift-Farbe sicher überschreiben. */ html .grit-heading, html .grit-heading h1, html .grit-heading h2, html .grit-heading h3, html .grit-heading h4, html .grit-heading h5, html .grit-heading h6, html .grit-heading .et_pb_module_header, html .grit-heading .et_pb_text_inner h1, html .grit-heading .et_pb_text_inner h2, html .grit-heading .et_pb_text_inner h3, html .grit-heading .et_pb_text_inner h4 { color: var(--grit-text-strong) !important; } /* ROBUST: Jede Überschrift INNERHALB einer grit-aud-Karte folgt dem Look, auch ohne grit-heading am Modul und selbst wenn das Modul eine feste (dunkle) Überschrift-Farbe gesetzt hat. Deckt Text- UND Heading-Modul ab. */ html .grit-aud h1, html .grit-aud h2, html .grit-aud h3, html .grit-aud h4, html .grit-aud h5, html .grit-aud h6, html .grit-aud .et_pb_text_inner h1, html .grit-aud .et_pb_text_inner h2, html .grit-aud .et_pb_text_inner h3, html .grit-aud .et_pb_module_header, html .grit-aud .et_pb_heading_container h1, html .grit-aud .et_pb_heading_container h2, html .grit-aud .et_pb_heading_container h3 { color: var(--grit-text-strong) !important; } /* Gleiches Sicherheitsnetz für das Divi-5-Heading-Modul mit grit-heading */ html .grit-heading .et_pb_heading_container h1, html .grit-heading .et_pb_heading_container h2, html .grit-heading .et_pb_heading_container h3, html .grit-heading .et_pb_heading_container h4 { color: var(--grit-text-strong) !important; } html .grit-text, html .grit-text p, html .grit-text li, html .grit-text .et_pb_text_inner { color: var(--grit-text) !important; } html .grit-text-muted { color: var(--grit-muted) !important; } html .grit-text-primary, html .grit-text-primary h1, html .grit-text-primary h2, html .grit-text-primary h3 { color: var(--grit-primary) !important; } /* Große Statistik-/Akzentzahl (Klasse am Modul oder Element) */ html .grit-stat, html .grit-stat h1, html .grit-stat h2, html .grit-stat h3, html .grit-stat .et_pb_number_counter .percent, html .grit-stat .et_pb_number_counter .percent p { color: var(--grit-primary) !important; } /* ---- Karten allgemein abrunden ---- */ .grit-card { background: var(--grit-surface) !important; border: 1px solid var(--grit-line); border-radius: var(--grit-radius-lg); box-shadow: var(--grit-shadow-sm); } /* ============================================================ FORMULARE · Klasse grit-form am Formular-MODUL (nicht an der Spalte!) Divi-5-fest: spricht generische Felder, Fluent Forms, Contact Form 7 UND Divis EIGENES Kontaktformular-Modul an. !important schlägt Divis Standard-Stile (die sonst gewinnen, weil spezifischer). ============================================================ */ /* Rahmen/Karte um das Formular */ .grit-form, .grit-form .et_pb_contact_form_container, .grit-form.et_pb_contact_form_container { background: var(--grit-surface) !important; border: 1px solid var(--grit-line) !important; border-radius: var(--grit-radius-lg) !important; box-shadow: var(--grit-shadow) !important; padding: 34px 34px 30px !important; } /* Divi setzt am Container manchmal noch eine eigene Innen-Form – die neutralisieren */ .grit-form .et_pb_contact { margin: 0 !important; } .grit-form label, .grit-form .et_pb_contact_field label { display: block; font-family: "Mulish", sans-serif; font-size: 13px; font-weight: 600; color: var(--grit-text-strong); margin-bottom: 6px; } /* --- Eingabefelder (alle Quellen) --- */ .grit-form input[type="text"], .grit-form input[type="email"], .grit-form input[type="tel"], .grit-form input[type="number"], .grit-form select, .grit-form textarea, .grit-form .ff-el-form-control, .grit-form .wpcf7-form-control:not(.wpcf7-submit):not([type="checkbox"]):not([type="radio"]):not(.wpcf7-checkbox):not(.wpcf7-acceptance):not(.wpcf7-radio), .grit-form .et_pb_contact_field input.input, .grit-form .et_pb_contact_field .input[type="text"], .grit-form .et_pb_contact_field textarea, .grit-form .et_pb_contact_field select { width: 100% !important; box-sizing: border-box !important; font-family: "Mulish", sans-serif !important; font-size: 15.5px !important; color: var(--grit-text-strong) !important; background: var(--grit-bg) !important; border: 1px solid var(--grit-line) !important; border-radius: 12px !important; padding: 12px 14px !important; margin-bottom: 16px !important; transition: border-color .2s ease, box-shadow .2s ease !important; } .grit-form textarea, .grit-form .et_pb_contact_field textarea { min-height: 130px !important; resize: vertical; } /* Divi-Felder stehen oft in 2 Spalten – Abstand sauber halten */ .grit-form .et_pb_contact_field { padding: 0 !important; margin-bottom: 0 !important; } /* --- Fokus --- */ .grit-form input:focus, .grit-form select:focus, .grit-form textarea:focus, .grit-form .ff-el-form-control:focus, .grit-form .et_pb_contact_field input.input:focus, .grit-form .et_pb_contact_field textarea:focus { outline: none !important; border-color: var(--grit-primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--grit-primary) 18%, transparent) !important; } .grit-form input::placeholder, .grit-form textarea::placeholder, .grit-form .et_pb_contact_field input::placeholder, .grit-form .et_pb_contact_field textarea::placeholder { color: var(--grit-muted) !important; opacity: .8; } /* Datenschutz-/Checkbox-Zeile — voller Block: der Hintergrund deckt Checkbox UND alle Textzeilen ab (auch bei mehrzeiligem Umbruch). */ /* ============================================================ DATENSCHUTZ-CHECKBOX (CF7) Deckt BEIDE Varianten ab: [acceptance] UND [checkbox]. Der Hintergrund sitzt auf .wpcf7-list-item bzw. dem label — das sind die Elemente, die Checkbox UND allen Text umschliessen. ============================================================ */ /* Wrapper-Ebenen: nur Layout, KEIN Hintergrund */ .grit-form .wpcf7-form-control-wrap, .grit-form .wpcf7-acceptance, .grit-form .wpcf7-checkbox, .grit-form .grit-check, .grit-form .ff-el-form-check { display: block !important; width: 100%; box-sizing: border-box; background: none !important; border: 0 !important; padding: 0 !important; float: none !important; } .grit-form .wpcf7-acceptance, .grit-form .wpcf7-checkbox { margin: 4px 0 18px !important; } /* HINTERGRUND: .wpcf7-list-item umschliesst Checkbox + Textspan */ .grit-form .wpcf7-acceptance .wpcf7-list-item, .grit-form .wpcf7-checkbox .wpcf7-list-item { display: flex !important; align-items: flex-start; gap: 10px; width: 100%; box-sizing: border-box; margin: 0 !important; float: none !important; background: var(--grit-bg-alt) !important; border: 1px solid var(--grit-line) !important; border-radius: var(--grit-radius) !important; padding: 14px 16px !important; } /* Variante MIT label (acceptance): label füllt den Platz, kein eigener Rahmen */ .grit-form .wpcf7-acceptance .wpcf7-list-item label, .grit-form .wpcf7-checkbox .wpcf7-list-item label, .grit-form .grit-check label, .grit-form .ff-el-form-check label { display: flex !important; gap: 10px; align-items: flex-start; width: 100%; box-sizing: border-box; margin: 0 !important; background: none !important; border: 0 !important; padding: 0 !important; font-size: 13.5px; font-weight: 400; line-height: 1.45; color: var(--grit-muted); } /* Checkbox selbst */ .grit-form .wpcf7-list-item input[type="checkbox"], .grit-form .grit-check input[type="checkbox"] { width: auto !important; min-width: 0 !important; margin: 2px 0 0 !important; flex: 0 0 auto; accent-color: var(--grit-primary); } /* Textzeile */ .grit-form .wpcf7-list-item-label { font-size: 13.5px; font-weight: 400; line-height: 1.45; color: var(--grit-muted); } /* --- Submit-Button (grit-Look) --- */ .grit-form button[type="submit"], .grit-form input[type="submit"], .grit-form .ff-btn-submit, .grit-form .wpcf7-submit, .grit-form .et_pb_contact_submit, .grit-form .et_pb_button { display: inline-flex !important; align-items: center; gap: 9px; cursor: pointer; font-family: "Mulish", sans-serif !important; font-weight: 600 !important; font-size: 15px !important; padding: 14px 28px !important; border-radius: 999px !important; border: 1px solid transparent !important; background: var(--grit-primary) !important; color: #fff !important; transition: background .25s ease, transform .2s ease !important; } /* Divi-Buttons tragen ein ::after-Pfeil-Icon – ausblenden, wir nutzen eigenen Look */ .grit-form .et_pb_button::after { display: none !important; } .grit-form button[type="submit"]:hover, .grit-form input[type="submit"]:hover, .grit-form .ff-btn-submit:hover, .grit-form .wpcf7-submit:hover, .grit-form .et_pb_contact_submit:hover, .grit-form .et_pb_button:hover { background: var(--grit-primary-dark) !important; transform: translateY(-2px); } /* Submit deaktiviert (bis Datenschutz angehakt) — wird per JS via .grit-disabled gesetzt */ .grit-form .wpcf7-submit.grit-disabled, .grit-form input[type="submit"].grit-disabled, .grit-form button[type="submit"].grit-disabled, .grit-form .et_pb_button.grit-disabled { background: var(--grit-line) !important; color: var(--grit-muted) !important; cursor: not-allowed !important; opacity: .65; pointer-events: none; transform: none !important; } /* ---- Umschalter: FESTGESCHRIEBEN → dauerhaft ausblenden ---- Der Look kommt jetzt fest aus dieser Datei. Falls das HTML des Schalters noch irgendwo in WordPress liegt (Code-Modul, Integration, footer.php, Snippets-Plugin), wird es hiermit unsichtbar und unklickbar. */ #grit-look-switch, .look-switch { display: none !important; } /* ---- Divi-Builder-Oberfläche schützen ---- Falls eine Regel doch in den Builder durchschlägt: dessen eigene UI behält ihre Standardfarben. */ /* ---- Divi-Builder / WP-Backend ---- Die globalen Regeln oben sind bereits per :not(.wp-admin):not(.et-fb):not(.et-bfb) ausgenommen. KEIN pauschales "revert" auf * — das würde Divis eigene Admin-Oberflaeche zerstoeren. Der saubere Weg: die Datei gar nicht im Backend laden (functions.php: Hook wp_enqueue_scripts, nicht admin_*). */ /* --- Korrektur: generische Feld-Optik NICHT auf Checkbox-Container --- */ .grit-form .wpcf7-checkbox, .grit-form .wpcf7-acceptance, .grit-form span.wpcf7-form-control.wpcf7-checkbox, .grit-form span.wpcf7-form-control.wpcf7-acceptance { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; } /* --- Korrektur: Checkbox sichtbar und richtig dimensioniert --- */ .grit-form .wpcf7-list-item input[type="checkbox"], .grit-form .grit-check input[type="checkbox"] { -webkit-appearance: checkbox !important; appearance: checkbox !important; width: 17px !important; height: 17px !important; min-width: 17px !important; max-width: 17px !important; flex: 0 0 17px !important; margin: 2px 0 0 !important; padding: 0 !important; background: #fff !important; border: 1px solid var(--grit-line) !important; border-radius: 4px !important; box-shadow: none !important; accent-color: var(--grit-primary); cursor: pointer; opacity: 1 !important; } /* ============================================================ REZEPT-VORLAGE (zweispaltig) — Klassen für Divi-Module Aufbau je Rezept: Sektion/Zeile .grit-rz (Trennlinie nach oben) Bild-Modul .grit-rz-hero Text-Modul .grit-rz-kopf (Kategorie, Titel, Beschreibung) Text-Modul .grit-rz-meta (Angaben-Zeile, freiwillig) LINKE Spalte .grit-rz-links (bleibt beim Scrollen stehen) Text-Modul .grit-rz-zutaten RECHTE Spalte Text-Modul .grit-rz-schritte Text-Modul .grit-rz-tipps Zeile .grit-rz-bilder (freiwillig, weitere Bilder) ============================================================ */ /* Wrapper je Rezept: Abstand + Trennlinie zum vorherigen Rezept */ .grit-rz { padding-top: 48px !important; } .grit-rz + .grit-rz { margin-top: 48px !important; border-top: 1px solid var(--grit-line) !important; } /* Titelbild des Rezepts */ .grit-rz-hero img { border-radius: var(--grit-radius-lg) !important; border: 1px solid var(--grit-line); display: block; width: 100%; } /* Kopf: Kategorie, Titel, kurze Beschreibung */ .grit-rz-kopf .grit-rz-cat, .grit-rz-cat { font-family: "Mulish", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--grit-accent) !important; margin: 0 0 10px !important; } html[data-grit-look] .grit-rz-kopf h2, html[data-grit-look] .grit-rz-kopf h3, html[data-grit-look] .grit-rz-kopf h4 { font-family: "Cormorant Garamond", Georgia, serif !important; font-weight: 600 !important; font-size: clamp(28px, 3.6vw, 40px) !important; color: var(--grit-text-strong) !important; line-height: 1.06 !important; margin: 0 0 12px !important; } .grit-rz-kopf p { font-family: "Mulish", sans-serif; font-size: 17.5px; color: var(--grit-muted); line-height: 1.65; margin: 0; max-width: 100ch; } /*max-width: 58ch;*/ /* Angaben-Zeile (Zeit · Portionen · Wirkt auf) */ .grit-rz-meta { border-top: 1px solid var(--grit-line); border-bottom: 1px solid var(--grit-line); padding: 16px 0 !important; margin: 24px 0 0 !important; } .grit-rz-meta ul { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 10px 34px; } .grit-rz-meta li { font-family: "Mulish", sans-serif; font-size: 15.5px; color: var(--grit-text-strong); font-weight: 500; margin: 0 !important; } .grit-rz-meta strong { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--grit-muted); } /* Zwischentitel „Zutaten" / „Zubereitung" / „Tipps" */ html[data-grit-look] .grit-rz-zutaten h3, html[data-grit-look] .grit-rz-zutaten h4, html[data-grit-look] .grit-rz-zutaten h5, html[data-grit-look] .grit-rz-schritte h3, html[data-grit-look] .grit-rz-schritte h4, html[data-grit-look] .grit-rz-schritte h5, html[data-grit-look] .grit-rz-tipps h3, html[data-grit-look] .grit-rz-tipps h4, html[data-grit-look] .grit-rz-tipps h5 { font-family: "Cormorant Garamond", Georgia, serif !important; font-weight: 600 !important; font-size: 25px !important; color: var(--grit-text-strong) !important; margin: 0 0 16px !important; line-height: 1.15 !important; } /* Linke Spalte bleibt beim Scrollen stehen (Klasse an der SPALTE) */ .grit-rz-links { align-self: flex-start !important; position: sticky !important; top: 24px; z-index: 1; } /* Zutaten-Kasten */ .grit-rz-zutaten { background: var(--grit-bg-alt) !important; border: 1px solid var(--grit-line); border-radius: var(--grit-radius); padding: 26px 28px 28px !important; } .grit-rz-zutaten ul { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 9px; } .grit-rz-zutaten li { position: relative; padding-left: 22px !important; font-family: "Mulish", sans-serif; font-size: 15px; line-height: 1.5; color: var(--grit-text); margin: 0 !important; } .grit-rz-zutaten li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--grit-primary); } /* Zwischen-Überschrift in der Zutatenliste, z. B. „Für das Püree" */ .grit-rz-zutaten p { font-family: "Mulish", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--grit-muted); margin: 20px 0 10px !important; padding-top: 16px; border-top: 1px solid var(--grit-line); } .grit-rz-zutaten p:first-child { margin-top: 0 !important; padding-top: 0; border-top: 0; } /* Zubereitung: nummerierte Schritte */ .grit-rz-schritte ol { counter-reset: gritstep; list-style: none !important; margin: 0 !important; padding: 0 !important; } .grit-rz-schritte ol > li { counter-increment: gritstep; position: relative; padding: 0 0 22px 62px !important; margin: 0 0 22px !important; border-bottom: 1px solid var(--grit-line); font-family: "Mulish", sans-serif; font-size: 16.5px; line-height: 1.7; color: var(--grit-muted); } .grit-rz-schritte ol > li:last-child { border-bottom: 0; margin-bottom: 0 !important; padding-bottom: 0 !important; } .grit-rz-schritte ol > li::before { content: counter(gritstep); position: absolute; left: 0; top: -2px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--grit-line); color: var(--grit-primary); font-family: "Cormorant Garamond", Georgia, serif; font-size: 19px; display: grid; place-items: center; } .grit-rz-schritte strong, .grit-rz-schritte b { color: var(--grit-text-strong); font-weight: 600; } /* Tipps-Band */ .grit-rz-tipps { background: color-mix(in srgb, var(--grit-accent) 16%, transparent) !important; border: 1px solid color-mix(in srgb, var(--grit-accent) 42%, transparent) !important; border-radius: var(--grit-radius-lg) !important; padding: 30px 34px !important; margin-top: 34px !important; } .grit-rz-tipps ul { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 11px; } .grit-rz-tipps li { position: relative; padding-left: 26px !important; font-family: "Mulish", sans-serif; font-size: 16px; line-height: 1.65; color: var(--grit-muted); margin: 0 !important; } .grit-rz-tipps li::before { content: "\2022"; position: absolute; left: 2px; top: -2px; color: var(--grit-accent); font-weight: 700; font-size: 19px; } .grit-rz-tipps strong, .grit-rz-tipps b { color: var(--grit-text-strong); font-weight: 600; } /* weitere Bilder */ .grit-rz-bilder { margin-top: 30px !important; } .grit-rz-bilder img { border-radius: var(--grit-radius) !important; border: 1px solid var(--grit-line); display: block; width: 100%; } /* Mobil: Zutaten nicht mehr klebend */ @media (max-width: 980px){ .grit-rz-links { position: static !important; } .grit-rz { padding-top: 36px !important; } .grit-rz + .grit-rz { margin-top: 36px !important; } } /* ============================================================ GEWÄHLTE DARSTELLUNG DER REZEPTE ------------------------------------------------------------ Bildsprache : ZURÜCKHALTEND · kleines Foto ← Regeln unten Schritt-Rhythmus : KOMPAKT · dicht ← die Regeln unten Angaben-Zeile : wird gezeigt (Modul .grit-rz-meta einsetzen) Andere Wahl gewünscht? Diesen Block löschen (= Nummernkreise) oder durch die Variante aus der Anleitung ersetzen. ============================================================ */ .grit-rz-schritte ol > li{ padding: 0 0 12px 36px !important; margin: 0 0 12px !important; border-bottom: 0 !important; font-size: 15.5px; line-height: 1.6; } .grit-rz-schritte ol > li:last-child{ padding-bottom: 0 !important; margin-bottom: 0 !important; } .grit-rz-schritte ol > li::before{ width: 23px; height: 23px; top: 3px; border: 0; background: color-mix(in srgb, var(--grit-primary) 22%, transparent); color: var(--grit-text-strong); font-family: "Mulish", sans-serif; font-size: 12.5px; font-weight: 700; } /* Bildsprache: zurückhaltend — kleines, gerahmtes Foto */ .grit-rz-hero img{ height: 220px !important; object-fit: cover; border-radius: var(--grit-radius) !important; } /* ============================================================ VOLLE BREITE — Klasse grit-full an die SEKTION Hebt Divis Zeilen-Begrenzung und Innenabstände auf, damit ein Code-Modul (z. B. die Hero-Card) randlos über die ganze Breite läuft. ============================================================ */ .grit-full{ padding-left: 0 !important; padding-right: 0 !important; } .grit-full > .et_pb_row, .grit-full .et_pb_row{ width: 100% !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .grit-full .et_pb_column{ margin-right: 0 !important; width: 100% !important; } .grit-full .et_pb_module{ margin-bottom: 0 !important; }