/* =========================================================================
   Defensia Design System
   Wird vom Plugin „Defensia Design System“ auf allen Seiten geladen.
   Alle Klassen sind mit dfa- geprefixt und kollidieren nicht mit dem Theme.
   ========================================================================= */

:root {
  --dfa-brand: #007336;
  --dfa-brand-dark: #0b3a22;
  --dfa-brand-darker: #082b19;
  --dfa-accent: #e20613;
  --dfa-accent-dark: #bb1313;
  /* Rot als *kleiner Text* auf hellem Grund. #e20613 erreicht auf #f4f4f4 nur
     4.39:1 — unter den 4.5:1, die WCAG für Fließtextgrößen verlangt. Für
     Flächen und Icons bleibt --dfa-accent: dort gelten 3:1, und Weiß auf
     #e20613 ergibt 4.92:1. */
  --dfa-accent-text: #bb1313;
  /* Rand von Eingabefeldern. --dfa-line (10 % Schwarz) ergibt aufgerechnet
     #e7e7e7 auf weißem und #dddddd auf hellgrauem Grund — also 1.24:1 bzw.
     1.23:1. WCAG 1.4.11 verlangt 3:1 für die Umrandung von Bedienelementen,
     und optisch verschwand das Feld schlicht: weiße Füllung auf weißer Karte
     ist 1.0:1, der Rand war das Einzige, was das Feld überhaupt markierte.
     #8a8a8a erreicht 3.45:1 gegen die Füllung und 3.14:1 gegen die Papierkarte. */
  --dfa-field-border: #8a8a8a;
  --dfa-field-border-strong: #6b6b6b;
  --dfa-ink: #101010;
  --dfa-muted: #6b6b6b;   /* war #757575 — auf #f4f4f4 nur 4.19:1 */
  --dfa-paper: #f4f4f4;
  --dfa-paper-2: #f2f2f2;
  --dfa-line: rgba(16, 16, 16, 0.1);
}

/* ---------- Basis ------------------------------------------------------- */

.dfa-eyebrow .elementor-heading-title {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dfa-accent);
}
.dfa-eyebrow--light .elementor-heading-title { color: #ffd7d9; }



/* ---------- Titelband-Varianten -----------------------------------------
   54 der 62 Seiten öffneten mit demselben Fotoband. Wer sich durch das
   Lexikon liest, sieht denselben Seitenanfang zwei Dutzend Mal.

   Drei Fassungen, zugeordnet nach Seitenart — nicht der Abwechslung wegen,
   sondern weil die Seiten unterschiedliche Aufgaben haben:
     Foto      Leistungs- und Übersichtsseiten (Bild als Stimmung)
     Geteilt   Schädlingsarten und Lexikon (Bild als Information)
     Kompakt   Rechtstexte (Bild wäre Dekoration) */

/* Geteilt: Text auf farbiger Fläche, Bild frei daneben statt unter einem
   Overlay begraben. Bei den Lexikoneinträgen lag über der Nahaufnahme des
   Tieres bisher 62 % Schwarz — man sah nichts mehr davon. */
.dfa-titleband--split .dfa-bandimg img {
  width: 100%; height: 320px; object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 24px 60px rgba(8, 43, 25, 0.45);
}
.dfa-titleband--split .dfa-crumb { margin-top: 14px; }

/* Kompakt: flacher Streifen ohne Bild. */
.dfa-titleband--plain .dfa-crumb { margin-top: 10px; }
.dfa-titleband--plain h1.elementor-heading-title {
  font-size: clamp(26px, 2.8vw, 40px) !important;
}

/* Bei beiden Varianten liegt der Text auf Markendunkelgrün statt auf einem
   abgedunkelten Foto — der Weißwert bleibt gleich, der Grund ist ruhiger. */
.dfa-titleband--split h1.elementor-heading-title,
.dfa-titleband--plain h1.elementor-heading-title { color: #fff; }

@media (max-width: 767px) {
  .dfa-titleband--split .dfa-bandimg img { height: 200px; }
}

/* ---------- Überschriften: fließende Größe -------------------------------
   Deutsche Komposita sind lang. "Schädlingsbekämpfung" hat 20 Zeichen und
   braucht bei 56 px rund 560 px Laufweite. Im Hero der Standortseiten ist die
   Textspalte aber nur 610 px breit — gemessen brach die H1 dort auf *fünf*
   Zeilen und stand als Textblock statt als Überschrift.

   Feste Pixelgrößen können das nicht lösen: dieselbe H1 sitzt an anderer
   Stelle über die volle Breite, wo 56 px richtig sind. Deshalb eine Spanne
   statt eines Werts — clamp() wählt die Größe nach verfügbarer Breite.
   Gemessen: 5 Zeilen -> 3 Zeilen. */

/* !important ist hier nötig, nicht bequem: Elementor schreibt die Schriftgröße
   je Widget als `.elementor-{seite} .elementor-element-{id} .elementor-heading-title`
   — Spezifität (0,3,0). Jede Klassenregel hier liegt darunter und verliert.
   Die feste Größe im Widget ist gewollt (sie verhindert das Erben der 40 px
   aus den Site-Settings); nur die *obere Grenze* wird hier flexibel gemacht. */
.dfa-hero h1.elementor-heading-title {
  font-size: clamp(30px, 3.4vw, 46px) !important;
  line-height: 1.14 !important;
}
.dfa-titleband h1.elementor-heading-title {
  font-size: clamp(28px, 3.6vw, 52px) !important;
  line-height: 1.14 !important;
}

/* Silbentrennung. Greift nur, wenn die Sprache am Element bekannt ist —
   defensia-motion.js setzt darum lang="de" auf den Inhaltsbereich. */
.dfa-hero h1.elementor-heading-title,
.dfa-titleband h1.elementor-heading-title,
.dfa-prose h2, .dfa-prose h3,
.dfa-svc-card .elementor-heading-title,
.dfa-lex-card .elementor-heading-title {
  hyphens: auto !important;
  overflow-wrap: break-word;
}

/* Überschriften in schmalen Karten dürfen nicht zu groß bleiben. */
.dfa-svc-card .elementor-heading-title,
.dfa-lex-card .elementor-heading-title,
.dfa-cust-card .elementor-heading-title {
  font-size: clamp(17px, 1.45vw, 21px) !important;
  line-height: 1.3 !important;
}


/* ---------- Begriffsraster ------------------------------------------------
   Für lange Aufzählungen kurzer Begriffe: die 18 betreuten Branchen auf
   /kunden/, die 21 Schädlingsarten auf /schaedlingsbekaempfung/.

   Beide Seiten kündigen ihre Liste im Text an und lieferten bisher nichts —
   der Inhalt lag im Original in einem <div>-Raster, das der Extraktor nicht
   kannte. Untereinander gesetzt wären 18 Zeilen eine halbe Bildschirmhöhe
   Kleingedrucktes. Als Raster wird daraus ein Abschnitt zum Überfliegen:
   drei Spalten, feste Zeilenhöhe, ein Haken je Eintrag. */

.dfa-taglist {
  list-style: none; margin: 6px 0 0; padding: 0;
  display: grid; gap: 10px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .dfa-taglist { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .dfa-taglist { grid-template-columns: repeat(3, 1fr); } }

.dfa-taglist > li {
  /* Mittig statt oben: die Einträge sind fast immer einzeilig, ein Haken am
     oberen Rand schwebt dann über der Grundlinie. */
  display: flex; align-items: center; gap: 10px;
  padding: 11px 15px; min-height: 46px;
  background: #fff;
  border: 1px solid var(--dfa-line);
  border-left: 3px solid var(--dfa-accent);
  font-size: 0.94rem; line-height: 1.4; color: var(--dfa-ink);
  transition: transform 260ms var(--dfa-ease, ease),
              box-shadow 260ms var(--dfa-ease, ease),
              border-left-color 260ms ease;
}
.dfa-taglist > li:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(16, 16, 16, 0.09);
  border-left-color: var(--dfa-brand);
}
.dfa-taglist > li::before {
  content: ""; flex: none; width: 14px; height: 14px;
  background-color: var(--dfa-brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M173.9%20439.4l-166.4-166.4c-10-10-10-26.2%200-36.2l36.2-36.2c10-10%2026.2-10%2036.2%200L192%20312.7%20432.1%2072.6c10-10%2026.2-10%2036.2%200l36.2%2036.2c10%2010%2010%2026.2%200%2036.2l-294.4%20294.4c-10%2010-26.2%2010-36.2%200z%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M173.9%20439.4l-166.4-166.4c-10-10-10-26.2%200-36.2l36.2-36.2c10-10%2026.2-10%2036.2%200L192%20312.7%20432.1%2072.6c10-10%2026.2-10%2036.2%200l36.2%2036.2c10%2010%2010%2026.2%200%2036.2l-294.4%20294.4c-10%2010-26.2%2010-36.2%200z%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
}

/* Auf hellgrauem Grund kehrt sich die Füllung um, damit die Kacheln
   nicht mit der Fläche verschwimmen. */
.dfa-band--paper .dfa-taglist > li { background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .dfa-taglist > li { transition: none; }
  .dfa-taglist > li:hover { transform: none; }
}

/* ---------- Fließtext ---------------------------------------------------
   57 der 62 Seiten sind echter Fließtext — Kacheln wären dort falsch. Was
   ihnen fehlte, war Typografie: Die Textspalte ist rund 800 px breit, bei
   15 px Mulish also gut 100 Zeichen pro Zeile. Lesbar sind 45–75. Beim Lesen
   verliert man die Zeile, und die Seite wirkt wie abgeladener Text statt wie
   gesetzter.

   Darum: etwas größere Schrift, begrenztes Satzmaß, und ein Rhythmus, bei dem
   Überschriften mehr Luft über als unter sich haben — sie gehören optisch zu
   dem, was sie ankündigen. */

.dfa-prose { font-size: 1.02rem; }

/* Satzmaß. Bilder, Tabellen und Formulare bleiben ausgenommen. */
.dfa-prose > p,
.dfa-prose > ul,
.dfa-prose > ol,
.dfa-prose > h2,
.dfa-prose > h3,
.dfa-prose > h4,
.dfa-prose .elementor-widget-text-editor p,
.dfa-prose .elementor-widget-text-editor ul,
.dfa-prose .elementor-widget-text-editor ol { max-width: 68ch; }

.dfa-prose p { line-height: 1.8; margin: 0 0 1.15em; }

/* Der erste Absatz nach der H1 führt in den Text ein und darf das zeigen. */
.dfa-prose > .elementor-widget-text-editor:first-of-type > .elementor-widget-container > p:first-child {
  font-size: 1.12rem; line-height: 1.65; color: var(--dfa-ink);
}

/* Rhythmus: viel Abstand darüber, wenig darunter. */
.dfa-prose h2 { margin: 2.1em 0 0.55em; }
.dfa-prose h3 { margin: 1.9em 0 0.5em; }
.dfa-prose h4 { margin: 1.6em 0 0.4em; }
.dfa-prose h2:first-child,
.dfa-prose h3:first-child { margin-top: 0; }

/* Listen: eigener Marker in Markenrot statt des Browser-Punkts. */
.dfa-prose ul { list-style: none; padding-left: 0; margin: 0 0 1.3em; }
.dfa-prose ul > li {
  position: relative; padding-left: 22px; margin-bottom: 0.55em;
  line-height: 1.7;
}
.dfa-prose ul > li::before {
  content: ""; position: absolute; left: 2px; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--dfa-accent);
}
.dfa-prose ol { padding-left: 1.3em; margin: 0 0 1.3em; }
.dfa-prose ol > li { margin-bottom: 0.55em; line-height: 1.7; }

/* Lange Aufzählungen — etwa die Ortslisten auf /unternehmen/ — laufen sonst
   endlos die Seite hinunter. Ab acht Einträgen mehrspaltig. */
@media (min-width: 760px) {
  .dfa-prose ul:has(> li:nth-child(8)) {
    columns: 2; column-gap: 44px; max-width: none;
  }
  .dfa-prose ul:has(> li:nth-child(8)) > li { break-inside: avoid; }
}
@media (min-width: 1100px) {
  .dfa-prose ul:has(> li:nth-child(16)) { columns: 3; }
}

/* Links im Fließtext als Links erkennbar. */
.dfa-prose a {
  color: var(--dfa-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.dfa-prose a:hover { color: var(--dfa-ink); }

.dfa-prose strong { color: var(--dfa-ink); font-weight: 700; }
.dfa-prose img { margin: 30px 0; }
.dfa-prose--legal p { font-size: 0.95rem; max-width: 74ch; }

.dfa-roundimg img { width: 100%; object-fit: cover; }

/* ---------- Buttons ----------------------------------------------------- */

.dfa-btn .elementor-button {
  border-radius: 0;
  font-weight: 700;
  padding: 15px 30px;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.dfa-btn .elementor-button:hover { transform: translateY(-2px); }
.dfa-btn--accent .elementor-button { background: var(--dfa-accent); color: #fff; }
.dfa-btn--accent .elementor-button:hover { background: var(--dfa-brand-dark); }
.dfa-btn--primary .elementor-button { background: var(--dfa-brand-dark); color: #fff; }
.dfa-btn--primary .elementor-button:hover { background: var(--dfa-accent); }
.dfa-btn--ghost .elementor-button {
  background: transparent; color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}
.dfa-btn--ghost .elementor-button:hover { background: #fff; color: var(--dfa-brand-dark); }
/* Elementor schreibt die Widget-Farben als
   `.elementor-{seite} .elementor-element-{id} .elementor-button` — das ist
   spezifischer als jede Klassenregel hier. Bei den Textlinks stand dadurch
   eine rote Fläche hinter dem Text, mit `padding: 6px 0` also ohne
   seitlichen Abstand. Deshalb hier ausnahmsweise !important: die Vorlagen
   sind korrigiert, aber bereits importierte Seiten tragen den alten Wert
   weiterhin in der Datenbank. */
.dfa-btn--link .elementor-button,
.dfa-btn--link .elementor-button:hover,
.dfa-btn--link .elementor-button:focus {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  /* Auch die Schriftfarbe muss erzwungen werden: die Widgets tragen
     button_text_color #FFFFFF aus dem alten Build. Ohne dies stünde weiße
     Schrift auf durchsichtigem Grund — unsichtbar statt roter Klotz. */
  color: var(--dfa-ink) !important;
  padding: 6px 0 !important;
  box-shadow: none !important;
  /* Elementor macht aus .elementor-button einen Flex-Container. Das ::after
     wird dadurch zum Flex-Item und rutscht in die nächste Zeile — der Pfeil
     stand unter dem Text statt daneben. inline-flex mit align-items hält
     beides in einer Zeile. */
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  /* Kein Farbübergang auf der Fläche. Eine laufende background-color-Transition
     hält den animierten Wert und setzt sich dabei über *jede* Deklaration
     hinweg — auch über inline !important. Genau daran ist diese Korrektur beim
     ersten Versuch gescheitert, bis sie mit transition:none messbar wurde. */
  transition: color 260ms ease !important;
  font-size: 0.9rem;
  position: relative;
}
.dfa-btn--link .elementor-button:hover { color: var(--dfa-accent-text) !important; }
.dfa-btn--link .elementor-button::after {
  /* Pfeil als Maske statt als Font-Awesome-Glyphe. Der Webfont wird auf dieser
     Installation nicht geladen (Elementor läuft im SVG-Symbolmodus), das
     content:"\f105" rendert deshalb als leeres Kästchen — genau die kleinen
     roten Quadrate unter jedem "Mehr erfahren". */
  content: ""; display: block; width: 0.5em; height: 0.85em; flex: none;
  background-color: var(--dfa-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20512%22%3E%3Cpath%20d%3D%22M64%20448c-8.2%200-16.4-3.1-22.6-9.4-12.5-12.5-12.5-32.8%200-45.3L169.4%20265%2041.4%20137C28.9%20124.5%2028.9%20104.2%2041.4%2091.7s32.8-12.5%2045.3%200l150.6%20150.6c12.5%2012.5%2012.5%2032.8%200%2045.3L86.6%20438.6C80.4%20444.9%2072.2%20448%2064%20448z%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20512%22%3E%3Cpath%20d%3D%22M64%20448c-8.2%200-16.4-3.1-22.6-9.4-12.5-12.5-12.5-32.8%200-45.3L169.4%20265%2041.4%20137C28.9%20124.5%2028.9%20104.2%2041.4%2091.7s32.8-12.5%2045.3%200l150.6%20150.6c12.5%2012.5%2012.5%2032.8%200%2045.3L86.6%20438.6C80.4%20444.9%2072.2%20448%2064%20448z%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
  transition: margin-left 0.3s ease;
}
.dfa-btn--link .elementor-button:hover::after { margin-left: 13px; }

/* ---------- Header ------------------------------------------------------ */

.dfa-topbar {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  min-height: 46px; font-size: 0.82rem; color: rgba(255, 255, 255, 0.85);
}
.dfa-topbar span { display: inline-flex; align-items: center; gap: 9px; }
.dfa-topbar i { color: var(--dfa-accent); font-size: 13px; }
/* Telefon und Mail in der Topbar sind 20 px hoch in einer 46 px hohen Leiste. Das
   Polster macht die ganze Leistenhöhe antippbar; der negative Rand hält das
   Layout unverändert. */
.dfa-topbar a { color: inherit; display: inline-block; padding: 13px 0; margin: -13px 0; }
.dfa-topbar a:hover { color: #fff; }
.dfa-topbar__right { margin-left: auto; }

.dfa-headbar { position: relative; z-index: 50; }
.dfa-logo img { max-height: 46px; width: auto; background: #fff; padding: 6px 12px; }
/* Rückfall für bereits installierte Header: ohne waagerechtes Padding
   berühren sich die Menüpunkte. Die Vorlage setzt es jetzt selbst; diese
   Regel hilft Installationen, die den Header noch nicht neu importiert haben. */
.dfa-nav .elementor-nav-menu > li > a,
.dfa-nav .elementor-nav-menu--main > li > a {
  padding-left: 15px; padding-right: 15px;
}

.dfa-nav .elementor-item {
  font-weight: 600; font-size: 0.95rem; padding: 28px 0 !important;
}
/* Hinweis: Diese Regel ist nur ein Zusatz, KEIN verlaesslicher Fallback.
   Im Test gegen die Live-Staging-Seite hat sie sich gegen die von Elementor
   erzeugte Widget-CSS nicht durchgesetzt — auch nicht mit !important.
   Der eigentliche Fix ist die explizite Typografie am Nav-Menu-Widget selbst
   (menu_typography_* in 02-theme-builder/header.json). */
.dfa-nav .elementor-nav-menu .elementor-item,
.elementor-widget-nav-menu.dfa-nav .elementor-nav-menu .elementor-item {
  font-size: 15px !important;
  line-height: 1.4 !important;
}
@media (max-width: 767px) {
  .dfa-nav .elementor-nav-menu .elementor-item,
  .elementor-widget-nav-menu.dfa-nav .elementor-nav-menu .elementor-item {
    font-size: 16px !important;
  }
}
/* ---------- Header: Layout und Abstände -----------------------------------
   Kundenrückmeldung 05.10.2026: "Elemente rechts, manche in der Mitte, schlechtes
   Padding oben — das Layout ist nicht gut". Gemessen auf der Staging-Seite:

   TELEFON (390 px). Der Header war 289 px hoch, bevor der erste Inhalt kam:
     · Topbar 151 px — vier Zeilen (Telefon+Mail / Zeiten / Adresse in zwei Zeilen)
     · die Notdienst-Nummer allein in einer eigenen Zeile, rechtsbündig, mit
       0 px Abstand nach oben (y = 151, genau die Oberkante der Leiste)
     · darunter das Logo, 0 px Abstand nach unten (Unterkante des Logos = Unterkante
       der Leiste), links; Warenkorb und Burger daneben, rechts
   Drei Ausrichtungen in einem Header, und kein einziger Zwischenraum.
   TABLET (768 px). Logo links, der Burger frei in der Mitte (x = 290), Telefon und
   Warenkorb rechts; Topbar auf zwei Zeilen umgebrochen (65 px).
   RECHNER (1440 px). Der Logo-Container trägt #f4f4f4 und ist 72 px hoch in einer
   77 px hohen Leiste — das Logo klebt oben und unten am Rand.

   Ziel: eine Zeile, links das Logo, rechts alles andere in einer Gruppe, alles auf
   einer Mittellinie, 12 px Luft oben und unten.

   Die Spalten werden über :has() gefunden statt über Elementor-IDs, weil die IDs
   bei jedem Neuimport wechseln und der Header im Editor angepasst wurde. */

/* Logo: keine graue Fläche mehr, eine weiße Platte mit Rand um das Bild. */
.dfa-headbar .e-con:has(> .elementor-widget-image) { background: transparent !important; }
.dfa-headbar .elementor-widget-image { padding: 0 !important; margin: 0 !important; }
/* flex statt inline: ein inline-Bild sitzt auf der Grundlinie und lässt darunter
   ~6 px Zeilenhöhe frei — das Logo stand dadurch 3 px über der Mittellinie von
   Warenkorb und Burger. */
.dfa-headbar .elementor-widget-image { display: flex; align-items: center; }
.dfa-headbar .elementor-widget-image a { display: block; line-height: 0; }
.dfa-headbar .elementor-widget-image img {
  display: block; height: 40px !important; width: auto !important; max-width: none !important;
  padding: 5px 10px; background: #fff; border-radius: 2px; box-sizing: content-box;
}

/* Rechner: Zeile mit fester Mindesthöhe, alles auf einer Mittellinie. */
.dfa-headbar .e-con:has(> .e-con > .dfa-nav) { align-items: center; min-height: 77px; }

@media (max-width: 1024px) {
  /* Die Zeile: eine Reihe, kein Umbruch, 12 px Luft oben und unten. */
  .dfa-headbar .e-con:has(> .e-con > .dfa-nav) {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    align-items: center !important; justify-content: flex-start !important;
    gap: 14px !important; min-height: 0; padding-block: 12px !important;
  }
  /* Reihenfolge: Logo | Telefon | Warenkorb + Burger. Das Logo schiebt den Rest
     nach rechts (margin-right: auto), statt dass die Mitte frei schwebt.
     !important, weil die Telefon-Spalte im Editor auf "Reihenfolge: Anfang"
     steht (order: -99999) — ohne das stand sie vor dem Logo. */
  .dfa-headbar .e-con:has(> .elementor-widget-image) {
    order: 1 !important; flex: 0 0 auto !important; width: auto !important; margin-right: auto !important;
  }
  /* Mit oder ohne Elementors Innen-Container .elementor-widget-container: die
     optimierte Ausgabe lässt ihn weg, die klassische hat ihn. */
  .dfa-headbar .e-con:has(> .elementor-widget-html .dfa-headcta) {
    order: 2 !important; flex: 0 0 auto !important; width: auto !important;
    align-self: center !important; margin: 0 !important;
  }
  .dfa-headbar .e-con:has(> .dfa-nav) {
    order: 3 !important; flex: 0 0 auto !important; width: auto !important;
    align-items: center !important; gap: 12px !important; align-self: center !important;
  }
  .dfa-headbar .dfa-nav { width: auto !important; }
  .dfa-headbar .dfa-headcta { display: flex; width: auto; }   /* blockbildend: keine Zeilenhöhe unter dem Kreis */
  .dfa-headbar .elementor-widget-image img { height: 34px !important; }
}

/* Unter 600 px nur die runde Telefontaste. Der Text bleibt für Screenreader und
   Spracheingabe erhalten (nicht display: none) — sonst hätte der Link keinen Namen. */
@media (max-width: 600px) {
  .dfa-headcta span {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .dfa-headbar .dfa-headcta { padding-left: 0; width: 44px; height: 44px; min-height: 44px; }   /* 44 px: Mindestgröße für Fingerziele */
  .dfa-headcta::before { width: 44px; height: 44px; margin-top: -22px; }
  .dfa-headcta i { left: 14px; margin-top: -8px; }
  .dfa-headbar .elementor-widget-image img { height: 30px !important; }
}

/* Topbar auf dem Telefon: eine Zeile statt vier. Telefon steht als Taste im
   Header, Mail und Anschrift im Footer; die Öffnungszeiten stehen nur hier. */
@media (max-width: 767px) {
  .dfa-topbar { min-height: 0; padding: 9px 0; justify-content: center; gap: 0; }
  .dfa-topbar span:not(:has(.fa-clock)) { display: none; }
}

/* ---------- Navigation: neun Einträge, Untermenü, Dropdown ----------------
   Kundenrückmeldung 05.10.2026: "Tapinoma magnum" bekommt einen eigenen Punkt
   in der Leiste, "Wir in den Medien" kommt dazu (als Untermenü von
   "Unternehmen" — neun Punkte nebeneinander passen nicht).

   AM RECHNER. Gemessen auf der Staging-Seite bei 1440 px: die Menüspalte ist
   638 px breit, die sieben Punkte brauchten 604 davon. Mit Tapinoma Magnum sind
   es 8 Punkte à 593 px Text plus 7 Abstände — bei 15 px und 27 px Abstand brach
   "Kontakt" in eine zweite Zeile.
     · die Spalte wächst in den freien Platz (flex-grow) — 638 → 670 px
     · Schrift 15 → 13.8 px, Abstand 27 → 14 px
     · unter 1200 px enger (12.8 px, 9 px), weil dort der Container selbst
       schrumpft; unter 1025 px schaltet Elementor ohnehin auf das Burger-Menü.
   Gemessen mit allen acht Punkten und Untermenü-Pfeil: eine Zeile bei 1440,
   1280, 1200, 1100 und 1030 px. Ein erster Versuch mit 18 px Abstand ließ
   "Kontakt" bei 1440 px wieder umbrechen — die Spalte ist 670 px breit, nicht
   mehr; der Abstand zum Logo davor zählt nicht dazu.
   Die Regeln stehen bei (0,5,0): die Schriftgröße weiter oben ist mit
   !important bei (0,4,0) gesetzt und würde sonst gewinnen. */
.e-con:has(> .dfa-nav) { flex-grow: 1; }

@media (min-width: 1200px) {
  .elementor-widget-nav-menu.dfa-nav { --e-nav-menu-horizontal-menu-item-margin: calc(14px / 2) !important; }
  .elementor-widget-nav-menu.dfa-nav .elementor-nav-menu--main .elementor-nav-menu .elementor-item {
    font-size: 0.86rem !important;
  }
}
@media (min-width: 1025px) and (max-width: 1199px) {
  .elementor-widget-nav-menu.dfa-nav { --e-nav-menu-horizontal-menu-item-margin: calc(9px / 2) !important; }
  .elementor-widget-nav-menu.dfa-nav .elementor-nav-menu--main .elementor-nav-menu .elementor-item {
    font-size: 0.8rem !important;
  }
}

/* DROPDOWN — Burger-Menü auf Telefon und Tablet, und das Untermenü am Rechner.
   Beide tragen die Klasse .elementor-nav-menu--dropdown und bekamen deshalb
   `.dfa-nav .elementor-item { padding: 28px 0 !important }` ab, eine Regel für
   die waagerechte Leiste: Gemessen bei 390 px standen die Beschriftungen bei
   x = 0, direkt am Bildschirmrand, und jede Zeile war 78 px hoch.
   Jetzt 22 px links und rechts, 15 px oben und unten (Zeile ~52 px, über den
   44 px, die als Mindestgröße für Fingerziele gelten), dazu eine feine Linie. */
.elementor-widget-nav-menu.dfa-nav .elementor-nav-menu--dropdown .elementor-item,
.elementor-widget-nav-menu.dfa-nav .elementor-nav-menu--dropdown .elementor-sub-item {
  padding: 15px 22px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.elementor-widget-nav-menu.dfa-nav .elementor-nav-menu--dropdown li:last-child > a { border-bottom: 0; }
/* Untermenü im Burger-Menü: eingerückt und eine Stufe leiser */
.elementor-widget-nav-menu.dfa-nav .elementor-nav-menu--dropdown .sub-menu .elementor-sub-item {
  padding-left: 40px !important;
  font-size: 0.94rem !important; font-weight: 500;
}
/* Der Pfeil zum Aufklappen sitzt rechts; die Beschriftung muss nicht darunter laufen. */
.elementor-widget-nav-menu.dfa-nav .elementor-nav-menu--dropdown a.has-submenu { padding-right: 56px !important; }
/* Untermenü am Rechner: ein wenig Breite, damit "Wir in den Medien" nicht umbricht. */
@media (min-width: 1025px) {
  .elementor-widget-nav-menu.dfa-nav .elementor-nav-menu--main .sub-menu { min-width: 230px; }
  .elementor-widget-nav-menu.dfa-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item {
    font-size: 0.9rem !important; white-space: nowrap;
  }
}

/* Die Klasse sitzt auf einem <a>. Elementor schreibt aus den Site-Settings
   `.elementor-kit-N a { color: … }` — Spezifität (0,1,1). Eine einzelne Klasse
   hat nur (0,1,0) und verliert, egal in welcher Reihenfolge die Dateien laden:
   auf dem Staging rendert die Notdienst-Nummer dadurch #101010 auf Dunkelgrün,
   also 1.49:1. Der zusätzliche `.elementor`-Vorfahre hebt die Regel auf (0,2,1)
   und damit sicher über die Kit-Regel.
   Regeln wie `.dfa-cities a` sind nicht betroffen: sie stehen bereits bei
   (0,1,1) und dieses Stylesheet lädt nach dem Kit. */
.elementor .dfa-headcta,
.elementor a.dfa-headcta {
  color: #fff;
}
.dfa-headcta {
  display: inline-flex; align-items: center; gap: 12px; justify-content: flex-end;
  color: #fff; font-weight: 700; width: 100%;
}
.elementor .dfa-headcta:hover { color: #fff; }
/* Der rote Kreis hinter dem Hörer. Die ursprüngliche Regel — `.dfa-headcta i` mit
   42 px, border-radius und Hintergrund — hat nie gegriffen: defensia-icons.css
   macht aus dem <i> eine Maske, deren Hintergrund *ist* das Symbol (weiß, 16 px).
   Ein Kreis dahinter ist auf demselben Element nicht möglich. Deshalb jetzt: den
   Kreis zeichnet ::before am Link, das Symbol liegt darüber (13 px = (42 − 16) / 2). */
.dfa-headcta { position: relative; min-height: 42px; padding-left: 54px; }
.dfa-headcta::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 42px; height: 42px; margin-top: -21px; border-radius: 50%;
  background: var(--dfa-accent);                    /* Hörer weiß darauf: 4.92:1 */
}
.dfa-headcta i { position: absolute; left: 13px; top: 50%; margin-top: -8px; z-index: 1; flex: none; }
.dfa-headcta small {
  display: block; font-weight: 500; font-size: 0.75rem;   /* 12 px — vorher 11.5 px */
  color: rgba(255, 255, 255, 0.65); text-transform: uppercase; letter-spacing: 0.1em;
}

/* ---------- Titelband --------------------------------------------------- */

.dfa-titleband h1.elementor-heading-title { line-height: 1.1; letter-spacing: -0.5px; }
.dfa-crumb {
  display: inline-block; margin-top: 14px; padding: 8px 16px;
  background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.8);
  font-size: 0.88rem;
}
.dfa-crumb a { color: #ffd7d9; }
.dfa-crumb a:hover { color: #fff; }

/* ---------- Hero (Startseite / Standort) -------------------------------- */

.dfa-hero { position: relative; }
.dfa-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, var(--dfa-ink) 58%, var(--dfa-brand-dark) 0);
  opacity: 0.78; pointer-events: none;
}
.dfa-hero > .e-con-inner { position: relative; z-index: 1; }
.dfa-hero h1.elementor-heading-title {
  color: #fff; line-height: 1.12; letter-spacing: -0.5px;
  overflow-wrap: break-word; hyphens: manual;
}
.dfa-hero-text { color: rgba(255, 255, 255, 0.82); max-width: 46ch; }

.dfa-badge {
  border: 2px solid var(--dfa-accent); padding: 18px 26px; text-align: center;
  background: rgba(8, 43, 25, 0.35); display: inline-block;
}
.dfa-badge .elementor-counter-number-wrapper {
  font-size: 2.5rem; font-weight: 700; color: #fff; line-height: 1; justify-content: center;
}
.dfa-badge .elementor-counter-title {
  color: #fff; font-weight: 600; font-size: 1rem; margin-top: 6px;
}

.dfa-frame { position: relative; }
.dfa-frame::before {
  content: ""; position: absolute; inset: 26px -26px -26px 26px;
  background: var(--dfa-brand); z-index: 0;
}
.dfa-frame img { position: relative; z-index: 1; width: 100%; height: 320px; object-fit: cover; }

.dfa-citychips { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; }
.dfa-citychips span {
  display: inline-flex; align-items: center; gap: 9px;
  color: #fff; font-weight: 600; font-size: 0.95rem;
}
.dfa-citychips i {
  width: 24px; height: 24px; border-radius: 50%; background: var(--dfa-accent);
  display: grid; place-items: center; font-size: 11px; flex: none;
}

/* ---------- USP-Leiste -------------------------------------------------- */

.dfa-usp .elementor-icon-box-wrapper {
  display: flex; align-items: center; gap: 14px; text-align: left;
}
.dfa-usp .elementor-icon-box-icon { margin: 0; flex: none; }
.dfa-usp .elementor-icon {
  width: 46px; height: 46px; border-radius: 50%; background: var(--dfa-accent);
  display: grid; place-items: center; color: #fff; font-size: 19px;
}
.dfa-usp .elementor-icon-box-title { margin: 0; }
.dfa-usp .elementor-icon-box-title,
.dfa-usp .elementor-icon-box-title a {
  color: #fff; font-weight: 600; font-size: 1rem; line-height: 1.3;
}

/* ---------- Über uns (Startseite) --------------------------------------- */

.dfa-about-media { position: relative; padding-bottom: 60px; }
.dfa-about-main img { width: 82%; margin-left: 18%; height: 400px; object-fit: cover; }
.dfa-about-small { position: absolute; top: 0; left: 0; width: 42%; z-index: 2; }
.dfa-about-small img { height: 190px; width: 100%; object-fit: cover; border: 8px solid #fff; }
.dfa-callcard {
  position: absolute; right: 0; bottom: 0; width: 260px; z-index: 3;
  background: var(--dfa-brand-dark); padding: 34px 30px 28px; text-align: center;
}
.dfa-callcard .elementor-heading-title { color: #fff; }
.dfa-callcard p {
  color: rgba(255, 255, 255, 0.72); font-size: 0.85rem;
  letter-spacing: 0.08em; text-transform: uppercase; margin: 0;
}
/* Telefon und Mail im Rückrufkasten: 146 x 19 px. Polster macht daraus ~43 px. */
.dfa-callcard a { color: #fff; font-weight: 700; font-size: 1.2rem; display: inline-block; padding: 8px 0; }
.dfa-callcard a:hover { color: #ffb3b8; }

.dfa-quote {
  border-left: 3px solid var(--dfa-accent); padding-left: 22px;
  font-style: italic; color: var(--dfa-ink);
}

/* ---------- Leistungskarten --------------------------------------------- */

.dfa-svc-card {
  background: #fff; position: relative;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.dfa-svc-card:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.25); }
.dfa-svc-card .dfa-svc-img img { width: 100%; height: 180px; object-fit: cover; }
.dfa-svc-badge {
  position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
  width: 54px; height: 54px; border-radius: 50%; background: var(--dfa-accent);
  border: 4px solid #fff; display: grid; place-items: center; z-index: 4;
  color: #fff; font-size: 22px; transition: background 0.35s ease;
}
.dfa-svc-card:hover .dfa-svc-badge { background: var(--dfa-brand); }

/* ---------- Listen ------------------------------------------------------ */

.dfa-checks .elementor-icon-list-items { display: grid; gap: 14px 30px; }
.dfa-checks--2 .elementor-icon-list-items { grid-template-columns: 1fr 1fr; }
.dfa-checks .elementor-icon-list-text { color: var(--dfa-ink); font-weight: 600; }

.dfa-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.dfa-steps li {
  counter-increment: dfa; position: relative; padding-left: 62px; min-height: 44px;
}
.dfa-steps li::before {
  content: "0" counter(dfa); position: absolute; left: 0; top: 0;
  width: 44px; height: 44px; border-radius: 50%; background: var(--dfa-brand);
  color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 0.9rem;
}
.dfa-steps strong { display: block; color: var(--dfa-ink); margin-bottom: 3px; }

/* ---------- Randspalten ------------------------------------------------- */

.dfa-sidebox { background: var(--dfa-paper); }
.dfa-sidebox--dark { background: var(--dfa-brand-dark); }
.dfa-sidebox--dark .elementor-heading-title,
.dfa-sidebox--dark p { color: #fff; }
.dfa-sidelist .elementor-icon-list-items { display: grid; gap: 9px; }
.dfa-sidelist .elementor-icon-list-item { border-bottom: 1px solid var(--dfa-line); padding-bottom: 9px; }
.dfa-sidelist .elementor-icon-list-item:last-child { border-bottom: 0; }
.dfa-sidelist .elementor-icon-list-text { font-size: 0.92rem; transition: color 0.3s ease; }
.dfa-sidelist .elementor-icon-list-item:hover .elementor-icon-list-text { color: var(--dfa-accent-text); }

.dfa-phonebig {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 1.5rem; font-weight: 700; color: var(--dfa-ink); margin-top: 6px;
}
.dfa-sidebox--dark .dfa-phonebig { color: #fff; }
.dfa-phonebig i { color: var(--dfa-accent); font-size: 20px; }

.dfa-formcard { background: #fff; box-shadow: 0 20px 50px rgba(16, 16, 16, 0.12); }

.dfa-facts { width: 100%; border-collapse: collapse; margin: 24px 0; }
.dfa-facts th, .dfa-facts td {
  text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--dfa-line);
  font-size: 0.92rem;
}
.dfa-facts th { width: 42%; color: var(--dfa-ink); background: var(--dfa-paper); }

/* ---------- Lexikon: weitere Einträge -------------------------------------
   Kundenrückmeldung 17.09.2026, Punkt 2. Die 21 Lexikoneinträge haben 30–123
   Wörter; gemessen bei 1440 px ist der Text 186–481 px hoch, die Randspalte mit
   allen Einträgen 1336 px. Neben jedem Eintrag standen 855–1150 px leer.
   Die Liste steht jetzt als Raster unter dem Text; in der Randspalte bleibt nur
   die Hotline. Die elf Schädlingsseiten (Ameisen, Schaben …) behalten ihre
   Randspalte — dort ist der Text etwa so hoch wie die Liste. */
.dfa-lexweitere > .e-con-inner,
.dfa-lexweitere.e-con-full {
  border-top: 1px solid var(--dfa-line);
  padding-top: 44px;
}
.dfa-lexweitere .elementor-widget-heading { margin-bottom: 8px; }

.dfa-sidelist.dfa-lexgrid .elementor-icon-list-items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 0;
}
.dfa-sidelist.dfa-lexgrid .elementor-icon-list-item,
.dfa-sidelist.dfa-lexgrid .elementor-icon-list-item:last-child {
  margin: 0 !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--dfa-line);
}
.dfa-sidelist.dfa-lexgrid .elementor-icon-list-item,
.dfa-sidelist.dfa-lexgrid .elementor-icon-list-item > a {
  align-items: flex-start;
}
.dfa-sidelist.dfa-lexgrid .elementor-icon-list-icon { padding-top: 4px; }
.dfa-sidelist.dfa-lexgrid .elementor-icon-list-text { line-height: 1.45; }

@media (max-width: 1024px) {
  .dfa-sidelist.dfa-lexgrid .elementor-icon-list-items { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
}
@media (max-width: 767px) {
  .dfa-sidelist.dfa-lexgrid .elementor-icon-list-items { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
  .dfa-lexweitere > .e-con-inner, .dfa-lexweitere.e-con-full { padding-top: 32px; }
}
/* Auf dem Telefon zwei Spalten statt einer: gemessen bei 390 px 782 statt
   1059 px Höhe. Ohne Silbentrennung — sie zerlegte die lateinischen Namen
   („La-sius“, „Para-vespula“); das längste Einzelwort passt auch bei 360 px. */
@media (max-width: 480px) {
  .dfa-sidelist.dfa-lexgrid .elementor-icon-list-items { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .dfa-sidelist.dfa-lexgrid .elementor-icon-list-text { font-size: 0.86rem; hyphens: manual; overflow-wrap: break-word; }
}

/* "Wir in den Medien": Mail-Adresse im dunklen Kasten. Weiß auf #0b3a22: 12.78:1. */
.dfa-presse-mail { margin: 10px 0 0; font-weight: 600; }
.dfa-sidebox--dark .dfa-presse-mail a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.dfa-sidebox--dark .dfa-presse-mail a:hover { color: #ffd7d9; }

/* ---------- Einsatzgebiet-Karte -----------------------------------------
   Kundenrückmeldung 05.10.2026: eine Karte mit Ortsmarken für das gesamte
   Einsatzgebiet. Statisches Inline-SVG — kein Kartendienst, damit beim Aufruf
   nichts an fremde Server geht (siehe _build/karte.py).

   Die Karte ist 560 x 890 Einheiten groß und skaliert mit der Spalte. Etiketten
   sind deshalb in Einheiten gesetzt, nicht in Pixeln: bei voller Breite 1:1, auf
   dem Telefon (~340 px) auf 0.6. Zwei Etikettensätze verhindern, dass dort die
   Schrift unlesbar klein wird: .k-d (alle 36 Orte, 12.5 Einheiten) am Rechner,
   .k-m (13 der 14 größten, 18.5 Einheiten ≈ 12.9 px bei 390 px Breite) ab 700 px
   abwärts. Wo auf dem Telefon kein Etikett steht (Bad Dürkheim, 27 Einheiten vom
   Hauptsitz), bleibt der Pin antippbar und der Ort steht im Text. Ein Etikett wird
   höchstens 40 Einheiten von seinem Pin gesetzt: eine erste Fassung mit bis zu 120
   stellte "Kaiserslautern" über "Saarbrücken" und las sich wie dessen zweiter Name. */

.dfa-karte {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: 56px; align-items: center;
}
.dfa-karte__text > p { max-width: 52ch; }
.dfa-karte__eyebrow {
  margin: 0 0 12px; font: 800 0.8rem/1.2 'Cabin', system-ui, sans-serif;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--dfa-accent-text);   /* 6.53:1 */
}
.dfa-karte__kopf {
  margin: 0 0 16px; font: 700 clamp(1.75rem, 3.2vw, 2.4rem)/1.15 'Cabin', system-ui, sans-serif;
  color: var(--dfa-ink); letter-spacing: -0.01em;
}
.dfa-karte__zahlen { display: flex; gap: 34px; margin: 26px 0 0; padding: 0; list-style: none; }
.dfa-karte__zahlen strong { display: block; font: 700 2.1rem/1 'Cabin', system-ui, sans-serif; color: var(--dfa-brand-dark); }
.dfa-karte__zahlen span { font-size: 0.85rem; color: var(--dfa-muted); }   /* 5.33:1 */

.dfa-karte__bild { margin: 0; }
.dfa-karte__svg { display: block; width: 100%; height: auto; border-radius: 4px; }
.dfa-karte__quelle { margin: 8px 0 0; font-size: 0.72rem; color: var(--dfa-muted); text-align: right; overflow-wrap: anywhere; }
.dfa-karte__quelle a { color: inherit; }

.k-grund   { fill: #082b19; }
.k-nachbar { fill: #0e3622; stroke: #1d5236; stroke-width: 0.8; }
.k-land    { stroke: #7fd4a6; stroke-width: 1; stroke-opacity: 0.55; stroke-linejoin: round; }
.k-bw { fill: #1a5c3c; }
.k-rp { fill: #226b47; }
.k-he { fill: #1d6040; }
.k-sl { fill: #2a7a52; }
.k-land-name {
  font: 700 11px 'Cabin', system-ui, sans-serif; letter-spacing: 0.22em;
  fill: rgba(255, 255, 255, 0.34); pointer-events: none;
}

.k-ring   { fill: rgba(226, 6, 19, 0.22); }
.k-punkt  { fill: #e20613; stroke: #fff; stroke-width: 1.6; }   /* Ring weiß: 12.78:1 gegen den Grund */
.k-kern   { fill: #fff; }
.k-pin    { cursor: default; }
a .k-pin  { cursor: pointer; }
a:focus-visible .k-ring { fill: rgba(255, 255, 255, 0.45); }
.k-leit   { stroke: rgba(255, 255, 255, 0.55); stroke-width: 0.8; }
.k-t {
  font: 600 12.5px 'Mulish', system-ui, sans-serif; fill: #fff;
  paint-order: stroke; stroke: #082b19; stroke-width: 3px; stroke-linejoin: round;
}
.k-t-hq { font-weight: 800; }
.k-m { display: none; }

/* Dieselben Orte als Text: für Suchmaschinen, Screenreader, Tastatur — und als
   Ersatz für die Etiketten, die die Karte auf dem Telefon weglässt. */
.dfa-karte__liste {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px;
  margin-top: 54px; padding-top: 40px; border-top: 1px solid var(--dfa-line);
}
.dfa-karte__land h3 { margin: 0 0 12px; font: 700 1rem/1.3 'Cabin', system-ui, sans-serif; color: var(--dfa-ink); }
.dfa-karte__land ul { margin: 0; padding: 0; list-style: none; }
.dfa-karte__land li { padding: 5px 0; font-size: 0.92rem; border-bottom: 1px solid var(--dfa-line); }
.dfa-karte__land li:last-child { border-bottom: 0; }
.dfa-karte__land a { color: var(--dfa-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.dfa-karte__land a:hover { color: var(--dfa-ink); }

@media (max-width: 1024px) {
  .dfa-karte__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .dfa-karte { grid-template-columns: 1fr; gap: 34px; }
  .dfa-karte__bild { max-width: 560px; margin-inline: auto; }
}
@media (max-width: 700px) {
  .k-d { display: none; }
  .k-m { display: inline; }
  .k-m .k-t { font-size: 18.5px; stroke-width: 4.2px; }
  .k-land-name { font-size: 15px; }
  .dfa-karte__quelle { text-align: left; }
  .dfa-karte__zahlen { gap: 26px; }
}
@media (max-width: 480px) {
  .dfa-karte__liste { grid-template-columns: 1fr; }
}

/* ---------- Karte mit Overlay ------------------------------------------- */

.dfa-morecard { position: relative; overflow: hidden; }
.dfa-morecard img { width: 100%; height: 420px; object-fit: cover; transition: transform 0.6s ease; }
.dfa-morecard:hover img { transform: scale(1.06); }
.dfa-morepanel {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  background: rgba(11, 58, 34, 0.94); padding: 26px 26px 28px;
}
.dfa-morepanel .elementor-heading-title { color: #fff; font-size: 1.1rem; }
.dfa-morepanel p { color: rgba(255, 255, 255, 0.8); font-size: 0.88rem; margin: 0; }

/* ---------- Kundenkarten ------------------------------------------------ */

.dfa-cust-card {
  background: #fff; box-shadow: 0 10px 40px rgba(16, 16, 16, 0.07);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.dfa-cust-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(16, 16, 16, 0.14); }
.dfa-cust-ribbon {
  background: var(--dfa-accent); color: #fff; text-align: center;
  font-weight: 700; font-size: 0.9rem; padding: 10px 12px;
}
.dfa-cust-ribbon .elementor-heading-title { color: #fff; }

/* ---------- Banner / CTA ------------------------------------------------ */

.dfa-bannercontact {
  display: flex; gap: 30px; justify-content: center; flex-wrap: wrap;
  color: #fff; font-weight: 700; margin-top: 26px;
}
.dfa-bannercontact a { color: #fff; display: inline-flex; align-items: center; gap: 10px; }
.dfa-bannercontact i { color: var(--dfa-accent); }

.dfa-contactlist { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 16px; }
.dfa-contactlist li { display: flex; align-items: flex-start; gap: 16px; }
.dfa-contactlist i {
  width: 44px; height: 44px; border-radius: 50%; background: var(--dfa-paper);
  color: var(--dfa-accent); display: grid; place-items: center; flex: none;
}
.dfa-contactlist small {
  display: block; font-size: 0.75rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dfa-muted);
}
.dfa-contactlist a { color: var(--dfa-ink); font-weight: 700; }
.dfa-contactlist a:hover { color: var(--dfa-accent-text); }

.dfa-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.dfa-chips span {
  border: 1px solid var(--dfa-line); padding: 9px 18px;
  font-weight: 600; font-size: 0.9rem; color: var(--dfa-ink);
}

.dfa-mapimg img { max-width: 420px; margin-inline: auto; }

/* ---------- FAQ / Akkordeon --------------------------------------------- */

.dfa-faq-media { position: relative; }
.dfa-faq-media img { width: 86%; height: 440px; object-fit: cover; }
.dfa-faqform {
  position: absolute; right: 0; bottom: -30px; width: 300px; z-index: 3;
  background: #fff; box-shadow: 0 20px 50px rgba(16, 16, 16, 0.16); padding: 26px 24px;
}
.dfa-acc .elementor-tab-title,
.dfa-acc .elementor-tab-title a,
.dfa-acc .elementor-tab-title .elementor-accordion-title {
  /* Ohne feste Werte erbt der Titel die globale Primary-Typografie: gemessen
     40 px in Markenrot auf Dunkelgrün — also 2.6:1 und dreimal zu groß. */
  color: #fff !important;
  font-family: 'Cabin', system-ui, sans-serif;
  font-size: 1rem; line-height: 1.4; font-weight: 700;
  text-transform: none; letter-spacing: 0;
}
.dfa-acc .elementor-tab-title {
  background: var(--dfa-brand-dark); font-weight: 700;
  padding: 15px 20px; border: 0; margin-bottom: 10px; transition: background 0.3s ease;
}
.dfa-acc .elementor-tab-title:hover { background: var(--dfa-brand); }
.dfa-acc .elementor-tab-title.elementor-active { background: var(--dfa-accent); }
.dfa-acc .elementor-tab-title a,
.dfa-acc .elementor-tab-title .elementor-accordion-icon { color: #fff; }
.dfa-acc .elementor-tab-content { border: 0; padding: 0 20px 18px; font-size: 0.92rem; }

/* ---------- Gründe ------------------------------------------------------ */

.dfa-reason-card {
  background: #fff; text-align: center;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.dfa-reason-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(16, 16, 16, 0.1); }
.dfa-reason-ic {
  width: 62px; height: 62px; border-radius: 50%; background: var(--dfa-brand);
  color: #fff; display: grid; place-items: center; font-size: 24px;
  margin: 0 auto 18px;
}
.dfa-reason-mark .elementor-heading-title { font-size: 2.6rem; line-height: 1; color: var(--dfa-accent); }
.dfa-reason-icon img {
  width: 58px; height: 58px; border-radius: 50%; background: var(--dfa-brand);
  padding: 16px; object-fit: contain; margin-inline: auto;
}

/* ---------- Lexikon- / Kachelkarten ------------------------------------- */

.dfa-lex-card {
  background: #fff; border: 1px solid var(--dfa-line);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.dfa-lex-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(16, 16, 16, 0.12); }
.dfa-lex-img { overflow: hidden; position: relative; }
.dfa-lex-img img { width: 100%; height: 200px; object-fit: cover; transition: transform 0.6s ease; }
.dfa-lex-card:hover .dfa-lex-img img { transform: scale(1.07); }

/* ---------- Städte-Leiste ----------------------------------------------- */

.dfa-cities {
  display: flex; align-items: center; justify-content: center;
  gap: 12px 30px; flex-wrap: wrap;
}
.dfa-cities strong {
  /* Markenrot auf Dunkelgrün ergibt gemessen nur 2.6:1. Heller Ton statt
     #E20613 — bleibt in der Markenfamilie, erreicht aber den Kontrast. */
  color: #ffb3b8; font-size: 0.8rem; letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* Auf der Startseite ist die Städteleiste ein Icon-List-Widget, nicht das
   HTML-Widget der Sektion. Dort liegt die Liste eine Ebene tiefer — ohne
   diese Regel steht sie untereinander statt nebeneinander. */
.dfa-cities .elementor-icon-list-items {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 10px 26px; width: 100%;
}
.dfa-cities .elementor-icon-list-item { margin: 0; }

/* Mindestgröße für Tippziele. Die Städtelinks waren 21 px hoch; WCAG 2.5.8
   verlangt 24×24 für alles, was kein Inline-Link im Fließtext ist. */
.dfa-cities a {
  color: rgba(255, 255, 255, 0.85); font-weight: 600; font-size: 0.95rem;
  display: inline-flex; align-items: center; min-height: 24px; padding: 2px 0;
}
.dfa-cities a:hover { color: #fff; }

/* ---------- Footer ------------------------------------------------------ */

.dfa-footer .elementor-heading-title { color: #fff; }
.dfa-footer p { color: rgba(255, 255, 255, 0.7); font-size: 0.92rem; }
.dfa-footlogo img { max-height: 54px; width: auto; background: #fff; padding: 8px 12px; }
.dfa-footlist .elementor-icon-list-items { display: grid; gap: 10px; }
.dfa-footlist .elementor-icon-list-text { color: rgba(255, 255, 255, 0.75); font-size: 0.92rem; }
.dfa-footlist .elementor-icon-list-item:hover .elementor-icon-list-text { color: #fff; }
.dfa-footcontact { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.dfa-footcontact li {
  display: flex; gap: 12px; color: rgba(255, 255, 255, 0.75); font-size: 0.92rem;
}
.dfa-footcontact i { color: var(--dfa-accent); margin-top: 5px; flex: none; width: 15px; }
.dfa-footcontact a { color: rgba(255, 255, 255, 0.75); }
.dfa-footcontact a:hover { color: #fff; }
.dfa-social { display: flex; gap: 10px; margin-top: 18px; }
.dfa-social a {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.1);
  color: #fff; display: grid; place-items: center; transition: background 0.3s ease;
}
.dfa-social a:hover { background: var(--dfa-accent); }
.dfa-footbottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0 18px; flex-wrap: wrap; padding: 8px 0;
  color: rgba(255, 255, 255, 0.6); font-size: 0.85rem;
}
.dfa-footlegal { display: flex; gap: 0 20px; flex-wrap: wrap; }
/* Die vier Rechtslinks waren 20 px hoch (Kontakt 49 x 20, Impressum 69 x 20 …) —
   unter dem Mindestmaß von 24 px (WCAG 2.5.8), auf dem Telefon zudem eng
   gestapelt. 12 px Polster oben und unten ergeben ~44 px, ohne die Zeile am
   Rechner sichtbar zu verändern: der Rand der Leiste gleicht es aus. */
.dfa-footlegal a { color: rgba(255, 255, 255, 0.6); display: inline-block; padding: 12px 0; }
.dfa-footlegal a:hover { color: #fff; }

/* ---------- 404 --------------------------------------------------------- */

.dfa-404 { text-align: center; }
.dfa-404 span {
  font-size: clamp(5rem, 16vw, 11rem); font-weight: 700; line-height: 1;
  color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, 0.35);
}
.dfa-404btns { display: flex; gap: 14px; justify-content: center; margin-top: 30px; }
.dfa-404btns a { padding: 15px 30px; font-weight: 700; }
.dfa-404btns .dfa-b1 { background: var(--dfa-accent); color: #fff; }
.dfa-404btns .dfa-b2 { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); }

/* ---------- Shop -------------------------------------------------------- */

.dfa-p-card {
  background: #fff; border: 1px solid var(--dfa-line); height: 100%;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.dfa-p-card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(16, 16, 16, 0.13); }
.dfa-p-media { position: relative; overflow: hidden; }
.dfa-p-media img { width: 100%; height: 260px; object-fit: cover; transition: transform 0.6s ease; }
.dfa-p-card:hover .dfa-p-media img { transform: scale(1.06); }
.dfa-p-badge {
  position: absolute; left: 14px; top: 14px; z-index: 3;
  background: var(--dfa-brand); color: #fff; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 12px;
}
.dfa-p-title .elementor-heading-title { font-size: 1.05rem; }
.dfa-p-price { font-weight: 700; color: var(--dfa-brand); font-size: 1.15rem; margin: 6px 0 12px; }
.dfa-p-price-big { font-size: 1.9rem; font-weight: 700; color: var(--dfa-brand); }
.dfa-p-cart .button,
.dfa-p-cart button {
  width: 100%; background: var(--dfa-brand-dark) !important; color: #fff !important;
  border-radius: 0 !important; font-weight: 700; padding: 14px 22px !important;
  transition: background 0.3s ease;
}
.dfa-p-cart .button:hover,
.dfa-p-cart button:hover { background: var(--dfa-accent) !important; }
.dfa-p-cart--big button { padding: 17px 34px !important; }
.dfa-p-crumb { font-size: 0.86rem; color: var(--dfa-muted); margin-bottom: 10px; }
.dfa-p-crumb a { color: var(--dfa-accent-text); }
.dfa-p-usp { list-style: none; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--dfa-line); display: grid; gap: 12px; }
.dfa-p-usp li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.92rem; }
.dfa-p-usp i { color: var(--dfa-brand); margin-top: 4px; flex: none; width: 18px; }
/* Die Kategorien kommen aus dem Pro-Widget "wc-categories". Es rendert sie
   wie Produkte: ein 286 x 286 großes Bild und darunter der Name. Gemessen
   auf /shop/ ergab das 385 px pro Eintrag und eine 1909 px hohe Randspalte
   neben einem 912 px hohen Produktraster — die Nebensache war doppelt so
   groß wie die Hauptsache, und die Kategoriekacheln sahen aus wie Produkte.

   Hier stattdessen eine Liste: kleines Vorschaubild links, Name und Anzahl
   rechts. Gemessen rund 76 px pro Zeile, also etwa 305 px für alle vier.

   Die Anzahl stand in <mark class="count"> mit 40 px in Cabin Bold — größer
   als der Kategoriename daneben (14.9 px). Auch das ist die globale
   Typografie "Primary", die dasselbe Widget schon den Produkttiteln
   aufgedrückt hat; deshalb hier dieselbe Behandlung mit !important. */

.dfa-shopcats ul.products {
  display: grid !important;
  grid-template-columns: 1fr !important;   /* auch auf Tablet und Telefon eine Spalte */
  gap: 0 !important;
  margin: 0; padding: 0; list-style: none;
}
.dfa-shopcats li.product-category {
  margin: 0 !important; padding: 0 !important;
  border-bottom: 1px solid var(--dfa-line);
  background: none;
}
.dfa-shopcats li.product-category:last-child { border-bottom: 0; }
.dfa-shopcats li.product-category > a {
  display: flex !important; align-items: center; gap: 14px;
  padding: 11px 0 !important; text-decoration: none;
}
.dfa-shopcats li.product-category img {
  flex: 0 0 84px; width: 84px !important; height: 56px !important;
  object-fit: cover; border-radius: 3px;
  margin: 0 !important;
  transition: opacity 0.25s ease;
}
.dfa-shopcats li.product-category:hover img { opacity: 0.85; }
.dfa-shopcats .woocommerce-loop-category__title {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin: 0 !important; padding: 0 !important;
  font-family: 'Cabin', system-ui, sans-serif !important;
  font-size: 0.92rem !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  color: var(--dfa-ink) !important;        /* 19.03:1 */
}
.dfa-shopcats li.product-category:hover .woocommerce-loop-category__title { color: var(--dfa-accent-text) !important; }
/* Auf dem Tablet steht die Randspalte nur 177 px breit. Nach dem 84er
   Vorschaubild blieben 79 px für den Namen — gemessen ragten "Vergrämung (1)"
   und "Monitoring (2)" heraus. Kleineres Bild, und die Anzahl darf umbrechen. */
.dfa-shopcats .woocommerce-loop-category__title { flex-wrap: wrap; }
@media (max-width: 1024px) {
  .dfa-shopcats li.product-category > a { gap: 12px; }
  .dfa-shopcats li.product-category img {
    flex: 0 0 60px; width: 60px !important; height: 44px !important;
  }
}

.dfa-shopcats .woocommerce-loop-category__title .count {
  flex: 0 0 auto;
  background: none !important;             /* <mark> bringt sonst einen gelben Grund mit */
  font-family: 'Mulish', system-ui, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  color: var(--dfa-muted) !important;      /* 5.33:1 */
  padding: 0 !important;
}

/* ---------- WooCommerce ---------------------------------------------------
   Gemessen auf defensia.paint-ds.net.za, nachdem die sechs Produkte
   importiert waren.

   Die Ursache der zu großen Schrift steht in der Datei, die Elementor für die
   Archivvorlage schreibt:

     .elementor-widget-woocommerce-archive-products.elementor-wc-products
       ul.products li.product .woocommerce-loop-product__title
       { font-size: var(--e-global-typography-primary-font-size) }

   Das Produkt-Widget legt die globale Typografie „Primary" auf den
   Produkttitel — und Primary ist der H2-Stil der Seite: 40 px. In einer
   281 px breiten Rasterzelle ist das eine Schlagzeile, kein Produktname.

   Diese Regel hat die Spezifität (0,5,2). Sie Selektor für Selektor zu
   überbieten ist dasselbe Spiel wie beim Akkordeon; deshalb hier wie dort
   !important, und zwar bewusst: der Wert kommt aus einer Einstellung, die für
   Überschriften gedacht ist, nicht für dieses Element. */

/* Rasterspalten. `1fr` heißt `minmax(auto, 1fr)` — die Untergrenze ist die
   Mindestbreite des Inhalts, nicht null. Solange die Titel 40 px groß waren,
   sprengte das die Spalten: gemessen bei 768 px drei Spalten von 280.9, 298.6
   und 353.1 px in einem 503 px breiten Container, also 445 px waagerechter
   Überstand auf dem Tablet. min-width: 0 auf den Rasterkindern setzt diese
   Untergrenze auf null; der Umbruch im Titel fängt lange Wörter ab. */
.woocommerce ul.products.elementor-grid > li.product { min-width: 0; }

/* Produktraster */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Cabin', system-ui, sans-serif !important;
  font-size: 1.15rem !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: var(--dfa-ink) !important;
  padding: 0 0 6px !important;
  margin: 0 !important;
  overflow-wrap: break-word;
  hyphens: auto;
}
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title { color: var(--dfa-accent-text) !important; }

.woocommerce ul.products li.product .price {
  font-family: 'Cabin', system-ui, sans-serif !important;
  font-size: 1.05rem !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  color: var(--dfa-brand) !important;   /* 5.99:1 auf Weiß */
  margin: 0 0 12px !important;
  display: block;
}
/* Der alte Preis stand genauso groß und genauso grün neben dem neuen — zwei
   gleichwertige Zahlen ohne erkennbaren Angebotscharakter. */
.woocommerce ul.products li.product .price del,
.woocommerce div.product .summary .price del,
.elementor-widget-woocommerce-product-price .price del {
  font-size: 0.82em !important;
  font-weight: 400 !important;
  color: var(--dfa-muted) !important;   /* 5.33:1 */
  opacity: 1;
  margin-right: 7px;
}
.woocommerce ul.products li.product .price ins,
.woocommerce div.product .summary .price ins,
.elementor-widget-woocommerce-product-price .price ins { text-decoration: none; }

.woocommerce ul.products li.product img { margin-bottom: 14px; }

/* „In den Warenkorb" im Raster. Grün, nicht rot: Rot ist auf dieser Seite die
   Farbe für „rufen Sie uns an", Grün die Marken- und damit die Kauffarbe. Die
   Einzelproduktseite setzt den Knopf bereits auf #0b3a22; das Raster zog
   vorher den WooCommerce-Grauton #515151. */
.woocommerce ul.products li.product .button {
  display: block; width: 100%; box-sizing: border-box;
  background: var(--dfa-brand) !important;
  color: #fff !important;                /* 5.99:1 */
  font-family: 'Cabin', system-ui, sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 14px 12px !important;
  border-radius: 3px; border: 0;
  text-align: center;
  transition: background 0.25s ease, transform 0.25s ease;
}
.woocommerce ul.products li.product .button:hover {
  background: var(--dfa-brand-dark) !important;   /* 12.78:1 */
  transform: translateY(-2px);
}
.woocommerce ul.products li.product .added_to_cart {
  display: inline-block; margin-top: 8px;
  font-size: 0.85rem; color: var(--dfa-accent-text); text-decoration: underline;
}

/* Sortierung und Trefferzahl über dem Raster */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
  font-family: 'Mulish', system-ui, sans-serif;
  font-size: 0.9rem; color: var(--dfa-muted);
}
.woocommerce .woocommerce-ordering select {
  padding: 10px 12px; border: 1px solid var(--dfa-field-border);
  border-radius: 3px; background: #fff; color: var(--dfa-ink);
  max-width: 100%;
}

/* Die Rückruf-Karte trägt keine Innenabstände aus der Vorlage — gemessen
   padding: 0. Die drei übrigen .dfa-formcard-Karten setzen ihr Padding in der
   Vorlage und enthalten zusätzlich eine Überschrift; dort greift :only-child
   nicht, es kann sich also nichts addieren. */
.dfa-formcard > .elementor-widget-shortcode:only-child { padding: 34px 32px; }

/* Einzelprodukt */
/* clamp statt fester Größe: 32 px sind auf dem Telefon ein Drittel der
   Bildschirmbreite, sobald der Produktname zwei Wörter hat. */
.woocommerce div.product h1.product_title,
.elementor-widget-woocommerce-product-title h1 {
  font-size: clamp(1.6rem, 4.5vw, 2rem) !important; line-height: 1.2 !important;
  color: var(--dfa-ink) !important; margin-bottom: 10px !important;
}
.elementor-widget-woocommerce-product-price .price { font-size: 1.75rem !important; }

.woocommerce div.product .product_meta {
  font-size: 0.85rem; color: var(--dfa-muted);
  border-top: 1px solid var(--dfa-line); padding-top: 14px; margin-top: 18px;
}
.woocommerce div.product .product_meta a { color: var(--dfa-accent-text); }

/* Reiter „Beschreibung / Weitere Informationen / Bewertungen".
   Auf schmalen Schirmen passen die drei nicht nebeneinander; statt sie
   umbrechen zu lassen, scrollen sie waagerecht in ihrer eigenen Leiste. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0; margin: 0 0 22px; border-bottom: 1px solid var(--dfa-line);
  display: flex; flex-wrap: nowrap; gap: 26px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: none; border: 0; border-radius: 0; margin: 0; padding: 0;
  flex: 0 0 auto; white-space: nowrap;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font: 700 0.85rem/1 'Cabin', system-ui, sans-serif;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--dfa-muted); padding: 0 0 12px; display: block;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--dfa-ink); border-bottom-color: var(--dfa-accent);
}
/* WooCommerce wiederholt den Reiternamen als Überschrift direkt darunter —
   „Beschreibung" stand zweimal übereinander. */
.woocommerce div.product .woocommerce-Tabs-panel > h2:first-child { display: none; }
.woocommerce div.product .woocommerce-Tabs-panel { font-size: 0.98rem; line-height: 1.75; color: var(--dfa-ink); max-width: 78ch; }

/* Ähnliche Produkte */
.woocommerce .related > h2, .woocommerce .up-sells > h2, .woocommerce .cross-sells > h2 {
  font-size: 1.6rem !important; line-height: 1.25 !important; margin-bottom: 24px !important;
}


/* ---------- Warenkorb im Kopf und Seitenpanel ----------------------------
   Elementor Pro, Widget "Menu Cart", als Seitenwarenkorb (side-cart).

   Zum Symbol: die Seite läuft im Inline-SVG-Modus für Icons — Elementor
   zeichnet Symbole als <svg class="e-font-icon-svg">, nicht als Icon-Font.
   Geprüft am mobilen Menüschalter, der bereits e-eicon-menu-bar so ausgibt.
   Deshalb braucht das Warenkorbsymbol weder eicons noch die Masken aus
   defensia-icons.css; es kommt fertig aus dem Widget.

   Zur Farbe: der Umschalter steht auf der dunkelgrünen Kopfleiste. Elementors
   Standardfarbe dafür ist #69727d — gemessen 2.62:1 gegen #0b3a22, also
   deutlich unter den 4.5:1. Weiß ergibt 12.78:1. */

.dfa-cart .elementor-menu-cart__toggle_button {
  padding: 6px 4px;
  background: transparent;
  border: 0;
  color: #fff;
}
.dfa-cart .elementor-menu-cart__toggle_button:hover { background: transparent; opacity: 0.8; }
.dfa-cart .elementor-menu-cart__toggle_button .elementor-button-text { display: none; }
.dfa-cart .elementor-menu-cart__toggle_button svg,
.dfa-cart .elementor-menu-cart__toggle_button i {
  font-size: 24px; width: 24px; height: 24px; fill: currentColor; color: #fff;
}

/* Der Zähler. Elementor gestaltet ihn über eigene Custom Properties
   (--items-indicator-background-color, Rückfallwert #d9534f) hinter einem
   Selektor mit der Spezifität (0,5,0). Dagegen anzuschreiben hieße, ihn Klasse
   für Klasse zu überbieten; die Eigenschaften zu setzen ist der vorgesehene
   Weg — und der, der beim nächsten Pro-Update noch gilt.

   Markenrot allein ergibt gegen die dunkelgrüne Kopfleiste nur 2.60:1 — unter
   den 3:1, die WCAG 1.4.11 für die Abgrenzung eines Bedienelements verlangt.
   Der weiße Ring übernimmt das mit 12.78:1. Er ist nicht Zierde, sondern das,
   was die Blase überhaupt abgrenzt. */
.dfa-cart {
  --items-indicator-background-color: var(--dfa-accent);
  --items-indicator-text-color: #fff;   /* 4.92:1 auf #e20613 */
}
.dfa-cart .elementor-button-icon-qty {
  box-shadow: 0 0 0 2px #fff;
  font-family: 'Cabin', system-ui, sans-serif;
  font-weight: 700;
}

/* ---- Das Panel ---- */
.dfa-cart .elementor-menu-cart__main {
  --cart-background-color: #fff;
  --cart-padding: 28px 26px;
  width: min(400px, 100vw);
  box-shadow: -20px 0 60px rgba(16, 16, 16, 0.20);
  font-family: 'Mulish', system-ui, sans-serif;
}
/* Das Widget kennt keine Überschrift. Ohne sie beginnt das Panel unvermittelt
   mit der ersten Produktzeile. Der Text steht hier im Stylesheet, weil es an
   der Vorlage keinen Platz dafür gibt — bei einer zweiten Sprache gehört er
   dorthin verschoben. */
.dfa-cart .widget_shopping_cart_content::before {
  content: "Ihr Warenkorb";
  display: block;
  font: 700 1.2rem/1.2 'Cabin', system-ui, sans-serif;
  color: var(--dfa-ink);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--dfa-line);
  margin-bottom: 4px;
}
.dfa-cart .elementor-menu-cart__close-button {
  color: var(--dfa-muted); font-size: 22px; opacity: 1;
}
.dfa-cart .elementor-menu-cart__close-button:hover { color: var(--dfa-accent-text); }

.dfa-cart .elementor-menu-cart__product {
  padding: 16px 0;
  border-bottom: 1px solid var(--dfa-line);
}
.dfa-cart .elementor-menu-cart__product-image img { width: 64px; height: 64px; object-fit: cover; border-radius: 3px; }
.dfa-cart .elementor-menu-cart__product-name,
.dfa-cart .elementor-menu-cart__product-name a {
  font: 700 0.95rem/1.35 'Cabin', system-ui, sans-serif;
  color: var(--dfa-ink);            /* 19.03:1 */
  text-decoration: none;
}
.dfa-cart .elementor-menu-cart__product-name a:hover { color: var(--dfa-accent-text); }
.dfa-cart .elementor-menu-cart__product-price {
  font-size: 0.88rem; color: var(--dfa-muted);   /* 5.33:1 */
}
.dfa-cart .elementor-menu-cart__product-price .woocommerce-Price-amount { color: var(--dfa-ink); font-weight: 700; }
.dfa-cart .elementor-menu-cart__product-remove a { color: var(--dfa-muted); }
.dfa-cart .elementor-menu-cart__product-remove a:hover { color: var(--dfa-accent-text); }

/* show_divider zeichnet hier einen kompletten Rahmen in #d5d8dc — die
   Zwischensumme saß in einem grauen Kasten. Eine Linie nach oben genügt. */
.dfa-cart .elementor-menu-cart__subtotal {
  font: 700 1.05rem/1.3 'Cabin', system-ui, sans-serif;
  color: var(--dfa-ink);
  border: 0;
  border-top: 1px solid var(--dfa-line);
  padding: 18px 0;
  text-align: start;
}
.dfa-cart .elementor-menu-cart__subtotal strong {
  display: block;
  font: 700 0.72rem/1.4 'Cabin', system-ui, sans-serif;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--dfa-muted); margin-bottom: 4px;
}

/* Ein Knopf, ein Link. Zwei gleich große, vollbreite Großbuchstaben-Knöpfe
   untereinander wogen im 400 px schmalen Panel schwerer als der Inhalt
   darüber — gemessen 2 x 46 px plus Abstand. "Zur Kasse" ist die Handlung,
   "Warenkorb ansehen" ist ein Umweg dorthin und braucht keine Fläche. */
.dfa-cart .elementor-menu-cart__footer-buttons {
  display: flex; flex-direction: column; align-items: stretch; gap: 12px;
}
/* Die Kopfvorlage schreibt sieben Regeln, die dem Warenkorb-Widget die globale
   Typografie „Primary" aufdrücken — dieselben 40 px wie schon bei den
   Produkttiteln. Fünf davon überbieten die Regeln hier von selbst; zwei nicht:

     .elementor-widget-woocommerce-menu-cart
       .elementor-menu-cart__footer-buttons a.elementor-button--checkout
       { font-size: var(--e-global-typography-primary-font-size) }

   Das ist (0,3,1) gegen (0,2,0) — gemessen standen beide Knöpfe im Panel auf
   40 px. Deshalb hier die Schriftgrößen ausdrücklich, und die Zeile für
   „Warenkorb ansehen" spezifischer als die allgemeine darüber, sonst zieht
   sie sich deren Versalien mit. */
.dfa-cart .elementor-menu-cart__footer-buttons .elementor-button {
  font-family: 'Cabin', system-ui, sans-serif !important;
  font-size: 0.8rem !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}
.dfa-cart .elementor-menu-cart__footer-buttons a.elementor-button--view-cart {
  font-family: 'Mulish', system-ui, sans-serif !important;
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
/* Auch die leere Meldung und der Umschalter hängen an derselben Vorgabe. Beim
   Umschalter fällt es nur nicht auf, weil der Text ausgeblendet ist — wer
   „Zwischensumme anzeigen" einschaltet, bekäme sie sonst in 40 px. */
.dfa-cart .woocommerce-mini-cart__empty-message {
  font-size: 0.95rem !important; line-height: 1.6 !important;
}
.dfa-cart .elementor-menu-cart__toggle_button { font-size: 0.9rem !important; }
.dfa-cart .elementor-button--checkout {
  order: -1;
  width: 100%; display: block; text-align: center;
  padding: 12px 18px; border-radius: 3px;
  background: var(--dfa-brand); color: #fff;      /* 5.99:1 */
  border: 1px solid var(--dfa-brand);
  font: 700 0.8rem/1.25 'Cabin', system-ui, sans-serif;
  letter-spacing: 0.04em; text-transform: uppercase;
  transition: background 0.25s ease;
}
.dfa-cart .elementor-button--checkout:hover { background: var(--dfa-brand-dark); border-color: var(--dfa-brand-dark); }
.dfa-cart .elementor-button--view-cart {
  width: auto; display: block; text-align: center;
  padding: 0; border: 0; background: none;
  font: 600 0.85rem/1.4 'Mulish', system-ui, sans-serif;
  letter-spacing: 0; text-transform: none;
  color: var(--dfa-accent-text);                  /* 6.53:1 */
  text-decoration: underline; text-underline-offset: 3px;
}
.dfa-cart .elementor-button--view-cart:hover { color: var(--dfa-ink); background: none; }

.dfa-cart .woocommerce-mini-cart__empty-message {
  padding: 30px 0; color: var(--dfa-muted); font-size: 0.95rem;
}

/* Auf dem Telefon nimmt das Panel die volle Breite. */
@media (max-width: 480px) {
  .dfa-cart .elementor-menu-cart__main { width: 100vw; --cart-padding: 24px 20px; }
}


/* Hello Elementor zieht jedes .alignwide-Element um 80 px nach beiden Seiten
   heraus. Der Warenkorb-Block trägt diese Klasse, die Kasse bekommt sie von
   WooCommerce wieder abgenommen — deshalb fiel es nur hier auf. Gemessen:
   bei 1440 px stand der Warenkorb von 70 bis 1210, während jeder andere
   Abschnitt der Seite von 150 bis 1290 läuft; bei 390 px ragten 70 px links
   aus dem Bild. */
.wp-block-woocommerce-cart.alignwide { margin-left: 0; margin-right: 0; }

/* ---------- Warenkorb und Kasse (WooCommerce-Blöcke) ---------------------
   Warenkorb und Kasse sind keine Elementor-Vorlagen, sondern Gutenberg-
   Blöcke — das Designsystem hat sie deshalb nie erreicht.

   Der Knopf „Proceed to Checkout" stand mit #101010 auf #32373c: gemessen
   1.58:1. Der wichtigste Knopf des Shops war praktisch unlesbar. Auf der
   Kasse trug „Place Order" den Blockstandard #cc3366 — ein Pink, das auf
   dieser Seite nirgends sonst vorkommt. */
.wc-block-components-button:not(.is-link) {
  background-color: var(--dfa-brand) !important;
  border-color: var(--dfa-brand) !important;
  color: #fff !important;                       /* 5.99:1 */
  border-radius: 3px !important;
  font-family: 'Cabin', system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
  min-height: 50px;
}
.wc-block-components-button:not(.is-link):hover {
  background-color: var(--dfa-brand-dark) !important;
  border-color: var(--dfa-brand-dark) !important;
}
.wc-block-components-button__text { color: #fff !important; }
.wc-block-components-button.is-link { color: var(--dfa-accent-text) !important; }

/* Die Blöcke setzen ihre Grundschrift auf 13 px. Das ist unter dem, was der
   Rest der Seite verwendet (15 px), und Warenkorb wie Kasse sind genau die
   Stellen, an denen niemand raten möchte. */
.wc-block-components-product-name,
.wc-block-components-product-price,
.wc-block-cart-items__header,
.wc-block-components-totals-item,
.wc-block-components-quantity-selector__input {
  font-family: 'Mulish', system-ui, sans-serif !important;
  font-size: 0.95rem !important;
}
.wc-block-components-product-name { font-weight: 700 !important; color: var(--dfa-ink) !important; }
.wc-block-components-product-price__value { color: var(--dfa-ink); }
.wc-block-cart-items__header { color: var(--dfa-muted) !important; text-transform: uppercase; letter-spacing: 0.06em; }

.wc-block-components-title,
.wc-block-cart__totals-title,
.wc-block-components-checkout-step__title {
  font-family: 'Cabin', system-ui, sans-serif !important;
  color: var(--dfa-ink) !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
  font-weight: 700 !important; color: var(--dfa-ink) !important;
}

/* Eingabefelder der Kasse an die Formulare der Seite angleichen.
   Die Randfarbe bleibt bewusst die von WooCommerce: sie setzt border-color
   als eigene !important-Longhand hinter unserer Regel, und gemessen ergibt
   ihr Grau 7.7:1 gegen Weiß — dunkler als unser #8a8a8a. Dagegen anzugehen
   hieße, gegen den Blockstil zu kämpfen, um ein schlechteres Ergebnis zu
   bekommen. Schriftart und Radius greifen. */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-textarea {
  border-radius: 3px !important;
  font-family: 'Mulish', system-ui, sans-serif !important;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input label { color: var(--dfa-muted) !important; }


/* ---------- Formulare (Contact Form 7) ---------------------------------- */
/* Contact Form 7 liefert keine eigene Gestaltung mit. Die Formulare stehen auf
   .dfa-formcard (weiß), .dfa-faqform (weiß) und .dfa-sidebox (#f4f4f4); die
   --dark-Variante unten ist Vorsorge, falls ein Formular auf eine dunkle
   Fläche wandert. */

.wpcf7 { font-family: 'Mulish', system-ui, sans-serif; }

/* Raster statt Absatzabständen.
   Gemessen am Anfrageformular auf defensia.paint-ds.net.za unter 2.5.0: jedes
   Feld saß in einem 71 px hohen <p> für ein 49 px hohes Eingabefeld. Die
   fehlenden 22 px waren eine leere Zeile. Contact Form 7 lässt `wpautop` über
   die Formulardefinition laufen und macht aus dem Zeilenumbruch zwischen
   Beschriftung und Feld ein <br>. Fünf Felder, 110 px Luft, die wie ein
   Gestaltungsfehler aussahen — es war einer, nur nicht im Stylesheet.
   Die Definitionen in 10-formulare/ setzen Beschriftung und Feld deshalb jetzt
   in *eine* Quellzeile; die br-Regel fängt den Fall ab, falls jemand später
   wieder umbricht. */
.wpcf7 form { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.wpcf7 form > * { grid-column: 1 / -1; margin: 0; }
.wpcf7 form p { margin: 0; }
.wpcf7 form p > br { display: none; }
.wpcf7 .hidden-fields-container { display: none; }

/* Zwei Spalten nur auf der breiten Karte. .dfa-sidebox (356 px) und
   .dfa-faqform (300 px) bleiben einspaltig — dort wären zwei Spalten 138 bzw.
   116 px breit. Gemessen: .dfa-formcard ist im Rückruf-Block 540 px, in der
   Kontaktspalte 526 px und im Hero 480 px breit; zwei Spalten ergeben also
   mindestens 203 px. */
@media (min-width: 1200px) {
  .dfa-formcard .wpcf7 form { grid-template-columns: 1fr 1fr; gap: 18px; }
  .dfa-formcard .wpcf7 form p.dfa-f--half { grid-column: span 1; }
}

/* Die Rückruf-Karte trägt keine Innenabstände aus der Vorlage — gemessen
   padding: 0. Das Formular stieß oben, rechts und unten bündig an den weißen
   Kartenrand. Die drei übrigen .dfa-formcard-Karten setzen ihr Padding in der
   Vorlage (30/28 bzw. 34/32) und enthalten zusätzlich eine Überschrift; dort
   greift :only-child nicht, es kann sich also nichts addieren. Das war der
   Fehler von 1.7.0: Abstand in der Vorlage *und* im Stylesheet, gemessen
   36 px doppelt. */
.dfa-formcard > .elementor-widget-shortcode:only-child { padding: 34px 32px; }

/* Sichtbare Beschriftungen. Vorher trugen die Felder ihre Beschriftung nur als
   Platzhalter. Der verschwindet beim Tippen: wer das Formular halb ausgefüllt
   hat, sieht nicht mehr, welches Feld welches ist, und beim Korrekturlesen vor
   dem Absenden schon gar nicht. */
.wpcf7 .dfa-flabel {
  display: block; margin: 0 0 7px;
  font: 700 0.75rem/1.3 'Cabin', system-ui, sans-serif;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--dfa-ink);
}
/* #bb1313 auf Weiß ergibt 6.59:1. */
.dfa-req { color: var(--dfa-accent-text); font-weight: 700; text-decoration: none; }

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--dfa-field-border);
  border-radius: 3px;
  background: #fff;
  color: var(--dfa-ink);
  font: 400 0.95rem/1.5 'Mulish', system-ui, sans-serif;
  transition: border-color 0.25s ease;
}
/* Die Höhe kommt jetzt aus rows="4" in der Formulardefinition. Vorher stand
   dort die CF7-Vorgabe rows="10" — gemessen 254 px, ein leeres graues Feld,
   das die halbe Karte einnahm. min-height ist nur die Untergrenze, falls eine
   Definition die Zeilenzahl nicht setzt. */
.wpcf7 textarea { min-height: 104px; resize: vertical; }

.wpcf7 input:hover, .wpcf7 textarea:hover {
  border-color: var(--dfa-field-border-strong);
}
.wpcf7 input:focus, .wpcf7 textarea:focus {
  outline: 2px solid var(--dfa-brand);
  outline-offset: 1px;
  border-color: var(--dfa-brand);
}

/* Auf der Papierkarte bleibt die Füllung weiß — der Unterschied zur Karte
   trägt allein nicht (1.1:1), der Rand macht die Arbeit. */
.dfa-sidebox .wpcf7 input[type="text"],
.dfa-sidebox .wpcf7 input[type="email"],
.dfa-sidebox .wpcf7 input[type="tel"],
.dfa-sidebox .wpcf7 textarea { background: #fff; }

/* Zustimmung. Das Kontrollkästchen steht in einem <label>, das die ganze Zeile
   umfasst — die Klickfläche ist damit die Textzeile, nicht nur die 20 px. */
.dfa-form-consent { font-size: 0.82rem; line-height: 1.55; color: var(--dfa-muted); }
.dfa-form-consent a { color: var(--dfa-accent-text); text-decoration: underline; }
.wpcf7 .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.wpcf7 .wpcf7-acceptance .wpcf7-list-item label {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
}
.wpcf7 input[type="checkbox"] {
  width: 20px; height: 20px; flex: 0 0 20px; margin: 1px 0 0;
  border: 1px solid var(--dfa-field-border);
  accent-color: var(--dfa-brand);
  vertical-align: 0;
}

/* Absenden. Über die volle Rasterbreite: der Knopf ist der einzige Abschluss
   des Formulars, und auf dem Telefon ist die ganze Breite die bequemste
   Trefferfläche. Gemessen 47 px hoch — über den 44 px, die als Untergrenze
   für Fingerziele gelten. */
.wpcf7 input[type="submit"] {
  width: 100%;
  background: var(--dfa-accent); color: #fff; border: 0; border-radius: 3px;
  padding: 16px 26px; cursor: pointer;
  font: 700 0.92rem/1 'Cabin', system-ui, sans-serif;
  letter-spacing: 0.04em; text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(226, 6, 19, 0.18);
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.wpcf7 input[type="submit"]:hover {
  background: var(--dfa-accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(226, 6, 19, 0.26);
}
.wpcf7 input[type="submit"]:focus-visible { outline: 3px solid var(--dfa-ink); outline-offset: 2px; }
.wpcf7 .wpcf7-spinner { margin: 0 0 0 10px; }

/* Fußnote unter dem Knopf. #6b6b6b auf Weiß ergibt 5.33:1. */
.dfa-f-note {
  font: 400 0.78rem/1.5 'Mulish', system-ui, sans-serif;
  color: var(--dfa-muted); margin: 0;
}

/* Rückmeldungen */
.wpcf7 .wpcf7-response-output {
  margin: 0; padding: 11px 14px; border-radius: 3px;
  font-size: 0.88rem; border-width: 2px;
}
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--dfa-brand); color: var(--dfa-brand); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: var(--dfa-accent-text); color: var(--dfa-accent-text); }
.wpcf7 .wpcf7-not-valid-tip { color: var(--dfa-accent-text); font-size: 0.8rem; margin-top: 4px; }
.wpcf7 .wpcf7-not-valid { border-color: var(--dfa-accent-text); }

/* Beschriftung für Screenreader — bleibt für Formulare ohne sichtbare Labels. */
.dfa-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Auf dunklem Grund */
.dfa-sidebox--dark .wpcf7 input[type="text"],
.dfa-sidebox--dark .wpcf7 input[type="email"],
.dfa-sidebox--dark .wpcf7 input[type="tel"],
.dfa-sidebox--dark .wpcf7 textarea {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}
.dfa-sidebox--dark .wpcf7 ::placeholder { color: rgba(255, 255, 255, 0.75); }
.dfa-sidebox--dark .wpcf7 .dfa-flabel { color: #fff; }
.dfa-sidebox--dark .dfa-req { color: #ffb3b8; }
.dfa-sidebox--dark .dfa-form-consent { color: rgba(255, 255, 255, 0.75); }
.dfa-sidebox--dark .dfa-form-consent a { color: #ffb3b8; }
.dfa-sidebox--dark .dfa-f-note { color: rgba(255, 255, 255, 0.75); }

/* Die Felder, die noch einen Platzhalter tragen (Mitteilung), brauchen ihn
   lesbar. #6b6b6b auf Weiß ergibt 5.33:1. */
.wpcf7 ::placeholder { color: var(--dfa-muted); opacity: 1; }


/* ---------- Freistehender Text im Weißraum -------------------------------
   Warum überhaupt: Im Rückruf-Block steht die Copy neben der Formularkarte.
   Gemessen bei 1440 px unter 2.5.0: Karte 722 px hoch, Textspalte 262 px, die
   Zeile auf align-items:center — also 230 px Leere über *und* unter dem Text.
   Der Text hatte keine Kante, an der er hing, und trieb in der Fläche.

   Die Ursache war überwiegend die Karte, nicht die Copy: mit den Korrekturen
   oben fällt sie auf 538 px, das Verhältnis von 2.76:1 auf 1.75:1. Der Rest
   ist Gestaltung — eine Linie, an der der Text ansetzt. Kein Kasten: ein
   umrandeter Textblock neben einer umrandeten Karte ergibt zwei konkurrierende
   Kästen. Eine Kante genügt, um aus schwebendem Text einen gesetzten zu machen.

   .dfa-lede ist die Klasse zum selbst Vergeben. Die zweite Regel vergibt sie
   automatisch an die Textspalte neben einer Formularkarte, damit die rund 50
   bestehenden Seiten sie ohne neuen Import bekommen. */
.dfa-lede,
.e-con:has(> .dfa-formcard) > .e-con:not(.dfa-formcard) {
  border-left: 3px solid var(--dfa-accent);
  padding-left: 28px;
}

/* Die Telefonnummer schließt die Spalte ab — als Fläche, nicht als Textzeile,
   die ins Nichts ausläuft. Weiß auf #f4f4f4 ist 1.04:1, trägt also nur mit
   Rand und Schatten; beides ist Dekoration, kein Bedienelement. */
.e-con:has(> .dfa-formcard) .dfa-phonebig {
  display: inline-flex; align-items: center; gap: 12px;
  background: #fff; padding: 14px 22px;
  border: 1px solid rgba(16, 16, 16, 0.10); border-radius: 3px;
  box-shadow: 0 6px 18px rgba(16, 16, 16, 0.07);
}


/* ---------- Seitenränder unterhalb der Boxbreite -------------------------
   Diese Regel ist entfallen. Die Seitenränder für Tablet und Mobil stehen
   jetzt in den Vorlagen selbst (padding_tablet / padding_mobile auf 360
   Containern) — dort sind sie im Editor sichtbar und änderbar.

   Beides gleichzeitig ging nicht: die Vorlage setzt den Abstand auf dem
   Container, das Stylesheet setzte ihn auf dem inneren Element. Zwei
   verschiedene Elemente, also addierten sich die Werte — gemessen 36 px
   statt 18 px linker Rand.

   Wichtig: Plugin und WXR gehören deshalb zusammen. Wer den Import noch
   nicht erneuert hat, bleibt bis dahin ohne Seitenrand auf dem Telefon. */

/* Flex-Kinder können per Vorgabe nicht unter ihre Inhaltsbreite schrumpfen
   (min-width: auto). Bei schmalen Spalten ragen lange deutsche Komposita
   deshalb aus ihrem Container heraus und schieben die ganze Seite in die
   Breite. Gemessen bei 768 px: Elementors Icon-Listen 233 px breit in einer
   156 px schmalen Spalte, die Fuß-Kontaktliste 185 px in 144 px — zusammen
   ein waagerechter Bildlauf auf Startseite und Innenseiten.

   Gilt für alle Icon-Listen, nicht nur den Fuß: dasselbe Muster steckt in
   den Leistungslisten, den Checklisten und der Städteleiste. */
.elementor-icon-list-item,
.dfa-footcontact li { min-width: 0; }
.elementor-icon-list-item > a,
.elementor-icon-list-text,
.dfa-footcontact li > * {
  min-width: 0;
  overflow-wrap: break-word;
}

/* ---------- Responsive -------------------------------------------------- */

@media (max-width: 1024px) {
  .dfa-hero::before {
    background: linear-gradient(180deg, rgba(16, 16, 16, 0.88), rgba(11, 58, 34, 0.88));
    opacity: 1;
  }
  .dfa-faqform { position: static; width: 100%; margin-top: 20px; }
  .dfa-faq-media img { width: 100%; height: 320px; }
  .dfa-topbar__right { margin-left: 0; }
  .dfa-headcta { justify-content: flex-start; }
  .dfa-p-media img { height: 220px; }
}

@media (max-width: 767px) {
  .dfa-checks--2 .elementor-icon-list-items { grid-template-columns: 1fr; }
  .dfa-about-main img { width: 100%; margin-left: 0; height: 280px; }
  .dfa-about-small { display: none; }
  .dfa-callcard { position: static; width: 100%; margin-top: 30px; }
  .dfa-about-media { padding-bottom: 0; }
  .dfa-hero h1.elementor-heading-title,
  .dfa-titleband h1.elementor-heading-title { hyphens: auto; }
  .dfa-topbar { justify-content: center; text-align: center; padding: 10px 0; }
  .dfa-footbottom { justify-content: center; text-align: center; }
  .dfa-facts th, .dfa-facts td { display: block; width: 100%; }
}

/* ===========================================================================
   Rückmeldung 12.10.2026
   ======================================================================== */

/* ---------- USP-Leiste: Text auf der Mittellinie des Symbols ---------------
   Elementor setzt für "Symbol links" align-items:start und auf dem Telefon
   flex-direction:column mit zentriertem Text. Beides schlug die Regeln oben:
   einzeilige Punkte standen ~9 px über der Mitte des Kreises, auf dem Telefon
   saß das Symbol links und der Text zentriert in der Restbreite. */
.dfa-usp .elementor-icon-box-wrapper {
  display: flex !important; flex-direction: row !important;
  align-items: center !important; text-align: left !important; gap: 14px;
}
.dfa-usp .elementor-icon-box-content,
.dfa-usp .elementor-icon-box-title { text-align: left !important; margin: 0; }
.dfa-usp .elementor-icon-box-icon { margin: 0 !important; }
.dfa-usp .elementor-icon-box-content { align-self: center !important; flex: 1 1 auto; }

/* ---------- Karten: gleiche Höhe, Knopf unten -------------------------------
   Die Zeilen strecken ihre Karten (align-items: stretch). Mit height:100% auf
   der Karte griff das nicht — Prozenthöhe gegen eine Zeile ohne feste Höhe
   wird zu "auto", und ein Flex-Kind mit gesetzter Höhe wird nicht gestreckt.
   Ergebnis waren drei Karten in drei Höhen. */
.dfa-reason-card, .dfa-lex-card, .dfa-svc-card { height: auto; align-self: stretch; }
.dfa-reason-card > .dfa-reason-icon { margin-top: auto; padding-top: 22px; }
.dfa-svc-card > .elementor-widget-button { margin-top: auto; }
.dfa-lex-card > .e-con:not(.dfa-lex-img) { flex: 1 1 auto; }
.dfa-lex-card > .e-con:not(.dfa-lex-img) > .elementor-widget-button { margin-top: auto; }

/* ---------- Ganze Karte anklickbar ----------------------------------------
   Der Link sitzt am "Mehr erfahren"-Knopf; sein ::before wird auf die Karte
   gezogen. Containerflächen dazwischen dürfen nicht positioniert sein, sonst
   fängt der nächste von ihnen das Pseudo-Element ein. (::after trägt schon den
   Pfeil.) */
.dfa-svc-card, .dfa-lex-card { position: relative; }
.dfa-svc-card .e-con, .dfa-lex-card > .e-con:not(.dfa-lex-img),
.dfa-svc-card .elementor-widget-button, .dfa-lex-card .elementor-widget-button { position: static !important; }
.dfa-svc-card .elementor-button, .dfa-lex-card .elementor-button { position: static; }
.dfa-svc-card .elementor-button::before,
.dfa-lex-card .elementor-button::before {
  content: ""; position: absolute; inset: 0; z-index: 6;
}
.dfa-svc-card:has(.elementor-button:focus-visible),
.dfa-lex-card:has(.elementor-button:focus-visible) { outline: 3px solid var(--dfa-accent); outline-offset: 2px; }
.dfa-svc-card:has(.elementor-button),
.dfa-lex-card:has(.elementor-button) { cursor: pointer; }

/* Knopf "Unsere Dienstleistungen" / "Lexikon" unter einem Raster */
.dfa-allsvc .elementor-button { min-width: 240px; justify-content: center; }

/* ---------- Haken in den Brancheneinträgen (/kunden/ u. a.) -----------------
   `.dfa-prose ul > li::before` zeichnet den roten Aufzählungspunkt und ist
   spezifischer als die Haken-Regel der Kacheln. Beide galten zugleich: ein
   6-px-Punkt in der oberen linken Ecke, durch die Haken-Maske zu einem
   winzigen roten Haken geschnitten. */
.dfa-prose .dfa-taglist > li { position: static; padding: 11px 15px; margin-bottom: 0; line-height: 1.4; }
.dfa-prose .dfa-taglist > li::before {
  position: static; top: auto; left: auto; width: 14px; height: 14px;
  border-radius: 0; background-color: var(--dfa-brand);
}

/* ---------- Aufklappmenü "Dienstleistungen": 14 Einträge --------------------
   Mit 15 px Polster oben und unten wären das 713 px — auf einem Laptop mit
   768 px Fensterhöhe ragt das Menü über den unteren Rand. 10 px genügen. */
@media (min-width: 1025px) {
  .elementor-widget-nav-menu.dfa-nav .elementor-nav-menu--main .elementor-nav-menu--dropdown .elementor-sub-item {
    padding-top: 10px !important; padding-bottom: 10px !important;
  }
}

/* ---------- Kopfzeile: weißes Logo ohne Platte -----------------------------
   Das Logo mit weißer Schrift (wie im Footer) braucht keinen hellen Grund. */
.dfa-headbar .dfa-logo--weiss img {
  background: transparent; padding: 0; border-radius: 0; height: 50px !important;
}
@media (max-width: 1024px) { .dfa-headbar .dfa-logo--weiss img { height: 42px !important; } }
@media (max-width: 600px)  { .dfa-headbar .dfa-logo--weiss img { height: 36px !important; } }

/* ---------- Fotos im Text und Galerie ------------------------------------ */
.dfa-prose .dfa-fig { margin: 0; }
.dfa-prose .dfa-fig img { margin: 0; display: block; max-width: 100%; height: auto; }
.dfa-prose-fig { margin: 8px 0 22px; }
.dfa-prose-fig .dfa-fig img { max-height: 480px; width: auto; border-radius: 2px; }
.dfa-galerie { column-count: 3; column-gap: 14px; margin-top: 6px; }
.dfa-galerie .dfa-fig { break-inside: avoid; margin: 0 0 14px; }
.dfa-galerie .dfa-fig img { width: 100%; max-height: none; border-radius: 2px; }
@media (max-width: 900px) { .dfa-galerie { column-count: 2; } }

/* ---------- Banner mit drei Kontaktwegen ---------------------------------- */
.dfa-bannercontact { gap: 14px 30px; }
@media (max-width: 600px) {
  .dfa-bannercontact { flex-direction: column; align-items: center; }
}

/* ---------- WhatsApp-Knopf (alle Seiten) ----------------------------------
   Ausgegeben vom Plugin (wp_footer), nicht aus einer Elementor-Vorlage. */
.dfa-wa {
  position: fixed; right: 18px; bottom: 18px; z-index: 9990;
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  min-width: 56px; height: 56px; padding: 0 14.5px; border-radius: 28px;
  background: #25d366; color: #fff; text-decoration: none; font-weight: 700; font-size: 0.95rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.dfa-wa:hover, .dfa-wa:focus-visible { background: #1ebe5a; color: #fff; transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34); }
.dfa-wa:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px #1a1a1a; }
.dfa-wa i { font-size: 1.7rem; line-height: 1; flex: none; }
.dfa-wa span {
  max-width: 0; margin-left: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  transition: max-width 0.3s ease, margin-left 0.3s ease, opacity 0.2s ease;
}
.dfa-wa:focus-visible span { max-width: 190px; margin-left: 10px; margin-right: 4px; opacity: 1; }
@media (hover: hover) and (min-width: 1025px) {
  .dfa-wa:hover span { max-width: 190px; margin-left: 10px; margin-right: 4px; opacity: 1; }
}
@media (max-width: 600px) { .dfa-wa { right: 14px; bottom: 14px; } }
@media print { .dfa-wa { display: none; } }
@media (prefers-reduced-motion: reduce) { .dfa-wa, .dfa-wa span { transition: none; } .dfa-wa:hover { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .dfa-svc-card, .dfa-lex-card, .dfa-cust-card, .dfa-reason-card, .dfa-p-card,
  .dfa-morecard img, .dfa-lex-img img, .dfa-p-media img {
    transition: none !important;
  }
  .dfa-svc-card:hover, .dfa-lex-card:hover, .dfa-cust-card:hover,
  .dfa-reason-card:hover, .dfa-p-card:hover { transform: none; }
  .wpcf7 input[type="submit"] { transition: none !important; }
  .wpcf7 input[type="submit"]:hover { transform: none; }
}