.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;background-color:#F7F4EE;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --wandgruen:#1E4741; --messing:#B8902F; --gedaempft:#626C67; --salbei:#5C8F82; --creme:#F7F4EE; --band:#EFEBE2; --weiss:#FFFFFF; --linie:#E0DACE; --linie_dunkel:#3C5F58; --text_auf_dunkel:#C9D6D0; --einschub:#16332E; --formularlinie:#D6CFC0; --schrift_display:Bricolage Grotesque; --schrift_text:IBM Plex Sans; --schrift_mono:IBM Plex Mono; --messing_text:#7D6220; --messing_hell:#D2AC4F; --messing_dunkel:#6B541B; --schrift_zeichen:Anton; }
/* Start custom CSS *//* combastic.com — Custom CSS für Site Settings
   Stand 06.09.2026

   Teil 1: Fallback-Stacks. Die MCP speichert bei font-family nur den
   Familiennamen; ein mitgesendeter Stack wird zu einem Familiennamen,
   der auf nichts passt. Darum hier und nicht dort.

   Teil 2: Icons als mask-image. e-svg zerstoert ueber die MCP das
   Dokument (siehe mcp_erkenntnisse.svg_zerstoert_dokument). Eine Maske
   auf einem leeren div ist scharf, faerbt sich ueber die Variable und
   laedt keine zusaetzliche Datei.

   ---------------------------------------------------------------
   SCOPE GEPRUEFT, 07.09.2026 (Strang startseite-korrektur)
   ---------------------------------------------------------------
   Elementor gibt seine V4-Variablen selbst als EINEN :root-Block am
   Ende von post-6.css aus:

     :root { --wandgruen:#1E4741; ... --schrift_display:Bricolage
             Grotesque; ... }

   Ein zweites `:root { ... }` aus dem Custom CSS haette damit exakt
   dieselbe Spezifitaet (0,1,0) — wer gewinnt, entscheidet allein die
   Quellreihenfolge in der zusammengebauten Datei. Genau die Falle, vor
   der der Prompt warnt.

   Darum steht hier `:root:root` statt `:root`. Das ist derselbe
   Knoten, aber Spezifitaet (0,2,0) und schlaegt Elementors Definition
   unabhaengig von der Reihenfolge. Kein Nachteil, kein !important.

   STATUS seit 11.09.2026: Teil 1 IST in den Site Settings, ebenso die
   beiden Regeln unten. Eingetragen ueber die REST-API am Kit-Post 6
   (meta._elementor_page_settings.custom_css) — die MCP hat dafuer kein
   Werkzeug, die WordPress-Route schon. Wiederherstellungspunkt:
   design-system/kit-site-settings.json.

   Teil 2 ist bereits live und wird NICHT mehr gebraucht: die vier
   Icon-Regeln liegen seit 07.09.2026 als globale Kit-Klassen
   (icon-strich, icon-mail, icon-telefon, icon-adresse) und rendern als
   .elementor .icon-* — hoehere Spezifitaet als die Fassung hier. Beim
   Einfuegen von Teil 1 kann Teil 2 mitkopiert werden (identische
   Regeln, schadet nicht) oder weggelassen werden. */

/* ---------------------------------------------------------------
   Selbst gehostete Schriften (Strang datenschutz, 15.09.2026)

   Vorher lud jede Seite fuenf Stylesheets von fonts.googleapis.com und
   die Schriftdateien von fonts.gstatic.com — eine Uebermittlung der
   IP-Adresse an Google, vor jeder Einwilligung. Genau dafuer hat das
   LG Muenchen I 2022 Schadenersatz zugesprochen (3 O 17493/20).

   Die Dateien liegen jetzt unter wp-content/uploads/fonts/. Hochgeladen
   ueber die WordPress-Font-Library (/wp/v2/font-families/<id>/font-faces),
   weil POST /wp/v2/media woff2 mit rest_upload_sideload_error ablehnt.

   Bricolage Grotesque und IBM Plex Sans sind Variable Fonts: eine Datei
   je Zeichensatz deckt alle Schnitte. IBM Plex Mono ist statisch, daher
   je Schnitt eine Datei. Nur latin und latin-ext — latin enthaelt U+0131,
   das kleine i ohne Punkt aus „lokantacı“.

   Alle drei stehen unter der SIL Open Font License; Selbsthosten ist
   ausdruecklich erlaubt.
   --------------------------------------------------------------- */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('https://www.combastic.com/wp-content/uploads/fonts/bricolage-grotesque-wght-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: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('https://www.combastic.com/wp-content/uploads/fonts/bricolage-grotesque-wght-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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('https://www.combastic.com/wp-content/uploads/fonts/ibm-plex-sans-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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('https://www.combastic.com/wp-content/uploads/fonts/ibm-plex-sans-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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://www.combastic.com/wp-content/uploads/fonts/ibm-plex-mono-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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://www.combastic.com/wp-content/uploads/fonts/ibm-plex-mono-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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://www.combastic.com/wp-content/uploads/fonts/ibm-plex-mono-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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://www.combastic.com/wp-content/uploads/fonts/ibm-plex-mono-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: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://www.combastic.com/wp-content/uploads/fonts/anton-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;
}

:root:root {
  --schrift_display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --schrift_text: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --schrift_mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  /* Wortzeichen fremder Marken, derzeit nur Hollyshirt. Impact ist Systemschrift
     und fehlt auf Android und den meisten Linux-Geraeten, deshalb Anton davor. */
  --schrift_zeichen: 'Anton', Impact, 'Arial Narrow Bold', sans-serif;
}

.icon-strich {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-color: var(--messing_text);
  -webkit-mask-repeat: no-repeat;   mask-repeat: no-repeat;
  -webkit-mask-size: contain;       mask-size: contain;
  -webkit-mask-position: center;    mask-position: center;
}

.icon-mail {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272.6%27%20y%3D%275%27%20width%3D%2718.8%27%20height%3D%2714%27%20rx%3D%271.6%27%2F%3E%3Cpath%20d%3D%27m3.2%206.4%208.8%206.4%208.8-6.4%27%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272.6%27%20y%3D%275%27%20width%3D%2718.8%27%20height%3D%2714%27%20rx%3D%271.6%27%2F%3E%3Cpath%20d%3D%27m3.2%206.4%208.8%206.4%208.8-6.4%27%2F%3E%3C%2Fsvg%3E");
}

.icon-telefon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6.6%203.2H4.5A1.5%201.5%200%200%200%203%204.8C3%2013.1%2010.9%2021%2019.2%2021a1.5%201.5%200%200%200%201.5-1.5v-2.1a1%201%200%200%200-.8-1l-3.3-.7a1%201%200%200%200-1%20.4l-1%201.4a15.2%2015.2%200%200%201-6.3-6.3l1.4-1a1%201%200%200%200%20.4-1l-.7-3.3a1%201%200%200%200-1-.8Z%27%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6.6%203.2H4.5A1.5%201.5%200%200%200%203%204.8C3%2013.1%2010.9%2021%2019.2%2021a1.5%201.5%200%200%200%201.5-1.5v-2.1a1%201%200%200%200-.8-1l-3.3-.7a1%201%200%200%200-1%20.4l-1%201.4a15.2%2015.2%200%200%201-6.3-6.3l1.4-1a1%201%200%200%200%20.4-1l-.7-3.3a1%201%200%200%200-1-.8Z%27%2F%3E%3C%2Fsvg%3E");
}

.icon-adresse {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2021s6.8-6.1%206.8-10.8A6.8%206.8%200%200%200%205.2%2010.2C5.2%2014.9%2012%2021%2012%2021Z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2710.1%27%20r%3D%272.6%27%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2021s6.8-6.1%206.8-10.8A6.8%206.8%200%200%200%205.2%2010.2C5.2%2014.9%2012%2021%2012%2021Z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2710.1%27%20r%3D%272.6%27%2F%3E%3C%2Fsvg%3E");
}

/* ---------------------------------------------------------------
   Fokusring fuer verlinkte Absaetze (Strang kontakt-navigation)

   Elementor rendert einen e-paragraph mit Link als
       <p class="…"><a class="e-paragraph-link-base">Text</a></p>
   und base-desktop.css setzt darauf `all: unset`. Damit faellt der
   Fokusring des Browsers weg — auf JEDEM verlinkten Absatz der Seite,
   also auch in der Kopf- und Fussnavigation.

   Ein Elementstil aus der MCP landet auf dem <p>, nicht auf dem <a>,
   und kann das nicht heilen. Deshalb hier.
   --------------------------------------------------------------- */
.elementor .e-paragraph-link-base:focus-visible {
  outline: 2px solid var(--wandgruen);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Klickflaeche verlinkter Absaetze. `min-height: inherit` uebernimmt genau
   dort eine Hoehe, wo der Absatz selbst eine deklariert — etwa im
   Burger-Menue, dessen Punkte sonst 24px statt 44px hoch sind.

   `a.` statt nur `.`: base-desktop.css traegt dieselbe Spezifitaet (0,2,0)
   und laedt NACH post-6.css. Ohne das zusaetzliche Typselektor-Gewicht
   gewinnt dort `all: unset`. */
.elementor a.e-paragraph-link-base {
  display: inline-flex;
  align-items: center;
  min-height: inherit;
}


/* Akkordeon-Indikator. show_icon: true erzeugt in 4.3 ein leeres div statt
   eines Chevrons — dieselbe Maskentechnik wie bei den Kontakt-Icons.
   Das Element traegt die Klasse faq-chevron und sitzt im summary, ganz rechts. */

.faq-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-inline-start: auto;
  background-color: var(--messing_text);
  transition: transform 150ms ease;
  -webkit-mask-repeat: no-repeat;   mask-repeat: no-repeat;
  -webkit-mask-size: contain;       mask-size: contain;
  -webkit-mask-position: center;    mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m6%209.5%206%206%206-6%27%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m6%209.5%206%206%206-6%27%2F%3E%3C%2Fsvg%3E");
}

details[open] > summary .faq-chevron {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .faq-chevron { transition: none; }
}

/* ---------------------------------------------------------------
   Teil 3: Sticky-Header und Play-Taste
   Strang `nacharbeiten`, 24.09.2026
   ---------------------------------------------------------------

   ACHTUNG SPEZIFITAET: post-<kit>.css laedt VOR base-desktop.css.
   Elementors Basisregeln tragen dasselbe .elementor-Praefix und gewinnen
   bei Gleichstand (siehe tokens.json, custom_css_ueber_rest). Jede Regel
   hier braucht darum ein Gewicht mehr — daher die doppelt geschriebenen
   Klassennamen.
   --------------------------------------------------------------- */

/* Header-Hoehe im Browser GEMESSEN, nicht geschaetzt:
   102px auf Desktop und Tablet, 86px auf dem Handy.
   Der Platzhalter im Prompt (64px) war deutlich zu klein — mit ihm waere
   jedes Ankerziel um 38px hinter den Header gerutscht. */
:root:root {
  --header_hoehe: 102px;
}
@media (max-width: 767px) {
  :root:root { --header_hoehe: 86px; }
}

/* NICHT das <header> des Theme-Parts, sondern dessen Aussenhuelle.
   Gemessen: das innere <header> steckt in
   <header class="elementor elementor-21 elementor-location-header">, und
   diese Huelle ist genau 102px hoch — also exakt so hoch wie der Header
   selbst. `position: sticky` klebt immer nur innerhalb seines eigenen
   Containing Block; bei null Spielraum scrollt der Header mit weg und
   sieht aus, als waere die Regel wirkungslos. Erst auf der Huelle, die
   ein direktes Kind von <body> ist (3510px hoch), hat sticky Weg.

   Die Kit-Default-Klasse e-default-header waere hier also die falsche
   Wahl gewesen, obwohl sie der naheliegende Haken ist. */
body > .elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--creme);
  border-block-end: 1px solid var(--linie);
}

/* Ankerziele springen nicht hinter den Header.
   scroll-padding-top am Scrollcontainer statt scroll-margin-top an jedem
   Ziel: eine Regel statt siebzehn (#referenzen plus #punkt-1 bis
   #punkt-15 auf /agb/), und sie gilt auch fuer Anker, die es noch nicht
   gibt — etwa #empfehlung. */
html {
  scroll-padding-top: calc(var(--header_hoehe) + 16px);
}

/* Burger-Menue auf kurzen Bildschirmen scrollbar. Im Querformat ist ein
   offenes <details> laenger als der Bildschirm, und der letzte Menuepunkt
   waere unerreichbar, sobald der Header klebt. */
body > .elementor-location-header details[open] > .e-accordion-item-content-base {
  max-height: calc(100dvh - var(--header_hoehe));
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Play-Taste ueber dem Videostandbild.
   Hier steht NICHTS mehr dazu — und das hat zwei Gruende.

   1. Geometrie: Kreis und Dreieck liegen als Kit-Klassen `play-taste` und
      `play-dreieck` vor. Nur Kit-Klassen landen im Klassenattribut;
      build-composition und manage-elements koennen nichts anderes anhaengen.

   2. Der Hover lag bis 26.09.2026 hier, als
      `a:hover > .play-taste.play-taste, a:focus-visible > … { transform:
      scale(1.06) }`. In der Datenbank stand die Regel korrekt — im
      ausgelieferten post-6.css war der Praefix `a:hover > ` beim ERSTEN
      Selektor der Liste abgeschnitten. Uebrig blieb

          .play-taste.play-taste,
          a:focus-visible > .play-taste.play-taste { transform: scale(1.06); }

      also eine Taste, die dauerhaft auf 106 % steht: sichtbar 67,8px statt
      der vorgesehenen 64px. Genau das hat der Inhaber am Screenshot als
      „zu gross" gemeldet.

      Der Hover steht deshalb jetzt als Elementstil am umgebenden Link
      (`&:hover .play-taste { … }`). Elementstile gehen nicht durch diese
      Bereinigung.

   MERKE: mehrgliedrige Selektorlisten mit Pseudoklassen im Custom CSS
   gegenlesen — im ausgelieferten Stylesheet, nicht in der Datenbank. *//* End custom CSS */