/* Erzeugt aus style.css - jeder Selektor angehoben, damit die CIPS-Regeln
   in Elementor-Containern greifen; Regeln mit li, ul, ol, address, figure
   oder nav bekommen zusaetzlich eine Fassung mit der Ersatzklasse.
   Nicht von Hand aendern - wird aus style.css neu gebaut. */
/*
Theme Name: CIPS 2026
Template: hello-elementor
Version: 1.3
Description: Traegt das CIPS-Redesign 1:1 - identisches Markup, identisches Stylesheet.
*/


/* ============================================================
   CIPS GmbH — Redesign 2026, Fassung 3
   Durchgehend helles Farbschema. Kein Dunkelmodus:
   die Seite legt sich bewusst auf einen Look fest, deshalb
   ist jede Farbe explizit gesetzt und es gibt keine
   prefers-color-scheme-Bloecke.
   ============================================================ */:root{
  /* Grundflaechen — von Weiss zu zart gruenstichigen Baendern */
  --paper:      #FFFFFF;
  --paper-2:    #F5F7F0;
  --paper-3:    #EDF0E4;
  --green-soft: #EDF3DC;

  /* Schrift */
  --text:       #23291A;
  --text-muted: #555C4A;   /* 6.9:1 auf Weiss */
  --text-faint: #656C54;   /* 5.8:1 auf Weiss */

  /* Marke */
  --green:      #85AD26;   /* Flaechen, Kanten, Marker */
  --green-deep: #5F7815;   /* Buttons & Links: 5.0:1 auf Weiss */
  --green-ink:  #4E6311;   /* auf gruenen Tintflaechen: 5.9:1 */

  --rule:       #DCE0CD;
  --hairline:   var(--rule);
  --accent:     var(--green-deep);
  --focus:      var(--green-deep);

  /* Roboto durchgehend — mit Breitenachse (font-stretch 75..100%),
     damit die schmal gestellten Headlines erhalten bleiben. */
  --f-body:    Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --f-display: var(--f-body);
  --f-serif:   var(--f-body);

  --step--1: clamp(.8rem, .78rem + .1vw, .86rem);
  --step-0:  clamp(1rem, .97rem + .17vw, 1.1rem);
  --step-1:  clamp(1.15rem, 1.07rem + .38vw, 1.4rem);
  --step-2:  clamp(1.4rem, 1.25rem + .7vw, 1.85rem);
  --step-3:  clamp(1.9rem, 1.5rem + 1.85vw, 3.15rem);
  --step-4:  clamp(2.5rem, 1.75rem + 3.5vw, 5rem);

  --tilt-h: clamp(26px,3.4vw,52px);
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --maxw:   1260px;
}*, .elementor *::before, .elementor *::after{ box-sizing:border-box; }

/* ============================================================
   Atmosphaere statt Reinraum
   ------------------------------------------------------------
   1) Koernung: eine feine Rauschtextur nimmt den Flaechen den
      digitalen Reinraum-Eindruck. Sehr niedrig dosiert (3,5 %),
      damit sie wirkt, ohne sichtbar zu werden.
   ============================================================ */body::after{
  content:""; position:fixed; inset:0; z-index:900; pointer-events:none;
  opacity:.038; mix-blend-mode:multiply;
  background-size:170px 170px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion:reduce){body::after{ opacity:.028; } }html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){html{ scroll-behavior:auto; } }.elementor :where(section, .elementor div)[id]{ scroll-margin-top:clamp(80px,10vh,116px); }body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--f-body);
  font-size:var(--step-0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}.elementor h1, .elementor h2, .elementor h3, .elementor h4{
  font-family:var(--f-display);
  line-height:1.1;
  letter-spacing:-.02em;
  text-wrap:balance;
  color:var(--text);
  margin:0;
}.elementor p{ margin:0; }.elementor a{ color:inherit; }.elementor img{ max-width:100%; display:block; }.elementor :where(a, .elementor button, .elementor input, .elementor textarea, .elementor select):focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
  border-radius:3px;
}.elementor .wrap.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }.elementor .eyebrow.eyebrow{
  font-size:var(--step--1); font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent); margin-bottom:1rem;
}

/* ============================================================
   Schraege Markenkante — Elementor-Tilt, nachgebaut.
   Drei gestaffelte Dreiecke, Deckkraft 1 / .5 / .25.

   Wichtig: die Kante liegt IM folgenden Abschnitt an dessen
   Oberkante und ueberlappt ihn. Als eigenstaendiger Block
   dazwischen erzeugte sie ein Band, dessen durchsichtige
   Flaechen als weisser Streifen durchschlugen.
   ============================================================ */.elementor .tilt.tilt{
  position:absolute; top:0; left:0; right:0;
  z-index:2; line-height:0; pointer-events:none;
}.elementor .tilt.tilt svg{ display:block; width:100%; height:var(--tilt-h); }.elementor .tilt-flip.tilt-flip svg{ transform:scale(-1,-1); }.elementor .tilt.tilt .f{ fill:var(--green); }
/* Abschnitte mit Kante brauchen oben Luft, damit nichts darunter liegt */.elementor .has-tilt.has-tilt{ padding-top:calc(clamp(3.5rem,8vw,6.5rem) + var(--tilt-h)); }.elementor .site-footer.site-footer.has-tilt{ padding-top:calc(clamp(2.8rem,6vw,4.5rem) + var(--tilt-h)); }

/* Die gespiegelte Kante liegt im folgenden Abschnitt an dessen Oberkante,
   ihr sattes Gruen aber unten. Die Lagen darueber sind fast durchsichtig
   und zeigten den hellen Grund des NEUEN Abschnitts - unter einem
   farbigen Abschnitt las sich das als weisser Streifen. Ein fester
   Farbwert reicht nicht, weil die Flaechen darueber Verlaeufe tragen.
   Die Kante wird deshalb um ihre eigene Hoehe nach oben gezogen: ihre
   durchsichtigen Lagen stehen dann auf dem Abschnitt, aus dem sie kommt,
   samt dessen Verlauf. Am Platzbedarf aendert das nichts - die Kante
   liegt absolut und nimmt keine Zeile ein. */.elementor .tilt-flip.tilt-flip{ top:calc(-1 * var(--tilt-h)); }

/* ============================================================
   Topbar & Header
   ============================================================ */
/* ---- Topbar: dunkles Band wie in der Vorlage (#333) ---- */.elementor .topbar.topbar{
  background:#333333;
  color:#DCDED4;
  font-size:.85rem;
  border-bottom:3px solid var(--green);
}.elementor .topbar.topbar .wrap{
  display:flex; flex-wrap:wrap; gap:.4rem 1.5rem;
  align-items:center; justify-content:space-between; min-height:54px;
}.elementor .topbar.topbar a{ text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; transition:color .2s; }.elementor .topbar.topbar a:hover{ color:var(--green); }.elementor .tb-right.tb-right{ display:flex; gap:1.1rem; align-items:center; }.elementor .tb-sep.tb-sep{ width:1px; height:18px; background:rgba(255,255,255,.22); }.elementor .tb-ico.tb-ico{
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.09);
  transition:background .2s, color .2s, transform .2s;
}.elementor .tb-ico.tb-ico:hover{ background:var(--green); color:#fff; transform:translateY(-1px); }
@media (max-width:640px){
  /* .topbar a hat (0,1,1) und wuerde eine reine Klassenregel
     schlagen - deshalb hier mit .topbar davor auf (0,2,0). */.elementor .topbar.topbar .tb-ico, .elementor .topbar.topbar .tb-sep{ display:none; }
}.elementor .site-header.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.93);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, box-shadow .3s;
}.elementor .site-header.site-header.stuck{ border-bottom-color:var(--rule); box-shadow:0 6px 22px -20px rgba(35,41,26,.5); }.elementor .site-header.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:76px; }

/* Originallogo als Bilddatei — die Wortmarke hat eine eigene
   Farblogik (gruenes "I" in CIPS, dunkles "IT" in der Tagline),
   die sich mit Systemschrift nicht nachbauen laesst. */.elementor .logo.logo{ display:flex; align-items:center; text-decoration:none; flex-shrink:0; }.elementor .logo.logo img{ height:46px; width:auto; }
@media (max-width:480px){.elementor .logo.logo img{ height:38px; } }.elementor .nav.nav{ display:flex; align-items:center; gap:1.9rem; }.elementor .nav.nav a{
  position:relative; text-decoration:none; font-size:.95rem; font-weight:500;
  color:var(--text-muted); padding-block:.4rem; transition:color .2s;
}.elementor .nav.nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--green); transform:scaleX(0); transform-origin:right;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}.elementor .nav.nav a:hover{ color:var(--text); }.elementor .nav.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
/* Aktiver Punkt gruen — wie in der Vorlage */.elementor .nav.nav a[aria-current="page"]{ color:var(--green-deep); font-weight:700; }.elementor .nav.nav a[aria-current="page"]::after{ transform:scaleX(1); }

/* ---- Aufklappmenue "Leistungen" ----
   Oeffnet per Zeiger und per Tastatur. Der Knopf traegt
   aria-expanded, damit Screenreader den Zustand kennen. */.elementor .nav-drop.nav-drop{ position:relative; display:flex; align-items:center; }.elementor .nav-drop-btn.nav-drop-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--f-body); font-size:.95rem; font-weight:500;
  color:var(--text-muted); background:none; border:0; cursor:pointer;
  padding:.4rem 0; position:relative; transition:color .2s;
}.elementor .nav-drop-btn.nav-drop-btn svg{ transition:transform .25s; }.elementor .nav-drop-btn.nav-drop-btn::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--green); transform:scaleX(0); transform-origin:right;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}.elementor .nav-drop.nav-drop:hover .nav-drop-btn, .elementor .nav-drop-btn.nav-drop-btn:hover, .elementor .nav-drop-btn.nav-drop-btn[aria-expanded="true"]{ color:var(--text); }.elementor .nav-drop.nav-drop:hover .nav-drop-btn::after, .elementor .nav-drop-btn.nav-drop-btn[aria-expanded="true"]::after{ transform:scaleX(1); transform-origin:left; }.elementor .nav-drop-btn.nav-drop-btn[aria-expanded="true"] svg{ transform:rotate(180deg); }.elementor .nav-drop-btn.nav-drop-btn[aria-current]{ color:var(--green-deep); font-weight:700; }.elementor .nav-drop-btn.nav-drop-btn[aria-current]::after{ transform:scaleX(1); }.elementor .nav-sub.nav-sub{
  position:absolute; top:100%; left:-1rem; min-width:15rem;
  display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--rule); border-radius:10px;
  padding:.5rem; margin-top:.5rem;
  box-shadow:0 18px 38px -22px rgba(35,41,26,.55);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .22s, transform .22s, visibility .22s;
  z-index:70;
}.elementor .nav-drop.nav-drop:hover .nav-sub, .elementor .nav-drop-btn.nav-drop-btn[aria-expanded="true"] + .nav-sub{
  opacity:1; visibility:visible; transform:none;
}.elementor .nav-sub.nav-sub a{
  padding:.6rem .8rem; border-radius:6px; font-size:.93rem; font-weight:500;
  color:var(--text-muted); text-decoration:none; white-space:nowrap;
  transition:background .18s, color .18s;
}.elementor .nav-sub.nav-sub a::after{ display:none; }.elementor .nav-sub.nav-sub a:hover{ background:var(--green-soft); color:var(--text); }.elementor .nav-sub.nav-sub a[aria-current="page"]{ background:var(--green-soft); color:var(--green-ink); font-weight:700; }

/* Auf schmalen Schirmen klappt das Untermenue im Fluss auf */
@media (max-width:940px){.elementor .nav-drop.nav-drop{ display:block; width:100%; border-bottom:1px solid var(--rule); }.elementor .nav-drop-btn.nav-drop-btn{
    width:100%; justify-content:space-between;
    padding:.95rem 0; font-size:1.05rem;
  }.elementor .nav-drop-btn.nav-drop-btn::after{ display:none; }.elementor .nav-sub.nav-sub{
    position:static; opacity:1; visibility:visible; transform:none;
    border:0; box-shadow:none; background:none; padding:0 0 .6rem;
    margin:0; min-width:0; display:none;
  }.elementor .nav-drop-btn.nav-drop-btn[aria-expanded="true"] + .nav-sub{ display:flex; }.elementor .nav-drop.nav-drop:hover .nav-sub{ display:none; }.elementor .nav-drop-btn.nav-drop-btn[aria-expanded="true"] + .nav-sub{ display:flex; }.elementor .nav-sub.nav-sub a{ padding:.7rem .9rem; font-size:1rem; }
}.elementor .btn.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--f-body); font-weight:600; font-size:.95rem;
  padding:.82rem 1.5rem; border-radius:6px;
  border:1px solid var(--green-deep); background:var(--green-deep); color:#fff;
  text-decoration:none; cursor:pointer;
  transition:background .22s, border-color .22s, transform .18s, box-shadow .22s;
}.elementor .btn.btn:hover{
  background:var(--text); border-color:var(--text);
  transform:translateY(-2px); box-shadow:0 10px 24px -12px rgba(35,41,26,.5);
}.elementor .btn-ghost.btn-ghost{ background:transparent; color:var(--text); border-color:var(--rule); }.elementor .btn-ghost.btn-ghost:hover{ background:transparent; color:var(--accent); border-color:var(--accent); box-shadow:none; transform:translateY(-2px); }.elementor .burger.burger{ display:none; background:none; border:0; cursor:pointer; padding:.5rem; color:var(--text); }.elementor .burger.burger span{ display:block; width:24px; height:2px; background:currentColor; margin:5px 0; }

@media (max-width:940px){.elementor .nav.nav{
    position:absolute; top:100%; left:0; right:0; z-index:55;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--paper); border-block:1px solid var(--rule);
    padding:.5rem var(--gutter) 1.4rem;
    transform:translateY(-10px); opacity:0; pointer-events:none; transition:.26s;
  }.elementor .nav.nav.open{ transform:none; opacity:1; pointer-events:auto; }.elementor .nav.nav a{ width:100%; padding:.95rem 0; border-bottom:1px solid var(--rule); font-size:1.05rem; }.elementor .nav.nav a::after{ display:none; }.elementor .burger.burger{ display:block; }
}

/* ============================================================
   Hero — helles Scrim ueber dem Foto, dunkle Schrift.
   Das Motiv ist ein heller Serverraum; aufgehellt statt
   abgedunkelt bleibt die Seite durchgehend hell.
   ============================================================ */
/* Ein Hero fuer alle Seiten: gleiche Hoehe, randbreites Bild,
   heller Schleier, dunkle Schrift.
   Ab Tablet eine feste Hoehe - min-height allein reicht nicht,
   weil laengerer Inhalt darueber hinauswaechst und die Seiten
   dann unterschiedlich hoch werden. */.elementor .hero.hero{
  position:relative; background:var(--paper-2); overflow:hidden;
  display:flex; align-items:center;
  min-height:clamp(380px,58vw,470px);
}
/* Der Inhalts-Container ist hier ein Flex-Element und wuerde
   sonst auf Inhaltsbreite schrumpfen - der Text saesse dann je
   nach Textlaenge an einer anderen Stelle. */.elementor .hero.hero > .wrap{
  flex:1 1 100%; width:100%; min-width:0;
}
@media (min-width:820px){.elementor .hero.hero{ height:clamp(500px,42vw,680px); min-height:0; }
}.elementor .hero-media.hero-media{ position:absolute; inset:0; z-index:0; }.elementor .hero-media.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }.elementor .hero-scrim.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg,
    rgba(255,255,255,.97) 0%, rgba(255,255,255,.93) 40%,
    rgba(255,255,255,.90) 56%, rgba(255,255,255,.45) 74%,
    rgba(255,255,255,.10) 90%, rgba(255,255,255,0) 100%);
}
@media (max-width:820px){.elementor .hero-scrim.hero-scrim{
    background:linear-gradient(180deg,
      rgba(255,255,255,.92) 0%, rgba(255,255,255,.90) 55%, rgba(255,255,255,.94) 100%);
  }
}.elementor .hero-inner.hero-inner{
  position:relative; z-index:2;
  padding-block:clamp(1.8rem,3.5vw,2.8rem);
  max-width:41rem;
}
/* Unterseiten: kleinere Ueberschrift, damit die Startseite
   ihren Vorrang behaelt, und Platz fuer die Brotkrumen. */
/* Im Hero steht Text auf dem Foto: dunkleres Gruen, damit die
   duennen Auszeichnungen auch ueber hellen Bildstellen tragen. */.elementor .hero.hero .eyebrow{ color:var(--green-ink); }.elementor .hero.hero .crumbs a{ color:var(--green-ink); }
/* Die Leistungsbilder sind in der Quelldatei schon fast weiss:
   Tonwertumfang 185-226 gegenueber 1-215 beim Startseitenbild.
   Unter dem gleichen Schleier verschwinden sie deshalb voellig.
   Zwei Eingriffe holen sie auf dieselbe Wirkung: Tonwerte spreizen
   und den Schleier zuruecknehmen - moeglich, weil diese Bilder
   ohnehin hell sind und der Kontrast dadurch nicht leidet. */.elementor .hero-sub.hero-sub .hero-media img{ filter:brightness(.82) contrast(1.9); }.elementor .hero-sub.hero-sub .hero-scrim{
  background:linear-gradient(100deg,
    rgba(255,255,255,.88) 0%, rgba(255,255,255,.78) 40%,
    rgba(255,255,255,.72) 56%, rgba(255,255,255,.36) 74%,
    rgba(255,255,255,.08) 90%, rgba(255,255,255,0) 100%);
}
@media (max-width:820px){.elementor .hero-sub.hero-sub .hero-scrim{
    background:linear-gradient(180deg,
      rgba(255,255,255,.80) 0%, rgba(255,255,255,.74) 55%, rgba(255,255,255,.82) 100%);
  }
}
/* Kontakt und Fernwartung nutzen das Startseitenbild - dort bleibt
   alles wie auf der Startseite. */.elementor .hero-sub.hero-sub.hero-voll .hero-media img{ filter:none; }.elementor .hero-sub.hero-sub.hero-voll .hero-scrim{
  background:linear-gradient(100deg,
    rgba(255,255,255,.97) 0%, rgba(255,255,255,.93) 40%,
    rgba(255,255,255,.90) 56%, rgba(255,255,255,.45) 74%,
    rgba(255,255,255,.10) 90%, rgba(255,255,255,0) 100%);
}
@media (max-width:820px){.elementor .hero-sub.hero-sub.hero-voll .hero-scrim{
    background:linear-gradient(180deg,
      rgba(255,255,255,.92) 0%, rgba(255,255,255,.90) 55%, rgba(255,255,255,.94) 100%);
  }
}.elementor .hero-sub.hero-sub h1{ font-size:clamp(2.1rem,1.5rem + 2.4vw,3.4rem); }.elementor .hero-sub.hero-sub .hero-lead{ margin-bottom:1.8rem; }.elementor .hero.hero h1{
  font-size:var(--step-4); font-weight:800;
  font-stretch:90%;
  letter-spacing:-.032em; margin-bottom:1.4rem;
}.elementor .hero.hero h1 .ln{ display:block; overflow:hidden; }.elementor .hero.hero h1 .ln > span{ display:block; transform:translateY(105%); animation:rise .9s cubic-bezier(.16,.84,.28,1) forwards; }.elementor .hero.hero h1 .ln:nth-child(2) > span{ animation-delay:.1s; }
@keyframes rise{to{ transform:none; } }.elementor .hero-lead.hero-lead{
  font-family:var(--f-body); font-size:var(--step-1); font-weight:300; font-stretch:97%;
  line-height:1.58; color:var(--text-muted); max-width:33ch; margin-bottom:2.2rem;
}.elementor .hero-actions.hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem 1.2rem; align-items:center; }


/* ---- Fernwartung-Knopf aus der Vorlage, in CSS nachgebaut ----
   Verlaufs-Pill mit Haekchenkreis. Als CSS statt Bilddatei:
   scharf in jeder Groesse und ein echter Link. */.elementor .fernbtn.fernbtn{
  display:inline-flex; align-items:center; gap:.85rem;
  padding:.6rem 1.5rem .6rem .6rem;
  border-radius:999px; text-decoration:none; color:#fff;
  background:linear-gradient(135deg,#597C15 0%,#4D6C13 48%,#3D560E 100%);
  box-shadow:0 14px 30px -14px rgba(45,62,10,.75), inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, filter .25s;
}.elementor .fernbtn.fernbtn:hover{ transform:translateY(-2px); filter:saturate(1.08); box-shadow:0 18px 36px -14px rgba(45,62,10,.8), inset 0 1px 0 rgba(255,255,255,.35); }.elementor .fernbtn-check.fernbtn-check{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  background:radial-gradient(circle at 32% 28%, #ffffff 0%, #EEF1E6 70%, #DCE2CE 100%);
  color:#4C6A11; display:grid; place-items:center;
  box-shadow:0 3px 8px -3px rgba(30,45,5,.55);
}.elementor .fernbtn-text.fernbtn-text{ display:flex; flex-direction:column; gap:.1rem; line-height:1.1; }.elementor .fernbtn-eyebrow.fernbtn-eyebrow{
  display:flex; align-items:center; gap:.4rem;
  font-size:.6rem; letter-spacing:.19em; text-transform:uppercase;
  font-weight:700; color:#fff;
}.elementor .fernbtn-eyebrow.fernbtn-eyebrow i{ width:4px; height:4px; border-radius:50%; background:#fff; }.elementor .fernbtn.fernbtn strong{ font-size:1.18rem; font-weight:700; font-stretch:92%; letter-spacing:-.01em; }
/* Kompakte Fassung fuer die Topbar: der Knopf richtet sich an
   Bestandskunden, nicht an Interessenten — dort steht er dauerhaft
   bereit, statt im Hero mit dem Haupt-Aufruf zu konkurrieren. */.elementor .fernbtn-sm.fernbtn-sm{ padding:.26rem .95rem .26rem .3rem; gap:.5rem; }.elementor .fernbtn-sm.fernbtn-sm .fernbtn-check{ width:26px; height:26px; }.elementor .fernbtn-sm.fernbtn-sm .fernbtn-check svg{ width:13px; height:11px; }.elementor .fernbtn-sm.fernbtn-sm .fernbtn-eyebrow{ display:none; }.elementor .fernbtn-sm.fernbtn-sm strong{ font-size:.82rem; }.elementor .fade-up.fade-up{ opacity:0; transform:translateY(20px); animation:fadeUp .8s cubic-bezier(.16,.84,.28,1) forwards; }.elementor .d1.d1{ animation-delay:.26s; }.elementor .d2.d2{ animation-delay:.38s; }
@keyframes fadeUp{to{ opacity:1; transform:none; } }

/* ============================================================
   Sektionen
   ============================================================ */.elementor .section.section{ position:relative; padding-block:clamp(3.5rem,8vw,6.5rem); }
/* 2) Sektionsflaechen tragen weiche Lichthoefe in der Markenfarbe,
      ausserhalb der Mitte gesetzt, damit nichts symmetrisch wirkt. */.elementor .section-tint.section-tint{
  background-color:var(--paper-2);
  background-image:
    radial-gradient(54rem 30rem at 6% -8%, rgba(133,173,38,.17), transparent 62%),
    radial-gradient(46rem 26rem at 97% 108%, rgba(133,173,38,.11), transparent 58%);
}.elementor .section-accent.section-accent{
  background-color:var(--green-soft);
  background-image:
    radial-gradient(50rem 30rem at 88% -12%, rgba(133,173,38,.30), transparent 60%),
    radial-gradient(38rem 24rem at 4% 110%, rgba(94,131,23,.16), transparent 58%);
}
/* Auch die weissen Baender bekommen einen Hauch Farbe */.elementor .section-air.section-air{
  background-image:
    radial-gradient(46rem 28rem at 96% 4%, rgba(133,173,38,.10), transparent 60%),
    radial-gradient(34rem 22rem at -4% 96%, rgba(133,173,38,.07), transparent 58%);
}

/* 3) Das Blatt aus dem Logo als grosses, blasses Wasserzeichen —
      ein Ornament, das aus der Marke selbst kommt. */.elementor .section-mark.section-mark{
  background-repeat:no-repeat;
  background-position:right -8rem top 50%;
  background-size:auto 128%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg opacity='.055'%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='%2385AD26' stroke-width='5'/%3E%3Cpath d='M23 35 L67 35 L67 79 A44 44 0 0 1 23 35 Z' fill='%2385AD26'/%3E%3Cpath d='M63 75 L79 93' stroke='%2385AD26' stroke-width='4' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
}
@media (max-width:820px){.elementor .section-mark.section-mark{ background-position:right -14rem top 50%; background-size:auto 78%; } }.elementor .sec-head.sec-head{ max-width:44rem; margin-inline:auto; text-align:center; margin-bottom:clamp(2.2rem,4.5vw,3.6rem); }.elementor .sec-head.sec-head h2{ font-size:var(--step-3); font-weight:700; font-stretch:92%; margin-bottom:1rem; }.elementor .sec-head.sec-head p:not(.eyebrow){ color:var(--text-muted); font-size:1.05rem; }

/* ---- Intro ---- */
/* 4) Nicht jeder Abschnitt beginnt zentriert: die Leistungen tragen
      einen linksbuendigen Kopf mit Markenstrich. */.elementor .sec-head-left.sec-head-left{
  max-width:none; margin-inline:0; text-align:left;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(1rem,4vw,3.5rem); align-items:end;
}.elementor .sec-head-left.sec-head-left h2{ margin-bottom:0; }.elementor .sec-head-left.sec-head-left .lede{ color:var(--text-muted); font-size:1.05rem; }.elementor .sec-head-left.sec-head-left::after{ display:none; }
@media (max-width:820px){.elementor .sec-head-left.sec-head-left{ grid-template-columns:1fr; align-items:start; } }.elementor .rule-mark.rule-mark{
  width:54px; height:4px; border-radius:2px;
  background:linear-gradient(90deg,var(--green) 0%,var(--green-deep) 100%);
  margin-bottom:1.4rem;
}.elementor .intro.intro{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
@media (max-width:900px){.elementor .intro.intro{ grid-template-columns:1fr; } }.elementor .intro.intro h2{ font-size:var(--step-3); font-weight:700; font-stretch:92%; margin-bottom:1.2rem; }
/* :not(.eyebrow) — sonst schlaegt diese Regel (0,1,1) die
   Eyebrow-Farbe (0,1,0) und die Zeile rendert grau statt gruen. */.elementor .intro.intro p:not(.eyebrow){ color:var(--text-muted); }.elementor .intro.intro p:not(.eyebrow) + p{ margin-top:1.1rem; }.elementor .intro-figure.intro-figure{ position:relative; border-radius:10px; overflow:hidden; border:1px solid var(--rule); }.elementor .intro-figure.intro-figure img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }.elementor .promise-list.promise-list{ list-style:none; margin:1.9rem 0 0; padding:0; display:flex; flex-direction:column; gap:.9rem; }.elementor .promise-list.promise-list li, .elementor .promise-list.promise-list .cips-li{ display:flex; gap:.9rem; align-items:flex-start; }.elementor .promise-list.promise-list .mk{
  color:var(--green-ink);
  flex-shrink:0; width:22px; height:22px; border-radius:50%;
  background:var(--green-soft); display:grid; place-items:center; margin-top:.22rem;
}.elementor .promise-list.promise-list .mk svg{ display:block; }.elementor .promise-list.promise-list b{ font-weight:700; color:var(--text); }.elementor .promise-list.promise-list span{ color:var(--text-muted); }

/* ---- Leistungskarten — helle Karten, Foto als Band oben.
   So bleibt das Bild vollstaendig erkennbar und der Text
   steht auf Weiss statt auf einem Verlauf. ---- */
/* ---- Leistungskarten ----
   Gewichtet statt gleichrangig: IT-Sicherheit laeuft als breite
   Karte ueber die volle Reihe und traegt die NIS2-Frage als
   Aufhaenger. Die uebrigen vier stehen paarweise darunter. */.elementor .cards.cards{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(1rem,1.8vw,1.5rem); }.elementor .card.card{
  grid-column:span 3;
  display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--rule); border-radius:12px;
  overflow:hidden; text-decoration:none; color:var(--text);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s, border-color .3s;
}.elementor .card-feature.card-feature{ grid-column:span 6; flex-direction:row; }.elementor .card.card:hover{
  transform:translateY(-4px);
  border-color:var(--green);
  box-shadow:0 16px 34px -22px rgba(35,41,26,.45);
}.elementor .card-media.card-media{ position:relative; display:block; overflow:hidden; }.elementor .card-media.card-media img{
  width:100%; aspect-ratio:16/9; object-fit:cover;
  filter:brightness(.97) contrast(1.02);
  transition:transform .6s cubic-bezier(.2,.7,.3,1), filter .45s;
}
/* Die Vorlagenbilder sind reines Schwarzweiss - ein Graustufen-Hover
   waere wirkungslos. Stattdessen ein gruener Duoton im Ruhezustand,
   der beim Ueberfahren aufklart. */
@media (hover:hover){.elementor .card-media.card-media::after{
    content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(170deg, rgba(133,173,38,.40) 0%, rgba(94,131,23,.28) 100%);
    mix-blend-mode:multiply;
    transition:opacity .45s ease;
  }.elementor .card.card:hover .card-media::after{ opacity:0; }
}.elementor .card.card:hover .card-media img{ transform:scale(1.05); filter:brightness(1.05) contrast(1.08); }
/* Das Icon sitzt am Textteil, nicht in der Bildbox: die klemmt
   wegen overflow:hidden (fuer den Zoom) und schnitt es ab. */.elementor .card-icon.card-icon{
  position:absolute; left:1.2rem; top:-22px; z-index:2;
  width:44px; height:44px; padding:9px; border-radius:10px;
  background:var(--green); color:#141809;
  box-shadow:0 6px 14px -8px rgba(35,41,26,.6);
}.elementor .card-icon.card-icon svg{ width:100%; height:100%; display:block; }.elementor .card-body.card-body{ position:relative; padding:2.1rem 1.5rem 1.7rem; display:flex; flex-direction:column; flex:1; }.elementor .card.card h3{ font-size:var(--step-2); font-weight:700; font-stretch:94%; margin-bottom:.55rem; }.elementor .card.card p{ color:var(--text-muted); font-size:.98rem; }.elementor .card.card .go{
  margin-top:1.3rem; display:inline-flex; align-items:center; gap:.55rem;
  font-weight:700; font-size:.9rem; color:var(--accent);
}.elementor .card.card .go svg{ transition:transform .3s cubic-bezier(.2,.7,.3,1); }.elementor .card.card:hover .go svg{ transform:translateX(5px); }

/* Breite Karte: Bild links, Inhalt rechts */.elementor .card-feature.card-feature .card-media{ flex:0 0 42%; }.elementor .card-feature.card-feature .card-media img{ height:100%; aspect-ratio:auto; min-height:300px; }
/* In der breiten Karte liegt der Textteil neben dem Bild —
   dort steht das Icon im Fluss statt ueberhaengend. */.elementor .card-feature.card-feature .card-icon{ position:static; margin-bottom:1.1rem; }.elementor .card-feature.card-feature .card-body{ padding:clamp(1.8rem,3vw,2.6rem); justify-content:center; }.elementor .card-feature.card-feature h3{ font-size:var(--step-3); margin-bottom:.7rem; }.elementor .card-badge.card-badge{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green-ink); background:var(--green-soft);
  padding:.42rem .85rem; border-radius:999px; margin-bottom:1.1rem;
}.elementor .card-badge.card-badge i{ width:5px; height:5px; border-radius:50%; background:var(--green-deep); }
/* .card p ist (0,1,1) - der Aufhaenger braucht (0,2,0), um zu gewinnen */.elementor .card.card .card-hook{
  font-size:var(--step-1); font-weight:500; line-height:1.4;
  color:var(--text); margin-bottom:.8rem;
}

@media (max-width:960px){.elementor .cards.cards{ grid-template-columns:repeat(2,1fr); }.elementor .card.card{ grid-column:span 1; }.elementor .card-feature.card-feature{ grid-column:span 2; flex-direction:column; }.elementor .card-feature.card-feature .card-media{ flex:none; }.elementor .card-feature.card-feature .card-media img{ aspect-ratio:16/9; min-height:0; }.elementor .card-feature.card-feature .card-icon{ position:absolute; top:-22px; left:1.2rem; margin-bottom:0; }
}
@media (max-width:600px){.elementor .cards.cards{ grid-template-columns:1fr; }.elementor .card-feature.card-feature{ grid-column:span 1; }
}

/* ---- NIS2 auf gruener Tintflaeche ---- */.elementor .nis.nis{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:clamp(2.2rem,5vw,5rem); align-items:center; }
@media (max-width:900px){.elementor .nis.nis{ grid-template-columns:1fr; } }.elementor .nis.nis h2{ font-size:var(--step-3); font-weight:700; font-stretch:90%; margin-bottom:1.2rem; }.elementor .nis.nis .lead{
  font-family:var(--f-body); font-size:var(--step-1); font-weight:300; font-stretch:97%;
  line-height:1.55; color:var(--text); margin-bottom:1.3rem; max-width:44ch;
}.elementor .nis.nis .sub{ color:var(--text-muted); max-width:50ch; margin-bottom:2.1rem; }.elementor .checklist.checklist{ list-style:none; margin:0; padding:0; }.elementor .checklist.checklist li, .elementor .checklist.checklist .cips-li{
  display:flex; gap:1rem; align-items:baseline;
  padding:1.05rem 0; border-bottom:1px solid #D7DFBE; font-size:.99rem; color:var(--text);
}.elementor .checklist.checklist li:first-child, .elementor .checklist.checklist .cips-li:first-child{ border-top:1px solid #D7DFBE; }.elementor .checklist.checklist .q{ color:var(--green-ink); font-weight:800; flex-shrink:0; }


/* ---- Partner-Karussell ----
   Scroll-Snap statt Bibliothek: die Spur ist auch ohne JavaScript
   mit Finger, Trackpad und Tastatur bedienbar; die Pfeile und der
   Autolauf kommen obendrauf. */.elementor .carousel.carousel{
  position:relative;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:clamp(.5rem,2vw,1.25rem);
}.elementor .car-track.car-track{
  display:flex; gap:var(--car-gap);
  list-style:none; margin:0; padding:.5rem 0;
  overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none;
}.elementor .car-track.car-track::-webkit-scrollbar{ display:none; }.elementor .car-track.car-track:focus-visible{ outline:2px solid var(--focus); outline-offset:4px; border-radius:4px; }.elementor .carousel.carousel{ --car-gap:clamp(1rem,3vw,2.5rem); --car-n:4; }.elementor .car-item.car-item{
  flex:0 0 calc((100% - (var(--car-n) - 1) * var(--car-gap)) / var(--car-n));
  scroll-snap-align:start;
  display:grid; place-items:center; min-height:76px;
}.elementor .car-item.car-item img{
  max-height:50px; width:auto; max-width:100%; object-fit:contain;
  opacity:.88; transition:opacity .25s, transform .25s;
}.elementor .car-item.car-item:hover img{ opacity:1; transform:scale(1.05); }
@media (max-width:900px){.elementor .carousel.carousel{ --car-n:3; } }
@media (max-width:600px){.elementor .carousel.carousel{ --car-n:2; } }.elementor .car-btn.car-btn{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  border:1px solid var(--rule); background:var(--paper);
  color:var(--accent); cursor:pointer; display:grid; place-items:center;
  transition:border-color .2s, background .2s, transform .2s;
}.elementor .car-btn.car-btn:hover{ border-color:var(--green); background:var(--green-soft); transform:scale(1.07); }.elementor .car-btn.car-btn svg{ display:block; }

/* ---- Kontakt ---- */.elementor .contact.contact{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(2.2rem,5vw,4.5rem); }
@media (max-width:900px){.elementor .contact.contact{ grid-template-columns:1fr; } }.elementor .contact.contact h2{ font-size:var(--step-3); font-weight:700; font-stretch:90%; margin-bottom:1.1rem; }.elementor .contact.contact .lead{ font-family:var(--f-body); font-size:var(--step-1); font-weight:300; font-stretch:97%; line-height:1.55; color:var(--text-muted); margin-bottom:2.1rem; max-width:34ch; }.elementor .addr.addr{ display:flex; flex-direction:column; gap:1.4rem; }.elementor .addr.addr .k{ font-size:.78rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--text-faint); display:block; margin-bottom:.35rem; }.elementor .addr.addr .v{ font-size:1.02rem; line-height:1.55; }.elementor .addr.addr a{ text-decoration:none; color:var(--accent); font-weight:700; }.elementor .addr.addr a:hover{ text-decoration:underline; }.elementor form{ display:grid; gap:1.1rem; }.elementor .row2.row2{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
@media (max-width:560px){.elementor .row2.row2{ grid-template-columns:1fr; } }.elementor .field.field{ display:flex; flex-direction:column; gap:.4rem; }.elementor .field.field label{ font-size:.78rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--text-faint); }.elementor .field.field input, .elementor .field.field textarea{
  font-family:var(--f-body); font-size:1rem; padding:.85rem 1rem; border-radius:6px;
  background:var(--paper); color:var(--text); border:1px solid var(--rule);
  transition:border-color .2s;
}.elementor .field.field input:focus, .elementor .field.field textarea:focus{ border-color:var(--accent); }.elementor .field.field textarea{ resize:vertical; min-height:128px; }.elementor .consent.consent{ display:flex; gap:.7rem; align-items:flex-start; font-size:.88rem; color:var(--text-muted); }.elementor .consent.consent input{ margin-top:.28rem; accent-color:var(--green-deep); width:16px; height:16px; flex-shrink:0; }.elementor .consent.consent a{ color:var(--accent); }.elementor .form-note.form-note{ font-size:.85rem; color:var(--text-faint); }

/* ---- Footer — hell ---- */.elementor .site-footer.site-footer{
  position:relative;
  background:var(--paper-2); color:var(--text-muted);
  border-top:1px solid var(--rule);
  padding-block:clamp(2.8rem,6vw,4.5rem) 1.8rem;
}.elementor .foot-grid.foot-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.4rem 2rem;
  padding-bottom:2.6rem; border-bottom:1px solid var(--rule);
}
@media (max-width:900px){.elementor .foot-grid.foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){.elementor .foot-grid.foot-grid{ grid-template-columns:1fr; } }.elementor .foot-mark.foot-mark{ margin-bottom:1.2rem; }.elementor .foot-mark.foot-mark img{ height:52px; width:auto; }.elementor .site-footer.site-footer h4{ font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; color:var(--text-faint); margin-bottom:1.1rem; font-weight:700; }.elementor .site-footer.site-footer ul, .elementor .site-footer.site-footer .cips-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.65rem; }.elementor .site-footer.site-footer a{ text-decoration:none; color:var(--text-muted); font-size:.95rem; transition:color .2s; }.elementor .site-footer.site-footer a:hover{ color:var(--accent); }.elementor .foot-bottom.foot-bottom{
  display:flex; flex-wrap:wrap; gap:.7rem 2rem; justify-content:space-between;
  align-items:center; padding-top:1.6rem; font-size:.85rem; color:var(--text-faint);
}

/* ============================================================
   Unterseiten
   ============================================================ */
/* Brotkrumen sitzen jetzt im Hero, auf hellem Schleier */.elementor .crumbs.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  font-size:.85rem; color:var(--text-faint); margin-bottom:1.2rem;
}.elementor .crumbs.crumbs a{ color:var(--accent); text-decoration:none; font-weight:600; }.elementor .crumbs.crumbs a:hover{ text-decoration:underline; }.elementor .crumbs.crumbs span[aria-current]{ color:var(--text); font-weight:600; }

/* Fliesstext der Unterseiten */
/* Nicht den Container verschmaelern - dessen automatische Raender
   wuerden ihn zentrieren und der Text saesse eingerueckt unter dem
   buendigen Hero-Text. Stattdessen die Kinder begrenzen. */
/* Kein max-width auf .prose selbst: als .wrap.prose wuerde das
   die Breitenbegrenzung des Containers aufheben und der Text
   liefe randlos ueber das ganze Fenster. Nur die Kinder kappen. */.elementor .prose.prose > *{ max-width:60rem; }.elementor .prose.prose h2{
  font-size:var(--step-2); font-weight:700; font-stretch:94%;
  margin-bottom:.9rem;
}.elementor .prose.prose h2:not(:first-child){ margin-top:clamp(2.2rem,4vw,3.2rem); }.elementor .prose.prose p{ color:var(--text-muted); max-width:66ch; }.elementor .prose.prose p + p{ margin-top:1rem; }.elementor .prose.prose .rule-mark{ margin-bottom:1.2rem; }.elementor .ticks.ticks{ list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:.85rem; }
@media (min-width:760px){.elementor .ticks.ticks{ grid-template-columns:1fr 1fr; gap:.85rem 2rem; } }.elementor .ticks.ticks li, .elementor .ticks.ticks .cips-li{ display:flex; gap:.85rem; align-items:flex-start; color:var(--text); }.elementor .ticks.ticks .mk{
  color:var(--green-ink); flex-shrink:0;
  width:22px; height:22px; border-radius:50%; background:var(--green-soft);
  display:grid; place-items:center; margin-top:.18rem;
}

/* Nummerierte Schritte und schlichte Aufzaehlung */.elementor .schritte.schritte{ counter-reset:s; list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:.9rem; }.elementor .schritte.schritte li, .elementor .schritte.schritte .cips-li{ counter-increment:s; display:flex; gap:.9rem; align-items:flex-start; color:var(--text); }.elementor .schritte.schritte li::before, .elementor .schritte.schritte .cips-li::before{ content:counter(s); flex-shrink:0; width:26px; height:26px; border-radius:50%;
  background:var(--green-soft); color:var(--green-ink); font-weight:700; font-size:.85rem;
  display:grid; place-items:center; margin-top:.1rem; }.elementor .ds-unter.ds-unter{ margin-top:1.1rem; }.elementor .ds-unter.ds-unter b{ color:var(--text); }.elementor .ticks-plain.ticks-plain{ list-style:disc; margin:.8rem 0 0 1.2rem; padding:0; color:var(--text-muted); }.elementor .ticks-plain.ticks-plain li, .elementor .ticks-plain.ticks-plain .cips-li{ margin-bottom:.4rem; max-width:66ch; }.elementor .prose.prose h2{ scroll-margin-top:120px; }

/* ---- Zweispaltiger Inhalt auf den Leistungsseiten ----
   Eine schmale Textspalte laesst die halbe Seite leer. Die
   Kurzuebersicht und ein Kontaktweg fuellen sie mit etwas,
   das man beim Lesen tatsaechlich braucht. */.elementor .inhalt-layout.inhalt-layout{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,19rem);
  gap:clamp(2rem,4vw,3.5rem); align-items:start;
}
@media (max-width:960px){.elementor .inhalt-layout.inhalt-layout{ grid-template-columns:1fr; } }.elementor .seiten-spalte.seiten-spalte{
  display:flex; flex-direction:column; gap:1.1rem;
  position:sticky; top:104px;
}
@media (max-width:960px){.elementor .seiten-spalte.seiten-spalte{ position:static; } }.elementor .spalten-karte.spalten-karte{
  background:var(--paper); border:1px solid var(--rule);
  border-radius:12px; padding:1.5rem 1.4rem;
}.elementor .spalten-karte.spalten-karte h3{
  font-size:1.02rem; font-weight:700; font-stretch:95%;
  margin-bottom:1rem;
}.elementor .spalten-karte.spalten-karte .ticks{ display:flex; flex-direction:column; gap:.7rem; margin:0; }.elementor .spalten-karte.spalten-karte .ticks li, .elementor .spalten-karte.spalten-karte .ticks .cips-li{ font-size:.94rem; }.elementor .spalten-karte.spalten-karte p{ color:var(--text-muted); font-size:.94rem; margin-bottom:1.1rem; }.elementor .spalten-karte.spalten-karte .btn{ width:100%; justify-content:center; }.elementor .spalten-karte-gruen.spalten-karte-gruen{ background:var(--green-soft); border-color:#D7DFBE; }.elementor .spalten-tel.spalten-tel{
  display:block; margin-top:.85rem; text-align:center;
  font-weight:700; font-size:1.02rem; text-decoration:none;
  /* --accent auf gruener Tintflaeche ergibt nur 4.41:1 */
  color:var(--green-ink);
}.elementor .spalten-tel.spalten-tel:hover{ text-decoration:underline; }
/* Weitere Leistungen als kompakte Reihe */.elementor .more-grid.more-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.8rem,1.6vw,1.2rem); }
@media (max-width:900px){.elementor .more-grid.more-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){.elementor .more-grid.more-grid{ grid-template-columns:1fr; } }.elementor .more-card.more-card{
  display:flex; flex-direction:column; gap:.5rem;
  padding:1.4rem 1.3rem; border-radius:12px;
  background:var(--paper); border:1px solid var(--rule);
  text-decoration:none; color:var(--text);
  transition:transform .25s cubic-bezier(.2,.7,.3,1), border-color .25s, box-shadow .25s;
}.elementor .more-card.more-card:hover{ transform:translateY(-3px); border-color:var(--green); box-shadow:0 14px 28px -20px rgba(35,41,26,.45); }.elementor .more-card.more-card strong{ font-size:1.05rem; font-weight:700; font-stretch:95%; }.elementor .more-card.more-card span{ font-size:.9rem; color:var(--text-muted); }.elementor .more-card.more-card .go{ margin-top:.3rem; font-size:.85rem; font-weight:700; color:var(--accent); }

/* Abschluss-Aufruf */.elementor .cta-band.cta-band{ display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem; align-items:center; justify-content:space-between; }.elementor .cta-band.cta-band h2{ font-size:var(--step-3); font-weight:700; font-stretch:90%; margin-bottom:.6rem; }.elementor .cta-band.cta-band p{ color:var(--text-muted); max-width:44ch; }

/* ============================================================
   Kontaktseite
   ============================================================ */.elementor .ways.ways{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.4rem); }
@media (max-width:820px){.elementor .ways.ways{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){.elementor .ways.ways{ grid-template-columns:1fr; } }.elementor .way.way{
  display:flex; flex-direction:column; gap:.45rem;
  padding:1.6rem 1.4rem; border-radius:12px;
  background:var(--paper); border:1px solid var(--rule);
  text-decoration:none; color:var(--text);
  transition:transform .25s cubic-bezier(.2,.7,.3,1), border-color .25s, box-shadow .25s;
}.elementor .way.way:hover{ transform:translateY(-3px); border-color:var(--green); box-shadow:0 14px 28px -20px rgba(35,41,26,.45); }.elementor .way-icon.way-icon{
  width:40px; height:40px; padding:9px; border-radius:10px; margin-bottom:.6rem;
  background:var(--green-soft); color:var(--green-ink);
}.elementor .way-icon.way-icon svg{ width:100%; height:100%; display:block; }.elementor .way.way h3{ font-size:1.05rem; font-weight:700; font-stretch:95%; }.elementor .way.way .val{ font-size:1.05rem; font-weight:700; color:var(--accent); }.elementor .way.way .hint{ font-size:.9rem; color:var(--text-muted); }

/* ---- Karte mit Einwilligung ----
   Das Google-Iframe laedt erst nach ausdruecklicher Zustimmung.
   Vorher verlaesst kein Datenpaket den Browser des Besuchers. */.elementor .map-layout.map-layout{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(1.5rem,3vw,2.5rem); align-items:stretch; }
@media (max-width:900px){.elementor .map-layout.map-layout{ grid-template-columns:1fr; } }.elementor .map.map{
  position:relative; min-height:clamp(300px,42vw,440px);
  border-radius:12px; overflow:hidden;
  border:1px solid var(--rule); background:var(--paper-3);
}.elementor .map.map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }.elementor .map-consent.map-consent{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.7rem; text-align:center; padding:clamp(1.4rem,4vw,2.4rem);
  background:
    radial-gradient(30rem 20rem at 50% 0%, rgba(133,173,38,.16), transparent 65%),
    var(--paper-2);
}.elementor .map-consent.map-consent .pin{ color:var(--green-deep); margin-bottom:.2rem; }.elementor .map-consent.map-consent h3{ font-size:1.15rem; font-weight:700; font-stretch:95%; }.elementor .map-consent.map-consent p{ font-size:.92rem; color:var(--text-muted); max-width:44ch; }.elementor .map-consent.map-consent .btn{ margin-top:.5rem; }.elementor .map-remember.map-remember{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.85rem; color:var(--text-muted); margin-top:.2rem; cursor:pointer;
}.elementor .map-remember.map-remember input{ accent-color:var(--green-deep); width:15px; height:15px; }.elementor .anfahrt.anfahrt{
  display:flex; flex-direction:column; gap:1.3rem;
  padding:clamp(1.5rem,3vw,2rem);
  background:var(--paper); border:1px solid var(--rule); border-radius:12px;
}.elementor .anfahrt.anfahrt h3{ font-size:var(--step-2); font-weight:700; font-stretch:94%; }.elementor .anfahrt.anfahrt address, .elementor .anfahrt.anfahrt .cips-address{ font-style:normal; font-size:1.05rem; line-height:1.6; }.elementor .anfahrt.anfahrt .k{ font-size:.76rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--text-faint); display:block; margin-bottom:.3rem; }.elementor .anfahrt.anfahrt p{ color:var(--text-muted); font-size:.95rem; }.elementor .anfahrt.anfahrt .btn-ghost{ align-self:flex-start; }

/* Formular auf der Kontaktseite etwas breiter */.elementor .form-layout.form-layout{ display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:clamp(2rem,5vw,4rem); }
@media (max-width:900px){.elementor .form-layout.form-layout{ grid-template-columns:1fr; } }.elementor .form-intro.form-intro h2{ font-size:var(--step-3); font-weight:700; font-stretch:90%; margin-bottom:1rem; }.elementor .form-intro.form-intro p{ color:var(--text-muted); max-width:40ch; }.elementor .form-intro.form-intro .note{
  margin-top:1.4rem; padding:1rem 1.1rem; border-radius:10px;
  background:var(--green-soft); color:var(--text); font-size:.92rem;
}.elementor .field.field select{
  font-family:var(--f-body); font-size:1rem; padding:.85rem 1rem; border-radius:6px;
  background:var(--paper); color:var(--text); border:1px solid var(--rule);
}.elementor .field.field select:focus{ border-color:var(--accent); }

/* ---- Reveal ---- */.elementor .reveal.reveal{ opacity:0; transform:translateY(24px); transition:opacity .75s cubic-bezier(.16,.84,.28,1), transform .75s cubic-bezier(.16,.84,.28,1); }.elementor .reveal.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){*, .elementor *::before, .elementor *::after{ animation-duration:.001ms !important; animation-delay:0ms !important; transition-duration:.001ms !important; }.elementor .hero.hero h1 .ln > span{ transform:none; }.elementor .fade-up.fade-up{ opacity:1; transform:none; }.elementor .reveal.reveal{ opacity:1; transform:none; }
}