/* ====================================================
   BlowerDoorMR — Global Stylesheet
   2026-06-11 | v1.0 — WordPress-freier Neuaufbau
   ==================================================== */

/* ---- 1. Custom Properties ---- */
:root {
  --red:       #e60000;
  --red-dk:    #b00000;
  --red-fade:  rgba(230,0,0,.08);
  --red-glow:  rgba(230,0,0,.28);
  --navy:      #0f172a;
  --navy-lt:   #1e293b;
  --blue:      #2b6cb0;
  --text:      #1a1a1a;
  --text-md:   #374151;
  --text-lt:   #6b7280;
  --border:    #e5e7eb;
  --bg:        #f9fafb;
  --bg-alt:    #edf2f7;
  --white:     #ffffff;

  --font:      'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen-Sans, Ubuntu, sans-serif;
  --font-slab: 'Roboto Slab', Georgia, 'Times New Roman', serif;

  --w:         1140px;
  --r-sm:      4px;
  --r:         8px;
  --r-lg:      14px;
  --sh-sm:     0 1px 4px rgba(0,0,0,.08);
  --sh:        0 2px 14px rgba(0,0,0,.10);
  --sh-lg:     0 8px 32px rgba(0,0,0,.14);
  --t:         .2s ease;
  --nav-h:     72px;

  /* ── Motion tokens (motion-foundations) ── */
  --dur-instant:  80ms;
  --dur-fast:    180ms;
  --dur-normal:  350ms;
  --dur-slow:    600ms;
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-sharp:  cubic-bezier(0.40, 0, 0.20, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dist-sm:  8px;
  --dist-md: 16px;
  --dist-lg: 24px;
  --scroll-progress: 0;
}

/* ---- 2. Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
address { font-style: normal; }
button { cursor: pointer; border: none; background: none; font: inherit; }
table { border-collapse: collapse; width: 100%; }

/* ---- 3. Typography ---- */
h1,h2,h3,h4,h5,h6 { font-weight: 700; line-height: 1.25; color: var(--navy); }
h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2.1rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.45rem); }
h4 { font-size: 1.15rem; }
p  { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; }
.lead { font-size: 1.12rem; line-height: 1.7; color: var(--text-md); }

/* ---- 4. Layout ---- */
.container {
  width: 100%;
  max-width: var(--w);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

.section { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section--alt   { background: var(--bg); }
.section--navy  { background: var(--navy); color: var(--white); }
.section--rfade { background: var(--red-fade); }

.section__head {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.section__kicker {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: .6rem;
}
.section__title { margin-bottom: .6rem; }
.section__sub   { color: var(--text-md); font-size: 1.05rem; }

/* ---- 5. Grid helpers ---- */
.grid   { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-4 { grid-template-columns: repeat(4,1fr); }

@media (max-width:1023px){ .grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 767px){ .grid-3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 479px){ .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr; } }

/* ---- 6. Navigation ---- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: var(--nav-h);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,.07);
  transition: box-shadow var(--t);
}
.site-header.scrolled { box-shadow: var(--sh); }

.nav {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.nav__logo { display:flex; align-items:center; flex-shrink:0; margin-right: .5rem; }
.nav__logo img { height: 46px; width: auto; }

.nav__menu {
  display: flex;
  align-items: center;
  gap: .15rem;
  margin-left: auto;
}
.nav__item { position: relative; }
.nav__link {
  display: block;
  padding: .4rem .7rem;
  font-weight: 500;
  font-size: .93rem;
  color: var(--navy);
  border-radius: var(--r-sm);
  transition: color var(--t), background var(--t);
}
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--red); background: var(--red-fade); }

.nav__sub {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  background: var(--white);
  border-radius: var(--r);
  box-shadow: var(--sh-lg);
  border: 1px solid var(--border);
  padding: 6px 0 .5rem;
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(var(--dist-sm));
  transition:
    opacity var(--dur-fast) var(--ease-smooth),
    transform var(--dur-fast) var(--ease-smooth),
    visibility 0s var(--dur-fast);
}
.nav__item:hover .nav__sub,
.nav__item:focus-within .nav__sub {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity var(--dur-fast) var(--ease-smooth),
    transform var(--dur-fast) var(--ease-smooth),
    visibility 0s;
}
.nav__sub a {
  display: block;
  padding: .5rem 1rem;
  font-size: .88rem;
  color: var(--text-md);
  transition: color var(--t), background var(--t);
}
.nav__sub a:hover { color: var(--red); background: var(--bg); }

.btn--nav {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--red);
  color: var(--white) !important;
  font-weight: 700;
  font-size: .88rem;
  padding: .5rem 1.1rem;
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: background var(--t);
  flex-shrink: 0;
}
.btn--nav:hover { background: var(--red-dk); }

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  padding: 7px;
  margin-left: auto;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
.nav__toggle span {
  display: block; height: 2px;
  background: var(--navy); border-radius: 2px;
  transition: transform .25s, opacity .25s;
  transform-origin: center;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width:767px){
  .nav__toggle { display: flex; }
  .nav__menu {
    display: none;
    position: absolute;
    top: var(--nav-h); left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--white);
    border-top: 1px solid var(--border);
    box-shadow: var(--sh-lg);
    padding: .75rem 1rem 1.25rem;
    gap: .2rem;
    margin-left: 0;
  }
  .nav__menu.open { display: flex; }
  .nav__sub {
    display: block;
    position: static;
    box-shadow: none;
    border: none;
    padding: 0 0 0 1rem;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition: none;
  }
  .btn--nav { margin-top: .5rem; justify-content: center; }
}

/* ---- 7. Hero ---- */
.hero {
  position: relative;
  min-height: min(640px, calc(100vh - var(--nav-h)));
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform-origin: center center;
  will-change: transform, opacity;
}
.hero__slide--1 {
  background-image: url('../img/hero1.webp');
  animation: slide1 20s linear infinite;
}
.hero__slide--2 {
  background-image: url('../img/hero2.webp');
  animation: slide2 20s linear infinite;
}

/* Ken Burns: jedes Bild zoomt von 1.0 → 1.08 während sichtbar (walk-toward feel).
   Reset auf 1.0 passiert während das Bild unsichtbar ist — nie sichtbar für den User. */
@keyframes slide1 {
  0%   { opacity: 1; transform: scale(1.0); }   /* sichtbar – startet normal */
  44%  { opacity: 1; transform: scale(1.08); }  /* sichtbar – vollständig reingezoomt */
  50%  { opacity: 0; transform: scale(1.08); }  /* ausgeblendet */
  51%  { opacity: 0; transform: scale(1.0); }   /* Reset unsichtbar */
  94%  { opacity: 0; transform: scale(1.0); }
  100% { opacity: 1; transform: scale(1.0); }   /* eingeblendet – nächster Zyklus */
}
@keyframes slide2 {
  0%   { opacity: 0; transform: scale(1.0); }
  44%  { opacity: 0; transform: scale(1.0); }
  50%  { opacity: 1; transform: scale(1.0); }   /* eingeblendet – startet normal */
  94%  { opacity: 1; transform: scale(1.08); }  /* sichtbar – vollständig reingezoomt */
  100% { opacity: 0; transform: scale(1.08); }  /* ausgeblendet */
}

.hero__content {
  position: relative; z-index: 1;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-block: 2.5rem;
}
.hero__box {
  max-width: 400px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem,3vw,2rem) clamp(1.25rem,3vw,1.75rem);
  box-shadow: var(--sh-lg);
  animation: hero-fade-up var(--dur-slow) var(--ease-smooth) 0.15s both;
}
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(var(--dist-lg)); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero__kicker {
  font-size: .77rem; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--red); margin-bottom: .75rem;
}
.hero__title {
  font-size: clamp(1.3rem,2.8vw,1.9rem);
  color: var(--navy); margin-bottom: .85rem; font-weight: 800;
}
.hero__sub {
  font-size: .93rem; line-height: 1.65;
  color: var(--text-md); margin-bottom: 1.25rem;
}

@media (max-width:767px){
  .hero { min-height: auto; padding-top: calc(var(--nav-h) + 1rem); }
  .hero__content { justify-content: center; padding-block: 1.5rem; }
  .hero__box { max-width: 100%; }
}

/* ---- 8. Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: .4rem;
  font-weight: 700;
  border-radius: var(--r);
  transition: transform .15s, box-shadow .15s, background .2s, color .2s;
  cursor: pointer;
  border: 2px solid transparent;
}
.btn--primary {
  background: var(--red); color: var(--white);
  padding: .7rem 1.5rem; font-size: 1rem;
}
.btn--primary:hover {
  background: var(--red-dk);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--red-glow);
}
.btn--secondary {
  background: var(--navy); color: var(--white);
  padding: .7rem 1.5rem; font-size: 1rem;
}
.btn--secondary:hover { background: var(--navy-lt); transform: translateY(-1px); }
.btn--ghost {
  background: transparent; color: var(--red);
  border-color: var(--red);
  padding: .65rem 1.4rem; font-size: 1rem;
}
.btn--ghost:hover { background: var(--red); color: var(--white); }
.btn--ghost-white {
  background: transparent; color: var(--white);
  border-color: rgba(255,255,255,.5);
  padding: .65rem 1.4rem; font-size: 1rem;
}
.btn--ghost-white:hover { background: rgba(255,255,255,.12); border-color: var(--white); }
.btn:active     { transform: scale(0.97) translateY(0) !important; transition-duration: var(--dur-instant) !important; }
.btn--nav:active { transform: scale(0.97); transition-duration: var(--dur-instant); }
.btn--sm  { padding: .5rem 1.1rem; font-size: .88rem; }
.btn--lg  { padding: .9rem 2rem;   font-size: 1.05rem; }
.btn-group { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---- 9. USP Strip ---- */
.usp-strip {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1.5rem;
  padding-block: 2rem;
}
.usp-strip > .container { grid-column: 1 / -1; }
@media (max-width:1023px){ .usp-strip { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 479px){ .usp-strip { grid-template-columns: 1fr; } }

.usp-item {
  display: flex; align-items: flex-start; gap: .9rem;
}
.usp-item__icon {
  flex-shrink: 0;
  width: 2.5rem; display: flex; align-items: flex-start; justify-content: center;
  margin-top: .25rem; color: var(--red);
}
.usp-item__icon svg { width: 24px; height: 24px; }
.usp-item__title  { font-size: 1rem; font-weight: 700; margin-bottom: .15rem; color: var(--navy); }
.usp-item__desc   { font-size: .87rem; color: var(--text-md); line-height: 1.55; margin: 0; }

/* ---- 10. Service Cards ---- */
.services {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.5rem;
}
@media (max-width:1023px){ .services { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 479px){ .services { grid-template-columns: 1fr; } }

.svc-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--sh-sm);
  transition: transform var(--dur-normal) var(--ease-smooth),
              box-shadow var(--dur-normal) var(--ease-smooth);
}
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.svc-card__icon {
  display: flex; align-items: center; justify-content: center;
  height: 72px;
  background: var(--red-fade);
  color: var(--red);
  border-bottom: 1px solid rgba(230,0,0,.12);
}
.svc-card__icon svg { width: 32px; height: 32px; }
.svc-card__body { padding: 1.25rem 1.4rem 1.5rem; flex: 1; display: flex; flex-direction: column; }
.svc-card__title { font-size: 1.08rem; color: var(--navy); margin-bottom: .45rem; }
.svc-card__desc  { font-size: .91rem; color: var(--text-md); line-height: 1.6; flex: 1; margin-bottom: 1rem; }
.svc-card__link  {
  font-weight: 700; font-size: .88rem; color: var(--red);
  display: inline-flex; align-items: center; gap: .25rem; align-self: flex-start;
}
.svc-card__link::after { content:'→'; transition: transform var(--t); }
.svc-card__link:hover::after { transform: translateX(3px); }

/* ---- 11. Two-column content rows (Leistungen-Detail) ---- */
.content-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.content-row--reverse { direction: rtl; }
.content-row--reverse > * { direction: ltr; }
.content-row__img {
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg);
}
.content-row__img img { width: 100%; object-fit: cover; }
@media (max-width:767px){ .content-row,.content-row--reverse { grid-template-columns:1fr; direction:ltr; } }

/* Checklist */
.checklist { list-style: none; margin-top: .75rem; }
.checklist li {
  padding: .32rem 0 .32rem 1.75rem;
  position: relative;
  font-size: .96rem; color: var(--text-md);
}
.checklist li::before {
  content: '✓'; position: absolute; left: 0;
  color: var(--red); font-weight: 800;
}

/* ---- 12. Pricing ---- */
.steps {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1.25rem;
  margin-bottom: 3rem;
}
@media (max-width: 767px){ .steps { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 479px){ .steps { grid-template-columns: 1fr; } }

.step { text-align: center; padding: 1.75rem 1.25rem; }
.step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--red); color: var(--white);
  font-weight: 800; font-size: 1.25rem;
  margin: 0 auto 1rem;
}
.step__title { font-size: 1.05rem; margin-bottom: .4rem; }
.step__desc  { font-size: .9rem; color: var(--text-md); }

.price-table { background: var(--white); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh); }
.price-table th {
  background: var(--navy); color: var(--white);
  padding: .9rem 1.25rem; text-align: left; font-size: .95rem;
}
.price-table td { padding: .85rem 1.25rem; border-bottom: 1px solid var(--border); font-size: .95rem; }
.price-table tr:last-child td { border-bottom: none; }
.price-table tr:nth-child(even) td { background: var(--bg); }
.price-table td:last-child { font-weight: 700; color: var(--navy); text-align: right; }
.price-note { font-size: .82rem; color: var(--text-lt); margin-top: .6rem; }

.price-badge {
  display: inline-block;
  background: var(--red); color: var(--white);
  padding: .35rem .9rem; border-radius: 999px;
  font-size: .88rem; font-weight: 700;
}

/* ---- 13. FAQ Accordion ---- */
.faq { max-width: 760px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__item:first-child { border-top: 1px solid var(--border); }
.faq__btn {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; width: 100%; text-align: left;
  padding: 1.1rem 0;
  font-size: 1rem; font-weight: 700; color: var(--navy);
  transition: color var(--t);
}
.faq__btn[aria-expanded="true"] { color: var(--red); }
.faq__icon {
  flex-shrink: 0;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 2px solid var(--red);
  display: flex; align-items: center; justify-content: center;
  color: var(--red); font-size: 1.1rem; font-weight: 700; line-height: 1;
  transition: transform var(--t), background var(--t), color var(--t);
}
.faq__btn[aria-expanded="true"] .faq__icon {
  background: var(--red); color: var(--white); transform: rotate(45deg);
}
.faq__body {
  overflow: hidden; max-height: 0;
  transition: max-height var(--dur-normal) var(--ease-smooth),
              padding var(--dur-normal) var(--ease-smooth);
}
.faq__body.open { max-height: 800px; }
.faq__body p {
  font-size: .96rem; color: var(--text-md); line-height: 1.7;
  padding-bottom: 1.1rem; margin: 0;
}

/* ---- 14. Reviews ---- */
.reviews-rating {
  text-align: center; margin-bottom: 2rem;
  font-size: 1.05rem; color: var(--text-md);
}
.reviews-rating strong { color: var(--navy); }
.reviews-rating .stars { color: #f59e0b; font-size: 1.2rem; display: block; margin-bottom: .25rem; }

/* Karussell-Wrapper */
.reviews-carousel {
  overflow: hidden;
  position: relative;
  margin-inline: calc(-1 * clamp(16px,4vw,32px)); /* rand-to-rand */
  padding-inline: 0;
}
.reviews-carousel::before,
.reviews-carousel::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(40px,8vw,100px);
  z-index: 2;
  pointer-events: none;
}
.reviews-carousel::before { left:  0; background: linear-gradient(to right, var(--bg,#f6f7fb), transparent); }
.reviews-carousel::after  { right: 0; background: linear-gradient(to left,  var(--bg,#f6f7fb), transparent); }

.reviews {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  padding-block: .5rem;
  animation: bdmr-scroll 36s linear infinite;
}
.reviews-carousel:hover .reviews { animation-play-state: paused; }

@keyframes bdmr-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.review {
  background: var(--white);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); padding: 1.4rem 1.4rem 1.2rem;
  min-width: 300px; max-width: 340px;
  flex-shrink: 0;
}
.review__stars  { color: #f59e0b; font-size: 1.05rem; margin-bottom: .6rem; }
.review__text   { font-size: .91rem; color: var(--text-md); line-height: 1.65; margin-bottom: .75rem; font-style: italic; }
.review__author { font-size: .84rem; font-weight: 700; color: var(--navy); }

/* ---- 15. Blog Grid ---- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.5rem;
}
@media (max-width:1023px){ .blog-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 479px){ .blog-grid { grid-template-columns: 1fr; } }

.post-card {
  background: var(--white);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
  transition: transform var(--dur-normal) var(--ease-smooth),
              box-shadow var(--dur-normal) var(--ease-smooth);
  display: flex; flex-direction: column;
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.post-card__img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.post-card__body { padding: 1.1rem 1.25rem 1.4rem; flex: 1; display: flex; flex-direction: column; }
.post-card__date { font-size: .78rem; color: var(--text-lt); margin-bottom: .4rem; }
.post-card__title { font-size: .98rem; font-weight: 700; color: var(--navy); line-height: 1.35; margin-bottom: .6rem; }
.post-card__excerpt { font-size: .88rem; color: var(--text-md); flex: 1; margin-bottom: .9rem; line-height: 1.6; }
.post-card__link { font-size: .85rem; font-weight: 700; color: var(--red); align-self: flex-start; }
.post-card__link::after { content: ' →'; }

/* ---- 16. Contact Form ---- */
.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: start;
}
@media (max-width:767px){ .contact-wrap { grid-template-columns: 1fr; } }

.form-group  { margin-bottom: 1.25rem; }
.form-label  { display: block; font-size: .9rem; font-weight: 600; color: var(--navy); margin-bottom: .35rem; }
.form-req    { color: var(--red); }
.form-control {
  width: 100%; padding: .7rem .9rem;
  border: 1.5px solid var(--border); border-radius: var(--r);
  font-family: var(--font); font-size: 1rem; color: var(--text);
  background: var(--white);
  transition: border-color .2s, box-shadow .2s;
  appearance: none; -webkit-appearance: none;
}
.form-control:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(230,0,0,.1);
}
textarea.form-control { resize: vertical; min-height: 160px; }

.contact-info h3  { margin-bottom: 1rem; }
.contact-info dl  { font-size: .95rem; line-height: 2; color: var(--text-md); }
.contact-info dt  { font-weight: 700; color: var(--navy); }
.contact-info dd  { margin-left: 0; }
.contact-info a   { color: var(--navy); font-weight: 600; }
.contact-info a:hover { color: var(--red); text-decoration: underline; }

.hours-table { font-size: .92rem; }
.hours-table td { padding: .2rem 1rem .2rem 0; color: var(--text-md); }
.hours-table td:first-child { font-weight: 600; color: var(--navy); }

/* ---- 17. Page hero (interior pages) ---- */
.page-hero {
  background: var(--navy); color: var(--white);
  padding: calc(var(--nav-h) + 2.5rem) 0 3rem;
  text-align: center;
}
.page-hero h1   { color: var(--white); margin-bottom: .6rem; }
.page-hero .lead { color: rgba(255,255,255,.75); max-width: 640px; margin-inline: auto; }

.breadcrumb {
  display: flex; align-items: center; gap: .4rem;
  font-size: .8rem; color: rgba(255,255,255,.5);
  justify-content: center; margin-bottom: 1rem;
}
.breadcrumb a      { color: rgba(255,255,255,.6); }
.breadcrumb a:hover{ color: var(--white); }
.breadcrumb span   { color: rgba(255,255,255,.4); }

/* ---- 18. Regional Page ---- */
.reg-header {
  background: var(--navy);
  padding: calc(var(--nav-h) + 2rem) 0 2.5rem;
  text-align: center;
}
.reg-header .badge {
  display: inline-block;
  background: rgba(230,0,0,.15);
  color: #ff6666;
  font-size: .75rem; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  padding: .3rem .8rem; border-radius: 999px;
  margin-bottom: 1rem;
  border: 1px solid rgba(230,0,0,.25);
}
.reg-header h1   { color: var(--white); max-width: 760px; margin-inline: auto; margin-bottom: .75rem; }
.reg-header .lead{ color: rgba(255,255,255,.75); max-width: 660px; margin-inline: auto; }

.local-box {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--red);
  border-radius: var(--r);
  padding: 1.25rem 1.5rem;
  margin-block: 1.5rem;
}
.local-box p { font-size: .95rem; color: var(--text-md); margin: 0; }

/* ---- 19. About Page ---- */
.team-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem; align-items: center;
}
@media (max-width:767px){ .team-grid { grid-template-columns: 1fr; } }
.team-img { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); }
.team-img img { width: 100%; object-fit: cover; }

/* Mission list */
.mission-list { list-style: none; margin-top: 1rem; }
.mission-list li {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .5rem 0; font-size: .97rem; color: var(--text-md);
  border-bottom: 1px solid var(--border);
}
.mission-list li:last-child { border-bottom: none; }
.mission-list li::before { content: '✓'; color: var(--red); font-weight: 800; flex-shrink: 0; }

/* ---- 20. CTA Banner ---- */
.cta-banner {
  background: var(--navy); color: var(--white);
  padding: clamp(2.5rem,5vw,4.5rem) 0;
  text-align: center;
}
.cta-banner h2  { color: var(--white); margin-bottom: .75rem; }
.cta-banner p   { color: rgba(255,255,255,.72); max-width: 600px; margin-inline: auto; margin-bottom: 1.75rem; }

/* ---- 21. Highlight Box ---- */
.highlight-box {
  background: var(--red-fade);
  border: 1px solid rgba(230,0,0,.2);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.75rem;
}
.highlight-box h3 { color: var(--red); margin-bottom: .4rem; font-size: 1.1rem; }
.highlight-box p  { color: var(--text-md); font-size: .95rem; margin: 0; }

/* ---- 22. Footer ---- */
.site-footer { background: var(--navy); color: rgba(255,255,255,.7); }

.footer__main {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.5fr 1fr;
  gap: 2rem;
  padding-block: 3.5rem 2.5rem;
}
@media (max-width:1023px){ .footer__main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 479px){ .footer__main { grid-template-columns: 1fr; } }

.footer__logo { display: block; max-width: 160px; background: #fff; border-radius: 6px; padding: 6px 10px; margin-bottom: 1.25rem; }
.footer__desc { font-size: .87rem; line-height: 1.65; color: rgba(255,255,255,.55); margin-bottom: 0; }

.footer__col h3 {
  font-size: .83rem; font-weight: 700;
  color: var(--white); text-transform: uppercase;
  letter-spacing: .9px; margin-bottom: .9rem;
}
.footer__col p,
.footer__col address { font-size: .87rem; line-height: 2; color: rgba(255,255,255,.6); }
.footer__col strong  { color: rgba(255,255,255,.75); }
.footer__col a { color: rgba(255,255,255,.6); transition: color var(--t); display: block; font-size: .87rem; line-height: 1.9; }
.footer__col a:hover { color: var(--white); }

.footer__social {
  display: flex; gap: .6rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 1.25rem;
}
.footer__social a {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.1); color: var(--white);
  font-size: .85rem;
  transition: background var(--t);
}
.footer__social a:hover { background: var(--red); }

.footer__bottom { background: rgba(0,0,0,.3); padding: 1rem 0; }
.footer__bottom-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  font-size: .8rem; color: rgba(255,255,255,.4);
}
.footer__bottom-inner nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.footer__bottom-inner a   { color: rgba(255,255,255,.5); transition: color var(--t); }
.footer__bottom-inner a:hover { color: var(--white); }

/* ---- 23. Legal pages ---- */
.legal-content { max-width: 800px; }
.legal-content h2 { font-size: 1.25rem; margin: 2rem 0 .6rem; color: var(--navy); }
.legal-content h3 { font-size: 1.05rem; margin: 1.5rem 0 .4rem; }
.legal-content p, .legal-content li { font-size: .97rem; color: var(--text-md); line-height: 1.75; }
.legal-content ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1em; }
.legal-content a  { color: var(--blue); text-decoration: underline; }

/* ---- 24. Utilities ---- */
.text-center { text-align: center; }
.text-red    { color: var(--red); }
.text-navy   { color: var(--navy); }
.text-muted  { color: var(--text-md); }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 2rem; } .mb-8 { margin-bottom: 4rem; }
.fw-bold { font-weight: 700; }
.divider { height: 1px; background: var(--border); margin-block: 2rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}
.skip-link {
  position: absolute; top: 0; left: 0;
  background: var(--red); color: var(--white);
  padding: .5rem 1rem; z-index: 9999;
  transform: translateY(-100%);
  transition: transform .2s;
}
.skip-link:focus { transform: translateY(0); }

/* ---- 25. Focus & Accessibility ---- */
:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---- 26. Print ---- */
@media print {
  .site-header, .hero, .site-footer, .cta-banner { display: none; }
  body { font-size: 12pt; color: #000; }
  a { color: #000; text-decoration: underline; }
}

/* ---- 27. Inner-page component aliases & extensions ---- */

/* USP strip with container wrapper (inner pages) */
.usp-strip__inner {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1.25rem;
}
@media (max-width:1023px){ .usp-strip__inner { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 479px){ .usp-strip__inner { grid-template-columns: 1fr; } }
.usp-strip .container { padding-block: 1.5rem; }
.usp-strip__item {
  display: flex; align-items: center; gap: .65rem;
  font-size: .95rem; font-weight: 500; color: var(--navy);
}
.usp-strip__icon { color: var(--red); font-size: 1.1rem; font-weight: 800; flex-shrink: 0; }

/* content-row__media alias (= content-row__img) */
.content-row__media {
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg);
}
.content-row__media img { width: 100%; object-fit: cover; display: block; }
.content-row__text { display: flex; flex-direction: column; }

/* blog-card (tipps-tricks grid) */
.blog-card {
  background: var(--white);
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--sh-sm);
  transition: transform var(--dur-normal) var(--ease-smooth),
              box-shadow var(--dur-normal) var(--ease-smooth);
  display: flex; flex-direction: column;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.blog-card__img-wrap { aspect-ratio: 16/9; overflow: hidden; display: block; }
.blog-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.blog-card:hover .blog-card__img-wrap img { transform: scale(1.04); }
.blog-card__body { padding: 1.1rem 1.25rem 1.4rem; flex: 1; display: flex; flex-direction: column; }
.blog-card__cat  { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--red); margin-bottom: .4rem; display: block; }
.blog-card__title { font-size: .98rem; font-weight: 700; color: var(--navy); line-height: 1.35; margin-bottom: .55rem; }
.blog-card__title a { color: inherit; }
.blog-card__title a:hover { color: var(--red); }
.blog-card__excerpt { font-size: .88rem; color: var(--text-md); flex: 1; margin-bottom: .9rem; line-height: 1.6; }
.blog-card__link { font-size: .85rem; font-weight: 700; color: var(--red); align-self: flex-start; }

/* Badge (filter chips, tipps-tricks) */
.badge {
  display: inline-block;
  padding: .3rem .85rem; border-radius: 999px;
  font-size: .82rem; font-weight: 600; cursor: pointer;
  background: var(--bg); color: var(--text-md);
  border: 1px solid var(--border); transition: background var(--t), color var(--t);
}
.badge--active { background: var(--red); color: var(--white); border-color: var(--red); }
.badge:hover   { background: var(--red-fade); color: var(--red); border-color: var(--red); }

/* Breadcrumb separator */
.breadcrumb-sep {
  display: inline-block; margin: 0 .4rem;
  color: rgba(255,255,255,.3);
}
.breadcrumb-sep::before { content: '/'; }

/* Clickable cards */
.card--link { display: block; color: inherit; text-decoration: none; }
.card--link:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); color: var(--navy); }
.card--link h3 { color: var(--red); }

/* text-center utility */
.text-center { text-align: center; }

/* ---- 28. Scroll Progress Bar ---- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--red);
  transform-origin: left center;
  transform: scaleX(var(--scroll-progress, 0));
  z-index: 1001;
  pointer-events: none;
  transition: transform 50ms linear;
  will-change: transform;
}

/* ---- 29. Scroll Reveal ---- */
.js-ready [data-reveal] {
  opacity: 0;
  transform: translateY(var(--dist-lg));
  transition:
    opacity var(--dur-slow) var(--ease-smooth) calc(var(--i, 0) * 80ms),
    transform var(--dur-slow) var(--ease-smooth) calc(var(--i, 0) * 80ms);
}
.js-ready [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- 30. prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero__slide { animation: none !important; }
  .hero__slide--1 { opacity: 1 !important; transform: none !important; }
  .hero__slide--2 { opacity: 0 !important; }
  .hero__box { animation: none !important; }
  .scroll-progress { transition: none; }
  .js-ready [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ─── Blog Posts / Prose Layout — 2026-06-11 ─── */
.post-meta{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:1rem;font-size:.85rem;color:var(--text-lt)}
.prose-layout{max-width:820px;margin:0 auto}
.prose p,.prose li{line-height:1.78}
.prose p{margin-bottom:1.25rem}
.prose h2{font-size:clamp(1.25rem,2.2vw,1.5rem);margin:2.5rem 0 .75rem;color:var(--navy)}
.prose h3{font-size:clamp(1.05rem,1.6vw,1.2rem);margin:2rem 0 .5rem;color:var(--navy)}
.prose ul{list-style:disc;margin:0 0 1.25rem 1.5rem}
.prose ol{list-style:decimal;margin:0 0 1.25rem 1.5rem}
.prose li{margin-bottom:.45rem}
.prose a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--navy)}
.prose blockquote{border-left:4px solid var(--red);padding:.75rem 1.25rem;margin:1.5rem 0;background:#f8f9fa;font-style:italic;color:var(--text-lt);border-radius:0 8px 8px 0}
.price-table,.n50-table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.92rem}
.price-table th,.n50-table th{background:var(--navy);color:#fff;padding:.6rem .9rem;text-align:left;font-weight:600}
.price-table td,.n50-table td{padding:.55rem .9rem;border-bottom:1px solid #e9ecef}
.price-table tr:last-child td,.n50-table tr:last-child td{border-bottom:none}
.price-table tr:nth-child(even) td,.n50-table tr:nth-child(even) td{background:rgba(0,0,0,.03)}
.table-note{font-size:.78rem;color:var(--text-lt);margin-top:-.75rem;margin-bottom:1.5rem;font-style:italic}
.cta-box{display:flex;align-items:center;gap:1.5rem;background:var(--navy);color:#fff;border-radius:12px;padding:1.5rem 2rem;margin:2.5rem 0;flex-wrap:wrap}
.cta-box__content{flex:1;min-width:200px}
.cta-box__content strong{display:block;font-size:1.05rem;margin-bottom:.3rem}
.cta-box__content p{margin:0;font-size:.88rem;opacity:.85;color:#fff}
.cta-box .btn--primary{flex-shrink:0;white-space:nowrap;background:#fff!important;color:var(--red)!important;font-weight:700}
.cta-box .btn--primary:hover{background:var(--red)!important;color:#fff!important}
.related-posts{margin-top:3rem;padding-top:2rem;border-top:2px solid #e9ecef}
.related-posts>h2{font-size:1.2rem;margin-bottom:1.5rem;color:var(--navy)}
.related-posts .blog-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.25rem;margin-top:0}
.post-box{background:#f0f6ff;border-left:4px solid var(--red);padding:1rem 1.25rem;border-radius:0 8px 8px 0;margin:1.5rem 0}
.post-box strong{color:var(--navy)}

/* ─── Post Hero (Blog-Artikel) — 2026-06-11 ─── */
.post-hero{background:var(--navy);color:#fff;padding:3.5rem 0 3rem}
.post-hero__breadcrumb{font-size:.8rem;opacity:.6;margin-bottom:.85rem}
.post-hero__breadcrumb a{color:rgba(255,255,255,.8);text-decoration:none}
.post-hero__breadcrumb a:hover{color:#fff;text-decoration:underline}
.post-hero__breadcrumb span{margin:0 .35rem;opacity:.45}
.post-hero__meta{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;font-size:.82rem;opacity:.72;margin-bottom:1.1rem}
.post-hero h1{font-size:clamp(1.7rem,3.8vw,2.6rem);max-width:740px;line-height:1.25;margin:0 0 .9rem;font-weight:800}
.post-hero__subtitle{font-size:1.07rem;max-width:680px;line-height:1.6;margin:0;opacity:.88}

/* ─── Table of Contents (TOC) ─── */
.toc{background:#f4f7fd;border:1px solid #dde4f0;border-left:5px solid var(--navy);border-radius:0 10px 10px 0;padding:1.25rem 1.5rem;margin:0 0 2.75rem}
.toc__title{font-weight:700;font-size:.83rem;color:var(--navy);margin:0 0 .7rem;text-transform:uppercase;letter-spacing:.07em}
.toc__list{list-style:decimal;margin:0;padding-left:1.4rem}
.toc__list li{margin-bottom:.3rem;font-size:.9rem}
.toc__list a{color:var(--navy);text-decoration:none;border-bottom:1px dotted rgba(0,36,91,.35);transition:color .15s,border-color .15s}
.toc__list a:hover{color:var(--red);border-bottom-color:var(--red)}

/* ─── Callout-Boxen ─── */
.info-box{background:#eef6ff;border-left:4px solid #2c7be5;border-radius:0 8px 8px 0;padding:1rem 1.25rem;margin:1.5rem 0}
.info-box p:last-child{margin:0}
.warn-box{background:#fffbea;border-left:4px solid #f59e0b;border-radius:0 8px 8px 0;padding:1rem 1.25rem;margin:1.5rem 0}
.warn-box p:last-child{margin:0}
.check-list{list-style:none;padding:0;margin:0 0 1.25rem}
.check-list li{padding:.3rem 0 .3rem 1.85rem;position:relative;line-height:1.55}
.check-list li::before{content:"✓";position:absolute;left:.1rem;color:var(--red);font-weight:800}

/* ─── Cookie-Banner (DSGVO/TDDDG) ─── */
#cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:9999;background:#fff;border-top:2px solid var(--navy);box-shadow:0 -4px 24px rgba(0,0,0,.12);padding:1rem 0;transform:translateY(100%);transition:transform .3s ease}
#cookie-banner.visible{transform:translateY(0)}
.cookie-banner__inner{max-width:1140px;margin:0 auto;padding:0 1.25rem;display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.cookie-banner__text{flex:1;min-width:240px;font-size:.88rem;color:var(--text-md);line-height:1.5}
.cookie-banner__text strong{color:var(--navy)}
.cookie-banner__text a{color:var(--red);text-decoration:none}
.cookie-banner__text a:hover{text-decoration:underline}
.cookie-banner__actions{display:flex;gap:.75rem;flex-shrink:0;flex-wrap:wrap}
.cookie-banner__btn--primary{background:var(--navy);color:#fff;border:none;border-radius:6px;padding:.55rem 1.35rem;font-size:.88rem;font-weight:700;cursor:pointer;transition:background .15s}
.cookie-banner__btn--primary:hover{background:var(--red)}
.cookie-banner__btn--secondary{background:transparent;color:var(--navy);border:1.5px solid var(--navy);border-radius:6px;padding:.5rem 1.1rem;font-size:.88rem;font-weight:600;cursor:pointer;transition:all .15s;text-decoration:none;display:inline-flex;align-items:center}
.cookie-banner__btn--secondary:hover{border-color:var(--red);color:var(--red)}
@media(max-width:600px){.cookie-banner__inner{flex-direction:column;align-items:flex-start}.cookie-banner__actions{width:100%}.cookie-banner__btn--primary,.cookie-banner__btn--secondary{flex:1;justify-content:center;text-align:center}}
.check-list li::before{content:"✓";position:absolute;left:.1rem;color:var(--red);font-weight:800}

/* ====================================================
   v2-Erweiterung 2026-06-12 — Subhero, Glass, TOC,
   Footer v2, Cookie v2, Figures, Referenzen
   ==================================================== */

/* ── Subhero: Hero für Unterseiten (Glass-Fenster wie Startseite) ── */
.subhero{position:relative;min-height:420px;display:flex;align-items:center;padding-top:var(--nav-h);overflow:hidden;background:var(--navy)}
.subhero__bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.0);animation:subhero-zoom 18s var(--ease-smooth) both}
@keyframes subhero-zoom{from{transform:scale(1.06)}to{transform:scale(1.0)}}
.subhero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(102deg,rgba(15,23,42,.78) 0%,rgba(15,23,42,.42) 52%,rgba(15,23,42,.12) 100%)}
.subhero__content{position:relative;z-index:1;width:100%;padding-block:3rem}
.subhero__box{max-width:660px;background:rgba(255,255,255,.88);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);border:1px solid rgba(255,255,255,.45);border-radius:var(--r-lg);padding:clamp(1.5rem,3.2vw,2.25rem) clamp(1.25rem,3vw,2rem);box-shadow:var(--sh-lg);animation:hero-fade-up var(--dur-slow) var(--ease-smooth) .12s both}
.subhero__box .breadcrumb{margin-bottom:.9rem;font-size:.8rem;color:var(--text-lt)}
.subhero__box .breadcrumb a{color:var(--text-md)}
.subhero__box .breadcrumb a:hover{color:var(--red)}
.subhero__box .breadcrumb span{color:var(--text-lt)}
.subhero__box .breadcrumb span[aria-current]{color:var(--navy);font-weight:600}
.subhero__box .breadcrumb .breadcrumb-sep{color:var(--text-lt)}
.subhero__kicker{font-size:.77rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--red);margin-bottom:.65rem}
.subhero__box h1{font-size:clamp(1.45rem,3.2vw,2.15rem);color:var(--navy);margin-bottom:.8rem;font-weight:800;line-height:1.22}
.subhero__sub{font-size:.97rem;line-height:1.66;color:var(--text-md);margin-bottom:1.2rem}
.subhero__meta{display:flex;gap:.65rem;align-items:center;flex-wrap:wrap;font-size:.8rem;color:var(--text-lt);margin-bottom:.85rem}
.subhero__meta .badge{margin:0}
.subhero__box .btn-group{margin-bottom:0}
@media(max-width:767px){.subhero{min-height:340px}.subhero__content{padding-block:2rem}.subhero__box{max-width:100%}}
@media(prefers-reduced-motion:reduce){.subhero__bg{animation:none}.subhero__box{animation:none}}

/* ── Aufklappbares Inhaltsverzeichnis (details) ── */
details.toc{background:var(--bg);border:1px solid var(--border);border-left:4px solid var(--red);border-radius:var(--r);padding:0;margin:0 0 2rem;max-width:none}
details.toc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.95rem 1.25rem;font-weight:800;color:var(--navy);font-size:.95rem;user-select:none}
details.toc summary::-webkit-details-marker{display:none}
details.toc summary::after{content:"";width:.6rem;height:.6rem;border-right:2.5px solid var(--red);border-bottom:2.5px solid var(--red);transform:rotate(45deg);transition:transform var(--dur-fast) var(--ease-smooth);flex:none;margin-top:-.25rem}
details.toc[open] summary::after{transform:rotate(-135deg);margin-top:.25rem}
details.toc .toc__list{list-style:none;padding:0 1.25rem 1.1rem;margin:0;counter-reset:toc}
details.toc .toc__list li{counter-increment:toc;padding:.3rem 0;font-size:.92rem}
details.toc .toc__list li::before{content:counter(toc) ". ";color:var(--red);font-weight:800}
details.toc .toc__list a{color:var(--text-md);text-decoration:none}
details.toc .toc__list a:hover{color:var(--red);text-decoration:underline}

/* ── Figures (Blog-Bilder mit Beschreibung) ── */
.figure{margin:1.75rem 0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh);background:var(--white)}
.figure img{width:100%;height:auto;display:block}
.figure figcaption{font-size:.83rem;color:var(--text-lt);padding:.7rem 1rem;background:var(--bg);border-top:1px solid var(--border);line-height:1.5}
.figure--half{max-width:560px}
.figure-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin:1.75rem 0}
.figure-grid .figure{margin:0}
@media(max-width:640px){.figure-grid{grid-template-columns:1fr}}

/* ── Glass-Card (Vorlage Kunde) ── */
.glass-card{background:rgba(255,255,255,.6);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);border:1px solid rgba(255,255,255,.45);border-radius:20px;box-shadow:0 16px 40px rgba(2,6,23,.08);padding:clamp(16px,2.4vw,28px);transition:transform var(--dur-fast) var(--ease-smooth),box-shadow var(--dur-fast) var(--ease-smooth)}
.glass-card:hover{transform:translateY(-3px);box-shadow:0 20px 48px rgba(2,6,23,.12)}

/* ── Referenz-Karten ── */
.ref-card{border-radius:var(--r-lg);overflow:hidden;background:var(--white);box-shadow:var(--sh);transition:transform var(--dur-fast) var(--ease-smooth),box-shadow var(--dur-fast) var(--ease-smooth);display:flex;flex-direction:column}
.ref-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.ref-card__img{aspect-ratio:4/3;object-fit:cover;width:100%}
.ref-card__body{padding:1.1rem 1.2rem 1.3rem;flex:1;display:flex;flex-direction:column;gap:.35rem}
.ref-card__loc{font-size:.78rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--red)}
.ref-card__title{font-size:1.02rem;font-weight:700;color:var(--navy);line-height:1.35}
.ref-card__desc{font-size:.875rem;color:var(--text-md);line-height:1.55}
.ref-card__result{margin-top:auto;padding-top:.6rem;font-size:.83rem;font-weight:700;color:#15803d;display:flex;align-items:center;gap:.4rem}

/* ── Footer v2 (Original-Layout) ── */
.footer__main--v2{display:grid;grid-template-columns:1.15fr 1.2fr .9fr .95fr;gap:2.25rem;padding-block:3rem 2.25rem}
@media(max-width:1023px){.footer__main--v2{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer__main--v2{grid-template-columns:1fr}}
.footer__regions{margin:0;padding:0}
.footer__regions li{font-size:.84rem;line-height:1.7;color:rgba(255,255,255,.6);padding:.22rem 0}
.footer__regions strong{color:rgba(255,255,255,.85);font-weight:700;display:block;margin-bottom:.05rem}
.footer__regions a{display:inline !important;line-height:inherit !important;color:rgba(255,255,255,.6)}
.footer__regions a:hover{color:var(--white);text-decoration:underline}
.footer__map{background:var(--navy-lt);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);padding:1.4rem 1.2rem;display:flex;flex-direction:column;align-items:flex-start;gap:.6rem}
.footer__map svg{color:var(--red);flex:none}
.footer__map address{font-size:.85rem;line-height:1.6;color:rgba(255,255,255,.7)}
.footer__map-btn{display:inline-flex;align-items:center;gap:.45rem;margin-top:.35rem;background:var(--white);color:var(--navy) !important;font-weight:700;font-size:.84rem;border-radius:6px;padding:.5rem .95rem;transition:background var(--t),color var(--t)}
.footer__map-btn:hover{background:var(--red);color:var(--white) !important}
.footer__social--v2{display:flex;justify-content:center;gap:1rem;padding:1.4rem 0;border-top:1px solid rgba(255,255,255,.09)}
.footer__social--v2 a{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85);transition:background var(--t),transform var(--dur-fast) var(--ease-smooth)}
.footer__social--v2 a:hover{background:var(--red);transform:translateY(-2px)}
.footer__tagline{font-size:.9rem;line-height:1.7;color:rgba(255,255,255,.62);margin:0 0 1.1rem}
.footer__contact a{display:block;font-size:.87rem;line-height:1.95;color:rgba(255,255,255,.6)}
.footer__contact a:hover{color:var(--white)}

/* ── Cookie-Banner v2: Kategorien ── */
.cookie-banner__cats{display:flex;gap:1.1rem;flex-wrap:wrap;margin-top:.55rem}
.cookie-banner__cat{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--text-md);font-weight:600}
.cookie-banner__cat input{accent-color:var(--navy);width:15px;height:15px}
.cookie-banner__cat input:disabled{opacity:.85}
.cookie-banner__cat small{font-weight:400;color:var(--text-lt)}

/* ── Cookie-Modal v3 + Toggle-Switch ── */
.cookie-modal{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;transition:opacity .25s;pointer-events:none}
.cookie-modal.visible{opacity:1;pointer-events:auto}
.cookie-modal__panel{background:#fff;border-radius:12px;max-width:520px;width:100%;max-height:90vh;overflow-y:auto;padding:2rem 1.75rem 1.5rem;position:relative;box-shadow:0 8px 40px rgba(0,0,0,.22)}
.cookie-modal__close{position:absolute;top:1rem;right:1rem;background:none;border:none;cursor:pointer;color:var(--text-md);padding:.35rem;border-radius:4px;display:flex;align-items:center;line-height:1;transition:color .15s}
.cookie-modal__close:hover{color:var(--red)}
.cookie-modal__title{font-size:1.2rem;font-weight:800;color:var(--navy);margin:0 0 .5rem;padding-right:2rem}
.cookie-modal__intro{font-size:.85rem;color:var(--text-md);margin:0 0 1.1rem;line-height:1.55}
.cookie-modal__legal{font-size:.77rem;color:var(--text-lt);margin:1.25rem 0 0;text-align:center}
.cookie-modal__legal a{color:var(--text-md);text-decoration:none}
.cookie-modal__legal a:hover{color:var(--red)}
.cookie-modal__actions{display:flex;gap:.75rem;margin-top:1.25rem;flex-wrap:wrap}
.cookie-modal__actions .cookie-banner__btn--primary,.cookie-modal__actions .cookie-banner__btn--secondary{flex:1;justify-content:center;text-align:center}
.cookie-cat-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.9rem 0;border-top:1px solid #eee}
.cookie-cat-row__info{flex:1}
.cookie-cat-row__info strong{display:block;font-size:.88rem;color:var(--navy);margin-bottom:.2rem}
.cookie-cat-row__info p{font-size:.8rem;color:var(--text-md);margin:0;line-height:1.5}
.cookie-toggle{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0;margin-top:.15rem}
.cookie-toggle input{opacity:0;width:0;height:0;position:absolute}
.cookie-toggle__slider{position:absolute;inset:0;background:#ccc;border-radius:24px;cursor:pointer;transition:background .2s}
.cookie-toggle__slider:before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.cookie-toggle input:checked+.cookie-toggle__slider{background:var(--navy)}
.cookie-toggle input:checked+.cookie-toggle__slider:before{transform:translateX(20px)}
.cookie-toggle input:disabled+.cookie-toggle__slider{cursor:not-allowed;opacity:.65}
body.cookie-modal-open{overflow:hidden}
@media(max-width:480px){.cookie-modal{align-items:flex-end;padding:0}.cookie-modal__panel{border-radius:12px 12px 0 0;padding:1.5rem 1.1rem 1.25rem;max-height:85vh}.cookie-modal__actions{flex-direction:column}}

/* ── CTA-Box in Artikeln (falls fehlt) ── */
.cta-box{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-lt) 100%);border-radius:var(--r-lg);padding:1.8rem 1.6rem;margin:2.25rem 0;color:#fff;box-shadow:var(--sh-lg)}
.cta-box h3{color:#fff;margin:0 0 .5rem;font-size:1.18rem}
.cta-box p{color:rgba(255,255,255,.82);font-size:.93rem;margin:0 0 1.1rem;line-height:1.6}
.cta-box .btn{margin-right:.6rem;margin-bottom:.4rem}

/* ── Themen-Cluster-Chips ── */
.topic-chip{display:inline-flex;align-items:center;gap:.4rem;background:var(--red-fade);color:var(--red);font-size:.8rem;font-weight:700;border-radius:999px;padding:.32rem .85rem;transition:background var(--t),color var(--t)}
.topic-chip:hover{background:var(--red);color:#fff}
.topic-chips{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.1rem 0}

/* ── Inline-Icon-System (Emoji-Ersatz) ── */
svg.ico{width:1em;height:1em;vertical-align:-0.125em;flex:none}
.card__icon{color:var(--red);display:flex;align-items:center;justify-content:center}
.card__icon svg.ico{width:34px;height:34px}
.card__title svg.ico{width:1.05em;height:1.05em;margin-right:.35rem;color:var(--red)}
.topic-chip svg.ico{width:.95em;height:.95em;margin-right:.1rem}
.btn svg.ico{width:1.05em;height:1.05em}
.step-badge{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--red);color:#fff;font-weight:800;font-size:1.05rem}
.card .step-badge{margin-bottom:.35rem}

/* ── Kontakt-Liste mit Icons ── */
.contact-list{display:flex;flex-direction:column;gap:1rem;margin:0 0 1.75rem;padding:0}
.contact-list li{display:flex;gap:.95rem;align-items:flex-start}
.contact-list__icon{width:44px;height:44px;border-radius:10px;background:var(--red-fade);color:var(--red);display:flex;align-items:center;justify-content:center;flex:none}
.contact-list__icon svg.ico{width:20px;height:20px}
.contact-list__label{display:block;font-size:.74rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text-lt);margin-bottom:.1rem}
.contact-list a{font-weight:700;color:var(--navy);font-size:1.02rem;transition:color var(--t)}
.contact-list a:hover{color:var(--red)}
.contact-list address{font-size:.92rem;line-height:1.55;color:var(--text-md)}

/* ── Responsive-Härtung 2026-06-12 ── */
/* Tabellen scrollen auf schmalen Screens statt das Layout zu sprengen */
@media (max-width: 700px){
  .price-table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .price-table thead,.price-table tbody{display:table;width:100%;min-width:560px}
}
/* Lange Wörter/URLs niemals überlaufen lassen */
.post-content,.prose,.faq__body,.figure figcaption,.footer__regions{overflow-wrap:break-word;word-break:normal;hyphens:auto}
/* Flex/Grid-Kinder dürfen schrumpfen (verhindert Overflow durch min-content) */
.content-row__media,.content-row__text,.blog-card,.ref-card,.glass-card,.card{min-width:0}
/* Bilder in Karten füllen exakt die Box */
.blog-card__img-wrap{display:block;aspect-ratio:5/3;overflow:hidden}
.blog-card__img-wrap img{width:100%;height:100%;object-fit:cover}
.content-row__media img{width:100%;height:auto}
/* Subhero: Bild-Fokus auf schmalen Screens mittig-oben halten */
@media (max-width:560px){
  .subhero__bg{background-position:center top}
  .subhero__box h1{font-size:1.3rem}
  .topic-chips{justify-content:flex-start !important}
}
/* Stufenlos: Zwischenbreite 480–768 für 3er-Grids */
@media (min-width:480px) and (max-width:767px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
/* figure-grid Übergang */
@media (min-width:641px) and (max-width:900px){
  .figure-grid{gap:1rem}
}

/* ── Button-Schema vereinheitlicht: überall eckig-abgerundet (8px) ── */
.btn,.btn--nav,.cookie-banner__btn--primary,.cookie-banner__btn--secondary,.footer__map-btn,.topic-chip,.blog-card__link{border-radius:var(--r)}