/*
 Theme Name:     Divi Child
 Theme URI:      https://webwirbel.de/divi/
 Description:    Divi Child Theme
 Author:         EPR
 Author URI:     https://webwirbel.de/
 Template:       Divi
 Version:        1.0.0
*/
 
/* Your custom CSS starts here */

/* ww-beitrag-css:start (Stand 2026-10-16; nicht von Hand ändern, Quelle: content-studio/backend/services/beitrag.css) */
/*
  Beitrags-CSS für Blogbeiträge mit Gutenberg-Inhalt (Relaunch-Seite webwirbel-webdesign.de, Divi 5).
  Quelle (Master): content-studio/backend/services/beitrag.css. Im Child-Theme steht eine Kopie in style.css, eingerahmt von zwei
  Marken-Kommentaren (Start und Ende); Änderungen immer hier machen und mit scripts/blog-css-ins-theme.js ins Theme bringen.

  Gilt nur für Beiträge, die NICHT mit dem Divi-Builder gebaut sind (body ohne Klasse et_pb_pagebuilder_layout): Gutenberg-Inhalt erbt die
  Divi-Preset-Werte nicht, deshalb hier nachgebaut. Die fertigen Divi-5-Beiträge mit Modulen bleiben unberührt.
  Die Werte sind Divi-Variablen (--gcid-… Farben, --gvid-… Größen). --gvid-h7kpjlb42l (Zeilenhöhe der Divi-H2-Presets) existiert nicht mehr, deshalb line-height:1.2 bei H2.
*/
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content p,
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content li {
  font-weight: 300;
  color: var(--gcid-primary-color);
  font-size: var(--gvid-r188d5dpm4);
  line-height: 1.3;
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content li { margin-bottom: 10px; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content h2 {
  color: var(--gcid-heading-color);
  font-size: var(--gvid-5eza5pqw1k);
  line-height: 1.2;
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content h3 {
  font-family: Niramit, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: var(--gvid-o9x9a8q9j4);
  line-height: 1.2;
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content h2.wp-block-heading { margin-top: var(--gvid-40pzx4dnqp); }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content h3.wp-block-heading { margin-top: 2.4rem; }

/* H4 (Zwischenüberschrift): zwischen H3 und Fließtext, Größe wie die Variable XS (clamp(1.2rem, 6vw, 1.5rem)), als Wert geschrieben, weil Divi eine Variable nur ausgibt, wenn ein Modul auf der Seite sie nutzt. Kästen mit eigener H4-Regel (Schritt-, Wichtig-, Icon-Karte) stehen weiter unten und gewinnen. */
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content h4 { font-size: clamp(1.2rem, 6vw, 1.5rem); line-height: 1.25; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content h4.wp-block-heading { margin-top: 2rem; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content h4.wp-block-heading:first-child { margin-top: 0; }

/* Kürze-Box */
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .kurz-box {
  background: var(--gcid-2u9lxv08qm);
  padding: var(--gvid-rbyrbzn8sa);
  border: 1px solid hsl(from var(--gcid-primary-color) h s l / .1);
  border-radius: 0 23px 23px 23px;
  margin: 1.5em 0;
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .kurz-box li { margin-bottom: 10px; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .kurz-box h3,
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .cta-box h3 {
  margin-top: 0;
  font-family: var(--et_global_heading_font);
  font-weight: 500;
}

/* Lesetipp: Beitragsbild bündig links bis an die Kastenkante (kein Rahmen ums Bild) und immer ganz zu sehen, nie beschnitten
   (Beitragsbilder sind meist 2:1, das Bild behält sein Seitenverhältnis und gibt dem Kasten die Höhe); Text rechts;
   am Handy das Bild oben in voller Breite. Ecken 11 px, weicher Schatten nach unten. */
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .lesetipp-box {
  display: flex;
  align-items: stretch;
  min-height: 110px;
  background: var(--gcid-2u9lxv08qm);
  border-radius: 11px;
  overflow: hidden;
  margin: 1.5em 0;
  box-shadow: 0 12px 18px -6px rgba(0, 0, 0, .12);
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .lesetipp-box .wp-block-image { flex: 0 0 auto; max-width: 45%; margin: 0; display: flex; align-items: center; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .lesetipp-box .wp-block-image img {
  width: auto;
  height: auto;
  max-width: 240px;
  max-height: 150px;
  border-radius: 0;
  display: block;
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .lesetipp-box p { flex: 1; margin: 0; padding: 1rem 1.5rem; align-self: center; }
@media (max-width: 767px) {
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .lesetipp-box { flex-direction: column; }
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .lesetipp-box .wp-block-image { flex: none; width: 100%; max-width: none; justify-content: center; }
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .lesetipp-box .wp-block-image img { max-width: 100%; max-height: 260px; }
}

/* So nicht / so ja: Paare nebeneinander mit den Divi-Icons Kreuz und Häkchen (Icon-Schrift ETmodules, Zeichen M und N); am Handy untereinander.
   Maße wie auf der alten Seite: Icon 44 px, Abstand 15 px, Text Gewicht 500, jedes Glied höchstens 285 px breit. */
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .vergleich { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.5rem; margin: 1.5em 0; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .vergleich-eintrag { display: flex; align-items: center; gap: 15px; flex: 0 1 285px; min-width: 0; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .vergleich-eintrag::before {
  font-family: ETmodules;
  font-weight: 400;
  font-size: 44px;
  line-height: 1;
  flex: none;
  width: 44px;
  text-align: center;
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .vergleich-nein::before { content: "M"; color: var(--gcid-primary-color); }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .vergleich-ja::before { content: "N"; color: #808000; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .vergleich-eintrag p { margin: 0; font-weight: 500; }

/* Häkchen-Liste: Häkchen im Kreis (Font-Awesome-Form, als Maske, damit keine Icon-Schrift nötig ist) statt Aufzählungspunkt */
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content ul.haken-liste { list-style: none; margin: 1.2em 0; padding: 0; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content ul.haken-liste li { position: relative; padding-left: 47px; margin-bottom: 12px; font-weight: 500; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content ul.haken-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  background: var(--gcid-primary-color);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.627 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.627 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.627.001z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.627 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.627 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.627.001z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Schritt-Karte (Blurb der alten Seite): Karte mit Hintergrund, Ecken 11 px, Titel in der Überschriftfarbe, optional großes Divi-Icon links (Icon-Schrift ETmodules):
   schritt-klick = Mauszeiger auf Fenster, schritt-liste = Liste, schritt-info = Info im Kreis. Maße wie auf der alten Seite (Icon 97 px, Abstand 15 px, Innenabstand 15 × 20 px). */
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .schritt-box {
  background: var(--gcid-2u9lxv08qm);
  border-radius: 11px;
  padding: 15px 20px;
  margin: 0 0 15px;
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .schritt-box h4 {
  margin: 0 0 .3em;
  font-family: var(--et_global_heading_font);
  font-size: clamp(1.2rem, 6vw, 1.375rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--gcid-heading-color);
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .schritt-box p { font-weight: 500; margin: 0 0 .8em; padding-bottom: 0; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .schritt-box > :last-child { margin-bottom: 0; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .schritt-klick,
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .schritt-liste,
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .schritt-info {
  display: grid;
  grid-template-columns: 97px 1fr;
  column-gap: 15px;
  align-items: start;
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .schritt-klick::before,
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .schritt-liste::before,
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .schritt-info::before {
  grid-column: 1;
  grid-row: 1 / span 20;
  font-family: ETmodules;
  font-weight: 400;
  font-size: 97px;
  line-height: 1;
  color: var(--gcid-heading-color);
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .schritt-klick::before { content: "\e60c"; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .schritt-liste::before { content: "\e600"; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .schritt-info::before { content: "p"; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .schritt-box > * { grid-column: 2; }
@media (max-width: 767px) {
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .schritt-klick,
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .schritt-liste,
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .schritt-info { grid-template-columns: 48px 1fr; column-gap: 12px; align-items: center; }
  /* Handy: Icon und Titel in einer Zeile, der Text darunter über die ganze Breite */
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .schritt-klick::before,
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .schritt-liste::before,
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .schritt-info::before { grid-row: 1; font-size: 48px; }
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .schritt-box > * { grid-column: 1 / -1; }
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .schritt-klick > h4,
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .schritt-liste > h4,
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .schritt-info > h4 { grid-column: 2; grid-row: 1; margin: 0; }
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .schritt-box > p:first-of-type { margin-top: .6em; }
}

/* Wichtig-Karte (Blurb mit Ausrufezeichen der alten Seite): weiße Karte mit weichem Schatten, Ecken 23 px (oben rechts eckig), großes Ausrufezeichen in der
   Primärfarbe links (Font Awesome „exclamation“ als CSS-Maske, 42 × 112 px wie dort), Titel als H4, Text im Gewicht 500. */
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .wichtig-box {
  display: grid;
  grid-template-columns: 42px 1fr;
  column-gap: 24px;
  align-items: center;
  background: #fff;
  border-radius: 23px 0 23px 23px;
  box-shadow: 0 2px 18px 0 rgba(0, 0, 0, .18);
  padding: 1rem 1.5rem;
  margin: 1.7em 0;
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .wichtig-box::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 20;
  width: 42px;
  height: 112px;
  background: var(--gcid-primary-color);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 512'%3E%3Cpath d='M176 432c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80zM25.26 25.199l13.6 272C39.499 309.972 50.041 320 62.83 320h66.34c12.789 0 23.331-10.028 23.97-22.801l13.6-272C167.425 11.49 156.496 0 142.77 0H49.23C35.504 0 24.575 11.49 25.26 25.199z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 512'%3E%3Cpath d='M176 432c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80zM25.26 25.199l13.6 272C39.499 309.972 50.041 320 62.83 320h66.34c12.789 0 23.331-10.028 23.97-22.801l13.6-272C167.425 11.49 156.496 0 142.77 0H49.23C35.504 0 24.575 11.49 25.26 25.199z'/%3E%3C/svg%3E") center / contain no-repeat;
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .wichtig-box > * { grid-column: 2; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .wichtig-box h4 {
  margin: 0 0 .3em;
  font-family: var(--et_global_heading_font);
  font-size: clamp(1.2rem, 6vw, 1.375rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--gcid-heading-color);
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .wichtig-box p { font-weight: 500; margin: 0 0 .8em; padding-bottom: 0; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .wichtig-box > :last-child { margin-bottom: 0; }
@media (max-width: 767px) {
  /* Handy: kleineres Ausrufezeichen links, Titel und Text daneben */
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .wichtig-box { grid-template-columns: 24px 1fr; column-gap: 16px; padding: 1rem; }
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .wichtig-box::before { width: 24px; height: 64px; }
}

/* Icon-Karte (weißer Blurb der alten Seite mit Titel und Symbol links, Beitrag „Starke Webseite gestalten“): weiße Karte, Ecken 11 px, Schatten
   `0 12px 18px -6px rgba(0,0,0,.3)`, Symbol 70 px in der Primärfarbe (Schrift FontAwesome, bei warnung und pfeile die Divi-Schrift ETmodules) mit 22 px Abstand zum linken Rand (auf der alten Seite klebte es am Rand, Elke wollte Luft),
   15 px Abstand, Titel als H4 in der Überschriftfarbe, Text im Gewicht 500. Maße wie auf der alten Seite gemessen. Am Handy Symbol und Titel in einer Zeile. */
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte {
  display: grid;
  grid-template-columns: 1fr;
  background: #fff;
  border-radius: 11px;
  box-shadow: 0 12px 18px -6px rgba(0, 0, 0, .3);
  padding: 15px 15px 15px 22px;
  margin: 2em 0;
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte[class*="symbol-"] {
  grid-template-columns: auto 1fr;
  column-gap: 15px;
  align-items: start;
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte[class*="symbol-"]::before {
  grid-column: 1;
  grid-row: 1 / span 20;
  font-family: FontAwesome;
  font-weight: 900;
  font-size: 70px;
  line-height: 1;
  color: var(--gcid-primary-color);
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.symbol-bombe::before { content: "\f1e2"; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.symbol-dokument::before { content: "\f573"; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.symbol-haken::before { content: "\f560"; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.symbol-daumen::before { content: "\f164"; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.symbol-anker::before { content: "\f13d"; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.symbol-kette::before { content: "\f0c1"; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.symbol-vortrag::before { content: "\f470"; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.symbol-aufgaben::before { content: "\f0ae"; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.symbol-stopp::before { content: "\f256"; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.symbol-lernen::before { content: "\f19d"; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.symbol-ausweis::before { content: "\f3e0"; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.symbol-stecker::before { content: "\f1e6"; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.symbol-stern::before { content: "\f005"; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.symbol-glocke::before { content: "\f562"; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.symbol-geldboerse::before { content: "\e100"; font-family: ETmodules; font-weight: 400; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.symbol-dreieck::before { content: "\f071"; font-size: 90px; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.symbol-dreieck { align-items: center; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.symbol-warnung::before { content: "q"; font-family: ETmodules; font-weight: 400; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.symbol-pfeile::before { content: "+"; font-family: ETmodules; font-weight: 400; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.symbol-wechsel::before { content: "\f2f1"; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.symbol-werkzeug::before { content: "\f7d9"; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.symbol-gruppe::before { content: "\f0c0"; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.symbol-stift::before { content: "j"; font-family: ETmodules; font-weight: 400; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.symbol-like::before { content: "\e106"; font-family: ETmodules; font-weight: 400; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.symbol-sprechblase::before { content: "v"; font-family: ETmodules; font-weight: 400; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.symbol-sprechblase-voll::before { content: "\e065"; font-family: ETmodules; font-weight: 400; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte[class*="symbol-"] > * { grid-column: 2; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte h4 {
  margin: 0 0 .3em;
  font-family: var(--et_global_heading_font);
  font-size: clamp(1.2rem, 6vw, 1.375rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--gcid-heading-color);
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte p { font-weight: 500; margin: 0 0 .8em; padding-bottom: 0; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte > :last-child { margin-bottom: 0; }
@media (max-width: 767px) {
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte[class*="symbol-"] { column-gap: 12px; align-items: center; padding-left: 16px; }
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte[class*="symbol-"]::before,
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.symbol-dreieck::before { grid-row: 1; font-size: 44px; }
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte[class*="symbol-"] > * { grid-column: 1 / -1; }
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte[class*="symbol-"] > h4 { grid-column: 2; grid-row: 1; margin: 0; }
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte[class*="symbol-"] > p:first-of-type { margin-top: .6em; }
}

/* Banner (dunkle Zeile der alten Seite mit Bild links, Text und Knopf rechts, Beitrag „WordPress Website erstellen lassen“): dunkel in der Textfarbe,
   Ecken 17 px (oben rechts eckig), Bild 226 px mit denselben Ecken, Text 28 px / 35 px in Hellgrau, Knopf in der Primärfarbe mit Ecken 9 px (oben rechts eckig)
   und weichem Schatten. Am Handy untereinander. */
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .banner-box {
  display: flex;
  align-items: center;
  gap: 2rem;
  background: var(--gcid-body-color);
  border-radius: 17px 0 17px 17px;
  padding: 2rem 5% 2rem 8%;
  margin: 2em 0;
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .banner-box .banner-bild { flex: 0 0 226px; margin: 0; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .banner-box .banner-bild .wp-block-image { margin: 0; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .banner-box .banner-bild img {
  display: block;
  width: 226px;
  height: 226px;
  max-width: 100%;
  object-fit: cover;
  border-radius: 17px 0 17px 17px;
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .banner-box .banner-text { flex: 1; min-width: 0; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .banner-box .banner-text p {
  margin: 0 0 1.2rem;
  padding: 0;
  color: #f3f5f7;
  font-size: 28px;
  line-height: 35px;
  font-weight: 500;
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .banner-box .wp-block-buttons { margin: 0; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .banner-box .wp-block-button__link {
  font-size: 17px;
  border-width: 0;
  border-radius: 9px 0 9px 9px;
  box-shadow: 0 12px 18px -6px rgba(0, 0, 0, .3);
}
@media (max-width: 767px) {
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .banner-box { flex-direction: column; align-items: flex-start; gap: 1.2rem; padding: 1.5rem; }
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .banner-box .banner-bild { flex: none; }
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .banner-box .banner-text p { font-size: 22px; line-height: 28px; }
}

/* Banner mit Bild rechts ([!banner-rechts], Beitrag „Kunden um Bewertung bitten“: links Text und Knopf, rechts auf der alten Seite ein Vorher/Nachher-Slider,
   hier als Bild): Bild im Seitenverhältnis 4:3, höchstens 240 px breit, eckig, mit dem Schatten des Sliders (0 12px 18px -6px, 30 %). Am Handy untereinander,
   Text zuerst. */
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .banner-box.banner-rechts .banner-bild { flex: 0 0 min(36%, 240px); }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .banner-box.banner-rechts .banner-bild img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
  box-shadow: 0 12px 18px -6px rgba(0, 0, 0, .3);
}
@media (max-width: 767px) {
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .banner-box.banner-rechts .banner-bild { flex: none; width: 100%; max-width: 280px; }
}

/* Testimonial-Kasten (Testimonial-Modul der alten Seite, Beitrag „Website relaunchen“): cremefarbene Karte (#fbf8f2) mit 2 px Linie links in der Überschriftfarbe und
   weichem Schatten, rundes Porträt 150 px links, Text umfließt es, darunter der Name klein (14 px, Gewicht 600). Maße wie auf der alten Seite gemessen
   (Innenabstand 42 × 50 px). Am Handy steht das Porträt oben. */
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .testimonial-box {
  display: flow-root;
  background: #fbf8f2;
  border-left: 2px solid var(--gcid-heading-color);
  box-shadow: 0 12px 18px -6px rgba(0, 0, 0, .3);
  padding: 42px 50px;
  margin: 2em 0 50px;
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .testimonial-box .wp-block-image { float: left; margin: 0 30px 10px 0; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .testimonial-box .wp-block-image img {
  display: block;
  width: 150px;
  height: 150px;
  max-width: none;
  border-radius: 50%;
  object-fit: cover;
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .testimonial-box p { font-weight: 500; margin: 0 0 .8em; padding-bottom: 0; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .testimonial-box p.testimonial-name { clear: both; margin: 32px 0 0; font-size: .875rem; font-weight: 600; line-height: 1.4; }
@media (max-width: 767px) {
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .testimonial-box { padding: 28px 22px; }
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .testimonial-box .wp-block-image { float: none; margin: 0 0 18px; }
}

/* Code-Kasten (Codeblock der alten Seite, Beitrag „WordPress-Login“): dunkel in der Textfarbe, weiße Schrift in Courier New, eckig, waagerecht scrollbar
   statt umzubrechen (Code bleibt lesbar), Zeilen und Einrückung bleiben erhalten. */
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .wp-block-code {
  background: var(--gcid-body-color);
  color: #fff;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(.85rem, 4vw, 1rem);
  line-height: 1.5;
  padding: 12px 16px;
  margin: 1.5em 0;
  border-radius: 0;
  overflow-x: auto;
  white-space: pre;
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .wp-block-code code {
  background: none;
  color: inherit;
  font: inherit;
  padding: 0;
  white-space: inherit;
}

/* Tipp-Kasten (Textkasten mit Überschrift der alten Seite): Karte mit Hintergrund, Ecken 21 px, H3 in der Primärfarbe, Text im Gewicht 500.
   Maße wie auf der alten Seite: Innenabstand 18 × 26 px, Abstand oben 35 px und unten 40 px, Überschrift 24 px. */
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .tipp-box {
  background: var(--gcid-2u9lxv08qm);
  border-radius: 21px;
  padding: 1.1rem 1.6rem;
  margin: 2.2rem 0 2.5rem;
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .tipp-box h3 {
  margin: 0 0 .3em;
  font-family: var(--et_global_heading_font);
  font-size: clamp(1.3rem, 6vw, 1.5rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--gcid-primary-color);
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .tipp-box p,
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .tipp-box li { font-weight: 500; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .tipp-box p { margin: 0 0 .6em; padding-bottom: 0; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .tipp-box ul { margin: 0 0 .6em; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .tipp-box > :last-child { margin-bottom: 0; }

/* Zwei Spalten mit Bild (bild-rechts, bild-links): Text, Überschrift und Knopf in der einen Spalte, das Bild mit weichem Schatten in der anderen;
   am Handy untereinander (Text zuerst). Maße wie auf der alten Seite: zwei gleich breite Spalten, Schatten 0 12px 18px -6px. */
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .bild-spalten {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
  margin: 2.5rem 0;
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .bild-spalten-text,
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .bild-spalten-bild { flex: 1 1 0; min-width: 0; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .bild-spalten-text > :first-child { margin-top: 0; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .bild-spalten-text h3.wp-block-heading { margin-top: 0; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .bild-spalten-text .wp-block-buttons { justify-content: center; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .bild-spalten-bild .wp-block-image { margin: 0; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .bild-spalten-bild img {
  display: block;
  max-width: 100%;
  height: auto;
  box-shadow: 0 12px 18px -6px rgba(0, 0, 0, .15);
}
@media (max-width: 767px) {
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .bild-spalten { flex-direction: column; gap: 1.5rem; }
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .bild-spalten.bild-links { flex-direction: column-reverse; }
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .bild-spalten-text,
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .bild-spalten-bild { flex: none; width: 100%; }
}

/* Knopf mit Download-Symbol (Datei herunterladen): Symbol „Datei mit Pfeil nach unten“ (Font-Awesome-Form, als Maske in der Textfarbe des Knopfes) vor dem Text */
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .mit-download .wp-block-button__link::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: .5em;
  vertical-align: -.12em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm76.45 211.36l-96.42 95.7c-6.65 6.61-17.39 6.61-24.04 0l-96.42-95.7C73.42 337.29 80.54 320 94.82 320H160v-80c0-8.84 7.16-16 16-16h32c8.84 0 16 7.16 16 16v80h65.18c14.28 0 21.4 17.29 11.27 27.36zM377 105L279.1 7c-4.5-4.5-10.6-7-17-7H256v128h128v-6.1c0-6.3-2.5-12.4-7-16.9z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm76.45 211.36l-96.42 95.7c-6.65 6.61-17.39 6.61-24.04 0l-96.42-95.7C73.42 337.29 80.54 320 94.82 320H160v-80c0-8.84 7.16-16 16-16h32c8.84 0 16 7.16 16 16v80h65.18c14.28 0 21.4 17.29 11.27 27.36zM377 105L279.1 7c-4.5-4.5-10.6-7-17-7H256v128h128v-6.1c0-6.3-2.5-12.4-7-16.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* CTA-Kasten und Knöpfe */
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .cta-box {
  background: var(--gcid-primary-color);
  border-radius: 11px;
  padding: 2rem;
  margin: 1.5em 0;
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .cta-box p,
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .cta-box h3 { color: #fff; }
/* Knopf wie der Divi-Knopf der Seite (CTA-Preset im Template): Primärfarbe, 2 px Rand, Ecken 3 px, Innenabstand .3em 1em, Schriftgröße über die
   Clamp-Variable der Textgröße (nicht in Pixeln), Gewicht 300. Im CTA-Kasten bleibt der Knopf magenta, weil der Kasten selbst die Primärfarbe hat. */
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .wp-block-button__link {
  background: var(--gcid-primary-color);
  color: #fff;
  border: 2px solid var(--gcid-primary-color);
  border-radius: 0 11px 11px 11px;          /* Elke 2026-10-12: Ecken 11 px, nur oben links eckig (vorher 3 px) */
  font-family: inherit;
  font-size: var(--gvid-r188d5dpm4);
  font-weight: 300;
  line-height: 1.7em;
  padding: .3em 1em;
  transition: .2s;
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .cta-box .wp-block-button__link {
  background: var(--gcid-secondary-color);
  border-color: var(--gcid-secondary-color);
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .wp-block-buttons { margin: 1.5em 0; }

/* FAQ (Rank-Math-Block) */
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .rank-math-block .rank-math-list { list-style: none; margin: 0; padding: 0; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .rank-math-list-item {
  border-bottom: 1px solid hsl(from var(--gcid-primary-color) h s l / .15);
  padding: .9rem 0;
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .rank-math-question {
  margin: 0 0 .4rem;
  font-size: 1.2rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--gcid-heading-color);
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .rank-math-answer {
  font-weight: 300;
  color: var(--gcid-primary-color);
  font-size: var(--gvid-r188d5dpm4);
  line-height: 1.3;
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .rank-math-answer p { margin: 0; }

/* FAQ als Aufklapp-Blöcke (Elke 2026-10-14, 13 Beiträge): sehen aus wie die FAQ-Karten der Seiten (DiviFlash): Grund hellgrau, Rand 1 px #d6d6d6, Ecken 9 px,
   Wirbel-Symbol 30 px links, Frage 1,2 rem in der Primärfarbe (Gewicht 400), Plus/Minus (ETmodules „L“ zu, „K“ auf, 24 px, #b8b9bb) rechts, 20 px Abstand zwischen den Karten.
   Das Attribut `name` am Block macht daraus ein Akkordeon (es ist immer nur eine Antwort offen). Das FAQ-Schema liegt in den Rank-Math-Daten des Beitrags (`rank_math_schema_FAQPage`). */
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .wp-block-details {
  background: var(--gcid-2u9lxv08qm);
  border: 1px solid #d6d6d6;
  border-radius: 9px;
  margin: 0 0 1.25rem;
  padding: 0;
  overflow: hidden;
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .wp-block-details > summary {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 30px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--gcid-primary-color);
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .wp-block-details > summary::-webkit-details-marker { display: none; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .wp-block-details > summary::marker { content: ""; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .wp-block-details > summary::before {
  content: "";
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  background: url("/wp-content/uploads/das-bekommst-du.png") center / contain no-repeat;
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .wp-block-details > summary::after {
  content: "L";
  flex: 0 0 auto;
  margin-left: auto;
  font-family: ETmodules;
  font-size: 24px;
  font-weight: 400;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  color: #b8b9bb;
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .wp-block-details[open] > summary::after { content: "K"; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .wp-block-details > :not(summary) {
  margin-left: calc(14px + 30px + .75rem);
  margin-right: 14px;
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .wp-block-details > :not(summary):last-child { margin-bottom: 14px; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .wp-block-details > p { padding-bottom: 0; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .wp-block-details > p + p,
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .wp-block-details > p + ul { margin-top: .8em; }
@media (max-width: 767px) {
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .wp-block-details > :not(summary) { margin-left: 14px; }
}

/* Merksatz: wie die Kürze-Box (helles Grau, gleiche Ecken und Abstände), aber ohne Rahmen */
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .merksatz {
  background: var(--gcid-2u9lxv08qm);
  border-radius: 0 23px 23px 23px;
  padding: var(--gvid-rbyrbzn8sa);
  margin: 1.5em 0;
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .merksatz p { font-weight: 500; padding-bottom: 0; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .merksatz p + p { margin-top: .8em; }

/* Gastbeitrag (Elke 2026-10-12, Beitrag „Branding im Webdesign“ von Jutta Gey): Enthält der Beitrag einen Autorinnenkasten mit der Klasse `gastbeitrag` (Callout
   `[!gastbeitrag]`), blendet das Theme die Autorinnenbox des Templates aus: die Sektion „Blogfooter“ im Body-Layout 641 trägt dafür die CSS-Klasse `autorinnenbox`
   (im Divi-Builder unter Sektion → Erweitert → CSS-Klasse gesetzt). Gilt nur für Beiträge ohne Divi-Builder. */
body:not(.et_pb_pagebuilder_layout):has(.et_pb_post_content .gastbeitrag) .autorinnenbox { display: none; }

/* Blaue Icon-Karte (Blurb der alten Seite auf Primärfarbe, Beitrag „Website-Wartung“: „Wenn dir das zu schwierig ist …“ mit weißem Werkzeug-Symbol): Karte in der Primärfarbe,
   Ecken `0 11px 11px 11px` (oben links eckig), Schatten `0 12px 18px -6px rgba(0,0,0,.3)`, Innenabstand 18 px oben und unten, 16 px links, 52 px rechts; Symbol 90 px
   (Divi e035) in Weiß, Text 19,2 px / 25,6 px im Gewicht 500 in Weiß, Links weiß und unterstrichen, 19,2 px Abstand zwischen den Absätzen. Handy: Symbol 56 px. */
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.karte-blau {
  background: var(--gcid-primary-color);
  border-radius: 0 11px 11px 11px;
  box-shadow: 0 12px 18px -6px rgba(0, 0, 0, .3);
  padding: 18px 52px 18px 16px;
  column-gap: 15px;
  align-items: start;
  margin: 2.2em 0 1.1em;
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.karte-blau::before {
  color: #fff;
  font-size: 90px;
  line-height: 90px;
  padding-top: 9px;
  width: 90px;
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.karte-blau.symbol-werkzeug::before { content: "\e035"; font-family: ETmodules; font-weight: 400; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.karte-blau p {
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.34;
  font-weight: 500;
  margin: 0 0 .8em;
  padding: 0;
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.karte-blau > :last-child { margin-bottom: 0; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.karte-blau a { color: #fff; text-decoration: underline; }
@media (max-width: 767px) {
  /* Handy (Elke 2026-10-12): Symbol 56 px über dem Text, Text über die volle Kartenbreite */
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.karte-blau[class*="symbol-"] { grid-template-columns: 1fr; row-gap: 6px; padding: 14px 16px; }
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.karte-blau[class*="symbol-"]::before { grid-column: 1; grid-row: 1; font-size: 56px; line-height: 56px; width: auto; padding-top: 0; }
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .icon-karte.karte-blau[class*="symbol-"] > * { grid-column: 1; }
}

/* Sprechblasen-Karte (Frage-und-Antwort-Blurbs der alten Seite, Beitrag „Website-Wartung“: „Ich habe wenig Änderungen …?“ / „Ganz klar: …“): hellgraue Karte
   (Merksatz-Grau) über die ganze Spaltenbreite, Ecken 13 px, Schatten `0 12px 18px -6px rgba(0,0,0,.16)`, Innenabstand oben und unten 9 px. Der Inhalt ist höchstens 550 px breit
   und mittig (wie der Blurb-Inhalt in Divi), links die Sprechblase 32 px in der Primärfarbe (Divi-Schrift ETmodules: `v` = Umriss für die Frage, `e065` = gefüllt für die
   Antwort), 15 px Abstand, Text 19,2 px / 25,6 px im Gewicht 700 in der Textfarbe. Am Handy ohne Zentrierung. */
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .sprech-karte {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 15px;
  align-items: start;
  background: var(--gcid-2u9lxv08qm);
  border-radius: 13px;
  box-shadow: 0 12px 18px -6px rgba(0, 0, 0, .16);
  padding: 9px max(16px, calc((100% - 550px) / 2));
  margin: 1.1em 0;
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .sprech-karte::before {
  grid-column: 1;
  grid-row: 1 / span 20;
  font-family: ETmodules;
  font-weight: 400;
  font-size: 32px;
  line-height: 32px;
  color: var(--gcid-primary-color);
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .sprech-karte.sprech-leer::before { content: "v"; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .sprech-karte.sprech-voll::before { content: "\e065"; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .sprech-karte > * { grid-column: 2; }
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .sprech-karte p {
  margin: 0;
  padding: 0;
  font-size: 1.2rem;
  line-height: 1.34;
  font-weight: 700;
  color: var(--gcid-body-color);
}
body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .sprech-karte p + p { margin-top: .6em; }
@media (max-width: 767px) {
  body:not(.et_pb_pagebuilder_layout) .et_pb_post_content .sprech-karte { padding: 9px 16px; }
}
/* ww-beitrag-css:end */

/* ww-formular-css:start (Stand 2026-10-16; Kontaktformulare: Schrift, Meldungen, Auswahlfelder im webwirbel-Design) */
/* Eingabefelder: Schrift Größe M (dynamisch), gut lesbare Farbe */
body .et_pb_contact_form_container .et_pb_contact_form .input,
body .et_pb_contact_form_container .et_pb_contact_form select,
body .et_pb_contact_form_container .et_pb_contact_form textarea {
  font-size: clamp(0.8rem, 6vw, 1rem);
  line-height: 1.3;
  color: var(--gcid-body-color, #242857);
}
body .et_pb_contact_form_container .et_pb_contact_form input.input:not([type=checkbox]):not([type=radio]),
body .et_pb_contact_form_container .et_pb_contact_form select {
  height: auto;
  min-height: 50px;
}
body .et_pb_contact_form_container .et_pb_contact_form .input::placeholder,
body .et_pb_contact_form_container .et_pb_contact_form textarea::placeholder {
  color: var(--gcid-body-color, #242857);
  opacity: .8;
}
/* Rückmeldung nach dem Absenden (Erfolg und Fehler) */
body .et_pb_contact_form_container .et-pb-contact-message,
body .et_pb_contact .et-pb-contact-message {
  font-size: clamp(1rem, 6vw, 1.3rem);
  line-height: 1.4;
}
body .et_pb_contact_form_container .et-pb-contact-message p,
body .et_pb_contact_form_container .et-pb-contact-message li {
  font-size: inherit;
}
/* Auswahlkästchen und Optionsknopf: Rahmen und Häkchen in Primary */
body .et_pb_contact_form_container .et_pb_contact_field_checkbox label,
body .et_pb_contact_form_container .et_pb_contact_field_radio label {
  font-size: clamp(0.8rem, 6vw, 1rem);
  line-height: 1.4;
}
body .et_pb_contact_form_container .et_pb_contact_field_checkbox label i,
body .et_pb_contact_form_container .et_pb_contact_field_radio label i {
  width: 22px !important;
  height: 22px !important;
  box-sizing: border-box;
  border: 2px solid var(--gcid-primary-color, #59609b) !important;
  background: #fff;
  box-shadow: none !important;
}
body .et_pb_contact_form_container .et_pb_contact_field_checkbox label i { border-radius: 6px !important; }
body .et_pb_contact_form_container .et_pb_contact_field_radio label i { border-radius: 50% !important; }
body .et_pb_contact_form_container .et_pb_contact_field input[type="checkbox"]:checked + label i::before {
  color: var(--gcid-primary-color, #59609b);
  font-size: 16px;
  line-height: 1;
}
body .et_pb_contact_form_container .et_pb_contact_field input[type="radio"]:checked + label i::before {
  background: var(--gcid-primary-color, #59609b);
  width: 10px;
  height: 10px;
}
/* Absende-Knopf bricht nicht um, Captcha rutscht bei Platzmangel darüber */
body .et_pb_contact_form_container .et_pb_contact_submit { white-space: nowrap; }
body .et_pb_contact_form_container .et_contact_bottom_container,
body .et_pb_contact_form_container .et_contact_bottom { flex-wrap: wrap; row-gap: 1rem; }
body .et_pb_contact_form_container .et_pb_contact_captcha_question { font-size: clamp(0.8rem, 6vw, 1rem); }
body .et_pb_contact_form_container .et_pb_contact_form select { padding-right: 2.6rem; }
/* ww-formular-css:end */

/* ww-menue-css:start (Stand 2026-10-16; Ausklappmenüs der Hauptnavigation breiter, Einträge in einer Zeile) */
@media (min-width: 981px) {
  #top-menu li ul.sub-menu { width: auto; min-width: 240px; }
  #top-menu li li a { width: auto; white-space: nowrap; }
  #top-menu li li ul.sub-menu { left: 100%; }
}
/* ww-menue-css:end */

/* ww-trennung-css:start (Stand 2026-10-16; Referenzen-Seite 186: Überschriften trennen Wörter automatisch, wenn nötig) */
body.page-id-186 #main-content :is(h1, h2, h3, h4, h5, h6) {
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
  hyphenate-limit-chars: 7 3 3;
}
/* ww-trennung-css:end */

/* ww-formular-felder-css:start (Stand 2026-10-19; Felder außerhalb der Kontaktformulare, nämlich Vorname im E-Mail-Formular und Suche im Blog: Schrift Größe M (dynamisch) wie in den Kontaktformularen statt Divi-Standard 14px; unter 16px zoomt Safari auf dem iPhone beim Antippen hinein) */
body .et_pb_subscribe .et_pb_contact_field input,
body .et_pb_subscribe .et_pb_contact_field textarea,
body .et_pb_search input.et_pb_s {
  font-size: clamp(0.8rem, 6vw, 1rem);
}
/* ww-formular-felder-css:end */