:root{
  --primary: #00BBD3;   /* Logo-Türkis */
  --dark:    #2E3238;   /* dunkles Grau */
  --ink:     #1B1E22;
  --muted:   #6B7178;
  --bg:      #F6F7F9;
  --soft:    #EEF7F9;
  --radius:  16px;
  --shadow:  0 10px 30px rgba(0,0,0,.08);
}
/* Nie breiter als der Viewport rechnen */
*, *::before, *::after { box-sizing: border-box; }
html, body { width:100%; max-width:100%; overflow-x:hidden; position:relative; }
img, video, svg, canvas { max-width:100%; height:auto; }

/* verhindert horizontales Scrollen / Seitenshift auf Mobile */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
}

/* iOS: horizontales „Rubberband“ eindämmen */
html, body {
  overscroll-behavior-x: contain;
}

/* Sicherheitsnetz: kein Element darf breiter sein als der Viewport */
img, video, svg, canvas {
  max-width: 100%;
  height: auto;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Arial,sans-serif;color:var(--ink);background:#fff}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{width:min(1100px, 92%);margin:0 auto}

/* Header / Nav */
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px}
.nav{display:flex;gap:20px;align-items:center}
.nav a{color:var(--dark)}
.btn{display:inline-block;padding:12px 16px;border-radius:12px;border:1px solid #e6e6e6}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:var(--shadow)}
.btn-ghost{background:#fff}

.btn-link{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:var(--shadow)}
.btn-link:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(4,177,205,0.30);color:#fff}

.burger{display:none;background:none;border:0;padding:10px;cursor:pointer;min-width:44px;min-height:44px}
.burger span{display:block;width:24px;height:2px;background:#333;margin:5px 0}
body.menu-open { overflow: hidden; }
/* Hero */
.hero{padding:56px 0;background:linear-gradient(180deg,#fff, var(--soft))}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.hero h1{font-size:42px;line-height:1.1;margin:0 0 12px}
.hero p{color:var(--muted);margin:0 0 20px}
.cta-row{display:flex;gap:12px;margin-bottom:14px}
.badges{display:flex;gap:10px;flex-wrap:wrap;padding:0;margin:8px 0 0;list-style:none}
.badges li{background:#fff;border:1px solid #eee;padding:8px 12px;border-radius:999px;font-size:13px}
.hero-card{background:#fff;border:1px solid #eee;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.checklist{margin:0;padding-left:18px}

/* Sections */
.section{padding:60px 0}
.bg-soft{background:var(--bg)}
h2{font-size:28px;margin:0 0 22px}
.grid{display:grid;gap:16px}
.cards-3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:1px solid #eee;border-radius:var(--radius);padding:18px}
.card .list{margin:10px 0 0;padding-left:18px}
.project .thumb{height:140px;border-radius:12px;background:linear-gradient(135deg,var(--primary),#88e7f1)}
.placeholder{color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}

/* Steps */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding-left:0;list-style:none}
.steps li{background:#fff;border:1px solid #eee;border-radius:12px;padding:14px}
.steps li strong{display:block;margin-bottom:6px}

/* Form */
.contact-form{background:#fff;border:1px solid #eee;border-radius:var(--radius);padding:18px}
.form-grid{grid-template-columns:repeat(2,1fr)}
.form-grid .full{grid-column:1 / -1}
label span{display:block;margin-bottom:6px;font-weight:600}
input,textarea{width:100%;padding:12px;border:1px solid #e4e4e4;border-radius:10px;font:inherit}
input:focus,textarea:focus{outline:2px solid rgba(0,187,211,.25);border-color:var(--primary)}
.form-note{color:var(--muted);font-size:14px;margin-top:8px}

/* Footer */
.site-footer{background:#0F1113;color:#D7DBE0;padding:32px 0 10px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px}
.site-footer a{color:#D7DBE0}
.brand-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.small.print{font-size:13px;color:#9aa2aa;padding-top:8px;border-top:1px solid rgba(255,255,255,.08)}

/* Responsive */
@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .cards-3{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .nav{display:none;position:absolute;right:4%;top:64px;background:#fff;border:1px solid #eee;border-radius:12px;padding:12px;flex-direction:column;gap:10px;box-shadow:var(--shadow)}
  .burger{display:block}
  .cards-3{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}
/* Service detail */
.subhero{padding:40px 0;background:linear-gradient(180deg,#fff,var(--soft));border-bottom:1px solid #eee}
.breadcrumb{font-size:14px;color:var(--muted);margin-bottom:8px}
.breadcrumb a{color:var(--muted)}
.service-head h1{margin:6px 0 10px}
.service-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.meta-chip{background:#fff;border:1px solid #e9e9e9;border-radius:999px;padding:6px 10px;font-size:13px}
.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0 0;padding:0;list-style:none}
.feature-list li{background:#fff;border:1px solid #eee;border-radius:12px;padding:12px}
.price-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.price-cards .card h3{margin:0 0 6px}
.price{font-weight:700;font-size:22px;margin:4px 0 12px}
.kicker{color:var(--muted);font-size:14px}
@media (max-width:980px){.feature-list{grid-template-columns:1fr}.price-cards{grid-template-columns:1fr}}
/* Portfolio */
.portfolio-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.portfolio-actions{display:flex;gap:10px}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tile{position:relative;background:#fff;border:1px solid #eee;border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.tile .thumb{aspect-ratio: 16/9; background:#f2f5f7; display:flex; align-items:center; justify-content:center}
.tile .thumb img{width:100%;height:100%;object-fit:cover}
.tile .body{padding:14px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.chip{font-size:12px;padding:6px 10px;border:1px solid #e6e6e6;border-radius:999px;background:#fff}
.tile a.stretched{position:absolute;inset:0;z-index:1}
.tile:hover{transform:translateY(-2px);transition:.2s ease;box-shadow:0 14px 36px rgba(0,0,0,.10)}
@media (max-width:980px){.gallery{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.gallery{grid-template-columns:1fr}}
/* Project page */
.project-hero{padding:40px 0;background:linear-gradient(180deg,#fff,var(--soft));border-bottom:1px solid #eee}
.meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.meta .chip{background:#fff}
.prose p{margin:0 0 12px;color:var(--ink)}
/* === New Hero (above-the-fold) === */
.hero-new {
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.02) 100%);
  padding: clamp(64px, 10vw, 120px) 0 72px;
}

.hero-new__inner {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

.hero-new__title {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
  font-weight: 800;
  color: #1b1f24;
  margin: 0 0 14px;
  letter-spacing: -0.3px;
}

.hero-new__lead {
  font-size: clamp(18px, 2.4vw, 22px);
  color: #3a424a;
  margin: 0 0 12px;
}

.hero-new__sub {
  font-size: 17px;
  color: #5a646e;
  margin: 0 0 28px;
}

.hero-new__chips {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.chip {
  background: #f3f5f7;
  border: 1px solid #e7ebef;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 14px;
  color: #2e3238;
  transition: transform .15s ease;
}
.chip:hover { transform: translateY(-1px); }

.hero-new__cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Kleine Politur für bestehende Buttons, falls noch nicht vorhanden */
.btn.btn-ghost {
  border: 1px solid #dfe5ea;
  background: #fff;
}
.btn.btn-ghost:hover {
  background: #84a9cf;
}
.hero-new {
    margin-bottom: 80px; /* Abstand zum alten Hero */
}
.btn-primary {
    background: #04b1cd;
    color: #fff;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(4,177,205,0.22);
    transition: transform .15s ease, box-shadow .15s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(4,177,205,0.30);
}

.btn-ghost {
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
}
/* Einheitlicher Look wie .btn-primary für Ghost- und Link-Buttons */
.btn-ghost,
.btn-link {
  background: #04b1cd;
  color: #fff;
  border-color: #04b1cd;
  box-shadow: 0 6px 18px rgba(4,177,205,0.22);
  transition: transform .15s ease, box-shadow .15s ease;
}

.btn-ghost:hover,
.btn-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(4,177,205,0.30);
  color: #fff;
}

header.site-header .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

header.site-header nav ul {
  gap: 28px;
}

header.site-header nav a {
  font-size: 15px;
  font-weight: 500;
  color: #2a2e33;
  transition: color 0.15s ease;
}

header.site-header nav a:hover {
  color: #04b1cd;
}

header.site-header .brand img {
  height: 96px;
  display: block;
}
@media (max-width: 980px){
  header.site-header .brand img { height: 80px; }
}
@media (max-width: 640px){
  header.site-header .brand img { height: 60px; }
}

header.site-header .btn-primary {
  border-radius: 12px;
  padding: 10px 20px;
}
/* Kontaktformular – Professional UI */
.form-grid { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:16px; }
.form-grid .full { grid-column: 1 / -1; }
.contact-form label span { display:block; font-weight:600; margin-bottom:6px; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="file"],
.contact-form select,
.contact-form textarea {
  width:100%; padding:12px 14px; border:1px solid #e2e8f0; border-radius:12px; background:#fff;
  font: inherit;
}
.contact-form textarea { line-height:1.5; }
.contact-form .help { color:#6b7280; display:block; margin-top:6px; font-size:12px; }
.contact-form .consent { display:flex; gap:10px; align-items:flex-start; }
.contact-form .consent input { margin-top:4px; }

.form-alert { margin-top:14px; padding:12px 14px; border-radius:10px; border:1px solid transparent; }
.form-alert.ok  { background:#ecfdf5; border-color:#10b98133; color:#065f46; }
.form-alert.err { background:#fef2f2; border-color:#ef444433; color:#7f1d1d; }

/* Mobile */
@media (max-width: 720px){
  .form-grid { grid-template-columns: 1fr; }
}
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.modal-box {
  background: #fff;
  border-radius: 16px;
  padding: 30px;
  max-width: 380px;
  width: 92%;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,.2);
}

.modal-box h3 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
}
.modal-box p {
  margin-bottom: 22px;
  color: #444;
}
.modal-overlay[hidden] { display: none !important; }
/* Header – Polish */
.site-header { position: sticky; top: 0; background:#fff; z-index: 50; transition: box-shadow .15s ease, border-color .15s ease; border-bottom:1px solid #edf0f2; }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.06); border-color: transparent; }

.nav a { color:#2a2e33; font-weight:500; font-size:15px; opacity:.9; }
.nav a:hover { color: var(--primary); opacity:1; }

/* Nav-Buttons sollen wie CTA aussehen */
.nav a.btn,
.nav a.btn-link,
.nav a.btn-primary { color: #fff; }

/* und beim Hover weiterhin weiß bleiben */
.nav a.btn:hover,
.nav a.btn-link:hover,
.nav a.btn-primary:hover { color: #fff; }


.hide-sm { display:inline-block; }
.burger { display:none; }
.burger span{display:block;width:24px;height:2px;background:#2a2e33;margin:5px 0;border-radius:2px}

@media (max-width: 900px){
  .hide-sm { display:none; }
  .burger { display:block; }
  .nav{ display:none; position:absolute; right:4%; top:68px; background:#fff; border:1px solid #e8edf2; border-radius:12px; padding:12px; flex-direction:column; gap:12px; box-shadow:var(--shadow) }
  .nav.open{ display:flex; }
}

/* Hero – kleine Abstände/Typo */
.hero-new { margin-bottom: 56px; }
@media (max-width: 640px){
  .hero-new { margin-bottom: 36px; }
}
.hero-new__title { letter-spacing: -0.3px; }
.hero-new__chips .chip { cursor: default; }
/* screenreader-only = fallback text ADNar im notfall */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* image sichtbar */
.brand img {
  display:block;
}

/* optional: falls du sicher das span nicht versehentlich sichtbar wird */
.brand span {
  display:none;
}
/* Projekte – Premium Cards */
.projects-grid{grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:980px){.projects-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.projects-grid{grid-template-columns:1fr}}

.project-card{
  background:#fff;border:1px solid #eaeef3;border-radius:16px;overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow:0 8px 24px rgba(0,0,0,.04);
}
.project-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.07);
  border-color:#e1e7ee;
}

.project-thumb{position:relative;aspect-ratio:16/10;background:#f3f6f8;overflow:hidden}
.project-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.02);transition:transform .6s ease, opacity .3s ease;opacity:.98;
}
.project-card:hover .project-thumb img{transform:scale(1.05)}

.project-pill{
  position:absolute;left:12px;top:12px;
  background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(4px);
  border:1px solid #e9edf2;border-radius:999px;padding:6px 10px;font-size:12px;color:#2e3238
}

.project-body{padding:16px 16px 18px}
.project-body h3{margin:0 0 6px;font-size:18px;letter-spacing:-.2px}
.project-body p{margin:0 0 10px;color:#5a646e}
/* Projekt-Detail: Hero-Bild zähmen */
.project-hero .thumb{
  max-height: 420px;       /* Bildhöhe begrenzen */
  overflow: hidden;
  border-radius: var(--radius);
}
/* fix: project CTA buttons – smaller font so text stays 1 line */
.project-card .btn-primary {
  font-size: 14px;
  padding: 10px 18px;
  white-space: nowrap;
}

.project-hero .thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;       /* sauber zuschneiden statt verzerren */
}

/* Titel etwas entspannter */
.project-hero h1{
  font-size: clamp(28px, 3.2vw, 36px);
  margin: 0;
}

/* Tags etwas kompakter (optional) */
.project-hero .chips .chip{
  font-size: 12px;
  padding: 6px 10px;
}
/* Leistungen Section fix */
#leistungen{
  scroll-margin-top: 120px; /* damit springt der anchor sauber unter den Header */
  padding-top: 40px;        /* extra Abstand für Optik */
}
/* Prozess Section fix */
#prozess{
  scroll-margin-top: 120px;
  padding-top: 40px;
}
.trust-strip{background:#0F1113;color:#D7DBE0}
.trust-strip__inner{padding:12px 0}
.trust-list{display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:center;margin:0;padding:0;list-style:none;font-size:14px}
.trust-list li{opacity:.95;white-space:nowrap}
@media (max-width:640px){.trust-list{gap:12px;font-size:13px}}
.quote-card{background:#fff;border:1px solid #eee;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.quote-card p{margin:0 0 10px;font-size:15px;line-height:1.5}
.quote-meta{font-size:13px;color:var(--muted)}
.sticky-cta{display:none}
@media (max-width: 820px){
  .sticky-cta{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:50;
    background:rgba(255,255,255,.96);
    border-top:1px solid #eee;
    padding:10px;
    display:flex;
    justify-content:center;
    backdrop-filter:saturate(150%) blur(4px);
  }
  .sticky-cta .btn{
    width:100%;
    max-width:560px;
  }
}
/* Testimonials */
.quote-card{
  background:#fff;
  border:1px solid #eee;
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}
.quote-card p{
  margin:0 0 10px;
  font-size:15px;
  line-height:1.55;
}
.quote-meta{
  font-size:13px;
  color:var(--muted);
}
@media (max-width: 980px){
  .cards-3{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .cards-3{grid-template-columns:1fr}
}
#referenzen{ scroll-margin-top: 120px; }
 .btn:hover,
.btn:focus {
  color: #0d9488; /* selbe türkisfarbe wie border */
}

#kontakt {
  scroll-margin-top: 120px;
}



/* === Project card: Variant B (small thumb left of title) ================== */
.project-card .project-title{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.project-card .project-title__thumb{width:52px;height:52px;object-fit:cover;border-radius:10px;flex:0 0 52px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
@media (max-width:600px){
  .project-card .project-title__thumb{width:44px;height:44px;flex-basis:44px}
}

/* Einheitlicher Stil für alle Buttons */
/* Einheitlicher Stil für alle Buttons */
.btn,
.btn-primary,
.btn-outline,
.btn-ghost,
.btn-link {
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--primary);
  border-radius: 12px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0,187,211,0.22);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.btn:hover,
.btn-primary:hover,
.btn-outline:hover,
.btn-ghost:hover,
.btn-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,187,211,0.30);
  color: #fff;
  background: #009cb3;
  border-color: #009cb3;
}
/* ===== Sticky Header on scroll ===== */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: background .18s ease, box-shadow .18s ease, backdrop-filter .18s ease;
}

header.site-header.scrolled {
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(160%) blur(8px);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
/* Slim variant for compact CTAs (cards etc.) */
.btn--sm {
  font-size: 14px;
  padding: 10px 16px;
  white-space: nowrap;
  line-height: 1.1;
}
/* Accessible focus states for interactive elements */
a.btn:focus-visible,
button.btn:focus-visible {
  outline: 2px solid #00bbd3;
  outline-offset: 2px;
}

/* dezenter Fokus auch für Links in der Nav */
.nav a:focus-visible {
  outline: 2px solid #00bbd3;
  outline-offset: 3px;
  border-radius: 8px;
}
/* === Footer polish === */
.site-footer { padding: 40px 0 14px; }
.footer-grid { gap: 28px; align-items: flex-start; }

.site-footer h4 {
  margin: 0 0 10px;
  font-size: 16px;
  color: #E7EBF0;
}

.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 8px 0; }
.site-footer a:hover { text-decoration: underline; }

/* dezente Spalten-Trenner auf Desktop */
@media (min-width: 981px){
  .footer-grid > div + div { position: relative; }
  .footer-grid > div + div:before {
    content: "";
    position: absolute;
    left: -10px; top: 4px; bottom: 4px;
    width: 1px;
    background: rgba(255,255,255,.08);
  }
}

/* Mobile: mehr Luft und Platz für die Sticky-CTA */
@media (max-width: 640px){
  .site-footer { padding-bottom: 70px; } /* Platz, damit nichts überlappt */
  .brand-row { justify-content: flex-start; }
}
/* ============= MOBILE OVERFLOW FIX ============= */
html, body { width:100%; max-width:100%; overflow-x:hidden; position:relative; }
img, video, svg, canvas { max-width:100%; height:auto; }

/* Kontakt-Formular & Grids auf 1 Spalte, Inhalte dürfen umbrechen */
@media (max-width: 640px){
  .container,
  .section .container,
  .subhero .container{
    padding-left:16px;
    padding-right:16px;
    overflow-x:hidden;
  }

  /* alle 2er/3er Grids im Formular auf 1 Spalte */
  .form-grid, .grid-2, .grid-3, .grid {
    display:grid;
    grid-template-columns: 1fr !important;
    gap:16px;
  }

  /* Checkbox/Consent-Zeile: Text neben der Box, aber umbrechbar */
  .checkbox, .consent, .form-row.checkbox-row {
    display:flex;
    align-items:flex-start;
    gap:12px;
    flex-wrap:wrap;
  }
  .checkbox input[type="checkbox"] { flex:0 0 auto; }
  .checkbox label,
  .checkbox .label,
  .consent-text,
  .checkbox span{
    flex:1 1 0;
    min-width:0;
    word-break:break-word;
    overflow-wrap:anywhere;
  }

  /* Datei-Upload soll nie breiter werden als der Bildschirm */
  input[type="file"], .file-input, .file {
    max-width:100%;
  }
}
/* --- Kontaktformular: Checkbox/Consent auf Mobile sauber umbrechen --- */
@media (max-width: 640px){
  /* Container nie scrollen lassen */
  .container,
  .section .container { overflow-x:hidden; padding-left:16px; padding-right:16px; }

  /* Checkbox-/Consent-Zeilen als flex, Text darf umbrechen */
  form .consent,
  form .checkbox-row,
  form .form-row.consent,
  .consent, .checkbox-row {
    display:flex;
    align-items:flex-start;
    gap:12px;
    flex-wrap:wrap;
    max-width:100%;
  }

  /* Box links, Text rechts flexibel */
  form .consent input[type="checkbox"],
  .checkbox-row input[type="checkbox"] { flex:0 0 auto; margin-top:3px; }

  /* Der eigentliche lange Text */
  form .consent label,
  form .consent .consent-text,
  .checkbox-row label,
  .consent-text {
    flex:1 1 0;
    min-width:0;
    white-space:normal;       /* kein erzwungener Einzeiler */
    overflow-wrap:anywhere;   /* darf in langen Wörtern umbrechen */
    word-break:break-word;
    max-width:100%;
  }

  /* Datei-Upload darf die Breite nie sprengen */
  input[type="file"], .file, .file-input { max-width:100%; }
}
/* --- Globale Mobile-Fixes gegen seitlichen Shift --- */
@media (max-width: 640px){
  /* Chips (Kategorien) dürfen umbrechen und nie breiter werden */
  .chips{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    max-width:100%;
  }
  .chips .chip{ max-width:100%; }

  /* Große CTA-Buttons: lieber umbrechen statt rausragen */
  .btn{ white-space:normal; }

  /* Sehr lange H1/H2 (z. B. im Hero) dürfen umbrechen */
  h1, h2{
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  /* Fix für die Bottom-CTA: immer exakt Viewport-Breite */
  .sticky-cta, .cta-bar, .cta-bottom{
    position:sticky; /* oder fixed in deinem Layout */
    left:0;
    right:0;
    width:100%;
    max-width:100vw;
  }
}
/* === Kontaktformular Overflow-Fixes (Mobile & generell) === */

/* Consent-/Checkbox-Zeile: Text MUSS umbrechen, nie breiter als Viewport */
form .consent,
form .checkbox-row,
.consent,
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 100%;
}

form .consent > input[type="checkbox"],
.checkbox-row > input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 3px; /* optisch zentriert */
}

form .consent > label,
form .consent .consent-text,
.checkbox-row > label,
.checkbox-row .consent-text {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  white-space: normal;         /* nicht einzeilig */
  overflow-wrap: anywhere;     /* lange Wörter dürfen umbrechen */
  word-break: break-word;
  max-width: 100%;
}

/* Datei-Upload: nie über die Breite hinaus */
input[type="file"],
.file,
.file-input {
  display: block;
  max-width: 100%;
  width: 100%;
}

/* Sicherheitsnetz: jede Form-Zeile darf nicht breiter sein */
form .form-row,
form .field,
form .form-group {
  max-width: 100%;
  overflow-x: hidden;
}
/* Container sauber zentriert und mobil bündig */
.container,
.section .container,
.subhero .container{
  margin-left:auto;
  margin-right:auto;
  padding-left:16px;
  padding-right:16px;
  max-width: 1120px;         /* dein Desktop-Container */
  box-sizing:border-box;
}

/* Bottom-CTA immer exakt Viewport-breit */
.sticky-cta,
.cta-bar,
.cta-bottom{
  position:sticky;           /* falls bei dir fixed ist: auch ok */
  left:0;
  right:0;
  width:100vw;
  max-width:100vw;
  margin-left: calc(50% - 50vw); /* bündig an beide Kanten */
}

/* Sicherheit: Seite darf nie horizontal scrollen */
html, body{width:100%;max-width:100%;overflow-x:hidden;position:relative;}
*,*::before,*::after{box-sizing:border-box;}
/* Formular-Overflow final schließen */
form .form-row,
form .field,
form .form-group{max-width:100%;overflow-x:hidden;}

form .consent,
form .checkbox-row,
.consent,
.checkbox-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  width:100%;
  max-width:100%;
  flex-wrap:wrap;
  margin-right:0;            /* kein "Überhang" nach rechts */
}

form .consent > input[type="checkbox"],
.checkbox-row > input[type="checkbox"]{
  flex:0 0 auto;
  margin-top:3px;
}

form .consent > label,
form .consent .consent-text,
.checkbox-row > label,
.checkbox-row .consent-text{
  flex:1 1 0;
  min-width:0;
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Datei-Upload bricht nie aus */
input[type="file"], .file, .file-input{
  display:block;
  width:100%;
  max-width:100%;
}

/* Liste "Beliebte Lösungen": auf Mobile einspaltig, damit nichts ausfranst */
@media (max-width:640px){
  .columns, .two-cols, .features-columns{
    column-count:1 !important;
  }
}
/* Footer-Logo sauber skalieren */
.site-footer .brand-row{
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-footer .brand-row img{
  width: auto;        /* nie auf 100% ziehen */
  height: auto;
  max-height: 36px;   /* Desktop */
  object-fit: contain;
}
/* Platz für den Sticky-Header */
body {
  padding-top: 80px;
}

@media (max-width: 768px) {
  body {
    padding-top: 72px;
  }
}
html {
  scroll-padding-top: 90px;
}

@media (max-width: 768px) {
  html {
    scroll-padding-top: 80px;
  }
}

/* Auf Mobile etwas kleiner */
@media (max-width: 640px){
  .site-footer .brand-row img{
    max-height: 28px;
  }
}
/* =========================
   STICKY HEADER (final)
   ========================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: box-shadow .15s ease, border-color .15s ease;
}

/* kleiner Schatten beim Scrollen (optional, nur wenn JS Klasse gesetzt wird) */
.site-header.is-scrolled,
header.site-header.scrolled{
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  border-color: transparent;
}

/* Anchor-Sprünge (#kontakt etc.) */
html{ scroll-padding-top: 90px; }
@media (max-width: 768px){
  html{ scroll-padding-top: 80px; }
}
/* =========================================================
   FIXED HEADER + GROESERES LOGO (Override ganz am Dateiende)
   ========================================================= */

:root{
  --header-h: 112px; /* Desktop Header-Höhe */
}

/* Header fest oben */
header.site-header,
.site-header{
  position: fixed;     /* bleibt immer oben */
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 2000;
  background: #fff;
}

/* Platz schaffen, damit der Inhalt nicht unter dem Header verschwindet */
body{
  padding-top: var(--header-h);
}

/* Damit Anchor-Sprünge (#kontakt etc.) nicht unter dem Header landen */
html{
  scroll-padding-top: var(--header-h);
}

/* Logo im Header größer */
header.site-header .brand img{
  height: 104px;   /* Desktop Logo-Höhe */
  width: auto;
  max-width: 220px; /* optionaler Schutz gegen zu breites Logo */
  object-fit: contain;
  display: block;
}

/* Tablet */
@media (max-width: 980px){
  :root{ --header-h: 96px; }
  header.site-header .brand img{ height: 88px; max-width: 200px; }
}

/* Mobile */
@media (max-width: 640px){
  :root{ --header-h: 84px; }
  header.site-header .brand img{ height: 72px; max-width: 170px; }
}