/*
Theme Name: SchadenExpert
Theme URI: https://schadenexpert.eu/
Template: hello-elementor
Author: Schadenexpert GmbH
Description: Child-Theme von Hello Elementor. Traegt Kopfbereich, Fussbereich und die Farben der Schadenexpert GmbH. Alle Farbwerte stammen 1:1 aus dem Altbestand (Logo, Twenty Eleven, wp-custom-css).
Version: 1.0.0
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: schadenexpert
*/

/* ---------------------------------------------------------------- Roboto --
   LOKAL ausgeliefert, nicht von fonts.googleapis.com.

   Elementors Standard-Kit laedt Roboto UND Roboto Slab bei jedem Seitenaufruf
   von Google. Damit reist die IP jedes Besuchers ohne Einwilligung in die USA;
   das LG Muenchen I hat das am 20.01.2022 (3 O 17493/20) als Verstoss gewertet.
   Ein Cookie-Banner loest das nicht — es ist kein Cookie-Problem, sondern eine
   Datenuebermittlung beim Laden der Seite.

   Gehalten werden nur die Schnitte, die auf den elf Seiten wirklich vorkommen
   (gemessen 2026-08-24: 400, 400 kursiv, 500, 700 — Gewicht 600 faellt auf 700),
   und nur die Bereiche latin und latin-ext. Roboto Slab wurde nirgends benutzt
   und ist ersatzlos entfallen. */

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/roboto-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/roboto-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/roboto-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/roboto-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/roboto-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/roboto-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/roboto-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/roboto-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Originalwerte, gemessen: Logo banner01.png, Twenty Eleven, altes wp-custom-css */
  --se-base:      #ffffff;
  --se-base-2:    #f2f2f2;
  --se-dark:      #000000;  /* Kopf, Hero, Fuss. Das Logo ist freigestellt,
                              der Ton ist damit frei waehlbar. */
  --se-ink:       #373737;  /* Fliesstext Twenty Eleven */
  --se-heading:   #222222;  /* .entry-title Twenty Eleven */
  --se-orange:    #fca700;  /* Logo-Claim. Flaechenfarbe fuer Knoepfe, Text
                              darauf ist schwarz: 10,67:1 */
  --se-link:      #976400;  /* Textlinks auf hellem Grund. Gleicher Farbton wie
                              das Logo-Orange (39,8°, volle Saettigung), nur
                              dunkler. #fca700 selbst kaeme auf 1,97:1 und waere
                              als Text unlesbar; dieser Ton schafft 5,07:1 auf
                              Weiss und 4,53:1 auf Hellgrau. */
  --se-muted:     #6e6e6e;  /* Kleintext. Der Originalwert #7a7a7a erreicht
                              schon auf Weiss nur 4,29:1 und faellt damit unter
                              die Schwelle von 4,5:1. Vier Stufen dunkler: 4,89:1
                              auf der Kachel, 4,55:1 selbst auf #f2f2f2. Der
                              Unterschied ist mit blossem Auge nicht zu sehen. */
  --se-tint:      #fafafa;  /* Kacheln im Ruhezustand, dezent abgesetzt */
  --se-steel:     #959ea7;  /* Logo "Schaden" */
  --se-yellow:    #fae609;  /* Logo "Expert" */
  --se-line:      #dcdcdc;  /* Button-Rahmen .Button */
  --se-quote:     #fff8a8;  /* blockquote */
  --se-width:     1180px;
}

body { color: var(--se-ink); }
a { color: var(--se-link); }
a:hover, a:focus { color: var(--se-link); text-decoration: underline; }

/* Links im Fliesstext sind IMMER unterstrichen, nicht erst beim Ueberfahren.
   #976400 gegen #373737 sind nur 2,34:1 — WCAG 1.4.1 verlangt 3:1, wenn Farbe
   das einzige Unterscheidungsmerkmal ist. Wer Farben schlecht trennt, sah
   bisher keinen Link. Eine dunklere Linkfarbe waere die Alternative gewesen,
   haette aber den Logo-Ton aufgegeben; die Unterstreichung behaelt ihn und
   nimmt die Farbe zugleich aus der Beweislast.
   Ausgenommen ist alles, was ohnehin als Flaeche oder Navigation erkennbar
   ist — dort traegt die Form die Bedeutung. */
.elementor-widget-text-editor a:not(.se-gate__btn):not(.se-leistung):not(.se-cardlink),
.se-box a:not(.se-gate__btn),
.se-preis__fuss a,
.se-hinweis a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
h1, h2, h3, h4 { color: var(--se-heading); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }

:where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid var(--se-link);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ Kopfbereich --
   Das Logo hat seinen dunklen Hintergrund eingebrannt, also muss der Kopf
   dunkel sein, sonst steht ein schwarzer Kasten auf weissem Grund. */
.site-header {
  background: var(--se-dark);
  padding: 0;
  display: block;
}
/* `.dynamic-header` in der Auswahl ist Absicht: Hello deckelt `.header-inner`
   ab 1200px Fensterbreite auf 1140px und laedt seine Datei nach dieser hier.
   Ohne die zusaetzliche Klasse gewinnt Hello und Kopf und Fuss stehen 13px
   versetzt. */
.site-header.dynamic-header .header-inner {
  max-width: var(--se-width);
  margin-inline: auto;
  padding: 16px 24px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
/* Hello zentriert im gestapelten Layout; die Wortmarke gehoert nach links,
   so stand sie auch im Altbestand. */
.site-header .header-inner > * { width: 100%; text-align: left; }
.site-header .site-branding { padding: 0; display: flex; justify-content: flex-start; }
.site-header .site-logo { width: 100%; }
.site-header .custom-logo-link { display: block; }
.site-header .custom-logo-link img {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
}
.site-header .site-title a { color: var(--se-base); text-decoration: none; }
.site-header .site-description { color: var(--se-steel); }

/* Menue: hell auf dunkel, Gelb markiert die aktive Seite. */
.site-navigation { padding-bottom: 8px; }
/* Hello blendet den mobilen Umschalter selbst ein; auf dunklem Grund braucht
   er die helle Farbe. */
.site-header .site-navigation-toggle,
.site-header .site-navigation-toggle i,
.site-header .header-inner .site-navigation-toggle-holder button { color: var(--se-base); }
.site-header .site-navigation-dropdown ul { background: var(--se-dark); }
/* Das Klappmenue ist ein eigenes <nav>, meine Regeln oben greifen dort nicht.
   Ohne diese Zeilen stuenden dunkle Links auf dunklem Grund. */
.site-navigation-dropdown a { color: var(--se-base); text-decoration: none; }
.site-navigation-dropdown a:hover,
.site-navigation-dropdown .current-menu-item > a { color: var(--se-yellow); }
.site-navigation-dropdown li { border-bottom: 1px solid #333333; }
.site-navigation ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4px 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-navigation a {
  color: var(--se-base);
  text-decoration: none;
  font-weight: 600;
  padding: 6px 0;
  display: inline-block;
  border-bottom: 3px solid transparent;
}
.site-navigation a:hover,
.site-navigation a:focus { color: var(--se-orange); text-decoration: none; }
.site-navigation .current-menu-item > a,
.site-navigation .current_page_item > a {
  color: var(--se-yellow);
  border-bottom-color: var(--se-yellow);
}

/* Unter 900px klappt das Menue auf zwei Zeilen statt zu ueberlaufen. */
@media (max-width: 900px) {
  .site-navigation ul { gap: 2px 18px; font-size: 15px; }   /* = FS_MINI */
}

/* ------------------------------------------------------------ Fussbereich --
   Spiegelbild des Kopfbereichs: aussen volle Breite in derselben Farbe, innen
   dieselbe 1180er Spur. Der Aussenrahmen ist `.footer-inner`, exakt wie
   `.header-inner` oben. */
.site-footer {
  background: var(--se-dark);
  color: var(--se-base);
  padding: 0;
  margin-top: 0;
}
.site-footer.dynamic-footer .footer-inner {
  max-width: var(--se-width);
  margin-inline: auto;
  padding: 44px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: stretch;
}
.site-footer .footer-inner > * { width: 100%; }

/* Wortmarke wie oben, nur kleiner. */
.site-footer .site-branding { display: flex; justify-content: flex-start; }
.site-footer .site-logo img {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
}

/* Links wie im Menue: hell, Gelb beim Ueberfahren. */
.site-footer a { color: var(--se-base); text-decoration: none; }
.site-footer a:hover,
.site-footer a:focus { color: var(--se-orange); text-decoration: none; }

.se-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px 48px;
}
.se-footer-grid h2 {
  color: var(--se-base);
  font-weight: 700;
  font-size: 15px;   /* = FS_MINI, wie .se-rubrik im Inhalt */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.se-footer-grid p { margin: 0; line-height: 1.7; font-size: 15px; }   /* = FS_MINI */

.se-footer-bottom {
  padding-top: 18px;
  border-top: 1px solid #333333;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  align-items: baseline;
  font-size: 15px;   /* = FS_MINI, kleinste Stufe der Skala */
}
/* Die Fusszeilen-Links stehen wie Menuepunkte nebeneinander, mit demselben
   Abstand wie oben in der Navigation. */
.se-footer-bottom p { margin: 0; }
.se-footer-bottom p a + a { margin-left: 26px; }
.se-footer-bottom .se-copy { color: var(--se-steel); }

/* ------------------------------------------------- Contact Form 7 angleichen */
.wpcf7 label { display: block; margin-bottom: 1rem; font-weight: 600; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"],
.wpcf7 textarea, .wpcf7 select {
  width: 100%;
  padding: .7rem .8rem;
  border: 1px solid #c7d0da;
  border-radius: 4px;
  font: inherit;
  background: #fff;
}
.wpcf7 textarea { min-height: 8rem; }
.wpcf7 input[type="submit"] {
  background: var(--se-orange);
  color: #000; border: 0; border-radius: 4px;
  padding: .8rem 1.6rem; font: inherit; font-weight: 700; cursor: pointer;
}
.wpcf7 input[type="submit"]:hover { background: var(--se-dark); color: #fff; }
.wpcf7-list-item { margin-left: 0; }
.wpcf7-acceptance .wpcf7-list-item-label { font-weight: 400; font-size: 15px; line-height: 1.5; }   /* = FS_MINI, .9rem waeren 14,4px */
.wpcf7-acceptance input[type="checkbox"] { margin-right: .5rem; }

blockquote { background: var(--se-quote); border-left: 5px solid #999999; padding: .5em 10px; color: #000; }

@media print {
  .site-navigation, .se-noprint { display: none !important; }
}

/* ------------------------------------------------ Elementor-Bausteine ----
   Was Elementors Steuerung nicht ausdruecken kann, steht hier. Die Container
   tragen dafuer feste Klassen (se-box, se-cards, se-col), vergeben im
   Generator scripts/elementor_pages.py. */

/* Karten: feine Kante ringsum, kein dicker Farbbalken oben. Der Akzent sitzt
   als schmale Linie unter der Ueberschrift, dieselbe Sprache wie die Rubriken
   in den Preistabellen. Ein dicker farbiger Deckel wirkt wie ein Baukasten. */
.se-box {
  border: 1px solid var(--se-line);
  border-radius: 4px;
}
.se-box--card > .elementor-widget-heading:first-child .elementor-heading-title {
  padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--se-yellow);
}

/* ------------------------------------------------ Kachel als Schaltflaeche --
   Die ganze Karte ist anklickbar, nicht nur die Ueberschrift. Umgesetzt ueber
   ein ::after am Ueberschriften-Link, das sich ueber die Karte spannt: ein
   echter Link, ein Tabstopp, keine JavaScript-Krücke und kein <div onclick>. */

.se-box--card {
  position: relative;
  background: var(--se-tint);
  transition: transform .18s ease, box-shadow .18s ease,
              border-color .18s ease, background-color .18s ease;
}
/* Beim Ueberfahren tritt die Kachel nach vorn: heller als ihre Umgebung,
   angehoben, mit Schatten. Der Ruhezustand ist dezent abgesetzt. */
.se-box--card:hover,
.se-box--card:focus-within {
  background: var(--se-base);
  border-color: var(--se-yellow);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .11);
  transform: translateY(-3px);
}
/* Tastaturbedienung: der Fokus muss die ganze Karte markieren, nicht nur den
   Text darin, sonst sieht man nicht, was man gerade auswaehlt. */
.se-box--card:focus-within { outline: 3px solid var(--se-link); outline-offset: 3px; }
.se-box--card .se-cardlink:focus-visible { outline: none; }

/* Elementor setzt JEDEM Widget `position: relative`. Ohne diese Zeile bezieht
   sich das ::after auf die Ueberschrift und deckt nur sie ab, nicht die Karte. */
.se-box--card > .elementor-widget-heading { position: static; }

.se-cardlink { color: inherit; text-decoration: none; }
.se-cardlink::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.se-box--card:hover .se-cardlink { color: var(--se-link); }

/* "Mehr erfahren" ist Beschriftung, kein zweiter Link. Der Pfeil wandert beim
   Ueberfahren, damit die Richtung ablesbar ist. */
.elementor-widget-text-editor .se-mehr,
.se-mehr {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-weight: 700;
  color: var(--se-link);
}
.se-mehr__pfeil { transition: transform .18s ease; }
.se-box--card:hover .se-mehr__pfeil,
.se-box--card:focus-within .se-mehr__pfeil { transform: translateX(5px); }

/* Wer Bewegung abgestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  .se-box--card, .se-mehr__pfeil { transition: none; }
  .se-box--card:hover, .se-box--card:focus-within { transform: none; }
}

/* Kartenreihen: zwei nebeneinander, unter 720px untereinander. */
.se-cards > .e-con,
.se-cards > .elementor-element { flex: 1 1 300px; }

/* Zweispalter. Die Klasse sitzt an der Reihe, nicht an den Spalten: eine Klasse
   am Kind allein verliert gegen Elementors eigene Breitenregel fuer .e-con. */
/* Aufmacher neben Bild. Das Motiv bekommt hoechstens 420px, sonst eroeffnet
   es die Seite als schwarze Flaeche, bevor ein Satz gelesen ist. */
/* Vorspann und Siegel standen bis 2026-08-24 als zweispaltige Reihen
   (.se-intro / .se-siegel) — Text neben Bild. Das verengte den Fliesstext auf
   709 bzw. 825 statt 1117 px und lief damit gegen die Vorgabe. Beide Bilder
   sitzen jetzt UNTER ihrem Text; die Reihen und ihre Flex-Regeln sind entfallen. */
.elementor-widget-image img { border-radius: 4px; display: block; }

/* Ein Bild, das allein im Textfluss steht, braucht oben und unten Luft —
   sonst klebt es am Absatz darueber und an der naechsten Rubrik. */
.se-bild { margin: 1.8rem 0 2.4rem; }

/* Elementor setzt Ueberschriften-Links auf die Textfarbe zurueck. */
.elementor-widget-heading a { color: inherit; text-decoration: none; }
.elementor-widget-heading a:hover { color: var(--se-link); }

/* Fliesstext laeuft ueber die volle Spurbreite (Entscheid des Auftraggebers).
   Die Rhythmisierung uebernehmen Rubriken, Listen und Zitate, nicht eine
   verkuerzte Zeile.

   OHNE AUSNAHME. Der frueher hier notierte Vorbehalt fuer "Kleingedrucktes in
   Tabellen" war eine nachtraegliche Rechtfertigung fuer drei ch-Deckel
   (.se-preis__detail 56ch, .se-preis__fuss 72ch, .se-hinweis 46ch). Alle drei
   sassen im Preisblock und waren deshalb nur ANGEMELDET zu sehen — sie sind
   durch mehrere Durchsichten gekommen, weil abgemeldet gemessen wurde. */

/* Der Fliesstext-Widget bringt eigene Listenabstaende nicht mit. */
.elementor-widget-text-editor ul { margin: 0 0 1em 1.2em; list-style: disc; }
.elementor-widget-text-editor li { margin-bottom: .35em; }
.elementor-widget-text-editor p { margin: 0 0 1em; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------- Kundenbereich ----
   Hinweis fuer Besucher ohne Zugang. Der geschuetzte Inhalt wird fuer sie gar
   nicht erst gerendert, das leistet das Plugin schadenexpert-zugriff. */
.se-gate {
  border: 1px solid var(--se-line);
  border-radius: 4px;
  background: var(--se-base-2);
  padding: 28px 32px;
}
/* Der Akzent sitzt als feine Linie unter der Ueberschrift, nicht als dicker
   Farbdeckel oben. Dieselbe Sprache wie Rubriken und Preistabellen. */
.se-gate__title {
  margin: 0 0 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--se-yellow);
  font-weight: 700;
  font-size: 19px;   /* = FS_LEAD, exakt statt 1.19rem (waeren 19,04px) */
  color: var(--se-heading);
}
.se-gate__text  { margin: 0 0 1.2rem; }
.se-gate__actions { margin: 0; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.se-gate__btn {
  background: var(--se-orange);
  color: #000;
  font-weight: 700;
  text-decoration: none;
  padding: .8rem 1.7rem;
  border-radius: 4px;
  display: inline-block;
}
.se-gate__btn:hover { background: var(--se-dark); color: #fff; text-decoration: none; }

/* ----------------------------------------------------------- Preisliste --
   Im Bestand stand sie als Zitatblock aus fetten Kursivzeilen, Leistung und
   Betrag im selben Absatz.

   WICHTIG: Hello Elementors reset.css bringt eigene Tabellenstile mit —
   Rahmen an jeder Zelle, Zebra-Streifen, Hover-Faerbung und `font-size: .9em`.
   Die werden hier vollstaendig zurueckgesetzt, nicht nur ueberschrieben. Wer
   nur `padding` setzt, bekommt Text, der an fremden Zellrahmen klebt. */

.se-preisblock { margin: 0; }

.se-preisblock table.se-preis {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  border-spacing: 0;
  background: none;
  font-size: 16px;   /* = FS_BODY */
  margin: 0 0 2.6rem;
}
.se-preisblock table.se-preis:last-of-type { margin-bottom: 1.8rem; }
/* Jede Gruppe wird unten geschlossen, sonst laeuft die letzte Zeile ins Leere. */
.se-preisblock table.se-preis tbody { border-bottom: 1px solid var(--se-line); }
/* Ohne Gruppentitel gibt es keine caption und damit keine gelbe Oberkante.
   Die Tabelle traegt sie dann selbst, damit die Liste oben verankert ist. */
.se-preisblock table.se-preis--ohne-titel tbody { border-top: 2px solid var(--se-yellow); }

.se-preisblock table.se-preis th,
.se-preisblock table.se-preis td {
  border: 0;
  background: none;
  vertical-align: top;
  line-height: 1.45;
  text-align: left;
  padding: 1.15rem 0;
}
/* Trennlinie zwischen den Zeilen, nicht um sie herum. */
.se-preisblock table.se-preis tr + tr th,
.se-preisblock table.se-preis tr + tr td {
  border-top: 1px solid var(--se-line);
}
.se-preisblock table.se-preis tbody tr:hover > th,
.se-preisblock table.se-preis tbody tr:hover > td {
  background: none;
}

/* Luft zwischen Leistung und Betrag, damit nichts an einer Kante klebt. */
.se-preisblock table.se-preis th { font-weight: 400; padding-right: 3rem; }
.se-preisblock table.se-preis td { padding-left: 1rem; }

.se-preis__name {
  display: block;
  font-weight: 600;
  color: var(--se-heading);
}
.se-preis__detail {
  display: block;
  margin-top: 0.35rem;
  font-size: 15px;   /* = FS_MINI, kleinste Stufe der Skala */
  line-height: 1.55;
  color: var(--se-muted);
}

/* Die Betragsspalte nimmt nur ihre eigene Breite ein, damit die Zifferkante
   ueber alle Zeilen steht. Tabellenziffern halten die Kommas untereinander. */
.se-preis__spalte { width: 1%; }
.se-preisblock table.se-preis td {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.se-preis__ab       { color: var(--se-muted); font-size: 15px; }
.se-preis__wert     { font-weight: 700; font-size: 19px; color: var(--se-heading); }  /* 19px = FS_LEAD */
.se-preis__waehrung { color: var(--se-muted); font-size: 15px; }

/* Gruppentitel: klein, gesperrt, gelbe Kante ueber die volle Tabellenbreite. */
.se-preisblock table.se-preis caption {
  caption-side: top;
  text-align: left;
  font-weight: 700;
  font-size: 15px;   /* = FS_MINI, wie .se-rubrik */
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--se-heading);
  padding: 0 0 0.6rem;
  border-bottom: 2px solid var(--se-yellow);
}

.se-preis__fuss {
  font-size: 15px;   /* = FS_MINI, kleinste Stufe der Skala */
  line-height: 1.6;
  color: var(--se-muted);
  /* Keine eigene Trennlinie: die Gruppe darueber ist bereits geschlossen, eine
     zweite Linie an der Textkante liefe nur halb durch und wirkte abgerissen. */
  margin: 1.6rem 0 1.6rem;
}
.se-preis__form { margin: 0; }
.se-preis__download {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 700;
  text-decoration: none;
}
/* Formatmarke neben dem Download. 0.7rem waren 11,2px — die kleinste Schrift
   der ganzen Seite und deutlich unter der Skala. */
.se-preis__download span {
  font-size: 15px;   /* = FS_MINI */
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--se-muted);
  background: var(--se-base-2);
  border: 1px solid var(--se-line);
  border-radius: 3px;
  padding: 0.2rem 0.45rem;
}

/* Schmale Fenster: Betrag unter die Leistung, statt die Spalte zu quetschen. */
@media (max-width: 600px) {
  .se-preisblock table.se-preis,
  .se-preisblock table.se-preis tbody,
  .se-preisblock table.se-preis tr,
  .se-preisblock table.se-preis th,
  .se-preisblock table.se-preis td {
    display: block;
    width: auto;
  }
  /* Als Block-Element schrumpft die caption auf ihre Textbreite, die gelbe
     Kante liefe dann nur bis zur Haelfte. */
  .se-preisblock table.se-preis caption { display: block; width: 100%; }
  .se-preisblock table.se-preis th {
    padding: 1.15rem 0 0;
    border-top: 0;
  }
  .se-preisblock table.se-preis tr + tr th { border-top: 1px solid var(--se-line); }
  .se-preisblock table.se-preis td {
    padding: 0.5rem 0 1.15rem;
    text-align: left;
    border-top: 0;
  }
}

/* Druck: die Preisliste ist das, was ein Sachbearbeiter ausdruckt. */
@media print {
  .se-preisblock table.se-preis caption { border-bottom-color: #000; }
  .se-preisblock table.se-preis tr + tr th,
  .se-preisblock table.se-preis tr + tr td { border-top-color: #999; }
}


/* ------------------------------------------------------------- Kontakt ----
   Zwei Spalten ohne Kasten. Rubrik klein und gesperrt ueber feiner Linie,
   Daten als Beschreibungsliste mit Label links und Wert rechts. */

.se-kontaktblock {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px 64px;
}

/* Kleine Versalzeile als Abschnittsmarke. Vorher 0.78rem = 12,48px — bei
   Versalien mit Sperrung zu wenig, um bequem lesbar zu sein. Jetzt 15px,
   dieselbe Stufe wie im Fuss und ueber den Preistabellen. */
/* Ueberschriften aus importiertem Alt-HTML tragen keine Elementor-Einstellung
   und fielen deshalb auf Hellos 32px zurueck — waehrend jede erzeugte H2 bei
   30px steht. 36 Stueck allein in der Datenschutzerklaerung. */
.elementor-widget-text-editor h2 { font-size: 30px; line-height: 1.25; }
.elementor-widget-text-editor h3 { font-size: 21px; line-height: 1.3; }

/* h2.se-rubrik statt nur .se-rubrik: die Regel
   ".elementor-widget-text-editor h2" oben ist spezifischer als eine blosse
   Klasse und hatte die Marke auf 30px Versalien aufgeblasen. */
.elementor-widget-text-editor h2.se-rubrik,
.se-rubrik {
  margin: 0 0 1.1rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--se-yellow);
  font-size: 15px;   /* = FS_MINI. Versalien mit Sperrung tragen bei dieser
                        Groesse; sie ist dieselbe wie im Fuss und ueber den
                        Preistabellen, damit alle Abschnittsmarken gleich sind. */
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--se-heading);
}

.se-daten {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.7rem 2rem;
  align-items: baseline;
  margin: 0;
}
.se-daten dt {
  color: var(--se-muted);
  font-size: 15px;   /* = FS_MINI, kleinste Stufe der Skala */
  line-height: 1.5;
}
.se-daten dd {
  margin: 0;
  color: var(--se-heading);
  font-weight: 600;
  line-height: 1.55;
}
/* Unter 420px stapeln Label und Wert, sonst quetscht sich die Anschrift. */
@media (max-width: 420px) {
  .se-daten { grid-template-columns: 1fr; gap: 0.15rem; }
  .se-daten dt { margin-top: 0.8rem; }
}

/* Die Auswahl traegt bewusst den Elementor-Kontext: die eigene Regel
   `.elementor-widget-text-editor p` ist spezifischer als eine blosse Klasse und
   wuerde den Abstand sonst wieder auf 0 ziehen. */
.elementor-widget-text-editor .se-hinweis,
.se-hinweis {
  margin: 1.6rem 0 0;
  font-size: 15px;   /* = FS_MINI, kleinste Stufe der Skala */
  line-height: 1.6;
  color: var(--se-muted);
}

.se-kontakt-cta { margin-top: 2.6rem; }

/* KEINE Zeilenlaengen-Deckel auf Fliesstext.
   .se-preis__detail (56ch), .se-preis__fuss (72ch) und .se-hinweis (46ch)
   hatten je einen — Lesbarkeitsmass aus dem Satz, hier aber gegen die
   Vorgabe: Text laeuft auf allen Seiten ueber die volle Bahn. Die drei sassen
   im Preisblock und waren deshalb nur angemeldet zu sehen, was sie bei den
   frueheren Durchsichten hat durchrutschen lassen. */

/* ------------------------------------------------------------ Über uns ----
   Struktur statt Textwand: Rubrik mit Kante, Verweisgitter auf die
   Leistungsseiten, Kernaussage als Zitat, Siegel als Beleg. */

/* Abschnittsüberschrift mit feiner Kante, dieselbe Sprache wie die Rubriken.
   Der Abstand nach oben trennt die Abschnitte; ohne ihn laufen sie ineinander. */
.se-h2 { margin-top: 2.8rem; }
.se-h2:first-child { margin-top: 0; }
.se-h2 .elementor-heading-title {
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--se-yellow);
}

/* Verweisgitter auf die vier Leistungsseiten. */
.se-leistungen {
  margin-bottom: 0.4rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--se-line);
  border: 1px solid var(--se-line);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 0.5rem;
}
.se-leistung {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--se-base);
  padding: 1.1rem 1.3rem;
  text-decoration: none;
  transition: background .15s ease;
}
.se-leistung:hover { background: var(--se-base-2); text-decoration: none; }
.se-leistung__name {
  font-weight: 600;
  color: var(--se-heading);
  line-height: 1.35;
}
.se-leistung:hover .se-leistung__name { color: var(--se-link); }
.se-leistung__pfeil { color: var(--se-link); font-weight: 700; flex: none; }

/* Kernaussage. Kein Kasten, nur eine Kante links: das ist ein Zitat, keine
   Kachel. */
.elementor-widget-text-editor .se-zitat,
.se-zitat {
  margin: 0.6rem 0 1.6rem;
  padding: 0.2rem 0 0.2rem 1.6rem;
  border-left: 3px solid var(--se-yellow);
  background: none;
  font-size: 21px;   /* = FS_H3. 1.3rem waeren 20,8px und lagen zwischen zwei Stufen. */
  line-height: 1.45;
  font-weight: 600;
  color: var(--se-heading);
}

/* Siegel neben seiner Erläuterung. */
/* Das Siegel ist ein Beleg, kein Schmuckbild — der Rahmen setzt es vom
   Fliesstext ab. Angesprochen ueber die Datei, weil die Reihe .se-siegel
   entfallen ist. */
.se-bild--siegel { margin-top: 1.2rem; }
.se-bild--siegel img {
  border: 1px solid var(--se-line);
  border-radius: 4px;
}