/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
:root{
  /* Light first */
  --bg:#f4f7fb; --bg-2:#eef3f9; --text:#0f172a; --muted:#55617a;
  --card:#ffffff; --glass: rgba(255,255,255,.70);
  --accent:#0fb9c9; --accent-2:#69f0d0;
  --radius:20px; --shadow:0 14px 36px rgba(15,23,42,.08);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0f14; --bg-2:#0f141c; --text:#eaf1fb; --muted:#a8b3c7;
    --card:#101624; --glass: rgba(16,22,36,.55);
    --shadow:0 18px 40px rgba(0,0,0,.35);
  }
}
body{
  margin:0; font:16px/1.65 system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,var(--bg),var(--bg-2) 60%); color:var(--text);
}
img{max-width:100%; display:block}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.15; margin:0 0 .6rem}
h1{font-size:clamp(2rem,3vw + 1rem,3.2rem)}
h2{font-size:clamp(1.6rem,1.6vw + 1rem,2.2rem)}
h3{font-size:1.2rem}
main{padding-bottom:120px} /* Platz für fixen Footer */

.container{max-width:1100px; margin:0 auto; padding:0 1rem}
.center{text-align:center}

/* ---------- Header ---------- */
.site-header{
  position:sticky; inset:0 0 auto 0; z-index:80;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.2rem; background:rgba(255,255,255,.6); backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(8,12,24,.08);
}
.site-header.large{padding:1.1rem 1.4rem}
.brand{display:flex; align-items:center; gap:.7rem; font-weight:800; color:var(--text)}
.brand img{width:clamp(54px, 5vw + 30px, 84px); height:auto; object-fit:contain} /* größer */
.main-nav ul{list-style:none; margin:0; padding:0; display:flex; gap:1rem; align-items:center}
.main-nav a{color:var(--text); padding:.5rem .85rem; border-radius:12px}
.main-nav a.active{ background: rgba(15,23,42,.06) }
.nav-toggle{display:none; background:none; border:0; cursor:pointer}
.nav-toggle span{display:block; width:26px; height:2px; background:var(--text); margin:5px 0}

/* Dropdown (hover + delay) – identisch auf allen Seiten */
.has-dropdown{position:relative}
.dropdown-btn{
  background:transparent; border:1px solid rgba(15,23,42,.18);
  color:var(--text); padding:.55rem .95rem; border-radius:12px; cursor:pointer;
}
.dropdown.simple{
  position:absolute; top:calc(100% + .6rem); right:0; min-width:220px;
  background:var(--card); border-radius:14px; box-shadow:var(--shadow);
  padding:.5rem; display:none; flex-direction:column;
}
.dropdown.simple a{display:block; padding:.6rem .7rem; border-radius:10px; color:var(--text)}
.dropdown.simple a:hover{background:rgba(15,23,42,.06); text-decoration:none}
.has-dropdown:hover .dropdown.simple,
.has-dropdown.hover-open .dropdown.simple{display:flex}

@media (max-width: 900px){
  .nav-toggle{display:block}
  .main-nav{position:fixed; inset:70px 0 auto 0; transform:translateY(-120%); background:rgba(255,255,255,.92); backdrop-filter: blur(10px); transition:.25s}
  .main-nav.open{transform:translateY(0)}
  .main-nav ul{flex-direction:column; padding:1rem}
  .dropdown.simple{position:static; min-width:auto; display:flex; box-shadow:none; background:transparent; padding:0}
}

/* ---------- Hero ---------- */
.hero.full{position:relative; min-height:82vh; overflow:hidden; display:grid; place-items:center}
.hero-bg{position:absolute; inset:0}
.hero-bg img{width:100%; height:100%; object-fit:cover; transform:scale(1.03); transition:transform .6s ease}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.2), rgba(0,0,0,.25))}
.glass{background: var(--glass); backdrop-filter: blur(14px); border:1px solid rgba(15,23,42,.12); border-radius: var(--radius)}
.hero-card{padding:1.2rem 1.3rem; box-shadow:var(--shadow)}
.hero-bullets{display:flex; flex-wrap:wrap; gap:.6rem 1rem; padding:0; margin:.8rem 0 0; list-style:none; color:var(--muted)}
.accent{color:var(--accent); text-shadow:0 8px 24px rgba(0,0,0,.16)}
.hero-cta{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:.6rem}
.btn{display:inline-block; background: linear-gradient(90deg,var(--accent),var(--accent-2)); color:#05363e; font-weight:800; padding:.75rem 1.05rem; border-radius:999px; box-shadow:var(--shadow); border:0}
.btn:hover{filter:brightness(1.06)}
.btn-outline{background:transparent; color:var(--text); border:1px solid rgba(15,23,42,.25)}

/* ---------- Value Stripe (Counters) ---------- */
.value-stripe{padding:1.8rem 0}
.stripe-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
.stripe-item{background:var(--card); border-radius:16px; padding:1rem; text-align:center; box-shadow:var(--shadow)}
.stripe-item strong{font-size:1.8rem; display:block}
.stripe-item span{color:var(--muted)}
@media (max-width:900px){ .stripe-grid{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .stripe-grid{grid-template-columns:1fr} }

/* ---------- Carousel ---------- */
.carousel-section{padding:2.2rem 0}
.carousel{position:relative; overflow:hidden; border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow)}
.slides{display:flex; transition: transform .6s cubic-bezier(.22,.61,.36,1)}
.slide{min-width:100%; position:relative}
.slide-link{display:block; position:relative}
.slide img{width:100%; height:56vh; object-fit:cover; display:block; filter:saturate(1.05)}
/* bessere Lesbarkeit + harmonische Farben */
.slide::after{
  content:""; position:absolute; inset:auto 0 0 0; height:45%;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 100%);
}
.slide-caption{position:absolute; left:1rem; bottom:1rem; padding:.9rem 1rem; max-width:520px; color:var(--text)}
.slide-caption h3{margin:.1rem 0 .25rem}
.slide-caption p{opacity:.9}
.ctrl{position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.25); border:0; color:#fff; font-size:1.8rem; width:44px; height:44px; border-radius:50%; cursor:pointer}
.ctrl:hover{background:rgba(0,0,0,.4)}
.ctrl.prev{left:.6rem} .ctrl.next{right:.6rem}
.dots{position:absolute; display:flex; gap:.35rem; left:50%; transform:translateX(-50%); bottom:.6rem}
.dots button{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.65); border:0; cursor:pointer}
.dots button.active{background:#fff}

/* ---------- Story ---------- */
.story{padding:2.2rem 0}
.story-grid{display:grid; grid-template-columns:1.4fr .9fr; gap:1rem; align-items:start}
.note{padding:1rem 1.2rem}
@media (max-width:900px){ .story-grid{grid-template-columns:1fr} }

/* ---------- Reviews ---------- */
.reviews{padding:2rem 0}
.reviews .container{max-width:1000px}
.review{
  position:relative; background:var(--card); padding:1.2rem 1.3rem; border-radius:18px; box-shadow:var(--shadow); margin:1rem 0;
  border:1px solid rgba(15,23,42,.08);
}
.review::before{content:"“"; position:absolute; left:12px; top:-22px; font-size:3.2rem; opacity:.12}
.review blockquote{margin:.2rem 0 .4rem}
.review .author{color:var(--muted); font-weight:600}
.stars{color:#ffb703; letter-spacing:.15rem}

/* ---------- Page Hero & Blocks ---------- */
.page-hero{position:relative; overflow:hidden; border-bottom:1px solid rgba(15,23,42,.08)}
.page-hero .container{position:relative; z-index:2}
.page-hero.simple{padding:2.2rem 0 1rem}
.page-hero picture img{width:100%; max-height:360px; object-fit:cover; display:block; filter:saturate(1.05)}
.prose{padding:2rem 0}
.prose .container{max-width:950px}
.prose p{margin:.9rem 0; background:var(--card); padding:1rem 1.1rem; border-radius:16px; box-shadow:var(--shadow); border:1px solid rgba(15,23,42,.06)}
/* Logo auf Über-uns Seite */
.page-brand{display:flex; align-items:center; justify-content:center; gap:.6rem; margin: .4rem auto 0}
.page-brand img{width:88px; height:auto}
.page-brand span{font-weight:800; letter-spacing:.02em}

.team-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:1rem; align-items:center}
.team-grid picture img{border-radius:18px; box-shadow:var(--shadow)}
@media (max-width:900px){ .team-grid{grid-template-columns:1fr} }

/* ---------- Accordions ---------- */
.accordions{padding:2rem 0}
.accordions .container{max-width:900px}
.acc{background:var(--card); border-radius:16px; box-shadow:var(--shadow); margin:.8rem 0; overflow:hidden; border:1px solid rgba(15,23,42,.08)}
.acc > summary{list-style:none; cursor:pointer; padding:1rem 1.1rem; display:flex; align-items:center; justify-content:space-between; font-weight:800}
.acc > summary::-webkit-details-marker{display:none}
.acc > .acc-body{padding:0 1.1rem 1.1rem; color:var(--muted); border-top:1px solid rgba(15,23,42,.08)}
.acc[open] > summary i{transform:rotate(45deg)}
.acc summary i{transition:.2s}

/* ---------- Kontakt ---------- */
.contact .container{max-width:1100px;}
.contact-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:1rem; align-items:start}
.contact-info,.contact-form{background:var(--card); padding:1.2rem; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid rgba(15,23,42,.08)}
.field{margin:.7rem 0; display:flex; flex-direction:column; gap:.35rem}
/* schöne Checkbox */
.checkline{display:flex; align-items:flex-start; gap:.6rem; margin:.8rem 0; cursor:pointer}
.checkline input{position:absolute; opacity:0; width:0; height:0}
.checkline .box{
  width:22px; height:22px; border-radius:6px; border:1.6px solid rgba(15,23,42,.35);
  background:#f7fbff; position:relative; transition:.18s ease;
  box-shadow: inset 0 0 0 0 rgba(0,0,0,.0);
}
@media (prefers-color-scheme: dark){ .checkline .box{ background:#0f141c; border-color:#2a3346 } }
.checkline .box::after{
  content:""; position:absolute; left:6px; top:2px; width:6px; height:12px;
  border-right:3px solid #fff; border-bottom:3px solid #fff; transform:rotate(45deg) scale(0); transition:.18s ease;
}
.checkline input:checked + .box{
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  border-color: transparent;
  box-shadow: inset 0 0 0 0 rgba(0,0,0,0);
}
.checkline input:checked + .box::after{ transform:rotate(45deg) scale(1) }
.checkline .text{line-height:1.45}

input,textarea{
  width:100%; padding:.75rem .9rem; border-radius:12px; border:1px solid rgba(15,23,42,.18);
  background:#f7fbff; color:var(--text)
}
@media (prefers-color-scheme: dark){
  input,textarea{ background:#0f141c; border-color:#2a3346 }
}
input:focus,textarea:focus{outline:2px solid var(--accent)}
.form-note{color:var(--muted); font-size:.9rem}
.hidden{display:none}
.map-wrap{margin-top:.8rem; border-radius:14px; overflow:hidden; aspect-ratio: 16/10; border:1px solid rgba(15,23,42,.12)}
.map-wrap iframe{width:100%; height:100%; border:0}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr} }

/* ---------- Footer ---------- */
.site-footer{position:fixed; left:0; right:0; bottom:0; z-index:70; background:rgba(255,255,255,.8); backdrop-filter: blur(8px); border-top:1px solid rgba(15,23,42,.12)}
.footer-inner{display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center; justify-content:center; padding:.7rem 1rem; color:var(--muted)}
.footer-inner a{color:var(--text)}
.legal a{color:var(--muted)}

/* ---------- Animations ---------- */
.reveal{opacity:0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease}
.reveal.is-visible{opacity:1; transform:none}

/* ===== Footer (immer dunkler Text) ===== */
:root{
  --footer-bg: rgba(255,255,255,.92);
  --footer-fg: #0f172a;     /* dunkles Text-/Link-Farb */
  --footer-muted: #334155;  /* dezenter Text */
}
@media (prefers-color-scheme: dark){
  /* Im Dark-Mode bleibt der Footer hell, Text bleibt trotzdem dunkel */
  :root{
    --footer-bg: rgba(255,255,255,.92);
    --footer-fg: #0f172a;
    --footer-muted: #475569;
  }
}

.site-footer{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background: var(--footer-bg);
  backdrop-filter: blur(8px);
  border-top:1px solid rgba(15,23,42,.12);
}

.footer-inner{
  display:flex; flex-wrap:wrap; gap:.6rem 1rem;
  align-items:center; justify-content:center;
  padding:.7rem 1rem;
  color: var(--footer-muted);           /* dunkler Fließtext */
}

.site-footer a,
.footer-inner a{
  color: var(--footer-fg) !important;   /* Links klar dunkel */
  text-decoration: none;
}
.site-footer a:hover{ text-decoration: underline; }

.site-footer .legal a{
  color: var(--footer-muted) !important;/* rechtliche Links etwas dezenter */
}

/* ===== HERO: fixes Hintergrundbild (scrollt NICHT), zentrierte Card, Verlauf im Headline-Wort ===== */
/* Hintergrund als fixed Background via CSS (Bild aus /asstes/pictures/) */
.hero.full{
  background: url("../pictures/neues.avif") center / cover fixed no-repeat;
}
/* das <picture> im Hero ausblenden, damit es nicht doppelt erscheint */
.hero.full .hero-bg{ display:none; }

/* Container + Card wirklich mittig platzieren */
.hero.full > .container{
  display:flex; align-items:center; justify-content:center;
  min-height: 82vh;
}
.hero-card{ max-width: 920px; margin: 0 auto; }

/* Verlaufstext für „Bereit für Neues?“ */
.accent{
  background: linear-gradient(90deg, #0fb9c9 0%, #2ee6a6 55%, #22d3ee 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow:none;
}

/* ===== Carousel: Caption-Card zentral + mehr Transparenz, trotzdem lesbar ===== */
.slide-caption{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  max-width: min(560px, 86%); text-align:center; color:#0f172a;
}
.slide-caption.glass{
  background: rgba(255,255,255,.58); border:1px solid rgba(15,23,42,.08);
}
@supports (backdrop-filter: blur(10px)){
  .slide-caption.glass{ backdrop-filter: blur(16px); }
}

/* ===== Story-CTA Button mittig ===== */
.story .btn{ display:block; width:fit-content; margin:1rem auto 0; }

/* ===== Footer: nie über Inhalt – echter „Sticky Footer“ ohne Überlappen ===== */
/* Seite als Flex-Column; Footer am Ende, aber nicht über Content */
html, body { height: 100%; }
body{ min-height: 100dvh; display:flex; flex-direction: column; }
main{ flex: 1 0 auto; padding-bottom: 0 !important; }
/* Footer nicht mehr fixed, sondern statisch am Dokumentende */
.site-footer{ position: static !important; }

/* (aus früherem Fix) – Footer-Text bleibt dunkel und gut lesbar */
:root{
  --footer-bg: rgba(255,255,255,.92);
  --footer-fg: #0f172a;
  --footer-muted: #334155;
}
@media (prefers-color-scheme: dark){
  :root{ --footer-bg: rgba(255,255,255,.92); --footer-fg:#0f172a; --footer-muted:#475569; }
}
.site-footer{ background: var(--footer-bg); backdrop-filter: blur(8px); border-top:1px solid rgba(15,23,42,.12); }
.footer-inner{ color: var(--footer-muted); }
.site-footer a, .footer-inner a{ color: var(--footer-fg) !important; }
.site-footer .legal a{ color: var(--footer-muted) !important; }

/* Karussell Performance */
.slides{
  will-change: transform;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}

/* ===== Über-uns: cleaner Two-Column Card (Text links, Logo rechts) ===== */
.about-block{ padding:2rem 0; }
.about-card{
  display:grid; grid-template-columns: 1.4fr .9fr; gap:clamp(1rem,3vw,2rem);
  align-items:center;
  background:var(--card);
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
  padding:clamp(1rem,2.2vw,1.6rem);
  box-shadow:var(--shadow);
}
.about-text h2{ margin-bottom:.6rem }
.about-text p{ margin:.75rem 0; color:var(--text); }
.about-logo{
  display:grid; place-items:center;
}
.about-logo img{
  width:min(320px, 92%); height:auto; object-fit:contain;
  filter: drop-shadow(0 12px 28px rgba(15,23,42,.12));
  opacity:.92;
}

/* Mobile: Logo unter den Text, zentriert */
@media (max-width: 900px){
  .about-card{ grid-template-columns: 1fr; text-align:left; }
  .about-logo img{ max-width:260px; margin: .2rem auto 0; }
}

/* ===== FORCE LIGHT THEME ACROSS ALL DEVICES ===== */
:root{
  color-scheme: light; /* Form-Controls, Scrollbars etc. hell */
}

/* falls der Browser Darkmode meldet: Variablen trotzdem wieder auf hell setzen */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#f4f7fb; --bg-2:#eef3f9; --text:#0f172a; --muted:#55617a;
    --card:#ffffff; --glass: rgba(255,255,255,.70);
    --accent:#0fb9c9; --accent-2:#69f0d0;
    --radius:20px; --shadow:0 14px 36px rgba(15,23,42,.08);
    --footer-bg: rgba(255,255,255,.92);
    --footer-fg:#0f172a; --footer-muted:#334155;
  }

  /* Inputs/Textareas auch im Darkmode hell */
  input, textarea{
    background:#f7fbff !important;
    color:#0f172a !important;
    border-color: rgba(15,23,42,.18) !important;
  }
}

/* ===== Header: 3-Spalten-Layout mit Wortmarke-Bild in der Mitte ===== */
.header-3col{
  display:grid !important;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap:.8rem 1rem;
}
.brand-logo-only span{ display:none; }
.brand-logo-only img{
  width:clamp(56px, 5vw + 36px, 86px);
  height:auto; object-fit:contain;
}
.site-title-img{
  grid-column:2;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; user-select:none;
}
.site-title-img img{
  height: clamp(28px, 4.4vw, 56px);
  width:auto; display:block; object-fit:contain; opacity:.96;
}
.header-3col .nav-toggle{ grid-column:3; justify-self:end; }
.header-3col .main-nav{ grid-column:3; justify-self:end; }
@media (max-width:400px){
  .site-title-img img{ height:32px; }
}