/* ============ SELF-HOSTED FONTS (Manrope, SIL OFL 1.1) ============ */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Manrope-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Manrope-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Manrope-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Manrope-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/Manrope-ExtraBold.woff2") format("woff2");
}


:root{
  --bg: #ffffff;
  --bg-soft: #f8fafc;
  --bg-muted: #f1f5f9;
  --bg-card: #ffffff;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;

  --text: #0c1e3e;
  --text-body: #334155;
  --text-muted: #64748b;
  --text-dim: #94a3b8;

  --accent: #1e40af;
  --accent-hover: #1e3a8a;
  --accent-soft: #dbeafe;
  --accent-2: #3b82f6;

  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --danger-border: #fecaca;

  --shadow-sm: 0 1px 2px rgba(12,30,62,0.04);
  --shadow-md: 0 4px 16px rgba(12,30,62,0.06);
  --shadow-lg: 0 20px 50px -20px rgba(30,64,175,0.25);

  --ease: cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  background: var(--bg);
  color: var(--text-body);
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  font-weight: 400;
}

body::before{
  content:"";
  position:absolute; inset: 0 0 auto 0; height: 700px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(30,64,175,0.06), transparent 70%),
    radial-gradient(ellipse 50% 40% at 90% 10%, rgba(59,130,246,0.05), transparent 70%);
  pointer-events:none; z-index:0;
}

.container{max-width:1240px; margin:0 auto; padding:0 28px; position:relative; z-index:1}

/* ---------- Typography ---------- */
h1,h2,h3,h4{
  font-family: 'Manrope', sans-serif;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--text);
}
h1{ font-size: clamp(2.6rem, 6vw, 4.5rem); font-weight: 800; letter-spacing: -0.03em; }
h2{ font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 700; }
h3{ font-size: clamp(1.2rem, 1.8vw, 1.45rem); font-weight: 700; }
h4{ font-weight: 600; }

.eyebrow{
  font-family:'Manrope',sans-serif;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 1.25rem;
  display:inline-flex; align-items:center; gap:.6rem;
}
.eyebrow::before{ content:""; width: 28px; height: 1px; background: var(--accent); display:inline-block; }
p{color: var(--text-body); font-size: 1.02rem}
.lead{font-size: 1.1rem; color: var(--text-muted); max-width: 640px; font-weight: 400}
em, .italic{font-style: normal; color: var(--accent); font-weight: inherit}

/* ---------- Notdienst-Banner ---------- */
.emergency-banner{
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--danger);
  padding: 10px 28px;
  text-align: center;
  font-size: .88rem;
  font-weight: 600;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;
  border-bottom: 1px solid rgba(229, 53, 69, 0.25);
  box-shadow: var(--shadow-sm);
}
.emergency-banner a{
  color: var(--danger);
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid var(--danger);
  border-radius: 999px;
  padding: 2px 12px;
  margin-left: 6px;
  display: inline-block;
  line-height: 1.4;
  transition: all .2s var(--ease);
}
.emergency-banner a:hover{
  background: var(--danger);
  color: #ffffff;
  border-color: var(--danger);
}
.emergency-banner .bolt{display:inline-block; margin-right:.4rem}

/* ---------- Navigation ---------- */
.nav{
  position: fixed;
  top: 38px;      /* unter Notdienst-Banner */
  left: 0; right: 0;
  z-index: 100;
  padding: 18px 0;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(255,255,255,0.78);
  border-bottom: 1px solid transparent;
  transition: all .3s var(--ease);
}
.nav.scrolled{
  border-bottom-color: var(--border);
  background: rgba(255,255,255,0.92);
  box-shadow: var(--shadow-sm);
}
.nav-inner{ display:flex; justify-content:space-between; align-items:center; max-width:1240px; margin:0 auto; padding:0 28px; }
.logo{ font-family:'Manrope', sans-serif; font-size:1.2rem; font-weight:800; color: var(--accent); text-decoration:none; letter-spacing:-0.02em; }
.logo span{color: var(--accent); font-weight: 400; margin: 0 4px}
.nav-links{display:flex; gap: 2.2rem; align-items:center}
.nav-links a{ color: var(--text); text-decoration:none; font-size: 0.95rem; transition: color .2s; font-weight: 600; }
.nav-links a:hover{color: var(--accent)}
.nav-cta{
  background: var(--accent);
  color: #ffffff !important;
  padding: 0.65rem 1.3rem;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: all .25s var(--ease);
}
.nav-cta:hover{background: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--shadow-md)}
.burger{display:none; background:none; border:none; color:var(--text); cursor:pointer; font-size:1.5rem}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding: 0.95rem 1.8rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration:none;
  transition: all .3s var(--ease);
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.01em;
}
.btn-primary{ background: var(--accent); color:#fff; box-shadow: var(--shadow-md); }
.btn-primary:hover{ background: var(--accent-hover); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-ghost{ background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover{background: var(--bg-soft); border-color: var(--accent)}
.btn-danger-outline{ background: transparent; color: var(--danger); border-color: var(--danger);}
.btn-danger-outline:hover{background: var(--danger); color:#fff; transform: translateY(-2px)}
.btn svg{width:16px; height:16px; transition: transform .3s var(--ease)}
.btn:hover svg{transform: translateX(3px)}

/* ---------- Section base ---------- */
section{padding: 3rem 0; position: relative}
.section-head{margin-bottom: 2rem; max-width: 720px}
.section-head h2{margin-top: .5rem}
.section-alt{background: var(--bg-soft)}

/* ---------- Hero ---------- */
.hero{
  min-height: 100vh;
  display: flex; align-items: center;
  padding-top: 160px;
  padding-bottom: 3rem;
  position: relative;
  overflow: hidden;
}
.hero-grid{ display:grid; grid-template-columns: 1.15fr 1fr; gap: 4rem; align-items: center; }
.hero h1{line-height: 1.05}
.hero h1 em{color: var(--accent); font-weight: 800}
.hero-sub{ font-size: 1.1rem; margin: 1.75rem 0 2.25rem; max-width: 540px; color: var(--text-muted); line-height: 1.7; }
.hero-ctas{display:flex; gap:1rem; flex-wrap:wrap}

.hero-visual{
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent-soft), var(--bg-muted));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.hero-visual::before{
  content:"";
  position:absolute; inset:0;
  /* Firmenfoto lokal ablegen, z. B.: background: url('images/hero.webp') center/cover;
     (keine externen Bild-URLs – sonst Übermittlung der Besucher-IP an Dritte) */
  background: linear-gradient(135deg, var(--accent-soft), var(--bg-muted));
}
.hero-visual::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 55%, rgba(12,30,62,0.4) 100%);
}
.hero-visual .image-note{
  position:absolute; bottom: 20px; left: 20px; right: 20px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  padding: .7rem 1rem;
  border-radius: 10px;
  font-size: .78rem;
  color: var(--text-muted);
  z-index:2;
  text-align:center;
}

/* ---------- Stats ---------- */
.stats-section{ padding: 2rem 0; background: var(--bg); }
.stats-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 2.5rem 0;
}
.stat{ padding: 0 1.5rem; border-right: 1px solid var(--border); text-align: left; }
.stat:last-child{border-right:none}
.stat-num{
  font-family:'Manrope', sans-serif;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  display:flex; align-items:baseline;
}
.stat-num .plus{font-size: .55em; color: var(--accent); margin-left: 3px; font-weight: 700}
.stat-num .small{font-size: .7em; font-weight: 700}
.stat-label{color: var(--text-muted); font-size: .9rem; margin-top: .7rem; font-weight: 600}
.stat-sub{color: var(--text-dim); font-size: .78rem; margin-top: .25rem; font-weight: 400}

@media(max-width: 1100px){
  .stats-grid{grid-template-columns: 1fr 1fr}
  .stat{border-right:none; border-bottom: 1px solid var(--border); padding: 1.2rem 1.5rem}
  .stat:nth-child(2){border-right:none}
  .stat:last-child, .stat:nth-last-child(2){border-bottom:none}
}
@media(max-width: 600px){
  .stats-grid{grid-template-columns: 1fr}
  .stat{border-right:none; border-bottom: 1px solid var(--border); padding: 1rem 0}
  .stat:last-child{border-bottom:none}
}

/* ---------- Trust-Strip ---------- */
.trust-strip{
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.5rem 0;
}
.trust-strip-inner{
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  padding: 0 28px;
  position: relative;
}
.trust-strip-inner::before, .trust-strip-inner::after{
  content:""; width: 40px; height: 1px;
  background: var(--accent); display:block;
  margin: 0 auto 1.5rem;
}
.trust-strip-inner::after{margin: 1.5rem auto 0}
.trust-strip p{
  font-family:'Manrope', sans-serif;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.6;
  color: var(--text);
  font-weight: 400;
  letter-spacing: -0.005em;
}
.trust-strip p em{color: var(--accent); font-weight: 700}

/* ---------- Reviews Carousel ---------- */
.reviews{
  padding: 2.5rem 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.reviews-head{
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3rem;
}
.reviews-head .eyebrow{justify-content: center}
.reviews-head h3, .reviews-head .reviews-title{font-size: 1.5rem; margin: .5rem 0 .75rem; font-weight: 700}
.reviews-head p{font-size: .95rem; color: var(--text-muted)}

.reviews-track-wrap{
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.reviews-track{
  display:flex;
  gap: 1.25rem;
  animation: scroll 40s linear infinite;
  width: max-content;
  --loop: 0px;
}
.reviews-track:hover{animation-play-state: paused}
@keyframes scroll{
  0%{transform: translateX(0)}
  100%{transform: translateX(calc(-1 * var(--loop)))}
}

.review-card{
  flex: 0 0 360px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem 1.5rem 1.3rem;
  display:flex; flex-direction: column; gap: .85rem;
}
.review-stars{
  display:inline-flex; gap: 2px; color: #fbbf24;
}
.review-stars svg{width:15px; height:15px; fill: currentColor; stroke: currentColor}
.review-text{
  color: var(--text-body);
  font-size: .94rem;
  line-height: 1.6;
  flex-grow: 1;
}
.review-author{
  display:flex; align-items:center; gap: .75rem;
  border-top: 1px solid var(--border);
  padding-top: .85rem;
  margin-top: .3rem;
}
.review-avatar{
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-weight: 700;
  font-size: .85rem;
  flex-shrink: 0;
}
.review-author-info{flex-grow: 1}
.review-name{font-size: .88rem; font-weight: 600; color: var(--text); line-height: 1.2}
.review-date{font-size: .75rem; color: var(--text-muted); margin-top: 2px}
.review-source{
  font-size: .7rem;
  color: var(--text-muted);
  display:inline-flex; align-items:center; gap:3px;
  font-weight: 500;
}
.review-source svg{width:12px; height:12px}

.reviews-footer{
  text-align: center;
  margin-top: 2.5rem;
  color: var(--text-muted);
  font-size: .85rem;
}
.reviews-footer a{color: var(--accent); text-decoration: none; font-weight: 600}
.reviews-footer a:hover{text-decoration: underline}
.reviews-footer .note{font-style: italic; opacity: .7; margin-top: .4rem; display:block}

/* ---------- Services ---------- */
.services-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem;
}
@media(max-width:1000px){.services-grid{grid-template-columns: 1fr 1fr}}
@media(max-width:560px){.services-grid{grid-template-columns: 1fr}}

.service-card{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 2rem 1.8rem;
  transition: all .4s var(--ease);
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.service-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0; transition: opacity .4s;
}
.service-card:hover{ border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.service-card:hover::before{opacity:1}
.service-icon{
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--accent-soft); color: var(--accent);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 1.5rem;
}
.service-icon svg{width: 26px; height: 26px}
.service-card h3{margin-bottom:.8rem; font-size: 1.1rem; font-weight: 700; color: var(--text)}
.service-card p{font-size: .92rem; line-height: 1.6; color: var(--text-muted)}
.service-num{
  position:absolute; top: 1.5rem; right: 1.5rem;
  font-size: .72rem; color: var(--text-dim);
  letter-spacing: .1em; font-weight: 600;
}

/* ---------- E-Check Addon ---------- */
.addon-row{
  margin-top: 2rem;
  padding: 2rem;
  background: var(--bg-card);
  border: 1px dashed var(--border-strong);
  border-radius: 18px;
  display:grid; grid-template-columns: auto 1fr auto;
  gap: 1.75rem; align-items: center;
}
.addon-row .icon-wrap{
  width: 54px; height:54px; border-radius: 14px;
  background: var(--accent-soft); color: var(--accent);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.addon-row .icon-wrap svg{width:26px; height:26px}
.addon-row h3{font-size: 1.05rem; font-weight:700; color:var(--text); margin-bottom:.3rem}
.addon-row p{font-size:.92rem; color: var(--text-muted); margin:0}
.addon-tags{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.7rem}
.addon-tags span{
  font-size:.72rem; padding:.3rem .7rem;
  background: var(--bg-muted); color: var(--text-muted);
  border-radius: 999px; font-weight:500;
}
@media(max-width:700px){ .addon-row{grid-template-columns: 1fr; text-align:left} }

/* ---------- Notdienst (DEZENT, zentriert, ohne Phone-Box) ---------- */
.emergency-section{
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--danger);
  border-radius: 18px;
  padding: 3rem;
  margin: 0 28px;
  max-width: 1240px;
  box-shadow: var(--shadow-md);
}
@media(min-width:1296px){.emergency-section{margin: 0 auto}}

.emergency-wrap{
  display:block;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.emergency-eyebrow{
  display:inline-flex; align-items:center; gap:.55rem; justify-content: center;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
  color: var(--danger);
  margin-bottom: 1.25rem;
}
.emergency-eyebrow::before{content:""; width: 28px; height: 1px; background: var(--danger); display:inline-block}
.emergency-section h2{color: var(--text); margin-bottom:1.1rem}
.emergency-section h2 em{color: var(--danger); font-weight: 700}
.emergency-section p{
  color: var(--text-muted); font-size: 1rem;
  max-width: 560px; margin-left:auto; margin-right:auto;
}
.emergency-types{
  display:grid; grid-template-columns: 1fr 1fr; gap: .75rem;
  margin: 1.5rem auto 1.75rem;
  max-width: 560px;
}
.emergency-type{
  display:flex; align-items:center; gap:.7rem;
  padding: .8rem 1rem;
  background: var(--danger-soft);
  border: 1px solid var(--danger-border);
  border-radius: 10px;
  font-size: .88rem; font-weight: 500; color: var(--text);
  text-align: left;
}
.emergency-type svg{width:18px; height:18px; flex-shrink:0; color: var(--danger)}
.emergency-ctas{display:flex; gap:.8rem; flex-wrap:wrap; justify-content: center}
@media(max-width:600px){
  .emergency-section{padding: 2rem 1.5rem; border-radius: 14px}
  .emergency-types{grid-template-columns: 1fr}
}

/* ---------- Projects ---------- */
.projects-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.project-card{
  border-radius: 22px; overflow: hidden; position: relative;
  aspect-ratio: 4/5; border: 1px solid var(--border);
  cursor: pointer; text-decoration:none;
  transition: transform .5s, box-shadow .5s;
  box-shadow: var(--shadow-sm);
}
.project-card:hover{box-shadow: var(--shadow-lg); transform: translateY(-4px)}
.project-img{ position:absolute; inset:0; background: linear-gradient(135deg, var(--bg-soft) 0%, var(--border) 100%); transition: transform .8s var(--ease); }
.project-card:hover .project-img{transform: scale(1.05)}
.project-card::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 40%, rgba(12,30,62,0.92) 100%); }
.project-meta{position:absolute; bottom: 24px; left: 24px; right: 24px; z-index: 2}
.project-tag{ font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: #93c5fd; margin-bottom: .5rem; font-weight: 700; }
.project-title{font-size: 1.15rem; font-weight: 700; color: #ffffff; line-height: 1.3}
.projects-cta{text-align:center; margin-top: 3rem}

/* ---------- Contact ---------- */
.contact{ background: var(--bg-soft); border-top: 1px solid var(--border); }
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.contact-info h2{margin-bottom: 1.5rem}
.contact-info .lead{margin-bottom: 2.5rem}
.contact-methods{display:flex; flex-direction:column; gap: 1rem; margin-bottom: 2.5rem}
.contact-method{
  display:flex; align-items:center; gap: 1rem;
  padding: 1.1rem 1.3rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-decoration:none;
  color: var(--text);
  transition: all .25s;
  box-shadow: var(--shadow-sm);
}
.contact-method:hover{border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateX(4px)}
.contact-method-icon{
  width: 44px; height: 44px;
  border-radius: 11px;
  background: var(--accent-soft); color: var(--accent);
  display:flex; align-items:center; justify-content:center;
  flex-shrink: 0;
}
.contact-method-icon svg{width:20px; height:20px}
.contact-method-label{font-size: .72rem; color: var(--text-muted); letter-spacing:.1em; text-transform: uppercase; font-weight: 700}
.contact-method-val{font-size: 1rem; margin-top: 3px; font-weight: 600}

.hours-block{
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem 1.3rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 2rem;
}
.hours-block h4, .hours-block h3{
  font-size: .75rem; letter-spacing:.1em; text-transform: uppercase; font-weight:700;
  color: var(--text-muted); margin-bottom: .75rem;
  display:flex; align-items:center; gap:.5rem;
}
.hours-block h4 svg, .hours-block h3 svg{width:16px; height:16px; color: var(--accent)}
.hours-row{
  display:flex; justify-content:space-between; padding: .45rem 0;
  font-size:.95rem; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.hours-row:last-of-type{border-bottom:none}
.hours-row span:first-child{color: var(--text-muted)}
.hours-note{ margin-top:.8rem; padding-top:.8rem; border-top: 1px dashed var(--border); font-size:.85rem; color: var(--text-muted); }

.form{
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 2.5rem;
  box-shadow: var(--shadow-md);
}
.form-group{margin-bottom: 1.25rem}
.form-group label{ display:block; font-size: .82rem; color: var(--text); margin-bottom: .55rem; font-weight: 600; }
.form-control{
  width:100%;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text);
  padding: .95rem 1.1rem;
  border-radius: 10px;
  font-family: inherit; font-size: .95rem;
  transition: all .2s;
}
.form-control:focus{ outline: none; border-color: var(--accent); background: var(--bg); box-shadow: 0 0 0 3px rgba(30,64,175,0.1); }
textarea.form-control{min-height: 140px; resize: vertical; line-height: 1.6}
.form-check{display:flex; gap:.7rem; align-items:flex-start; margin: 1.5rem 0; font-size:.88rem; color: var(--text-muted)}
.form-check input{margin-top: 3px; accent-color: var(--accent); width: 18px; height: 18px; cursor: pointer}
.form-check a{color: var(--accent); text-decoration: underline; font-weight: 600}
.form-submit{width:100%; justify-content:center}

/* ---------- Footer ---------- */
footer{
  padding: 4rem 0 2rem;
  border-top: 1px solid var(--border);
  background: var(--text);
  color: #cbd5e1;
}
.footer-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; }
footer .logo{color: #ffffff}
footer .logo span{color: #ffffff}
.footer-brand p{margin-top: 1rem; max-width: 320px; font-size: .9rem; color: #94a3b8}
.footer-col h4, .footer-col .footer-h{
  font-size: .78rem;
  text-transform: uppercase; letter-spacing: .15em;
  color: #94a3b8; margin-bottom: 1.2rem; font-weight: 700;
}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom: .6rem}
.footer-col a, .footer-col li{color: #cbd5e1; text-decoration:none; font-size: .92rem; transition: color .2s}
.footer-col a:hover{color: #ffffff}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: .85rem;
  color: #94a3b8;
}
.footer-bottom a{color: #94a3b8; text-decoration:none; margin-left: 1.5rem}
.footer-bottom a:hover{color: #ffffff}

.reveal{opacity:0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.visible{opacity:1; transform: translateY(0)}

@media (max-width: 960px){
  .hero-grid, .contact-grid{grid-template-columns: 1fr; gap: 3rem}
  .projects-grid{grid-template-columns: 1fr 1fr}
  .footer-grid{grid-template-columns: 1fr 1fr; gap: 2rem}
  .nav-links{display:none}
  .nav-links.open{
    display:flex; flex-direction:column; gap:1rem;
    position:absolute; top:100%; left:0; right:0;
    background: rgba(255,255,255,0.98); backdrop-filter: blur(20px);
    padding: 2rem; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md);
  }
  .burger{display:block}
  section{padding: 2.5rem 0}
  .hero{padding-top: 140px}
  .form{padding: 1.75rem}
  .emergency-banner{font-size:.78rem; padding: 8px 16px}
  .nav{top: 32px}
  .review-card{flex: 0 0 300px}
}
@media (max-width: 600px){
  .projects-grid{grid-template-columns: 1fr}
  .footer-grid{grid-template-columns: 1fr}
  .footer-bottom{flex-direction:column; gap:1rem; text-align:center}
  .footer-bottom a{margin: 0 .7rem}
  .container{padding: 0 20px}
  .review-card{flex: 0 0 280px; padding: 1.25rem}
}


/* Rating-Stat: Stern + volle Zahlengröße wie die anderen Stats */
.stat-num-rating{
  align-items: center;
  gap: .35rem;
}
.stat-star{
  width: clamp(1.6rem, 2.5vw, 2.1rem);
  height: clamp(1.6rem, 2.5vw, 2.1rem);
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(255, 184, 0, 0.25));
}


/* Rating-Slash: gleiche Größe wie Zahl, schwarz (wie die Zahl) */
.stat-num-rating .rating-slash{
  color: var(--text);
  margin: 0 1px;
  font-weight: 800;
}


/* =============================================
   MOBILE-OPTIMIERUNGEN (Feinschliff)
   ============================================= */

/* 1. iOS-Auto-Zoom bei Formular-Fokus verhindern (font-size muss ≥16px sein) */
@media (max-width: 768px){
  .form-control{ font-size: 16px; }
}

/* 2. Tap-Targets überall ≥44px (Apple + Google Guidelines) */
@media (max-width: 768px){
  .burger{
    min-width: 44px; min-height: 44px;
    align-items:center; justify-content:center;
  }
  .nav-cta{ min-height: 44px; display: inline-flex; align-items: center; }
  .footer a, .nav-links a{ padding: .35rem 0; display: inline-block; }
}

/* 3. Emergency-Banner auf sehr kleinen Screens: Nummer bricht sauber auf neue Zeile */
@media (max-width: 480px){
  .emergency-banner{
    padding: 8px 12px;
    font-size: .75rem;
    line-height: 1.5;
  }
  .emergency-banner a{
    margin-left: 4px;
    padding: 1px 9px;
    font-size: .8rem;
  }
}

/* 4. Hero: Headline auf Mobile kleiner halten (prevent overflow) */
@media (max-width: 480px){
  .hero h1{ word-break: break-word; hyphens: auto; }
  .hero .lead{ font-size: 1rem; }
}

/* 5. Review-Carousel: sanftes Snap-Scrolling auf Touch */
.reviews-track{
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.review-card{
  scroll-snap-align: start;
}

/* 6. Prevent horizontal scroll auf Root-Ebene */
html{ overflow-x: hidden; }

/* 7. Buttons: größere Touch-Fläche auf Mobile */
@media (max-width: 600px){
  .btn, button[type="submit"]{
    min-height: 48px;
    padding: .9rem 1.4rem;
  }
}

/* 8. Stats-Row auf Mobile: etwas kompakter */
@media (max-width: 480px){
  .stats-row{ gap: 1.2rem; }
  .stat-num{ font-size: 1.6rem; }
  .stat-star{ width: 1.5rem; height: 1.5rem; }
}


/* ---------- Footer legal row ---------- */
.footer-legal-row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding: 2rem 0 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 2rem;
}
.footer-legal-col h5, .footer-legal-col .footer-h5{
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: #94a3b8;
  margin-bottom: 1.2rem;
  font-weight: 700;
}
.footer-legal-col p{
  font-size: .92rem;
  color: #cbd5e1;
  line-height: 1.55;
  margin: 0;
  font-weight: 400;
}
@media (max-width: 720px){
  .footer-legal-row{ grid-template-columns: 1fr; gap: 1.25rem; padding: 1.5rem 0 1rem }
}

/* ---------- Blog Overview ---------- */
.blog-hero{
  padding: 180px 0 3rem;
  background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
}
.blog-hero .container{max-width: 900px; text-align: center}
.blog-hero .eyebrow{
  display:inline-block;
  font-size:.78rem; text-transform:uppercase; letter-spacing:.12em;
  color: var(--accent); font-weight:700; margin-bottom: 1rem;
}
.blog-hero h1{
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 1.25rem;
  color: var(--text);
}
.blog-hero p.lead{
  font-size: 1.1rem;
  color: var(--text-body);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.65;
}

.blog-categories{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem;
  padding: 2rem 0 0;
}
.blog-cat{
  display:inline-block;
  padding: .45rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-body);
  text-decoration: none;
  transition: all .2s var(--ease);
}
.blog-cat:hover, .blog-cat.active{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.blog-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  padding: 3rem 0;
}
.blog-card{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display:flex; flex-direction:column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  text-decoration: none;
  color: inherit;
}
.blog-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}
.blog-card-img{
  position:relative;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--bg-muted) 100%);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.blog-card-img img{width:100%; height:100%; object-fit:cover; display:block}
.blog-card-img .placeholder-icon{
  font-size: 3rem;
  color: var(--accent);
  opacity: .55;
}
.blog-card-body{
  padding: 1.4rem 1.5rem 1.6rem;
  display:flex; flex-direction:column;
  flex:1;
}
.blog-card-cat{
  display:inline-block;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: .6rem;
}
.blog-card h3{
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  margin-bottom: .6rem;
}
.blog-card p{
  font-size: .92rem;
  color: var(--text-body);
  line-height: 1.55;
  margin-bottom: 1rem;
  flex:1;
}
.blog-card-meta{
  display:flex; justify-content:space-between; align-items:center;
  font-size:.8rem;
  color: var(--text-muted);
  padding-top: .8rem;
  border-top: 1px solid var(--border);
}
.blog-card-read{
  color: var(--accent);
  font-weight: 700;
  display:inline-flex; align-items:center; gap: .3rem;
}

@media (max-width: 980px){
  .blog-grid{ grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 620px){
  .blog-grid{ grid-template-columns: 1fr; padding: 2rem 0 }
  .blog-hero{ padding: 150px 0 2rem }
}

/* ---------- Blog Article ---------- */
.article-hero{
  padding: 180px 0 3rem;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}
.article-hero .container{max-width: 820px}
.article-breadcrumbs{
  font-size:.85rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}
.article-breadcrumbs a{color: var(--text-muted); text-decoration:none}
.article-breadcrumbs a:hover{color: var(--accent)}
.article-breadcrumbs span{margin: 0 .4rem; color: var(--text-dim)}

.article-hero .category-badge{
  display:inline-block;
  background: var(--accent);
  color:#fff;
  padding: .35rem .85rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 1rem;
}
.article-hero h1{
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 1.25rem;
}
.article-hero .article-meta{
  display:flex; gap: 1.5rem; flex-wrap:wrap;
  font-size:.9rem; color: var(--text-muted);
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  margin-top: 1.5rem;
}
.article-hero .article-meta span{display:inline-flex; align-items:center; gap:.4rem}

.article-featured{
  max-width: 1040px;
  margin: -2rem auto 0;
  padding: 0 28px;
  position: relative;
  z-index: 2;
}
.article-featured-inner{
  aspect-ratio: 16/8;
  background: linear-gradient(135deg, var(--accent-soft), var(--bg-muted));
  border-radius: 20px;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-lg);
}
.article-featured-inner img{width:100%; height:100%; object-fit:cover}
.article-featured-inner .placeholder-icon{font-size:4rem; color:var(--accent); opacity:.5}

.article-content{
  max-width: 780px;
  margin: 3rem auto;
  padding: 0 28px;
}
.article-content p{
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-body);
  margin-bottom: 1.25rem;
}
.article-content h2{
  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
  font-weight: 800;
  color: var(--text);
  margin: 2.5rem 0 1rem;
  line-height: 1.25;
}
.article-content h3{
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  margin: 2rem 0 .75rem;
}
.article-content ul, .article-content ol{
  padding-left: 1.4rem;
  margin-bottom: 1.25rem;
}
.article-content li{
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-body);
  margin-bottom: .5rem;
}
.article-content a{color: var(--accent); font-weight: 600; text-decoration: underline}
.article-content strong{color: var(--text)}

.article-infobox{
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-left: 4px solid var(--accent);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}
.article-infobox strong{display:block; color: var(--accent); margin-bottom: .35rem; font-size:.85rem; text-transform:uppercase; letter-spacing:.08em}
.article-infobox p{margin: 0; font-size: .98rem}

.article-warning{
  background: var(--danger-soft);
  border: 1px solid var(--danger-border);
  border-left: 4px solid var(--danger);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}
.article-warning strong{display:block; color: var(--danger); margin-bottom:.35rem; font-size:.85rem; text-transform:uppercase; letter-spacing:.08em}
.article-warning p{margin: 0; font-size: .98rem}

.article-table{
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.article-table th, .article-table td{
  padding: .85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: .95rem;
}
.article-table th{
  background: var(--bg-soft);
  font-weight: 700;
  color: var(--text);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.article-table tr:last-child td{border-bottom: none}

.article-cta{
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  color: #fff;
  padding: 2.5rem 2rem;
  border-radius: 20px;
  text-align: center;
  margin: 3rem 0;
}
.article-cta h3{color: #fff; font-size: 1.4rem; margin-bottom: .75rem}
.article-cta p{color: rgba(255,255,255,.9); margin-bottom: 1.5rem; font-size: 1rem}
.article-cta .btn{background: #fff; color: var(--accent); border: none}
.article-cta .btn:hover{background: var(--bg-muted)}

.article-faq{
  margin: 2.5rem 0;
}
.article-faq-item{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.4rem;
  margin-bottom: .75rem;
}
.article-faq-item h4, .article-faq-item h3{
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .5rem;
}
.article-faq-item p{margin:0; font-size:.95rem}

.article-related{
  background: var(--bg-soft);
  padding: 3rem 0;
  border-top: 1px solid var(--border);
}
.article-related h3{
  font-size: 1.4rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 2rem;
}

.article-share{
  display:flex; align-items:center; gap: 1rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 2rem 0;
  font-size: .9rem;
  color: var(--text-muted);
}

@media (max-width: 620px){
  .article-hero{padding: 150px 0 2rem}
  .article-featured{margin-top: -1rem}
  .article-content{margin: 2rem auto}
  .article-content p, .article-content li{font-size: 1rem}
}


/* ============ BLOG LIST (imageless cards) ============ */
.blog-card{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0;
  position: relative;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.blog-card:hover{
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
}
.blog-card .blog-card-body{
  padding: 1.6rem 1.7rem 1.7rem;
}
.blog-card h3{
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 0 0 .7rem;
  color: var(--text-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.blog-card p{
  font-size: .94rem;
  line-height: 1.55;
  color: var(--text-body);
  margin: 0 0 1rem;
}
.blog-card-img{ display:none !important; }

/* Disclaimer */
.article-disclaimer{
  font-size: .88rem;
  color: var(--text-muted);
  background: var(--bg-soft);
  border-left: 3px solid var(--border);
  padding: .9rem 1.1rem;
  border-radius: 6px;
  margin: 1rem 0 2rem;
}


/* ============ AREAS / STADTTEILE ============ */
.areas-section{
  padding: 6rem 0;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.areas-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 3rem;
}
.area-pill{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.2rem 1.3rem;
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.area-pill:hover{
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}
.area-pill strong{
  font-size: 1rem;
  color: var(--text-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.area-pill span{
  font-size: .84rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.areas-note{
  text-align: center;
  margin-top: 2.5rem;
  font-size: .95rem;
  color: var(--text-muted);
}
.areas-note a{
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}
.areas-note a:hover{ text-decoration: underline; }
@media (max-width: 900px){
  .areas-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .areas-grid{ grid-template-columns: 1fr; }
}


/* ============ ARTICLE INLINE CTA ============ */
.article-inline-cta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  padding: 1.25rem 1.6rem;
  margin: 2rem 0 2.5rem;
}
.article-inline-cta-text{
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.article-inline-cta-text strong{
  font-size: 1.05rem;
  color: var(--text-heading);
  font-weight: 700;
}
.article-inline-cta-text span{
  font-size: .92rem;
  color: var(--text-muted);
}
.article-inline-cta-btn{
  background: var(--accent) !important;
  color: #fff !important;
  padding: .85rem 1.4rem !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  white-space: nowrap;
  text-decoration: none !important;
  border: none !important;
}
.article-inline-cta-btn:hover{
  background: var(--accent-dark, var(--accent)) !important;
  transform: translateY(-1px);
}
@media (max-width: 640px){
  .article-inline-cta{
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  .article-inline-cta-btn{
    text-align: center;
  }
}


/* ============ SERVICE CARD AS LINK ============ */
a.service-card,
.service-card--link{
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  position: relative;
}
a.service-card:hover,
.service-card--link:hover{
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
}
a.service-card h3,
.service-card--link h3{
  color: var(--text-heading);
  transition: color .25s var(--ease);
}
a.service-card:hover h3,
.service-card--link:hover h3{
  color: var(--accent);
}
a.service-card::after,
.service-card--link::after{
  content: "→";
  position: absolute;
  right: 1.6rem;
  bottom: 1.4rem;
  font-size: 1.4rem;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  font-weight: 700;
}
a.service-card:hover::after,
.service-card--link:hover::after{
  opacity: 1;
  transform: translateX(0);
}


/* ============ FAQ ACCORDION ============ */
.faq-section{
  padding: 6rem 0 7rem;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
}
.faq-list{
  max-width: 820px;
  margin: 3rem auto 0;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.faq-item{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.faq-item[open]{
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}
.faq-item summary{
  list-style: none;
  cursor: pointer;
  padding: 1.3rem 1.6rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-heading);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: color .2s var(--ease);
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{
  content: "+";
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--accent);
  transition: transform .25s var(--ease);
  flex-shrink: 0;
  line-height: 1;
}
.faq-item[open] summary::after{
  content: "−";
}
.faq-item summary:hover{
  color: var(--accent);
}
.faq-answer{
  padding: 0 1.6rem 1.4rem;
  font-size: .98rem;
  line-height: 1.65;
  color: var(--text-body);
}
.faq-answer p{ margin: 0; }
.faq-answer a{
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.faq-answer a:hover{ text-decoration: underline; }
@media (max-width: 640px){
  .faq-section{ padding: 4rem 0 5rem; }
  .faq-item summary{ padding: 1.1rem 1.3rem; font-size: .98rem; }
  .faq-answer{ padding: 0 1.3rem 1.2rem; }
}


/* ============ FOOTER GOOGLE BADGE ============ */
.footer-google-badge{
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  margin-top: 1.5rem;
  padding: .8rem 1.1rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  text-decoration: none;
  color: #e2e8f0;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.footer-google-badge:hover{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,184,0,0.5);
  transform: translateY(-1px);
}
.footer-google-stars{
  display: flex;
  gap: 2px;
}
.footer-google-stars svg{
  width: 16px;
  height: 16px;
}
.footer-google-text{
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.footer-google-text strong{
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
}
.footer-google-text span{
  font-size: .78rem;
  color: #94a3b8;
}


/* ---------- Before/After Slider ---------- */
.ba-slider{
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #0f172a;
  box-shadow: 0 14px 40px -12px rgba(15,23,42,.35);
  user-select: none;
  touch-action: pan-y;
}
.ba-img{
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.ba-before-wrap{
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 50% 0 0);
  -webkit-clip-path: inset(0 50% 0 0);
  transition: clip-path 0s linear;
}
.ba-before-wrap .ba-img-before{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ba-slider .ba-img-after{
  width: 100%;
  height: auto;
  display: block;
}
.ba-label{
  position: absolute;
  top: 18px;
  padding: .4rem .85rem;
  background: rgba(15, 23, 42, 0.82);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 6px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 3;
  pointer-events: none;
}
.ba-label-before{ left: 18px; }
.ba-label-after{ right: 18px; background: rgba(15, 62, 116, 0.92); }
.ba-handle{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: #fff;
  z-index: 4;
  pointer-events: none;
  box-shadow: 0 0 14px rgba(0,0,0,.35);
}
.ba-handle-btn{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
}
.ba-handle-btn svg{
  width: 22px;
  height: 22px;
}
.ba-range{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  z-index: 5;
  margin: 0;
  padding: 0;
}

/* Placeholder Card */
.ref-case-placeholder .ref-placeholder-visual{
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--bg-soft) 0%, var(--border) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  color: var(--muted);
  font-size: .9rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
}
.ref-placeholder-pulse{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(15, 62, 116, 0.45);
  animation: refPulse 2s ease-out infinite;
}
@keyframes refPulse{
  0%{ box-shadow: 0 0 0 0 rgba(15, 62, 116, 0.45); }
  100%{ box-shadow: 0 0 0 16px rgba(15, 62, 116, 0); }
}

@media (max-width: 768px){
  .ref-cases{ gap: 3rem; }
  .ba-label{ font-size: .68rem; top: 12px; padding: .3rem .65rem; }
  .ba-label-before{ left: 12px; }
  .ba-label-after{ right: 12px; }
  .ba-handle-btn{ width: 40px; height: 40px; }
  .ba-handle-btn svg{ width: 18px; height: 18px; }
}


/* ============ REFERENZEN — Carousel Cards ============ */
.ref-grid-v2{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 820px){
  .ref-grid-v2{ grid-template-columns: 1fr; gap: 2rem; }
}
.ref-card{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.ref-card:hover{
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
}

/* Media area */
.ref-card-media{
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #0f172a;
}
.ref-card-stage{
  position: absolute;
  inset: 0;
  display: block;
}
.ref-card-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .35s var(--ease);
  display: block;
}
.ref-card-img.is-active{
  opacity: 1;
}
.ref-card-badge{
  position: absolute;
  top: 14px;
  left: 14px;
  padding: .4rem .8rem;
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 6px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 3;
  transition: background .25s var(--ease);
}
.ref-card-badge.is-after{
  background: rgba(15, 62, 116, 0.92);
}
.ref-card-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
  transition: background .25s var(--ease), transform .25s var(--ease);
  z-index: 3;
}
.ref-card-nav svg{ width: 20px; height: 20px; }
.ref-card-nav:hover{
  background: #fff;
  transform: translateY(-50%) scale(1.06);
}
.ref-card-nav-prev{ left: 12px; }
.ref-card-nav-next{ right: 12px; }
.ref-card-dots{
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}
.ref-card-dots button{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  padding: 0;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.ref-card-dots button.is-active{
  background: #fff;
  transform: scale(1.25);
}

/* Body */
.ref-card-body{
  padding: 1.5rem 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  flex: 1;
}
.ref-card-tag{
  display: inline-block;
  align-self: flex-start;
  padding: .3rem .65rem;
  background: rgba(15, 62, 116, 0.08);
  color: var(--accent);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 999px;
}
.ref-card-body h2{
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.3;
}
.ref-card-body p{
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.6;
}

.ref-more-note{
  max-width: 720px;
  margin: 3rem auto 0;
  text-align: center;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.6;
}

@media (max-width: 640px){
  .ref-card-nav{ width: 36px; height: 36px; }
  .ref-card-nav svg{ width: 18px; height: 18px; }
  .ref-card-nav-prev{ left: 8px; }
  .ref-card-nav-next{ right: 8px; }
  .ref-card-badge{ top: 10px; left: 10px; font-size: .68rem; padding: .3rem .65rem; }
  .ref-card-body{ padding: 1.2rem 1.2rem 1.4rem; }
  .ref-card-body h2{ font-size: 1.1rem; }
}


/* ============ Inline Rating Star (Reviews Heading) ============ */
.rating-star-inline{
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  vertical-align: -0.12em;
  margin: 0 0.05em;
}


/* ============ Project Cards mit Foto (Homepage Referenzen-Teaser) ============ */
.project-card.has-photo .project-img{
  background: #0f172a;
}
.project-card .project-img img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
  display: block;
}
.project-card:hover .project-img img{
  transform: scale(1.04);
}
.project-card.has-photo::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,23,42,0) 40%, rgba(15,23,42,0.75) 100%);
  pointer-events: none;
  z-index: 1;
}
.project-card .project-meta{
  position: relative;
  z-index: 2;
}
.project-card.has-photo .project-meta{
  color: #fff;
}
.project-card.has-photo .project-tag{
  color: #fff;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.project-card.has-photo .project-title{
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}


/* Single-Image Reference Card (no carousel) */
.ref-card-single .ref-card-media{
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #0f172a;
}
.ref-card-single .ref-card-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}
.ref-card-badge-static{
  background: rgba(15, 62, 116, 0.92);
}


/* ============================
   MOBILE UX v42
   ============================ */

/* Floating Call Button (Mobile only) */
.floating-call{
  display: none;
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 80;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 14px 20px 14px 16px;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.10);
  align-items: center;
  gap: 8px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.floating-call:hover{ transform: translateY(-2px); }
.floating-call:active{ transform: translateY(0); }
.floating-call .fc-icon{
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
}
.floating-call .fc-label{ white-space: nowrap; }

@media (max-width: 768px){
  .floating-call{ display: inline-flex; }
  /* Etwas extra Platz unten damit Footer-Inhalte nicht verdeckt werden */
  body{ padding-bottom: 60px; }
}

/* Reading Progress Bar (Article pages) */
.reading-progress{
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--accent);
  z-index: 200;
  transition: width .1s ease-out;
  pointer-events: none;
}

/* Inline TOC (Article) */
.article-toc{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0 2rem;
}
.article-toc summary{
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  font-size: .98rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.article-toc summary::-webkit-details-marker{ display: none; }
.article-toc summary::after{
  content: '▾';
  color: var(--text-muted);
  transition: transform .2s ease;
}
.article-toc[open] summary::after{ transform: rotate(180deg); }
.article-toc ol{
  margin: 1rem 0 0;
  padding-left: 1.25rem;
  font-size: .95rem;
  line-height: 1.8;
}
.article-toc a{
  color: var(--text-muted);
  text-decoration: none;
  transition: color .15s ease;
}
.article-toc a:hover{ color: var(--accent); }

@media (max-width: 640px){
  .article-toc{ padding: 1rem 1.2rem; }
  .article-toc ol{ font-size: .92rem; line-height: 1.7; }
}

/* ============================================================
   COOKIE CONSENT BANNER v2.0
   - Gleichwertige Buttons (kein Nudging)
   - Modal-Charakter (sperrt Scrolling)
   ============================================================ */
#cookie-consent-root * { box-sizing: border-box; }

body.cc-no-scroll { overflow: hidden; }

.cc-overlay {
  position: fixed; inset: 0;
  background: rgba(8, 14, 22, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9998;
  animation: ccFade 0.25s ease;
}

.cc-banner {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 560px;
  background: #fff;
  color: #0e1722;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28), 0 8px 20px rgba(0, 0, 0, 0.14);
  z-index: 9999;
  animation: ccSlideUp 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.cc-banner-inner { padding: 28px 28px 22px; }

.cc-modal {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 32px);
  max-width: 560px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #fff;
  color: #0e1722;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  animation: ccZoomIn 0.3s ease;
}

.cc-modal-inner { padding: 32px 28px 24px; position: relative; }

.cc-close {
  position: absolute;
  top: 12px; right: 14px;
  background: transparent;
  border: 0;
  font-size: 28px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 8px;
  transition: background 0.15s;
}
.cc-close:hover { background: #f3f4f6; color: #0e1722; }

.cc-title {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 800;
  font-size: 22px;
  margin: 0 0 12px;
  color: #0e1722;
  letter-spacing: -0.01em;
}

.cc-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: #475569;
  margin: 0 0 20px;
}
.cc-text a { color: #16a4a4; text-decoration: underline; font-weight: 600; }
.cc-text a:hover { color: #0e7e7e; }

/* GLEICHWERTIGE Buttons — kein Nudging */
.cc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cc-actions-equal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cc-actions-modal { margin-top: 24px; }

.cc-btn {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  padding: 13px 20px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  width: 100%;
}

/* Beide Buttons GLEICH gestaltet — DSGVO-konform */
.cc-btn-equal {
  background: #f1f5f9;
  color: #0e1722;
  border: 1.5px solid #cbd5e1;
}
.cc-btn-equal:hover {
  background: #e2e8f0;
  border-color: #16a4a4;
  transform: translateY(-1px);
}

/* Sekundärer Link für "Individuelle Einstellungen" */
.cc-actions-link {
  text-align: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
}
.cc-link {
  background: transparent;
  border: 0;
  color: #16a4a4;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 6px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cc-link:hover { color: #0e7e7e; background: #f0fdfa; }

/* Kategorien im Modal */
.cc-category {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 12px;
  background: #f8fafc;
}
.cc-category-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.cc-category-info { flex: 1; }
.cc-category strong { color: #0e1722; font-size: 15px; }
.cc-category small { color: #64748b; font-size: 13px; line-height: 1.55; display: inline-block; margin-top: 4px; }

/* Toggle-Switch */
.cc-switch {
  position: relative;
  display: inline-block;
  width: 46px; height: 26px;
  flex-shrink: 0;
  margin-top: 2px;
}
.cc-switch input { opacity: 0; width: 0; height: 0; }
.cc-slider {
  position: absolute; cursor: pointer;
  inset: 0;
  background-color: #cbd5e1;
  transition: 0.25s;
  border-radius: 26px;
}
.cc-slider::before {
  position: absolute; content: "";
  height: 20px; width: 20px;
  left: 3px; bottom: 3px;
  background-color: #fff;
  transition: 0.25s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.cc-switch input:checked + .cc-slider { background-color: #16a4a4; }
.cc-switch input:checked + .cc-slider::before { transform: translateX(20px); }
.cc-switch input:disabled + .cc-slider { background-color: #16a4a4; opacity: 0.55; cursor: not-allowed; }

/* Animationen */
@keyframes ccFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ccSlideUp { from { opacity: 0; transform: translate(-50%, 30px); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes ccZoomIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* Mobile */
@media (max-width: 520px) {
  .cc-banner { bottom: 12px; }
  .cc-banner-inner { padding: 22px 20px 18px; }
  .cc-modal-inner { padding: 28px 20px 20px; }
  .cc-actions-equal { grid-template-columns: 1fr; }
  .cc-title { font-size: 19px; }
}

/* Cookie-Tabelle in der Datenschutzerklärung */
.cookie-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  font-size: 14px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}
.cookie-table th, .cookie-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: top;
}
.cookie-table th {
  background: #f1f5f9;
  font-weight: 700;
  color: #0e1722;
  font-size: 13.5px;
}
.cookie-table tr:last-child td { border-bottom: 0; }
.cookie-table code {
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
}

/* Button-Link in der DS-Erklärung */
.btn-link {
  background: #f1f5f9;
  color: #0e1722;
  border: 1.5px solid #cbd5e1;
  padding: 11px 22px;
  border-radius: 10px;
  font-family: inherit;
  font-weight: 700;
  font-size: 14.5px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-link:hover { background: #e2e8f0; border-color: #16a4a4; }


/* ============ BLOG-FILTER ============ */
button.blog-cat{font: inherit; cursor: pointer}
.blog-card[hidden]{display: none !important}

/* ============ REDUZIERTE BEWEGUNG (Barrierefreiheit) ============ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important}
  .reveal{opacity: 1 !important; transform: none !important}
  .reviews-track{animation: none !important; flex-wrap: wrap; justify-content: center; width: auto !important}
  .reviews-track .review-card[data-clone]{display: none}
}

/* ============ FOOTER: EINSATZGEBIETE ============ */
.footer-areas{padding: 1.5rem 0 0; border-top: 1px solid rgba(255,255,255,0.1)}
.footer-areas h5, .footer-areas .footer-h5{font-size: .72rem; text-transform: uppercase; letter-spacing: .15em; color: #94a3b8; margin-bottom: .6rem}
.footer-areas p{font-size: .9rem; color: #94a3b8; line-height: 1.8}
.footer-areas a{color: #cbd5e1}
.footer-areas a:hover{color: #ffffff}
.area-grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 2rem}
.area-card{display:block; padding: 1.25rem 1.4rem; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); text-decoration: none; color: inherit; transition: border-color .2s, transform .2s}
.area-card:hover{border-color: var(--accent); transform: translateY(-2px)}
.area-card strong{display:block; color: var(--text-heading, var(--text)); font-size: 1.05rem; margin-bottom: .3rem}
.area-card span{font-size: .88rem; color: var(--text-muted)}

/* ============ BARRIEREFREIHEIT ============ */
.skip-link{position:absolute; left:1rem; top:-100px; z-index:10000; background:var(--accent); color:#fff; padding:.75rem 1.25rem; border-radius:10px; font-weight:700; text-decoration:none}
.skip-link:focus{top:1rem}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible{outline:3px solid var(--accent-2); outline-offset:3px; border-radius:4px}
footer .footer-h, footer .footer-h5{font-family: inherit; line-height: 1.4; letter-spacing: .15em; text-transform: uppercase}
.footer-col li.footer-hours{margin-top: 1rem; line-height: 1.6}
.footer-col li.footer-hours strong{color: #ffffff; font-weight: 600}

/* ================================================================
   MOBILE-FEINSCHLIFF (Prüfung Oktober 2026)
   ================================================================ */
/* Sprungmarken nicht unter der fixierten Navigation verstecken */
[id]{scroll-margin-top: 130px}

/* Lange deutsche Wörter sauber trennen statt über den Rand laufen */
h1, h2, h3, .article-content p, .article-content li, .legal p, .legal li, .lead{overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto}

@media (max-width: 900px){
  /* Menü: große Tippflächen, Kontakt-Button mit Luft */
  .nav-links.open a{display:block; padding: .7rem 1rem; min-height: 44px; text-align:center}
  .nav-links.open .nav-cta{padding: .8rem 1.6rem; align-self: center}
  .burger{min-width: 44px; min-height: 44px}
  /* Footer-Links: größere Tippflächen */
  .footer-col li{margin-bottom: .2rem}
  .footer-col a{display:inline-block; padding: .55rem 0}
  .footer-bottom a, .footer-areas a{display:inline-block; padding: .45rem 0}
}

@media (max-width: 900px){
  .ref-card-dots{gap: 0}
  .ref-card-dots button{background: transparent; position: relative}
  .ref-card-dots button.is-active{background: transparent; transform: none}
  .ref-card-dots button::after{content:""; position:absolute; border-radius: 50%; background: rgba(255,255,255,0.5)}
  .ref-card-dots button.is-active::after{background: #ffffff}
}
@media (max-width: 600px){
  /* Notdienst-Leiste: immer genau eine Zeile, Navigation direkt darunter */
  .emergency-banner{height: 40px; padding: 0 12px; display:flex; align-items:center; justify-content:center; gap:.5rem; white-space:nowrap; line-height:1}
  .emergency-banner strong{font-size: .8rem}
  .emergency-banner a{margin-left:0; padding: 6px 12px; font-size: .85rem}
  .nav{top: 40px}

  /* Tabellen seitlich wischbar statt abgeschnitten */
  .article-content table, .legal table, .cookie-table{display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling: touch}

  /* Mindestschriftgröße 12px */
  .blog-card-cat, .footer-areas .footer-h5, .footer-legal-col .footer-h5, .service-num, .addon-tags span,
  .project-tag, .contact-method-label, .ref-card-badge{font-size: .75rem}

  /* Bedienelemente: mind. 44px */
  .blog-cat{min-height: 44px}
  .ref-card-nav{width: 44px; height: 44px}
  .ref-card-dots{gap: 0}
  .ref-card-dots button{width: 28px; height: 28px; background: transparent; position: relative}
  .ref-card-dots button::after{content:""; position:absolute; inset: 9px; border-radius: 50%; background: rgba(255,255,255,0.5)}
  .ref-card-dots button.is-active{background: transparent; transform: none}
  .ref-card-dots button.is-active::after{background: #ffffff}
  .form-check input{width: 22px; height: 22px; flex: 0 0 22px; margin-top: 0}
  .project-meta{left: 16px; right: 16px}

  /* Anruf-Button erst nach dem ersten Bildschirm einblenden (verdeckt sonst den Hauptbutton) */
  .floating-call{transition: opacity .25s, transform .25s}
  html.fab-hide .floating-call{opacity: 0; transform: translateY(16px); pointer-events: none}
}
@media (max-width: 360px){
  .emergency-banner strong{display:none}
  .emergency-banner a::before{content: "Notdienst: "}
}

/* Tablet und Handy: Mindestgrößen auch bis 900px */
@media (max-width: 900px){
  .footer-areas .footer-h5, .footer-legal-col .footer-h5,
  .blog-card-cat, .footer-h5, .service-num, .addon-tags span, .project-tag,
  .contact-method-label, .ref-card-badge, .ref-card-tag{font-size: .75rem}
  .blog-cat{min-height: 44px}
  .ref-card-nav{width: 44px; height: 44px}
  .ref-card-dots button{width: 44px; height: 44px}
  .ref-card-dots button::after{inset: 17px}
  .reviews-footer a{display:inline-block; padding: .6rem 0}
  .emergency-banner a{padding: 6px 12px}
  .form-check input{width: 24px; height: 24px; flex: 0 0 24px}
}

/* Projektkarten: Beschriftung unten auf dem dunklen Verlauf (lesbar auf hellen Fotos) */
.project-card.has-photo .project-meta{position: absolute; left: 22px; right: 22px; bottom: 22px; top: auto}
.project-card.has-photo .project-tag{display: inline-block; padding: .3rem .65rem; border-radius: 999px}
.project-card.has-photo::after{background: linear-gradient(180deg, rgba(15,23,42,0) 35%, rgba(15,23,42,0.85) 100%)}

/* Touch-Geräte: Pfeil auf den Leistungskarten immer zeigen (kein Hover) */
@media (hover: none){
  a.service-card::after{opacity: 1; transform: none}
}

/* Platz für den Anruf-Button im Footer statt weißem Streifen unter der Seite */
@media (max-width: 768px){
  body{padding-bottom: 0}
  footer{padding-bottom: calc(2rem + 80px)}
}
.nowrap{white-space: nowrap}

/* Logo in der Navigation größer (Footer unverändert) */
.nav .logo{font-size: 1.5rem}
@media (max-width: 900px){ .nav .logo{font-size: 1.35rem} }
@media (max-width: 380px){ .nav .logo{font-size: 1.2rem} }