/* ==========================================================================
   FOTOBIX · DESIGNSYSTEM
   Stand 2026-08-26 · gehört in Divi → Theme-Customizer → Zusätzliches CSS
   Unter menue-dropdown.css anhängen, nichts davon löschen.

   Aufbau:
   0  Schriften (lokal, kein Google-Aufruf)
   1  Primitive       – die rohen Farben
   2  Rollen          – was eine Farbe TUT  ← nur das hier verwenden
   3  Typografie      – fließende Größenskala
   4  Anwendung auf Divi
   5  Bedienbarkeit   – Fokus, Touch-Ziele, reduzierte Bewegung
   6  Hilfsklassen    – für neue Sektionen

   Ein Rebrand ist ein Austausch der zwölf Werte in Block 1.
   ========================================================================== */


/* == 0 · SCHRIFTEN =========================================================
   Liegen unter wp-content/uploads/fonts/ auf dem eigenen Server.
   Kein Aufruf an fonts.googleapis.com — DSGVO-relevant, nicht ändern.

   Drei Serifen liegen bereit. Gewählt wird unten bei --font-display;
   was dort nicht steht, wird vom Browser auch nicht geladen.
     Playfair Display   – elegant, hoher Strichkontrast   ← aktuell
     Cormorant Garamond – zarter, klassischer, feiner
     Fraunces           – warm, weich, leicht eigenwillig
   Zilla Slab ist raus: die kantigen Serifen wirkten nach Western-Plakat.   */

@font-face{
  font-family:"Playfair Display";
  font-style:normal; font-weight:400 700; font-display:swap;
  src:url(/wp-content/uploads/fonts/PlayfairDisplay-400-700-latin.woff2) format("woff2");
}
@font-face{
  font-family:"Cormorant Garamond";
  font-style:normal; font-weight:400; font-display:swap;
  src:url(/wp-content/uploads/fonts/CormorantGaramond-400-latin.woff2) format("woff2");
}
@font-face{
  font-family:"Cormorant Garamond";
  font-style:normal; font-weight:600; font-display:swap;
  src:url(/wp-content/uploads/fonts/CormorantGaramond-600-latin.woff2) format("woff2");
}
@font-face{
  font-family:"Fraunces";
  font-style:normal; font-weight:400 700; font-display:swap;
  src:url(/wp-content/uploads/fonts/Fraunces-400-700-latin.woff2) format("woff2");
}
@font-face{
  font-family:"Montserrat";
  font-style:normal; font-weight:400 700; font-display:swap;
  src:url(/wp-content/uploads/fonts/Montserrat-400-700-latin.woff2) format("woff2");
}

:root{

/* == 1 · PRIMITIVE =========================================================
   Nie direkt in einem Modul verwenden. Nur Block 2 greift hierauf zu.       */

  --wood-900:#281A0E;   /* dunkles Holz – Hero, Schluss-CTA                  */
  --wood-800:#3B2A1C;   /* Espresso – Text und Headlines                     */
  --wood-500:#6B5F50;   /* Muted – korrigiert von #7A6D5D (war 4,2:1)        */
  --wood-300:#9B8663;   /* Rahmen von Bedienelementen – erreicht 3,2:1       */
  --wood-200:#D8C9AE;   /* dekorative Trennlinien – NICHT für Bedienelemente */
  --cream-100:#F3EADA;  /* Creme                                             */
  --cream-50:#FBF4E7;   /* Creme hell                                        */
  --honey-500:#C8892E;  /* Honig – Buttonfläche                              */
  --honey-400:#D69A45;  /* Honig hell – Hover. Heller, nicht dunkler!        */
  --honey-700:#8A5A12;  /* Honig dunkel – die EINZIGE Honigvariante für Text */
  --honey-200:#EEC98A;  /* Eyebrow auf dunklem Grund                         */
  --forest-600:#256B4C; /* Waldgrün – Signalton                              */


/* == 2 · ROLLEN ============================================================
   Diese Namen kommen als Divi Global Colors in den Builder.
   Im Farbwähler nie einen Hex-Code eintippen – daran hängt das System.      */

  --bg-page:var(--cream-50);
  --bg-alt:var(--cream-100);
  --bg-inverse:var(--wood-900);

  --text-strong:var(--wood-800);
  --text-muted:var(--wood-500);
  --text-on-dark:#FFFFFF;
  --text-eyebrow-dark:var(--honey-200);

  --action:var(--honey-500);        /* Buttons. Sonst nichts.                */
  --action-hover:var(--honey-400);
  --action-text:var(--wood-800);    /* nie Weiß auf Honig – das sind 3,0:1   */
  --link:var(--honey-700);
  --signal:var(--forest-600);       /* inklusive · gratis · Datenschutz      */

  --border-subtle:var(--wood-200);
  --border-strong:var(--wood-300);
  --focus:var(--honey-700);


/* == 3 · TYPOGRAFIE ========================================================
   Fließend: wächst mit dem Bildschirm, statt an Breakpoints zu springen.    */

  --font-display:"Playfair Display",Georgia,serif;
  /* Alternativen – eine Zeile tauschen, fertig:
     --font-display:"Cormorant Garamond",Garamond,serif;
     --font-display:"Fraunces",Georgia,serif;                            */
  --font-body:"Montserrat",-apple-system,"Segoe UI",Roboto,sans-serif;

  --step--1:clamp(.82rem,.79rem + .14vw,.9rem);    /* Eyebrow, Kleingedrucktes */
  --step-0:clamp(1.02rem,.98rem + .2vw,1.14rem);   /* Fließtext                */
  --step-1:clamp(1.2rem,1.12rem + .4vw,1.45rem);   /* Lead, H3                 */
  --step-2:clamp(1.45rem,1.3rem + .74vw,1.95rem);
  --step-3:clamp(1.85rem,1.55rem + 1.5vw,2.85rem); /* Sektions-H2              */
  --step-4:clamp(2.4rem,1.7rem + 3.4vw,4.6rem);    /* Hero-H1                  */

  --radius:12px;
  --radius-btn:10px;
  /* Höhe des Anfragen-Knopfs in der Kopfzeile. Das Logo daneben
     richtet sich danach – eine Zahl für beide.                 */
  --nav-hoehe:44px;
}


/* == 4 · ANWENDUNG AUF DIVI ================================================
   !important ist hier bewusst gesetzt: Divi erzeugt pro Modul eigene Regeln
   mit hoher Spezifität. Ohne das greifen die Schriften nicht überall.       */

body,
.et_pb_module,
#main-content .container,
input, textarea, select, button{
  font-family:var(--font-body) !important;
}

body{
  color:var(--text-strong);
  font-size:var(--step-0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* Der Grund ist einfarbig Creme. Ausdrücklich auch OHNE Bild: im
   Theme-Customizer hängt noch das alte weiß-goldene Rautenmuster
   (Hintergrund-scaled.jpg) als Seitenhintergrund. Sichtbar wurde es nur
   dort, wo keine Sektion darüberliegt – oben am Rand, hinter der
   durchscheinenden Kopfzeile und hinter der Statusleiste des Handys.     */
html,body{
  background-color:var(--bg-page) !important;
  background-image:none !important;
}

/* Der Abschnitt, der dieses Stylesheet trägt, ist reine Technik und darf
   keine Höhe haben. Divi gibt jeder Zeile sonst 2% Innenabstand – das
   ergab oben auf JEDER Seite einen Streifen, durch den der alte
   Hintergrund durchschien. Regeln aus einem <style> gelten weiter,
   auch wenn sein Container ausgeblendet ist.                             */
.fx-tokens{display:none !important}

h1,h2,h3,h4,h5,h6,
.et_pb_module h1,.et_pb_module h2,.et_pb_module h3,
.et_pb_module h4,.et_pb_module h5,.et_pb_module h6,
.et_pb_slide_title, .et_pb_pricing_title, .et_pb_toggle_title{
  font-family:var(--font-display) !important;
  color:var(--text-strong);
  line-height:1.12;
  text-wrap:balance;
}

h1,.et_pb_slide_title{font-size:var(--step-4) !important;font-weight:600;letter-spacing:-.02em}
h2{font-size:var(--step-3) !important;font-weight:600;letter-spacing:-.015em}
h3{font-size:var(--step-1) !important;font-weight:600}
h4{font-size:var(--step-0) !important;font-weight:700}

/* Die drei Schritt-Überschriften unter „So läuft's ab" tragen eine
   Stufe mehr als ein normales H3 – sie sind dort das tragende Element.  */
h3.fx-schritt{font-size:var(--step-2) !important;margin-bottom:8px}

/* Der Abschnitt „So läuft's ab" (Sektion trägt module_class="fx-ablauf").
   Die Werte stehen zusätzlich in Divis Seiten-Einstellungen — hier noch
   einmal, weil Divi sein erzeugtes Seiten-CSS zwischenspeichert und
   Änderungen über die REST-Schnittstelle dort nicht immer ankommen.      */
.fx-ablauf{padding-bottom:34px !important}
.fx-ablauf .et_pb_row:last-child{padding-bottom:0 !important}
.fx-ablauf .et_pb_row:last-child .et_pb_module{margin-bottom:0 !important}
.fx-ablauf .et_pb_row:last-child p:last-child{margin-bottom:0}

/* Fließtext bekommt Luft und eine lesbare Zeilenlänge */
#main-content p{margin-bottom:1.2em}
.et_pb_text p, .et_pb_blurb_description p{max-width:68ch}

/* Fallstrick zur Regel darüber: die Breitenbegrenzung macht aus dem Absatz
   einen schmalen Kasten. Steht am Modul kein „zentriert", fehlen die
   automatischen Seitenränder — der Kasten klebt links, obwohl der Text
   darin zentriert ist. Die Überschrift daneben hat keine Begrenzung und
   sitzt korrekt mittig; es sieht aus, als sei nur der Absatz verrutscht.
   Deshalb: jeder Absatz, der sich selbst zentriert, wird auch zentriert
   gestellt — unabhängig von der Modul-Einstellung.                       */
.et_pb_text p[style*="text-align: center"],
.et_pb_text p[style*="text-align:center"],
.et_pb_text h1[style*="text-align: center"],
.et_pb_text h2[style*="text-align: center"],
.et_pb_text h3[style*="text-align: center"]{margin-inline:auto}
/* WICHTIG: ohne die automatischen Seitenränder klebt der Textkasten links –
   zentrierter Text wirkt dann verschoben. Divi vergibt die Klasse selbst.  */
.et_pb_text_align_center p,
.et_pb_text_align_center h1,
.et_pb_text_align_center h2,
.et_pb_text_align_center h3,
.et_pb_text_align_center blockquote{
  margin-left:auto !important;
  margin-right:auto !important;
}
.et_pb_text_align_center{text-align:center}

a{color:var(--link)}
a:hover{color:var(--wood-800)}

/* --- Buttons ------------------------------------------------------------
   Ein Honig-Button pro Bildschirm. Beschriftung immer Espresso.           */
.et_pb_button,
.et_pb_button:hover,
#main-content .et_pb_button{
  font-family:var(--font-body) !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
  border-radius:var(--radius-btn) !important;
  border:none !important;
  padding:.8em 1.6em !important;
  transition:background-color .18s ease, transform .18s ease;
}
.et_pb_button{
  background-color:var(--action) !important;
  color:var(--action-text) !important;
}
.et_pb_button:hover{
  background-color:var(--action-hover) !important;
  color:var(--action-text) !important;
}
/* Divi hängt standardmäßig einen Pfeil an – der stört die Ruhe */
.et_pb_button:after{display:none !important}

/* Zweitrangige Aktion: farblos, damit die Hauptaktion allein steht */
.fx-btn-ghost .et_pb_button,
.et_pb_button.fx-ghost{
  background-color:transparent !important;
  color:var(--text-strong) !important;
  border:2px solid var(--border-strong) !important;
}
.fx-btn-ghost .et_pb_button:hover,
.et_pb_button.fx-ghost:hover{background-color:var(--bg-alt) !important}

/* --- Formulare ----------------------------------------------------------- */
.et_pb_contact_form_container input,
.et_pb_contact_form_container textarea,
.et_pb_contact_form_container select,
.et_pb_newsletter input{
  background-color:#fff !important;
  color:var(--text-strong) !important;
  border:2px solid var(--border-strong) !important;
  border-radius:var(--radius-btn) !important;
  font-size:var(--step-0) !important;
  padding:.75em .9em !important;
}
::placeholder{color:var(--text-muted);opacity:1}


/* == 5 · BEDIENBARKEIT ===================================================== */

/* Sichtbarer Fokusrahmen auf allem Klickbaren – Pflicht, nicht Kür */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.et_pb_button:focus-visible,
summary:focus-visible{
  outline:3px solid var(--focus) !important;
  outline-offset:3px !important;
}

/* Touch-Ziele mindestens 44px */
.et_pb_button,
#top-menu li a,
.et_pb_social_media_follow li a{min-height:var(--nav-hoehe);display:inline-flex;align-items:center}

/* Wer Bewegung reduziert haben will, bekommt keine */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}


/* == 6 · HILFSKLASSEN ======================================================
   In Divi unter Modul → Erweitert → CSS-ID & Klassen eintragen.            */

/* Eyebrow – die kleine Zeile über einer Headline */
.fx-eyebrow, .fx-eyebrow p{
  margin-inline:auto;
  font-family:var(--font-body) !important;
  font-size:var(--step--1) !important;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:.4em;
}
.fx-on-dark .fx-eyebrow, .fx-on-dark .fx-eyebrow p{color:var(--text-eyebrow-dark)}

/* Lead – der größere Absatz direkt unter einer Headline */
.fx-lead, .fx-lead p{
  margin-inline:auto;
  font-size:var(--step-1) !important;
  line-height:1.5;
  color:var(--text-muted);
}
.fx-on-dark .fx-lead, .fx-on-dark .fx-lead p{color:#EFE4D4}

/* Sektionen auf dunklem Holz */
.fx-on-dark, .fx-on-dark p, .fx-on-dark li{color:var(--text-on-dark)}
.fx-on-dark h1,.fx-on-dark h2,.fx-on-dark h3{color:var(--text-on-dark) !important}

/* Checkliste mit Waldgrün-Häkchen */
.fx-check ul{list-style:none;padding-left:0}
.fx-check li{position:relative;padding-left:1.9em;margin-bottom:.7em}
.fx-check li:before{
  content:"";position:absolute;left:0;top:.5em;
  width:.6em;height:.6em;border-radius:3px;
  background:var(--signal);
}

/* Vertrauensleiste unter dem Hero */
.fx-trust{border-bottom:1px solid var(--border-subtle)}
.fx-trust p{
  font-size:var(--step--1) !important;
  color:var(--text-muted);
  margin-bottom:0 !important;
}
.fx-trust img{max-height:52px;width:auto;opacity:.9}

/* Karten */
.fx-card{
  background:#fff;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius);
}

/* --- Partnerkarten ------------------------------------------------------
   Logo oben auf ruhigem Grund, darunter Rubrik, Name, kurzer Text, Link.
   Die Logos sind unterschiedlich hoch und breit (JPG mit weißem Rand neben
   freigestelltem PNG) – deshalb feste Kastenhöhe und `object-fit:contain`
   statt fester Bildgrößen. Sonst springt die Zeile.                       */
.fx-partner{
  display:grid;grid-template-columns:1fr;
  gap:26px;max-width:900px;margin-inline:auto;
}
.fx-partner__karte{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--border-subtle);
  border-radius:var(--radius);overflow:hidden;
  box-shadow:0 10px 30px -20px rgba(40,26,14,.45);
}
.fx-partner__bild{
  display:flex;align-items:center;justify-content:center;
  height:170px;padding:24px;background:#fff;
  border-bottom:1px solid var(--border-subtle);
}
/* Ab Tablet zwei nebeneinander – bewusst nicht drei: bei drei Spalten
   bleibt je Karte kaum Platz für den Text.                              */
@media (min-width:720px){
  .fx-partner{grid-template-columns:repeat(2,1fr)}
}
.fx-partner__bild img{max-height:100%;max-width:100%;width:auto;object-fit:contain}
.fx-partner__text{display:flex;flex-direction:column;gap:10px;padding:24px 26px 26px;flex:1}
.fx-partner__rubrik{
  font-size:var(--step--1) !important;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--honey-700);
  margin:0 !important;
}
.fx-partner__name{
  font-family:var(--font-display) !important;font-size:var(--step-2) !important;
  font-weight:600;margin:0 !important;color:var(--text-strong);
}
.fx-partner p.fx-partner__beschreibung{
  margin:0 !important;font-size:var(--step-0);line-height:1.65;color:var(--text-muted);
}
.fx-partner__ort{
  margin:0 !important;font-size:var(--step-0);color:var(--text-muted);opacity:.85;
}
.fx-partner__link{
  margin-top:auto;padding-top:14px;
  font-weight:700;font-size:var(--step-0);color:var(--link);
  text-decoration:none;display:inline-flex;align-items:center;gap:.4em;
}
.fx-partner__link:hover{color:var(--text-strong);text-decoration:underline}
.fx-partner__link:after{content:"\2197";font-size:1.1em;line-height:1}

/* Signalfläche – Datenschutz, „immer inklusive“ */
.fx-signal{background-color:var(--signal) !important}
.fx-signal, .fx-signal p, .fx-signal li, .fx-signal h2, .fx-signal h3{
  color:#fff !important;
}


/* == 7 · BAUSTEINE =========================================================
   Für die Sektionen, die Divi nicht von Haus aus kann.                     */

/* --- Zitat --------------------------------------------------------------- */
.fx-quote blockquote,
.fx-quote{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.1rem,.95rem + .8vw,1.7rem);
  line-height:1.45;
  max-width:30ch;
  margin:0 auto;
  border:none;
  padding:0;
}
.fx-quote cite{
  display:block;
  margin-top:1em;
  font-family:var(--font-body);
  font-style:normal;
  font-size:var(--step--1);
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.75;
}

/* --- Partner-Banderole (ganz unten) --------------------------------------
   Läuft endlos durch. Der Inhalt wird im Markup verdoppelt, damit der
   Übergang nahtlos ist.                                                    */
.fx-marquee{overflow:hidden;position:relative;padding:26px 0}
.fx-marquee::before,.fx-marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none;
}
.fx-marquee::before{left:0;background:linear-gradient(90deg,var(--bg-alt),transparent)}
.fx-marquee::after{right:0;background:linear-gradient(270deg,var(--bg-alt),transparent)}
.fx-marquee__track{
  display:flex;align-items:center;gap:64px;width:max-content;
  animation:fx-scroll 34s linear infinite;
}
.fx-marquee:hover .fx-marquee__track{animation-play-state:paused}
.fx-marquee__track img{height:46px;width:auto;opacity:.75;filter:saturate(.25)}
.fx-marquee__track span{
  font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-muted);white-space:nowrap;
}
@keyframes fx-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .fx-marquee__track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}
  .fx-marquee::before,.fx-marquee::after{display:none}
}

/* --- Pakete ---------------------------------------------------------------
   Aufbau nach dem Vorbild der PI-Seite, Gestaltung aus der eigenen Marke.
   Desktop drei nebeneinander, Tablet zwei, Handy untereinander.
   Bewusst KEIN Wischen – das hat in Divi nicht zuverlässig funktioniert.  */
.fx-pakete{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  align-items:stretch;
}
@media (max-width:1000px){.fx-pakete{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.fx-pakete{grid-template-columns:1fr;gap:20px}}

.fx-paket{
  position:relative;
  display:flex;flex-direction:column;
  padding:34px 30px;
  border-radius:20px;
  background:linear-gradient(180deg,#ffffff,rgba(251,244,231,.72));
  border:1px solid var(--border-subtle);
  box-shadow:0 18px 48px rgba(59,42,28,.08);
  transition:transform .25s ease, box-shadow .25s ease;
}
.fx-paket:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 72px rgba(59,42,28,.14);
}
.fx-paket--top{
  background:linear-gradient(180deg,#ffffff,rgba(243,234,218,.92));
  border-color:var(--action);
}

/* Paketname als Pille */
.fx-paket__tier{
  display:inline-flex;align-items:center;align-self:flex-start;
  min-height:34px;padding:0 15px;border-radius:999px;
  font-size:.76rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(59,42,28,.06);color:var(--text-strong);
}
.fx-paket--top .fx-paket__tier{background:var(--action);color:var(--action-text)}

/* „Meist gebucht" oben rechts */
.fx-paket__badge{
  position:absolute;top:18px;right:18px;
  display:inline-flex;align-items:center;min-height:30px;padding:0 13px;
  border-radius:999px;
  font-size:.7rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  background:rgba(200,137,46,.16);color:var(--honey-700);
  white-space:nowrap;
}

/* Untertitel trägt die Karte */
.fx-paket h3.fx-paket__unter{
  margin:20px 0 0 !important;
  font-family:var(--font-display);font-weight:600;
  color:var(--text-strong);text-wrap:balance;
}

.fx-paket__preis{
  margin:18px 0 0 !important;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.4rem,1.9rem + 2vw,3.4rem);
  line-height:1;color:var(--text-strong);
}
.fx-paket__preis span{
  display:block;margin-top:8px;
  font-family:var(--font-body);font-weight:500;font-size:.95rem;
  letter-spacing:0;color:var(--text-muted);
}

.fx-paket__copy{
  margin:16px 0 0 !important;
  font-size:var(--step--1);line-height:1.6;color:var(--text-muted);
}

/* Liste mit Trennlinien und runden Punkten */
.fx-paket__liste{
  margin:26px 0 30px !important;padding:0 !important;list-style:none;flex:1;
}
.fx-paket__liste li{
  position:relative;
  padding:12px 0 12px 26px;
  font-size:var(--step--1);line-height:1.5;
  color:var(--text-strong);
  border-bottom:1px solid rgba(59,42,28,.07);
}
.fx-paket__liste li:last-child{border-bottom:none}
.fx-paket__liste li::before{
  content:"";position:absolute;left:0;top:19px;
  width:10px;height:10px;border-radius:50%;
  background:linear-gradient(135deg,var(--honey-200),var(--action));
}

.fx-paket .fx-paket__btn{
  display:block;margin-top:auto;text-align:center;text-decoration:none;
  background:var(--action);color:var(--action-text);
  font-weight:700;padding:14px 18px;border-radius:var(--radius-btn);
  transition:background-color .18s ease;
}
.fx-paket .fx-paket__btn:hover{background:var(--action-hover);color:var(--action-text)}
.fx-paket--ghost .fx-paket__btn{
  background:transparent;border:2px solid var(--border-strong);color:var(--text-strong);
}
.fx-paket--ghost .fx-paket__btn:hover{background:var(--bg-alt)}

@media (prefers-reduced-motion:reduce){
  .fx-paket:hover{transform:none}
}

/* --- Terminkalender -------------------------------------------------------
   Selbstgebaut, läuft komplett im Browser. Keine externen Dienste,
   keine Datenübertragung. Belegte Tage stehen in js/blocked im Modul.      */
.fx-kal{
  background:#fff;border:2px solid var(--border-strong);
  border-radius:var(--radius);padding:16px 16px 18px;max-width:380px;margin:0 auto 18px;
}
.fx-kal__kopf{
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;
}
.fx-kal__kopf strong{
  font-family:var(--font-display);font-size:var(--step-1);font-weight:600;
  color:var(--text-strong);
}
.fx-kal__nav{
  background:var(--bg-alt);border:1px solid var(--border-subtle);color:var(--text-strong);
  width:38px;height:38px;border-radius:9px;cursor:pointer;font-size:17px;line-height:1;
}
.fx-kal__nav:hover:not(:disabled){background:var(--border-subtle)}
.fx-kal__nav:disabled{opacity:.35;cursor:not-allowed}
.fx-kal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.fx-kal__wd{
  text-align:center;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted);padding-bottom:6px;
}
.fx-kal__tag{
  aspect-ratio:1;border:none;border-radius:8px;background:var(--bg-alt);
  color:var(--text-strong);font-size:14px;font-weight:600;cursor:pointer;
  font-variant-numeric:tabular-nums;transition:background-color .15s ease;
}
.fx-kal__tag:hover:not(:disabled){background:var(--honey-200)}
.fx-kal__tag[data-frei="nein"],
.fx-kal__tag:disabled{
  background:transparent;color:var(--text-muted);opacity:.4;
  cursor:not-allowed;text-decoration:line-through;
}
.fx-kal__tag[aria-pressed="true"]{
  background:var(--action);color:var(--action-text);
}
.fx-kal__leer{background:none;cursor:default}
.fx-kal__legende{
  display:flex;gap:16px;justify-content:center;margin-top:12px;
  font-size:12px;color:var(--text-muted);
}
.fx-kal__legende i{
  display:inline-block;width:11px;height:11px;border-radius:3px;
  margin-right:5px;vertical-align:-1px;background:var(--bg-alt);
}
.fx-kal__legende i.belegt{background:transparent;border:1px solid var(--border-strong);opacity:.5}
.fx-kal__wahl{
  text-align:center;font-size:var(--step-0);color:#fff;margin:0 0 6px;min-height:1.6em;
}
.fx-kal__wahl b{color:var(--honey-200)}

/* Das Formularfeld „Wunschtermin" wird ausgeblendet: den Tag wählt man
   im Kalender darüber, das Feld darunter fragte dasselbe ein zweites Mal.
   Es bleibt im Formular stehen, weil das Kalender-Skript seinen Wert
   dort hineinschreibt – nur eben unsichtbar.                              */
.et_pb_contact_field[data-id="TERMIN"]{display:none !important}

/* Hinweis, wenn jemand ohne gewählten Tag absenden will */
.fx-kal__wahl--fehlt{color:var(--honey-200) !important;font-weight:700}


/* == 8 · ÜBERNOMMEN VON DER PI-SEITE =======================================
   Bausteine, deren Aufbau überzeugt hat. Gestaltung kommt aus der
   eigenen Marke (Honig/Creme/Espresso), nicht aus der Vorlage.            */

/* --- Ziffern --------------------------------------------------------------
   Serifenschriften setzen gern Mediävalziffern: „11" liest sich dann wie
   „II" und „149" wie „I49". Überall dort abschalten, wo Zahlen zählen.    */
.fx-zahl, .fx-paket__preis, .fx-kal__tag, .fx-kennzahl__wert{
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
}

/* --- Kennzahlenband ------------------------------------------------------- */
.fx-kennzahlen{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  background:#fff;border:1px solid var(--border-subtle);
  border-radius:var(--radius);padding:26px 18px;
  box-shadow:0 10px 34px rgba(59,42,28,.07);
}
.fx-kennzahl{text-align:center;padding:6px 10px;position:relative}
.fx-kennzahl + .fx-kennzahl::before{
  content:"";position:absolute;left:0;top:14%;bottom:14%;
  width:1px;background:var(--border-subtle);
}
.fx-kennzahl__wert{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.7rem,1.3rem + 1.6vw,2.6rem);
  line-height:1.05;color:var(--text-strong);
}
.fx-kennzahl__label{
  display:block;margin-top:6px;font-weight:700;font-size:var(--step--1);
  color:var(--text-strong);
}
.fx-kennzahl__zusatz{
  display:block;margin-top:3px;font-size:13px;line-height:1.4;
  color:var(--text-muted);
}
@media (max-width:860px){
  .fx-kennzahlen{grid-template-columns:repeat(2,1fr);row-gap:22px}
  .fx-kennzahl:nth-child(3)::before{display:none}
}
@media (max-width:420px){
  .fx-kennzahlen{grid-template-columns:1fr}
  .fx-kennzahl::before{display:none !important}
  .fx-kennzahl + .fx-kennzahl{border-top:1px solid var(--border-subtle);padding-top:18px}
}

/* --- Extras als Karten ---------------------------------------------------- */
.fx-extras{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:940px){.fx-extras{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.fx-extras{grid-template-columns:1fr}}
.fx-extra{
  background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius);
  padding:22px 20px;display:flex;flex-direction:column;gap:8px;
}
.fx-extra__kopf{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fx-extra__titel{
  font-family:var(--font-display);font-size:var(--step-1);font-weight:600;
  color:var(--text-strong);margin:0;
}
.fx-extra__marke{
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 10px;border-radius:99px;white-space:nowrap;
}
.fx-extra__marke--frei{background:var(--signal);color:#fff}
.fx-extra__marke--zu{
  background:transparent;color:var(--honey-700);
  border:1.5px solid var(--honey-700);
}
.fx-extra p{margin:0;font-size:var(--step--1);line-height:1.6;color:var(--text-muted)}
.fx-extra__notiz{
  margin-top:auto;padding-top:10px;font-size:13px;font-style:italic;
  color:var(--text-muted);border-top:1px dotted var(--border-subtle);
}

/* --- Schwebende Kopfzeile --------------------------------------------------
   Nachgebaut nach der PI-Seite: eine Pille, die mitschwebt.

   WICHTIG: Form und Schwebeverhalten gelten in JEDER Fensterbreite.
   Früher stand alles in @media (min-width:981px) – unterhalb davon sah man
   deshalb die unveränderte Divi-Leiste (eckig, oben klebend). Das fiel erst
   auf, als das Fenster auf halbe Bildschirmbreite gezogen wurde.
   Getrennt bleibt nur, was es unterhalb von 981px gar nicht gibt:
   das waagerechte Menü. Dort übernimmt Divis Klappmenü.                     */

/* Divi reserviert der Leiste sonst Platz, den wir selbst vergeben */
#page-container{padding-top:0 !important}

/* position:fixed bricht, sobald ein Vorfahre transform oder filter setzt –
   dann bezieht sich „fixed" auf dieses Element statt auf das Fenster.
   Divi tut das gelegentlich, deshalb hier ausdrücklich zurücksetzen.
   (overflow spielt für position:fixed keine Rolle – nicht anfassen,
   Divi braucht es für eigene Layouts.)                                     */
#page-container,#et-main-area{
  transform:none !important;
  filter:none !important;
}

#main-header,
body.et_fixed_nav #main-header,
body.et_non_fixed_nav #main-header,
#main-header.et-fixed-header{
  position:fixed !important;
  top:14px !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:min(1180px,calc(100% - 32px)) !important;
  border-radius:999px !important;
  background:rgba(251,244,231,.88) !important;
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(255,255,255,.75) !important;
  box-shadow:0 12px 40px rgba(36,28,20,.10) !important;
  padding:0 !important;
  transition:top .2s ease, box-shadow .2s ease;
}
#main-header .container{
  width:100% !important;max-width:none !important;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
#main-header .logo_container{position:static !important;width:auto !important}
/* Das Logo genauso hoch wie der Anfragen-Knopf daneben.
   ACHTUNG: Divi schreibt `#logo{max-height:60%}` als <style> IN DEN SEITENKOPF
   (Customizer-Wert „Logo-Höhe 60 %"). Das ist dieselbe Spezifität wie ein
   schlichtes `#logo`, steht aber später im Dokument – eine Regel `#logo{...}`
   hier verliert deshalb immer, egal wie unser Stylesheet eingebunden wird.
   Mit dem Präfix `#main-header .logo_container` sind wir spezifischer und
   gewinnen unabhängig von der Reihenfolge. `height:auto` neutralisiert die
   Prozentangabe, sonst rechnet Divi weiter gegen die Kopfzeilenhöhe.
   Sauberer wäre, den Wert im Customizer zu ändern – dafür fehlt der Zugriff. */
#main-header .logo_container #logo,
#main-header.et-fixed-header .logo_container #logo{
  max-height:var(--nav-hoehe) !important;
  height:auto !important;
  width:auto !important;
}
#et-top-navigation{
  padding:0 !important;margin:0 !important;float:none !important;
  display:flex;align-items:center;
}

/* Auf der Startseite schwebt die Leiste über dem Aufmacher.
   Überall sonst muss Platz reserviert werden, sonst rutscht der
   erste Abschnitt darunter.                                               */

@media (min-width:981px){
  #main-header{top:18px !important}
  #main-header .container{padding:0 14px 0 24px !important;min-height:72px}

  /* Menüpunkte als Pillen, wie auf der Vorlage */
  #top-menu{display:flex;align-items:center;gap:6px}
  #top-menu > li{padding-right:0 !important}
  #top-menu > li > a{
    display:inline-flex;align-items:center;min-height:44px;
    padding:0 16px !important;border-radius:999px;
    font-size:.95rem;font-weight:600;
    transition:background-color .2s ease,color .2s ease;
  }
  #top-menu > li > a:hover{background:rgba(59,42,28,.06)}
  #top-menu > li.current-menu-item > a{background:rgba(59,42,28,.06)}

  body:not(.home) #et-main-area{padding-top:112px}
}

/* Unterhalb der Divi-Grenze: gleiche Pille, aber mit dem Klappmenü.
   Vier Dinge, die auf dem echten Handy schiefgingen (28.08.), stehen hier:
   die Leiste schwamm nicht mit, das Hamburger-Symbol saß nicht ganz außen,
   das offene Menü ließ sich nicht bis unten scrollen, und alle neun
   Standorte standen dauerhaft aufgeklappt darin.                          */
@media (max-width:980px){

  /* 1 · Die Leiste muss auch hier mitschweben.
     Divi setzt #main-header unterhalb von 981px per eigener Regel auf
     position:absolute – deshalb scrollte sie weg. Zusätzlich bricht
     „fixed", sobald irgendein Vorfahre transform/filter/perspective setzt;
     Divi tut das auf Handys für seine Einblend-Effekte.                   */
  html,body,#page-container,#et-main-area,#et-boc,.et-l,
  .et_builder_inner_content{
    transform:none !important;
    filter:none !important;
    perspective:none !important;
    will-change:auto !important;
  }
  html body #main-header,
  html body.et_fixed_nav #main-header,
  html body.et_non_fixed_nav #main-header,
  html body #main-header.et-fixed-header{
    position:fixed !important;
    top:10px !important;
    width:min(1180px,calc(100% - 20px)) !important;
  }

  /* 2 · Logo links, Hamburger ganz außen rechts.
     Divis .mobile_menu_bar trägt das Symbol in einem :before, das absolut
     positioniert ist – der Kasten selbst war dadurch nahezu breitenlos und
     rutschte in die Mitte. Hier wird das Symbol wieder Teil des Layouts.  */
  #main-header .container{
    display:flex !important;align-items:center;
    justify-content:space-between !important;
    width:100% !important;max-width:none !important;
    padding:0 6px 0 18px !important;min-height:62px;
  }
  #et-top-navigation{margin-left:auto !important;padding:0 !important}
  #et_mobile_nav_menu{
    float:none !important;margin:0 !important;
    display:flex !important;align-items:center;
  }
  #et_mobile_nav_menu .mobile_nav{position:static !important}
  .mobile_menu_bar{
    padding:0 !important;display:flex;align-items:center;
    width:48px;height:48px;justify-content:center;
  }
  .mobile_menu_bar:before{
    position:static !important;top:auto !important;left:auto !important;
    font-size:32px;line-height:1;color:var(--text-strong);
  }

  /* 3 · Das Klappmenü hängt unter der Pille und ist scrollbar.
     Ohne max-height reichten die neun Standorte über den Bildschirmrand
     hinaus – der untere Teil war nicht erreichbar, weil die Leiste
     „fixed" ist und deshalb nicht mitscrollt.                             */
  #et_mobile_nav_menu .et_mobile_menu{
    position:absolute !important;
    top:calc(100% + 10px) !important;
    left:0 !important;right:0 !important;width:auto !important;
    margin:0 !important;
    padding:10px !important;
    border-radius:26px !important;
    border:1px solid rgba(255,255,255,.76) !important;
    border-top:1px solid rgba(255,255,255,.76) !important;
    background:rgba(251,244,231,.96) !important;
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    box-shadow:0 20px 48px rgba(36,28,20,.14) !important;
    max-height:calc(100vh - 96px);
    max-height:calc(100dvh - 96px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .et_mobile_menu li a{
    border-radius:14px;
    padding:13px 16px !important;
    border-bottom:none !important;
    font-weight:600;
  }
  .et_mobile_menu li a:hover{background:rgba(59,42,28,.06)}

  /* 4 · Standorte bleiben eingeklappt, bis man auf den Pfeil tippt.
     Das Aufklappen macht das Snippet menue-mobil.html (Divi →
     Theme-Optionen → Integration → Code im <head>). Ohne das Snippet
     bleibt alles offen — dann fehlen nur die Pfeile, erreichbar ist
     weiterhin jeder Ort.                                                  */
  .et_mobile_menu li.menu-item-has-children,
  .et_mobile_menu li.fx-hat-kinder{position:relative}
  /* Das Auf- und Zuklappen macht das Skript selbst (inline display),
     nicht das Stylesheet. Grund: Divi setzt auf die Unterlisten
     `display:block !important`, und dagegen käme eine Inline-Angabe
     des Skripts nicht an. Hier steht deshalb nur das Aussehen.        */
  .et_mobile_menu li > .fx-klapp{
    position:absolute;top:2px;right:4px;
    width:46px;height:46px;
    display:flex;align-items:center;justify-content:center;
    background:none;border:0;padding:0;cursor:pointer;
    color:var(--text-strong);
  }
  .et_mobile_menu li > .fx-klapp:before{
    content:"";width:9px;height:9px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .2s ease;
  }
  .et_mobile_menu li.fx-offen > .fx-klapp:before{
    transform:rotate(225deg) translate(-2px,-2px);
  }
  /* Platz für den Pfeil, damit er nicht auf der Schrift liegt */
  .et_mobile_menu li.fx-hat-kinder > a{padding-right:56px !important}
  .et_mobile_menu .sub-menu{padding-left:12px !important}
  .et_mobile_menu .sub-menu a{font-weight:500;opacity:.92}

  body:not(.home) #et-main-area{padding-top:92px}
}

#top-menu li a{font-weight:500;color:var(--text-strong)}
/* Der aktive Menüpunkt stand in Honig-Dunkel. Über dem Holzbild wird die
   durchscheinende Leiste selbst dunkel — braun auf braun war praktisch
   unlesbar. Waldgrün hebt sich von beiden Gründen ab.                  */
#top-menu li.current-menu-item > a,
#top-menu li.current_page_item > a,
#top-menu li.current-menu-ancestor > a{color:var(--signal) !important;font-weight:700}
.et_mobile_menu li.current-menu-item > a,
.et_mobile_menu li.current_page_item > a{color:var(--signal) !important;font-weight:700}

/* Beim Scrollen hängt Divi der Leiste die Klasse `et-fixed-header` an und
   zieht dafür einen ZWEITEN Satz Farben aus den Theme-Optionen — dort
   steht noch das alte Gold. Diese Regeln sind spezifischer als meine
   darüber, deshalb sprang die aktive Rubrik beim Scrollen auf Gold um.
   Hier wird beides festgenagelt: Grundfarbe und aktiver Punkt.          */
#main-header.et-fixed-header #top-menu li a,
#main-header.et-fixed-header #top-menu li a:hover{
  color:var(--text-strong) !important;
}
#main-header.et-fixed-header #top-menu li.current-menu-item > a,
#main-header.et-fixed-header #top-menu li.current_page_item > a,
#main-header.et-fixed-header #top-menu li.current-menu-ancestor > a{
  color:var(--signal) !important;
  font-weight:700;
}
/* Der Anfragen-Knopf bleibt auch im gescrollten Zustand ein Knopf */
#main-header.et-fixed-header #top-menu li.fx-nav-cta > a,
#main-header.et-fixed-header #top-menu li.fx-nav-cta > a:hover{
  color:var(--action-text) !important;
  background:var(--action) !important;
}

/* Der Anfragen-Knopf rechts im Menü.
   ACHTUNG: `#top-menu li a` ist spezifischer als eine reine Klasse und
   überschreibt sonst die Schriftfarbe – deshalb hier mit ID-Präfix.      */
#top-menu li.fx-nav-cta > a,
#top-menu li.fx-nav-cta > a:hover{
  background:var(--action);
  color:var(--action-text) !important;
  font-weight:700;
  padding:10px 18px !important;
  border-radius:var(--radius-btn);
  line-height:1.2;
  opacity:1;
}
#top-menu li.fx-nav-cta > a:hover{background:var(--action-hover)}
#top-menu li.fx-nav-cta > a::after{display:none !important}

/* ── Vergleichstabelle „Preise & Pakete" am Handy (15.09.2026) ──────────────
   Die Tabelle trägt Inline-Stile und min-width:660px und war auf einem iPhone 6s
   nur mit Seitwärtsschieben lesbar. Unter 600 px wird sie kompakt, alle vier
   Spalten bleiben sichtbar. !important ist nötig, weil die Zellen ihre Maße als
   style="…" mitbringen. Häkchen erkennt die Regel an ihrer Inline-Größe 20px
   („inklusive" hat 16px). Markup: <div class="fx-vergleich" style="overflow-x:auto;">
   Freigegeben vom Betreiber (Entwurf: Sicherungen/2026-09-15/preise-vorschlag4.png). */
@media (max-width: 600px){
  .fx-vergleich{overflow-x:visible !important}
  .fx-vergleich table{min-width:0 !important;table-layout:fixed}
  .fx-vergleich th,.fx-vergleich td{padding:11px 2px !important;line-height:1.3;hyphens:manual;overflow-wrap:normal;word-break:normal}
  .fx-vergleich th:first-child,.fx-vergleich td:first-child{width:36%;padding-left:8px !important;text-align:left !important;font-size:13.5px !important}
  .fx-vergleich th{font-size:14px !important;letter-spacing:-.01em}
  .fx-vergleich th span{font-size:12px !important}
  .fx-vergleich th span[style*="border-radius"]{font-size:8.5px !important;padding:2px 5px !important;margin-top:4px !important}
  .fx-vergleich td:not(:first-child),
  .fx-vergleich td:not(:first-child) span{font-size:12px !important}
  .fx-vergleich td:not(:first-child) span[style*="font-size:20px"]{font-size:15px !important}
}