/* =========================================================
   Immobilien Service Florian Wunderle
   Stylesheet – Schwarz / Weiss / Orange
   Keine externen Ressourcen (DSGVO-freundlich)
   ========================================================= */

:root{
  --orange:#F07C00;
  --orange-dark:#D26A00;
  --orange-soft:#FFF3E5;
  --ink:#0B0C0E;
  --ink-2:#15171B;
  --ink-3:#22262C;
  --paper:#FFFFFF;
  --paper-2:#F6F7F9;
  --text:#1B1E23;
  --muted:#666D77;
  --line:#E2E5EA;
  --line-dark:#2C3138;
  --ok:#1E9E5A;

  --wrap:1200px;
  --r:14px;
  --r-lg:22px;
  --shadow:0 1px 2px rgba(11,12,14,.06), 0 12px 32px -12px rgba(11,12,14,.18);
  --shadow-lg:0 2px 6px rgba(11,12,14,.08), 0 30px 60px -24px rgba(11,12,14,.35);
  --sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{
  margin:0;font-family:var(--sans);color:var(--text);background:var(--paper);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit}

h1,h2,h3,h4{margin:0 0 .5em;line-height:1.12;letter-spacing:-.02em;color:var(--ink);font-weight:800}
h1{font-size:clamp(2.1rem,5.2vw,4rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}
h3{font-size:clamp(1.15rem,1.8vw,1.4rem);letter-spacing:-.01em}
p{margin:0 0 1.1em}
ul{margin:0 0 1.1em;padding-left:1.15em}
li{margin:.35em 0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.narrow{max-width:820px}
section{padding:clamp(48px,5.4vw,80px) 0}
.sec-dark{background:var(--ink);color:#D8DCE2}
.sec-dark h2,.sec-dark h3,.sec-dark h1{color:#fff}
.sec-grey{background:var(--paper-2)}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-size:.78rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:16px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--orange);display:block}
.sec-dark .eyebrow{color:var(--orange)}
.lead{font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--muted);max-width:68ch}
.sec-dark .lead{color:#A9B1BB}

/* ---------- Platzhalter ---------- */
.ph{
  background:#FFE9A8;color:#6A4B00;border-bottom:2px dashed #C8961B;
  padding:0 5px;border-radius:3px;font-weight:700;font-style:normal;white-space:nowrap;
}
.photo-ph{
  position:relative;border:2px dashed var(--orange);border-radius:var(--r);
  background:
    repeating-linear-gradient(135deg,rgba(240,124,0,.05) 0 12px,transparent 12px 24px),
    var(--orange-soft);
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--orange-dark);font-weight:700;font-size:.86rem;letter-spacing:.02em;
  padding:22px;min-height:220px;
}
.photo-ph span{max-width:32ch;display:block}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:999px;font-weight:800;font-size:1rem;
  text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  line-height:1.1;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--orange);color:#fff;border-color:var(--orange)}
.btn-primary:hover{background:var(--orange-dark);border-color:var(--orange-dark)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.sec-dark .btn-ghost,.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.sec-dark .btn-ghost:hover,.hero .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-sm{padding:11px 20px;font-size:.92rem}
.btn-block{width:100%}

/* ---------- Header ---------- */
.topbar{background:var(--ink);color:#B9C0C9;font-size:.85rem}
.topbar .wrap{display:flex;gap:22px;align-items:center;justify-content:space-between;min-height:40px;flex-wrap:wrap}
.topbar a{text-decoration:none;color:#fff;font-weight:700}
.topbar .tb-list{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.topbar .dot{color:var(--orange)}

.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:20px;min-height:76px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto;flex:none}
.brand svg{width:44px;height:44px;flex:none}
.brand-txt{display:flex;flex-direction:column;line-height:1.05}
.brand-txt b{font-size:.98rem;font-weight:900;letter-spacing:.02em;color:var(--ink);text-transform:uppercase;white-space:nowrap}
.brand-txt i{font-style:normal;font-size:.82rem;color:var(--orange);font-weight:700}

.nav{display:flex;align-items:center;gap:1px;min-width:0;flex:0 1 auto}
.nav a{
  text-decoration:none;font-weight:700;font-size:.95rem;color:var(--text);
  padding:11px 9px;border-radius:9px;white-space:nowrap;
}
.nav a:hover{background:var(--paper-2);color:var(--ink)}
.nav a.active{color:var(--orange)}
.header-cta{display:flex;align-items:center;gap:10px}
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer}
.nav-toggle span{display:block;width:26px;height:2.5px;background:var(--ink);margin:5px 0;border-radius:2px;transition:.25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

@media (max-width:1200px){
  .nav-toggle{display:block;order:3}
  .nav{
    position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;padding:10px 16px 20px;gap:2px;display:none;
    box-shadow:var(--shadow);max-height:calc(100vh - 76px);overflow:auto;
  }
  .nav.open{display:flex}
  .nav a{padding:14px 12px;border-bottom:1px solid var(--line)}
  .header-cta .btn{display:none}
  .header-cta .btn-call{display:inline-flex}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;background:var(--ink);color:#fff;overflow:hidden;
  padding:clamp(56px,7vw,92px) 0 clamp(56px,7vw,88px);
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(900px 480px at 78% 18%, rgba(240,124,0,.28), transparent 62%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 11px);
  pointer-events:none;
}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(28px,4vw,60px);align-items:center}
.hero h1{color:#fff;text-transform:uppercase;font-weight:900;letter-spacing:-.025em}
.hero h1 em{font-style:normal;color:var(--orange);display:block}
.hero p.lead{color:#C6CCD4;font-size:clamp(1.05rem,1.6vw,1.25rem)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:28px 0 22px}
.hero-usp{display:flex;gap:8px 22px;flex-wrap:wrap;color:#AEB6C0;font-size:.95rem;font-weight:600;list-style:none;padding:0}
.hero-usp li{display:flex;align-items:center;gap:8px}
.hero-usp li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--orange);flex:none}

.price-card{
  background:#fff;color:var(--ink);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow-lg);
  border-top:6px solid var(--orange);
}
.price-card .pc-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.price-card .pc-price{font-size:3.4rem;font-weight:900;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.price-card .pc-unit{font-weight:800;color:var(--muted)}
.price-card .pc-from{font-size:.8rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);display:block;margin-bottom:6px}
.price-card ul{list-style:none;padding:0;margin:18px 0 20px;font-size:.96rem}
.price-card li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line)}
.price-card li:last-child{border-bottom:0}
.check{color:var(--orange);font-weight:900;flex:none}

/* ---------- Trust bar ---------- */
.trustbar{background:var(--ink-2);border-top:1px solid var(--line-dark);padding:0}
.trustbar .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dark);padding:0}
.trustbar div{background:var(--ink-2);padding:22px 20px;color:#D6DBE2}
.trustbar b{display:block;color:#fff;font-size:1.5rem;font-weight:900;letter-spacing:-.02em}
.trustbar span{font-size:.88rem;color:#98A1AC}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(20,24,31,.10), 0 3px 10px rgba(20,24,31,.05);
  border-color:rgba(240,124,0,.34)}
.card h3{margin-bottom:.4em}
.card p:last-child{margin-bottom:0}
/* Symbole: vorher blasse Pfirsich-Quadrate mit duennem Strich - das wirkte
   wie ein Baukasten von 2002. Jetzt ein voller Farbkreis mit weissem Symbol,
   der beim Ueberfahren der Karte reagiert. Kraeftig statt schuechtern. */
.card .ico{
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(145deg,#FF9A2E 0%,var(--orange) 48%,#D96A00 100%);
  display:grid;place-items:center;margin-bottom:20px;color:#fff;
  box-shadow:0 8px 18px rgba(240,124,0,.28), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .25s cubic-bezier(.22,.8,.3,1), box-shadow .25s;
}
.card .ico svg{width:26px;height:26px;stroke-width:2.1}
.card:hover .ico{transform:translateY(-2px) scale(1.06);
  box-shadow:0 12px 26px rgba(240,124,0,.36), inset 0 1px 0 rgba(255,255,255,.4)}
/* Auf dunklem Grund bleibt der Kreis kraeftig, bekommt aber einen Rand. */
.sec-dark .card .ico{box-shadow:0 8px 20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.3)}
.card-link{text-decoration:none;display:block;color:inherit}
.card-more{color:var(--orange);font-weight:800;font-size:.94rem;margin-top:14px;display:inline-flex;gap:7px;align-items:center}
.sec-dark .card{background:var(--ink-2);border-color:var(--line-dark);color:#BFC6CF}
.sec-dark .card .ico{background:rgba(240,124,0,.14);color:var(--orange)}

/* ---------- Geräte ---------- */
.dev{display:grid;grid-template-columns:190px 1fr;gap:26px;align-items:center;
     background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px}
.dev-img{background:var(--paper-2);border-radius:var(--r);padding:14px;display:grid;place-items:center}
.dev-badge{display:inline-block;background:var(--ink);color:#fff;font-size:.72rem;font-weight:900;
  letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:999px;margin-bottom:10px}
.dev-badge.top{background:var(--orange)}
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));background:#fff;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:18px 0}
.spec div{background:#fff;padding:12px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.spec dt{font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:800;margin:0;overflow-wrap:anywhere}
.spec dd{margin:2px 0 0;font-weight:800;color:var(--ink);font-size:1.02rem}
.dev-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:space-between}
.dev-price{font-size:1.9rem;font-weight:900;letter-spacing:-.03em;color:var(--ink)}
.dev-price small{font-size:.95rem;font-weight:700;color:var(--muted);letter-spacing:0}

/* ---------- Rechner ---------- */
.calc{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:clamp(24px,3vw,36px);color:var(--text)}
.calc-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-weight:800;font-size:.88rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%;padding:14px 15px;border:2px solid var(--line);border-radius:11px;font:inherit;color:var(--ink);
  background:#fff;transition:border-color .15s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--orange)}
.field textarea{min-height:130px;resize:vertical}
.field .hint{font-size:.82rem;color:var(--muted);font-weight:500;text-transform:none;letter-spacing:0}
.calc-out{
  margin-top:8px;background:var(--ink);color:#fff;border-radius:var(--r);padding:22px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.calc-out .co-label{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#96A0AC;font-weight:800}
.calc-out .co-val{font-size:2.4rem;font-weight:900;letter-spacing:-.03em;line-height:1.05}
.calc-out .co-val span{color:var(--orange)}
.calc-note{font-size:.86rem;color:var(--muted);margin-top:12px}

/* ---------- Ablauf ---------- */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;list-style:none;padding:0}
.steps li{position:relative;padding-top:16px}
.steps li::before{
  counter-increment:s;content:counter(s);
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--orange);color:#fff;font-weight:900;font-size:1.15rem;margin-bottom:16px;
}
.steps h3{font-size:1.1rem}
.steps p{font-size:.96rem;color:var(--muted);margin:0}
.sec-dark .steps p{color:#9AA3AE}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:center}
.split.rev .split-media{order:2}

/* ---------- Liste mit Haken ---------- */
.checklist{list-style:none;padding:0;margin:0 0 1.2em}
.checklist li{position:relative;padding:10px 0 10px 36px;border-bottom:1px solid var(--line)}
.checklist li:last-child{border-bottom:0}
.checklist li::before{
  content:"";position:absolute;left:0;top:13px;width:22px;height:22px;border-radius:50%;
  background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat;
}
.sec-dark .checklist li{border-color:var(--line-dark)}
.checklist.nope li::before{
  background:#C7CCD3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* ---------- FAQ ---------- */
.faq details{border:1px solid var(--line);border-radius:var(--r);background:#fff;margin-bottom:12px;overflow:hidden}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 56px 20px 22px;font-weight:800;position:relative;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:22px;top:50%;width:12px;height:12px;margin-top:-8px;
  border-right:2.6px solid var(--orange);border-bottom:2.6px solid var(--orange);
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(225deg);margin-top:-3px}
.faq .faq-body{padding:0 22px 20px;color:var(--muted)}
.faq .faq-body p:last-child{margin-bottom:0}

/* ---------- CTA Band ---------- */
.cta-band{background:var(--orange);color:#fff}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.92);max-width:60ch}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta-band .btn-ghost{border-color:#fff;color:#fff}
.cta-band .btn-ghost:hover{background:#fff;color:var(--orange-dark)}
.cta-band .btn-primary{background:var(--ink);border-color:var(--ink)}
.cta-band .btn-primary:hover{background:#000;border-color:#000}

/* ---------- Kontakt ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,54px);align-items:start}
.contact-list{list-style:none;padding:0;margin:0}
.contact-list li{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.contact-list .ci{width:44px;height:44px;flex:none;border-radius:12px;background:var(--orange-soft);display:grid;place-items:center;color:var(--orange-dark)}
.contact-list .ci svg{width:22px;height:22px}
.contact-list b{display:block;font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.contact-list a{font-weight:800;text-decoration:none;font-size:1.1rem;color:var(--ink)}
.contact-list a:hover{color:var(--orange)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#98A1AC;padding:64px 0 0;font-size:.95rem}
.site-footer h4{color:#fff;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:34px}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin:9px 0}
.site-footer a{text-decoration:none;color:#98A1AC}
.site-footer a:hover{color:var(--orange)}
.footer-brand{display:flex;gap:12px;align-items:center;margin-bottom:16px}
.footer-brand svg{width:48px;height:48px}
.footer-brand b{color:#fff;text-transform:uppercase;font-weight:900;letter-spacing:.02em;display:block}
.footer-brand i{font-style:normal;color:var(--orange);font-weight:700;font-size:.88rem}
.footer-bottom{border-top:1px solid var(--line-dark);margin-top:48px;padding:22px 0;font-size:.88rem}
.footer-bottom .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}

/* ---------- Sticky Mobile Bar ---------- */
.mobilebar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  background:rgba(11,12,14,.97);backdrop-filter:blur(8px);border-top:1px solid var(--line-dark);
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));gap:9px;
}
.mobilebar a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 8px;border-radius:11px;
  text-decoration:none;font-weight:800;font-size:.94rem;
}
.mobilebar .mb-call{background:var(--orange);color:#fff}
.mobilebar .mb-mail{background:#fff;color:var(--ink)}

/* ---------- Sonstiges ---------- */
.page-head{background:var(--ink);color:#fff;padding:clamp(48px,6vw,84px) 0 clamp(40px,5vw,64px);position:relative;overflow:hidden}
.page-head::before{content:"";position:absolute;inset:0;
  background:radial-gradient(760px 400px at 88% 10%,rgba(240,124,0,.24),transparent 60%),
             repeating-linear-gradient(115deg,rgba(255,255,255,.03) 0 2px,transparent 2px 11px)}
.page-head .wrap{position:relative;z-index:1}
.page-head h1{color:#fff;text-transform:uppercase;max-width:22ch}
.page-head p{color:#B7BFC9;max-width:66ch;font-size:1.1rem;margin-bottom:0}
.crumbs{font-size:.85rem;color:#7E8894;margin-bottom:18px}
.crumbs a{text-decoration:none;color:#7E8894}
.crumbs a:hover{color:var(--orange)}

.note{
  background:var(--orange-soft);border-left:5px solid var(--orange);border-radius:0 var(--r) var(--r) 0;
  padding:20px 24px;margin:26px 0;
}
.note p:last-child{margin-bottom:0}
.note strong{color:var(--ink)}

.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.97rem;background:#fff}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line)}
th{background:var(--paper-2);font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
tr:last-child td{border-bottom:0}
td strong{color:var(--ink)}

.legal h2{font-size:1.35rem;margin-top:2em}
.legal{font-size:.98rem}
.legal p,.legal li{color:#3A4048}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .hero-grid,.split,.contact-grid{grid-template-columns:1fr}
  .split.rev .split-media{order:0}
  .footer-grid{grid-template-columns:1fr 1fr}
  .g4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  body{font-size:16.5px}
  .g3,.g2{grid-template-columns:1fr}
  .trustbar .wrap{grid-template-columns:repeat(2,1fr)}
  .dev{grid-template-columns:1fr}
  .dev-img{max-width:220px}
  .calc-row{grid-template-columns:1fr}
  .mobilebar{display:flex}
  body{padding-bottom:74px}
  .topbar .tb-list.hide-s{display:none}
  .cta-band .wrap{flex-direction:column;align-items:flex-start}
}
@media (max-width:520px){
  .g4,.steps,.footer-grid,.trustbar .wrap{grid-template-columns:1fr}
  .hero-actions .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}


/* ---------- Vorspann ----------
   Ruhiger Auftakt vor dem Angebot: erst wer wir sind, dann was wir tun.
   Bewegung nur als sanftes Einblenden - ein Sanierungsbetrieb verkauft
   Verlaesslichkeit, kein Spektakel. */
.intro{position:relative;min-height:78vh;display:flex;align-items:center;
  background:linear-gradient(160deg,#0d0d0f 0%,#141416 55%,#0d0d0f 100%);
  border-bottom:1px solid rgba(255,255,255,.06);overflow:hidden}
.intro::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 55% at 78% 30%,rgba(240,124,0,.13),transparent 70%)}
.intro .wrap{position:relative;z-index:1;width:100%;padding-top:70px;padding-bottom:70px}
.intro-marke{display:flex;align-items:center;gap:14px;margin-bottom:34px}
.intro-marke svg{width:44px;height:44px;color:#fff;flex:none}
.intro-marke b{font-size:15px;letter-spacing:.22em;text-transform:uppercase;color:#fff;font-weight:700}
.intro-marke i{display:block;font-style:normal;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange);font-weight:600;margin-top:3px}
.intro h2{font-size:clamp(30px,4.6vw,58px);line-height:1.12;letter-spacing:-.02em;
  color:#fff;max-width:17ch;margin:0 0 26px;font-weight:800}
.intro h2 em{font-style:normal;color:var(--orange)}
.intro p{font-size:clamp(16px,1.5vw,19px);line-height:1.65;color:rgba(255,255,255,.72);
  max-width:56ch;margin:0}
.intro-orte{margin-top:34px;font-family:var(--fm,inherit);font-size:12.5px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.intro-runter{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;z-index:1;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.45);text-decoration:none}
.intro-runter span{display:block;width:1px;height:32px;
  background:linear-gradient(180deg,transparent,rgba(240,124,0,.85))}

/* Einblenden - gestaffelt, damit das Auge einen Weg hat */
.intro-marke,.intro h2,.intro p,.intro-orte{opacity:0;transform:translateY(14px);
  animation:introAuf .75s cubic-bezier(.22,.8,.3,1) forwards}
.intro h2{animation-delay:.10s}
.intro p{animation-delay:.20s}
.intro-orte{animation-delay:.30s}
@keyframes introAuf{to{opacity:1;transform:none}}

@media (max-width:820px){
  .intro{min-height:70vh}
  .intro h2{max-width:100%}
}
/* Wer im System weniger Bewegung eingestellt hat, bekommt sie gar nicht. */
@media (prefers-reduced-motion:reduce){
  .intro-marke,.intro h2,.intro p,.intro-orte{animation:none;opacity:1;transform:none}
}


/* ---------- Ausstattungs-Tafel ----------
   Ersetzt die weisse Preiskarte. Bewusst dunkel und ruhig: Diese Flaeche
   informiert, sie verkauft nicht. Florians Kunden sind Hausverwaltungen, die
   greifen zum Hoerer - nicht zum Kaufen-Knopf. */
.info-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.10);
  border-radius:16px;padding:30px 28px}
.info-card .ic-titel{display:block;font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--orange);font-weight:700;margin-bottom:18px}
.info-card h3{color:#fff;font-size:1.28rem;margin:0 0 8px;line-height:1.25}
.info-card > p{color:rgba(255,255,255,.66);font-size:.95rem;margin:0 0 20px;line-height:1.6}
.info-card ul{list-style:none;margin:0;padding:0}
.info-card li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;
  border-top:1px solid rgba(255,255,255,.07);color:rgba(255,255,255,.82);font-size:.95rem;line-height:1.5}
.info-card li:first-of-type{border-top:0}
.info-card li b{color:#fff;display:block;font-size:.95rem}
.info-card li span.zahl{color:var(--orange);font-weight:800;font-size:.95rem;
  min-width:26px;flex:none;font-variant-numeric:tabular-nums}

/* ---------- Ablauf eines Wasserschadens ---------- */
.ablauf{counter-reset:schritt;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));margin-top:34px}
.ablauf-schritt{position:relative;background:var(--card,#fff);border:1px solid var(--line,#e6e6e6);
  border-radius:14px;padding:26px 22px 22px}
.ablauf-schritt::before{counter-increment:schritt;content:counter(schritt);
  position:absolute;top:-14px;left:22px;width:30px;height:30px;border-radius:50%;
  background:var(--orange);color:#fff;font-weight:800;font-size:14px;
  display:flex;align-items:center;justify-content:center}
.ablauf-schritt h4{margin:6px 0 8px;font-size:1.05rem}
.ablauf-schritt p{margin:0;font-size:.94rem;line-height:1.6;color:var(--muted)}
.ablauf-fremd{border-style:dashed;background:transparent}
.ablauf-fremd h4::after{content:"nicht durch uns";font-weight:700;font-size:.7rem;display:block;margin-top:7px;padding:3px 9px;border-radius:99px;background:rgba(20,24,31,.07);width:max-content;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);letter-spacing:.02em}


/* ---------- Ruhige Grafikflaeche statt Foto ----------
   Florian hat keine Fotos. Statt eines leeren Kastens mit "FOTO EINSETZEN"
   steht hier eine Flaeche, die aussieht, als waere sie so gewollt. */
.flaeche{border-radius:16px;border:1px solid var(--line,#e6e6e6);
  background:
    repeating-linear-gradient(135deg,rgba(240,124,0,.05) 0 2px,transparent 2px 16px),
    linear-gradient(150deg,#1b1b1e 0%,#232327 60%,#1b1b1e 100%);
  position:relative;overflow:hidden}
.flaeche::after{content:"";position:absolute;inset:0;
  background:radial-gradient(55% 60% at 72% 28%,rgba(240,124,0,.16),transparent 70%)}

/* ---------- Feste Anfrageleiste am rechten Rand ----------
   Florian: "rechts sollte auf jeden Fall ein WhatsApp-Button hin und auch fuer
   E-Mail" - und nicht erst am Seitenende. Also klebt sie mittig rechts und ist
   auf jeder Seite sichtbar. Auf dem Handy wandert sie an den unteren Rand. */
.direkt{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:80;
  display:flex;flex-direction:column;gap:10px}
.direkt a{display:flex;align-items:center;gap:0;width:52px;height:52px;
  border-radius:999px;text-decoration:none;overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.28);transition:width .28s cubic-bezier(.22,.8,.3,1),
  box-shadow .2s;padding:0 15px;white-space:nowrap}
.direkt a svg{width:22px;height:22px;flex:none}
.direkt a span{font-weight:700;font-size:.9rem;margin-left:11px;opacity:0;
  transition:opacity .2s .06s}
.direkt a:hover,.direkt a:focus-visible{width:158px;box-shadow:0 10px 30px rgba(0,0,0,.36)}
.direkt a:hover span,.direkt a:focus-visible span{opacity:1}
.direkt-wa{background:#25D366;color:#0a2e15}
.direkt-wa svg{fill:#0a2e15}
.direkt-mail{background:var(--orange,#F07C00);color:#fff}
.direkt-tel{background:#1f2023;color:#fff}
@media (max-width:820px){
  .direkt{right:12px;left:12px;top:auto;bottom:12px;transform:none;
    flex-direction:row;justify-content:center}
  .direkt a{width:auto;flex:1 1 0;justify-content:center;height:50px}
  .direkt a span{opacity:1;margin-left:9px}
  .direkt a:hover{width:auto}
}

/* ---------- Partnerbetriebe ---------- */
.partner{padding:76px 0;background:#EAEEF3;border-top:1px solid #DCE2EA;border-bottom:1px solid #DCE2EA}
.partner-liste{display:grid;gap:16px;margin-top:32px;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.partner-karte{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;border:1px solid var(--line,#e6e6e6);border-radius:14px;padding:30px 22px;
  background:#fff;text-decoration:none;min-height:168px;
  transition:border-color .2s,transform .2s,box-shadow .2s}
.partner-karte:hover{border-color:rgba(240,124,0,.5);transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,0,0,.06)}
/* Logos in einheitlicher Hoehe, damit die Reihe ruhig wirkt - die Betriebe
   liefern sie in voellig verschiedenen Formaten. */
.partner-karte img{max-height:58px;max-width:100%;width:auto;height:auto;object-fit:contain}
.partner-karte span{font-size:.86rem;color:var(--muted);letter-spacing:.02em;text-align:center}

/* ---------- Vorspann: mittig und mit mehr Leben ---------- */
.intro .wrap{text-align:center;display:flex;flex-direction:column;align-items:center}
.intro .intro-marke{justify-content:center}
.intro h2{max-width:20ch;margin-left:auto;margin-right:auto}
.intro h2 .zeile{display:block;overflow:hidden}
.intro p{margin-left:auto;margin-right:auto}
.intro-orte{max-width:64ch;line-height:2}

/* Zeilenweiser Aufbau: jede Zeile faehrt von unten herein. */
.intro h2 .zeile{opacity:0;transform:translateY(100%);
  animation:zeileHoch .85s cubic-bezier(.19,1,.22,1) forwards}
.intro h2 .zeile:nth-child(2){animation-delay:.13s}
@keyframes zeileHoch{to{opacity:1;transform:none}}

/* Langsam wanderndes Licht im Hintergrund - Bewegung, die nicht stoert. */
.intro::after{animation:lichtWandern 14s ease-in-out infinite alternate}
@keyframes lichtWandern{
  0%{transform:translate3d(-4%,-3%,0) scale(1)}
  100%{transform:translate3d(5%,4%,0) scale(1.12)}
}
@media (prefers-reduced-motion:reduce){
  .intro h2 .zeile{animation:none;opacity:1;transform:none}
  .intro::after{animation:none}
}

/* Der Radius ist die Aussage - also darf die Zahl auch so aussehen. */
.intro-orte b{color:var(--orange);font-weight:800;font-size:1.35em;
  letter-spacing:.02em;vertical-align:-.02em}
.intro-orte{line-height:1.9}

/* ---------- Vorspann hell ----------
   Florian: "nicht so extrem viel schwarz, das erdrueckt einen". Er hatte
   recht - Vorspann und Hero waren zwei dunkle Bildschirme hintereinander.
   Jetzt: heller Auftakt, danach EIN dunkler Block als Kontrast. Das wirkt
   offener und passt zur weissen Kopfleiste, die ihm gefaellt. */
.intro{
  background:linear-gradient(168deg,#FFFFFF 0%,#FDF8F2 46%,#F6F7F9 100%);
  border-bottom:1px solid var(--line);
  min-height:74vh;
}
.intro::after{
  background:radial-gradient(52% 48% at 76% 22%,rgba(240,124,0,.16),transparent 72%);
}
.intro-marke b{color:var(--text)}
.intro-marke svg{color:var(--text)}
.intro h2{color:var(--text)}
.intro h2 em{color:var(--orange)}
.intro p{color:var(--muted)}
.intro-orte{color:var(--muted)}
.intro-runter{color:var(--muted)}
.intro-runter span{background:linear-gradient(180deg,transparent,rgba(240,124,0,.9))}

/* Die Platzhalter-Flaechen waren fuer eine helle Seite viel zu schwer. */
.flaeche{
  background:
    repeating-linear-gradient(135deg,rgba(240,124,0,.055) 0 2px,transparent 2px 16px),
    linear-gradient(150deg,#FBFBFC 0%,#F3F4F6 60%,#FBFBFC 100%);
  border-color:var(--line);
}
.flaeche::after{background:radial-gradient(55% 60% at 72% 28%,rgba(240,124,0,.12),transparent 72%)}


/* ---------- Vorspann mit Bild ----------
   Weder schwarze Flaeche noch weisse Flaeche haben ueberzeugt. Was fehlte, war
   Tiefe. Das Bild liefert sie; der dunkle Schleier darueber haelt den Text
   lesbar und die Stimmung ruhig. Kleines Bild fuer schmale Bildschirme, damit
   auf dem Handy nicht 88 KB fuer nichts geladen werden. */
.intro{
  background-image:
    linear-gradient(180deg,rgba(12,13,16,.62) 0%,rgba(12,13,16,.70) 45%,rgba(12,13,16,.86) 100%),
    url("../img/hero-klein.webp?v=50aa2e8cf1");
  background-size:cover;
  background-position:center 38%;
  border-bottom:0;
  min-height:80vh;
}
@media (min-width:960px){
  .intro{
    background-image:
      linear-gradient(180deg,rgba(12,13,16,.58) 0%,rgba(12,13,16,.66) 45%,rgba(12,13,16,.88) 100%),
      url("../img/hero.webp?v=0aa60333d0");
  }
}
/* Der orange Lichtschein darf jetzt schwaecher sein - das Bild traegt schon. */
.intro::after{background:radial-gradient(48% 44% at 74% 26%,rgba(240,124,0,.14),transparent 74%)}

/* Schrift wieder hell, aber mit Schattenkante, damit sie auf jedem Bildausschnitt steht. */
.intro-marke b{color:#fff}
.intro-marke svg{color:#fff}
.intro h2{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.intro h2 em{color:#FFA23D}
.intro p{color:rgba(255,255,255,.86);text-shadow:0 1px 16px rgba(0,0,0,.4)}
.intro-orte{color:rgba(255,255,255,.72)}
.intro-orte b{color:#FFA23D}
.intro-runter{color:rgba(255,255,255,.7)}
.intro-runter span{background:linear-gradient(180deg,transparent,rgba(255,162,61,.95))}

/* Ganz langsames Heranfahren - das Bild lebt, ohne zu zappeln. */
@media (prefers-reduced-motion:no-preference){
  .intro{animation:bildAtmen 26s ease-in-out infinite alternate}
  @keyframes bildAtmen{
    0%{background-size:cover}
    100%{background-size:112%}
  }
}

/* Sein eigenes Geraet - freigestellt auf hellem Grund, damit das Logo wirkt. */
/* Kein Rahmen, kein Kasten: Das Geraet steht frei auf der Flaeche. Der
   weisse Bildhintergrund ist entfernt, deshalb wirkt es wie hingestellt statt
   wie ein eingeklebtes Produktfoto. */
.geraet{display:flex;align-items:flex-end;justify-content:center;position:relative;
  padding:0;border:0;background:none;min-height:auto}
.geraet::before{content:"";position:absolute;left:50%;bottom:6%;transform:translateX(-50%);
  width:66%;height:26%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(240,124,0,.20),transparent 72%);
  filter:blur(6px);z-index:0}
.geraet img{position:relative;z-index:1;max-height:560px;width:auto;height:auto;max-width:100%;
  filter:drop-shadow(0 26px 42px rgba(0,0,0,.22)) drop-shadow(0 4px 10px rgba(0,0,0,.14))}
@media (max-width:820px){.geraet img{max-height:400px}}


/* ---------- Notfall-Leiste ----------
   Vorbild: rainbow-sanierungen.de, das Florian gefaellt. Bei einem
   Wasserschaden sucht niemand ein Formular - er will die Nummer sehen und
   drauftippen. Deshalb ganz oben, in Signalfarbe, auf voller Breite klickbar. */
.notfall{display:flex;align-items:center;justify-content:center;gap:12px;
  background:linear-gradient(90deg,#C1272D 0%,#E03A1E 55%,#F07C00 100%);
  color:#fff;text-decoration:none;padding:11px 18px;font-size:.94rem;
  letter-spacing:.01em;position:relative;z-index:70}
.notfall b{font-weight:800}
.notfall-nr{font-weight:800;letter-spacing:.03em;
  border-bottom:2px solid rgba(255,255,255,.45);padding-bottom:1px}
.notfall:hover .notfall-nr{border-bottom-color:#fff}
.notfall-punkt{width:9px;height:9px;border-radius:50%;background:#fff;flex:none;
  box-shadow:0 0 0 0 rgba(255,255,255,.75);animation:pulsieren 2s infinite}
@keyframes pulsieren{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}
  70%{box-shadow:0 0 0 11px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}
@media (max-width:700px){
  .notfall{flex-direction:column;gap:4px;text-align:center;padding:10px 14px}
  .notfall-text{font-size:.86rem}
}

/* ---------- Laufband ----------
   Zeigt Einsatzgebiet und Leistungen. Bewusst KEIN erfundener Auftrags-Ticker:
   Ein Betrieb, der Protokolle fuer Versicherungen schreibt, darf sich keine
   Zahlen ausdenken. */
.laufband{overflow:hidden;background:var(--ink);color:rgba(255,255,255,.55);
  padding:15px 0;white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.laufband-spur{display:inline-flex;align-items:center;gap:20px;
  animation:laufen 42s linear infinite;font-family:var(--fm,inherit);
  font-size:13px;letter-spacing:.2em;text-transform:uppercase}
.laufband-spur span.hell{color:var(--orange);font-weight:700}
.laufband:hover .laufband-spur{animation-play-state:paused}
@keyframes laufen{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .laufband-spur{animation:none}
  .notfall-punkt{animation:none}
}


/* Wo kein Bild ist, soll auch keine leere Spalte stehen: Der Text nimmt dann
   die volle Breite. Frueher stand dort eine gestreifte Attrappe. */
.split-media:empty{display:none}
.split:has(> .split-media:empty){grid-template-columns:1fr}
.split:has(> .split-media:empty) .split-text{max-width:74ch}

/* Das Geraet braucht Luft nach unten, sonst wirken die Fuesse abgeschnitten. */
.geraet{padding-bottom:18px}

/* ---------- Handy-Korrekturen ----------
   Gemessen auf 390 px: Die Seite war 435 px breit und liess sich seitwaerts
   schieben. Schuld war meine Kontaktleiste unten - die drei Knoepfe konnten
   nicht schrumpfen (flex-basis 0 ohne min-width:0) und haben die Seite
   auseinandergedrueckt. Dadurch rutschte auch der Menue-Knopf aus dem Bild. */
html,body{overflow-x:clip;max-width:100%}

@media (max-width:820px){
  .direkt{left:10px;right:10px;bottom:10px;gap:8px}
  .direkt a{min-width:0;flex:1 1 0;box-sizing:border-box;padding:0 10px;
    height:48px;justify-content:center;overflow:hidden}
  .direkt a span{margin-left:8px;font-size:.82rem;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .direkt a svg{width:20px;height:20px}
}
@media (max-width:400px){
  /* Ganz schmale Geraete: nur die Symbole, die Beschriftung faellt weg. */
  .direkt a span{display:none}
  .direkt a{padding:0}
}

/* Notfall-Leiste: der Punkt gehoert neben den Text, nicht in eine eigene Zeile. */
@media (max-width:700px){
  .notfall{flex-direction:row;flex-wrap:wrap;gap:8px;padding:9px 14px;
    justify-content:center;line-height:1.35}
  .notfall-text{font-size:.84rem}
  .notfall-nr{font-size:.92rem}
  .notfall-punkt{width:8px;height:8px}
}

/* Der Hinweisstreifen darunter soll nicht umbrechen. */
@media (max-width:700px){
  .topbar .tb-list span{font-size:.78rem;line-height:1.4}
}

/* Damit der Menue-Knopf immer sichtbar bleibt, egal wie eng es wird. */
.site-header .wrap{flex-wrap:nowrap;min-width:0}
.brand{min-width:0}
.brand-txt{min-width:0;overflow:hidden}
.nav-toggle{flex:none;margin-left:auto}
@media (max-width:520px){
  .brand-txt b{font-size:.86rem}
  .brand-txt i{font-size:.72rem}
  .header-cta .btn-call{padding:9px 14px;font-size:.86rem}
}

/* Enge Geraete: Kopfzeile aufraeumen.
   Auf 390 px passten Logo, Anrufen-Knopf und Menue-Knopf nicht nebeneinander -
   der Menue-Knopf stand halb ausserhalb des Bildschirms. Der Anrufen-Knopf
   entfaellt hier, weil die Nummer oben in der Notfallleiste steht und unten
   in der festen Kontaktleiste nochmal. Zweimal reicht. */
@media (max-width:560px){
  .header-cta{display:none}
  .site-header .wrap{gap:10px;min-height:64px}
  .nav-toggle{margin-left:auto;padding:8px 4px}
}


/* ---------- Stimmungsbilder ---------- */
.bild{margin:0;border-radius:18px;overflow:hidden;position:relative;
  box-shadow:0 18px 44px rgba(20,24,31,.14)}
.bild img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.22,.8,.3,1)}
.bild:hover img{transform:scale(1.035)}
.bild::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,transparent 55%,rgba(240,124,0,.10))}

/* ---------- Lesbarkeit ----------
   Florian: "so breit, wer soll das lesen?" - stimmt. Ab etwa 75 Zeichen je
   Zeile springt das Auge beim Zeilenwechsel in die falsche Zeile. */
.wrap > p, .wrap > .lead, section > .wrap > p{max-width:70ch}
.sec-grey .wrap > p, .sec-dark .wrap > p{max-width:70ch}
.ablauf-schritt p, .card p{max-width:46ch}

/* ---------- Anzeigetafel ----------
   Statt drei durchlaufender Baender eines, das seine Eintraege umklappt -
   wie eine Anzeigetafel am Bahnhof. Ruhiger und einpraegsamer. */
.tafel{background:var(--ink);color:#fff;padding:22px 0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;gap:14px;
  font-family:var(--fm,inherit);letter-spacing:.2em;text-transform:uppercase;
  font-size:13px}
.tafel-vor{color:rgba(255,255,255,.45);letter-spacing:.16em;flex:none}
.tafel-innen{position:relative;height:1.5em;min-width:15ch;overflow:hidden;
  display:inline-block;vertical-align:middle}
.tafel-blatt{position:absolute;left:0;top:0;width:100%;color:var(--orange);
  font-weight:700;opacity:0;transform:rotateX(-90deg);transform-origin:top center;
  animation:kippen 24s infinite}
.tafel-blatt:nth-child(1){animation-delay:0s}
.tafel-blatt:nth-child(2){animation-delay:3s}
.tafel-blatt:nth-child(3){animation-delay:6s}
.tafel-blatt:nth-child(4){animation-delay:9s}
.tafel-blatt:nth-child(5){animation-delay:12s}
.tafel-blatt:nth-child(6){animation-delay:15s}
.tafel-blatt:nth-child(7){animation-delay:18s}
.tafel-blatt:nth-child(8){animation-delay:21s}
@keyframes kippen{
  0%{opacity:0;transform:rotateX(-90deg)}
  2%{opacity:1;transform:rotateX(0)}
  11%{opacity:1;transform:rotateX(0)}
  13%{opacity:0;transform:rotateX(90deg)}
  100%{opacity:0;transform:rotateX(90deg)}
}
@media (prefers-reduced-motion:reduce){
  .tafel-blatt{animation:none}
  .tafel-blatt:nth-child(1){opacity:1;transform:none}
}
@media (max-width:620px){
  .tafel{flex-direction:column;gap:6px;padding:18px 14px;text-align:center}
  .tafel-innen{min-width:auto;width:100%}
}


/* ---------- Runde 5 ---------- */

/* Florian: "das logo oben zentrieren und das haus mittig drueber ned links".
   Haus und Schriftzug standen nebeneinander; der Block war mittig, die Schrift
   dadurch optisch rechts. Jetzt eine Achse: Haus oben, Schrift darunter. */
.intro-marke{flex-direction:column;gap:16px;align-items:center;text-align:center}
.intro-marke svg{width:60px;height:60px}
@media (max-width:620px){.intro-marke svg{width:50px;height:50px}}

/* Die Anfrage-Karte hatte zwei Punkte je Zeile: den des Browsers und meinen. */
.calc-liste{list-style:none;padding:0;margin:14px 0 0}
.calc-liste li{display:flex;gap:10px;align-items:flex-start;
  font-size:.94rem;line-height:1.5;color:var(--text);margin-bottom:8px}
.calc-liste .check{color:var(--orange);font-weight:900;flex:none;line-height:1.5}

/* Auftraggeber: eine ruhige Logoreihe statt vier Platzhalterkaesten.
   Zurueckhaltend gesetzt - die Logos gehoeren anderen Firmen, sie sollen
   Vertrauen zeigen und nicht mit dem eigenen Auftritt konkurrieren. */
.auftraggeber{margin-top:48px}
.auftraggeber h3{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);font-weight:800;margin:0 0 20px}
.auftraggeber-reihe{display:flex;flex-wrap:wrap;align-items:center;
  gap:18px 40px}
.auftraggeber-reihe a{display:flex;align-items:center;justify-content:center;
  padding:6px 4px;filter:grayscale(1);opacity:.62;
  transition:filter .3s ease,opacity .3s ease}
.auftraggeber-reihe a:hover{filter:none;opacity:1}
.auftraggeber-reihe img{max-height:42px;max-width:150px;width:auto;height:auto;
  object-fit:contain;display:block}
@media (max-width:620px){
  .auftraggeber-reihe{gap:16px 26px;justify-content:center}
  .auftraggeber-reihe img{max-height:32px;max-width:110px}
}


/* ---------- Handy: Ueberlappung oben und unten ----------

   Unten: Die Kontaktleiste ist position:fixed und belegt deshalb keinen Platz
   im Textfluss. Ohne Ausgleich verschwindet die letzte Zeile jeder Seite
   dauerhaft dahinter - auf der Startseite die Ortszeile, im Fussbereich die
   Impressumszeile. 48 px Leiste + 10 px Abstand + Luft = 76 px, dazu der
   Bereich hinter dem Home-Balken bei randlosen Geraeten. */
@media (max-width:820px){
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .direkt{bottom:calc(10px + env(safe-area-inset-bottom,0px))}
}

/* Oben: drei Balken vor dem ersten Inhalt sind auf dem Handy einer zu viel.
   Die Leistungszeile faellt weg - Notruf und Kopfzeile bleiben. */
@media (max-width:700px){
  .topbar{display:none}
  .notfall{padding:9px 14px;gap:2px}
  .notfall-text{font-size:.84rem;line-height:1.35}
  .notfall-nr{font-size:1.02rem}
}


/* Auf schmalen Geraeten passt der volle Satz nicht in eine Zeile; er lief ueber
   den Rand hinaus und drueckte den Signalpunkt aus dem Bild. Das Versprechen
   steht ohnehin gleich darunter - hier zaehlt die Nummer. */
@media (max-width:480px){
  .notfall-zusatz{display:none}
  .notfall{padding-left:18px;padding-right:18px}
}


/* Fuenf Schritte gehoeren in fuenf Spalten. Im Vierer-Raster stand der letzte
   allein in einer zweiten Zeile und sah aus wie vergessen. */
@media (min-width:1080px){
  .ablauf{grid-template-columns:repeat(5,1fr)}
}

/* Bild und Text eines zweispaltigen Abschnitts beginnen auf einer Hoehe. */
.split{align-items:start}
.split .bild{margin-top:6px}

/* Die Auftraggeber-Logos duerfen ruhig etwas praesenter sein - sie sind der
   Beleg fuer alles, was darueber behauptet wird. */
.auftraggeber-reihe a{opacity:.72}
.auftraggeber-reihe img{max-height:46px;max-width:165px}


/* Logos duerfen im Flex-Layout nicht schrumpfen: Ein SVG ohne Eigengroesse
   wird sonst auf null Breite gerechnet und verschwindet lautlos. */
.auftraggeber-reihe img{flex:none;object-fit:contain}


/* Sieben Karten in einem Dreier-Raster lassen die letzte allein am linken
   Rand stehen - das sieht nach Fehler aus. Sie rueckt in die Mitte. */
@media (min-width:900px){
  .grid.g3 > :last-child:nth-child(3n+1){grid-column:2}
}


/* ---------- Handy: aus schwebenden Knoepfen wird eine echte Leiste ----------

   Florian: "unten button ueberlappen noch immer dauerhaft". Stimmt - und der
   Platz unten am Seitenende hat das nicht geloest. Die drei Knoepfe schwebten
   frei ueber der Seite, zwischen ihnen schien der Text durch und lief mitten
   durchs Bild weiter. Das liest sich als Fehler, egal wie viel Platz unten ist.

   Jetzt ist es eine geschlossene Leiste ueber die volle Breite mit eigenem
   Untergrund: Was darunter durchscrollt, verschwindet sauber dahinter. So
   kennt man es von jeder App - und die Nummer bleibt trotzdem immer erreichbar. */
@media (max-width:820px){
  .direkt{left:0;right:0;bottom:0;gap:8px;
    padding:9px 12px calc(9px + env(safe-area-inset-bottom,0px));
    background:rgba(18,20,24,.97);
    -webkit-backdrop-filter:saturate(1.4) blur(10px);
    backdrop-filter:saturate(1.4) blur(10px);
    border-top:1px solid rgba(255,255,255,.12);
    box-shadow:0 -10px 30px rgba(0,0,0,.30);border-radius:0}
  .direkt a{height:46px;border-radius:12px}
  .direkt-tel{background:#2b2f36;border:1px solid rgba(255,255,255,.16)}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}


/* ---------- Feinschliff Handy ----------
   Der Signalpunkt klebte am W von "Wasserschaden". Und die Beschriftung der
   Knoepfe verschwand schon ab 400 px - in der geschlossenen Leiste ist dafuer
   jetzt Platz, "WhatsApp" sagt mehr als ein Symbol allein. */
@media (max-width:700px){ .notfall{gap:9px} }
@media (max-width:400px){ .direkt a span{display:inline} .direkt a{padding:0 8px} }
@media (max-width:359px){ .direkt a span{display:none} .direkt a{padding:0} }


/* Auf dem etwas dunkleren Grund brauchen die Logokarten eine klarere Kante
   und einen ruhigen Schatten, sonst schwimmen sie. */
.partner-karte{border-color:#D3DAE3;box-shadow:0 2px 10px rgba(24,32,45,.05)}
.partner-karte:hover{box-shadow:0 10px 26px rgba(24,32,45,.10)}


/* ---------- Kopf neu ----------

   1. Flacher. Rot und Schwarz brauchten zusammen 80 px, bevor der Firmenname
      kam. Auf einem Handy ist das ein Drittel des sichtbaren Bereichs.
   2. Die Anzeigetafel sitzt jetzt links im schwarzen Balken.
   3. Auf der Startseite liegt der weisse Kopf IM Foto statt darueber. */

.notfall{padding:7px 18px;font-size:.9rem}
.notfall-punkt{width:8px;height:8px}
.topbar .wrap{min-height:32px}
.topbar{font-size:.8rem}
.site-header .wrap{min-height:62px}
.brand svg{width:38px;height:38px}

/* Die Tafel im Balken: gleiche Zeilenhoehe wie der Text daneben, damit der
   Balken beim Umklappen nicht springt. */
.topbar .tafel{background:none;padding:0;justify-content:flex-start;gap:9px;
  font-size:11.5px;letter-spacing:.18em;min-height:32px}
.topbar .tafel-vor{color:rgba(255,255,255,.42)}
.topbar .tafel-innen{height:1.55em;min-width:13ch}
.topbar .tafel-blatt{font-size:11.5px}

/* --- Startseite: der Kopf liegt im Bild ---
   Der weisse Balken hat das Foto abgeschnitten. Jetzt zieht das Bild bis unter
   den Kopf; der Kopf selbst ist durchsichtig und schreibt weiss. Beim Scrollen
   setzt main.js die Klasse "fest" - dann kommt der weisse Grund zurueck, sonst
   waere die Navigation ueber hellem Inhalt unlesbar. */
body.start .intro{margin-top:-62px}
body.start .intro .wrap{padding-top:132px}
body.start .site-header{background:transparent;border-bottom-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  transition:background .25s ease,border-color .25s ease}
body.start .site-header .brand-txt b{color:#fff}
body.start .site-header .nav a{color:rgba(255,255,255,.86)}
body.start .site-header .nav a:hover,
body.start .site-header .nav a.active{color:#fff}
body.start .site-header .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55)}
body.start .site-header .btn-ghost:hover{background:rgba(255,255,255,.14)}
body.start .site-header .nav-toggle span{background:#fff}

body.start .site-header.fest{background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom-color:var(--line)}
body.start .site-header.fest .brand-txt b{color:var(--ink)}
body.start .site-header.fest .nav a{color:var(--text)}
body.start .site-header.fest .nav a.active{color:var(--orange)}
body.start .site-header.fest .btn-ghost{color:var(--ink);border-color:var(--ink)}
body.start .site-header.fest .btn-ghost:hover{background:rgba(0,0,0,.06)}
body.start .site-header.fest .nav-toggle span{background:var(--ink)}

@media (max-width:700px){
  body.start .intro .wrap{padding-top:110px}
}


/* ---------- Fahrt ----------
   Florians eigenes Fahrzeug, freigestellt aus seinem Foto - kein Symbolbild.
   Es faehrt in einem schmalen Band ueber eine Linie: klein genug, um nicht
   vom Inhalt abzulenken, gross genug, dass man die Beschriftung erkennt.

   Bewegt wird ausschliesslich transform - das rechnet die Grafikkarte, die
   Seite muss nichts neu zeichnen. 100vw statt Prozent, weil das Band ueber die
   volle Fensterbreite laeuft; so verlaesst das Auto zuverlaessig das Bild. */
.fahrt{background:var(--ink);padding:26px 0 0;overflow:clip}
.fahrt-titel{display:block;font-family:var(--fm,inherit);font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.fahrt-strasse{position:relative;height:74px;margin-top:10px;
  border-bottom:2px solid rgba(255,255,255,.13)}
.fahrt-strasse::after{content:"";position:absolute;left:0;right:0;bottom:-2px;
  height:2px;background:repeating-linear-gradient(90deg,
    var(--orange) 0 26px,transparent 26px 62px);opacity:.55}
.fahrt-auto{position:absolute;bottom:0;left:0;width:132px;height:auto;
  transform:translateX(-150px);animation:fahren 17s linear infinite}
@keyframes fahren{
  from{transform:translateX(-150px)}
  to{transform:translateX(100vw)}
}
@media (max-width:700px){
  .fahrt{padding-top:20px}
  .fahrt-strasse{height:56px}
  .fahrt-auto{width:104px}
  .fahrt-titel{font-size:10.5px;letter-spacing:.16em}
}
@media (prefers-reduced-motion:reduce){
  .fahrt-auto{animation:none;transform:translateX(6vw)}
}


/* ---------- Feinschliff Fahrband ----------
   Die Linie lag auf der Unterkante des Bandes und wurde abgeschnitten, die
   Raeder standen halb darin. Jetzt hat die Strasse Luft nach unten und das
   Auto steht sauber darauf. */
.fahrt{padding:26px 0 26px}
.fahrt-strasse{border-bottom:none;box-shadow:inset 0 -2px 0 rgba(255,255,255,.13)}
.fahrt-strasse::after{bottom:0}
.fahrt-auto{bottom:2px}
@media (max-width:700px){.fahrt{padding-bottom:20px}}


/* ---------- Einfahrt statt Dauerschleife ----------

   Florian: "das auto faehrt rueckwaerts" - stimmte. Es schaut nach links und
   fuhr nach rechts. Gespiegelt haette die Beschriftung seitenverkehrt
   gestanden, also faehrt es jetzt dorthin, wo es hinschaut: von rechts herein,
   wird langsamer und bleibt stehen. Genau einmal, ausgeloest von main.js,
   sobald das Band im Bild ist. Eine Endlosschleife am Rand des Blickfelds
   ermuedet; ein Fahrzeug, das einmal vorfaehrt und haelt, erzaehlt etwas. */
.fahrt-wagen{position:absolute;bottom:2px;left:0;width:132px;
  transform:translateX(20vw)}
.fahrt-wagen.bereit{transform:translateX(102vw)}
.fahrt-wagen.bereit.faehrt{animation:vorfahren 3.4s cubic-bezier(.16,.72,.16,1) forwards}
.fahrt-auto{position:static;width:100%;height:auto;display:block;
  transform:none;animation:none}
@keyframes vorfahren{
  from{transform:translateX(102vw)}
  to{transform:translateX(20vw)}
}

/* Qualm: beim Anfahren kraeftig, danach nur noch ein Hauch. Die Wolken sitzen
   am Heck - das ist bei dieser Fahrtrichtung die rechte Seite. */
.qualm{position:absolute;right:-4px;bottom:7px;width:9px;height:9px;
  border-radius:50%;background:rgba(226,232,240,.5);opacity:0;filter:blur(2px)}
.fahrt-wagen.bereit.faehrt .qualm{animation:qualmen 1.5s ease-out infinite}
.fahrt-wagen.bereit.faehrt .qualm:nth-child(2){animation-delay:.5s}
.fahrt-wagen.bereit.faehrt .qualm:nth-child(3){animation-delay:1s}
@keyframes qualmen{
  0%{opacity:.55;transform:translate(0,0) scale(.5)}
  100%{opacity:0;transform:translate(38px,-19px) scale(2.6)}
}

@media (max-width:700px){
  .fahrt-wagen{width:104px}
  @keyframes vorfahren{
    from{transform:translateX(105vw)}
    to{transform:translateX(10vw)}
  }
}
@media (prefers-reduced-motion:reduce){
  .fahrt-wagen{transform:translateX(20vw)}
  .fahrt-wagen.faehrt{animation:none}
  .fahrt-wagen.faehrt .qualm{animation:none}
}

/* Das Schlosser-Logo ist ein sehr helles Grau. Ich aendere fremde Logos nicht -
   es bekommt stattdessen mehr Flaeche, dann traegt auch das helle Grau. */
.partner-karte img[alt*="Schlosser"]{max-height:none;width:100%;max-width:190px}
.auftraggeber-reihe img[alt*="Schlosser"]{max-height:none;max-width:200px}


/* ---------- Ruhigerer Takt ----------
   Die Abstaende waren so gross, dass zusammengehoerende Bloecke wie einzelne
   Seiten wirkten und man viel gescrollt hat, ohne etwas zu lesen. Etwas
   enger - der Inhalt bleibt vollstaendig, der Weg dorthin wird kuerzer. */
.partner{padding:56px 0}
.grid{gap:16px}
.ablauf{margin-top:32px}
h2{margin-bottom:14px}
.lead{margin-bottom:28px}


/* Ausfallsicher: Ohne Javascript steht das Fahrzeug einfach an seinem Platz.
   Vorher war die Startposition weit rechts ausserhalb des Bildes - lief das
   Skript nicht, war das Auto unsichtbar. Eine Animation darf nie die
   Voraussetzung dafuer sein, dass man etwas ueberhaupt sieht. */


/* ---------- Banner am Haken ----------

   Florians Idee: nicht anfahren und stehen bleiben, sondern langsam
   durchziehen und die Leistungen mitschleppen. Stimmt - Anhalten ist einmal
   nett und danach tot, ein Zug durchs Bild arbeitet dauerhaft.

   Auf dem Banner steht ausschliesslich, was er wirklich anbietet; jede Zeile
   hat ihre Entsprechung weiter unten auf der Seite. 38 Sekunden pro Durchgang:
   schnelle Laufschrift am Bildrand macht nervoes und wird nicht gelesen.

   Der ganze Zug ist EIN Element, das verschoben wird - Auto, Seil und Banner
   koennen so nicht auseinanderlaufen, egal wie schnell der Rechner ist. */
.fahrt-strasse{overflow:clip}
.fahrt-wagen{position:absolute;bottom:2px;left:0;width:auto;
  display:flex;align-items:flex-end;white-space:nowrap;
  transform:translateX(14vw)}
.fahrt-wagen.bereit{transform:translateX(100vw)}
.fahrt-wagen.bereit.faehrt{animation:ziehen 38s linear infinite}
@keyframes ziehen{
  from{transform:translateX(100vw)}
  to{transform:translateX(-100%)}
}

.fahrt-halter{position:relative;flex:none;width:132px;line-height:0}
.fahrt-auto{position:static;width:100%;height:auto;display:block;
  transform:none;animation:none}

/* Das Seil haengt am Heck - bei dieser Fahrtrichtung die rechte Seite. */
.fahrt-seil{flex:none;width:26px;height:2px;margin-bottom:15px;
  background:rgba(255,255,255,.28)}
.fahrt-band{flex:none;display:flex;align-items:center;gap:0;margin-bottom:6px;
  font-family:var(--fm,inherit)}
.fahrt-band b{display:inline-block;padding:6px 14px;font-size:11px;
  font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.16);
  border-right:none;background:rgba(255,255,255,.045)}
.fahrt-band b:nth-child(odd){color:var(--orange);
  background:rgba(240,124,0,.09);border-color:rgba(240,124,0,.26)}
.fahrt-band b:last-child{border-right:1px solid rgba(255,255,255,.16)}

/* Qualm sitzt am Heck des Autos, nicht am Ende des Banners. */
.qualm{position:absolute;right:-6px;bottom:7px;width:9px;height:9px;
  border-radius:50%;background:rgba(226,232,240,.5);opacity:0;filter:blur(2px)}

@media (max-width:700px){
  .fahrt-strasse{height:62px}
  .fahrt-halter{width:96px}
  .fahrt-seil{width:18px;margin-bottom:11px}
  .fahrt-band b{padding:5px 10px;font-size:9.5px;letter-spacing:.1em}
  .fahrt-wagen.bereit.faehrt{animation-duration:30s}
}
@media (prefers-reduced-motion:reduce){
  .fahrt-wagen{transform:translateX(6vw)}
  .fahrt-wagen.bereit{transform:translateX(6vw)}
  .fahrt-wagen.bereit.faehrt{animation:none}
}


/* ---------- Fahren beim Scrollen ----------

   Florians Idee, und wieder die bessere: Das Fahrzeug soll fahren, waehrend
   man scrollt. Dann steuert der Besucher die Bewegung selbst, statt ihr
   zuzusehen - man scrollt zurueck und das Auto faehrt zurueck.

   Gebaut mit einer Zeitachse, die an der Scrollposition haengt statt an der
   Uhr (animation-timeline: view()). Der Fortschritt 0-100% entspricht dem Weg
   des Bandes durch das sichtbare Fenster: taucht es unten auf, steht das Auto
   rechts; verlaesst es oben das Bild, ist es links raus.

   Browser ohne diese Technik (derzeit vor allem Firefox) behalten die
   Zeitschleife von oben. Deshalb steht das hier in einem @supports-Block:
   Es ueberschreibt nur dort, wo es auch wirklich funktioniert - sonst haetten
   diese Besucher ein Auto, das gar nicht mehr faehrt. */
@supports (animation-timeline: view()) {
  .fahrt-wagen.bereit.faehrt,
  .fahrt-wagen.bereit{
    animation:ziehen 1s linear both;
    animation-timeline:view();
    animation-range:entry 100% exit 0%;
  }
  /* Der Qualm haengt weiter an der Uhr - er soll auch dann kraeuseln, wenn
     gerade niemand scrollt. */
  .fahrt-wagen.bereit .qualm{animation:qualmen 1.9s ease-out infinite}
  .fahrt-wagen.bereit .qualm:nth-child(3){animation-delay:.63s}
  .fahrt-wagen.bereit .qualm:nth-child(4){animation-delay:1.26s}
}
@media (prefers-reduced-motion:reduce){
  @supports (animation-timeline: view()) {
    .fahrt-wagen.bereit,.fahrt-wagen.bereit.faehrt{animation:none;
      transform:translateX(6vw)}
  }
}


/* ---------- Anhaenger mit Raedern ----------

   Florian: "der anhaenger fehlt noch raeder". Stimmt - ein Schild, das in der
   Luft mitfliegt, ist kein Anhaenger. Jetzt haengt er an einer Deichsel und
   rollt auf zwei Raedern auf derselben Linie wie das Auto.

   Ausserdem: "bissel schnell ... der bus kann ja schnell ankommen und dann
   langsamer werden". Beides gemacht - die Strecke braucht jetzt gut doppelt
   so viel Scrollweg, und die Kurve ist vorne steil und hinten flach: schnelle
   Einfahrt, ruhiges Ausrollen. */
.fahrt-hanger{position:relative;flex:none;display:block;padding-bottom:13px}
.fahrt-band{margin-bottom:0}
.rad{position:absolute;bottom:0;width:13px;height:13px;border-radius:50%;
  background:#15171b;border:2px solid rgba(255,255,255,.34);box-sizing:border-box}
.rad:nth-of-type(1){left:22%}
.rad:nth-of-type(2){left:60%}
.fahrt-seil{margin-bottom:11px}

/* Langsamer und mit Schwung: die Strecke beginnt, sobald das Band zur Haelfte
   im Bild ist, und laeuft bis es oben ganz heraus ist. */
@supports (animation-timeline: view()) {
  .fahrt-wagen.bereit,.fahrt-wagen.bereit.faehrt{
    animation-range:entry 20% exit 0%;
    animation-timing-function:cubic-bezier(.10,.70,.25,1);
  }
}
/* Ohne Scroll-Zeitachse (derzeit Firefox): dieselbe Ruhe, nur ueber die Uhr. */
.fahrt-wagen.bereit.faehrt{animation-duration:54s}

@media (max-width:700px){
  .rad{width:10px;height:10px;border-width:1.5px}
  .fahrt-hanger{padding-bottom:10px}
  .fahrt-seil{margin-bottom:8px}
  .fahrt-wagen.bereit.faehrt{animation-duration:44s}
}


/* ---------- Ankommen statt Durchrauschen ----------

   Gemessen: Bei voller Durchfahrt musste der Zug 2.480 px zuruecklegen, waehrend
   nur rund 870 px gescrollt werden - fast dreifaches Tempo, und in der Mitte des
   Bandes war schon alles vorbei. Ein Banner, das so vorbeirast, liest niemand.

   Deshalb faehrt er jetzt herein und bleibt stehen: schnell heran, sichtbar
   langsamer werdend, am Ende steht das Gespann und das Banner ist in Ruhe
   lesbar. Genau das, was Florian beschrieben hat.

   Auf dem Handy bleibt die Durchfahrt: dort passt das Banner nicht nebeneinander
   ins Bild, im Stand waere der groesste Teil davon nie zu sehen. */
@supports (animation-timeline: view()) {
  @media (min-width:701px){
    .fahrt-wagen.bereit,.fahrt-wagen.bereit.faehrt{
      animation-name:einfahren;
      animation-timing-function:cubic-bezier(.12,.72,.22,1);
    }
  }
}
@keyframes einfahren{
  from{transform:translateX(100vw)}
  to{transform:translateX(3vw)}
}


/* ---------- Gespann einpassen ----------
   Gemessen: 1.488 px Gespann auf 1.440 px Bildschirm - die letzte Tafel war
   abgeschnitten. Enger gesetzt und zwei Bezeichnungen gekuerzt.

   Stehen bleiben darf es nur, wenn es auch ganz ins Bild passt. Auf schmaleren
   Bildschirmen faehrt es weiter durch - sonst waere ein Teil des Banners
   dauerhaft unsichtbar. */
.fahrt-band b{padding:6px 10px;font-size:10.5px;letter-spacing:.10em}
.rad:nth-of-type(1){left:39%}
.rad:nth-of-type(2){left:45%}

@supports (animation-timeline: view()) {
  @media (min-width:701px) and (max-width:1249px){
    .fahrt-wagen.bereit,.fahrt-wagen.bereit.faehrt{animation-name:ziehen}
  }
}


/* ---------- Warum das Auto stillstand ----------
   Gemessen: Bei jeder Scrollposition stand es an derselben Stelle (x=70).

   Ursache: overflow:hidden macht aus einem Element einen Scroll-Container -
   auch wenn darin nie etwas zu scrollen ist. Die Zeitachse view() sucht sich
   den naechsten scrollbaren Vorfahren, fand also das Band selbst statt die
   Seite, und das Band scrollt nicht. Ergebnis: eine Zeitachse, die nie
   voranschreitet, und ein Auto, das im Endzustand einfriert.

   overflow:clip schneidet genauso ab, macht aber keinen Scroll-Container.
   Genau dafuer gibt es das. */


/* Und hier lag der eigentliche Grund: overflow-x:hidden auf html/body macht
   den Koerper der Seite zum Scroll-Container. Die Zeitachse view() haengt sich
   an den naechsten scrollbaren Vorfahren - das war dann body, und body scrollt
   nicht, das Dokument scrollt. Deshalb stand die Zeitachse still.
   overflow-x:clip verhindert genauso das seitliche Ueberlaufen (dafuer hatte
   ich es urspruenglich gesetzt), ohne einen Scroll-Container zu erzeugen. */


/* ---------- Fahrt: Steuerung uebernimmt das Skript ----------

   Drei Anlaeufe mit animation-timeline:view() haben nicht getragen. Gemessen
   stand das Fahrzeug bei jeder Scrollposition an derselben Stelle - die
   Zeitachse schritt nie voran. Statt weiter an einer Technik zu drehen, die
   ich nicht vollstaendig kontrolliere, rechnet jetzt main.js die Position
   selbst aus: ein Wert pro Bild, direkt aus der Lage des Bandes im Fenster.
   Das laeuft in jedem Browser gleich und laesst sich genau einstellen.

   Sobald das Skript uebernimmt, setzt es die Klasse .jsfahrt - erst dann wird
   die CSS-Animation abgeschaltet. Laeuft das Skript nicht, bleibt die
   Zeitschleife von oben aktiv, und das Fahrzeug faehrt trotzdem. */
.fahrt-wagen.jsfahrt,
.fahrt-wagen.jsfahrt.bereit,
.fahrt-wagen.jsfahrt.bereit.faehrt{animation-name:none}
.fahrt-wagen.jsfahrt .qualm{animation:qualmen 1.9s ease-out infinite}
.fahrt-wagen.jsfahrt .qualm:nth-of-type(2){animation-delay:.63s}
.fahrt-wagen.jsfahrt .qualm:nth-of-type(3){animation-delay:1.26s}
@media (prefers-reduced-motion:reduce){
  .fahrt-wagen.jsfahrt .qualm{animation:none}
}


/* ---------- Ruhige Runde statt Scroll-Steuerung ----------

   Rechnung, die die Entscheidung traegt: Auf 390 px Breite ist das Gespann
   rund 700 px lang, der Weg also etwa 1.090 px - bei einer Scrollstrecke von
   knapp 640 px. Fast doppeltes Tempo, und das auf einem Bildschirm, auf dem
   das Band nur 60 px hoch ist. Man scrollt daran vorbei und hat den Bus nie
   gesehen.

   Deshalb wieder eine Runde ueber die Uhr: langsam einmal durch, kurze Pause,
   wieder von vorn. Das Tempo ist so gewaehlt, dass man die Tafeln lesen kann -
   rund 125 px pro Sekunde am Rechner, rund 75 px pro Sekunde am Handy. */
@supports (animation-timeline: view()){
  .fahrt-wagen.bereit,
  .fahrt-wagen.bereit.faehrt{animation-timeline:auto;animation-range:normal}
}
.fahrt-wagen,
.fahrt-wagen.bereit{transform:translateX(100vw)}
.fahrt-wagen.bereit.faehrt{
  animation:durchfahrt 30s linear infinite;
  animation-timeline:auto;
}
@keyframes durchfahrt{
  0%{transform:translateX(100vw)}
  70%{transform:translateX(-100%)}
  100%{transform:translateX(-100%)}
}
.fahrt-wagen.bereit.faehrt .qualm{animation:qualmen 1.9s ease-out infinite}
.fahrt-wagen.bereit.faehrt .qualm:nth-of-type(2){animation-delay:.63s}
.fahrt-wagen.bereit.faehrt .qualm:nth-of-type(3){animation-delay:1.26s}

@media (max-width:700px){
  .fahrt-wagen.bereit.faehrt{animation-duration:22s}
}
@media (prefers-reduced-motion:reduce){
  .fahrt-wagen,.fahrt-wagen.bereit,
  .fahrt-wagen.bereit.faehrt{animation:none;transform:translateX(3vw)}
  .fahrt-wagen.bereit.faehrt .qualm{animation:none}
}


/* ---------- Anhaenger, ordentlich gebaut ----------

   Florian: "der anhaenger fehlt hinten ein rad und sieht ultra billig aus".
   Beides stimmte. Es waren zwei flache Kreise unter einer Reihe Kaesten - das
   war eine Andeutung, kein Anhaenger.

   Jetzt hat er, was ein Anhaenger hat: einen durchgehenden Rahmen unter dem
   Schild, ein Stuetzrad vorn an der Deichsel, eine Tandemachse in der Mitte
   und eine dritte Achse hinten. Die Raeder sind keine Kreise mehr, sondern
   haben Nabe, Felge und Reifen - drei Ringe in einem Farbverlauf. Auf 15 px
   sieht man das nicht einzeln, aber man sieht den Unterschied.

   Das Schild bekommt einen Rahmen mit Lichtkante oben und Schatten unten, die
   Tafeln sind durch duenne Stege getrennt statt durch eigene Kaesten. */

.fahrt-hanger{padding-bottom:16px}

.fahrt-band{border:1px solid rgba(255,255,255,.24);border-radius:5px;
  overflow:hidden;
  box-shadow:0 2px 0 rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.10)}
.fahrt-band b{border:none;border-right:1px solid rgba(255,255,255,.15)}
.fahrt-band b:last-child{border-right:none}

/* Rahmen unter dem Schild - das Teil, auf dem alles sitzt. */
.hanger-rahmen{position:absolute;left:2px;right:2px;bottom:10px;height:4px;
  border-radius:2px;background:linear-gradient(#454c56,#191d23)}

/* Stuetzrad vorn: steht bei jedem Anhaenger unter der Deichsel. */
.hanger-stuetze{position:absolute;left:5px;bottom:3px;width:2px;height:8px;
  background:rgba(255,255,255,.26);border-radius:1px}
.hanger-stuetze::after{content:"";position:absolute;left:-2px;bottom:-3px;
  width:6px;height:6px;border-radius:50%;background:#14171b;
  box-shadow:0 0 0 1px rgba(255,255,255,.16)}

/* Raeder mit Nabe, Felge und Reifen statt flacher Kreise. */
.rad{position:absolute;bottom:0;width:15px;height:15px;border-radius:50%;
  border:none;box-sizing:border-box;
  background:radial-gradient(circle at 50% 50%,
    #8b939e 0 22%, #4a5058 23% 38%, #22262c 39% 62%, #0b0d10 63% 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.13),0 1px 2px rgba(0,0,0,.6)}
.rad-1{left:46%}
.rad-2{left:53%}
.rad-3{right:4%}

@media (max-width:700px){
  .fahrt-hanger{padding-bottom:12px}
  .hanger-rahmen{bottom:8px;height:3px}
  .rad{width:11px;height:11px}
  .hanger-stuetze{height:6px}
  .hanger-stuetze::after{width:5px;height:5px;left:-1.5px}
}


/* ---------- Loop ohne Leerlauf ----------
   Florian: "wenn er verschwindet kann er gleich wieder auftauchen, sonst ist
   die strasse so lange leer". Stimmt - ich hatte am Ende 30 Prozent der Zeit
   Stillstand eingebaut. Jetzt endet der Weg genau dann, wenn die letzte Tafel
   links raus ist, und beginnt sofort wieder rechts. Keine leere Strasse mehr.
   Das Tempo bleibt gleich: die Dauer sinkt im selben Verhaeltnis. */
@keyframes durchfahrt{
  from{transform:translateX(100vw)}
  to{transform:translateX(-100%)}
}
.fahrt-wagen.bereit.faehrt{animation-duration:21s}
@media (max-width:700px){
  .fahrt-wagen.bereit.faehrt{animation-duration:15s}
}

/* ---------- Heu ueber der Strasse ----------
   Florians Idee, und sie kostet fast nichts: ein Steppenlaeufer, der ueber die
   Strasse rollt. Gebaut aus einem Kreis mit gepunktetem Rand und zwei inneren
   Ringen - auf 18 px liest das Auge daraus ein Knaeuel. Dass es sich dreht,
   macht den Unterschied zwischen "Kreis" und "rollt".

   Zwei Stueck in verschiedenen Groessen und Tempi, damit es nicht wie ein
   Taktgeber wirkt. Sie laufen hinter dem Gespann durch. */
.heu{position:absolute;bottom:1px;z-index:0;border-radius:50%;
  border:2px dotted rgba(198,176,126,.55);pointer-events:none}
.heu-1{width:18px;height:18px;
  box-shadow:inset 0 0 0 3px rgba(198,176,126,.14),
             inset 0 0 0 6px rgba(198,176,126,.26)}
.heu-2{width:12px;height:12px;border-width:1.5px;opacity:.7;
  box-shadow:inset 0 0 0 2px rgba(198,176,126,.20)}
.fahrt-wagen{z-index:1}

.bereit ~ .heu, .heu{animation:rollen 13s linear infinite}
.heu-2{animation-duration:19s;animation-delay:6s}
@keyframes rollen{
  from{transform:translateX(101vw) rotate(0deg)}
  to{transform:translateX(-40px) rotate(-1080deg)}
}
@media (max-width:700px){
  .heu-1{width:14px;height:14px}
  .heu-2{width:10px;height:10px}
  .heu{animation-duration:10s}
  .heu-2{animation-duration:15s}
}
@media (prefers-reduced-motion:reduce){
  .heu{display:none}
}


/* ---------- Heu, deutlicher ----------
   Im ersten Anlauf war es 18 px klein und blass - unter dem Bus sah man einen
   gelblichen Fleck, kein Knaeuel. Jetzt groesser, heller und aus drei
   ineinander verdrehten Ringen: der Rand gestrichelt, zwei gepunktete Ringe
   schraeg dazu. Das ergibt das Wirre, an dem man einen Steppenlaeufer erkennt. */
.heu{border:2px dashed rgba(214,192,140,.72);bottom:2px}
.heu::before,.heu::after{content:"";position:absolute;inset:-2px;
  border-radius:50%;border:1.5px dotted rgba(214,192,140,.5)}
.heu::before{transform:rotate(34deg) scale(.72)}
.heu::after{transform:rotate(-28deg) scale(.44)}
.heu-1{width:26px;height:26px;box-shadow:none}
.heu-2{width:17px;height:17px;border-width:1.5px;opacity:.8;box-shadow:none}
@media (max-width:700px){
  .heu-1{width:19px;height:19px}
  .heu-2{width:13px;height:13px}
}


/* ---------- Die Nummer mit dem Heu ----------

   Florians Regie: leere Strasse, Heu rollt durch, dann kommt der Bus und jagt
   es weg. Nicht die ganze Zeit Heu, sondern als Fueller genau dann, wenn sonst
   nichts los ist.

   Beide Animationen laufen deshalb auf DERSELBEN Dauer. Nur so bleiben sie
   dauerhaft im Takt - mit zwei verschiedenen Laufzeiten waeren sie nach ein
   paar Runden auseinandergelaufen und die Pointe waere weg. Die Wartezeiten
   stecken als flache Abschnitte in den Keyframes.

   Der Ablauf einer Runde:
     0 %        Bus faehrt rechts herein, das Heu ist schon mitten im Bild
     0-18 %     Bus holt auf, Heu rollt links raus - die Jagd
     bis 48 %   Bus zieht mit dem Anhaenger durch und verlaesst das Bild
     48-56 %    leere Strasse
     56 %       das Heu springt unsichtbar nach rechts zurueck
     56-100 %   es rollt wieder herein, bis der Bus erneut auftaucht

   Der Sprung bei 56 % passiert ausserhalb des Bildes - man sieht ihn nie. */

@keyframes durchfahrt{
  0%{transform:translateX(100vw)}
  48%{transform:translateX(-100%)}
  100%{transform:translateX(-100%)}
}
.fahrt-wagen.bereit.faehrt{animation-duration:44s}

@keyframes rollen{
  0%{transform:translateX(46vw) rotate(-560deg)}
  18%{transform:translateX(-70px) rotate(-1010deg)}
  56%{transform:translateX(-70px) rotate(-1010deg)}
  56.01%{transform:translateX(101vw) rotate(0deg)}
  100%{transform:translateX(46vw) rotate(-560deg)}
}
.heu,.heu-2{animation:rollen 44s linear infinite;animation-delay:0s}
/* Das zweite, kleinere Knaeuel laeuft etwas versetzt und ein Stueck weiter
   vorn - zwei exakt gleiche Bahnen sehen nach Maschine aus. */
.heu-2{animation-name:rollen-2}
@keyframes rollen-2{
  0%{transform:translateX(63vw) rotate(-380deg)}
  22%{transform:translateX(-60px) rotate(-940deg)}
  62%{transform:translateX(-60px) rotate(-940deg)}
  62.01%{transform:translateX(103vw) rotate(0deg)}
  100%{transform:translateX(63vw) rotate(-380deg)}
}

@media (max-width:700px){
  .fahrt-wagen.bereit.faehrt{animation-duration:32s}
  .heu,.heu-2{animation-duration:32s}
}


/* ---------- Heu nur auf leerer Strasse ----------

   Korrektur: "ne heu weg oder nur wenn auto ned im bild erlaubt sonst ned gut".
   Die Jagd war meine Interpretation und war falsch - neben dem Gespann macht
   das Knaeuel das Bild unruhig.

   Jetzt strikt nacheinander. Gerechnet auf die Runde von 44 Sekunden:
     0-48 %     Bus und Anhaenger ziehen durch. Bei 48 % ist die letzte Tafel
                links draussen (Weg = -100 % der Zuglaenge, rechte Kante bei 0).
     48-52 %    Sicherheitsabstand, damit sich nichts ueberschneidet.
     52-96 %    die Strasse gehoert dem Heu.
     96-100 %   wieder Abstand, bevor der Bus zurueckkommt.

   Der Ruecksprung nach rechts liegt bei 100 % und damit ausserhalb des Bildes.
   Beide Knaeuel laufen weiter auf derselben Dauer wie das Gespann - sonst
   waeren sie nach ein paar Runden mitten im Bus. */

@keyframes rollen{
  0%{transform:translateX(101vw) rotate(0deg)}
  52%{transform:translateX(101vw) rotate(0deg)}
  96%{transform:translateX(-80px) rotate(-1080deg)}
  100%{transform:translateX(-80px) rotate(-1080deg)}
}
@keyframes rollen-2{
  0%{transform:translateX(104vw) rotate(0deg)}
  58%{transform:translateX(104vw) rotate(0deg)}
  92%{transform:translateX(-70px) rotate(-860deg)}
  100%{transform:translateX(-70px) rotate(-860deg)}
}


/* ---------- Heu wieder raus ----------
   Florian: "sieht bloed aus, hatte es mir anders vorgestellt". Also weg damit -
   das Markup ist entfernt, diese Regel faengt nur den Fall ab, dass irgendwo
   noch ein altes Element steht.

   Der Bus faehrt jetzt durchgehend im Kreis: Sobald die letzte Tafel links
   verschwindet, kommt er rechts wieder herein. Keine Pause, keine leere
   Strasse - und das Tempo wie vorher, rund 125 px pro Sekunde. */
.heu{display:none}
@keyframes durchfahrt{
  from{transform:translateX(100vw)}
  to{transform:translateX(-100%)}
}
.fahrt-wagen.bereit.faehrt{animation-duration:21s}
@media (max-width:700px){
  .fahrt-wagen.bereit.faehrt{animation-duration:15s}
}


/* ---------- Der Bus kommt frueher zurueck ----------

   Florian: "sonst ist so lange leer". Er meint nicht die Strasse - da ist
   immer der Anhaenger. Er meint den BUS. Gerechnet:

     Gespann 1.202 px, Bildschirm 1.440 px, Weg gesamt 2.642 px in 21 s.
     Der Bus ist draussen, sobald 1.572 px zurueckgelegt sind - nach 12,5 s.
     Danach zieht nur noch das Banner vorbei: 8,5 s ohne Bus.

   Statt alles schneller zu machen (dann kann man die Tafeln nicht mehr lesen),
   wird die Fahrt geteilt: bis der Bus draussen ist gemaechlich, danach zieht
   das Banner zuegiger raus. Der Bus ist damit nach rund 6,7 s statt 8,5 s
   wieder da - knapp zwei Sekunden frueher, genau wie gewuenscht, und die
   Tafeln bleiben im lesbaren Tempo. */
@keyframes durchfahrt{
  0%{transform:translateX(100vw)}
  68%{transform:translateX(-11%)}
  100%{transform:translateX(-100%)}
}


/* Zurueckgenommen: Die geteilte Fahrt hat das Banner am Ende beschleunigt.
   Florian gefaellt das nicht - gleichmaessiges Tempo ist ruhiger. Also wieder
   eine durchgehende Geschwindigkeit von rechts nach links. Die Lueckte ohne
   Bus (rund 8,5 s) nehmen wir dafuer in Kauf. */
@keyframes durchfahrt{
  from{transform:translateX(100vw)}
  to{transform:translateX(-100%)}
}

/* ---------- Bus mit Werbeschriftzug (22.10.) ----------
   Florian: "Das fahrende Auto hat nicht den Werbeschriftzug drauf, der drauf
   soll." Das Firmenlogo ist jetzt auf der Seitenwand (auto.webp, 840 px,
   aus ISFW_Logo_wht_quer.png). Bei 132 px Breite waere es nur ein Fleck -
   deshalb faehrt der Bus groesser, damit man das Logo auch erkennt. */
.fahrt-strasse{height:100px}
.fahrt-halter{width:220px}
.fahrt-seil{margin-bottom:24px}
@media (max-width:700px){
  .fahrt-strasse{height:74px}
  .fahrt-halter{width:146px}
  .fahrt-seil{margin-bottom:16px}
}