/* 
 * Main CSS file for the WordPress theme
 * This file contains styles for layout and design
 */

/* Reset some default styles */
body, h1, h2, h3, h4, h5, h6, p {
    margin: 0;
    padding: 0;
}

/* Basic body styles */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
}

/* Header styles */
header {
    background: #35424a;
    color: #ffffff;
    padding: 20px 0;
    text-align: center;
}

/* Navigation styles */
nav {
    margin: 20px 0;
}

nav ul {
    list-style: none;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

/* Main content styles */
main {
    padding: 20px;
}

/* Footer styles */
footer {
    background: #35424a;
    color: #ffffff;
    text-align: center;
    padding: 10px 0;
    position: relative;
    bottom: 0;
    width: 100%;
}

:root{
  --bg:#f7f9fc;          /* Seitenhintergrund */
  --surface:#ffffff;      /* Karten/Container */
  --text:#0f172a;         /* Haupttext (dunkel) */
  --muted:#516174;        /* Sekundärtext */
  --border:#e5eaf1;       /* Linien */
  --brand:#f59e0b;        /* Orange (Hauptakzent) */
  --brand-2:#ffd166;      /* Hellgelb Verlauf */
  --accent-1:#ef4444; --accent-2:#f59e0b; --accent-3:#10b981; --accent-4:#22d3ee; --accent-5:#6366f1; /* Rainbow */
  --radius:14px; --max:1200px;
}

/* Regenbogenverlauf */
:root{
  --rainbow: linear-gradient(90deg,#6a59d1 0%, #2fb7f3 16%, #5cc43a 32%, #ffd400 48%, #ff8a00 64%, #e11d48 80%, #a855f7 100%);
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,Segoe UI,Roboto,Arial}
a{color:var(--text);text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}

/* Topbar (hell) */
.topbar{background:#fff;border-bottom:1px solid var(--border);font-size:14px}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:12px;height:40px}
.topbar a{color:var(--muted)}
.topbar .lang-btn{background:#fff;border:1px solid #d7dee8;color:#506173;padding:4px 8px;border-radius:8px;cursor:pointer}
.topbar .lang-btn:hover{border-color:var(--brand);color:#1f2937}

/* Header (hell, sticky) */
.site-header{position:sticky;top:0;background:#ffffff;z-index:10;border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo{display:flex;flex-direction:column}
.logo-title{font-size:22px;font-weight:700;letter-spacing:.5px}
.logo-sub{font-size:12px;color:#6b7a8b}
.nav-toggle{display:none;background:#fff;border:1px solid #d7dee8;color:#334155;border-radius:10px;padding:8px 10px}
.nav-list{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.nav a{padding:10px 12px;border-radius:10px;color:#334155}
.nav a:hover{background:#f3f6fb}
.nav a.accent{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#1a1a1a;border:1px solid #f7c96a}
.rainbow-bar{height:6px;background:linear-gradient(90deg,var(--accent-1),var(--accent-2),var(--accent-3),var(--accent-4),var(--accent-5))}

/* Hero (hell mit warmer Tönung) */
.hero{
  background:
    linear-gradient(180deg,#fff6e580 0%,#ffffff 60%), /* sanfter orange Schleier */
    url('../img/hero.jpg') center/cover no-repeat;
  padding:84px 0 56px;border-bottom:1px solid var(--border)
}
.hero-inner{max-width:900px}
.hero h1{font-size:40px;line-height:1.15;margin:0 0 12px}
.lead{color:#475569;font-size:18px;margin:0 0 24px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn, .btn-primary{
  position: relative;
  isolation: isolate;                  /* stellt sicher, dass ::before hinter dem Inhalt bleibt */
  display:inline-block;
  padding:12px 18px;
  border-radius:12px;
  border:2px solid transparent;
  background:
    linear-gradient(#ffffff,#ffffff) padding-box, /* Innen: weiß (schattig) */
    var(--rainbow) border-box;                    /* Außen: Verlauf als Border */
  color:#0f172a;
  box-shadow:0 2px 8px rgba(31,41,55,.08);
  transition: color .2s ease, transform .05s ease, box-shadow .2s ease;
}
.btn::before, .btn-primary::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background:var(--rainbow);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s ease;
  z-index:-1;                                /* hinter dem Button-Inhalt */
}
.btn:hover::before,
.btn:focus-visible::before,
.btn.is-active::before,
.btn[aria-pressed="true"]::before,
.btn-primary:hover::before,
.btn-primary:focus-visible::before,
.btn-primary.is-active::before,
.btn-primary[aria-pressed="true"]::before{
  transform:scaleX(1);
}

.btn:hover, .btn:focus-visible,
.btn-primary:hover, .btn-primary:focus-visible,
.btn.is-active, .btn[aria-pressed="true"],
.btn-primary.is-active, .btn-primary[aria-pressed="true"]{
  color:#ffffff;
  box-shadow:0 6px 18px rgba(245,158,11,.25);
}

/* Kleine Rainbow‑Unterstreichung für Buttons (statt Vollfüllung) */
:root{ --btn-underline-h: 4px; }

.btn, .btn-primary{
  position:relative; overflow:visible; /* für die Unterstreichung */
  /* Hintergrund/Border bleiben wie oben definiert */
}

/* animierter, schmaler Balken unten im Button */
.btn::after, .btn-primary::after{
  content:"";
  position:absolute; left:12px; right:12px; bottom:8px;
  height:var(--btn-underline-h);
  border-radius:2px;
  background:var(--rainbow);
  transform:scaleX(0); transform-origin:center;
  transition:transform .25s ease;
  pointer-events:none;
}

/* Aktivierung auf Hover/Focus/Pressed */
.btn:hover::after, .btn:focus-visible::after, .btn.is-active::after, .btn[aria-pressed="true"]::after,
.btn-primary:hover::after, .btn-primary:focus-visible::after, .btn-primary.is-active::after, .btn-primary[aria-pressed="true"]::after{
  transform:scaleX(1);
}

/* Badges (hell) */
.badges{padding:28px 0;border-bottom:1px solid var(--border);background:#ffffff}
.badges-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.badge{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px}
.badge-icon{font-size:22px}
.badge-text{color:#374151}

/* Sections */
.section{padding:72px 0;border-bottom:1px solid var(--border);background:#ffffff}
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.about-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:8px}
.about-photo{height:260px;border-radius:12px;background:
  linear-gradient(135deg,#f6f9ff,#ffffff) padding-box,
  linear-gradient(90deg,var(--brand),var(--brand-2)) border-box;border:2px solid transparent}

/* Services */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.service{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px}
.svc-icon{font-size:26px;margin-bottom:6px}

/* Referenzen */
.refs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ref{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.ref .ph{height:160px;background:
  repeating-linear-gradient(135deg,#eef3fa,#eef3fa 12px,#ffffff 12px,#ffffff 24px)}
.ref figcaption{padding:10px;color:#475569}

/* Testimonials – gold/orange Sektion wie im Screenshot */
.testimonials.section{
  background:linear-gradient(180deg,var(--brand-2),var(--brand));
  border:none;color:#1f2937
}
.testi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
blockquote{margin:0;background:#ffffff;border:1px solid #f7c96a;border-radius:16px;padding:18px;color:#334155;box-shadow:0 4px 14px rgba(0,0,0,.06)}

/* CTA big in Orange */
.cta-big{padding:64px 0;background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#1a1a1a;text-align:center;border-top:1px solid #f6cf82}
.cta-inner h2{margin:0 0 12px}

/* Kontakt */
.contact-list{list-style:none;padding:0;margin:0 0 18px;color:#475569}
.map-ph{height:180px;border-radius:12px;background:
  linear-gradient(135deg,#f6f9ff,#ffffff) padding-box,
  linear-gradient(90deg,var(--brand),var(--brand-2)) border-box;border:2px solid transparent}

/* Footer (leicht grau) */
.site-footer{padding:28px 0;background:#f3f6fb;border-top:1px solid var(--border)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:18px}
.footer-copy{color:#64748b}

/* Floating CTA */
.floating-cta{
  position:fixed;bottom:20px;right:20px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  color:#1a1a1a;padding:12px 16px;border-radius:999px;font-weight:700;border:1px solid #f7c96a;box-shadow:0 8px 20px rgba(245,158,11,.25)
}

/* Forms */
.contact-form{display:grid;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px}
label span{display:block;margin-bottom:6px;color:#475569}
input,textarea{width:100%;padding:10px;border-radius:10px;border:1px solid #d7dee8;background:#ffffff;color:#0f172a}
input:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(245,158,11,.2)}

/* Responsive */
@media (max-width: 960px){
  .two-col{grid-template-columns:1fr}
  .services-grid,.refs-grid,.testi-grid{grid-template-columns:1fr 1fr}
  .badges-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .nav-toggle{display:inline-block}
  .nav-list{display:none;position:absolute;top:76px;right:20px;background:#ffffff;border:1px solid var(--border);border-radius:12px;padding:10px;flex-direction:column}
  .nav-list.show{display:flex}
  .services-grid,.refs-grid,.testi-grid,.badges-grid{grid-template-columns:1fr}
  .hero h1{font-size:30px}
}

/* Header wie altes Design: Hero mit Bild + Logo, Menü darunter */
.site-header.header-hero{
  position: static;   /* überschreibt das allgemeine .site-header = sticky */
  top: auto;
  z-index: 1;
  background:
    linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,.35)),
    url('../img/hero.jpg') center/cover no-repeat;
  border:none;
}
.site-header.header-hero .header-inner{
  height:clamp(200px, 30vw, 320px); /* mehr Fläche fürs Logo */
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:20px;
}
.site-header.header-hero .logo{ color:#fff }
.site-header.header-hero .logo-title{
  font-weight:800; text-transform:uppercase;
  letter-spacing:.16em;
  font-size:clamp(32px,7vw,84px);
  text-shadow:0 2px 12px rgba(0,0,0,.45);
}
.site-header.header-hero .logo-line{
  display:block; height:6px; width:min(82vw,460px);
  margin:12px auto 8px; border-radius:3px;
  background:var(--rainbow);
}
.site-header.header-hero .logo-sub{
  letter-spacing:.35em; font-size:clamp(12px,2vw,20px);
  color:#fff; opacity:.95; text-shadow:0 2px 10px rgba(0,0,0,.35);
}
.site-header.header-hero .logo-image .custom-logo{
  height: clamp(48px, 9vw, 140px);
  width: auto;
  display:block;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.35));
}
/* Textvariante bleibt wie im Mockup */
.site-header.header-hero .logo-text{ color:#fff; }

/* Menüleiste unter dem Header */
.main-nav{
  position: sticky;
  top: 0;
  z-index: 1000;
  background:#fff;
  border-bottom:1px solid var(--border);
  box-shadow:0 6px 24px rgba(0,0,0,.06);
}
.main-nav .nav-list{
  display:flex; justify-content:center; align-items:center;
  gap:22px; list-style:none; margin:0; padding:12px 0;
}
.main-nav .nav-list a{
  color:#334155; padding:10px 12px; border-radius:10px;
  transition:background .2s ease, color .2s ease;
}

/* Rainbow-Underline für Navigation */
.main-nav .nav-list a{
  position:relative;
}
.main-nav .nav-list a::after{
  content:""; position:absolute; left:10px; right:10px; bottom:6px; height:3px;
  background:var(--rainbow); border-radius:2px; transform:scaleX(0); transform-origin:center;
  transition:transform .25s ease;
}
.main-nav .nav-list a:hover::after,
.main-nav .nav-list a[aria-current="page"]::after,
.main-nav .nav-list .current-menu-item > a::after{
  transform:scaleX(1);
}

/* Mobile Menü */
.nav-toggle{ display:none; }
@media (max-width: 960px){
  .nav-toggle{
    display:inline-block; margin:10px 0; background:#fff;
    border:1px solid #d7dee8; color:#334155; border-radius:10px; padding:8px 10px;
  }
  .main-nav .nav-list{ display:none; flex-direction:column; padding:8px 0 14px; }
  .main-nav .nav-list.show{ display:flex; }
}
@media (max-width: 991.98px){
  .nav-list{ display:none; }
  .nav-list.show{ display:flex; flex-direction:column; }
}

/* alte Regenbogen-Leiste im Header ausblenden, falls vorhanden */
.rainbow-bar{ display:none !important; }

/* Rainbow-Balken erscheint erst nach Scroll (Klasse .rainbow-on) */
.main-nav{ position: sticky; top:0; z-index:1000; } /* sicherstellen */
.main-nav::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:0; opacity:0;
  background:var(--rainbow);
  transition:height .25s ease, opacity .25s ease;
}
.main-nav.rainbow-on{ border-bottom-color:transparent; }
.main-nav.rainbow-on::after{ height:6px; opacity:1; }

@media (max-width: 640px){
  /* optional: Linie auf sehr kleinen Screens ausblenden */
  .main-nav.rainbow-on::after{ height:4px; }
}

/* bisherige Nav-Linie am Container deaktivieren (falls vorhanden) */
.main-nav::after{ height:0 !important; opacity:0 !important; }

/* Nav-Liste in Inhaltsbreite zentrieren, Platz für Linie unten */
.main-nav .container{ display:flex; justify-content:center; }
.main-nav .nav-list{
  display:inline-flex;          /* schrumpft auf Inhaltsbreite */
  margin:0 auto;
  position:relative;            /* Referenz für die Linie */
  padding-bottom:16px;          /* Abstand zwischen Text und Linie */
}

/* — Navigation: dickerer Rainbow-Strich + No‑Wrap + sanftes Horizontal‑Scrollen — */
:root{
  --nav-rainbow-h: 10px;             /* Höhe der durchgehenden Linie */
}

/* Container darf bei Bedarf horizontal scrollen (nur Desktop/Tablet) */
.main-nav .container{
  display:flex; justify-content:center;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* dezentes Edge‑Fading */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.main-nav .container::-webkit-scrollbar{ display:none; }

/* Liste bleibt einzeilig, skaliert Abstand/Schriftgröße dynamisch */
.main-nav .nav-list{
  display:inline-flex;
  flex-wrap:nowrap;                  /* kein Zeilenumbruch */
  gap:clamp(12px, 2vw, 28px);
  padding-bottom:calc(var(--nav-rainbow-h) + 10px);
  position:relative;
}
.main-nav .nav-list a{
  white-space:nowrap;
  font-size:clamp(14px, 1.1vw, 18px);
  line-height:1;
  padding:12px 10px;
}

/* Durchgehende Rainbow-Linie direkt unter der Schrift */
.main-nav .nav-list::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:0; opacity:0; border-radius:4px;
  background:var(--rainbow);
  transition:height .25s ease, opacity .25s ease;
}
.main-nav.rainbow-on .nav-list::after{
  height:var(--nav-rainbow-h);       /* jetzt höher */
  opacity:1;
}

/* Mobile: vertikales Overlay-Menü, ohne Scroll-Fading/Linie */
@media (max-width: 960px){
  .main-nav .container{
    overflow:visible;
    -webkit-mask-image:none; mask-image:none;
  }
  .main-nav .nav-list{
    display:none; flex-direction:column; gap:10px;
    position:fixed; top:60px; left:16px; right:16px;
    max-height:calc(100vh - 80px); overflow:auto;
    padding:12px; border:1px solid var(--border); border-radius:12px; background:#fff;
  }
  .main-nav .nav-list.show{ display:flex; }
  .main-nav .nav-list::after{ display:none; }
}

/* FIX: keine ausgeblendeten Ränder links/rechts */
.main-nav .container{
  -webkit-mask-image:none !important;
  mask-image:none !important;
}

/* optional: Linie noch höher */
:root{
  --nav-rainbow-h: 12px;
}

/* Nav-Container: standardmäßig kein Horizontal-Scrollen, nichts maskieren */
.main-nav .container{
  display:flex; justify-content:center;
  overflow:visible !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
}
/* Nur wenn nötig (per JS gesetzt) darf horizontal gescrollt werden */
.main-nav .container.scroll-x{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.main-nav .container.scroll-x::-webkit-scrollbar{ display:none; }

/* Linie unter dem Menü entfernen + Abstand korrigieren */
.main-nav::after{ content:none !important; display:none !important; }
.main-nav .nav-list::after{ content:none !important; display:none !important; height:0 !important; opacity:0 !important; }
.main-nav.rainbow-on .nav-list::after{ content:none !important; display:none !important; height:0 !important; opacity:0 !important; }
.main-nav .nav-list{ padding-bottom:12px !important; }
/* Falls zuvor deaktiviert: keine per-Link-Rainbow-Unterstreichung */
.main-nav .nav-list a::after{ display:none !important; }

/* Kleine Hover‑Unterstreichung je Link wieder aktivieren */
.main-nav .nav-list a{ position:relative; }
.main-nav .nav-list a::after{
  content:""; display:block !important;          /* überschreibt das frühere display:none */
  position:absolute; left:10px; right:10px; bottom:6px;
  height:3px; border-radius:2px;
  background:var(--rainbow);
  transform:scaleX(0); transform-origin:center;
  transition:transform .25s ease;
}
.main-nav .nav-list a:hover::after,
.main-nav .nav-list .current-menu-item > a::after,
.main-nav .nav-list a[aria-current="page"]::after{
  transform:scaleX(1);
}

/* Buttons: ohne Regenbogen-Umrandung */
.btn, .btn-primary{
  background:#ffffff !important;               /* kein Verlauf mehr */
  border:1px solid #d7dee8 !important;
  color:#0f172a !important;
}
.btn::before, .btn-primary::before{            /* Gradient-Fill deaktivieren */
  content:none !important; display:none !important;
}

/* Hover/Focus: dezent bzw. primärfarbig */
.btn:hover, .btn:focus-visible{
  border-color: var(--brand) !important;
  box-shadow:0 6px 18px rgba(15,23,42,.08) !important;
}

.btn-primary{
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color:#1a1a1a !important;
}
.btn-primary:hover, .btn-primary:focus-visible{
  background:#e09109 !important;              /* etwas dunkler */
  border-color:#e09109 !important;
  color:#1a1a1a !important;
}

/* Unterstreichung nur auf Hover/Focus – NICHT im aktiven Zustand */
.btn:hover::after, .btn:focus-visible::after,
.btn-primary:hover::after, .btn-primary:focus-visible::after{
  transform: scaleX(1);
}

/* Aktive Zustände explizit ohne Unterstreichung (überschreibt frühere Regeln) */
.btn.is-active::after,
.btn[aria-pressed="true"]::after,
.btn[aria-current="page"]::after,
.btn:active::after,
.btn-primary.is-active::after,
.btn-primary[aria-pressed="true"]::after,
.btn-primary[aria-current="page"]::after,
.btn-primary:active::after{
  transform: scaleX(0) !important;
}

/* Unterstreichung nur bei Hover/Focus, wenn NICHT aktiv */
.btn:not(.is-active):not([aria-pressed="true"]):not([aria-current="page"]):hover::after,
.btn:not(.is-active):not([aria-pressed="true"]):not([aria-current="page"]):focus-visible::after,
.btn-primary:not(.is-active):not([aria-pressed="true"]):not([aria-current="page"]):hover::after,
.btn-primary:not(.is-active):not([aria-pressed="true"]):not([aria-current="page"]):focus-visible::after{
  transform: scaleX(1) !important;
}

/* Dropdown-Menü */
.main-nav .nav-list{ display:flex; gap:28px; align-items:center; }
.main-nav .nav-list li{ position:relative; }
.main-nav .nav-list a{ display:inline-block; padding:14px 6px; }

/* Caret bei Menüpunkten mit Kindern */
.main-nav .nav-list .menu-item-has-children > a::after{
  content:"▾"; font-size:11px; margin-left:6px; transition:transform .2s ease;
}

/* Submenu (Desktop) – keine Lücke zwischen Parent und Dropdown */
.main-nav .nav-list .sub-menu{
  position:absolute; left:0; top:100%;              /* statt calc(100% + 8px) */
  min-width:220px; background:#fff; border:1px solid #e6e9ef;
  box-shadow:0 10px 30px rgba(15,23,42,.12);
  border-radius:10px; padding:8px 0; z-index:50;

  /* nicht mit display:none arbeiten, sonst “flackert” Hover beim Übergang */
  display:block;                                     /* immer block */
  opacity:0; visibility:hidden; pointer-events:none; /* unsichtbar bis Hover */
  transform:translateY(8px); transition:all .18s ease;
}

/* Links im Dropdown */
.main-nav .nav-list .sub-menu li a{
  display:block; padding:10px 14px; white-space:nowrap;
}
.main-nav .nav-list .sub-menu li a:hover{ background:#f8fafc; }

/* Desktop: Hover/Focus öffnet */
@media (min-width: 992px){
  .main-nav .nav-list li:hover > .sub-menu,
  .main-nav .nav-list li:focus-within > .sub-menu{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
  }
  .main-nav .nav-list li:hover > a::after{ transform:rotate(180deg); }
}

/* Mobile: vertikal + Akkordeon */
@media (max-width: 991.98px){
  .nav-list{ display:none; }
  .nav-list.show{ display:flex; flex-direction:column; }
}
@media (max-width: 960px){
  .main-nav .nav-list{ flex-direction:column; align-items:stretch; gap:0; }
  .main-nav .nav-list a{ padding:14px 10px; }
  .main-nav .nav-list .sub-menu{
    position:static; box-shadow:none; border:none; padding:0 0 6px 10px;

    /* Auf Mobile steuern wir die Sichtbarkeit weiterhin via .open */
    display:none; opacity:1; visibility:visible; pointer-events:auto; transform:none;
  }
  .main-nav .nav-list .menu-item.open > .sub-menu{ display:block; }
  .main-nav .nav-list .menu-item.open > a::after{ transform:rotate(180deg); }
}

/* Sicherheit: Dropdown darf nicht abgeschnitten werden */
.main-nav .container{ overflow:visible; }

/* Einheitlicher Unterseiten-Kopf */
.page-hero{
  position:relative;
  background:#8f9396 center/cover no-repeat;
  min-height: clamp(180px, 28vw, 340px);
  display:flex; align-items:flex-end;
  margin:0 0 24px;
}
.page-hero__overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.45) 100%);
}
.page-hero .container{ position:relative; z-index:1; padding:40px 16px; }
.page-hero__title{
  color:#fff; margin:0;
  font-size: clamp(28px, 4.2vw, 48px);
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

/* Kompakter Page‑Hero in Startseiten‑Orange */
.page-hero{
  min-height: clamp(50px, 7vw, 110px);   /* deutlich kleiner */
  display:flex; align-items:center;
  margin:0 0 12px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2)); /* gleiches Orange wie Startseite */
  border-bottom:1px solid #f6cf82;       /* feine Linie wie CTA/Startseite */
}
.page-hero__overlay{ display:none; }     /* dunkles Bild‑Overlay aus */
.page-hero .container{ padding:10px 16px; }
.page-hero__title{
  color:#fff;
  margin:0;
  font-weight:600;
  font-size: clamp(16px, 1.8vw, 22px);   /* kleiner Typo wie in deinem Beispiel */
  text-shadow:none;
}

/* Einheitliche Inhaltsbreite */
.container{ max-width:1100px; margin:0 auto; padding:0 16px; }
.section{ padding:0 0 40px; }

/* Standardtypografie in Artikeln/Seiten */
.content-page, .content-single{ line-height:1.7; }
.content-page img, .content-single img{ max-width:100%; height:auto; }
.archive-item{ padding:18px 0; border-bottom:1px solid #e7e9ee; }
.archive-item h2{ margin:0 0 8px; font-size:22px; }