/* =============================================================
   FB Autoteile — Combined CSS bundle
   Generated: bundle includes the project's custom styles + variants
   Files merged in this order:
     - custom.css
     - custom.headerinline.v1.css
     - custom.navcenter.v1.css
     - custom.navcolor.v2.css
     - custom.bgrelax.v3.css
     - custom.bgframe.v2.css
     - custom.bgframe.v1.css
   ============================================================= */

/* =============================================================
   Text Color Utilities (Palette)
   Usage examples:
     <h1 class="text-brand">...</h1>
     <p class="text-muted">...</p>
     <span class="text-red-600">...</span>
   ============================================================= */
:root{
  --brand:#0d5cab;
  --brand-2:#1f8bd1;
  --text:#1f2733;
  --muted:#5b6574;
  --success:#16a34a;
  --warning:#d97706;
  --danger:#dc2626;
  --info:#2563eb;
  --gray-900:#0b1220;
  --gray-800:#1f2733;
  --gray-700:#374151;
  --gray-600:#4b5563;
  --gray-500:#6b7280;
  --gray-400:#9ca3af;
  --gray-300:#d1d5db;
  --gray-200:#e5e7eb;
  --gray-100:#f3f4f6;
  --white:#ffffff;
  --black:#000000;
}

/* Brand & semantic */
.text-brand{ color: var(--brand) !important; }
.text-brand-2{ color: var(--brand-2) !important; }
.text-muted{ color: var(--muted) !important; }
.text-success{ color: var(--success) !important; }
.text-warning{ color: var(--warning) !important; }
.text-danger{ color: var(--danger) !important; }
.text-info{ color: var(--info) !important; }

/* Gray scale */
.text-white{ color: var(--white) !important; }
.text-black{ color: var(--black) !important; }
.text-gray-900{ color: var(--gray-900) !important; }
.text-gray-800{ color: var(--gray-800) !important; }
.text-gray-700{ color: var(--gray-700) !important; }
.text-gray-600{ color: var(--gray-600) !important; }
.text-gray-500{ color: var(--gray-500) !important; }
.text-gray-400{ color: var(--gray-400) !important; }
.text-gray-300{ color: var(--gray-300) !important; }
.text-gray-200{ color: var(--gray-200) !important; }
.text-gray-100{ color: var(--gray-100) !important; }

/* Common headings quick helpers */
.h1-brand h1, h1.h1-brand{ color: var(--brand) !important; }
.h2-brand h2, h2.h2-brand{ color: var(--brand) !important; }
.h1-dark h1, h1.h1-dark{ color: var(--gray-900) !important; }
.h2-dark h2, h2.h2-dark{ color: var(--gray-900) !important; }


/* ===== BEGIN: custom.css ===== */
/* ===== MODERNER HINTERGRUND: Mesh + feine Linien + dezente Glows ===== */
:root{
  --bg:#f8fbff;
  --text:#1f2733;
  --muted:#5b6574;
  --brand:#0d5cab;
  --brand-2:#1f8bd1;
  --line:#e5e7eb;
  --card:#fff;
  --shadow:0 12px 40px rgba(13,92,171,.14);
  --radius:16px;
}

/* Base */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at -10% -20%, #e6f0ff 0, transparent 60%),
    radial-gradient(900px 540px at 110% -10%, #e6fff7 0, transparent 60%),
    linear-gradient(180deg, #f9fbff 0%, #f3f6fb 50%, #eef3f9 100%);
  position:relative;
  overflow-x:hidden;
}

/* Subtiles Linienmuster oben – nur im Kopfbereich sichtbar */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(13,92,171,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,92,171,0.06) 1px, transparent 1px);
  background-size: 42px 42px, 42px 42px;
  opacity:.25;
  mask-image: radial-gradient(1000px 600px at 50% -10%, #000 55%, transparent 70%);
  -webkit-mask-image: radial-gradient(1000px 600px at 50% -10%, #000 55%, transparent 70%);
  z-index:0;
}

.container{ max-width:1200px; margin:0 auto; padding:0 16px; position:relative; z-index:1; }
.section{ padding: clamp(2.5rem, 4vw, 4rem) 0; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; height:auto; display:block; }

/* Header & Nav */
.site-header .header-top{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.75rem 0; }
.logo img{ height:56px; filter: drop-shadow(0 6px 18px rgba(13,92,171,.12)); }
.main-nav{ position: sticky; top:0; z-index:40; background:rgba(255,255,255,.78); backdrop-filter: saturate(160%) blur(10px); border-bottom:1px solid var(--line); }
.nav-links{ display:flex; gap:1rem; padding:.6rem 0; flex-wrap:wrap; }
.nav-links a{ padding:.5rem .8rem; border-radius:10px; }
.nav-links a:hover{ background:#fff; text-decoration:none; box-shadow:0 4px 14px rgba(13,92,171,.12); }

/* Willkommen – moderner Mesh-Gradient mit „Blobs“ */
.welcome-hero{
  position:relative;
  overflow:hidden;
  padding: clamp(3rem, 6vw, 6rem) 0 0;
  text-align:center;
  background:
    radial-gradient(900px 480px at 10% -10%, rgba(13,92,171,.14), transparent 60%),
    radial-gradient(800px 440px at 90% -20%, rgba(31,139,209,.12), transparent 60%),
    radial-gradient(1200px 540px at 50% -30%, rgba(124,230,203,.10), transparent 70%);
}
.welcome-hero::before,
.welcome-hero::after{
  content:"";
  position:absolute;
  width:680px; height:680px;
  filter: blur(36px);
  opacity:.65;
  z-index:0;
  pointer-events:none;
  transform: translate3d(0,0,0);
}
.welcome-hero::before{
  top:-180px; left:-140px;
  background: radial-gradient(closest-side at 30% 30%, rgba(13,92,171,.35), transparent 55%),
              radial-gradient(closest-side at 70% 70%, rgba(103,232,249,.35), transparent 60%);
  animation: floatA 18s ease-in-out infinite alternate;
}
.welcome-hero::after{
  top:-120px; right:-160px;
  background: radial-gradient(closest-side at 30% 30%, rgba(31,139,209,.28), transparent 55%),
              radial-gradient(closest-side at 70% 70%, rgba(150,230,161,.28), transparent 60%);
  animation: floatB 22s ease-in-out infinite alternate;
}
@keyframes floatA{ from{ transform:translateY(0) translateX(0) } to{ transform: translateY(30px) translateX(25px) } }
@keyframes floatB{ from{ transform:translateY(0) translateX(0) } to{ transform: translateY(40px) translateX(-30px) } }

.welcome-hero__inner{ display:flex; flex-direction:column; align-items:center; position:relative; z-index:1; }
.welcome-hero h1{ font-size: clamp(2rem, 3.2vw, 3rem); margin:0 0 .5rem; }
.welcome-hero h1 span{ color:var(--brand); }
.welcome-hero .lead{ font-size: clamp(1.05rem, 2vw, 1.2rem); color:var(--muted); max-width: 70ch; margin: 0 auto; }
.welcome-copy{ margin-top: .8rem; max-width: 75ch; color:var(--muted); text-align:center; }
.cta{ display:flex; gap:.8rem; margin-top:1rem; flex-wrap:wrap; justify-content:center; }
.btn{ display:inline-block; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color:#fff; padding:.8rem 1rem; border-radius:12px; text-decoration:none; font-weight:600; box-shadow:0 8px 24px rgba(13,92,171,.25); transition: transform .15s ease, box-shadow .15s ease; }
.btn:hover{ transform: translateY(-1px); box-shadow:0 12px 32px rgba(13,92,171,.32); text-decoration:none; }
.btn.alt{ background:#fff; color:var(--brand); border:1px solid var(--line); box-shadow:0 6px 16px rgba(0,0,0,.06); }
.btn.alt:hover{ background:#f9fbff; }
.trust-badges{ list-style:none; padding:0; margin:1rem auto 0; display:flex; gap:1rem; flex-wrap:wrap; color:var(--muted); justify-content:center; }
.trust-badges svg{ width:20px; height:20px; margin-right:.4rem; }
.trust-badges li{ display:flex; align-items:center; gap:.4rem; background:#fff; border:1px solid var(--line); padding:.5rem .75rem; border-radius:999px; box-shadow:0 6px 20px rgba(13,92,171,.07); }

/* Wave Separator */
.welcome-hero__sep{ display:block; width:100%; height:80px; color:#e8eef7; }
.welcome-hero__sep path{ fill: currentColor; filter: drop-shadow(0 -6px 20px rgba(13,92,171,.12)); }

/* Vorteile */
.perks .perks-grid{ display:grid; grid-template-columns: repeat(3, minmax(220px,1fr)); gap:1rem; }
.perk{ display:flex; gap:.8rem; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1rem; box-shadow: var(--shadow); }
.perk-ico svg{ width:28px; height:28px; fill: var(--brand); opacity:.9; }
.perk h3{ margin:.2rem 0 .2rem; font-size:1.05rem; }
.perk p{ margin:0; color:var(--muted); }

/* Kategorien */
#kategorien h2{ text-align:center; margin:0 0 1.25rem; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.grid{ display:grid; gap:1rem; grid-template-columns: repeat(3, minmax(220px,1fr)); }
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow: var(--shadow); display:flex; gap:.6rem; padding:1rem; align-items:center; transition: transform .15s ease, box-shadow .15s ease; }
.card:hover{ transform: translateY(-2px); box-shadow:0 18px 44px rgba(13,92,171,.16); }
.card-ico svg{ width:28px; height:28px; stroke: var(--brand); fill:none; stroke-width:2; }
.card-title{ font-weight:700; }
.card-copy{ color:var(--muted); font-size:.95rem; }

/* Trennlinie */
.section-sep{
  height:2px;
  background: linear-gradient(90deg, transparent, #d9dde3 15%, #cfd4db 50%, #d9dde3 85%, transparent);
  max-width:1200px; margin:0 auto;
  box-shadow:0 1px 0 rgba(255,255,255,.6), 0 6px 20px rgba(13,92,171,.08);
  border-radius: 999px;
}

/* Standard: Mobile (unter 768px) -> untereinander */
.contact-anfahrt .two-col {
  display: grid;
  grid-template-columns: 1fr; /* beide 100% */
  gap: var(--gap, 24px);
  align-items: stretch;
}

.contact-anfahrt .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.contact-anfahrt .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-map .map-embed {
  flex: 1;
}

.card-map .map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Tablet: 768px – 1023px */
@media (min-width: 768px) {
  .contact-anfahrt .two-col {
    grid-template-columns: 2fr 3fr; /* ca. 40% / 60% */
  }
}

/* Desktop: ab 1024px */
@media (min-width: 1024px) {
  .contact-anfahrt .two-col {
    grid-template-columns: 1fr 3fr; /* ca. 25% / 75% */
  }
}


/* Footer */
.site-footer{ background: linear-gradient(180deg, #ffffff, #f3f6fb); color:#333; padding:3rem 1rem 2rem; border-top:1px solid var(--line); }
.footer-head{ display:grid; grid-template-columns: 320px 1fr; gap:2rem; align-items:center; margin-bottom:1.25rem; }
.brand-logo-left img{ height:84px; width:auto; max-width:100%; filter: drop-shadow(0 6px 16px rgba(0,0,0,.08)); }
.links-grid{ display:grid; grid-template-columns: repeat(3, minmax(180px,1fr)); gap:2rem; }
.links-grid h4{ color:#111; margin:0 0 .8rem 0; font-size:1.1rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.muted{ color:var(--muted); text-decoration:none; display:block; margin:.3rem 0; }
.muted:hover{ color:#000; text-decoration:none; }
.social{ display:flex; gap:1rem; margin-top:1.4rem; justify-content:center; flex-wrap:wrap; }
.social a{ position:relative; display:flex; align-items:center; justify-content:center; width:60px; height:60px; border-radius:50%; transition: transform .25s ease, filter .25s ease; }
.social a svg{ width:48px; height:48px; transition: filter .25s ease; }
.social a:hover{ transform: translateY(-5px) scale(1.05); }
.social a[aria-label="Facebook"]:hover svg{ filter: drop-shadow(0 6px 14px rgba(59,89,152,.35)); }
.social a[aria-label="Instagram"]:hover svg{ filter: drop-shadow(0 6px 14px rgba(253,160,133,.35)); }
.social a[aria-label="WhatsApp"]:hover svg{ filter: drop-shadow(0 6px 14px rgba(37,211,102,.35)); }
.copyright{ text-align:center; padding-top:1.6rem; font-size:.9rem; border-top:1px solid var(--line); margin-top:1.6rem; color:#666; }

/* Responsive */
@media (max-width: 1100px){
  .grid{ grid-template-columns: repeat(2, minmax(220px,1fr)); }
  .perks .perks-grid{ grid-template-columns: repeat(2, minmax(220px,1fr)); }
}
@media (max-width: 900px){
  .contact-anfahrt{ --map-h: 360px; }
  .contact-anfahrt .two-col{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .grid{ grid-template-columns: 1fr; }
  .perks .perks-grid{ grid-template-columns: 1fr; }
  .contact-anfahrt{ --map-h: 300px; }
  .brand-logo-left img{ height:68px; }
  .links-grid{ grid-template-columns: 1fr; gap:1.25rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
  .welcome-hero::before,.welcome-hero::after{ animation: none !important; }
}

/* Kontakt & Anfahrt: gleiche Höhe */
.contact-anfahrt .two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap, 24px);
  align-items: stretch;      /* Spalten auf gleiche Höhe */
}

.contact-anfahrt .card {
  display: flex;
  flex-direction: column;
  height: 100%;              /* jede Card füllt die Höhe */
}

.contact-anfahrt .card-body {
  flex: 1;                   /* Card-Body streckt sich */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Buttons & Karte schön unten */
}

.card-map .map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Map soll fast die ganze Box füllen – mit 2mm Abstand */
.card-map .map-embed {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 2mm;         /* 2mm Abstand rundherum */
  box-sizing: border-box;
}

.card-map .map-embed iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* Moderner Adressblock */
.contact-info-modern {
  text-align: center;
  line-height: 1.4;
  font-size: 0.95rem;
}

.contact-info-modern h3 {
  margin: 0 0 0.4em;
  font-size: 1.2rem;
  font-weight: 600;
}

.contact-info-modern p {
  margin: 0.3em 0;
}

.contact-info-modern a {
  color: var(--clr-text, #0d5cab);
  text-decoration: none;
  font-weight: 500;
}

.contact-info-modern a:hover {
  text-decoration: underline;
}

.contact-info-modern .hours {
  font-size: 0.9rem;
  color: #555;
  margin-top: 0.6em;
}

/* Weniger Abstand zwischen Kontakt/Anfahrt und Footer */
#anfahrt.section {
  padding-bottom: 1.5rem;   /* statt evtl. 4–6rem */
  margin-bottom: 0;        /* Lücke nach außen verhindern */
}

.site-footer {
  margin-top: 1rem;        /* etwas Abstand lassen, aber kompakt */
}

.contact-anfahrt .card {
  background: #fff;           /* gleicher Hintergrund wie andere Cards */
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  overflow: hidden;
}

.contact-anfahrt .card-body {
  padding: 1.5rem;
  text-align: center;
}

/* Kontakt & Anfahrt nebeneinander */
.two-col {
  display: grid;
  grid-template-columns: 1fr 2fr; /* links schmaler (Kontakt), rechts breiter (Karte) */
  gap: 24px;
  align-items: stretch;
}

/* Mobile Ansicht: untereinander */
@media (max-width: 767px) {
  .two-col {
    grid-template-columns: 1fr;
  }
    
/* Kontakt & Anfahrt nebeneinander – gleich breit */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50/50 */
  gap: 24px;
  align-items: stretch;
}

/* ===== Kontakt & Anfahrt – sauberes 50/50-Layout, gleiche Höhe ===== */

/* 2 Spalten – Desktop/Tablet: 50/50, Mobile: 100%/100% */
.contact-anfahrt .two-col{
  display:grid;
  grid-template-columns: 1fr 1fr;  /* 50/50 */
  gap: 24px;
  align-items: stretch;            /* gleiche Höhe */
}

/* Cards mit gleichem Look wie die restlichen Boxen */
.contact-anfahrt .card{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius, 16px);
  box-shadow: var(--shadow, 0 12px 40px rgba(13,92,171,.14));
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
}

.contact-anfahrt .card-body{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:1.25rem;
}

/* Moderner, kompakter Adressblock */
.contact-info-modern{
  text-align:center;
  line-height:1.4;
  font-size:0.95rem;
  margin:auto;                /* zentriert vertikal/horizontal in der Card */
}
.contact-info-modern h3{
  margin:0 0 .4em;
  font-size:1.2rem;
  font-weight:600;
}
.contact-info-modern p{ margin:.3em 0; }
.contact-info-modern a{
  color: var(--brand);
  text-decoration:none;
  font-weight:500;
}
.contact-info-modern a:hover{ text-decoration:underline; }
.contact-info-modern .hours{
  font-size:.9rem; color:#555; margin-top:.6em;
}

/* Map vollflächig innerhalb der rechten Card, responsiv, gleiche Höhe */
.card-map .map-embed{
  position:relative;
  flex:1;
  min-height: 420px;          /* Grundhöhe; wächst mit der Card */
}
.card-map .map-embed iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0; display:block;
}

/* Mobile: untereinander */
@media (max-width: 767px){
  .contact-anfahrt .two-col{ grid-template-columns:1fr; }
  .card-map .map-embed{ min-height: 320px; }
}

/* Etwas kompakter vor dem Footer (deine Vorgabe) */
#anfahrt.section{ padding-bottom:1.5rem; margin-bottom:0; }
.site-footer{ margin-top:1rem; 
    }

/* Kontakt-Box zentriert + größer */
.contact-info-modern{
  text-align: center;
  line-height: 1.6;
  font-size: 1.05rem;          /* etwas größer als vorher */
  margin: auto;                /* mittig in der Card */
}

.contact-info-modern h3{
  margin: 0 0 .6em;
  font-size: 1.4rem;           /* größerer Titel */
  font-weight: 700;
}

.contact-info-modern p{ 
  margin: .4em 0; 
}

/* Map-Box größer */
.card-map .map-embed{
  position: relative;
  flex: 1;
  min-height: 480px;          /* höher als vorher (420px) */
}

.card-map .map-embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

    /* Abschnitt "Kontakt & Anfahrt" mittig im Layout */
#anfahrt.container {
  max-width: 1200px;      /* begrenzt die Breite, damit es modern aussieht */
  margin: 0 auto;         /* zentriert den gesamten Block */
  text-align: center;     /* Überschrift mittig */
}

/* Grid für die zwei Boxen */
.contact-anfahrt .two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* 50/50 */
  gap: 24px;
  justify-content: center;         /* Grid mittig */
  align-items: stretch;
}

/* Beide Cards gleich groß */
.contact-anfahrt .card {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* Inhalt zentrieren */
  height: 100%;
}

    /* ===== Kontakt & Anfahrt – zentriert, 2 gleich große Boxen ===== */
#kontakt-anfahrt.container{
  max-width:1200px;      /* zentrierte, angenehme Breite */
  margin:0 auto;
  text-align:center;     /* H2 mittig */
}

#kontakt-anfahrt .two-col{
  display:grid;
  grid-template-columns: 320px 1fr; /* linke Box fix ~320px, Karte nimmt Rest */
  gap:24px;
  justify-content:center;
  align-items:stretch;
}


#kontakt-anfahrt .card{
  background:#fff;               /* wie andere Cards */
  border:1px solid var(--line);
  border-radius:var(--radius,16px);
  box-shadow:var(--shadow,0 12px 40px rgba(13,92,171,.14));
  display:flex; flex-direction:column; height:100%;
  overflow:hidden;
}

#kontakt-anfahrt .card-body{ padding:1.25rem; display:flex; flex-direction:column; flex:1; }

/* Adressblock modern & kompakt */
#kontakt-anfahrt .contact-info-modern{
  margin:auto; text-align:center; line-height:1.5; font-size:1.05rem;
}
#kontakt-anfahrt .contact-info-modern h3{ margin:0 0 .6em; font-size:1.35rem; font-weight:700; }
#kontakt-anfahrt .contact-info-modern p{ margin:.4em 0; }
#kontakt-anfahrt .contact-info-modern a{ color:var(--brand); text-decoration:none; font-weight:600; }
#kontakt-anfahrt .contact-info-modern a:hover{ text-decoration:underline; }

/* Map vollflächig in der rechten Card */
#kontakt-anfahrt .map-embed{ position:relative; flex:1; min-height:440px; }
#kontakt-anfahrt .map-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

/* Responsive: untereinander auf Mobile */
@media (max-width: 767px){
  #kontakt-anfahrt .two-col{ grid-template-columns:1fr; }
  #kontakt-anfahrt .map-embed{ min-height:320px; }
}

    /* Kontakt & Anfahrt – zwei gleich große, breite Boxen */
#kontakt-anfahrt .two-col {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50/50 */
  gap: 32px;                      /* etwas mehr Abstand zwischen den Boxen */
  justify-content: center;
  align-items: stretch;
  max-width: 1300px;              /* größere Gesamtbreite */
  margin: 0 auto;                 /* zentriert im Layout */
}

/* Beide Cards gleich groß und höher */
#kontakt-anfahrt .card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 480px;              /* Boxen größer machen */
}

/* Google Maps mit 2mm Abstand innerhalb der Box */
#kontakt-anfahrt .map-embed {
  position: relative;
  flex: 1;
  padding: 2mm;                   /* 2mm Abstand zu allen Seiten */
  box-sizing: border-box;
}
#kontakt-anfahrt .map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

    /* ===== Kontakt & Anfahrt (scoped, kollisionsfrei) ===== */
#kontakt-anfahrt{
  --ka-maxw: 1300px;    /* Gesamtbreite des Abschnitts */
  --ka-gap: 32px;       /* Abstand zwischen den Boxen */
  --map-h: 460px;       /* <<< HIER Kartenhöhe in px selbst ändern */
}

#kontakt-anfahrt.container{ max-width: var(--ka-maxw); margin: 0 auto; text-align: center; }

#kontakt-anfahrt .ka-two-col{
  display: grid;
  grid-template-columns: 1fr 1fr;           /* 50/50 */
  gap: var(--ka-gap);
  align-items: stretch;                      /* gleiche Höhe */
  justify-content: center;
}

#kontakt-anfahrt .ka-card{
  background: var(--card, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: var(--radius, 16px);
  box-shadow: var(--shadow, 0 12px 40px rgba(13,92,171,.14));
  display: flex; flex-direction: column; height: 100%;
  overflow: hidden;
}

#kontakt-anfahrt .ka-card-body{ padding: 1.25rem; display:flex; flex-direction:column; flex:1; }

/* Kontakt-Typografie */
#kontakt-anfahrt .ka-contact{ margin: auto; text-align: center; line-height: 1.55; font-size: 1.05rem; }
#kontakt-anfahrt .ka-contact h3{ margin: 0 0 .6em; font-size: 1.35rem; font-weight: 700; }
#kontakt-anfahrt .ka-contact p{ margin: .4em 0; }
#kontakt-anfahrt .ka-contact a{ color: var(--brand, #0d5cab); font-weight: 600; text-decoration: none; }
#kontakt-anfahrt .ka-contact a:hover{ text-decoration: underline; }
#kontakt-anfahrt .ka-contact .hours{ color: #555; font-size: .95rem; }

/* Google Maps – Höhe steuerbar über --map-h */
#kontakt-anfahrt .ka-map{ position: relative; height: var(--map-h); }
#kontakt-anfahrt .ka-map iframe{
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
}

    /* Abschnitt Kontakt & Anfahrt mittig im Layout */
#kontakt-anfahrt {
  max-width: 1200px;   /* maximale Breite */
  margin: 0 auto;      /* zentriert den Block */
  padding: 0 16px;     /* etwas Seitenabstand */
  text-align: center;  /* Überschrift mittig */
}

/* Zwei gleich große Boxen nebeneinander */
#kontakt-anfahrt .ka-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* 50/50 */
  gap: var(--ka-gap, 32px);
  align-items: stretch;
  justify-content: center;
  min-width: 0;
}

    /* Kontakt & Anfahrt – zwei gleich große Boxen nebeneinander */
#kontakt-anfahrt .ka-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 50/50 nebeneinander */
  gap: 32px;
  align-items: stretch;
  justify-content: center;
}

/* Box-Style */
#kontakt-anfahrt .ka-card {
  background: #fff;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
}

/* Google Maps Höhe flexibel einstellbar */
#kontakt-anfahrt .ka-map {
  position: relative;
  height: 460px; /* kannst du selbst ändern */
}
#kontakt-anfahrt .ka-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Kontakt & Anfahrt: zwei gleich große Boxen nebeneinander */
#kontakt-anfahrt .ka-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50/50 nebeneinander */
  gap: 32px;                      /* Abstand zwischen den Boxen */
  align-items: stretch;
  justify-content: center;
}

#kontakt-anfahrt .ka-card {
  background: #fff;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Google Maps Höhe flexibel einstellbar */
#kontakt-anfahrt .ka-map {
  position: relative;
  height: 460px; /* Höhe kannst du selbst anpassen */
}
#kontakt-anfahrt .ka-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}





/* === BEGIN: CLEAN Kontakt & Anfahrt block (appended) === */
/* ===================================================================
   Kontakt & Anfahrt – CLEAN BLOCK (append-only)
   - Zwei Cards nebeneinander (immer 50/50, schrumpfen erlaubt)
   - Kartenhöhe & Innenabstand per Variablen einstellbar
   - Abschnitt mittig im Layout
   =================================================================== */

#kontakt-anfahrt{
  --maxw: 1200px;          /* maximale Breite des Abschnitts */
  --gap: 32px;             /* Abstand zwischen den Boxen */
  --map-h: 460px;          /* Höhe der Karte in px (frei änderbar) */
  --map-pad: 2mm;          /* Innenabstand der Karte zu allen Rändern */
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 16px;         /* etwas Seitenabstand */
  text-align: center;      /* Überschrift mittig */
}

/* Grid: zwei gleich große Boxen – bleiben immer nebeneinander */
#kontakt-anfahrt .ka-two-col{
  display: grid;
  grid-template-columns: 1fr 1fr;  /* 50/50 */
  gap: var(--gap);
  align-items: stretch;            /* gleiche Höhe der Zeile */
  justify-content: center;
  min-width: 0;                    /* wichtig fürs Schrumpfen */
}

/* Card-Look (scoped, kollisionsfrei) */
#kontakt-anfahrt .ka-card{
  background: var(--card, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: var(--radius, 16px);
  box-shadow: var(--shadow, 0 12px 40px rgba(13,92,171,.14));
  display: flex;
  flex-direction: column;
  min-width: 0;                    /* darf schrumpfen */
  min-height: var(--map-h);        /* sorgt optisch für gleiche Höhe */
  overflow: hidden;
}
#kontakt-anfahrt .ka-card-body{
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Kontakt (linke Box) – modern & kompakt, zentriert in der Card */
#kontakt-anfahrt .ka-contact{
  margin: auto;                    /* vertikal/horizontal zentrieren */
  text-align: center;
  line-height: 1.55;
  font-size: 1.05rem;
}
#kontakt-anfahrt .ka-contact h3{
  margin: 0 0 .6em;
  font-size: 1.35rem;
  font-weight: 700;
}
#kontakt-anfahrt .ka-contact p{ margin: .4em 0; }
#kontakt-anfahrt .ka-contact a{
  color: var(--brand, #0d5cab);
  font-weight: 600;
  text-decoration: none;
}
#kontakt-anfahrt .ka-contact a:hover{ text-decoration: underline; }
#kontakt-anfahrt .ka-contact .hours{ color: #555; font-size: .95rem; }

/* Google Maps (rechte Box)
   - Höhe über --map-h steuerbar
   - 2mm Abstand zum Boxrand über --map-pad */
#kontakt-anfahrt .ka-map{
  height: var(--map-h);
  padding: var(--map-pad);
  box-sizing: content-box;         /* Padding zählt zusätzlich zur Höhe */
}
#kontakt-anfahrt .ka-map iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Abschnitt etwas kompakter vor dem Footer */
#kontakt-anfahrt.section{
  padding-bottom: 1.25rem;
  margin-bottom: 0;
}
    
    /* Kontakt & Anfahrt: immer nebeneinander (50/50) */
#kontakt-anfahrt .ka-two-col{
  display: grid;
  grid-template-columns: 1fr 1fr;   /* zwei Spalten */
  gap: 32px;
  align-items: stretch;
  justify-content: center;
  min-width: 0;                     /* Schrumpfen erlauben */
}

#kontakt-anfahrt .ka-card{
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Karte: Höhe steuerbar; 2mm Innenabstand – optional */
#kontakt-anfahrt .ka-map{
  position: relative;
  height: var(--map-h, 460px);   /* ändere hier die Kartenhöhe in px */
  padding: 2mm;                  /* 2mm Abstand zu allen Rändern der Box */
  box-sizing: content-box;
}
#kontakt-anfahrt .ka-map iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Falls vorhanden: Mobile-Stack deaktivieren */
@media (max-width: 9999px){
  /* überschreibt evtl. alte Regeln wie grid-template-columns: 1fr; */
  #kontakt-anfahrt .ka-two-col{ grid-template-columns: 1fr 1fr; }
}

    /* ===== Zwei Boxen – zentriert & gleich groß ===== */
#zwei-boxen{
  --maxw: 1200px;
  --gap: 32px;
  --map-h: 460px;      /* Karte in px anpassbar */
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;  /* Überschrift mittig */
}

#zwei-boxen .zb-grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;  /* 50/50 nebeneinander */
  gap: var(--gap);
  align-items: stretch;             /* gleiche Höhe */
  justify-content: center;
  min-width: 0;                     /* Schrumpfen erlauben */
}

#zwei-boxen .zb-card{
  background: #fff;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(13,92,171,.14);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

#zwei-boxen .zb-card-body{
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Typografie links */
#zwei-boxen .zb-card h3{ margin: 0 0 .6em; font-size: 1.35rem; font-weight: 700; }
#zwei-boxen .zb-card p{ margin: .4em 0; font-size: 1.05rem; line-height: 1.55; }
#zwei-boxen .zb-card a{ color: var(--brand, #0d5cab); font-weight: 600; text-decoration: none; }
#zwei-boxen .zb-card a:hover{ text-decoration: underline; }

/* Karte rechts */
#zwei-boxen .zb-map{ position: relative; height: var(--map-h); }
#zwei-boxen .zb-map iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
}

    /* Höhe frei ändern */
#kontakt-anfahrt{ --map-h: 750px}           /* z. B. 600px */

/* Alternativen für dynamischere Höhe */
#kontakt-anfahrt{ --map-h: 70vh; }            /* 70% der Fensterhöhe */
#kontakt-anfahrt{ --map-h: 600(380px, 70vh 820px)}  /* min/ideal/max */

/* Innenabstand der Karte zur Box (falls gewünscht) */
#kontakt-anfahrt{ --map-pad: 2mm; }           /* Rand innen */

/* === END: CLEAN Kontakt & Anfahrt block === */
    
    /* ===== Moderne Card-Rahmen mit Schatten & Glow ===== */
/* Greift für alle Boxen, die bei dir als .card/.ka-card/.zb-card markiert sind */
.card, .ka-card, .zb-card {
  position: relative;
  border-radius: 16px;
  /* Gradient-Rand ohne harte Linie */
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(13,92,171,.25), rgba(13,92,171,.06)) border-box;
  border: 1px solid transparent;

  /* Weicher, moderner Schatten */
  box-shadow:
    0 8px 24px rgba(13, 92, 171, .10),  /* farbiger Weichschatten */
    0 2px 8px rgba(0, 0, 0, .05);       /* neutraler Nahschatten */

  /* dezente „Glass“-Anmutung im Licht */
  backdrop-filter: saturate(110%);
  -webkit-backdrop-filter: saturate(110%);

  transition: box-shadow .25s ease, transform .25s ease, background .25s ease;
}

/* Innenabstände beibehalten (falls nicht schon gesetzt) */
.card .card-body,
.ka-card .ka-card-body,
.zb-card .zb-card-body {
  padding: 1.25rem;
}

/* Glow & leichte Anhebung beim Hover/Focus */
.card:hover, .card:focus-within,
.ka-card:hover, .ka-card:focus-within,
.zb-card:hover, .zb-card:focus-within {
  box-shadow:
    0 14px 44px rgba(13, 92, 171, .18),
    0 6px 18px rgba(0, 0, 0, .06),
    0 0 0 4px rgba(13, 92, 171, .08);   /* sanfter Glow-Ring */
  transform: translateY(-2px);
}

/* Optional: dezentes „Halo“ als Pseudo-Element – sorgt für einen soften Außen-Glow */
.card::after, .ka-card::after, .zb-card::after {
  content: "";
  position: absolute;
  inset: -6px;                  /* Glow leicht überstehend */
  border-radius: inherit;
  background: radial-gradient(60% 60% at 50% 30%, rgba(13,92,171,.14), transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.card:hover::after, .card:focus-within::after,
.ka-card:hover::after, .ka-card:focus-within::after,
.zb-card:hover::after, .zb-card:focus-within::after {
  opacity: 1;
}

/* Für sehr helle Hintergründe: feine Innenlinie, damit die Kante „knackig“ bleibt */
.card, .ka-card, .zb-card {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.6),
    0 8px 24px rgba(13, 92, 171, .10),
    0 2px 8px rgba(0, 0, 0, .05);
}

/* Motion reduzieren, wenn gewünscht */
@media (prefers-reduced-motion: reduce) {
  .card, .ka-card, .zb-card {
    transition: none;
  }

    /* ===== Kräftiger hellblauer Background (Hero + Seite) ===== */

/* 1) Gesamtseite: leicht bläulicher Untergrund (dezent) */
html, body{
  background: linear-gradient(180deg, #f1f7ff 0%, #e5f0ff 60%, #dbe9ff 100%);
}

/* 2) Hero-Bereich deutlich kräftiger in Hellblau */
.welcome-hero{
  /* satter Light-Blue-Verlauf, bleibt gut lesbar mit weißer Schrift */
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255,255,255,.25), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #79b4ff 0%, #3b8cff 45%, #0d5cab 100%);
  color: #fff;
}

/* Überschriften & Lead im Hero leicht stärker, damit es knackt */
.welcome-hero h1{ text-shadow: 0 2px 12px rgba(0,0,0,.18); }
.welcome-hero .lead{ opacity:.95; }

/* 3) Wellen-Separator unter dem Hero bleibt hell (Kontrast) */
.welcome-hero__sep path{ fill: #ffffff; }

/* 4) Buttons auf dem dunkleren Blau knackig darstellen */
.btn{
  background: #ffffff;
  color: #0d5cab;
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 6px 18px rgba(13,92,171,.18);
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(13,92,171,.24);
}
.btn.alt{
  background: rgba(255,255,255,.12);
  color: #ffffff;
  border-color: rgba(255,255,255,.35);
}
.btn.alt:hover{
  background: rgba(255,255,255,.18);
}

/* 5) Karten/Boxen wirken auf dem blauen Grund leicht schwebend */
.card, .ka-card, .zb-card{
  background:#fff;
  border: 1px solid rgba(13,92,171,.10);
  border-radius:16px;
  box-shadow:
    0 10px 30px rgba(13,92,171,.12),
    0 2px 10px rgba(0,0,0,.06);
}



/* ===== END: custom.css ===== */

/* ===== BEGIN: custom.headerinline.v1.css ===== */

/* === custom.headerinline.v1.css — Telefon & E-Mail nebeneinander (ohne Layout-Änderung) === */
.header-top .header-info,
.header-top .contact-info{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;       /* nicht umbrechen */
}

.header-top .header-info p,
.header-top .contact-info p{
  margin: 0 !important;
  white-space: nowrap !important;     /* hält Tel/Email in einer Zeile */
}

.header-top .header-info a,
.header-top .contact-info a{
  white-space: nowrap !important;     /* Link-Text nicht umbrechen */
}

/* ===== END: custom.headerinline.v1.css ===== */

/* ===== BEGIN: custom.navcenter.v1.css ===== */

/* === custom.navcenter.v1.css — Navigation mittig (ohne Layout-Änderung) === */
.main-nav .nav-links{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 1rem !important;
  flex-wrap: wrap;
  margin: 0 auto;
  text-align: center;
}
.main-nav .nav-links a{
  display: inline-flex;
  align-items: center;
  padding: .5rem .8rem;
  border-radius: 10px;
}

/* ===== END: custom.navcenter.v1.css ===== */

/* ===== BEGIN: custom.navcolor.v2.css ===== */

/* === custom.navcolor.v2.css — Navigation wie Header-Hintergrund (ohne Layout-Änderung) === */
.site-header{ background: inherit; } /* belässt deine Header-Farbe aus der Basis-CSS */

.main-nav,
.nav-wrap{
  background: transparent !important; /* zeigt den Header-Background durch */
}

/* Optional: feine Kante beibehalten (aus style.css), ansonsten auskommentieren */
.nav-wrap{
  border-top: 1px solid var(--line, #e5e7eb);
}

/* Sicherstellen, dass Links/hover keine Flächenfarbe setzen */
.nav-links a{ background: transparent; }
.nav-links a:hover{ background: rgba(255,255,255,.06); } /* subtil auf hellem Header kaum sichtbar */

/* ===== END: custom.navcolor.v2.css ===== */

/* ===== BEGIN: custom.bgrelax.v3.css ===== */

/* =============================================================
   custom.bgrelax.v3.css — Moderner, "lockerer" Hintergrund
   - Pastell-Blue/Mint/Peach Glows + ganz leichtes Muster
   - KEINE Layout-/Anordnungsänderung
   ============================================================= */

html, body{ height:100%; }

body{
  /* weiche Farbflecken + sehr helle Basis */
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(152, 231, 220, .26), transparent 60%),
    radial-gradient(1000px 520px at 90% 8%, rgba(255, 182, 171, .22), transparent 60%),
    radial-gradient(900px 520px at 50% 100%, rgba(132, 171, 255, .18), transparent 55%),
    /* dezentes diagonales Muster */
    repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0, rgba(255,255,255,.12) 2px, transparent 2px, transparent 18px),
    /* sehr helle Grundfläche */
    linear-gradient(180deg, #f9fcff 0%, #f6f9ff 50%, #f7fff9 100%)
    !important;
  background-blend-mode: normal, normal, normal, soft-light, normal;
  color:#1f2733;
}

/* Inhalte stehen über dem (rein dekorativen) Hintergrund */
header, section, main, footer{ position: relative; z-index:1; }

/* Optional: Hero-Schrift sicher lesbar lassen (keine Größenänderung) */
.welcome-hero{ color:#0b1b33; }

/* ===== END: custom.bgrelax.v3.css ===== */

/* ===== BEGIN: custom.bgframe.v2.css ===== */

/* =============================================================
   custom.bgframe.v2.css — Hellerer Hintergrund mit leichtem Muster,
   weißer Navigationsleiste, Rahmen + Schatten (nur Optik, kein Layout)
   ============================================================= */

/* BODY: leichter, moderner Blue-Gradient + dezentes Muster */
html, body{ height:100%; }
body{
  background:
    /* feines Diagonalmuster (oben) */
    repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 2px, transparent 2px, transparent 14px),
    /* zweite Ebene für Tiefe */
    repeating-linear-gradient(-45deg, rgba(0,0,0,.03) 0, rgba(0,0,0,.03) 1px, transparent 1px, transparent 14px),
    /* Glow-Flecken */
    radial-gradient(900px 420px at 12% -10%, rgba(124,230,203,.12), transparent 60%),
    radial-gradient(1000px 520px at 88% -14%, rgba(31,139,209,.14), transparent 60%),
    /* Grund-Gradient (heller als zuvor) */
    linear-gradient(180deg, #123a5e 0%, #1a4f79 55%, #143d64 100%)
    !important;
  color:#eef3f8 !important;
}

/* Seitenrahmen mit weicherem Schatten */
body::after{
  content:"";
  position: fixed;
  inset: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow:
    0 18px 60px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 0 50px 140px rgba(255,255,255,.08);
  pointer-events: none;
  z-index: 0;
}

/* Inhalte vor den Rahmen heben (ohne Layoutänderung) */
header, section, main, footer{ position: relative; z-index: 1; }

/* NAVIGATION: weißer Hintergrund (übersteuert frühere Transparenz) */
.nav-wrap, .main-nav{
  background:#ffffff !important;
  border-top:1px solid rgba(0,0,0,.06) !important;
  backdrop-filter:none !important;
}
.nav-links a:hover{ background:#eef6ff !important; }

/* Karten/Boxen: grauer Verlauf + 3D-Kontur & Schatten (falls noch nicht aktiv) */
.card, .perk, .ka-card, .zb-card{
  background: linear-gradient(180deg, #e9ecf0 0%, #e1e5ea 100%) !important;
  border: 1px solid #b2bbc6 !important;
  border-radius: 16px;
  position: relative;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.60),
    0 14px 30px rgba(0,0,0,.20),
    0 20px 46px rgba(13,92,171,.22) !important;
  transition: box-shadow .25s ease, transform .25s ease, filter .25s ease;
}
.card::before, .perk::before, .ka-card::before, .zb-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius: 16px;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px #98a3b0;
}
.card::after, .perk::after, .ka-card::after, .zb-card::after{
  content:"";
  position:absolute; left:1px; right:1px; top:1px; height:18px;
  border-top-left-radius: 15px; border-top-right-radius: 15px;
  background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0));
  pointer-events:none;
}
.card:hover, .perk:hover, .ka-card:hover, .zb-card:hover{
  transform: translateY(-2px);
  filter: saturate(104%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.70),
    0 18px 44px rgba(0,0,0,.22),
    0 22px 52px rgba(13,92,171,.24) !important;
}

/* ===== END: custom.bgframe.v2.css ===== */

/* ===== BEGIN: custom.bgframe.v1.css ===== */

/* =============================================================
   custom.bgframe.v1.css — Anderer Hintergrund mit Schatten & Rahmen
   (Nur Optik, KEINE Layout-/Anordnungsänderungen)
   ============================================================= */

/* Vollflächiger, moderner Hintergrund */
html, body{ height:100%; }
body{
  background:
    radial-gradient(1000px 520px at 10% -12%, rgba(124,230,203,.14), transparent 60%),
    radial-gradient(900px 500px at 90% -18%, rgba(31,139,209,.16), transparent 60%),
    linear-gradient(180deg, #0b2134 0%, #123454 55%, #0b2743 100%) !important;
  color:#e8eef6;
}

/* Fester Rahmen mit weichem Außenschatten und leichter Innenkante */
body::after{
  content:"";
  position: fixed;
  inset: 12px;                      /* Abstand vom Fensterrand: sichtbarer Rahmen */
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.28);          /* Rahmenlinie */
  box-shadow:
    0 22px 70px rgba(0,0,0,.28),                    /* Außenschatten (Page Drop Shadow) */
    inset 0 0 0 1px rgba(255,255,255,.22),          /* feine Innenkante */
    inset 0 40px 120px rgba(255,255,255,.06);       /* leichtes Oberlicht */
  pointer-events: none;
  z-index: 0;
}

/* Sicherstellen, dass Inhalte vor dem Rahmen liegen (ohne Layout zu ändern) */
header, section, main, footer{
  position: relative;
  z-index: 1;
}

/* ===== END: custom.bgframe.v1.css ===== */



/* =============================================================
   Project Overrides (migrated from inline <style> in index.html)
   ============================================================= */

/* Trennlinie sichtbar & zentriert */
.section-sep {
  width: 60%;
  margin: 40px auto;
  border-top: 2px solid #ccc;
}

/* Header-Kontakt nebeneinander */
.header-info {
  display: flex;
  gap: 20px;
  align-items: center;
}
.header-info p { margin: 0; }

/* Navigation mittig */
.main-nav .nav-links {
  display: flex;
  justify-content: center;
  gap: 30px;
}



/* =============================================================
   v3 Overrides (alignment & separator visibility)
   ============================================================= */

/* NAV: ensure full-width row and center items */
.main-nav .nav-links {
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 30px !important;
  text-align: center !important;
}

/* HEADER: phone & email in one line, never wrapping */
.header-top .header-info,
.header-top .contact-info {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  flex-wrap: nowrap !important;
}
.header-top .header-info p,
.header-top .contact-info p,
.header-top .header-info a,
.header-top .contact-info a {
  margin: 0 !important;
  white-space: nowrap !important;
}

/* SEPARATOR before footer: visible, centered */
.section-sep {
  display: block !important;
  width: 60% !important;
  margin: 40px auto !important;
  height: 0 !important;
  background: none !important;
  border-top: 2px solid #cdd5df !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}