/*
 * INTER — nur woff2 und woff.
 *
 * Jeder der 14 @font-face-Blöcke listete fünf Formate: eot, woff2, woff, ttf
 * und svg. eot ist Internet Explorer, svg ist iOS 4 — beide seit Jahren ohne
 * Nutzer. ttf wählt kein Browser, der woff2 kann.
 *
 * Heruntergeladen wurde ohnehin immer nur die erste unterstützte Datei, die
 * Requests waren also nie das Problem. Das Problem waren die Bytes: CSS, das
 * bei jedem Seitenaufruf über die Leitung geht und im
 * „Ungenutztes CSS entfernen“-Durchlauf von WP Rocket mitverarbeitet wird —
 * für Formate, die nichts mehr anfordert.
 *
 * woff bleibt als Fallback: Es kostet nichts, weil es nur geladen wird, wenn
 * woff2 fehlt.
 *
 * Vorgeladen werden die zwei Schnitte über der Falz (400 und 800) — siehe
 * frieden_preload_fonts() in inc/compat.php.
 */
/* inter-300 - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url('../../fonts/inter/inter-v20-latin-300.woff2') format('woff2'),
       url('../../fonts/inter/inter-v20-latin-300.woff') format('woff');
}
/* inter-300italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: italic;
  font-weight: 300;
  src: url('../../fonts/inter/inter-v20-latin-300italic.woff2') format('woff2'),
       url('../../fonts/inter/inter-v20-latin-300italic.woff') format('woff');
}
/* inter-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../../fonts/inter/inter-v20-latin-regular.woff2') format('woff2'),
       url('../../fonts/inter/inter-v20-latin-regular.woff') format('woff');
}
/* inter-italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  src: url('../../fonts/inter/inter-v20-latin-italic.woff2') format('woff2'),
       url('../../fonts/inter/inter-v20-latin-italic.woff') format('woff');
}
/* inter-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../../fonts/inter/inter-v20-latin-500.woff2') format('woff2'),
       url('../../fonts/inter/inter-v20-latin-500.woff') format('woff');
}
/* inter-500italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: italic;
  font-weight: 500;
  src: url('../../fonts/inter/inter-v20-latin-500italic.woff2') format('woff2'),
       url('../../fonts/inter/inter-v20-latin-500italic.woff') format('woff');
}
/* inter-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('../../fonts/inter/inter-v20-latin-600.woff2') format('woff2'),
       url('../../fonts/inter/inter-v20-latin-600.woff') format('woff');
}
/* inter-600italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: italic;
  font-weight: 600;
  src: url('../../fonts/inter/inter-v20-latin-600italic.woff2') format('woff2'),
       url('../../fonts/inter/inter-v20-latin-600italic.woff') format('woff');
}
/* inter-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../../fonts/inter/inter-v20-latin-700.woff2') format('woff2'),
       url('../../fonts/inter/inter-v20-latin-700.woff') format('woff');
}
/* inter-700italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: italic;
  font-weight: 700;
  src: url('../../fonts/inter/inter-v20-latin-700italic.woff2') format('woff2'),
       url('../../fonts/inter/inter-v20-latin-700italic.woff') format('woff');
}
/* inter-800 - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  src: url('../../fonts/inter/inter-v20-latin-800.woff2') format('woff2'),
       url('../../fonts/inter/inter-v20-latin-800.woff') format('woff');
}
/* inter-800italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: italic;
  font-weight: 800;
  src: url('../../fonts/inter/inter-v20-latin-800italic.woff2') format('woff2'),
       url('../../fonts/inter/inter-v20-latin-800italic.woff') format('woff');
}
/* inter-900 - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  src: url('../../fonts/inter/inter-v20-latin-900.woff2') format('woff2'),
       url('../../fonts/inter/inter-v20-latin-900.woff') format('woff');
}
/* inter-900italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: italic;
  font-weight: 900;
  src: url('../../fonts/inter/inter-v20-latin-900italic.woff2') format('woff2'),
       url('../../fonts/inter/inter-v20-latin-900italic.woff') format('woff');
}

:root{
  /* ==========================================================================
     DIE MARKENFARBEN — aus dem Logo, und nur daraus.

     Das Logo trägt drei Farben: das Orange der Taube, das dunkle Grün des
     Ölzweigs und das Schwarz des Schriftzugs. Die Website benutzte zwei davon
     — Orange und dunkle Neutraltöne — und dazu ein Schieferblau (#3b5b75 /
     #2f4d63), das im Logo nirgends vorkommt. Es war die einzige Farbe auf der
     Seite, die von außen kam, und sie stand an prominenten Stellen: dunkle
     Schaltflächen, Footer, Formularakzente.

     Das Grün des Ölzweigs kam umgekehrt gar nicht vor.

     Beide Probleme lösen sich mit demselben Tausch, weil Schieferblau und
     dunkles Grün dieselbe Rolle spielen: ein ruhiger, tiefer Gegenpol zum
     Orange. Die Seite verliert dadurch keine Struktur — sie verliert nur die
     Farbe, die nicht zur Marke gehört.

     NICHT ERSETZT WURDE das WhatsApp-Grün (#2F5D34). Das ist keine gestalterische
     Entscheidung, sondern die Farbe eines fremden Dienstes: Ein WhatsApp-Knopf
     in Markengrün wird nicht mehr als WhatsApp-Knopf erkannt.
     ========================================================================== */
  /* ==========================================================================
     SYMBOLFLÄCHEN — der eine Schalter, um sie zurückzudrehen.

     Auf der ganzen Website sitzen Symbole in einer getönten Fläche: neben
     Leistungen, in den Zusagen, in den Ortslisten, in den Reitern. Die waren
     alle orange — dieselbe Farbe wie die Schaltflächen. Auf einer Seite wie
     Standorte hieß das: 27 orange Symbolflächen konkurrieren mit dem einen
     orangen Knopf, der tatsächlich etwas auslöst.

     Jetzt teilen sich die beiden Logofarben die Arbeit:
        ORANGE = Handlung   (Schaltflächen, Rabattband, aktiver Reiter)
        GRÜN   = Information (Symbole, Haken, Ortsnadeln)

     Damit ist in jedem Abschnitt genau eine Sache orange, und das ist die,
     die man anklicken soll.

     ZURÜCKDREHEN: Diese vier Werte auf
        --icon-bg: #fbe4c6;  --icon-fg: #d98f0c;
        --icon-bg-hover: #F2A820;  --icon-fg-hover: #fff;
     setzen, und die Website ist wieder durchgehend orange. Alles andere
     bleibt, wo es ist — deshalb stehen sie hier und nicht in neun Dateien.
     ========================================================================== */
  /* Die Fläche war zuerst #ddeedf — und sah grau aus, nicht grün. Der Grund
     stand in den Zahlen: Das orange Original hatte 87 % Sättigung, die grüne
     Entsprechung nur 33. Bei gleicher Helligkeit UND gleicher Sättigung liest
     sie sich als das, was sie sein soll. */
  --icon-bg:       #d6f0d9;   /* Ruhezustand der Fläche */
  --icon-fg:       #2F5D34;   /* Ruhezustand des Symbols */
  --icon-bg-hover: #2F5D34;
  --icon-fg-hover: #ffffff;

  /*
   * Symbole INNERHALB eines Bedienelements bleiben orange.
   *
   * Ein Reiter oder ein aufklappbarer Menüeintrag ist beides zugleich: Der
   * gewählte trägt Orange, weil er die Handlung markiert. Wären die übrigen
   * grün, stünden in EINEM Bedienelement zwei Farben nebeneinander — das
   * liest sich nicht als "informativ vs. aktiv", sondern als uneinheitlich.
   *
   * Deshalb: Grün überall dort, wo ein Symbol Inhalt begleitet. Orange dort,
   * wo es Teil eines Schalters ist.
   */
  --icon-bg-control: #fbe4c6;
  --icon-fg-control: #d98f0c;

  --brand-orange:      #F2A820;   /* die Taube */
  --brand-orange-deep: #dd960f;
  --brand-green:       #2F5D34;   /* der Ölzweig */
  --brand-green-deep:  #24492A;
  --brand-green-soft:  #E9F0E9;   /* sehr helle Tönung für Flächen */

  /*
   * ACHTUNG, DIE NAMEN STIMMEN NICHT.
   *
   * --orange ist die ÜBERSCHRIFTENFARBE (h1–h6 lesen sie weiter unten),
   * --grey ist die LINKFARBE und tatsächlich orange. Die Namen sind seit
   * Anfang an vertauscht. Umbenennen hieße, sie in neun Stylesheets zu
   * verfolgen; sie behalten deshalb ihre Namen und bekommen hier eine
   * Erklärung.
   *
   * Die Werte sind neu: #444242 war ein warmes Mittelgrau, das auf Weiß
   * ausgewaschen wirkte — Fließtext und Überschriften wurden davon gleich
   * blass, und weil die Überschriften ohnehin nur knapp größer waren als der
   * Text, fehlte der Seite jede Tiefe. Jetzt ein dunkles, leicht kühles Grau:
   * deutlich dunkler, aber kein reines Schwarz, das auf Weiß hart schneidet.
   */
  --orange:#1c232c;      /* Überschriften */
  --Light-orange:#fbe1b2;
  --grey:#F2A820;        /* Links */
  --text:#2b323c;        /* Fließtext */

  /* ==========================================================================
     TYPE SCALE — the single place body font sizes are set.
     --------------------------------------------------------------------------
     Change --fs-base and every non-heading size on the site moves with it:
     the smaller steps are calc()'d from it rather than being fixed numbers, so
     labels, meta rows and captions keep their relationship to body copy.

     Headings are deliberately NOT part of this scale. They keep their own
     sizes (mostly clamp()-based) so raising body text does not enlarge every
     title along with it.

         --fs-base   body copy, paragraphs, list items, links, table cells
         --fs-md     slightly reduced: card text, form fields, nav
         --fs-sm     secondary: meta rows, captions, footer links
         --fs-xs     smallest: badges, counters, breadcrumb separators
     ========================================================================== */
  /*
   * DIE STUFEN WAREN KEINE STUFEN.
   *
   * Alle vier standen auf 17px — Bildunterschriften, Meta-Zeilen und Badges
   * also genauso groß wie der Fließtext. Damit gab es auf der Seite nur eine
   * einzige Textgröße, und eine 30px-Überschrift wirkt daneben nicht groß,
   * sondern knapp: Größe liest sich immer im Verhältnis, und es gab kein
   * Verhältnis.
   *
   * Die Stufen unten sind wieder gestaffelt. Der Fließtext bleibt bei 17px;
   * kleiner wird nur, was auch untergeordnet ist.
   */
  /* Je 1px größer (Kundenwunsch Okt. 2026: „Schrift etwas größer, besser
     lesbar“). Die Abstufung untereinander bleibt gleich. */
  --fs-base: 18px;   /* Fließtext, Absätze, Listen, Links */
  --fs-md:   17px;   /* Kartentext, Formularfelder, Navigation */
  --fs-sm:   16px;   /* Meta-Zeilen, Bildunterschriften, Footer-Links */
  --fs-xs:   14px;   /* Badges, Zähler, Trennzeichen */

  /* ==========================================================================
     BANNER GRADIENT — the single place the hero overlay tint is defined.

     Every banner on the site (front page, Über uns, Leistungen, single
     service, Kontakt, Umzug planen, Blog) paints this over its photo, so the
     heroes read as one family instead of drifting apart per template. Each
     template used to carry its own hand-tuned stack; those are gone.

     Warm gold at the top grading down to a neutral grey. `0deg` runs bottom to
     top, so the 100% stop is the TOP of the banner — that is the gold end.
     Both stops are semi-transparent on purpose: the photograph reads through
     the tint, and the grey lower half is what keeps white copy legible over a
     bright image.

     Change it here and every banner moves with it.
     ========================================================================== */
  /* ==========================================================================
     DER SCHLEIER ÜBER DEN BANNERBILDERN — an genau einer Stelle.

     Sechs Seiten legen denselben dreilagigen Verlauf über ihr Bannerfoto, und
     bis hierher hatte jede ihre eigene Kopie davon. Kopien driften: Die
     Startseite stand bei .93/.86/.66/.46, die Serviceseite bei
     .9/.78/.46/.2 — dieselbe Idee, aber die Startseite war so dunkel, dass
     vom Foto kaum noch etwas übrig war, und niemand konnte das sehen, ohne
     zwei Dateien nebeneinanderzulegen.

     Jetzt eine Definition. Wer den Schleier ändert, ändert ihn überall, und
     zwei Banner können nicht mehr unterschiedlich dunkel sein, ohne dass es
     jemand ausdrücklich so schreibt.

     DREI LAGEN, jede mit einer Aufgabe:
       1. waagerecht — schwer dort, wo die Überschrift steht, leicht zur
          anderen Seite, damit das Foto sichtbar bleibt;
       2. senkrecht  — setzt Ober- und Unterkante, damit der Kopfbereich nicht
          in den Abschnitt darunter ausfranst;
       3. eine Spur Markenwärme über einer Ecke.

     --fr-scrim-stacked gilt, wenn der Kopfbereich gestapelt ist: Dann steht
     die Überschrift nicht mehr links, ein seitlich gewichteter Verlauf hat
     dort also nichts mehr zu gewichten.
     ========================================================================== */
  --fr-scrim:
    linear-gradient(90deg,
      rgba(11, 14, 18, .68) 0%,
      rgba(11, 14, 18, .52) 34%,
      rgba(11, 14, 18, .24) 66%,
      rgba(11, 14, 18, .04) 100%),
    linear-gradient(180deg,
      rgba(11, 14, 18, .22) 0%,
      rgba(11, 14, 18, .02) 45%,
      rgba(11, 14, 18, .26) 100%),
    linear-gradient(120deg,
      rgba(242, 168, 32, .12) 0%,
      rgba(242, 168, 32, 0) 55%);

  --fr-scrim-stacked:
    linear-gradient(180deg,
      rgba(11, 14, 18, .66) 0%,
      rgba(11, 14, 18, .5) 45%,
      rgba(11, 14, 18, .66) 100%),
    linear-gradient(120deg,
      rgba(242, 168, 32, .12) 0%,
      rgba(242, 168, 32, 0) 60%);

  --fr-banner-gradient:
    linear-gradient(0deg,
      rgba(89, 89, 89, .5) 14%,
      rgba(153, 119, 0, .82) 100%);
}

*, ::after, ::before {
  box-sizing: border-box;
}

html,body {
  margin:0;
  padding:0;
  /* `clip`, not `hidden`. Per spec a `visible` axis is promoted to `auto`
     when the other axis is not visible, so `overflow-x: hidden` here made
     both html and body their own scroll containers and broke normal viewport
     scrolling (which in turn stopped the back-to-top button ever showing).
     `clip` is exempt from that promotion and clips the same way. */
  overflow-x: clip;
  font-family: 'Inter';
  font-size: var(--fs-base);
  font-weight:400;
}

html {
  scroll-behavior: smooth;
	padding-bottom: 0px !important;
}

/* ==== CONTAINER CSS BEGIN ======= */
.alignfull {
  max-width: 100vw;
  
}

.alignwide {
  max-width: 1350px;
  margin: auto;
  width: 100%;;
}

@media only screen and (max-width: 1430px) and (min-width: 1200px){
	.alignwide {
  max-width: 1200px;
  margin: auto;
}
.logo-hreader > .kt-row-column-wrap,.topbarhead > .kt-row-column-wrap,.footwidth > .kt-row-column-wrap{
  max-width: 1200px !important;
  margin: auto;
}
}

/* ==== CONTAINER CSS BEGIN ======= */
p {
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text);
  margin: 14px 0px;
}

/* A bare `li` rule beats any inherited size, however specific the ancestor,
   so it has to be stated here too or list items ignore --fs-base. */
li {
  font-size: var(--fs-base);
  color: var(--text) !important;
}
ul {
  list-style: none;
  padding-left:0;
}

/* ==========================================================================
   NUR FÜR SCREENREADER

   Diese Klasse lag in blog.css und — als `.front-page .screen-reader-only` —
   in front-page.css. Beide Dateien werden nur auf bestimmten Templates
   geladen. Auf der Standorte-Seite und den Serviceseiten war die Klasse
   deshalb undefiniert, und alles, was für Screenreader gedacht war, stand
   sichtbar auf der Seite: das Label „Standort suchen“ neben dem Suchfeld und
   das vorangestellte „Umzug“ in jedem Ortslink.

   Eine unsichtbare Klasse gehört in die eine Datei, die überall geladen wird.

   clip-path statt display:none: Ausgeblendetes wird von Screenreadern gar
   nicht vorgelesen — der Text soll ja gehört, nur nicht gesehen werden.
   ========================================================================== */

.screen-reader-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Ausnahme für Sprungmarken: Ein Link, der nur für die Tastatur da ist, muss
   sichtbar werden, sobald er den Fokus hat. */
.screen-reader-only:focus,
.screen-reader-only:focus-within {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

/* ==========================================================================
   TEXT SELECTION

   The browser default is its own blue — the one colour on the site that
   belongs to nobody's palette. Highlighting a phone number or an address to
   copy it is a thing people do on this site constantly, and every time it
   happened a blue that appears nowhere else flashed across the page.

   Brand orange at 28% rather than solid: a solid fill has to carry white text
   to stay legible, which means the ink changes as well as the ground and the
   words jump. A tint leaves every colour on the page readable through it —
   dark body copy, white copy on a banner, orange links — so only the
   highlight appears.

   -moz- needs its own rule: it is not an alias, and a selector list
   containing an unrecognised pseudo-element is dropped whole, so combining
   the two would lose both.
   ========================================================================== */

::selection {
  background-color: rgba(242, 168, 32, .28);
  /* No colour here on purpose — see above. */
  text-shadow: none;
}

::-moz-selection {
  background-color: rgba(242, 168, 32, .28);
  text-shadow: none;
}

/* On a dark ground the same tint is too faint to read as a selection at all,
   so it comes up to a solid orange with ink on top — the one place the ink
   does have to change. */
.fp-hero ::selection,
.fp-bg-dark ::selection,
.fp-offer-card ::selection,
.ab-hero ::selection,
.ab-band ::selection,
.sv-hero ::selection,
.st-hero ::selection,
.ct-hero ::selection,
.fr-cta--bar ::selection,
.site-footer ::selection {
  background-color: #F2A820;
  color: #24282e;
}

.fp-hero ::-moz-selection,
.fp-bg-dark ::-moz-selection,
.fp-offer-card ::-moz-selection,
.ab-hero ::-moz-selection,
.ab-band ::-moz-selection,
.sv-hero ::-moz-selection,
.st-hero ::-moz-selection,
.ct-hero ::-moz-selection,
.fr-cta--bar ::-moz-selection,
.site-footer ::-moz-selection {
  background-color: #F2A820;
  color: #24282e;
}
/*
 * Die Überschriftengrößen.
 *
 * h2 und h3 standen beide auf 30px — eine Unterüberschrift war also exakt so
 * groß wie die Überschrift darüber, womit die dritte Ebene gar keine war. Und
 * 30px gegen 17px Fließtext ist ein Sprung von 1,8; auf einer Seite mit
 * langen Absätzen ist das zu wenig, damit eine Überschrift die Seite
 * gliedert.
 *
 * clamp() statt fester Werte: Dieselbe Zeile trägt jetzt Telefon und Desktop,
 * ohne dass jede Vorlage ihre eigene Verkleinerung mitbringen muss.
 */
h1 {
    font-size: clamp(32px, 4.2vw, 55px);
}
h2 {
  font-size: clamp(25px, 2.6vw, 36px);
}
h3 {
  font-size: clamp(20px, 1.7vw, 24px);
}
h4 {
 font-size: 25px;
}
h5 {
  font-size: 23px;
}
h6 {
  font-size: 21px;
}
h1,h2,h3,h4,h5,h6{
  font-family: 'Inter';
  margin-bottom: 0px;
  margin-top: 0px;
  line-height: 1.2;
  color: var(--orange);
  width: 100%;
}
a {
  color: var(--grey);
  text-decoration: none;
}
a:hover {
  color: var(--text);
  text-decoration: none;
}
/* ===== WPFORM GENERAL BEGIN ==== */
.wpforms-container-full input {
  background: #fff !important;
  border-radius: 6px !important;
  border: 1px solid #D1D5DB !important;
  color: #000;
  height: 50px !important;
}
.wpforms-container-full select{
  background: #fff !important;
  border-radius: 6px !important;
  border: 1px solid #D1D5DB !important;
  color: #000;
  height: 50px !important;
}
#wpforms-631-field_13 input{
  height: auto !important;
}
.wpforms-container .wpforms-field{
  padding: 7px 0 !important;
}
.wpforms-container-full textarea{
  background: #fff !important;
  border-radius: 6px !important;
  border: 1px solid #D1D5DB !important;
  color: #000;
}
.wpforms-container-full .wpforms-field-file-upload input#wpforms-231-field_12 {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0px !important;
}

.wpforms-container-full button.wpforms-submit {
  background: #2F5D34 !important;
  font-size: 21px !important;
  width: 100%;
  height: 54px !important;
  border-radius: 6px !important;
}
.wpforms-container-full button.wpforms-submit:hover{
  background:#F2A820 !important;
}

/* ===== WPFORM GENERAL END ==== */

/* ==========================================================================
   BUTTON SYSTEM — every button on the site, defined once.

   There were eight of these. About, Kontakt, Leistungen, Service, Umzug
   planen, Standorte, Blog and 404 each carried their own near-identical
   `.xx-btn` block in their own stylesheet, and the front page used a third
   pattern entirely (an <a> wrapping a <div> wrapping a <p>). They had drifted:
   padding ran from 13/20 to 15/26, radii from 6px to 999px, weights from 500
   to 700, and heights differed by up to 9px — which is why two buttons sitting
   next to each other never quite lined up.

   This lives in theme.css because theme.css is the one stylesheet loaded on
   every page. The page files keep only what is genuinely local to them (a
   button on an orange card that must not hover to orange, for instance).

   DIE PRÄFIXNAMEN SIND ALIASE. `.fr-btn` ist die Komponente; die
   seitenspezifischen Namen standen daneben, damit beim Zusammenlegen kein
   Template angefasst werden musste.

   Von den ursprünglich acht sind noch drei übrig: .dl-btn
   (Dienstleistungen), .bl-btn (Blog) und .nf-btn (404). Die fünf anderen —
   .ab-btn, .ct-btn, .sv-btn, .up-btn, .st-btn — sind entfernt: Ihre Templates
   wurden inzwischen umgeschrieben und benutzen .fr-btn direkt, die Aliase
   standen also nur noch als Ballast in jeder Selektorliste.

   Neues Markup benutzt .fr-btn.

   HOVER — EINE REGEL FÜR ALLE: ORANGE GEHT AUF LOGO-GRÜN.

   Vorher war es "jede Schaltfläche wird beim Überfahren orange", in sechs von
   acht Dateien einzeln notiert — was bedeutete, dass eine orange Schaltfläche
   auf Orange umschlug und die meistgenutzte Schaltfläche der Website gar
   keine Rückmeldung gab. Danach ging jede Variante auf eine andere Farbe:
   Orange auf Dunkel, Dunkel auf Orange, Kontur füllte sich. Das funktionierte,
   war aber vier Regeln statt einer, und die Farben kamen aus vier Richtungen.

   Jetzt trägt das Logo die Antwort. Es hat zwei Farben — das Orange der Taube
   und das Grün des Ölzweigs — und die beiden sind füreinander gemacht. Also:
   RUHEZUSTAND ORANGE, ÜBERFAHREN GRÜN. Eine Regel, beide Markenfarben, und
   die Rückmeldung ist überall dieselbe Geste.

   Zwei Ausnahmen, beide aus demselben Grund — eine Fläche kann nicht auf ihre
   eigene Farbe umschlagen:
     - was schon grün ist, wird dunkler (--brand-green-deep);
     - was weiß auf Orange steht, wird ebenfalls grün, behält aber weiße
       Schrift statt dunkler.
   ========================================================================== */

:root {
  --btn-h: 54px;          /* one-line height — everything lines up on this */
  --btn-px: 28px;         /* horizontal padding */
  --btn-py: 15px;         /* vertical padding; lets a long label wrap to two lines */
  --btn-radius: 10px;
  /* Die Schaltflächen schlagen nicht mehr auf Ink um, sondern auf Logo-Grün
     (siehe die HOVER-Notiz oben). Dieser Wert dient jetzt noch als
     Fokusrahmen und als Schriftfarbe auf hellen Varianten. Der Blaustich ist
     raus: Der Schriftzug im Logo ist schwarz, also ist das Dunkel hier
     neutral statt marineblau. */
  --btn-ink: #24282e;
  --btn-orange: #F2A820;
  --btn-orange-deep: #dd960f;
  /* Hieß --btn-slate, solange der Wert Schieferblau war. */
  --btn-green: #2F5D34;
  --btn-green: #2F5D34;
  --btn-green-deep: #24492A;
}

.fr-btn,
.dl-page .dl-btn,
.bl-btn,
.nf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--btn-h);
  padding: var(--btn-py) var(--btn-px);
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  background-color: transparent;
  font-family: 'Inter';
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease,
              transform .25s ease, box-shadow .25s ease;
}

/* Icons are sized here rather than in nine places. The leading one slides out
   from the label on hover and the trailing one slides forward — both move
   away from the centre, so the button reads as opening rather than shuffling. */
.fr-btn svg,
.dl-page .dl-btn svg,
.bl-btn svg,
.nf-btn svg {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.fr-btn-ico,
.dl-btn-icon,
.bl-btn-ico,
.nf-btn-ico {
  display: inline-flex;
  flex: 0 0 auto;
  transition: transform .25s ease;
}
.fr-btn:hover .fr-btn-ico:first-child,
.dl-page .dl-btn:hover .dl-btn-icon:first-child {
  transform: translateX(-4px);
}
.fr-btn:hover .fr-btn-ico:last-child,
.dl-page .dl-btn:hover .dl-btn-icon:last-child {
  transform: translateX(4px);
}

/* Lift is shared; the shadow colour comes from the variant so it reads as the
   button's own light rather than a generic grey drop. */
.fr-btn:hover,
.fr-btn:focus-visible,
.dl-page .dl-btn:hover,
.dl-page .dl-btn:focus-visible,
.bl-btn:hover,
.bl-btn:focus-visible,
.nf-btn:hover,
.nf-btn:focus-visible {
  transform: translateY(-2px);
}

.fr-btn:active,
.dl-page .dl-btn:active,
.bl-btn:active,
.nf-btn:active {
  transform: translateY(0);
}

.fr-btn:focus-visible,
.dl-page .dl-btn:focus-visible,
.bl-btn:focus-visible,
.nf-btn:focus-visible {
  outline: 2px solid var(--btn-ink);
  outline-offset: 3px;
}

/* ---------- variant: primary (orange) ---------- */

.fr-btn--primary,
.dl-page .dl-btn--orange,
.nf-btn {
  background-color: var(--btn-orange);
  border-color: var(--btn-orange);
  color: #fff !important; /* beats theme.css's global a colour */
  box-shadow: 0 10px 24px -14px rgba(242, 168, 32, .95);
}

.fr-btn--primary:hover,
.fr-btn--primary:focus-visible,
.dl-page .dl-btn--orange:hover,
.dl-page .dl-btn--orange:focus-visible,
.nf-btn:hover,
.nf-btn:focus-visible {
  background-color: var(--brand-green);
  border-color: var(--brand-green);
  color: #fff !important;
  box-shadow: 0 16px 30px -14px rgba(47, 93, 52, .75);
}
/* ---------- variant: dark ---------- */

.fr-btn--dark,
.dl-page .dl-btn--dark {
  background-color: var(--btn-green);
  border-color: var(--btn-green);
  color: #fff !important;
  box-shadow: 0 10px 24px -14px rgba(47, 93, 52, .85);
}
.fr-btn--dark:hover,
.fr-btn--dark:focus-visible,
.dl-page .dl-btn--dark:hover,
.dl-page .dl-btn--dark:focus-visible {
  background-color: var(--brand-green-deep);
  border-color: var(--brand-green-deep);
  color: #fff !important;
  box-shadow: 0 16px 30px -14px rgba(47, 93, 52, .75);
}
/* ---------- variant: outline (on a light background) ---------- */

.fr-btn--outline {
  background-color: #fff;
  border-color: #d9dde4;
  color: var(--btn-ink) !important;
  box-shadow: 0 1px 2px rgba(29, 35, 38, .05);
}
.fr-btn--outline:hover,
.fr-btn--outline:focus-visible {
  background-color: var(--brand-green);
  border-color: var(--brand-green);
  color: #fff !important;
  box-shadow: 0 16px 30px -14px rgba(47, 93, 52, .75);
}

/* ---------- variant: ghost (on a photo or a dark panel) ---------- */

.fr-btn--ghost,
.bl-btn--ghost {
  background-color: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .6);
  color: #fff !important;
}

.fr-btn--ghost:hover,
.fr-btn--ghost:focus-visible,
.bl-btn--ghost:hover,
.bl-btn--ghost:focus-visible {
  background-color: var(--brand-green);
  border-color: var(--brand-green);
  color: #fff !important;
  box-shadow: 0 16px 30px -14px rgba(47, 93, 52, .75);
}

/* ---------- dark grounds ----------

   On a dark section or a dark call-to-action panel the variant defaults point
   the wrong way. --white hovers to ink, so a white button on the dark bar
   turned near black against a near black ground and read as vanishing rather
   than as responding. --ghost hovers to solid white, which is glare at that
   size. --outline is a white card that hovers orange already, but it is
   listed here so the rule is complete rather than nearly complete.

   Every button on a dark ground hovers to the brand orange. The one exception
   is a button that is already orange: it cannot hover to a colour it is, so
   it deepens instead — same hue, visible change.

   The list below is the dark grounds on the site. Add a section here when a
   new one appears; that is cheaper than a marker class on every template. */
.front-page .fp-hero .fr-btn:hover,
.front-page .fp-hero .fr-btn:focus-visible,
.front-page .fp-bg-dark .fr-btn:hover,
.front-page .fp-bg-dark .fr-btn:focus-visible,
.fp-offer-card .fr-btn:hover,
.fp-offer-card .fr-btn:focus-visible,
.sv-page .sv-hero .fr-btn:hover,
.sv-page .sv-hero .fr-btn:focus-visible,
.st-page .st-hero .fr-btn:hover,
.st-page .st-hero .fr-btn:focus-visible,
.fr-cta--bar .fr-btn:hover,
.fr-cta--bar .fr-btn:focus-visible,
.site-footer .fr-btn:hover,
.site-footer .fr-btn:focus-visible {
  background-color: var(--brand-green);
  border-color: var(--brand-green);
  color: #fff !important;
  box-shadow: 0 16px 30px -14px rgba(47, 93, 52, .8);
}

/* Already orange — deepen rather than stand still. */
.front-page .fp-hero .fr-btn--primary:hover,
.front-page .fp-hero .fr-btn--primary:focus-visible,
.front-page .fp-bg-dark .fr-btn--primary:hover,
.front-page .fp-bg-dark .fr-btn--primary:focus-visible,
.fp-offer-card .fr-btn--primary:hover,
.fp-offer-card .fr-btn--primary:focus-visible,
.sv-page .sv-hero .fr-btn--primary:hover,
.sv-page .sv-hero .fr-btn--primary:focus-visible,
.st-page .st-hero .fr-btn--primary:hover,
.st-page .st-hero .fr-btn--primary:focus-visible,
.fr-cta--bar .fr-btn--primary:hover,
.fr-cta--bar .fr-btn--primary:focus-visible,
/* Auf dunklem Grund gilt dieselbe Regel; die Ausnahme für bereits orange
   Flächen entfällt, weil Grün von Orange weit genug entfernt ist. */
.site-footer .fr-btn--primary:hover,
.site-footer .fr-btn--primary:focus-visible {
  background-color: var(--brand-green);
  border-color: var(--brand-green);
  box-shadow: 0 16px 30px -14px rgba(47, 93, 52, .75);
}

/*
 * WhatsApp trug bisher sein eigenes Grün (#25D366). Auf Wunsch trägt es jetzt
 * das Grün des Logos.
 *
 * Der Einwand dagegen sei festgehalten, damit die Entscheidung nachvollziehbar
 * bleibt: Das Signalgrün von WhatsApp ist ein Wiedererkennungszeichen — es
 * sagt "dieser Knopf öffnet WhatsApp", bevor jemand die Beschriftung liest.
 * Mit dem dunkleren Logogrün trägt das Symbol diese Aufgabe allein. Da alle
 * WhatsApp-Schaltflächen der Website das Symbol führen, ist der Verlust
 * gering — aber er ist da.
 */
.front-page .fp-hero .fr-btn--whatsapp:hover,
.front-page .fp-hero .fr-btn--whatsapp:focus-visible,
.sv-page .sv-hero .fr-btn--whatsapp:hover,
.sv-page .sv-hero .fr-btn--whatsapp:focus-visible,
.fr-cta--bar .fr-btn--whatsapp:hover,
.fr-cta--bar .fr-btn--whatsapp:focus-visible {
  background-color: var(--btn-green-deep);
  border-color: var(--btn-green-deep);
  box-shadow: 0 16px 30px -14px rgba(36, 73, 42, .8);
}

/* The phone block is not a .fr-btn, so the rules above miss it. On the white
   panel its orange-to-ink hover is right; on the dark bar the ink lands on a
   near black ground and the control looks like it switched off. There it
   deepens, like every other orange on a dark ground. */
.fr-cta--bar .fr-cta-phone:hover,
.fr-cta--bar .fr-cta-phone:focus-visible {
  background-color: var(--brand-green);
  box-shadow: 0 16px 30px -14px rgba(47, 93, 52, .8);
}

.fr-cta--bar .fr-cta-phone:focus-visible {
  outline-color: #fff;
}

/* The focus ring is drawn in ink, which is invisible on these grounds. */
.front-page .fp-hero .fr-btn:focus-visible,
.front-page .fp-bg-dark .fr-btn:focus-visible,
.fp-offer-card .fr-btn:focus-visible,
.sv-page .sv-hero .fr-btn:focus-visible,
.st-page .st-hero .fr-btn:focus-visible,
.fr-cta--bar .fr-btn:focus-visible,
.site-footer .fr-btn:focus-visible {
  outline-color: #fff;
}

/* ---------- variant: white (on an orange panel) ---------- */

.fr-btn--white,
.bl-btn--solid {
  background-color: #fff;
  border-color: #fff;
  color: var(--btn-ink) !important;
}

.fr-btn--white:hover,
.fr-btn--white:focus-visible,
.bl-btn--solid:hover,
.bl-btn--solid:focus-visible {
  background-color: var(--brand-green);
  border-color: var(--brand-green);
  color: #fff !important;
  box-shadow: 0 16px 30px -14px rgba(47, 93, 52, .75);
}
/* ---------- variant: WhatsApp ---------- */

.fr-btn--whatsapp {
  background-color: var(--btn-green);
  border-color: var(--btn-green);
  color: #fff !important;
  box-shadow: 0 10px 24px -14px rgba(47, 93, 52, .95);
}
.fr-btn--whatsapp:hover,
.fr-btn--whatsapp:focus-visible {
  background-color: var(--btn-green-deep);
  border-color: var(--btn-green-deep);
  color: #fff !important;
  box-shadow: 0 16px 30px -14px rgba(47, 93, 52, 1);
}
/* ---------- layout modifiers ---------- */

.fr-btn--block,
.dl-page .dl-btn--block {
  width: 100%;
}
.fr-btn--center {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* A row of buttons. Replaces the ad-hoc margins each template used to put on
   its own buttons to separate them. */
.fr-btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}

@media only screen and (max-width: 767px) {
  :root {
    --btn-px: 20px;
  }

  /* Full width below 767: side by side they end up too narrow for their
     labels, and a half-width button next to a wrapped one looks broken. */
  .fr-btn,
  .dl-page .dl-btn,
  .bl-btn {
    width: 100%;
  }

  .fr-btn-row {
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fr-btn,
  .dl-page .dl-btn,
  .bl-btn,
  .nf-btn,
  .fr-btn-ico,
  .dl-btn-icon {
    transition: none;
  }

  .fr-btn:hover,
  .dl-page .dl-btn:hover,
  .bl-btn:hover,
  .nf-btn:hover {
    transform: none;
  }
}
/* ===================== BUTTON SYSTEM END ===================== */

/* ==========================================================================
   CALL-TO-ACTION BLOCKS

   Three shapes, one component. They sit between sections and are built from
   the same parts — an icon, a body, an actions group — so a page can change
   which one it uses without changing what it says.

     .fr-cta--panel   light card. Icon, heading, one line of copy, then a
                      phone block and a secondary button. For a considered
                      "get in touch" moment.
     .fr-cta--bar     dark strip. Icon, a small-caps line, the number, and a
                      single pill on the right. For an interruption — short,
                      loud, one decision.
     .fr-cta--wa      the WhatsApp panel. Same skeleton, green, with a list.

   The phone block (.fr-cta-phone) is deliberately NOT a .fr-btn: the number
   IS the call to action, so it is set as two lines — what to do above, what
   to dial below — rather than hidden behind the word "Anrufen".
   ========================================================================== */

.fr-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 34px 36px;
  border-radius: 18px;
}

.fr-cta-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background-color: var(--btn-orange);
  color: #fff;
  box-shadow: 0 12px 26px -14px rgba(242, 168, 32, .95);
}

.fr-cta-icon svg {
  display: block;
  width: 27px;
  height: 27px;
}

.fr-cta-body {
  flex: 1 1 auto;
  min-width: 0;
}

.fr-cta-eyebrow {
  margin: 0 0 6px;
  color: #b8790a;
  font-family: 'Inter';
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.fr-cta-title {
  width: auto; /* theme.css sets width:100% on every heading */
  margin: 0;
  font-family: 'Inter';
  font-size: 25px;
  font-weight: 700;
  line-height: 1.3;
}

.fr-cta-text {
  margin: 8px 0 0;
  color: #5c5a5a;
  font-size: var(--fs-md);
  line-height: 1.7;
}

.fr-cta-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- the phone block ---------- */

.fr-cta-phone {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: var(--btn-h);
  padding: 10px 26px;
  border: 1px solid var(--btn-orange);
  border-radius: var(--btn-radius);
  background-color: var(--btn-orange);
  color: #fff !important; /* beats theme.css's orange global a colour */
  text-decoration: none;
  box-shadow: 0 10px 24px -14px rgba(242, 168, 32, .95);
  transition: background-color .25s ease, border-color .25s ease,
              transform .25s ease, box-shadow .25s ease;
}

/* Der Telefonblock ist orange und folgt derselben Regel wie die
   Schaltflächen: Ruhezustand orange, überfahren grün. */
.fr-cta-phone:hover,
.fr-cta-phone:focus-visible {
  background-color: var(--brand-green);
  border-color: var(--brand-green);
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -14px rgba(47, 93, 52, .75);
}

.fr-cta-phone:focus-visible {
  outline: 2px solid var(--btn-ink);
  outline-offset: 3px;
}

.fr-cta-phone-label {
  font-family: 'Inter';
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.2;
  text-transform: uppercase;
  opacity: .82;
}

.fr-cta-phone-number {
  font-family: 'Inter';
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
}

/* ---------- variant: light panel ---------- */

.fr-cta--panel {
  background-color: #fff;
  border: 1px solid #eceff3;
  box-shadow: 0 1px 2px rgba(29, 35, 38, .04), 0 26px 60px -34px rgba(29, 35, 38, .5);
}

/* A soft warm wash out of the right-hand corner, so the card is not a flat
   white rectangle on a cream ground. */
.fr-cta--panel::after {
  content: '';
  position: absolute;
  top: -60%;
  right: -10%;
  width: 46%;
  height: 220%;
  background: radial-gradient(ellipse at center, rgba(242, 168, 32, .13) 0%, rgba(242, 168, 32, 0) 70%);
  pointer-events: none;
}

.fr-cta--panel > * {
  position: relative;
  z-index: 1;
}

/* ---------- variant: dark bar ---------- */

.fr-cta--bar {
  gap: 22px;
  padding: 24px 30px;
  background-color: #12171e;
  background-image: linear-gradient(115deg, #12171e 0%, #1b2530 58%, #2a1d08 100%);
  border-radius: 999px;
}

.fr-cta--bar .fr-cta-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
}

.fr-cta--bar .fr-cta-icon svg {
  width: 24px;
  height: 24px;
}

.fr-cta--bar .fr-cta-eyebrow {
  margin-bottom: 3px;
  color: #F7C86B;
}

.fr-cta-bar-number {
  display: inline-block;
  color: #fff !important;
  font-family: 'Inter';
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: color .2s ease;
}

.fr-cta-bar-number:hover,
.fr-cta-bar-number:focus-visible {
  color: #F7C86B !important;
}

/* The pill on a dark bar is white — an orange button here would be the third
   orange object inside a 60px band. */
.fr-cta--bar .fr-btn {
  border-radius: 999px;
}

/* ---------- variant: WhatsApp ---------- */

.fr-cta--wa {
  align-items: flex-start;
  background-color: #eef3ee;
  border: 1px solid #cdead8;
}

.fr-cta--wa .fr-cta-icon {
  background-color: #2F5D34;
  box-shadow: 0 12px 26px -14px rgba(47, 93, 52, .95);
}

.fr-cta--wa .fr-cta-eyebrow {
  color: #24492A;
}

.fr-cta--wa .fr-cta-actions {
  align-self: center;
}

.fr-cta-list {
  list-style: none;
  display: grid;
  gap: 9px;
  margin: 18px 0 0;
  padding: 0;
}

.fr-cta-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #33452f !important; /* beats theme.css's global li colour */
  font-size: var(--fs-sm);
  line-height: 1.5;
}

/* Green disc with a white tick, drawn as a background image rather than an
   extra span in every list item. */
.fr-cta-list li::before {
  content: '';
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  border-radius: 50%;
  background-color: #2F5D34;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5L9.6 17 4 11.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
}

/* ---------- responsive ---------- */

@media only screen and (max-width: 1024px) {
  .fr-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 30px 28px;
  }

  .fr-cta--bar {
    border-radius: 20px;
  }

  .fr-cta-actions {
    width: 100%;
  }
}

@media only screen and (max-width: 767px) {
  .fr-cta {
    padding: 24px 20px;
    border-radius: 14px;
  }

  .fr-cta-title {
    font-size: 21px;
  }

  .fr-cta-icon {
    width: 52px;
    height: 52px;
  }

  .fr-cta-icon svg {
    width: 23px;
    height: 23px;
  }

  .fr-cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .fr-cta-phone {
    align-items: center;
    width: 100%;
  }

  .fr-cta-bar-number {
    font-size: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fr-cta-phone,
  .fr-cta-bar-number {
    transition: none;
  }

  .fr-cta-phone:hover {
    transform: none;
  }
}
/* ================== CALL-TO-ACTION BLOCKS END ================== */
/*
 * H1–H3 STEHEN HIER NICHT MEHR.
 *
 * Sie wurden in drei Media Queries von Hand nachgeführt, und die Reihenfolge
 * war kaputt: h1 war bei 1430px auf 39px gesetzt und bei 1024px wieder auf
 * 51px — die Überschrift wurde also GRÖSSER, je schmaler das Fenster wurde.
 * Aufgefallen ist das nie, weil man dafür genau zwischen den beiden Punkten
 * messen muss.
 *
 * h1, h2 und h3 rechnen jetzt mit clamp() (siehe oben). Eine Zeile deckt den
 * ganzen Bereich ab, es gibt keine Stufe mehr, die man vergessen kann, und
 * die Reihenfolge kann sich nicht mehr verdrehen.
 *
 * h4–h6 behalten ihre Stufen: Sie sind selten und stehen fast nur im
 * Artikeltext, wo die feste Staffelung leichter zu überblicken ist.
 */
@media only screen and (max-width:1024px){
  h4 {
   font-size: 25px;
  }
  h5 {
    font-size: 23px;
  }
  h6 {
    font-size: 21px;
  }
  p{
    margin:15px 0px;
  }
  div.wpforms-container-full{
    width: 100%;
  }
}
@media only screen and (max-width:766px){
  h4 {
    font-size: 22px;
  }
  h5 {
    font-size: 22px;
  }
  h6 {
    font-size: 22px;
  }
}
/* theme end */