/* ========== Basis / Container / Sticky Footer ========== */
:root{
  --container: 1200px;
  --pad-desktop: 20px;
  --pad-mobile: 20px;
  --brand: #0b73ff;
  --text: #222;
  --text-grey: #555;
  --border: #e5e5e5;
  --dark: #0a0a0a;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text); line-height:1.6; background:#fff;
  display:flex; flex-direction:column; overflow-x:hidden;
}
.no-scroll{overflow:hidden}
.page-main{flex:1 0 auto}

.header-inner,.footer-inner{max-width:var(--container);margin:0 auto;padding:0 var(--pad-desktop)}
@media (max-width:768px){.header-inner,.footer-inner{padding:0 var(--pad-mobile)}}

/* ========== Header kompakt ========== */
.site-header{
  position:sticky; top:0; z-index:1001;
  background:#fff; padding:8px 0;
border-bottom:1px solid var(--border);
box-shadow: 0 14px 40px rgba(0, 0, 0, .09);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:55px;}
.logo img{height:32px;width:auto;display:block}

/* ========== Desktop-Navigation ========== */
.main-nav{display:flex;align-items:center;position:static}
.nav-list{list-style:none;margin:0;padding:0;display:flex;gap:28px;align-items:center}
.nav-list>li{position:relative}
.main-nav a{display:block;padding:6px 4px;text-decoration:none;color: var(--text);font-weight:600;white-space:nowrap;cursor:pointer;}
.main-nav a:hover{color:var(--brand)}

/* Dropdown (Desktop) */
.submenu{
  position:absolute; left:0; top:calc(100%); min-width:220px;
  background:#fff; border:1px solid var(--border); border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  padding:10px; margin:0; list-style:none;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index:1002;
}
.submenu li{padding:0}
.submenu a{padding:10px 12px;border-radius:8px;color:#222}
.submenu a:hover{background:#f5f7fb;color:var(--brand)}

@media (min-width:901px){
  .has-submenu:hover>.submenu,
  .has-submenu:focus-within>.submenu{opacity:1;visibility:visible;transform:translateY(0)}
}

/* ========== Burger & Off-Canvas (Mobil) ========== */
.burger{display:none;font-size:28px;line-height:1;background:none;border:0;cursor:pointer}
.close-btn{display:none}

.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transition:opacity .3s ease;z-index:1000;
}
.overlay.show{opacity:1;visibility:visible}

@media (max-width:900px){
  .burger{display:block}
  .close-btn{
    display:block;position:absolute;top:14px;right:16px;font-size:30px;background:none;border:0;cursor:pointer;color:#333;line-height:1;z-index:2;
  }
  .main-nav{
    position:fixed;top:0;right:-100%;width:82%;max-width:340px;height:100%;
    background:#fff;box-shadow:-4px 0 16px rgba(0,0,0,.12);
    padding:60px 24px 24px;transition:right .28s ease;z-index:1001;
    display:flex;flex-direction:column;justify-content:flex-start;
  }
  .main-nav.open{right:0; overflow: auto;}
  .nav-list{flex-direction:column;gap:16px;align-items:flex-start}

  /* Mobile Submenus: Akkordeon */
  .has-submenu>.nav-link{position:relative;padding-right:22px}
  .has-submenu>.nav-link::after{content:'▾';position:absolute;right:0;top:0;bottom:0;margin:auto;height:1em}
  .submenu{position:static;border:0;box-shadow:none;padding:0 0 8px 0;opacity:1;visibility:visible;transform:none;display:none}
  .has-submenu.sub-open>.submenu{display:block}
  .submenu a{padding:10px 4px}
}

/* ========== Footer (sticky) ========== */
.site-footer{margin-top:auto;background:var(--dark);color:#aaa;padding:40px 0 0 0;}
.footer-inner{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.footer-logo img{height:25px;width:auto;filter:brightness(0) invert(1)}
.footer-nav{display:flex;gap:12px;align-items:center}
.footer-nav a{color:#aaa;text-decoration:none}
.footer-nav a:hover{color:var(--brand)}
.copy{margin:6px 0 0}













/* --- MOBILE OVERRIDES --- */
@media (max-width: 900px){
  /* Off-Canvas ohne feste Breite */
  .main-nav{
    right: -100%;
    width: 100%;    
    max-width: 300px;     /* optional, kann auch 340–400px sein */
  }

  /* Pfeil entfernen */
  .has-submenu > .nav-link { padding-right: 0; }
  .has-submenu > .nav-link::after { content: none !important; }

  /* Neuer Toggle-Button (Plus) für Submenüs */
  .submenu-toggle{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid #e5e5e5;
    background: #fff;
    color: #222;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
  }
  .has-submenu.sub-open > .submenu-toggle{
    background: #f5f7fb;
    border-color: #dfe6ef;
  }
}


@media (max-width: 900px){
  .nav-list{
    flex-direction: column;
    align-items: flex-start;   /* LINKS statt zentriert */
    gap: 10px;
    width: 100%;
  }
  .main-nav a{
    text-align: left;          /* Text linksbündig */
    width: 100%; 
  }
  .has-submenu{ width: 100%; position: relative; }
  .submenu{ padding-left: 12px; } /* leichte Einrückung für Unterpunkte */
}


@media (max-width: 900px){
  /* Hauptlink dient als Anker für den Toggle */
  .has-submenu > .nav-link{
    position: relative;
    padding-right: 36px;     /* Platz für den Button */
  }

  /* Toggle sitzt IM Link, bleibt daher stabil */
  .submenu-toggle{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px;
    border: 1px solid #e5e5e5;
    background: #fff; color: #222;
    font-size: 18px; line-height: 1;
    cursor: pointer;
  }
}
/* Desktop: keine Plus-Buttons zeigen */
@media (min-width: 901px){
  .submenu-toggle { display: none !important; }
  .has-submenu > .nav-link { padding-right: 6px; } /* Padding wieder normal */
}

































/* ===== Leistungen Cards (wie Referenz) ===== */
.services2-section{
  padding: 18px var(--pad-desktop) 8px;
}
@media (max-width:768px){
  .services2-section{ padding: 10px var(--pad-mobile) 0; }
}

.services2-grid{
  max-width: 1200px; margin: 0 auto;
  display: grid; gap: 24px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1200px){ .services2-grid{ gap: 18px; } }
@media (max-width: 1000px){ .services2-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){  .services2-grid{ grid-template-columns: 1fr; } }

.svc2-card{
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 12px;
  padding: 26px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  text-decoration: none;
  color: var(--text);
  transition: box-shadow .25s ease, transform .08s ease, border-color .25s ease;
}
.svc2-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
  border-color: rgba(0,183,255,.45);
}

/* Bild oben – Platzhalter, tausche die Dateien später aus */
.svc2-img{
  border-radius: 12px;
  overflow: hidden;
  background: #f4f6f8;
  aspect-ratio: 16 / 9;          /* gleichmäßige Höhe */
}
.svc2-img img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: .9;
  transition: filter .25s ease, opacity .25s ease;
}
.svc2-card:hover .svc2-img img{
  opacity: 1;
}

.svc2-card h3{
  margin: 4px 0 0;
  font-size: 2rem;                /* große Headline wie im Beispiel */
  line-height: 1.15;
}
.svc2-card p{
  margin: 0;
  color: var(--text-grey);
  font-size: 1.05rem;
}

.svc2-link{
  margin-top: 8px;
  font-weight: 700;
}
.svc2-arrow{
  position: absolute;
  right: 26px; bottom: 22px;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: #111; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .18s ease, background .2s ease;
}
.svc2-card:hover .svc2-arrow{
  transform: translateX(4px);
  background: var(--brand);
}

@media (max-width: 560px){
  .svc2-card{ padding: 20px; }
  .svc2-card h3{ font-size: 1.6rem; }
  .svc2-arrow{ right: 20px; bottom: 18px; }
}
/* ---- Services-Cards: feinere Headlines ---- */
.services2-grid .svc2-card h3{
  font-size: 1.15rem;      /* vorher ~2rem */
  line-height: 1.25;
  font-weight: 700;        /* gern 600, wenn du noch feiner willst */
  letter-spacing: .2px;
  margin: 6px 0 4px;
}
@media (max-width: 560px){
}

/* ---- CTA als Text + Pfeil (inline) ---- */
.svc2-link{
  display: inline-block;
  margin-top: 10px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  position: relative;
}
.svc2-link::after{
  content: "➝";
  margin-left: 8px;
  transition: transform .18s ease;
  display: inline-block;
}

/* Hover-Interaktionen */
.svc2-card:hover .svc2-link{
  color: var(--brand);
}
.svc2-card:hover .svc2-link::after{
  transform: translateX(4px);
}

/* den alten runden Pfeil-Button ausblenden */
.svc2-arrow{ display: none !important; }








/* Swipe / Carousel nur mobil */
@media (max-width: 700px){

  /* Keine sichtbaren Ränder – Section randlos */
  .services2-section{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Der Scroller: flex + Snap, ohne visuelles Padding */
  .services2-grid{
    display: flex;
    overflow-x: auto;
    gap: 14px;
    padding: 0 0 12px 0;
    margin: 0;

    /* Karte-für-Karte einrasten – Gutter nur logisch, nicht sichtbar */
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--pad-mobile);
    scroll-padding-right: var(--pad-mobile);
    -webkit-overflow-scrolling: touch;
  }

  /* Wie viel der nächsten Karte sichtbar sein soll */
  .services2-grid{ --peek: 40px; } /* 32–56 px je nach Geschmack */

  /* Breite jeder Karte + Snap-Eigenschaften */
  .services2-grid .svc2-card{
    flex: 0 0 calc(100vw - var(--peek));
    max-width: 540px;              /* optionales Limit */
    scroll-snap-align: start;
    scroll-snap-stop: always;      /* nicht 2 Karten überspringen */
  }

  /* Falls es vorher Deko-Fades gab: komplett abschalten */
  .services2-grid::before,
  .services2-grid::after{
    display: none !important;
    content: none !important;
  }
}
/* Mobile-Carousel: klarer Start/End-Abstand pro Card (ohne Verläufe) */
@media (max-width: 700px){
  .services2-section{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .services2-grid{
    display: flex;
    overflow-x: auto;
    gap: 14px;
    padding-bottom: 12px;
    margin: 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* kein scroll-padding – Abstand kommt von den Card-Margins */
  }

  .services2-grid{ --peek: 80px; --peek-half: calc(var(--peek) / 2); } /* Peek der nächsten Karte */

  .services2-grid .svc2-card{
    flex: 0 0 calc(100vw - var(--peek));
    max-width: 540px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  /* >>> sauberer Gutter am Anfang/Ende nur über erste/letzte Karte */
  .services2-grid .svc2-card:first-child { margin-left: var(--pad-mobile); }
  .services2-grid .svc2-card:last-child  { margin-right: var(--pad-mobile); }
}

/* H2 in der Services-Section: eigene Gutters + Typo */
.services2-section > h2{
  max-width: 1200px;
  margin: 0 auto 14px;              /* Abstand zur Grid */
  padding: 0 var(--pad-desktop);    /* Gutter unabhängig vom Section-Padding */
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: .2px;
  font-weight: 500;                  /* ggf. 700, wenn feiner gewünscht */
    margin-bottom: 20px;
}

/* Tablet/Mobil kleiner + mobile Gutters */
@media (max-width: 1000px){
  .services2-section > h2{
    padding: 0 var(--pad-mobile);
    font-size: 1.1rem;
  }
}












/* ===== Mission mit Bild (ikonisch, minimal) ===== */
/* Section bleibt full-width, kümmert sich nur um Außenabstände */
.mission-visual{
  padding: 48px var(--pad-desktop);
  background: #fff;
}
@media (max-width:1000px){
  .mission-visual{ padding: 36px var(--pad-mobile); }
}

/* Der "Card"-Container bestimmt die 1200px und die Rahmung */
.mission-frame{
  max-width: 1200px;
  margin: 0 auto;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 22px;
  padding: 24px;
  abox-shadow: 0 20px 60px rgba(0,0,0,.06);
}
@media (max-width:900px){
  .mission-frame{ padding: 18px; }
}

/* Das Grid bekommt KEINE eigene max-width mehr */
.mission-visual__inner{
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 36px;
  align-items: center;
}
@media (max-width: 900px){
  .mission-visual__inner{ grid-template-columns: 1fr; gap: 22px; }
}

.mission-visual .eyebrow{
  display:inline-block; margin-bottom:10px;
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; font-weight:800;
  color:var(--text); opacity:.65;
}

.mission-visual__text h2{
  margin: 0 0 8px;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-size: clamp(1.9rem, 1.2rem + 1.8vw, 2.6rem);
  color:#14171a;
}
.mission-visual__text .accent{
  background: linear-gradient(90deg, var(--brand), #0a83ff 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mission-visual__text p{ color:var(--text); font-weight:600 }
.mission-visual__text .muted{ color:#6a727c; font-weight:500 }

/* Bildseite */
.mission-visual__media{
  margin: 0;
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  abox-shadow: 0 24px 60px rgba(0,0,0,.12);
  isolation: isolate;
}
.mission-visual__media::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(800px 420px at 8% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 58%);
  pointer-events:none;
}
.mission-visual__media img{
  display:block; width:100%; height:auto; object-fit:cover;
  transform: translateZ(0);
}
@media (max-width:560px){
  .mission-visual__media{ border-radius: 18px; }
}








/* ===== Leistungen-Features (alternierend) ===== */
.service-feature{
  padding: 48px var(--pad-desktop);
  background: #fff;
}
@media (max-width:1000px){ .service-feature{ padding: 36px var(--pad-mobile); } }

.service-feature__inner{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns: .95fr 1.05fr;
  gap: 36px; align-items: center;
}
.service-feature--reverse .service-feature__inner{
  grid-template-columns: 1.05fr .95fr;
}
.service-feature--reverse .service-feature__text{ order:2; }
.service-feature--reverse .service-feature__media{ order:1; }

.service-feature__text .eyebrow{
  display:inline-block; margin-bottom:10px;
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; font-weight:800;
  color:#2b3138; opacity:.75;
}
.service-feature__title{
  margin:0 0 8px;
  font-weight:900; letter-spacing:-.02em; line-height:1.08;
  font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.4rem); color:#14171a;
}
.service-feature__lead{ margin: 8px 0 10px; color:#3b444e; font-weight:600 }

.service-bullets{ margin:0 0 14px; padding-left:18px; color:#5b636c }
.service-bullets li{ margin:6px 0 }

.service-feature__media{
  margin:0; position:relative; border-radius:22px; overflow:hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.12);
}
.service-feature__media img{
  display:block; width:100%; height:100%; object-fit:cover;
}

/* Mobile Stack */
@media (max-width:900px){
  .service-feature__inner{
    grid-template-columns: 1fr; gap:22px;
  }
  .service-feature__text{ order:1 !important; }
  .service-feature__media{ order:2 !important; }
}














/* Mission im Card-Stil (gleich wie andere Elemente mit Rahmen) */
.mission-frame{
  border:1px solid var(--border);
  background:#fff;
  border-radius:22px;
  padding:24px;
  abox-shadow:0 20px 60px rgba(0,0,0,.06);
}
@media (max-width:900px){ .mission-frame{ padding:18px; } }

/* Button unter Blogliste zentrieren */
.section-cta{
  text-align:center;
  margin-top: 16px;
}















/* ===== Footer (HGS) ===== */
.site-footer{
  background:#0b0f15;
  color:#bfc6cf;
  padding: 60px 0 0 0;
}
@media (max-width:1000px){
  .site-footer{ padding: 40px 0 0 0; }
}

.footer-inner{
  max-width:1200px; margin:0 auto;
  display:grid; gap:26px 40px;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
}
@media (max-width:980px){
  .footer-inner{ grid-template-columns: 1fr 1fr; }
}
@media (max-width:560px){
  .footer-inner{ grid-template-columns: 1fr; }
}

.footer-logo img{
  height:32px; width:auto; display:block;
  filter: brightness(0) invert(1); /* Logo weiß einfärben */
  margin-bottom: 12px;
}

.f-col h3{
  color:#ffffff; margin:0 0 10px; font-size:1rem; letter-spacing:.02em;
}
.f-col p{ margin:0; color:#bfc6cf; }
.f-brand p{ max-width:46ch; }

.f-nav ul,
.f-contact ul{ list-style:none; margin:0; padding:0; }
.f-nav li, .f-contact li{ margin:8px 0; }
.f-nav a, .f-contact a{
  color:#d7dee6; text-decoration:none;
}
.f-nav a:hover, .f-contact a:hover{ color:var(--brand); }

.f-social .social-row{ display:flex; gap:12px; flex-wrap:wrap; }
.soc{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border:1px solid #1a2330; border-radius:10px;
  color:#d7dee6; text-decoration:none;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.soc:hover{ border-color: #2a3a50; background:#0f1520; color:#fff; }

.footer-bottom{
  margin-top: 60px;
  border-top:1px solid #101722;
  background:#0b0f15;
}
.footer-bottom__inner{
  max-width:1200px; margin:0 auto;
  padding:14px var(--pad-desktop);
  color:#8e97a3; font-size:.92rem;
}
@media (max-width:1000px){
  .footer-bottom__inner{ padding:12px var(--pad-mobile); }
}









/* Mobile: Scrollleisten der horizontalen Grids (Leistungen & Blog) ausblenden,
   aber Scrollen beibehalten */
@media (max-width: 900px){
  .services2-grid{
    -ms-overflow-style: none;   /* IE/Edge */
    scrollbar-width: none;      /* Firefox */
  }
  .services2-grid::-webkit-scrollbar{
    display: none;              /* Chrome/Safari */
  }
}

/* Mehr Luft unter dem Button "Alle Beiträge ansehen" */
.section-cta{
  margin-top: 26px;
  margin-bottom: 56px;          /* <-- zusätzlicher Abstand nach unten */
}










/* ===== Quick Tools unter dem Hero (überarbeitet) ===== */
.quick-tools-section{
  padding: 0px var(--pad-desktop) 30px;
  background: #fff;
}

/* Container ohne Hintergrund/Rahmen */
.quick-tools{
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: nowrap;     /* Desktop: in einer Reihe */
}

/* Buttons – gleicher Radius wie .btn-primary/.btn-secondary (8px) */
.qt-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;      /* <- matcht deine Buttons */
  background: transparent; /* „bloß stehen“ */
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: .95rem;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .06s ease;
}

/* Desktop: Buttons füllen die 1200px gleichmäßig */
@media (min-width: 901px){
  .qt-btn{
    flex: 1 1 0;          /* gleichmäßig verteilen */
    text-align: center;
  }
}

/* Hover/Focus */
.qt-btn:hover{
  color: var(--brand);
  border-color: rgba(0,183,255,.35);
  abackground: #f7fbff;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
.qt-btn:focus-visible{
  outline: 2px solid rgba(0,183,255,.6);
  outline-offset: 2px;
  border-color: rgba(0,183,255,.6);
}

/* Mobil: untereinander, linksbündig (nicht mittig) */
@media (max-width: 900px){
  .quick-tools{
    flex-direction: column;   /* untereinander */
    align-items: flex-start;  /* linksbündig */
    gap: 8px;
  }
  .qt-btn{
    flex: 0 0 auto;
    width: 100%;              /* volle Breite, links ausgerichtet */
    justify-content: flex-start;
  }
}


















/* ===== Blog-Archiv Kopf ===== */
.blog-archive{
  padding: 24px var(--pad-desktop) 6px;
  background: #fff;
}
@media (max-width:1000px){
  .blog-archive{ padding: 16px var(--pad-mobile) 4px; }
}
.blog-archive__head{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto; /* H1 links, Suche rechts */
  gap: 16px;
  align-items: center;
}
@media (max-width: 780px){
  .blog-archive__head{
    grid-template-columns: 1fr;       /* mobil untereinander */
    gap: 10px;
  }
}
.blog-archive__head h1{
  margin: 0;
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color:#14171a;
}

/* Suche im Archiv */
.blog-search{
  display: flex;
  gap: 10px;
  align-items: center;
}
.blog-search input[type="search"]{
  flex: 1 1 320px;          /* Desktop: wächst */
  min-width: 250px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  color:var(--text);
  background:#fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.blog-search input[type="search"]::placeholder{ color:#99a1ab; }
.blog-search input[type="search"]:focus{
  outline: none;
  border-color: rgba(0,183,255,.55);
  box-shadow: 0 0 0 3px rgba(0,183,255,.12);
}

/* Buttons nutzen deine bestehenden Klassen – hier nur Kleinkram angleichen */
.blog-search .btn-primary,
.blog-search .btn-secondary{
  border-radius: 8px;       /* gleiche Ecke wie sonst */
  padding: 10px 16px;
  white-space: nowrap;
cursor: pointer;
}

/* mobil: Suchfeld over full width, Buttons umbrechen sauber */
@media (max-width: 780px){
  .blog-search{
    width: 100%;
    gap: 8px;
  }
  .blog-search input[type="search"]{
    flex: 1 1 auto;
    min-width: unset;
  }
}

/* extra Luft unter dem Grid (der Blogseite), damit Pagination nicht klebt */
.services2-section + .pagination,
.pagination{
  margin-top: 14px;
  margin-bottom: 40px;
}
/* Einheitliche Höhe & Ausrichtung in der Blog-Suche */
.blog-search input[type="search"],
.blog-search .btn-primary,
.blog-search .btn-secondary{
  min-height: 44px;                 /* gleiche Höhe */
  display: inline-flex;
  align-items: center;
  line-height: 1;                   /* kein extra Zeilenraum */
}

/* Primär-Button: ohne Rand, flach, Markenfarbe */
.blog-search .btn-primary{
  border: none;                     /* Rand weg */
  background: var(--brand);
  color: #fff;
  padding: 0 16px;                  /* Höhe kommt über min-height */
  box-shadow: none;                 /* kein dunkler Rand */
}
.blog-search .btn-primary:hover{
  filter: brightness(0.95);
}

/* Sekundär-Button: dezenter Outline-Stil */
.blog-search .btn-secondary{
  border: 1px solid var(--border);
  background: #fff;
  color: #1b1f24;
  padding: 0 16px;
}
.blog-search .btn-secondary:hover{
  border-color: rgba(0,183,255,.35);
  color: var(--brand);
}

/* Mobil: Buttons umbrechen sauber untereinander */
@media (max-width: 780px){
  .blog-search{
    flex-wrap: wrap;
  }
  .blog-search .btn-primary,
  .blog-search .btn-secondary{
    flex: 0 0 auto;
  }
}
/* Nur Blog-Übersicht: mehr Luft zum Footer */
.page-main--blog{
  padding-bottom: 80px;   /* Desktop */
}
@media (max-width: 900px){
  .page-main--blog{ padding-bottom: 64px; } /* Mobil */
}










/* Pfeil wie bei "Mehr dazu" */
.qt-arrow{
  font-weight: 700;
  transition: transform .2s ease;
}
.qt-btn:hover .qt-arrow{ transform: translateX(2px); }

/* Desktop: Verhalten wie zuvor (zentriert mit kleinem Gap) */
@media (min-width: 901px){
  .qt-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;                 /* Text + Pfeil nebeneinander */
  }
}

/* Mobil: Text links, Pfeil ganz rechts */
@media (max-width: 900px){
  .qt-btn{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
  }
  .qt-text{ margin-right: 12px; } /* kleine Luft vor dem Pfeil */
  .qt-arrow{ margin-left: auto; } /* zwingt Pfeil an den rechten Rand */
}



















/* ===== Blog Post Layout ===== */
.page-main--post{ padding-bottom: 80px; }
@media (max-width:900px){ .page-main--post{ padding-bottom: 64px; } }

.post-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--pad-desktop);
}
@media (max-width:1000px){
  .post-container{ padding: 0 var(--pad-mobile); }
}

.post-breadcrumb{
  padding: 18px 0 6px;
  background:#fff;
  color:#6a727c;
  font-size:.95rem;
}
.post-breadcrumb a{ color:#6a727c; text-decoration:none; }
.post-breadcrumb a:hover{ color:var(--brand); }
.post-breadcrumb span{ margin:0 6px; }

.post-header{ background:#fff; padding: 10px 0 0; }
.post-header h1{
  margin: 10px 0 4px;
  font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.4rem);
  line-height: 1.15; letter-spacing:-0.02em; color:#14171a;
}
.post-meta{ margin:0 0 12px; color:#6a727c; }

.post-hero{ margin: 6px 0 10px; background:#fff; }
.post-hero img{
  width:100%; height:auto; display:block;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.06);
}

.post-wrap{ padding: 0 var(--pad-desktop); }
@media (max-width:1000px){ .post-wrap{ padding: 0 var(--pad-mobile); } }

.post{
  max-width: 760px;            /* angenehme Zeilenlänge */
  margin: 0 auto;
  color:#242a31;
  line-height: 1.72;
  font-size: 1.02rem;
}
.post h2{ font-size:1.5rem; margin:28px 0 10px; }
.post h3{ font-size:1.25rem; margin:22px 0 8px; }
.post p{ margin: 0 0 14px; }
.post ul, .post ol{ margin: 0 0 16px 22px; }
.post a{ color: var(--brand); text-decoration:none; }
.post a:hover{ text-decoration:none; }
.post img{ max-width:100%; height:auto; border-radius:12px; }
.post blockquote{
  margin:16px 0; padding:14px 18px;
  border-left:4px solid var(--brand);
  background:#f8fbff; color:#2b3138; border-radius:10px;
}

.post-back{ margin-top: 18px; }
.post-back .btn-secondary{ border-radius:8px; padding:10px 14px; }











/* --- Zuschlag-Zeilen sauber ausrichten --- */
.form-row.checks { row-gap: 10px; }

.form-row.checks .check{
  display: grid;
  grid-template-columns: auto 1fr auto; /* [Checkbox] [Text] [Preis] */
  column-gap: 10px;
  align-items: start;                   /* Preis an der ersten Textzeile ausrichten */
  margin: 0;
}

.form-row.checks .check input{
  margin-top: 2px;                      /* optische Zentrierung */
}

.form-row.checks .check > span{
  line-height: 1.35;
}

/* Preis nie umbrechen / kein „€“ in die nächste Zeile */
.form-row.checks .price-hint,
.price-hint{
  white-space: nowrap;
}











.preset-label{
  margin: 0 0 6px;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 800;
  color: #6a727c;
}










/* Mobile Kostenleiste */
.mobile-sticky{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #fff;
  border-top: 1px solid #e8edf3;
  box-shadow: 0 -10px 30px rgba(0,0,0,.08);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  z-index: 100;
  display: none; /* nur mobil sichtbar */
}
.mobile-sticky__inner{
  max-width: 1200px;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.mobile-sticky__left{display:flex; flex-direction:column; line-height:1.1}
#b_total_mob{font-size:1.3rem; font-weight:800}
.mobile-sticky__label{font-size:.85rem; color:#6a727c}

/* CTA im Sticky */
.mobile-sticky__cta{
  border: 1px solid #dfe6ef;
  background: #f7f9fc;
  color:#111;
  padding:10px 14px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
}
.mobile-sticky__cta:active{transform:translateY(1px)}

/* Platz unten schaffen, damit Inhalt nicht verdeckt wird */
@media (max-width: 900px){
  .mobile-sticky{display:block}
  main{padding-bottom: calc(72px + env(safe-area-inset-bottom))} /* Leistenhöhe + Notch */
}
/* Desktop ausblenden */
@media (min-width: 901px){
  .mobile-sticky{display:none}
}
























/* ===== Kontakt-Section vor dem Footer ===== */
.contact-band{
  background:#fff;
  padding: 56px 0;                             /* größerer Abstand oben/unten */
  border-top:1px solid var(--border);
}
.contact-band__inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 var(--pad-desktop);
  display:grid;
  grid-template-columns: 1.1fr .9fr;           /* Text links, Formular rechts */
  gap:20px;
  align-items:center;
}
@media (max-width:900px){
  .contact-band__inner{
    grid-template-columns:1fr;
    padding:0 var(--pad-mobile);
  }
}
.contact-band .eyebrow{
  display:inline-block; margin-bottom:8px;
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; font-weight:800;
  color:#2b3138; opacity:.75;
}
.contact-band h2{
  margin:0 0 8px;
  font-weight:900; line-height:1.1; letter-spacing:-.01em;
  font-size:clamp(1.5rem,1.1rem + 1.2vw,2rem); color:#14171a;
}
.contact-band .muted{ color:#6a727c; margin:0; }

.contact-band__form{
  border:1px solid var(--border);
  background:#fff;
  border-radius:16px;
  padding:16px;
  abox-shadow:0 10px 30px rgba(0,0,0,.05);
}
.cb-fields{
  display:grid; gap:12px; grid-template-columns:1fr 1fr;
}
@media (max-width:640px){ .cb-fields{ grid-template-columns:1fr; } }
.field label{ font-weight:700; display:block; margin:0 0 6px; }
.field input{
  width:100%;
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  font-size:1rem;
  background:#fff;
}
.help{ margin:8px 0 0; font-size:.92rem; color:#6a727c; }

.consent{ display:flex; gap:10px; align-items:flex-start; margin:10px 0 0; }
.consent input{ transform:translateY(2px); }
.consent a{ text-decoration:underline; text-underline-offset:2px; }

.hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

.cb-actions{
  display:flex; gap:10px; flex-wrap:wrap;
  align-items:center; margin-top:12px;
}
.btn-xl{ padding:14px 18px; border-radius:10px; font-weight:800; text-decoration:none; }

.cb-msg{ margin:10px 0; font-size:.95rem; }
.cb-msg--error{
  color:#8a1f11; background:#fff2ef; border:1px solid #ffc9bf;
  padding:8px 10px; border-radius:10px;
}
.cb-msg--ok{
  color:#0b5c2b; background:#ecfff4; border:1px solid #baf1d1;
  padding:8px 10px; border-radius:10px;
}












/* ===== Kontaktseite (schlicht) ===== */
.page-head{
  padding: 24px var(--pad-desktop);
  max-width: 1200px;
  margin: 0 auto;
}
.page-head h1{ margin: 0 0 6px; }
.page-head p{ margin: 0; color:#3b444e; }

.contact-note-wrap{
  padding: 0 var(--pad-desktop) 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.contact-note{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  background: #fff;
  margin: 0;
}
.contact-note strong{ font-weight: 800; }

.contact-wrap{
  padding: 0 var(--pad-desktop) 40px;
  max-width: 1200px;
  margin: 0 auto;
}
.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
@media (max-width: 900px){
  .contact-grid{ grid-template-columns: 1fr; gap: 20px; }
}

/* Formularcontainer schlicht */
.contact-form{
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 12px;
  padding: 16px;
}

/* --- Einheitlicher Feldstil & Fokus (schwarzer Rand, kein Glow) --- */
.contact-form .field input,
.contact-form .field textarea{
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  font-size: 1rem;
  line-height: 1.45;
  background: #fff;
  transition: border-color .15s ease;
}
.contact-form .field textarea{
  min-height: 160px;
  resize: vertical; /* nur vertikal */
}
.contact-form .field input:focus,
.contact-form .field textarea:focus,
.contact-form .field input:focus-visible,
.contact-form .field textarea:focus-visible{
  outline: none;
  border-color: #111;         /* wie "Betreff" */
  box-shadow: none;           /* kein blauer Glow */
}

/* Grid-Ausrichtung im Formular */
.contact-form .cb-fields{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.contact-form .field--full{ grid-column: 1 / -1; }
@media (max-width: 640px){
  .contact-form .cb-fields{ grid-template-columns: 1fr; }
}

.contact-form .help{
  margin: 8px 0 0;
  font-size: .92rem;
  color: #6a727c;
}

/* === Kontakt: Formular auf Desktop full-width === */
.contact-grid{ grid-template-columns: 1fr !important; }
.contact-grid > div:empty { display: none; }
.contact-form{ grid-column: 1 / -1; }

/* === Einheitliche Buttons (Senden & Anruf identisch in Höhe/Typo) === */
.cb-actions{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

.contact-form .btn-primary,
.contact-form .btn-secondary,
.cb-actions .btn-primary,
.cb-actions .btn-secondary,
.cb-actions a[href^="tel"]{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  min-height: 48px;             /* exakt gleiche Höhe */
  border-radius: 10px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;               /* keine Zusatzhöhe */
  text-decoration: none;
  border: none;                 /* keine Bordern */
  box-shadow: none;
  cursor: pointer;              /* Zeiger */
  transition: transform .06s ease, filter .2s ease;
}

/* Primär-Button (Senden) – wie Startseite */
.contact-form .btn-primary,
.cb-actions .btn-primary{
  background: var(--brand);
  color: #fff;
}
.contact-form .btn-primary:hover,
.cb-actions .btn-primary:hover{ filter: brightness(.95); transform: translateY(-1px); }

/* Sekundär/Anruf – gleiche Maße, dezentes Grau */
.contact-form .btn-secondary,
.cb-actions .btn-secondary,
.cb-actions a[href^="tel"]{
  background: #f3f5f8;
  color: #111;
}
.contact-form .btn-secondary:hover,
.cb-actions .btn-secondary:hover,
.cb-actions a[href^="tel"]:hover{ filter: brightness(.97); transform: translateY(-1px); }













/* Globaler, einheitlicher Fokus für alle Form-Controls */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus,
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="password"]:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline: none;
  border-color: #111;
  box-shadow: none;
}














@media (max-width: 900px) {
  /* Reihenfolge mobil immer Text oben, Bild unten */
  .service-feature__text {
    order: 1 !important;
  }
  .service-feature__media {
    order: 2 !important;
  }

  .service-feature__media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 18px;
  }
}
@media (max-width: 900px) {
  /* Grid auflösen */
  .service-feature__inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
  }

  /* Reihenfolge erzwingen */
  .service-feature__text {
    order: 1 !important;
  }

  .service-feature__media {
    order: 2 !important;
    width: 100% !important;
  }

  .service-feature__media img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
  }
}














.section-lead {
  padding: 36px var(--pad-desktop);
  background: #fff;
}

.section-lead__inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.section-lead__inner p {
  font-size: 1.15rem;
  line-height: 1.7;
  color: #3b444e;
  font-weight: 500;
  margin: 0;
}

.section-lead__inner strong {
  color: var(--brand);
  font-weight: 700;
}

@media (max-width: 900px) {
  .section-lead {
    padding: 28px var(--pad-mobile);
  }
  .section-lead__inner p {
    font-size: 1rem;
    line-height: 1.6;
  }
}
























/* =======================================
   Mobile Nav Extras (Kostenrechner/Blog)
   ======================================= */

/* Standardmäßig auf Desktop ausblenden */
.mobile-nav-extras {
  display: none;
  margin-top: 1rem; /* Abstand zur Haupt-Nav-Liste */
}

/* Nur anzeigen, wenn mobiles Menü offen ist (Breakpoint aus JS) */
@media (max-width: 900px) {
  .main-nav.open .mobile-nav-extras {
    display: block;
width: 100%;
  }
}

.mobile-extra {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.mobile-extra:not(:last-child) {
  margin-bottom: 1rem; /* Abstand zwischen Rechner und Blog */
}

.mobile-extra:hover,
.mobile-extra:focus {
  outline: none;
}

/* Bild (Blog) */
.mobile-extra--blog .mobile-extra__image {
  width: 100%;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.1);
}

.mobile-extra__text {
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
  line-height: 1.4;
  /* Verhindert Textumbruch bei langen Titeln */
  overflow: hidden;
}

.mobile-extra__text strong {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.mobile-extra__text span {
  /* Text abschneiden, falls er zu lang wird */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
















/* =======================================
   HERO: Full Width mit linkem Textblock
   ======================================= */

.hero-section {
  padding: 0;
  margin: 0 0 20px; /* Abstand zu den Quick Tools */
}

.hero-card {
  position: relative;
  width: 100%;
  border-radius: 0;
  margin: 0;
  overflow: hidden;
  background: url('/images/hero.jpg') center/cover no-repeat;
  color: #fff;
}

/* Abdunklung über gesamte Breite */
.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.82) 0%,
    rgba(0,0,0,0.78) 26%,
    rgba(0,0,0,0.55) 48%,
    rgba(0,0,0,0.18) 65%,
    rgba(0,0,0,0.00) 78%
  );
  pointer-events: none;
  z-index: 0;
}

/* Inhalt im Container, aber links angelehnt */
.hero-card__content {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  z-index: 1;
}

.hero-card__text {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 60px var(--pad-desktop);
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Text links ausrichten */
  text-align: left;        /* Kein mittiger Text */
}

.hero-card__text h1 {
  margin: 0 0 12px;
  font-size: 2.6rem;
  line-height: 1.2;
  font-weight: 800;
}

.hero-card__text p {
  margin: 0;
  color: #e8eef5;
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 680px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.btn-primary,
.btn-secondary {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .06s ease, filter .2s ease;
}

.btn-primary {
  background: var(--brand);
  color: #fff;
}

.btn-primary:hover {
  filter: brightness(.95);
  transform: translateY(-1px);
}

.btn-secondary {
  background: #fff;
  color: #111;
  border: 1px solid #fff;
}

.btn-secondary:hover {
  background: #f5f5f5;
  transform: translateY(-1px);
}

/* ===========================
   Responsive Anpassungen
   =========================== */
@media (max-width: 1000px) {
  .hero-card__content {
    min-height: 340px;
  }
  .hero-card__text {
    padding: 40px var(--pad-mobile);
  }
  .hero-card__text h1 {
    font-size: 2rem;
  }
  .hero-card__text p {
    font-size: 1rem;
  }
  .hero-section {
    margin-bottom: 32px; /* etwas geringerer Abstand mobil */
  }
}





.hero-card__text {
  width: 100%;
  max-width: calc(var(--container) + 40px); /* etwas breiter, bleibt aber am Raster orientiert */
  margin: 0 auto;
  padding: 60px var(--pad-desktop);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}



.hero-home .hero-card {
  background: url('/images/hero-home.jpg') center/cover no-repeat;
}

.hero-schliesstechnik .hero-card {
  background: url('/images/hero-schliesstechnik.jpg') center/cover no-repeat;
}

.hero-sicherheitskonzepte .hero-card {
  background: url('/images/hero-sicherheitskonzepte.jpg') center/cover no-repeat;
}

.hero-unternehmen .hero-card {
  background: url('/images/hero-unternehmen.jpg') center/cover no-repeat;
}































/* ===========================
   COOKIE MODAL
   =========================== */

.cookie-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.cookie-modal[hidden] {
  display: none !important;
}

.cookie-modal__content {
  background: #fff;
  width: 90%;
  max-width: 480px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  padding: 2rem 2.2rem;
  text-align: left;
  position: relative;
  animation: fadeInScale .25s ease-out;
}

@keyframes fadeInScale {
  from {opacity: 0; transform: scale(0.95);}
  to {opacity: 1; transform: scale(1);}
}

.cookie-modal__content h2 {
  margin-top: 0;
  font-size: 1.6rem;
  color: #111;
}

.cookie-modal__content p {
  font-size: 1rem;
  color: #444;
  margin-bottom: 1.5rem;
  line-height: 1.4;
}

.cookie-opt {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .7rem;
  font-size: 0.95rem;
  color: #333;
}

.cookie-opt input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.cookie-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1.8rem;
}

.cookie-actions .btn-primary,
.cookie-actions .btn-secondary {
  font-size: .95rem;
  border-radius: 8px;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
}

.cookie-actions .btn-primary {
  background: var(--brand);
  color: #fff;
  border: none;
  transition: background .25s ease;
}

.cookie-actions .btn-secondary {
  background: #eee;
  color: #222;
  border: 1px solid #ccc;
}

.cookie-actions .btn-secondary:hover {
  background: #e2e2e2;
}

.linklike {
  background: none;
  border: none;
  color: #d7dee6;
  text-decoration: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

.linklike:hover {
  color: #007bff;
}

/* Kleine Geräte */
@media (max-width: 480px) {
  .cookie-modal__content {
    padding: 1.5rem;
    border-radius: 12px;
  }
  .cookie-modal__content h2 {
    font-size: 1.3rem;
  }
}












/* ===== Schnellkontakt PRO – Styling-Upgrade ===== */
.contact-band--pro{
  background: #f9fbfe;
  border-top: 1px solid var(--border);
  padding: 52px 0 56px;
}
.contact-band--pro .contact-band__inner{
  gap: 28px;
}

/* Linke Seite: Trust-Elemente */
.contact-trust{
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  color: #3b444e;
  font-weight: 600;
}
@media (max-width: 640px){
  .contact-trust{ grid-template-columns: 1fr; }
}
.contact-trust li{
  display: flex; align-items: center; gap: 10px;
}
.trust-ico{
  width: 18px; height: 18px; flex: 0 0 18px; border-radius: 999px;
  background: var(--brand);
  position: relative;
}
.trust-ico::after{
  content: ""; position: absolute; inset: 0;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="white"><path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20.3 7.7l-1.4-1.4z"/></svg>') center / 80% 80% no-repeat;
  background: #fff;
}

/* Rechte Seite: Formularkarte */
.contact-form--pro{
  border: 1px solid #dfe6ef;
  border-radius: 16px;
  background: #fff;
  padding: 18px;
}

/* Felder mit dezenten Icons */
.field--withicon{ position: relative; }
.field--withicon input{
  padding-left: 42px; /* Platz für Icon */
}
.field--withicon::before{
  content: "";
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; opacity: .66;
  background: #5d636a;
  mask: center / contain no-repeat;
}
.field--withicon:first-child::before{
  /* Telefon-Icon */
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="white" d="M6.62 10.79a15.053 15.053 0 006.59 6.59l2.2-2.2a1 1 0 011.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 011 1V21a1 1 0 01-1 1C10.85 22 2 13.15 2 2a1 1 0 011-1h3.5a1 1 0 011 1c0 1.24.2 2.45.57 3.57a1 1 0 01-.24 1.02l-2.2 2.2z"/></svg>');
}
.field--withicon:nth-child(2)::before{
  /* Mail-Icon */
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="white" d="M20 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm0 4l-8 5L4 8V6l8 5 8-5v2z"/></svg>');
}

/* Fokus & Interaktionen – konsistent, hochwertig */
.contact-form--pro .field input{
  border: 1px solid #dfe6ef;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.contact-form--pro .field input:focus{
  border-color: rgba(0,183,255,.55);
  box-shadow: 0 0 0 3px rgba(0,183,255,.14);
  background: #fcfeff;
}

/* Buttons in der Karte: gleiche Höhen, klare Hierarchie */
.contact-form--pro .btn-xl{ min-height: 48px; }
.contact-form--pro .btn-primary{
  background: var(--brand);
  border: none;
}
.contact-form--pro .btn-primary:hover{ filter: brightness(.98); transform: translateY(-1px); }
.contact-form--pro .btn-secondary{
  border: 1px solid #dfe6ef;
  background: #f7f9fc; color: #111;
}
.contact-form--pro .btn-secondary:hover{ border-color: rgba(0,183,255,.35); transform: translateY(-1px); }

/* Systemmeldungen etwas prominenter & zugänglich */
.cb-msg--error{ background:#fff3f3; border-color:#ffd1d1; color:#7a1010; }
.cb-msg--ok{ background:#eefdf4; border-color:#b9f0cf; color:#0b5c2b; }





/* --- Fix: Icons korrekt im Input platzieren --- */
.field--withicon::before { display: none !important; } /* altes Pseudo-Icon aus */

#cb_phone,
#cb_email{
  padding-left: 44px !important;         /* Platz fürs Icon */
  background-repeat: no-repeat;
  background-position: 12px 50%;         /* 12px vom linken Rand, vertikal zentriert */
  background-size: 18px 18px;
}

/* Telefon-Icon */
#cb_phone{
  background-image: url('data:image/svg+xml;utf8,\
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">\
  <path fill="%235d636a" d="M6.62 10.79a15.053 15.053 0 006.59 6.59l2.2-2.2a1 1 0 011.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 011 1V21a1 1 0 01-1 1C10.85 22 2 13.15 2 2a1 1 0 011-1h3.5a1 1 0 011 1c0 1.24.2 2.45.57 3.57a1 1 0 01-.24 1.02l-2.2 2.2z"/></svg>');
}

/* Mail-Icon */
#cb_email{
  background-image: url('data:image/svg+xml;utf8,\
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">\
  <path fill="%235d636a" d="M20 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm0 4l-8 5L4 8V6l8 5 8-5v2z"/></svg>');
}

/* Optional: Fokuszustand behält Icon-Position */
#cb_phone:focus,
#cb_email:focus{
  background-position: 12px 50%;
}



















/*  BLOG POST */

/* Modernes, schlankes Layout */
.post-wrap{max-width:960px;margin:0 auto;padding:0 1rem}
.post-header .post-container,
.post-breadcrumb .post-container,
.post-hero .post-container{max-width:960px;margin:0 auto;padding:0 1rem}

/* Smooth Scroll und Anker-Offset unter fixem Header */
html{scroll-behavior:smooth}
h2, h3{scroll-margin-top:90px}

/* Progress-Bar (oben) */
.read-progress{position:sticky;top:0;left:0;right:0;height:4px;background:transparent;z-index:20}
.read-progress__bar{display:block;height:100%;width:0;background:linear-gradient(90deg,#00BFF3,#008ecc)}

/* Akkordeon-TOC (ohne Counter, mit linkem Balken) */
.toc-accordion{margin:1rem 0;border:1px solid #eaeaea;border-radius:12px;padding:.75rem 1rem;background:#fafafa}
.toc-accordion > summary{cursor:pointer;font-weight:600;list-style:none;display:flex;align-items:center;gap:.5rem}
.toc-accordion > summary::-webkit-details-marker{display:none}
.toc-ico{margin-right:.25rem;display:inline-block;transform:translateY(-1px)}

.toc-accordion__content{margin-top:.75rem}
.toc-accordion__content ul{margin:0;padding:0;list-style:none}
.toc-accordion__content li{margin:.2rem 0}

.toc-accordion__content li.toc-h2{
  position:relative;
  padding:.35rem .5rem .35rem .75rem; /* Platz für Balken */
}
.toc-accordion__content li.toc-h2::before{
  content:"";
  position:absolute; left:0; top:.3rem; bottom:.3rem;
  width:3px; background:#008ecc; border-radius:2px;
}
.toc-accordion__content li.toc-h3{
  padding:.25rem .5rem .25rem 1.25rem; opacity:.9;
}

.toc-accordion__content a{
  display:block; padding:.1rem 0; text-decoration:none;
  border-bottom:1px dashed transparent; transition:all .15s ease;
}
.toc-accordion__content a:hover{border-bottom-color:#00BFF3; transform:translateX(2px)}

/* Bilder & Figuren */
.post-inline-figure, .post-hero{margin:1.5rem 0;text-align:center}
.post-inline-figure img, .post-hero img{max-width:100%;height:auto;border-radius:10px}
.post-inline-figure figcaption, .post-hero figcaption{font-size:.9rem;color:#666;margin-top:.5rem}

/* Pager */
.post-pager{display:flex;justify-content:space-between;margin-top:2rem;gap:1rem}
.pager-item{display:inline-block;border:1px solid #eee;border-radius:10px;padding:.6rem .9rem;text-decoration:none}

/* Typografie */
.post h1{line-height:1.2;margin:0 0 .5rem}
.post h2{margin:2rem 0 1rem}
.post h3{margin:1.25rem 0 .75rem}
.post p{line-height:1.7}

/* Mobile */
@media (max-width:640px){
  .toc-accordion{border-radius:10px}
}
/* ---- Schöne, konsistente Linkfarben ---- */
:root{
  --link:        #008ecc;  /* dunkelblau (wie Progress-Ende) */
  --link-hover:  #00BFF3;  /* cyan (wie Progress-Start) */
  --link-active: #006b99;  /* dunkler für active */
  --link-visited:#006b99;  /* dezente Variante für visited */
  --underline:   currentColor;
}

/* Links im Artikel allgemein */
.post a{
  color: var(--link);
  text-decoration: none;
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
  text-decoration-color: color-mix(in srgb, var(--underline) 60%, transparent);
  transition: color .15s ease, text-decoration-color .15s ease;
}
.post a:hover{
  color: var(--link-hover);
  text-decoration-color: var(--link-hover);
}
.post a:active{
  color: var(--link-active);
}
.post a:visited{
  color: var(--link-visited);
}

/* ToC-Links exakt angleichen */
.toc-accordion__content a{
  color: var(--link);
  border-bottom: 1px dashed transparent; /* bleibt aus deinem Stil */
  text-decoration: none;                  /* ToC ohne Unterlinie */
}
.toc-accordion__content a:hover{
  color: var(--link-hover);
  border-bottom-color: var(--link-hover);
  transform: translateX(2px);
}

/* Pager-Links angleichen */
.pager-item{
  color: var(--link);
}
.pager-item:hover{
  color: #fff;
  background: linear-gradient(90deg, var(--link-hover), var(--link));
  border-color: transparent;
}

/* ===== Blog: Back-Link & Prev/Next flat, CI-konform ===== */

/* Doppelte Pfeile sicher ausschalten (falls alte Pseudo-Elemente existieren) */
.post-back .btn-secondary::before,
.post-back .btn-secondary::after,
.post-pager .pager-item::before,
.post-pager .pager-item::after { content: none !important; }

/* Zurück-Link: als schlichter Textlink im Brand-Style */
.post-back .btn-secondary{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:0; margin:0;
  background:transparent; border:0; border-radius:0;
  color: var(--brand); font-weight:700; text-decoration:none;
  box-shadow:none;
}
.post-back .btn-secondary:hover{ text-decoration:underline; }
.post-back .btn-secondary:focus-visible{
  outline:2px solid color-mix(in srgb, var(--brand) 55%, transparent);
  outline-offset:2px;
}

/* Prev/Next: flache Outline-Buttons, ruhig */
.post-pager{ gap:.75rem; }
.post-pager .pager-item{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.65rem 1rem;
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  color:#1b1f24; /* ruhiger Text */
  text-decoration:none;
  box-shadow:none;
  transition:border-color .15s ease, background-color .15s ease, color .15s ease, transform .05s ease;
}
.post-pager .pager-item:hover{
  border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
  background:#f5f7fb;
  color: var(--brand);
}
.post-pager .pager-item:active{ transform: translateY(1px); }
.post-pager .pager-item:focus-visible{
  outline:2px solid color-mix(in srgb, var(--brand) 55%, transparent);
  outline-offset:3px;
}

/* ToC-Links gleich ruhig halten */
.toc-accordion__content a{
  color:#1b1f24; text-decoration:none; border-bottom:1px dashed transparent;
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.toc-accordion__content a:hover{
  color: var(--brand);
  border-bottom-color: var(--brand);
  transform: translateX(2px);
}




/* ===== Blog: Weitere Beiträge (Karten) / Fallback Back-Link ===== */

/* Karten-Sektion */
.post-more{
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.post-more__title{
  margin: 0 0 12px;
  font-size: 1.15rem;
  line-height: 1.25;
  letter-spacing: .2px;
  color: #14171a;
}

/* Grid: 3 auf Desktop, 2 auf Tablet, 1 auf Mobil */
.post-more__grid{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1000px){
  .post-more__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .post-more__grid{ grid-template-columns: 1fr; }
}

/* Karte */
.post-card{
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  transition: border-color .2s ease, transform .08s ease, box-shadow .22s ease;
}
.post-card:hover{
  border-color: rgba(0,183,255,.35);
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0,0,0,.06);
}

/* Link füllt die Karte */
.post-card__link{
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 10px;
  text-decoration: none;
  color: #1b1f24;
  padding: 10px;
}

/* Bild */
.post-card__media{
  margin: 0; border-radius: 10px; overflow: hidden; background: #f4f6f8;
  aspect-ratio: 16 / 9;
}
.post-card__media img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .25s ease;
}
.post-card:hover .post-card__media img{
  transform: scale(1.02);
}

/* Titel + Auszug */
.post-card__title{
  margin: 0; font-size: 1.05rem; line-height: 1.3; font-weight: 800; color:#14171a;
}
.post-card__excerpt{
  margin: 0; color:#5d636a; font-size: .98rem;
}

/* Fallback Back-Link minimal & CI-konform */
.post-back{ margin-top: 18px; }
.post-back .btn-secondary{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:0; background:transparent; border:0; border-radius:0;
  color: var(--brand); font-weight:700; text-decoration:none; box-shadow:none;
}
.post-back .btn-secondary:hover{ text-decoration: underline; }
.post-back .btn-secondary:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent);
  outline-offset: 2px;
}

/* Sicherheit: alte Pfeil-Pseudo-Elemente deaktivieren (verhindert doppelte Pfeile) */
.post-back .btn-secondary::before,
.post-back .btn-secondary::after{ content: none !important; }