/*
Theme Name: GeneratePress Child
Theme URI: https://generatepress.com
Template: generatepress
Author: Tom Usborne
Author URI: https://tomusborne.com
Description: GeneratePress is a lightweight WordPress theme built with a focus on speed and usability. Performance is important to us, which is why a fresh GeneratePress install adds less than 10kb (gzipped) to your page size. We take full advantage of the block editor (Gutenberg), which gives you more control over creating your content. If you use page builders, GeneratePress is the right theme for you. It is completely compatible with all major page builders, including Beaver Builder and Elementor. Thanks to our emphasis on WordPress coding standards, we can boast full compatibility with all well-coded plugins, including WooCommerce. GeneratePress is fully responsive, uses valid HTML/CSS, and is translated into over 25 languages by our amazing community of users. A few of our many features include 60+ color controls, powerful dynamic typography, 5 navigation locations, 5 sidebar layouts, dropdown menus (click or hover), and 9 widget areas. Learn more and check out our powerful premium version at https://generatepress.com
Tags: two-columns,three-columns,one-column,right-sidebar,left-sidebar,footer-widgets,blog,e-commerce,flexible-header,full-width-template,buddypress,custom-header,custom-background,custom-menu,custom-colors,sticky-post,threaded-comments,translation-ready,rtl-language-support,featured-images,theme-options
Version: 3.5.1.1740481057
Updated: 2025-02-25 11:57:37

*/

/* 
Setzt die Standardschriftart für die gesamte Website. 
- 'IBM Plex Sans' ist die bevorzugte Schriftart.
- Falls 'IBM Plex Sans' nicht geladen werden kann, wird Arial als Fallback genutzt.
- Falls Arial nicht verfügbar ist, wird eine generische sans-serif-Schrift verwendet.
*/
body {
  font-family: 'roboto', Arial, sans-serif;
}

/* automatische Silbentrennung */
p {
    hyphens: auto;
}


/* Größe des Burger-Icons */
.mobile-menu-control-wrapper .menu-toggle {
    font-size: 50px;
}

/* Farbe der Linien im Burger-Icon */
.menu-toggle .gp-icon.icon-menu-bars svg path {
    fill: #00537e;
}

/* Hintergrundfarbe beim Öffnen */
.has-inline-mobile-toggle #site-navigation.toggled,
.mobile-menu-control-wrapper .menu-toggle {
    background-color: #fff;
}

/* Header Logo */
.header-image.is-logo-image {
  width: 100% !important;
  height: auto;
  max-width: 320px; /* Desktop-Standardgröße */
}

@media (max-width: 1024px) {
  .header-image.is-logo-image {
    max-width: 220px; /* Tablet */
  }
}

@media (max-width: 768px) {
  .header-image.is-logo-image {
    max-width: 160px; /* Mobil */
  }
}

/* =========================================================
   Floating Menu + FAB (bereinigt) – Rot (#00537e) & Weiß
   – Fokus/Hover: Farb-Umkehr
   – entfernt: .contact-info, .contact-button.active, etc.
   ========================================================= */

/* ---------- Basis-Layout ---------- */
/* Desktop: Menü fix rechts, Buttons untereinander */
.floating-menu {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: fixed;
  top: 33%;
  right: 5px;
  transform: translateY(-50%);
  align-items: flex-end; /* alle Buttons rechtsbündig */
  z-index: 9999;
}

/* Mobile: FAB rechts unten */
.fab-container {
  display: none;
  position: fixed;
  bottom: 40px;
  right: 20px;
  z-index: 9999;
}

@media (max-width: 1024px) {
  .floating-menu { display: none; }
  .fab-container { display: block; }
}

/* ---------- FAB Toggle (Button) ---------- */
.fab-toggle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff;                 /* Standard: Weiß */
  color: #00537e;                   /* Rot */
  border: 2px solid #00537e;        /* Rot */
  box-shadow: 0 4px 8px rgba(0,0,0,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: all .25s ease;
}

.fab-toggle .fab-icon {
  line-height: 1;
  font-weight: 700;
  font-size: 32px;
  pointer-events: none;
  user-select: none;
}

/* ---------- FAB-Menü (Mobile) ---------- */
.fab-menu {
  display: none;
  flex-direction: column;
  gap: 10px;
  margin-top: 0px;
  align-items: flex-end;
}
.fab-menu.show { display: flex; }

/* ---------- Allgemeine Floating-Buttons ---------- */
.floating-button {
  width: 60px;
  height: 60px;
  background: #fff;                 /* Standard: Weiß */
  color: #00537e;                   /* blau */
  border: 2px solid #00537e;        /* blau */
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  transition: all .25s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,.1);
}

/* Label im SHOP-Button */
.fab-label {
  font-size: .8em;
  font-weight: 700;
  font-family: sans-serif;
  line-height: 1;
  user-select: none;
  text-decoration: none;
}

/* SVG/Icon innerhalb der Buttons */
.floating-button object {
  width: 32px;
  height: 32px;
  pointer-events: none;
  margin: 0 auto;
  display: block;
}

/* Spezifisch: Mail-Icon etwas größer */
.mail-button object {
  width: 40px;
  height: 40px;
}

/* ---------- Hover & Fokus: Farb-Umkehr (Rot <-> Weiß) ---------- */
.floating-button:hover,
.floating-button:focus-visible,
.fab-toggle:hover,
.fab-toggle:focus-visible {
  background: #00537e;  /* blau */
  color: #fff;          /* Weiß */
  outline: none;        /* Browser-Outline aus */
}

/* Icons invertieren bei Hover/Fokus, FAB-Icon mit einfärben */
.floating-button:hover object,
.floating-button:focus-visible object {
  filter: brightness(0) invert(1);  /* macht Rot -> Weiß */
}
.fab-toggle:hover .fab-icon,
.fab-toggle:focus-visible .fab-icon {
  filter: brightness(0) invert(1);
}

/* Optional: leicht stärkerer Schatten beim Hover */
.floating-button:hover { box-shadow: 0 6px 10px rgba(0,0,0,.2); }

/* ---------- Tastaturfokus klar sichtbar ---------- */
.floating-button:focus-visible,
.fab-toggle:focus-visible {
  /* Zusätzlich zur Farb-Umkehr ein klarer Fokusring */
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #00537e; /* Weißer Innen- + blauer Außenring */
}

/* ---------- Reduzierte Bewegung beachten ---------- */
@media (prefers-reduced-motion: reduce) {
  .floating-button,
  .fab-toggle,
  .fab-menu { transition: none !important; }
}

/* ---------- Sr-only Utility (falls noch nicht vorhanden) ---------- */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Buttons im geschlossenen FAB-Menü komplett unsichtbar */
.fab-menu:not(.show) .floating-button {
  opacity: 0;
  pointer-events: none;
}

/* Nur im geöffneten Zustand sichtbar/anklickbar */
.fab-menu.show .floating-button {
  opacity: 1;
  pointer-events: auto;
}


/* Off-Canvas Menü - Desktop (ab 1025px): 25vw */
@media (min-width: 1025px) {
    body {
        --gp-slideout-width: 20vw;
    }
}

/* Off-Canvas Menü - Mobil & Tablet (bis 1024px): 75vw */
@media (max-width: 1024px) {
    body {
        --gp-slideout-width: 75vw;
    }
}

/* feature list */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.feature-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.feature-text {
  margin: 0;
  font-size: 1em;
  line-height: 1.35;
  flex: 1 1 auto;
}	

/* ============================================================
   MOBILE AKTENVERNICHTUNG – PROZESS-SCHRITTE
   ADvO Brand: Navy-Blau + Gelb
   Einfügen in style.css
   ============================================================ */

/* ---------- CSS-Variablen (Markenfarben ADvO) ---------- */
:root {
  --av-navy:       #00537e;   /* Haupt-Blau */
  --av-navy-deep:  #00537e;   /* Dunkleres Blau */
  --av-yellow:     #ffd109;   /* Marken-Gelb */
  --av-yellow-dim: #fde96b;   /* Helles Gelb für Hover */
  --av-white:      #ffffff;
  --av-text-light: rgba(255,255,255,0.72);
  --av-card-bg:    #00537e;   /* Karten-Blau */
  --av-font:       inherit;
}

/* ---------- Section ---------- */
.av-section {
  background: var(--av-navy-deep);
  padding: 80px 24px 88px;
  font-family: var(--av-font);
  position: relative;
  overflow: hidden;
}

/* Subtiles Hintergrund-Muster */
.av-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 50%, rgba(245,200,0,0.06) 0%, transparent 50%),
    radial-gradient(circle at 85% 20%, rgba(245,200,0,0.05) 0%, transparent 40%);
  pointer-events: none;
}

/* ---------- Header-Bereich ---------- */
.av-header {
  text-align: center;
  margin-bottom: 56px;
  position: relative;
}

.av-label {
  display: inline-block;
  background: var(--av-yellow);
  color: var(--av-navy-deep);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 2px;
  margin-bottom: 18px;
}

.av-headline {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  font-weight: 800;
  color: var(--av-white);
  line-height: 1.2;
  margin: 0 auto 18px;
  max-width: 640px;
  letter-spacing: -0.02em;
}

.av-intro {
  font-size: 1rem;
  color: var(--av-text-light);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
  font-weight: 300;
}

/* ---------- Steps-Grid ---------- */
.av-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
}

/* Durchgehende Verbindungslinie */
.av-connector-line {
  position: absolute;
  top: 52px;
  left: calc(10% + 8px);
  right: calc(10% + 8px);
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--av-yellow) 10%,
    var(--av-yellow) 90%,
    transparent 100%
  );
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
}

/* ---------- Einzelne Card ---------- */
.av-step {
  position: relative;
  background: var(--av-card-bg);
  border-radius: 12px;
  border: 1px solid rgba(245,200,0,0.12);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
  z-index: 1;
}

.av-step::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--av-yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.av-step:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.35), 0 0 0 1px rgba(245,200,0,0.3);
  border-color: rgba(245,200,0,0.3);
}

.av-step:hover::after {
  transform: scaleX(1);
}

/* Hover: alle Karten werden gelb */
.av-step:hover {
  transform: translateY(-8px);
  background: var(--av-yellow);
  box-shadow: 0 20px 48px rgba(0,0,0,0.35);
  border-color: var(--av-yellow) !important;
}

.av-step:hover .av-step-num,
.av-step:hover .av-step-title {
  color: var(--av-navy-deep) !important;
}

.av-step:hover .av-step-text {
  color: rgba(17,30,56,0.8) !important;
}

.av-step:hover .av-step-foot {
  border-top: 1px solid rgba(17,30,56,0.12);
}

.av-step:hover .av-step-tag {
  background: var(--av-navy-deep) !important;
  color: var(--av-yellow) !important;
}

.av-step:hover::after {
  background: var(--av-navy-deep);
  transform: scaleX(1);
}

/* ---------- Card-Inhalte ---------- */
.av-step-inner {
  padding: 28px 22px 20px;
}

.av-step-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.av-step-num {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--av-yellow);
  line-height: 1;
  letter-spacing: -0.04em;
}

.av-step-icon {
  font-size: 1.6rem;
  line-height: 1;
  margin-top: 4px;
  transition: transform 0.3s ease;
}

.av-step:hover .av-step-icon {
  transform: scale(1.2) rotate(-5deg);
}

.av-step-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--av-white);
  margin: 0 0 10px;
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.av-step-text {
  font-size: 0.88rem;
  color: var(--av-text-light);
  line-height: 1.65;
  margin: 0;
  font-weight: 300;
}

/* ---------- Card Footer ---------- */
.av-step-foot {
  padding: 14px 22px 18px;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.av-step-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--av-yellow);
  background: rgba(245,200,0,0.1);
  padding: 4px 10px;
  border-radius: 20px;
}

/* ============================================================
   RESPONSIVE – Tablet (2–3 Spalten)
   ============================================================ */
@media (max-width: 1024px) {
  .av-steps {
    grid-template-columns: repeat(3, 1fr);
  }
  .av-connector-line { display: none; }
}

@media (max-width: 680px) {
  .av-section {
    padding: 56px 16px 64px;
  }
  .av-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .av-step--highlight {
    grid-column: span 2;
  }
  .av-step-inner {
    padding: 22px 18px 16px;
  }
}

@media (max-width: 420px) {
  .av-steps {
    grid-template-columns: 1fr;
  }
  .av-step--highlight {
    grid-column: span 1;
  }
}

/* ============================================================
   ENDE – ADvO Aktenvernichtung Steps
   ============================================================ */

/* ============================================================
   WARUM-KARTEN – Vor Ort Aktenvernichtung
   ============================================================ */

.wk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.wk-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #f5c800;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-left-color 0.25s ease, background 0.25s ease;
}

.wk-card:hover {
  background: #ffffff;
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(26, 45, 82, 0.12);
  border-left-color: #1a2d52;
}

/* Icon */
.wk-icon {
  padding: 36px 32px 0;
}

.wk-icon svg {
  width: 60px;
  height: 60px;
  color: #1a2d52;
  display: block;
  transition: color 0.25s ease;
}

.wk-icon-trage {
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.wk-card:hover .wk-icon svg {
  color: #f5c800;
}

/* Body */
.wk-body {
  padding: 20px 32px 24px;
  flex: 1;
}

.wk-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a2d52;
  margin: 0 0 12px;
  line-height: 1.3;
}

.wk-text {
  font-size: 0.93rem;
  color: #4a5568;
  line-height: 1.75;
  margin: 0;
}

/* Footer */
.wk-foot {
  padding: 16px 32px 28px;
  border-top: 1px solid #e2e8f0;
}

.wk-badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  color: #1a2d52;
  background: #e2e8f0;
  padding: 5px 12px;
  border-radius: 3px;
  letter-spacing: 0.02em;
  transition: background 0.25s ease, color 0.25s ease;
}

.wk-card:hover .wk-badge {
  background: #fef9e0;
  color: #111e38;
}

/* Responsive */
@media (max-width: 768px) {
  .wk-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .wk-icon { padding: 28px 24px 0; }
  .wk-body { padding: 16px 24px 20px; }
  .wk-foot { padding: 14px 24px 24px; }
}

/* ============================================================
   ENDE – Warum-Karten
   ============================================================ */

/* ============================================================
   LEISTUNGS-KARTEN – Vor Ort Aktenvernichtung
   ============================================================ */

.ls-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

/* letzte Karte bei 5 Elementen mittig in der 2. Reihe */
.ls-card:last-child:nth-child(3n - 2) {
  grid-column: 2;
}

.ls-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #f5c800;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease, transform 0.25s ease, background 0.25s ease, border-left-color 0.25s ease;
}

.ls-card:hover {
  background: #ffffff;
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(26, 45, 82, 0.11);
  border-left-color: #1a2d52;
}

/* Icon */
.ls-icon {
  padding: 28px 28px 0;
}

.ls-icon svg {
  width: 40px;
  height: 40px;
  color: #1a2d52;
  transition: color 0.25s ease;
  display: block;
}

.ls-card:hover .ls-icon svg {
  color: #f5c800;
}

/* Body */
.ls-body {
  padding: 16px 28px 20px;
  flex: 1;
}

.ls-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1a2d52;
  margin: 0 0 10px;
  line-height: 1.3;
}

.ls-text {
  font-size: 0.9rem;
  color: #4a5568;
  line-height: 1.75;
  margin: 0;
}

/* Footer */
.ls-foot {
  padding: 14px 28px 24px;
  border-top: 1px solid #e2e8f0;
}

.ls-cta {
  font-size: 0.8rem;
  font-weight: 700;
  color: #1a2d52;
  text-decoration: none;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.ls-cta:hover {
  color: #f5c800;
}

/* Responsive */
@media (max-width: 900px) {
  .ls-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ls-card:last-child:nth-child(3n - 2) {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  .ls-grid {
    grid-template-columns: 1fr;
  }
  .ls-icon { padding: 22px 22px 0; }
  .ls-body { padding: 14px 22px 18px; }
  .ls-foot { padding: 12px 22px 20px; }
}

/* ============================================================
   ENDE – Leistungs-Karten
   ============================================================ */

/* ============================================================
   ADVO – Vorteile-Sektion
   Einfügen in: Darstellung → Customizer → Zusätzliches CSS
   Basis-Schriftgröße: 17px = 1rem
   ============================================================ */

.advo-vorteile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.82rem;        /* 14px ÷ 17 */
  margin: 1.5rem 0;
  padding: 1.41rem;    /* 24px ÷ 17 */
  background: #f3f4f6;
  border-radius: 0.71rem;  /* 12px ÷ 17 */
}

.advo-card {
  display: flex;
  align-items: flex-start;
  gap: 0.82rem;        /* 14px ÷ 17 */
  padding: 0.94rem;    /* 16px ÷ 17 */
  background: #ffffff;
  border: 0.06rem solid #e5e7eb;
  border-top: 0.18rem solid #1A5FAB;  /* 3px ÷ 17 */
  border-radius: 0.47rem;  /* 8px ÷ 17 */
  box-shadow: 0 0.12rem 0.47rem rgba(0, 0, 0, 0.06);  /* 2px 8px ÷ 17 */
}

.advo-icon {
  width: 2.35rem;      /* 40px ÷ 17 */
  height: 2.35rem;
  min-width: 2.35rem;
  border-radius: 0.47rem;  /* 8px ÷ 17 */
  background: #1A5FAB;
  display: flex;
  align-items: center;
  justify-content: center;
}

.advo-text {
  display: flex;
  flex-direction: column;
  gap: 0.24rem;        /* 4px ÷ 17 */
}

.advo-text strong {
  font-size: 0.94rem;  /* ~16px */
  font-weight: 600;
  color: #111827;
  line-height: 1.3;
}

.advo-text span {
  font-size: 0.82rem;  /* ~14px */
  color: #6b7280;
  line-height: 1.5;
}

/* Mobil: einspaltig unter 640px */
@media (max-width: 37.65rem) {  /* 640px ÷ 17 */
  .advo-vorteile {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   ADVO – Einzugsgebiet Karten-Grid
   Einfügen in: Darstellung → Customizer → Zusätzliches CSS
   Basis-Schriftgröße: 17px = 1rem
   ============================================================ */

.advo-region-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.59rem;       /* 10px ÷ 17 */
  margin: 1rem 0 2rem;
}

/* Kreisfreie Städte: 2 Spalten, etwas prominenter */
.advo-region-staedte {
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 2rem;
}

.advo-region-card {
  padding: 0.71rem 0.82rem;   /* 12px 14px ÷ 17 */
  background: var(--color-background-primary, #ffffff);
  border: 0.5px solid #e5e7eb;
  border-left: 0.18rem solid #1A5FAB;  /* 3px ÷ 17 */
  border-radius: 0.35rem;     /* 6px ÷ 17 */
  display: flex;
  flex-direction: column;
  gap: 0.24rem;               /* 4px ÷ 17 */
}

.advo-region-card a {
  font-size: 0.82rem;         /* ~14px */
  font-weight: 600;
  color: #1A5FAB;
  text-decoration: none;
  line-height: 1.3;
}

.advo-region-card a:hover {
  text-decoration: underline;
}

.advo-region-orte {
  font-size: 0.71rem;         /* ~12px */
  color: #9ca3af;
  line-height: 1.4;
}

/* Mobil: 2 Spalten unter 768px, 1 Spalte unter 480px */
@media (max-width: 45.18rem) {   /* 768px ÷ 17 */
  .advo-region-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 28.24rem) {   /* 480px ÷ 17 */
  .advo-region-grid,
  .advo-region-staedte {
    grid-template-columns: 1fr;
  }
}