/* ═══════════════════════════════════════════════════════
   Royer Installateur — Shared Stylesheet
   CI: #124C73 (Blau) · #EC6608 (Orange) · #d93b2b (Rot)
   Font: Quicksand self-hosted TTF
   ═══════════════════════════════════════════════════════ */

/* ── Cookie Consent (orestbida/cookieconsent) — Brand-Farben ── */
#cc-main {
  --cc-font-family: 'Quicksand', sans-serif;
  --cc-btn-primary-bg: #EC6608;
  --cc-btn-primary-border-color: #EC6608;
  --cc-btn-primary-hover-bg: #c45200;
  --cc-btn-primary-hover-border-color: #c45200;
  --cc-btn-secondary-bg: #f7f3ee;
  --cc-btn-secondary-hover-bg: #ede8e0;
}
/* Pill-Radius nur auf die echten Buttons — nicht auf .pm__section (Akkordeon-Blöcke),
   die dieselbe --cc-btn-border-radius-Variable mitbenutzen */
#cc-main .cm__btn,
#cc-main .pm__btn,
#cc-main .pm__close-btn {
  border-radius: 100px;
}

@font-face { font-family:'Quicksand'; src:url('fonts/Quicksand-Light.woff2') format('woff2'), url('fonts/Quicksand-Light.ttf') format('truetype'); font-weight:300; font-display:optional; }
@font-face { font-family:'Quicksand'; src:url('fonts/Quicksand-Regular.woff2') format('woff2'), url('fonts/Quicksand-Regular.ttf') format('truetype'); font-weight:400; font-display:optional; }
@font-face { font-family:'Quicksand'; src:url('fonts/Quicksand-Medium.woff2') format('woff2'), url('fonts/Quicksand-Medium.ttf') format('truetype'); font-weight:500; font-display:optional; }
@font-face { font-family:'Quicksand'; src:url('fonts/Quicksand-SemiBold.woff2') format('woff2'), url('fonts/Quicksand-SemiBold.ttf') format('truetype'); font-weight:600; font-display:optional; }
@font-face { font-family:'Quicksand'; src:url('fonts/Quicksand-Bold.woff2') format('woff2'), url('fonts/Quicksand-Bold.ttf') format('truetype'); font-weight:700; font-display:optional; }

/* ── Variables ── */
:root {
  --blue:      #124C73;
  --blue-d:    #0d3658;
  --blue-bg:   rgba(18,76,115,.07);
  --orange:    #EC6608;
  --orange-d:  #c45200;
  --orange-bg: rgba(236,102,8,.08);
  --red:       #d93b2b;
  --red-bg:    rgba(217,59,43,.07);
  --dark:      #1a1a1a;
  --text:      #2a2a2a;
  --sub:       #5a5a5a;
  --muted:     #999;
  --cream:     #f7f3ee;
  --cream-2:   #ede8e0;
  --white:     #ffffff;
  --border:    #e0d9d0;
  --card:      #faf7f3;
  --r:         14px;
  --shadow:    0 4px 24px rgba(0,0,0,.07);
  --max:       1160px;
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; overflow-x:clip; }
/* overflow-x:clip (nicht hidden) auf html+body: .nav-mobile (position:fixed + transform) kann auf iOS Safari
   horizontales Scrollen der ganzen Seite auslösen, auch wenn das Panel selbst unsichtbar ist.
   „hidden" würde das lösen, aber auf iOS Safari zugleich position:sticky (Header) kaputt machen —
   „clip" verhindert das Scrollen ohne einen neuen Scroll-Container zu erzeugen. */
body { font-family:'Quicksand',sans-serif; font-size:18px; line-height:1.7; color:var(--text); background:var(--white); -webkit-font-smoothing:antialiased; overflow-x:clip; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
ul { list-style:none; }

/* ── Container ── */
.container { max-width:var(--max); margin:0 auto; padding:0 32px; }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; gap:8px; border-radius:100px; font-family:'Quicksand',sans-serif; font-weight:700; font-size:15px; cursor:pointer; border:none; transition:all .18s; padding:12px 28px; text-decoration:none; }
.btn-primary   { background:var(--orange); color:#fff; }
.btn-primary:hover { background:var(--orange-d); transform:translateY(-1px); }
.btn-secondary { background:var(--blue); color:#fff; }
.btn-secondary:hover { background:var(--blue-d); transform:translateY(-1px); }
.btn-outline   { background:transparent; color:var(--text); border:2px solid var(--border); }
.btn-outline:hover { border-color:var(--orange); color:var(--orange); }
.btn-outline-blue { background:transparent; color:var(--blue); border:2px solid var(--blue); }
.btn-outline-blue:hover { background:var(--blue); color:#fff; }
.btn-red       { background:var(--red); color:#fff; }
.btn-red:hover { background:#b83020; transform:translateY(-1px); }
.btn-white     { background:#fff; color:var(--dark); }
.btn-white:hover { background:var(--cream); }
.btn-white-orange { background:#fff; color:var(--orange); }
.btn-white-orange:hover { background:var(--orange); color:#fff; transform:translateY(-1px); }

/* ── Chip ── */
.chip { display:inline-block; font-size:16px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--orange); border:1.5px solid rgba(236,102,8,.35); border-radius:100px; padding:4px 14px; margin-bottom:16px; }
.chip.blue  { color:var(--blue); border-color:rgba(18,76,115,.3); }
.chip.red   { color:var(--red); border-color:rgba(217,59,43,.35); }
.chip.white { color:rgba(255,255,255,.75); border-color:rgba(255,255,255,.25); }

/* ── Typography ── */
h1,h2,h3 { font-family:'Quicksand',sans-serif; font-weight:700; line-height:1.0; color:var(--blue); }
.section-title { font-size:clamp(26px,4vw,48px); margin-bottom:14px; }
.section-sub   { font-size:20px; color:var(--sub); line-height:1.4; max-width:540px; }

/* ── Image Placeholder ── */
.img-ph { background:var(--cream-2); border-radius:var(--r); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--muted); font-size:13px; text-align:center; padding:24px; }
.img-ph i { color:var(--orange); }
.img-ph.red-ph { background:rgba(217,59,43,.04); }
.img-ph.red-ph i { color:var(--red); opacity:.7; }
.img-ph.dark-ph { background-image: url(images/techniker.webp);background-size: cover; background-repeat: no-repeat; background-position: center center; }
.img-ph.dark-ph i { color:rgba(236,102,8,.35); }
.img-ph.dark-ph p { color:#555; display: none; }

/* ══════════════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════════════ */
.nav-topbar { background:var(--blue); padding:8px 0; }
.nav-topbar .container { display:flex; justify-content:flex-end; align-items:center; gap:24px; }
.nav-topbar a { color:rgba(255,255,255,.7); font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:5px; transition:color .15s; }
.nav-topbar a:hover { color:#fff; }
.social-links { display:flex; gap:10px; margin-left:8px; padding-left:16px; border-left:1px solid rgba(255,255,255,.15); }
.social-links a { opacity:.55; }
.social-links a:hover { opacity:1; }

.nav-main { background:var(--white); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; box-shadow:0 1px 8px rgba(0,0,0,.05); }
.nav-inner { display:flex; align-items:center; height:72px; }
.nav-logo { margin-right:80px; flex-shrink:0; display:flex; align-items:center; }
.nav-logo img { height:60px; width:auto; }
.nav-links { display:flex; gap:28px; }
.nav-links a { font-size:18px; font-weight:600; color:var(--sub); transition:color .15s; padding:4px 0; border-bottom:2px solid transparent; }
.nav-links a:hover, .nav-links a.active { color:var(--blue); border-bottom-color:var(--orange); }
.nav-links a.nav-notfall { color:var(--red); }
.nav-links a.nav-notfall:hover { border-bottom-color:var(--red); }
.nav-cta { margin-left:auto; display:flex; align-items:center; gap:10px; }

/* Hamburger */
.nav-hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; margin-left:auto; }
.nav-hamburger span { display:block; width:22px; height:2px; background:var(--dark); border-radius:2px; transition:all .25s; }
.nav-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile nav panel */
.nav-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:150; opacity:0; pointer-events:none; transition:opacity .3s; }
.nav-overlay.open { opacity:1; pointer-events:all; }
.nav-mobile { position:fixed; top:0; right:0; bottom:0; width:80%; max-width:340px; background:var(--white); z-index:151; padding:88px 28px 40px; display:flex; flex-direction:column; gap:0; transform:translateX(100%); transition:transform .3s ease; box-shadow:-4px 0 40px rgba(0,0,0,.1); overflow-y:auto; }
.nav-mobile.open { transform:translateX(0); }
.nav-mobile a { font-size:18px; font-weight:700; color:var(--dark); padding:14px 0; border-bottom:1px solid var(--border); display:block; }
.nav-mobile a.nav-notfall { color:var(--red); }
.mobile-cta { margin-top:24px; display:flex; flex-direction:column; gap:12px; }

@media(max-width:960px) {
  .nav-hamburger { display:flex; }
  .nav-links, .nav-cta { display:none; }
}

/* ══════════════════════════════════════════════════
   PAGE HEADER (Unterseiten)
══════════════════════════════════════════════════ */
.page-header { background:var(--cream); padding:52px 0 56px; border-bottom:1px solid var(--border); }
.breadcrumb { font-size:14px; color:var(--muted); margin-bottom:18px; display:flex; align-items:center; gap:6px; }
.breadcrumb a { color:var(--muted); }
.breadcrumb a:hover { color:var(--orange); }
.page-header h1 { font-size:clamp(30px,5vw,50px); color:var(--blue); max-width:680px; }
.page-header .ph-sub { font-size:19px; color:var(--sub); margin-top:14px; max-width:560px; line-height:1.75; }

/* ══════════════════════════════════════════════════
   TRUST BAR
══════════════════════════════════════════════════ */
.trust-bar { background:var(--white); border-bottom:1px solid var(--border); }
.trust-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.trust-item { padding:26px 22px; border-right:1px solid var(--border); display:flex; align-items:center; gap:14px; min-width:0; }
.trust-item:last-child { border-right:none; }
.trust-item > div:last-child { min-width:0; }
.trust-icon { width:44px; height:44px; border-radius:12px; background:var(--orange-bg); display:flex; align-items:center; justify-content:center; color:var(--orange); flex-shrink:0; }
.trust-num { font-size:22px; font-weight:700; color:var(--orange); line-height:1; }
.trust-label { font-size:13.5px; font-weight:600; color:var(--sub); margin-top:3px; line-height:1.4; }

/* ══════════════════════════════════════════════════
   SECTIONS
══════════════════════════════════════════════════ */
.section { padding:84px 0; }
.section-cream { background:var(--cream); }
.section-alt   { background:var(--card); }
.section-dark  { background:var(--blue); }
.section-dark h2, .section-dark h3 { color:#fff; }
.section + .section { border-top:1px solid var(--border); }
section { border-bottom:1px solid var(--border); }

/* ══════════════════════════════════════════════════
   SERVICE CARDS
══════════════════════════════════════════════════ */
.services-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.service-card { border:1.5px solid var(--border); border-radius:var(--r); overflow:hidden; background:var(--white); transition:box-shadow .2s,border-color .2s; }
.service-card:hover { box-shadow:var(--shadow); border-color:var(--orange); }
.service-card.notfall-card { border-color:rgba(217,59,43,.2); }
.service-card.notfall-card:hover { border-color:var(--red); }
.service-card-img { height:200px; position:relative; overflow:hidden; }
.service-tag { position:absolute; top:14px; left:14px; background:rgba(255,255,255,.92); border-radius:100px; padding:4px 13px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; backdrop-filter:blur(4px); color:var(--dark); }
.service-tag.red { background:var(--red); color:#fff; }
.service-card-body { padding:24px 26px; }
.service-title { font-size:18px; font-weight:700; color:var(--blue); margin-bottom:8px; }
.notfall-card .service-title { color:var(--red); }
.service-text { font-size:16px; color:var(--sub); line-height:1.75; margin-bottom:18px; }
.service-link { display:inline-flex; align-items:center; gap:6px; font-size:15px; font-weight:700; color:var(--orange); transition:gap .15s; }
.notfall-card .service-link { color:var(--red); }
.service-link:hover { gap:10px; }

/* ══════════════════════════════════════════════════
   PROCESS
══════════════════════════════════════════════════ */
.process-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; position:relative; }
.process-connector { position:absolute; top:32px; left:12%; width:76%; height:1px; background:var(--border); z-index:0; }
.process-step { text-align:center; padding:0 20px; position:relative; z-index:1; }
.process-num { width:64px; height:64px; border-radius:100px; background:var(--white); border:2px solid var(--orange); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; font-size:22px; font-weight:700; color:var(--orange); }
.process-step-title { font-size:20px; font-weight:700; color:var(--blue); margin-bottom:8px; }
.process-step-text { font-size:15px; color:var(--sub); line-height:1.65; }

/* ══════════════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════════════ */
.testi-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.testi-card { background:var(--white); border:1.5px solid var(--border); border-radius:var(--r); padding:28px; }
.testi-stars { display:flex; gap:3px; color:var(--orange); margin-bottom:14px; }
.testi-text { font-size:16px; color:var(--sub); line-height:1.75; font-style:italic; margin-bottom:20px; }
.testi-author { display:flex; align-items:center; gap:12px; }
.testi-avatar { width:42px; height:42px; border-radius:100px; background:linear-gradient(135deg,var(--orange),#f5a44a); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; color:#fff; flex-shrink:0; }
.testi-name { font-size:14px; font-weight:700; color:var(--blue); }
.testi-detail { font-size:12px; color:var(--muted); }
.testi-ph { background:var(--card); border:2px dashed var(--border); border-radius:var(--r); padding:28px; display:flex; align-items:center; justify-content:center; text-align:center; min-height:200px; }
.testi-ph p { font-size:13px; color:var(--muted); line-height:1.7; }
.testi-ph strong { color:var(--orange); display:block; margin-top:8px; }

/* ══════════════════════════════════════════════════
   NOTFALL CTA STRIP
══════════════════════════════════════════════════ */
.notfall-strip { display:grid; grid-template-columns:1fr 600px; overflow:hidden; border-bottom:1px solid var(--border); }
.notfall-strip-content { background:var(--blue);     padding: 64px 56px 64px 300px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.notfall-strip-title { font-size:clamp(28px,4vw,46px); font-weight:700; color:#fff; line-height:1.18; margin-bottom:14px; }
.notfall-strip-title .red { color:var(--red); }
.notfall-strip-sub { font-size:16px; color:rgba(255,255,255,.55); margin-bottom:32px; max-width:400px; }
.notfall-phone { font-size:36px; font-weight:700; color:#fff; display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.notfall-phone i { color:var(--orange); }

/* ══════════════════════════════════════════════════
   CONTACT / FORM
══════════════════════════════════════════════════ */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:flex-start; }
.contact-items { display:flex; flex-direction:column; gap:14px; margin-top:28px; }
.contact-item { display:flex; align-items:flex-start; gap:14px; padding:16px 18px; background:var(--card); border:1.5px solid var(--border); border-radius:10px; }
.contact-icon { width:40px; height:40px; border-radius:10px; background:var(--orange-bg); display:flex; align-items:center; justify-content:center; color:var(--orange); flex-shrink:0; }
.c-label { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.c-value { font-size:16px; font-weight:700; color:var(--text); margin-top:2px; }
.form-card { background:var(--card); border:1.5px solid var(--border); border-radius:var(--r); padding:36px; margin-top: 141px; }
.form-title { font-size:22px; font-weight:700; color:var(--blue); margin-bottom:24px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-field { display:flex; flex-direction:column; gap:5px; }
.form-field.full { grid-column:1/-1; }
label { font-size:12px; font-weight:700; color:var(--sub); text-transform:uppercase; letter-spacing:.07em; }
input, select, textarea { background:var(--white); border:1.5px solid var(--border); border-radius:8px; color:var(--text); font-family:'Quicksand',sans-serif; font-weight:500; font-size:16px; padding:11px 14px; width:100%; outline:none; transition:border-color .15s; }
input:focus, select:focus, textarea:focus { border-color:var(--orange); }
input::placeholder, textarea::placeholder { color:var(--muted); }
select { appearance:none; }
textarea { resize:vertical; min-height:96px; }
.form-submit { margin-top:18px; width:100%; justify-content:center; padding:14px; font-size:16px; }
.form-success { display:none; padding:20px; background:rgba(18,76,115,.06); border:1.5px solid rgba(18,76,115,.2); border-radius:10px; margin-top:16px; text-align:center; }

/* ══════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════ */
footer { background:var(--blue); color:rgba(255,255,255,.6); padding:60px 0 32px; }
.footer-grid { display:grid; grid-template-columns:260px 1fr 1fr 1fr; gap:48px; padding-bottom:40px; margin-bottom:32px; border-bottom:1px solid rgba(255,255,255,.08); }
.footer-logo { margin-bottom:14px; }
.footer-logo img { height:50px; width:auto; }
.footer-claim { font-size:14px; color:var(--orange); font-weight:700; margin-bottom:14px; }
.footer-desc { font-size:14.5px; line-height:1.7; }
.footer-col h3 { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.35); margin-bottom:16px; }
.footer-links { display:flex; flex-direction:column; gap:10px; }
.footer-links a { font-size:15px; color:rgba(255,255,255,.55); transition:color .15s; }
.footer-links a:hover { color:#fff; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; font-size:14px; flex-wrap:wrap; gap:14px; }
.footer-legal { display:flex; gap:20px; }
.footer-legal a { color:rgba(255,255,255,.35); transition:color .15s; }
.footer-legal a:hover { color:rgba(255,255,255,.7); }

/* ══════════════════════════════════════════════════
   FLOAT NOTFALL BUTTON
══════════════════════════════════════════════════ */
.float-notfall { position:fixed; bottom:40px; right:40px; background:var(--red); color:#fff; border-radius:100px; padding:13px 22px; display:flex; align-items:center; gap:9px; font-family:'Quicksand',sans-serif; font-weight:700; font-size:14px; box-shadow:0 4px 20px rgba(217,59,43,.38); z-index:200; transition:transform .15s; text-decoration:none; }
.float-notfall:hover { transform:translateY(-2px); color:#fff; }
.float-notfall:hover::after { animation-play-state:paused; }

/* Puls-Ring als eigenes Pseudo-Element, animiert nur transform/opacity (GPU-Compositing,
   kein Repaint pro Frame wie bei einer box-shadow-Animation) */
.float-notfall::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:100px;
  background:var(--red);
  z-index:-1;
  pointer-events:none;
  animation:notfall-pulse-ring 2.4s ease-out infinite;
}

@keyframes notfall-pulse-ring {
  0%   { transform:scale(1); opacity:.55; }
  70%  { transform:scale(1.35); opacity:0; }
  100% { transform:scale(1.35); opacity:0; }
}

@media (prefers-reduced-motion: reduce) {
  .float-notfall::after { animation:none; }
}

/* ══════════════════════════════════════════════════
   LEISTUNG ROWS (Unterseiten)
══════════════════════════════════════════════════ */
.leistung-list { display:flex; flex-direction:column; gap:14px; margin-top:28px; }
.leistung-item { display:grid; grid-template-columns:44px 1fr; gap:16px; align-items:flex-start; padding:20px; background:var(--card); border:1.5px solid var(--border); border-radius:12px; }
.leistung-icon { width:44px; height:44px; background:var(--orange-bg); border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--orange); flex-shrink:0; }
.leistung-title { font-size:17px; font-weight:700; color:var(--blue); margin-bottom:4px; }
.leistung-text { font-size:16px; color:var(--sub); line-height:1.65; }

/* Benefits list */
.benefits-list { display:flex; flex-direction:column; gap:0; }
.benefit-row { display:flex; gap:20px; padding:22px 0; border-bottom:1px solid var(--border); align-items:flex-start; }
.benefit-row:first-child { border-top:1px solid var(--border); }
.benefit-num { font-size:26px; font-weight:700; color:var(--orange); opacity:.25; flex-shrink:0; width:48px; line-height:1; padding-top:2px; }
.benefit-title { font-size:17px; font-weight:700; color:var(--blue); margin-bottom:5px; }
.benefit-text { font-size:16px; color:var(--sub); line-height:1.7; }

/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */
@media(max-width:960px) {
  .trust-grid { grid-template-columns:1fr 1fr; }
  .trust-item:nth-child(2) { border-right:none; }
  .services-grid { grid-template-columns:1fr; }
  .process-grid { grid-template-columns:1fr 1fr; gap:24px; }
  .process-connector { display:none; }
  .testi-grid { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; gap:40px; }
  .form-grid { grid-template-columns:1fr; }
  .notfall-strip { grid-template-columns:1fr; }
  .notfall-strip .img-ph { display:none; }
  .notfall-strip-content { padding:48px 32px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
}
@media(max-width:640px) {
  .container { padding:0 20px; }
  .section { padding:56px 0; }
  .process-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .trust-grid { grid-template-columns:1fr 1fr; }
}

/* ══════════════════════════════════════════════════
   SUBPAGE COMPONENTS
   (heizung-linz · sanitaer-linz · ueber-uns · kontakt)
══════════════════════════════════════════════════ */

/* Topbar (new class) */
.topbar { background:var(--blue); padding:8px 0; }
.topbar-inner { max-width:var(--max); margin:0 auto; padding:0 32px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.topbar-inner span { color:rgba(255,255,255,.75); font-size:12.5px; font-weight:600; display:inline-flex; align-items:center; gap:5px; }

/* Nav wrapper (new class, vs old .nav-main) */
.nav { background:var(--white); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; box-shadow:0 1px 8px rgba(0,0,0,.05); }
.nav .nav-inner { max-width:var(--max); margin:0 auto; padding:0 32px; display:flex; align-items:center; height:90px; }

/* Nav CTA as direct button link */
.nav .nav-cta { margin-left:auto; flex-shrink:0; background:var(--orange); color:#fff !important; padding:10px 22px; border-radius:100px; font-family:'Quicksand',sans-serif; font-weight:700; font-size:14px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:background .15s; border-bottom:none !important; }
.nav .nav-cta:hover { background:var(--orange-d); }

/* Mobile nav header */
.nav-mobile-header { position:absolute; top:0; left:0; right:0; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); background:var(--white); }
.nav-mobile-header button { background:none; border:none; font-size:22px; cursor:pointer; color:var(--dark); line-height:1; padding:4px; }

/* Standalone button classes (used without .btn base) */
.btn-primary { display:inline-flex; align-items:center; gap:8px; background:var(--orange); color:#fff; padding:12px 28px; border-radius:100px; font-family:'Quicksand',sans-serif; font-weight:700; font-size:15px; text-decoration:none; border:none; cursor:pointer; transition:background .18s, transform .18s; }
.btn-primary:hover { background:var(--orange-d); transform:translateY(-1px); color:#fff; }
.btn-outline { display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--text); border:2px solid var(--border); padding:12px 28px; border-radius:100px; font-family:'Quicksand',sans-serif; font-weight:700; font-size:15px; text-decoration:none; cursor:pointer; transition:all .18s; }
.btn-outline:hover { border-color:var(--orange); color:var(--orange); }

/* Eyebrow label */
.eyebrow { display:block; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--orange); margin-bottom:12px; }

/* Hero actions */
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:1.5rem; }

/* Image placeholder (new class, vs old .img-ph) */
.img-placeholder { background:var(--cream-2); border-radius:var(--r); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--muted); font-size:13px; text-align:center; padding:24px; }

/* Page hero */
.page-hero { background:var(--cream); padding:56px 0 64px; border-bottom:1px solid var(--border); }
.page-hero-grid { display:grid; grid-template-columns:1fr 400px; gap:56px; align-items:center; margin-top:1.5rem; }
.page-hero-text h1 { font-size:clamp(28px,4vw,46px); margin-bottom:1rem; }
.page-hero-lead { font-size:19px; color:var(--sub); line-height:1.75; margin-top:.75rem; }

/* Section head centered */
.section-head { text-align:center; max-width:640px; margin:0 auto 3rem; }
.section-head h2 { font-size:clamp(26px,4vw,40px); margin-bottom:.75rem; }
.section-head p { font-size:18px; color:var(--sub); line-height:1.75; }

/* Two-column layout */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }

/* Vorteil cards */
.vorteil-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; }
.vorteil-card { background:var(--card); border:1.5px solid var(--border); border-radius:var(--r); padding:2rem; transition:border-color .2s, box-shadow .2s; }
.vorteil-card:hover { border-color:var(--orange); box-shadow:var(--shadow); }
.vorteil-icon { width:56px; height:56px; background:var(--orange-bg); border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
.vorteil-card h3 { font-size:18px; font-weight:700; color:var(--blue); margin-bottom:.5rem; }
.vorteil-card p { font-size:16px; color:var(--sub); line-height:1.7; }

/* Process step titles/text (shared) */
.process-number { width:56px; height:56px; border-radius:100px; background:var(--white); border:2px solid var(--orange); display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; font-size:20px; font-weight:700; color:var(--orange); }
.process-step h3 { font-size:17px; font-weight:700; color:var(--blue); margin-bottom:.5rem; }
.process-step p { font-size:16px; color:var(--sub); line-height:1.65; }

/* Stats row (on blue bg, für ueber-uns) */
.stats-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.stat-item { padding:36px 20px; text-align:center; border-right:1px solid rgba(255,255,255,.15); }
.stat-item:last-child { border-right:none; }
.stat-number { font-size:44px; font-weight:700; color:#fff; line-height:1; margin-bottom:8px; }
.stat-item .stat-label { color:rgba(255,255,255,.7); font-size:13px; }

/* Notfall-Strip: new content layout */
.notfall-content { display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; padding:3rem 0; }
.notfall-actions { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; flex-shrink:0; }
.btn-notfall { display:inline-flex; align-items:center; gap:8px; background:var(--orange); color:#fff; padding:14px 28px; border-radius:100px; font-family:'Quicksand',sans-serif; font-weight:700; font-size:16px; text-decoration:none; transition:background .15s; }
.btn-notfall:hover { background:var(--orange-d); color:#fff; }

/* Footer class (new pages use class .footer instead of element footer) */
.footer { background:var(--blue); color:rgba(255,255,255,.6); padding:60px 0 32px; }
.footer .footer-grid { display:grid; grid-template-columns:260px 1fr 1fr 1fr; gap:48px; padding-bottom:40px; margin-bottom:32px; border-bottom:1px solid rgba(255,255,255,.08); }
.footer-brand p { font-size:14.5px; line-height:1.7; color:rgba(255,255,255,.55); }
.footer .footer-col h3 { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.35); margin-bottom:16px; }
.footer .footer-col a { display:block; font-size:15px; color:rgba(255,255,255,.55); margin-bottom:10px; transition:color .15s; }
.footer .footer-col a:hover { color:#fff; }
.footer .footer-col p { font-size:14.5px; color:rgba(255,255,255,.55); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.footer .footer-col p a { display:inline; margin:0; color:rgba(255,255,255,.55); }
.footer .footer-col p a:hover { color:#fff; }
.footer .footer-bottom { display:flex; justify-content:space-between; align-items:center; font-size:14px; color:rgba(255,255,255,.35); flex-wrap:wrap; gap:1rem; padding-top:0; }
.footer .footer-bottom p { color:rgba(255,255,255,.35); margin:0; }

/* Contact form (new classes) */
.contact-form { display:flex; flex-direction:column; gap:1rem; }
.form-group { display:flex; flex-direction:column; gap:.4rem; }
.form-group label { font-size:12px; font-weight:700; color:var(--sub); text-transform:uppercase; letter-spacing:.07em; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

/* Location tags (sanitaer-linz) */
.location-tags { display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; }
.location-tags span { background:var(--white); border:1.5px solid var(--border); border-radius:100px; padding:.4rem 1rem; font-size:13px; font-weight:600; color:var(--blue); }

/* Video-Teaser + Modal (Unternehmensvideo) */
.video-teaser { position:relative; border-radius:var(--r); overflow:hidden; cursor:pointer; display:block; width:100%; max-width:640px; margin:0 auto; border:none; padding:0; background:none; font:inherit; text-align:left; }
.video-teaser img { width:100%; height:auto; display:block; transition:transform .35s; }
.video-teaser:hover img { transform:scale(1.03); }
.video-teaser-overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(3,26,47,.15),rgba(3,26,47,.55)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; }
.video-teaser-label { background:rgba(255,255,255,.95); color:var(--blue); font-weight:700; font-size:14px; padding:9px 22px; border-radius:100px; }
.video-play-btn { width:78px; height:78px; border-radius:50%; background:var(--orange); display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 0 rgba(236,102,8,.55); animation:video-pulse 2.2s infinite; }
.video-play-btn svg { width:26px; height:26px; fill:#fff; margin-left:4px; }
@keyframes video-pulse {
  0%   { box-shadow:0 0 0 0 rgba(236,102,8,.55); }
  70%  { box-shadow:0 0 0 24px rgba(236,102,8,0); }
  100% { box-shadow:0 0 0 0 rgba(236,102,8,0); }
}

.video-modal { display:none; position:fixed; inset:0; background:rgba(3,10,18,.92); z-index:9999; align-items:center; justify-content:center; padding:24px; }
.video-modal.open { display:flex; }
.video-modal-inner { width:100%; max-width:960px; position:relative; }
.video-modal video { width:100%; border-radius:12px; display:block; background:#000; }
.video-modal-close { position:absolute; top:-44px; right:0; background:none; border:none; color:#fff; font-size:32px; line-height:1; cursor:pointer; padding:6px; }
@media(max-width:640px) {
  .video-modal-close { top:-40px; font-size:26px; }
  .video-play-btn { width:64px; height:64px; }
  .video-play-btn svg { width:22px; height:22px; }
}

/* ── Responsive additions ── */
@media(max-width:960px) {
  .nav .nav-cta { display:none; }
  .topbar-inner span:nth-child(2) { display:none; }
  .page-hero-grid { grid-template-columns:1fr; }
  .page-hero-img { display:none; }
  .two-col { grid-template-columns:1fr; gap:2rem; }
  .vorteil-grid { grid-template-columns:1fr 1fr; }
  .stats-row { grid-template-columns:1fr 1fr; }
  .stat-item:nth-child(2) { border-right:none; }
  .stat-number { font-size:36px; }
  .footer .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
  .notfall-content { flex-direction:column; align-items:flex-start; padding:2rem 0; }
  .form-row { grid-template-columns:1fr; }
}
@media(max-width:640px) {
  .topbar-inner { justify-content:center; flex-direction:column; gap:6px; padding:10px 20px; }
  .topbar-inner span:nth-child(2) { display:none; }
  .vorteil-grid { grid-template-columns:1fr; }
  .footer .footer-grid { grid-template-columns:1fr; }
  .stats-row { grid-template-columns:1fr 1fr; }
}


/* Cross-Brand-Banner (Royer Badsanierung) — ergaenzt 01.08.2026 */
.cross-brand { background:var(--blue-bg); border-top:1px solid rgba(18,76,115,.15); padding:32px 0; }
.cross-brand-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.cross-brand-text strong { display:block; font-size:17px; color:var(--blue); margin-bottom:4px; }
.cross-brand-text span { font-size:14px; color:var(--sub); }
@media(max-width:640px) { .cross-brand-inner { flex-direction:column; align-items:flex-start; } }