/* ========================================================================== RGN UMZUG — Design-Rezept "Fracht & Signal" Anthrazit #111820 · Signal-Orange #F26522 · Hellgrau #E6E6E6 Clean-Layer: Schatten 1,5–6 % · Headlines 500–600 · eine Akzentfarbe ========================================================================== */ @import url("../fonts/fonts.css"); /* --- 1. Tokens ----------------------------------------------------------- */ :root{ /* Farbe */ --ink:#111820; --ink-2:#2B343E; --muted:#5C6773; --muted-2:#8A939D; --accent:#F26522; --accent-dk:#D2521A; --accent-sf:#FFF3EC; /* Warnrot NUR fuer die Mehrkosten-Zahl in der Vergleichs-Sektion. Nicht als zweite Akzentfarbe verwenden — die Seite hat genau einen Akzent. */ --rot:#C42116; --rot-hell:#EF7259; --bg:#FFFFFF; --bg-alt:#F6F6F4; --bg-dark:#111820; --bg-dark-2:#182230; --line:#E7E7E3; --line-2:#EFEFEC; --line-inv:rgba(255,255,255,.14); /* Radien — Button ≈ halber Kartenradius */ --r-btn:9px; --r-card:18px; --r-media:22px; --r-pill:999px; /* Schatten — max 6 % Deckkraft */ --sh-1:0 1px 2px rgba(17,24,32,.035); --sh-2:0 1px 2px rgba(17,24,32,.03), 0 10px 28px rgba(17,24,32,.045); --sh-3:0 2px 4px rgba(17,24,32,.03), 0 22px 56px rgba(17,24,32,.06); /* Raster */ --wrap:1220px; --wrap-narrow:820px; --gut:clamp(1.25rem, .75rem + 2vw, 2.5rem); --sec-y:clamp(4rem, 2.7rem + 5.4vw, 7.25rem); /* Bewegung */ --e-out:cubic-bezier(.22,.61,.36,1); --e-inout:cubic-bezier(.65,.05,.36,1); --e-spring:linear(0,.0039 1.62%,.0157 3.24%,.0629,.1411 9.72%,.2508 12.96%,.3903,.5518 19.44%,.7043 22.68%,.8371,.9421 29.16%,1.0142 32.4%,1.0533,1.0644 39.42%,1.0559 42.66%,1.0396,1.0217 49.14%,1.0084 52.38%,.9994,.9946 59.4%,.9968 65.88%,1.0007 72.36%,1.0016 78.84%,1.0002 91.8%,1); --t-fast:.18s; --t:.28s; --t-slow:.55s; } /* --- 2. Reset ------------------------------------------------------------ */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--ink-2); font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:17px; line-height:1.65; font-weight:400; letter-spacing:-.01em; -webkit-font-smoothing:antialiased; overflow-x:clip; } img,svg,video{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} h1,h2,h3,h4,h5{margin:0;color:var(--ink);font-weight:600;text-wrap:balance} p{margin:0;text-wrap:pretty} /* ol MUSS mit: sie bringt sonst padding-inline-start:40px und margin-block vom Browser mit. Genau das hat die Schiene der Schritte-Sektion um 40 px neben die Punkte gesetzt — sichtbar erst beim Messen. */ ul,ol{margin:0;padding:0;list-style:none} li{text-wrap:pretty} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px} ::selection{background:var(--accent);color:#fff} /* --- 3. Typo-Stufen (7) -------------------------------------------------- */ .t-hero{font-size:clamp(2.125rem,1.15rem + 3.9vw,3.625rem);line-height:1.06;letter-spacing:-.035em;font-weight:600} .t-h2 {font-size:clamp(1.375rem,1.08rem + 1.7vw,2.375rem);line-height:1.14;letter-spacing:-.028em;font-weight:600} .t-h3 {font-size:clamp(1.09375rem,1.02rem + .33vw,1.3125rem);line-height:1.28;letter-spacing:-.018em;font-weight:600} .t-h4 {font-size:1.0625rem;line-height:1.35;letter-spacing:-.012em;font-weight:600} .t-lead{font-size:clamp(1.0625rem,1.01rem + .26vw,1.1875rem);line-height:1.6;color:var(--muted);letter-spacing:-.008em} .t-body{font-size:1.0625rem;line-height:1.65} .t-sm {font-size:.9375rem;line-height:1.6;color:var(--muted)} .t-label{ font-family:'Geist Mono',ui-monospace,'SFMono-Regular',monospace; font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase; color:var(--accent); } .hl{color:var(--accent)} .br{display:block} /* --- 4. Layout ----------------------------------------------------------- */ .wrap{width:min(100% - var(--gut)*2,var(--wrap));margin-inline:auto} .wrap-n{width:min(100% - var(--gut)*2,var(--wrap-narrow));margin-inline:auto} .sec{padding-block:var(--sec-y);position:relative} .sec--alt{background:var(--bg-alt)} .sec--dark{background:var(--bg-dark);color:#C8CFD7} .sec--dark h1,.sec--dark h2,.sec--dark h3,.sec--dark h4{color:#fff} .sec--dark .t-lead{color:#98A3AF} .sec--tight{padding-block:clamp(3rem,2rem + 3.5vw,4.5rem)} /* Sektionskopf mit Routen-Linie (Signatur-Motiv) */ .sechead{max-width:38rem;margin-bottom:clamp(2.25rem,1.5rem + 2.4vw,3.5rem)} .sechead--c{margin-inline:auto;text-align:center} /* Subheadline ist ueberall nur Text in Orange — keine Striche, keine Nummern (Florian, 29.08.2026) */ .kicker{display:block;margin-bottom:.9rem} .sechead--c .kicker{text-align:center} .sechead .t-lead{margin-top:1.1rem} h1 + .t-lead,h2 + .t-lead,.kicker + .t-lead{margin-top:1.1rem} /* --- 5. Buttons ---------------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.6rem; padding:.95rem 1.5rem;border-radius:var(--r-btn);border:1px solid transparent; font-size:.9375rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap; cursor:pointer;transition:background var(--t) var(--e-out),color var(--t) var(--e-out), border-color var(--t) var(--e-out),transform var(--t-fast) var(--e-out); } .btn svg{width:17px;height:17px;flex:none} .btn:active{transform:translateY(1px)} .btn--primary{background:var(--accent);color:#fff} .btn--primary:hover{background:var(--accent-dk)} .btn--ink{background:var(--ink);color:#fff} .btn--ink:hover{background:#000} .btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn--ghost:hover{border-color:var(--ink);background:var(--bg-alt)} .btn--onimg{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.32);backdrop-filter:blur(6px)} .btn--onimg:hover{background:rgba(255,255,255,.18);border-color:#fff} .btn--lg{padding:1.1rem 1.85rem;font-size:1rem} .btn--block{width:100%} /* Textlink mit Routen-Unterstrich */ .tlink{ display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.9375rem; color:var(--ink);position:relative;padding-bottom:2px; } .tlink::after{ content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%; background:var(--accent);transform:scaleX(0);transform-origin:left; transition:transform var(--t) var(--e-out); } .tlink:hover::after{transform:scaleX(1)} .tlink svg{width:15px;height:15px;transition:transform var(--t) var(--e-out)} .tlink:hover svg{transform:translateX(3px)} /* --- 6. Karten & Listen -------------------------------------------------- */ .card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden} .checks{display:grid;gap:.6rem} .checks li{display:grid;grid-template-columns:19px 1fr;gap:.7rem;align-items:start;font-size:.9375rem;line-height:1.5} .checks li::before{ content:"";width:19px;height:19px;margin-top:.15rem;border-radius:50%; background:var(--accent-sf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F26522' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat; } .sec--dark .checks li::before{background-color:rgba(242,101,34,.16)} .sec--dark .checks li{color:#B6BEC7} /* --- 7. Reveal (Micro-Motion) -------------------------------------------- */ [data-rv]{opacity:0;transform:translateY(10px);transition:opacity .6s var(--e-out),transform .6s var(--e-out)} [data-rv].is-in{opacity:1;transform:none} [data-rv-d="1"]{transition-delay:.07s}[data-rv-d="2"]{transition-delay:.14s} [data-rv-d="3"]{transition-delay:.21s}[data-rv-d="4"]{transition-delay:.28s} [data-rv-d="5"]{transition-delay:.35s}[data-rv-d="6"]{transition-delay:.42s} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important} [data-rv]{opacity:1;transform:none} } /* --- 8. Header ----------------------------------------------------------- */ .hdr{ position:fixed;inset:0 0 auto;z-index:120; background:transparent;border-bottom:1px solid transparent; transition:background var(--t) var(--e-out),border-color var(--t) var(--e-out), box-shadow var(--t) var(--e-out),backdrop-filter var(--t); } .hdr__in{display:flex;align-items:center;gap:clamp(1rem,.4rem + 1.8vw,2.5rem);height:86px;transition:height var(--t) var(--e-out)} .hdr__logo{flex:none;display:block;line-height:0} .hdr__logo img{height:50px;width:auto;transition:height var(--t) var(--e-out)} .hdr__logo .l-inv{display:block} .hdr__logo .l-pos{display:none} .hdr__nav{display:flex;align-items:center;gap:clamp(.35rem,0rem + 1.1vw,1.35rem);margin-left:auto} .hdr__link{ display:inline-flex;align-items:center;gap:.35rem;padding:.55rem .1rem; font-size:.9375rem;font-weight:500;color:#fff;letter-spacing:-.01em;position:relative; transition:color var(--t) var(--e-out);white-space:nowrap; } .hdr__link::after{ content:"";position:absolute;left:0;right:0;bottom:.15rem;height:1.5px;background:var(--accent); transform:scaleX(0);transform-origin:left;transition:transform var(--t) var(--e-out); } .hdr__link:hover::after,.hdr__link[aria-current="page"]::after{transform:scaleX(1)} .hdr__link svg{width:13px;height:13px;opacity:.65;transition:transform var(--t) var(--e-out)} .hdr__tel{ display:none;align-items:center;gap:.5rem;margin-left:.4rem;padding-left:clamp(.6rem,1.2vw,1.25rem); border-left:1px solid rgba(255,255,255,.2); font-size:.9375rem;font-weight:600;color:#fff;white-space:nowrap; } .hdr__tel svg{width:16px;height:16px;color:var(--accent)} .hdr .btn{padding:.75rem 1.15rem;font-size:.875rem} /* Scroll-Zustand */ .hdr.is-scrolled,.hdr.is-mega{background:rgba(255,255,255,.9);backdrop-filter:blur(14px) saturate(150%);border-bottom-color:var(--line);box-shadow:var(--sh-1)} .hdr.is-scrolled .hdr__in{height:70px} .hdr.is-scrolled .hdr__logo img,.hdr.is-mega .hdr__logo img{height:43px} .hdr.is-scrolled .hdr__logo .l-inv,.hdr.is-mega .hdr__logo .l-inv{display:none} .hdr.is-scrolled .hdr__logo .l-pos,.hdr.is-mega .hdr__logo .l-pos{display:block} .hdr.is-scrolled .hdr__link,.hdr.is-mega .hdr__link{color:var(--ink-2)} .hdr.is-scrolled .hdr__link:hover,.hdr.is-mega .hdr__link:hover{color:var(--ink)} .hdr.is-scrolled .hdr__tel,.hdr.is-mega .hdr__tel{color:var(--ink);border-left-color:var(--line)} .hdr.is-scrolled .hdr__burger,.hdr.is-mega .hdr__burger{color:var(--ink);border-color:var(--line)} /* Seiten ohne dunklen Hero starten direkt im hellen Zustand — Logo und Textfarbe muessen mitschalten, sonst steht Weiss auf Weiss. */ .hdr--solid{background:rgba(255,255,255,.9);backdrop-filter:blur(14px) saturate(150%);border-bottom-color:var(--line);box-shadow:var(--sh-1)} .hdr--solid .hdr__logo .l-inv{display:none} .hdr--solid .hdr__logo .l-pos{display:block} .hdr--solid .hdr__link{color:var(--ink-2)} .hdr--solid .hdr__link:hover{color:var(--ink)} .hdr--solid .hdr__tel{color:var(--ink);border-left-color:var(--line)} .hdr--solid .hdr__burger{color:var(--ink);border-color:var(--line)} .hdr--solid .hdr__ico{border-color:var(--line);color:var(--ink)} .hdr--solid .hdr__ico--fill{background:var(--accent);border-color:var(--accent);color:#fff} /* Mega-Dropdown Leistungen */ .hdr__drop{position:relative} @media (min-width:1081px){.hdr__drop{position:static}} .hdr__panel{ position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,8px); width:min(92vw,660px);background:#fff;border:1px solid var(--line);border-radius:var(--r-card); box-shadow:var(--sh-3);padding:.85rem;opacity:0;visibility:hidden; transition:opacity var(--t) var(--e-out),transform var(--t) var(--e-out),visibility var(--t); } .hdr__drop:hover .hdr__panel,.hdr__drop:focus-within .hdr__panel{opacity:1;visibility:visible;transform:translate(-50%,0)} .hdr__drop:hover .hdr__link svg{transform:rotate(180deg)} .hdr__grid{display:grid;grid-template-columns:1fr 1fr;gap:.15rem} .hdr__item{display:grid;grid-template-columns:34px 1fr;gap:.8rem;align-items:start;padding:.7rem .8rem;border-radius:12px;transition:background var(--t-fast)} .hdr__item:hover{background:var(--bg-alt)} .hdr__item i{ width:34px;height:34px;border-radius:9px;background:var(--accent-sf); display:grid;place-items:center;color:var(--accent); } .hdr__item i svg{width:17px;height:17px} .hdr__item b{display:block;font-size:.9375rem;font-weight:600;color:var(--ink);letter-spacing:-.012em} .hdr__item span{display:block;font-size:.8125rem;line-height:1.45;color:var(--muted)} /* Mobiler Header */ .hdr__burger{ display:none;width:44px;height:44px;flex:none;align-items:center;justify-content:center; background:transparent;border:1px solid rgba(255,255,255,.28);border-radius:11px;color:#fff;cursor:pointer; } .hdr__burger span{display:block;width:17px;height:1.6px;background:currentColor;border-radius:2px;position:relative;transition:transform var(--t) var(--e-out),background var(--t-fast)} .hdr__burger span::before,.hdr__burger span::after{content:"";position:absolute;left:0;width:17px;height:1.6px;background:currentColor;border-radius:2px;transition:transform var(--t) var(--e-out),top var(--t-fast)} .hdr__burger span::before{top:-5.5px}.hdr__burger span::after{top:5.5px} .hdr__burger.is-on span{background:transparent} .hdr__burger.is-on span::before{top:0;transform:rotate(45deg)} .hdr__burger.is-on span::after{top:0;transform:rotate(-45deg)} .drawer{ position:fixed;inset:0;z-index:115;background:#fff;padding:96px var(--gut) 2.5rem; overscroll-behavior:contain; transform:translateY(-8px);opacity:0;visibility:hidden;overflow-y:auto; transition:opacity var(--t) var(--e-out),transform var(--t) var(--e-out),visibility var(--t); } .drawer.is-on{opacity:1;visibility:visible;transform:none} /* NUR die Textlinks — Kontaktkarten und CTA haben eigene Regeln */ .drawer .d-sub a,.drawer .d-link{ display:block;padding:.85rem 0;border-bottom:1px solid var(--line-2); font-size:1rem;font-weight:600;color:var(--ink); } .drawer .d-sub a{padding-left:1rem;font-weight:500;color:var(--ink-2)} .drawer .d-cap{padding:1.5rem 0 .35rem;font-family:'Geist Mono',monospace;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)} @media (max-width:1080px){ .hdr__nav{display:none} .hdr__burger{display:flex} .hdr__in{gap:.75rem;height:74px} .hdr.is-scrolled .hdr__in{height:66px} .hdr__mob{display:flex;align-items:center;gap:.5rem;margin-left:auto} } @media (min-width:1081px){.hdr__mob{display:none}} @media (min-width:1180px){.hdr__tel{display:inline-flex}} .hdr__ico{ width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:11px; border:1px solid rgba(255,255,255,.28);color:#fff;transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast); } .hdr__ico svg{width:18px;height:18px} .hdr__ico--fill{background:var(--accent);border-color:var(--accent);color:#fff} .hdr.is-scrolled .hdr__ico,.hdr.is-mega .hdr__ico{border-color:var(--line);color:var(--ink)} .hdr.is-scrolled .hdr__ico--fill,.hdr.is-mega .hdr__ico--fill{background:var(--accent);border-color:var(--accent);color:#fff} /* --- 9. Hero ------------------------------------------------------------- */ /* Der Hero der Startseite traegt seit 14.09.2026 kein Quiz mehr, sondern einen schlanken Schnelleinstieg. Die .hero__*-Klassen darunter gehoeren weiterhin den Unterseiten — nicht anfassen. */ .hero{position:relative;min-height:min(88svh,780px);display:flex;align-items:center;padding:clamp(7rem,6rem + 6vw,9.5rem) 0 clamp(3.5rem,3rem + 3vw,5rem);isolation:isolate} .hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden} .hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%} .hero::before{ content:"";position:absolute;inset:0;z-index:-1; background: linear-gradient(103deg,rgba(11,16,22,.93) 0%,rgba(11,16,22,.82) 34%,rgba(11,16,22,.42) 62%,rgba(11,16,22,.3) 100%), linear-gradient(180deg,rgba(11,16,22,.6) 0%,rgba(11,16,22,0) 26%); } .hero__grid{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:clamp(2rem,1rem + 3vw,4rem);align-items:end} .hero__copy{max-width:40rem;color:#fff} .hero__copy .kicker{color:#fff} .hero__copy .t-label{color:#fff} .hero__copy .t-hero{color:#fff;margin-bottom:1.25rem} .hero__copy p{color:rgba(255,255,255,.78);font-size:clamp(.9375rem,.9rem + .22vw,1.0625rem);line-height:1.62;max-width:30rem} /* Hero-Bullets IMMER untereinander, nie nebeneinander (Florian, 28.08.2026) */ .hero__checks{display:grid;gap:.6rem;margin-top:1.7rem;max-width:30rem} .hero__checks li{ display:grid;grid-template-columns:20px 1fr;gap:.7rem;align-items:start; font-size:.9375rem;font-weight:500;line-height:1.4;color:#fff; } .hero__checks li svg{width:20px;height:20px;color:var(--accent);flex:none;margin-top:.05rem; padding:4px;border-radius:50%;background:rgba(242,101,34,.16);box-sizing:border-box} .hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem} /* Google-Zeile: zwischen Bullets und Buttons (Florian, 29.08.2026) */ .hero__rating{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem .65rem;margin-top:1.5rem; font-size:.9375rem;color:rgba(255,255,255,.82)} .hero__rating > svg{width:20px;height:20px;flex:none} .hero__rating b{color:#fff;font-weight:600} .hero__rating .stars svg{width:16px;height:16px} .stars{display:inline-flex;gap:1.5px;color:#FFB020} .stars svg{width:15px;height:15px} @media (max-width:1080px){ .hero{min-height:auto;padding-top:102px;padding-bottom:clamp(3rem,2rem + 3.5vw,4.5rem);align-items:stretch} .hero__grid{grid-template-columns:1fr;gap:2.25rem} .hero__copy{max-width:100%} .hero__form{margin-inline:auto;max-width:520px;width:100%} } /* Mobil steht der Hero-Inhalt mittig — die Bullets bleiben als Block zentriert, ihr Text aber linksbuendig, sonst franst die Haekchen-Spalte aus. */ @media (max-width:900px){ .hero__copy,.subhero__copy{text-align:center} .hero__copy .kicker,.subhero__copy .kicker{justify-content:center} .hero__copy p,.subhero__copy p{margin-inline:auto} /* Die Liste war das Einzige, was links am Rand klebte, waehrend Kicker, Schlagzeile, Fliesstext und Bewertungszeile darueber mittig stehen. `width:fit-content` half nicht: die laengste Zeile ist breiter als die Spalte, damit war fit-content immer die volle Breite und die Liste stand unveraendert links. Jetzt traegt jede Zeile ihren Haken inline mit und zentriert sich selbst — der Zweispalter mit 20px-Spur kann das nicht, seine 1fr-Spur fuellt die Zeile immer aus. (Florian, 18.09.2026) */ .hero__checks{max-width:none} .hero__checks li{display:block;text-align:center} .hero__checks li svg{display:inline-block;vertical-align:-.28em;margin:0 .45rem 0 0} .hero__rating{justify-content:center} .hero__cta{justify-content:center} .subhero__copy .crumb{justify-content:center} } @media (max-width:520px){ .hero__cta .btn{width:100%} } /* --- 10. Anfrage-Formular (Multi-Step) ----------------------------------- */ .qf{background:#fff;border-radius:var(--r-card);box-shadow:var(--sh-3);padding:1.5rem;position:relative} .qf__badge{ position:absolute;top:-22px;right:-6px;width:94px;height:94px;border-radius:50%; background:var(--accent);color:#fff;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:1px;text-align:center; transform:rotate(-11deg);box-shadow:0 8px 20px rgba(242,101,34,.28);z-index:2; } .qf__badge span{font-size:.5rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.95;line-height:1.25;max-width:64px;text-align:center} .qf__badge b{font-size:1.375rem;font-weight:700;letter-spacing:-.03em;line-height:1} /* Ohne Rand und Flaeche, dafuer fett und eine Spur groesser (Florian, 29.08.2026) */ .qf__promise{ display:inline-flex;align-items:center;gap:.4rem;margin-bottom:.7rem; padding:0;background:none;border-radius:0;color:var(--accent); /* Florian, 18.09.2026: Mono passt hier nicht — die Zeile steht direkt ueber der Formular-Ueberschrift und soll dieselbe Schrift tragen. */ font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:.875rem;font-weight:600;letter-spacing:-.005em; } .qf__promise svg{width:15px;height:15px;flex:none} .qf--dark .qf__promise{background:none;color:#F79A63} .qf__head{margin-bottom:1.15rem;padding-right:5rem} .qf__head h3{font-size:1.1875rem;letter-spacing:-.024em;margin-bottom:.3rem} .qf__head p{font-size:.8125rem;color:var(--muted)} .qf__meter{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.55rem;font-family:'Geist Mono',monospace;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)} .qf__meter b{color:var(--accent);font-weight:500} .qf__bar{height:4px;border-radius:4px;background:var(--line);overflow:hidden;margin:.35rem 0 1.4rem} .qf__bar i{display:block;height:100%;width:25%;background:var(--accent);border-radius:3px;transition:width .45s var(--e-out)} .qf__step{display:none} .qf__step.is-on{display:block;animation:qfIn .32s var(--e-out) both} @keyframes qfIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .qf__q{font-size:.9375rem;font-weight:600;color:var(--ink);margin-bottom:.85rem;letter-spacing:-.014em} /* Auswahl immer einspaltig untereinander (Florian, 28.08.2026) */ .qf__opts{display:grid;grid-template-columns:1fr;gap:.5rem} .qf__opts--1{grid-template-columns:1fr} .qf__opt{ display:flex;align-items:center;gap:.65rem;padding:.8rem .85rem;cursor:pointer; background:var(--bg-alt);border:1px solid var(--line);border-radius:11px; font-size:.875rem;font-weight:500;color:var(--ink-2);line-height:1.3;text-align:left; transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast); } .qf__opt svg{width:19px;height:19px;color:var(--accent);flex:none} .qf__opt:hover{border-color:var(--accent);background:#fff} .qf__opt.is-sel{border-color:var(--accent);background:var(--accent-sf);color:var(--ink)} .qf__fields{display:grid;gap:.6rem} .qf__fields.two{grid-template-columns:1fr 1fr} .qf input[type=text],.qf input[type=tel],.qf input[type=email],.qf input[type=date],.qf textarea,.qf select{ width:100%;padding:.8rem .9rem;background:var(--bg-alt);border:1px solid var(--line); border-radius:10px;font-size:1rem;color:var(--ink);transition:border-color var(--t-fast),background var(--t-fast); } .qf input::placeholder,.qf textarea::placeholder{color:var(--muted-2)} .qf input:focus,.qf textarea:focus,.qf select:focus{outline:none;border-color:var(--accent);background:#fff} .qf__dsgvo{display:grid;grid-template-columns:18px 1fr;gap:.6rem;align-items:start;margin-top:.35rem;font-size:.75rem;line-height:1.45;color:var(--muted)} .qf__dsgvo input{width:18px;height:18px;margin:.15rem 0 0;accent-color:var(--accent);flex:none} .qf__dsgvo a{text-decoration:underline;text-underline-offset:2px} .qf__nav{display:flex;gap:.5rem;margin-top:1.1rem} .qf__back{ padding:.9rem 1.05rem;background:transparent;border:1px solid var(--line);border-radius:var(--r-btn); color:var(--muted);font-size:.875rem;font-weight:600;cursor:pointer;transition:border-color var(--t-fast),color var(--t-fast); } .qf__back:hover{border-color:var(--ink);color:var(--ink)} .qf__google{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:1rem;padding-top:.95rem;border-top:1px solid var(--line-2);font-size:.75rem;color:var(--muted)} .qf__google img,.qf__google svg{width:15px;height:15px} .qf__google b{color:var(--ink);font-weight:600} .qf__done{display:none;text-align:center;padding:1.5rem .5rem} .qf__done.is-on{display:block} .qf__done i{width:56px;height:56px;margin:0 auto 1.1rem;border-radius:50%;background:var(--accent-sf);color:var(--accent);display:grid;place-items:center} .qf__done i svg{width:26px;height:26px} .qf__done h4{font-size:1.1875rem;margin-bottom:.45rem} .qf__done p{font-size:.9375rem;color:var(--muted)} /* Nach dem Absenden: die beiden schnellen Wege, falls es eilt. Bewusst UNTER der Zusage — wer die 30 bis 60 Minuten abwarten will, soll nicht das Gefuehl bekommen, er muesse jetzt noch anrufen. (Florian, 19.09.2026) */ .qf__eilig{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line-2); font-size:.875rem!important;color:var(--muted)} .qf__wege{display:grid;gap:.5rem;margin-top:.8rem} @media (min-width:420px){.qf__wege{grid-template-columns:1fr 1fr}} .qf__wege .btn{width:100%;justify-content:center} .qf--dark .qf__eilig{border-top-color:var(--line-inv);color:#8E99A5} .qf__err{display:none;margin-top:.6rem;font-size:.8125rem;color:#C4341C} .qf__err.is-on{display:block} /* dunkle Instanz (Kontakt-Sektion) */ .qf--dark{background:var(--bg-dark-2);box-shadow:none;border:1px solid var(--line-inv)} .qf--dark .qf__head h3{color:#fff} .qf--dark .qf__head p,.qf--dark .qf__dsgvo,.qf--dark .qf__google{color:#8E99A5} .qf--dark .qf__q{color:#fff} .qf--dark .qf__opt{background:rgba(255,255,255,.04);border-color:var(--line-inv);color:#C8CFD7} .qf--dark .qf__opt:hover{background:rgba(255,255,255,.07);border-color:var(--accent)} .qf--dark .qf__opt.is-sel{background:rgba(242,101,34,.14);border-color:var(--accent);color:#fff} .qf--dark input,.qf--dark textarea,.qf--dark select{background:rgba(255,255,255,.04);border-color:var(--line-inv);color:#fff} .qf--dark input:focus,.qf--dark textarea:focus{background:rgba(255,255,255,.07)} .qf--dark .qf__bar{background:rgba(255,255,255,.12)} .qf--dark .qf__google,.qf--dark .qf__done{border-top-color:var(--line-inv)} .qf--dark .qf__google b,.qf--dark .qf__done h4{color:#fff} .qf--dark .qf__back{border-color:var(--line-inv);color:#8E99A5} /* Der gedrehte Stoerer darf auf schmalen Schirmen nicht ueber die Karte hinausragen */ @media (max-width:620px){.qf__badge{top:-15px;right:8px;width:80px;height:80px} .qf__badge b{font-size:1.0625rem}.qf__badge span{font-size:.4375rem}} @media (max-width:420px){.qf{padding:1.25rem}.qf__opts{grid-template-columns:1fr}.qf__fields.two{grid-template-columns:1fr}} /* --- 11. Trust-Band ------------------------------------------------------ */ .trust{border-bottom:1px solid var(--line);background:#fff} .trust__in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)} .trust__i{background:#fff;padding:clamp(1.5rem,1rem + 1.6vw,2.25rem) clamp(1rem,.5rem + 1.2vw,1.75rem);text-align:center} .trust__i b{display:block;font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);font-weight:600;color:var(--ink);letter-spacing:-.03em;line-height:1.1} .trust__i b em{font-style:normal;color:var(--accent)} .trust__i span{display:block;margin-top:.4rem;font-size:.8125rem;line-height:1.4;color:var(--muted)} @media (max-width:760px){.trust__in{grid-template-columns:1fr 1fr}} /* --- 12. Leistungs-Karten ------------------------------------------------ */ .svc{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,.6rem + 1.2vw,1.5rem)} @media (max-width:1000px){.svc{grid-template-columns:1fr 1fr}} @media (max-width:640px){.svc{grid-template-columns:1fr}} .svc__c{ display:flex;flex-direction:column;background:#fff;border:1px solid var(--line); border-radius:var(--r-card);overflow:hidden;transition:border-color var(--t) var(--e-out), transform var(--t) var(--e-out),box-shadow var(--t) var(--e-out); } .svc__c:hover{border-color:#D8D8D3;transform:translateY(-3px);box-shadow:var(--sh-2)} .svc__img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-alt)} .svc__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--e-out)} .svc__c:hover .svc__img img{transform:scale(1.045)} .svc__no{ position:absolute;top:.85rem;left:.85rem;z-index:2; padding:.28rem .6rem;border-radius:6px;background:rgba(11,16,22,.62);backdrop-filter:blur(6px); font-family:'Geist Mono',monospace;font-size:.625rem;font-weight:500;letter-spacing:.1em;color:#fff; } .svc__b{display:flex;flex-direction:column;flex:1;padding:1.4rem 1.35rem 1.5rem} .svc__b h3{margin-bottom:.55rem} .svc__b>p{font-size:.9375rem;line-height:1.6;color:var(--muted);margin-bottom:1.1rem} .svc__b .checks{margin-bottom:1.35rem} .svc__b .tlink{margin-top:auto} /* --- 13. Vorteile (Bento) ------------------------------------------------ */ .adv{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.85rem,.5rem + 1vw,1.25rem)} .adv__c{ grid-column:span 2;padding:1.6rem 1.5rem;background:#fff;border:1px solid var(--line); border-radius:var(--r-card);transition:border-color var(--t) var(--e-out),transform var(--t) var(--e-out); } .adv__c:hover{border-color:#D8D8D3;transform:translateY(-2px)} .adv__c--w{grid-column:span 3} .adv__c i{width:44px;height:44px;border-radius:12px;background:var(--accent-sf);color:var(--accent);display:grid;place-items:center;margin-bottom:1.1rem} .adv__c i svg{width:21px;height:21px} .adv__c h3{margin-bottom:.5rem} .adv__c p{font-size:.9375rem;line-height:1.6;color:var(--muted)} @media (max-width:960px){.adv{grid-template-columns:1fr 1fr}.adv__c,.adv__c--w{grid-column:span 1}} @media (max-width:560px){.adv{grid-template-columns:1fr}} /* --- 14. Ablauf (Routen-Timeline) ---------------------------------------- */ .flow{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,.5rem + 1.4vw,2rem)} .flow__line{ position:absolute;top:31px;left:12.5%;right:12.5%;height:2px;border-radius:2px;overflow:hidden; background:linear-gradient(90deg,rgba(242,101,34,.16),rgba(242,101,34,.5),rgba(242,101,34,.16)); background-size:220% 100%;animation:routeFlow 5.5s linear infinite; } @keyframes routeFlow{from{background-position:120% 0}to{background-position:-120% 0}} .flow__dot{position:absolute;top:27px;left:12.5%;width:9px;height:9px;border-radius:2px;background:var(--accent);box-shadow:0 0 0 5px rgba(242,101,34,.14);animation:routeTravel 5.5s var(--e-inout) infinite} @keyframes routeTravel{0%{left:12.5%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:87.5%;opacity:0}} .flow__s{position:relative;text-align:center} .flow__s i{ position:relative;z-index:2;width:64px;height:64px;margin:0 auto 1.25rem;border-radius:18px; background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--accent); box-shadow:var(--sh-1); } .sec--alt .flow__s i{background:#fff} .flow__s i svg{width:26px;height:26px} .flow__s i b{ position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:8px;background:var(--ink); color:#fff;font-family:'Geist Mono',monospace;font-size:.6875rem;font-weight:500;display:grid;place-items:center; } .flow__s h3{margin-bottom:.45rem} .flow__s p{font-size:.9375rem;line-height:1.6;color:var(--muted);max-width:19rem;margin-inline:auto} .flow__pill{display:inline-block;margin-top:.85rem;padding:.28rem .7rem;border-radius:var(--r-pill);background:var(--accent-sf);font-family:'Geist Mono',monospace;font-size:.6875rem;letter-spacing:.06em;color:var(--accent-dk)} @media (max-width:860px){ .flow{grid-template-columns:82px 1fr;gap:0 1.1rem;text-align:left} .flow__line{top:32px;bottom:32px;left:40px;right:auto;width:2px;height:auto; background:linear-gradient(180deg,rgba(242,101,34,.16),rgba(242,101,34,.5),rgba(242,101,34,.16)); background-size:100% 220%;animation:routeFlowV 5.5s linear infinite} @keyframes routeFlowV{from{background-position:0 120%}to{background-position:0 -120%}} .flow__dot{display:none} .flow__s{display:contents} .flow__s i{grid-column:1;margin:0 0 2.25rem;width:64px;height:64px} .flow__s>div{grid-column:2;text-align:left;padding-bottom:2.25rem} .flow__s p{margin-inline:0;max-width:none} } /* --- 15. Vergleich ------------------------------------------------------- */ .cmp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,.6rem + 1.2vw,1.5rem);align-items:stretch} @media (max-width:820px){.cmp{grid-template-columns:1fr}} .cmp__c{padding:clamp(1.6rem,1.1rem + 1.6vw,2.25rem);border-radius:var(--r-card);border:1px solid var(--line);background:#fff} .cmp__c--us{background:var(--ink);border-color:var(--ink);color:#B6BEC7;position:relative;overflow:hidden} .cmp__c--us::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent)} .cmp__c--us h3{color:#fff} .cmp__logo{height:38px;width:auto;margin-bottom:1.25rem} .cmp__c--them h3{color:var(--muted);font-weight:500} .cmp__c--them .cmp__lbl{color:var(--muted-2)} .cmp__lbl{font-family:'Geist Mono',monospace;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:1.25rem;display:block} .cmp__list{display:grid;gap:.85rem;margin-top:1.5rem} .cmp__list li{display:grid;grid-template-columns:20px 1fr;gap:.75rem;align-items:start;font-size:.9375rem;line-height:1.55} .cmp__list li::before{content:"";width:20px;height:20px;border-radius:50%;margin-top:.1rem} .cmp__c--us .cmp__list li::before{background:rgba(242,101,34,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F26522' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat} .cmp__c--them .cmp__list li::before{background:#F0F0EE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A0A6AD' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/11px no-repeat} .cmp__c--them .cmp__list li{color:var(--muted)} /* --- 16. Einzugsgebiet / Karte ------------------------------------------- */ .area{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(2rem,1rem + 3vw,4.5rem);align-items:center} /* Ohne Kartenspalte laeuft der Text ueber die ganze Breite; die Haken stehen dann zweispaltig, sonst reissen sie auseinander. */ .area--text{grid-template-columns:1fr} .area--text .t-lead{max-width:52rem} .area--text .checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem 2rem;max-width:58rem} @media (max-width:760px){.area--text .checks{grid-template-columns:1fr}} @media (max-width:900px){.area{grid-template-columns:1fr;gap:2.5rem}} .area__map{position:relative;isolation:isolate} .area__map img,.area__map svg{width:auto;max-width:100%;max-height:min(74vh,660px);height:auto;display:block;margin-inline:auto} .area__pin{fill:var(--accent)} .area__stat{display:flex;gap:clamp(1.5rem,1rem + 2vw,3rem);margin-top:1.9rem;padding-top:1.6rem;border-top:1px solid var(--line)} .sec--dark .area__stat{border-top-color:var(--line-inv)} .area__stat div b{display:block;font-size:1.5rem;font-weight:600;color:var(--ink);letter-spacing:-.03em;line-height:1.15} .sec--dark .area__stat div b{color:#fff} .area__stat div span{font-size:.8125rem;color:var(--muted)} /* --- 17. Bewertungen ----------------------------------------------------- */ .revs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,.6rem + 1.2vw,1.5rem)} @media (max-width:940px){.revs{grid-template-columns:1fr 1fr}} @media (max-width:640px){.revs{grid-template-columns:1fr}} .rev{padding:1.6rem 1.5rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);display:flex;flex-direction:column} .rev .stars{margin-bottom:1rem} .rev p{font-size:.9375rem;line-height:1.68;color:var(--ink-2);margin-bottom:1.4rem} .rev__who{display:flex;align-items:center;gap:.75rem;margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--line-2)} .rev__av{width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.8125rem;font-weight:600;flex:none;line-height:1} .rev__meta b{display:block;font-size:.875rem;font-weight:600;color:var(--ink);line-height:1.3} .rev__meta span{display:block;font-size:.75rem;color:var(--muted);line-height:1.4} /* --- 18. FAQ ------------------------------------------------------------- */ .faq{border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{ display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem; padding:1.35rem 0;cursor:pointer;list-style:none; font-size:clamp(.9375rem,.9rem + .26vw,1.0625rem);font-weight:600;color:var(--ink);letter-spacing:-.015em;line-height:1.4; } .faq summary::-webkit-details-marker{display:none} .faq summary i{ width:26px;height:26px;flex:none;border-radius:8px;border:1px solid var(--line); display:grid;place-items:center;color:var(--accent);margin-top:.1rem;position:relative; transition:transform var(--t) var(--e-out),background var(--t-fast),border-color var(--t-fast); } .faq summary i::before,.faq summary i::after{content:"";position:absolute;background:currentColor;border-radius:2px} .faq summary i::before{width:11px;height:1.6px} .faq summary i::after{width:1.6px;height:11px;transition:transform var(--t) var(--e-out)} .faq details[open] summary i{background:var(--accent);border-color:var(--accent);color:#fff} .faq details[open] summary i::after{transform:scaleY(0)} .faq__a{padding:0 0 1.5rem;max-width:56rem} .faq__a p{font-size:.9375rem;line-height:1.72;color:var(--muted)} .faq__a p + p{margin-top:.85rem} .faq__a a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;font-weight:500} /* --- 19. Ratgeber / Blog ------------------------------------------------- */ /* --- 20. Kontakt-Sektion ------------------------------------------------- */ .cta{position:relative;isolation:isolate;overflow:hidden} .cta__bg{position:absolute;inset:0;z-index:-2} .cta__bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%} .cta::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(96deg,rgba(11,16,22,.96) 0%,rgba(11,16,22,.9) 42%,rgba(11,16,22,.68) 100%)} .cta__grid{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:clamp(2rem,1rem + 3vw,4rem);align-items:center} @media (max-width:1000px){.cta__grid{grid-template-columns:1fr;gap:2.5rem}} .cta .t-lead{color:#A6B0BB} .cta__ways{display:grid;gap:.6rem;margin-top:1.9rem} .cta__way{display:grid;grid-template-columns:44px 1fr;gap:.9rem;align-items:center;padding:.9rem 1.1rem;border:1px solid var(--line-inv);border-radius:14px;background:rgba(255,255,255,.03);transition:background var(--t-fast),border-color var(--t-fast)} .cta__way:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.28)} .cta__way i{width:44px;height:44px;border-radius:12px;background:rgba(242,101,34,.15);color:var(--accent);display:grid;place-items:center} .cta__way i svg{width:19px;height:19px} .cta__way b{display:block;font-size:1rem;font-weight:600;color:#fff;letter-spacing:-.015em} .cta__way span{display:block;font-size:.8125rem;color:#8E99A5} /* --- 21. Footer ---------------------------------------------------------- */ .ft{background:var(--bg-dark);color:#8E99A5;padding-top:clamp(3.5rem,2.5rem + 3vw,5rem)} .ft__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(1.75rem,1rem + 2.4vw,3rem);padding-bottom:clamp(2.5rem,2rem + 2vw,3.5rem)} @media (max-width:900px){.ft__top{grid-template-columns:1fr 1fr}} @media (max-width:560px){.ft__top{grid-template-columns:1fr}} /* Logo steht oben, der Satz darunter — mit klarem Abstand, damit die beiden nicht als ein Block gelesen werden (Florian, 18.09.2026). */ .ft__logo{display:block;height:56px;width:auto;margin-bottom:1.75rem} .ft__brand p{font-size:.9375rem;line-height:1.7;max-width:26rem} .ft h4{font-size:.6875rem;font-family:'Geist Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:1.1rem;font-weight:500} .ft ul{display:grid;gap:.6rem} .ft ul a{font-size:.9375rem;color:#8E99A5;transition:color var(--t-fast)} .ft ul a:hover{color:#fff} .ft__nap{display:grid;gap:.9rem;font-size:.9375rem;line-height:1.6} .ft__nap div{display:grid;grid-template-columns:18px 1fr;gap:.7rem;align-items:start} .ft__nap svg{width:17px;height:17px;color:var(--accent);margin-top:.15rem} .ft__nap a:hover{color:#fff} .ft__nap b{color:#fff;font-weight:600;display:block} .ft__bot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.5rem;border-top:1px solid var(--line-inv);font-size:.8125rem} .ft__bot nav{display:flex;flex-wrap:wrap;gap:0 1.25rem} /* Touch-Ziel 44 px fuer die Rechtslinks (Vorarbeiter Phase D, 06.10.2026) */ .ft__bot nav a{display:inline-flex;align-items:center;min-height:44px} .ft__bot a:hover{color:#fff} .ft__note{display:block;margin-top:.4rem;font-size:.75rem;color:#6C7783;max-width:34rem} /* Einsatzorte-Zeile im Footer (12.10.2026): volle Breite zwischen den Spalten und der Rechtszeile. Waechst mit jeder neuen Stadtseite (Build-Tools/menue_einsatzorte.py), deshalb als Fliesszeile statt als fuenfte Spalte. */ .ft__orte{padding-bottom:clamp(2rem,1.5rem + 1.5vw,2.75rem)} .ft__orte ul{display:flex;flex-wrap:wrap;gap:.7rem 2rem} /* --- 22. Overlays (Modal + Drawer-Backdrop) ------------------------------ */ .ovl{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:1.25rem; background:rgba(8,11,14,.7);backdrop-filter:blur(3px); opacity:0;visibility:hidden;transition:opacity var(--t) var(--e-out),visibility var(--t)} .ovl.is-on{opacity:1;visibility:visible} .ovl__card{width:100%;max-width:600px;max-height:92svh;overflow-y:auto;border-radius:var(--r-card); transform:translateY(18px) scale(.98);transition:transform .3s var(--e-out)} .ovl.is-on .ovl__card{transform:none} .ovl__x{position:absolute;top:1.1rem;right:1.1rem;z-index:3;width:36px;height:36px;border-radius:50%; background:#fff;border:1px solid var(--line);color:var(--ink);display:grid;place-items:center;cursor:pointer; transition:transform var(--t) var(--e-out),background var(--t-fast)} .ovl__x:hover{transform:rotate(90deg);background:var(--bg-alt)} .ovl__x svg{width:15px;height:15px} .ovl__wrap{position:relative;width:100%;max-width:600px} /* --- 23. Floating Kontakt-Button ----------------------------------------- */ /* --- 25. Unterseiten: Sub-Hero, Breadcrumb, Prosa ------------------------ */ .subhero{position:relative;isolation:isolate;padding-top:clamp(6.75rem,4.9rem + 8.3vw,12rem);padding-bottom:clamp(3.5rem,2.5rem + 3vw,5.5rem);overflow:hidden} .subhero__bg{position:absolute;inset:0;z-index:-2} .subhero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 45%} .subhero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(11,16,22,.95) 0%,rgba(11,16,22,.86) 40%,rgba(11,16,22,.5) 100%)} .subhero__grid{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:clamp(2rem,1rem + 3vw,4rem);align-items:end} @media (max-width:1000px){.subhero__grid{grid-template-columns:1fr;gap:2.5rem}.subhero__form{max-width:520px;width:100%;margin-inline:auto}} .subhero__copy{color:#fff;max-width:38rem} .subhero__copy h1,.subhero__copy .subhero__gross{color:#fff;font-size:clamp(1.875rem,1.2rem + 2.7vw,2.875rem);line-height:1.08;letter-spacing:-.032em;margin-bottom:1.1rem} .subhero__copy p{color:rgba(255,255,255,.78);font-size:clamp(.9375rem,.9rem + .22vw,1.0625rem);line-height:1.62;max-width:30rem} .crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1.4rem;font-family:'Geist Mono',monospace;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55)} .crumb a{color:rgba(255,255,255,.72);transition:color var(--t-fast)} .crumb a:hover{color:#fff} .crumb span[aria-current]{color:var(--accent)} .crumb svg{width:11px;height:11px;opacity:.5} .prose{max-width:44rem} .prose h2{margin-top:0;margin-bottom:1rem} .prose h3{margin-top:2.25rem;margin-bottom:.7rem} .prose p{font-size:1.0625rem;line-height:1.75;color:var(--ink-2)} .prose p + p{margin-top:1.1rem} .prose > * + h2{margin-top:3rem} .prose .checks{margin-top:1.3rem} .prose a{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1.5px} .prose a:hover{color:var(--accent)} .lead-answer{ padding:1.35rem 1.5rem;background:var(--accent-sf);border-left:3px solid var(--accent); border-radius:0 12px 12px 0;font-size:1.0625rem;line-height:1.7;color:var(--ink);margin-bottom:1.5rem; } /* Zwei-Spalten Text/Bild */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,1rem + 3.5vw,4.5rem);align-items:center} .split--rev .split__media{order:-1} @media (max-width:900px){.split{grid-template-columns:1fr;gap:2.25rem}.split--rev .split__media{order:0}} .split__media{border-radius:var(--r-media);overflow:hidden;position:relative;background:var(--bg-alt)} .split__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3} /* Preis-/Info-Tabelle */ .tbl{width:100%;border-collapse:collapse;font-size:.9375rem;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden} .tbl th,.tbl td{padding:.95rem 1.1rem;text-align:left;border-bottom:1px solid var(--line-2)} .tbl thead th{background:var(--bg-alt);font-family:'Geist Mono',monospace;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500} .tbl tbody tr:last-child td{border-bottom:none} .tbl td:first-child{font-weight:600;color:var(--ink)} .tbl td em{font-style:normal;color:var(--accent);font-weight:600} .tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} /* Deko: dezenter Punktraster + Glow */ .deco-dots{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5; background-image:radial-gradient(rgba(17,24,32,.09) 1px,transparent 1px);background-size:22px 22px; mask-image:radial-gradient(ellipse 70% 55% at 50% 0%,#000 20%,transparent 72%)} .sec--dark .deco-dots{background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px)} .sec > .wrap,.sec > .wrap-n{position:relative;z-index:1} .skip{position:absolute;left:-9999px;top:0;z-index:300;padding:.8rem 1.2rem;background:var(--ink);color:#fff;border-radius:0 0 8px 0} .skip:focus{left:0} /* --- 26. Cookie-Banner (RGN Consent v2 · .kekse) ------------------------- */ .kekse{ position:fixed;inset:0;z-index:230;display:grid;place-items:center;padding:clamp(1rem,2vw,1.75rem); background:rgba(8,11,14,.55);backdrop-filter:blur(3px); opacity:0;visibility:hidden;transition:opacity .35s var(--e-out),visibility .35s; } .kekse.zeig{opacity:1;visibility:visible} body.kekse-offen{overflow:hidden} .kekse__karte{ width:min(100%,560px);background:#fff;border:1px solid var(--line);border-radius:var(--r-card); box-shadow:var(--sh-3);padding:clamp(1.4rem,1.1rem + 1vw,1.9rem); transform:translateY(22px);transition:transform .38s var(--e-out); } .kekse.zeig .kekse__karte{transform:none} .kekse__logo{height:42px;width:auto;margin:0 auto 1.1rem;display:block} .kekse__karte h2{font-size:1.125rem;letter-spacing:-.022em;margin-bottom:.55rem;text-align:center} .kekse__karte p{font-size:.8125rem;line-height:1.65;color:var(--muted)} .kekse__panel{margin-top:1.15rem;border:1px solid var(--line);border-radius:12px;overflow:hidden} .kekse__zeile{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1rem;border-bottom:1px solid var(--line-2)} .kekse__zeile b{display:block;font-size:.875rem;font-weight:600;color:var(--ink)} .kekse__zeile span{display:block;font-size:.75rem;color:var(--muted)} .kekse__fest{font-family:'Geist Mono',monospace;font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);white-space:nowrap} .schalter{display:flex;align-items:center;gap:.55rem;cursor:pointer;flex:none} .schalter input{position:absolute;opacity:0;width:0;height:0} .schalter__bahn{width:40px;height:22px;border-radius:var(--r-pill);background:var(--line);display:block;padding:3px;transition:background var(--t) var(--e-out)} .schalter__punkt{display:block;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:var(--sh-1);transition:transform var(--t) var(--e-spring)} .schalter input:checked + .schalter__bahn{background:var(--accent)} .schalter input:checked + .schalter__bahn .schalter__punkt{transform:translateX(18px)} .schalter input:focus-visible + .schalter__bahn{outline:2px solid var(--accent);outline-offset:2px} .schalter__text{font-family:'Geist Mono',monospace;font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);width:1.6rem} .kekse__knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:1.2rem} .kekse__knoepfe .kekse__knopf--mehr{grid-column:1 / -1} .kekse__knopf{ min-width:0;padding:.82rem 1.1rem;border-radius:var(--r-btn);text-align:center; font-size:.875rem;font-weight:600;letter-spacing:-.01em;cursor:pointer;border:1px solid transparent; transition:background var(--t) var(--e-out),border-color var(--t) var(--e-out),color var(--t) var(--e-out); } .kekse__knopf--ja{background:var(--accent);color:#fff} .kekse__knopf--ja:hover{background:var(--accent-dk)} .kekse__knopf--nein{background:transparent;color:var(--ink);border-color:var(--line)} .kekse__knopf--nein:hover{border-color:var(--ink);background:var(--bg-alt)} .kekse__knopf--mehr{background:transparent;color:var(--muted);border-color:var(--line)} .kekse__knopf--mehr:hover{color:var(--ink);border-color:var(--ink)} .kekse__panel .kekse__knopf{width:100%;margin:0;border-radius:0;border:none;border-top:1px solid var(--line-2);background:var(--bg-alt)} .kekse__panel .kekse__knopf:hover{background:#EFEFEC} .kekse__links{margin-top:1rem;text-align:center;font-size:.75rem;color:var(--muted-2)} .kekse__links a{color:var(--muted);text-decoration:underline;text-underline-offset:2px} .kekse__links a:hover{color:var(--ink)} @media (max-width:430px){.kekse__knoepfe{grid-template-columns:1fr}} /* --- 27. Bento-Vorteils-Kacheln (RGN-Baustein, WISO-Muster) -------------- */ .bento{ --b-r:14px; --b-gap:12px; display:grid;gap:var(--b-gap); grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-rows:420px 396px; } .tile{ position:relative;overflow:hidden;border-radius:var(--b-r);isolation:isolate; display:flex;flex-direction:column;color:#fff; transition:transform var(--t) var(--e-out); } a.tile:hover{transform:translateY(-3px)} .tile--tall {grid-column:1 / 3;grid-row:1 / 3} .tile--r1a {grid-column:3 / 5;grid-row:1} .tile--r1b {grid-column:5 / 7;grid-row:1} .tile--r2a {grid-column:3 / 5;grid-row:2} .tile--r2b {grid-column:5 / 7;grid-row:2} .tile--dark {background:linear-gradient(158deg,#1E2A38 0%,#0C1319 100%)} .tile--accent{background:var(--accent);color:#fff} .tile--accent .tile__p{color:rgba(255,255,255,.9)} .tile--accent .tile__c{gap:.55rem} .tile--photo{background:#0C1319} .tile--photo::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--tile-img) center/cover no-repeat;transition:transform .8s var(--e-out)} a.tile--photo:hover::before{transform:scale(1.04)} .tile--photo::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(10,14,19,.34) 0%,rgba(10,14,19,.18) 38%,rgba(10,14,19,.86) 100%)} .tile__c{padding:clamp(1.5rem,1.1rem + 1.3vw,2.25rem);display:flex;flex-direction:column;gap:.7rem; position:relative;z-index:2;margin-top:auto} .tile--photo .tile__c{padding-top:0} .tile--tall .tile__c{margin-top:0} .tile__h{font-size:clamp(1.1875rem,1.05rem + .6vw,1.625rem);line-height:1.2;letter-spacing:-.026em;font-weight:600;color:#fff;margin:0} .tile--accent .tile__h{color:#fff} .tile__p{font-size:.9375rem;line-height:1.55;margin:0;max-width:32ch;color:rgba(255,255,255,.8)} .tile__big{ font-family:'Geist Mono',ui-monospace,monospace;font-size:clamp(2.25rem,1.6rem + 2.6vw,3.5rem); line-height:1;font-weight:500;letter-spacing:-.04em;color:#fff;margin:0 0 -.2rem; } .tile__big em{font-style:normal;font-size:.42em;letter-spacing:.02em;opacity:.7;margin-left:.25rem} .tile--accent .tile__big{color:#fff} .chip{ display:inline-flex;align-items:center;gap:.45rem;width:max-content; padding:.4rem .8rem;border-radius:var(--r-pill); font-size:.75rem;font-weight:500;letter-spacing:-.005em;line-height:1.3; background:rgba(255,255,255,.13);backdrop-filter:blur(18px);color:#fff; border:1px solid rgba(255,255,255,.14); } .chip svg{width:13px;height:13px;flex:none} .tile--accent .chip{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.28)} /* Freisteller waechst unten aus der Kachel */ .tile__media{margin-top:auto;position:relative;display:flex;justify-content:center;align-items:flex-end;padding-inline:1rem} .tile__media img{display:block;width:min(100%,430px);height:auto;margin-bottom:-7%; filter:drop-shadow(0 24px 34px rgba(0,0,0,.42))} /* Hohe Kachel: der Kartonstapel nimmt den ganzen Platz unter dem Text ein. flex:1 auf dem Medienbereich, das Bild fuellt ihn mit object-fit. */ /* Stapel nach links, damit der Nachtrags-Stoerer oben rechts freie Flaeche hat */ .tile__media--voll{flex:1;min-height:0;padding:0 .2rem 0 0;align-items:flex-end;justify-content:flex-start} /* ist ein Inline-Kasten ohne eigene Hoehe — dazwischen reisst die Kette fuer height:100% ab und das Bild faellt auf 394x900 zurueck. display:contents blendet die Huelle aus, das bleibt Flex-Kind. */ .tile__media--voll picture{display:contents} /* max-width:none war der Fehler: laesst sich height:100% nicht aufloesen (Flex-Eltern ohne feste Hoehe), faellt das Bild auf seine Dateigroesse zurueck — 394x900 px. Auf dem Handy fuellte der Kartonstapel dadurch den halben Bildschirm. Gemessen am 17.09.2026. */ .tile__media--voll .tile__kartons{ width:auto;max-width:100%;height:100%;max-height:100%; object-fit:contain;object-position:bottom left;margin-bottom:-2%; } .tile--tall .tile__badge{top:4%;right:5%} @media (max-width:1000px){.tile__media--voll .tile__kartons{height:100%;max-height:230px}} /* Auf dem Handy ist die Kachel breit und flach — der hochkante Stapel steht dort links in der Ecke und der Nachtrags-Stoerer daneben, beide zu klein. Deshalb mobil: Stoerer weg, Stapel mittig und groesser. */ @media (max-width:620px){ /* Mobil laedt einen querformatigen Stapel — der hochkante sass als schmale Saeule in einer breiten, flachen Kachel. Der Nachtrags- Stoerer faellt weg, sonst teilen sich zwei Elemente 350 px Breite. */ .tile--tall .tile__badge{display:none} .tile__media--voll{justify-content:center;padding:0} .tile__media--voll .tile__kartons{ width:100%;max-width:100%;height:auto;max-height:none; object-fit:contain;object-position:bottom center;margin-bottom:0} } /* Kopfbereich der Text-Kacheln: nimmt den freien Platz ueber dem Inhalt auf */ /* Wenig Seitenluft: die Grafik soll die Kachel wirklich fuellen */ .tile__top{flex:1;min-height:0;display:flex;align-items:center;justify-content:center; padding:clamp(1.3rem,1rem + 1vw,1.8rem) .85rem 0;position:relative;z-index:2} .tile__top svg{display:block;width:100%;height:auto;max-height:100%} .tile__badge{ position:absolute;top:6%;right:6%;padding:.55rem .85rem;border-radius:11px; background:rgba(255,255,255,.14);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.18); font-size:.9375rem;font-weight:600;color:#fff;white-space:nowrap; } .tile__badge span{display:block;font-size:.625rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;opacity:.75} @media (max-width:1000px){ .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none} .tile--tall{grid-column:1 / 3;grid-row:auto;min-height:430px} .tile--r1a,.tile--r1b,.tile--r2a,.tile--r2b{grid-column:auto;grid-row:auto;min-height:330px} } @media (max-width:620px){ .bento{grid-template-columns:1fr;gap:6px} .tile--tall{grid-column:1;min-height:auto} .tile--r1a,.tile--r1b,.tile--r2a,.tile--r2b{min-height:250px} } /* --- 28. Ablauf: Route mit gezeichneter Linie ---------------------------- */ .route{position:relative;padding-top:1rem} .route__svg{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible;pointer-events:none} .route__line{fill:none;stroke:var(--line);stroke-width:2;stroke-linecap:round} .route__draw{ fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round; stroke-dasharray:1;stroke-dashoffset:1; } .route.is-in .route__draw{transition:stroke-dashoffset 2.4s var(--e-inout);stroke-dashoffset:0} .route__grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.9rem,.4rem + 1.4vw,1.6rem)} .rs{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:1.5rem 1.4rem 1.4rem;transition:border-color var(--t),transform var(--t) var(--e-out),box-shadow var(--t)} .rs:hover{border-color:#D8D8D3;transform:translateY(-3px);box-shadow:var(--sh-2)} .rs:nth-child(2){margin-top:74px} .rs:nth-child(3){margin-top:18px} .rs:nth-child(4){margin-top:92px} .rs__top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.1rem} .rs__ico{width:46px;height:46px;border-radius:13px;background:var(--accent-sf);color:var(--accent);display:grid;place-items:center;flex:none} .rs__ico svg{width:21px;height:21px} .rs__no{ font-family:'Geist Mono',ui-monospace,monospace;font-size:2.75rem;line-height:1;font-weight:500; letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.4px #DCDCD7;user-select:none; transition:-webkit-text-stroke-color var(--t); } .rs:hover .rs__no{-webkit-text-stroke-color:var(--accent)} .rs h3{margin-bottom:.45rem} .rs p{font-size:.9375rem;line-height:1.6;color:var(--muted)} .rs__pill{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;padding:.32rem .75rem;border-radius:var(--r-pill);background:var(--accent-sf);font-family:'Geist Mono',monospace;font-size:.6875rem;letter-spacing:.05em;color:var(--accent-dk)} .route__dot{fill:var(--accent)} .route__halo{fill:var(--accent);opacity:.22} @media (max-width:900px){ .route__svg{display:none} .route__grid{grid-template-columns:56px 1fr;gap:0 1rem} .rs{display:contents} .rs__top{grid-column:1;flex-direction:column;margin:0 0 2rem;position:relative} .rs__body{grid-column:2;padding-bottom:2rem;position:relative} .rs:nth-child(n){margin-top:0} } /* --- 29. Mega-Menü ------------------------------------------------------ */ .mega{ position:absolute;left:0;right:0;top:100%;z-index:5; opacity:0;visibility:hidden;transform:translateY(-10px); transition:opacity .26s var(--e-out),transform .32s var(--e-out),visibility .26s; } .hdr__drop:hover .mega,.hdr__drop:focus-within .mega{opacity:1;visibility:visible;transform:none} .hdr__drop:hover .hdr__link svg{transform:rotate(180deg)} .mega__card{ width:100%;margin:0;border-radius:0; background:#fff;border:0;border-bottom:1px solid var(--line); box-shadow:0 18px 40px rgba(17,24,32,.10); padding-block:2rem; padding-inline:max(var(--gut),calc(50vw - var(--wrap)/2)); display:grid;grid-template-columns:1fr 1fr .82fr;gap:clamp(1.5rem,1rem + 2vw,3rem); } .mega__col > b{ display:block;margin-bottom:.9rem;padding-left:.7rem; font-family:'Geist Mono',ui-monospace,monospace;font-size:.6875rem;font-weight:500; letter-spacing:.14em;text-transform:uppercase;color:var(--accent); } .mega__i{ display:grid;grid-template-columns:38px 1fr;gap:.85rem;align-items:start; padding:.65rem .7rem;border-radius:12px;transition:background var(--t-fast); } .mega__i:hover{background:var(--bg-alt)} .mega__i i{width:38px;height:38px;border-radius:11px;background:var(--accent-sf);color:var(--accent);display:grid;place-items:center;transition:background var(--t-fast),color var(--t-fast)} .mega__i:hover i{background:var(--accent);color:#fff} .mega__i i svg{width:18px;height:18px} .mega__i b{display:block;font-size:.9375rem;font-weight:600;color:var(--ink);letter-spacing:-.014em;line-height:1.3} .mega__i span{display:block;margin-top:.1rem;font-size:.8125rem;line-height:1.45;color:var(--muted)} .mega__promo{ position:relative;overflow:hidden;border-radius:14px;isolation:isolate; background:linear-gradient(158deg,#1E2A38 0%,#0C1319 100%); padding:1.5rem;display:flex;flex-direction:column;gap:.6rem;color:#fff; } .mega__promo::after{ content:"";position:absolute;right:-28%;bottom:-42%;width:88%;aspect-ratio:1;border-radius:50%; background:radial-gradient(circle,rgba(242,101,34,.4) 0%,transparent 68%);z-index:-1; } .mega__promo .chip{margin-bottom:.2rem} .mega__promo b{font-size:1.0625rem;font-weight:600;letter-spacing:-.02em;line-height:1.3} .mega__promo p{font-size:.8125rem;line-height:1.55;color:rgba(255,255,255,.72)} .mega__promo .btn{margin-top:auto;background:#fff;color:var(--ink)} .mega__promo .btn:hover{background:var(--accent);color:#fff} .mega__promo img{position:absolute;right:-14%;bottom:-10%;width:74%;z-index:-2;opacity:.55; filter:drop-shadow(0 18px 26px rgba(0,0,0,.45))} .mega__promo::before{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(100deg,rgba(12,19,25,.94) 0%,rgba(12,19,25,.7) 58%,rgba(12,19,25,.35) 100%)} @media (max-width:1180px){.mega__card{grid-template-columns:1fr 1fr}.mega__promo{grid-column:1 / -1;flex-direction:row;align-items:center;gap:1.25rem}.mega__promo .btn{margin:0 0 0 auto}.mega__promo img{display:none}} /* --- 30. Google-Bewertungen (Trust + Laufband) -------------------------- */ .gr__head{ display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1.25rem,.6rem + 2vw,2.75rem); padding:clamp(1.25rem,1rem + 1vw,1.75rem) clamp(1.4rem,1rem + 1.4vw,2rem); background:#fff;border:1px solid var(--line);border-radius:var(--r-card); margin-bottom:clamp(1.5rem,1rem + 1.6vw,2.25rem); } .gr__score{display:flex;align-items:center;gap:1rem;flex:none} .gr__g{width:44px;height:44px;flex:none} .gr__num{font-size:2.125rem;font-weight:600;color:var(--ink);letter-spacing:-.04em;line-height:1} .gr__score .stars svg{width:17px;height:17px} .gr__meta{font-size:.8125rem;color:var(--muted);margin-top:.25rem} .gr__meta b{color:var(--ink);font-weight:600} .gr__sep{width:1px;align-self:stretch;background:var(--line);flex:none} .gr__facts{display:flex;flex-wrap:wrap;gap:clamp(1rem,.5rem + 1.6vw,2.25rem)} .gr__fact b{display:block;font-size:1.25rem;font-weight:600;color:var(--ink);letter-spacing:-.03em;line-height:1.15} .gr__fact span{font-size:.75rem;color:var(--muted)} .gr__cta{margin-left:auto} .gr__mask{ position:relative;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); } .gr__track{display:flex;gap:1rem;width:max-content;animation:grRoll 72s linear infinite} .gr__mask:hover .gr__track,.gr__track:focus-within{animation-play-state:paused} @keyframes grRoll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){ .gr__track{animation:none} .gr__mask{overflow-x:auto;-webkit-mask-image:none;mask-image:none;scroll-snap-type:x mandatory} .gr__c{scroll-snap-align:start} } .gr__c{ width:clamp(280px,78vw,352px);flex:none;background:#fff;border:1px solid var(--line); border-radius:var(--r-card);padding:1.35rem 1.4rem;display:flex;flex-direction:column;position:relative; } .gr__c > svg.gr__mark{position:absolute;top:1.3rem;right:1.3rem;width:18px;height:18px;opacity:.85} .gr__who{display:flex;align-items:center;gap:.7rem;margin-bottom:.85rem} .gr__av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-size:.875rem;font-weight:600;color:#fff;flex:none;line-height:1} /* eigene Klasse statt .gr__who span — sonst trifft die Regel auch den Avatar */ .gr__meta2 b{display:block;font-size:.875rem;font-weight:600;color:var(--ink);line-height:1.3} .gr__meta2 span{display:block;font-size:.75rem;color:var(--muted-2);line-height:1.4} .gr__c .stars{margin-bottom:.6rem} .gr__c .stars svg{width:14px;height:14px} .gr__c p{font-size:.9375rem;line-height:1.62;color:var(--ink-2)} .gr__tag{margin-top:auto;padding-top:.9rem;font-size:.75rem;color:var(--muted-2)} @media (max-width:760px){ .gr__sep{display:none} .gr__head{gap:1.1rem} .gr__score{flex:1 1 100%} .gr__facts{flex:1 1 100%;gap:1rem 1.5rem} .gr__cta{margin-left:0;flex:1 1 100%} .gr__cta .btn{width:100%} .gr__num{font-size:1.75rem} .gr__score .stars svg{width:15px;height:15px} } /* ======================================================================== 31. EIGENE FORMSPRACHE — „Frachtbrief" Ziel: kein Baukasten-Look. Volle Haarlinien mit Labels darauf, übergroße Mono-Ziffern als Struktur, Knoten statt Icon-Kacheln. ======================================================================== */ /* --- Editorialer Sektionskopf: Regel mit Label, dann Headline | Lead ----- */ .shead{margin-bottom:clamp(2.25rem,1.5rem + 2.4vw,3.5rem)} .shead__rule{display:block;margin-bottom:.9rem} .shead--c{text-align:center} .shead--c .shead__row{grid-template-columns:1fr;justify-items:center; /* einspaltig wird aus dem Spaltenabstand ein Zeilenabstand — 4 rem reissen zwischen Ueberschrift und Vorspann ein Loch */ gap:clamp(.9rem,.7rem + .6vw,1.25rem)} .shead--c .t-lead{max-width:40rem} .shead__ix{display:none} .shead__row{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);gap:clamp(1.5rem,1rem + 2.6vw,4rem);align-items:end} .shead__row .t-lead{margin:0 0 .25rem} @media (max-width:840px){ .shead__row{grid-template-columns:1fr;gap:1.1rem;align-items:start} } /* --- Ablauf als Frachtbrief-Strecke ------------------------------------- */ .mani{position:relative;padding-top:clamp(1rem,.5rem + 1vw,2rem)} .mani__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,.4rem + 1.6vw,2.25rem)} .mani__rail{ position:absolute;left:var(--rail-x0,27px);right:var(--rail-x1,27px);top:var(--rail-y,86px);height:2px;border-radius:2px;z-index:0; background:linear-gradient(90deg,rgba(242,101,34,.14) 0%,rgba(242,101,34,.62) 50%,rgba(242,101,34,.14) 100%); background-size:230% 100%;animation:maniFlow 6s linear infinite; } @keyframes maniFlow{from{background-position:130% 0}to{background-position:-130% 0}} .mani__pulse{ position:absolute;top:var(--rail-y,86px);left:var(--rail-x0,27px);width:9px;height:9px;margin:-4.5px 0 0 -4.5px; border-radius:50%;background:var(--accent);z-index:2; box-shadow:0 0 0 6px rgba(242,101,34,.15),0 0 14px rgba(242,101,34,.55); animation:maniRun 7s var(--e-inout) infinite; } @keyframes maniRun{0%{transform:translateX(0);opacity:0}7%{opacity:1}93%{opacity:1}100%{transform:translateX(var(--rail-w,100%));opacity:0}} @media (prefers-reduced-motion:reduce){.mani__pulse{display:none}.mani__rail{animation:none}} .ms{position:relative;z-index:1;display:flex;flex-direction:column;padding-right:clamp(.5rem,1.5vw,1.75rem)} .ms__no{ font-family:'Geist Mono',ui-monospace,monospace; font-size:clamp(2.5rem,1.5rem + 3.2vw,4.25rem);line-height:.9;font-weight:500;letter-spacing:-.06em; color:transparent;-webkit-text-stroke:1.5px #DEDED9;user-select:none;margin-bottom:.85rem; transition:-webkit-text-stroke-color .35s var(--e-out),color .35s var(--e-out); } .ms__node{ width:54px;height:54px;border-radius:50%;background:#fff;border:1px solid var(--line); display:grid;place-items:center;color:var(--ink);margin-bottom:1.4rem; transition:border-color .35s var(--e-out),color .35s var(--e-out),transform .35s var(--e-spring); } .sec--alt .ms__node{background:var(--bg-alt)} .ms__node svg{width:22px;height:22px} .ms:hover .ms__node{border-color:var(--accent);color:var(--accent);transform:scale(1.06)} .ms:hover .ms__no{-webkit-text-stroke-color:var(--accent)} .ms h3{margin-bottom:.5rem} .ms p{font-size:.9375rem;line-height:1.6;color:var(--muted)} .ms__meta{ display:block;margin-top:1rem;font-family:'Geist Mono',ui-monospace,monospace;font-size:.6875rem; letter-spacing:.06em;color:var(--accent-dk); padding-top:.7rem;border-top:1px solid var(--line); } @media (max-width:900px){ .mani__rail,.mani__pulse{display:none} .mani__grid{grid-template-columns:56px 1fr;gap:0 1.1rem} .ms{display:contents} .ms__no{grid-column:1;font-size:1.75rem;margin:0 0 .35rem;text-align:center} .ms__node{grid-column:1;width:48px;height:48px;margin:0 0 2.25rem;position:relative} .ms__node::after{content:"";position:absolute;top:calc(100% + 6px);left:50%;width:2px;height:calc(2.25rem - 6px); transform:translateX(-50%);border-radius:2px; background:linear-gradient(180deg,rgba(242,101,34,.16),rgba(242,101,34,.6),rgba(242,101,34,.16)); background-size:100% 230%;animation:maniFlowV 6s linear infinite} @keyframes maniFlowV{from{background-position:0 130%}to{background-position:0 -130%}} .ms__body{grid-column:2;padding-bottom:2.25rem} .ms:last-child .ms__node::after{display:none} } /* --- 32. Illustriertes Quiz-Formular (Seyfarth-Standard) ---------------- */ .qf__qrow{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem} .qf__chip{ width:30px;height:30px;flex:none;padding:0;border-radius:50%;border:1px solid var(--line); background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer; transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast); } .qf__chip:hover{border-color:var(--ink);color:var(--ink);background:var(--bg-alt)} .qf__chip svg{width:14px;height:14px;transform:rotate(180deg)} .qf--dark .qf__chip{border-color:var(--line-inv);color:#8E99A5} .qf__qrow .qf__q{margin:0} /* PC: 3 in einer Reihe, 2 Reihen. Mobil bleibt es zweispaltig. */ .qf__opts--cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem} /* Vier Karten gehoeren in EINE Reihe, nicht als 3 + 1. Sechs Karten (die Leistungsauswahl) bleiben bei drei Spalten und stehen sauber als 3 x 2. Gilt nur im Overlay — die Formulare in der Seite sind rund 520 px breit, dort waeren vier Spalten zu schmal. */ /* Grundregel fuer VIER Karten: 2 x 2. Das Dreier-Raster darueber liesse sonst drei oben und eine allein darunter stehen — das sieht aus wie ein Fehler und ist auch einer. (Florian, 19.09.2026) */ .qf__opts--cards:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))} /* Im breiten Overlay passen alle vier nebeneinander. */ @media (min-width:900px){ .ovl__card .qf__opts--cards:has(> :nth-child(4):last-child){ grid-template-columns:repeat(4,minmax(0,1fr))} } .qf__opt--card{ flex-direction:column;align-items:stretch;gap:.45rem; padding:.7rem .5rem .6rem;text-align:center;position:relative; background:#fff;border:1px solid var(--line);border-radius:13px; } .qf--dark .qf__opt--card{background:rgba(255,255,255,.04)} /* Eigene Motive in der Handschrift „Versatz": zweite Kontur in Orange leicht daneben, wie ein Druckversatz. Farben laufen ueber Variablen — spannt einen Shadow-Tree auf, in den Klassen nicht reichen. */ .qf__opt--card .ill{ width:52px;height:52px;margin-inline:auto;display:block;overflow:visible; --hf-f:none;--hf-s:var(--ink);--ak-f:none;--ak-s:var(--ink);--ln-s:var(--ink);--sw:1.6} .qf__opt--card .ill__v{ --hf-s:var(--accent);--ak-s:var(--accent);--ln-s:var(--accent); opacity:.5;transform:translate(2.3px,2.3px); transition:opacity var(--t),transform var(--t) var(--e-out)} .qf__opt--card:hover .ill__v{opacity:.85;transform:translate(3.1px,3.1px)} .qf__opt--card.is-sel .ill{--hf-s:var(--accent-dk);--ak-s:var(--accent-dk);--ln-s:var(--accent-dk)} .qf__opt--card.is-sel .ill__v{opacity:.9} /* Dunkle Instanz: die Hauptkontur steht auf --ink, also fast Schwarz auf fast Schwarz — auf dem dunklen Kasten war von der Zeichnung nichts zu sehen ausser dem orangenen Versatz. Hier traegt Weiss die Kontur. Gilt auch fuer die gewaehlte Karte: --accent-dk waere dort genauso dunkel wie --ink. (Florian, 18.09.2026) */ .qf--dark .qf__opt--card .ill, .qf--dark .qf__opt--card.is-sel .ill{--hf-s:#fff;--ak-s:#fff;--ln-s:#fff} .qf__opt--card span{font-size:.8125rem;font-weight:600;color:var(--ink);letter-spacing:-.016em;line-height:1.22;hyphens:none} .qf--dark .qf__opt--card span{color:#fff} .qf__opt--card small{display:block;font-size:.625rem;font-weight:400;color:var(--muted);line-height:1.3;margin-top:.12rem} .qf__opt--card::after{ content:"";position:absolute;top:.4rem;right:.4rem;width:18px;height:18px;border-radius:50%; background:var(--accent) 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%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat; opacity:0;transform:scale(.6);transition:opacity var(--t-fast),transform var(--t) var(--e-spring); } .qf__opt--card.is-sel::after{opacity:1;transform:none} .qf__opt--card.is-sel{border-color:var(--accent);background:var(--accent-sf)} .qf--dark .qf__opt--card.is-sel{background:rgba(242,101,34,.14)} .qf__opt--card:hover{border-color:var(--accent)} /* Illustration faerbt sich mit */ /* Schieberegler */ .qf__slide{padding:.35rem .15rem 0} .qf__bubble{ display:flex;align-items:baseline;justify-content:center;gap:.4rem;margin-bottom:.9rem; font-family:'Geist Mono',ui-monospace,monospace; } .qf__bubble b{font-size:2.5rem;line-height:1;font-weight:500;letter-spacing:-.05em;color:var(--ink)} .qf--dark .qf__bubble b{color:#fff} .qf__bubble span{font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} /* Schiene UND Fuellstand sind echte Elemente, keine Pseudo-Elemente. Zwei Gruende, beide gemessen: Ein Farbverlauf direkt auf dem input verschwindet in Safari waehrend des Ziehens — und ein ::before unter einem nativen range-Input zeichnet Safari beim Ziehen nicht neu, die Linie war weg bis zum Loslassen (Florian, 18.09.2026). Beide sitzen ueber top/transform in der Mitte, nicht ueber die Flex-Ausrichtung: bei absolut positionierten Kindern eines Flex- Containers ist die statische Position Browsersache. */ .qf__track{position:relative;height:26px;display:flex;align-items:center} .qf__rail,.qf__fill{position:absolute;left:0;height:6px;border-radius:6px; top:50%;transform:translateY(-50%);pointer-events:none} .qf__rail{right:0;background:var(--line)} .qf--dark .qf__rail{background:rgba(255,255,255,.14)} /* endet exakt unter der Mitte des Griffs, nicht am Prozentwert */ .qf__fill{background:var(--accent);width:calc(13px + (100% - 26px) * var(--f,.4))} .qf__range{ position:relative;z-index:1; -webkit-appearance:none;appearance:none;width:100%;height:26px;margin:0; background:transparent;outline:none;cursor:pointer; } .qf__range::-webkit-slider-runnable-track{height:26px;background:transparent;border:0} .qf__range::-moz-range-track{height:26px;background:transparent;border:0} .qf__range::-webkit-slider-thumb{ -webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff; border:2px solid var(--accent);box-shadow:0 2px 8px rgba(17,24,32,.16);cursor:grab; transition:transform var(--t-fast); } .qf__range::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.12)} .qf__range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--accent);cursor:grab} .qf__scale{display:flex;justify-content:space-between;margin-top:.55rem;font-family:'Geist Mono',monospace;font-size:.6875rem;color:var(--muted-2)} .qf__trust{ display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem 1.1rem; margin-top:1rem;padding-top:.95rem;border-top:1px solid var(--line-2); } .qf--dark .qf__trust{border-top-color:var(--line-inv)} .qf__trust span{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;color:var(--muted)} .qf__trust svg{width:13px;height:13px;color:var(--accent)} @media (max-width:620px){.qf__opts--cards{grid-template-columns:1fr 1fr;gap:.5rem} .qf__opt--card{padding:.85rem .7rem .7rem} .qf__opt--card .ill{width:54px;height:54px} .qf__opt--card span{font-size:.875rem}} /* --- 33. Umzugsrechner -------------------------------------------------- */ .calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(1rem,.5rem + 1.4vw,1.75rem);align-items:stretch} @media (max-width:940px){.calc{grid-template-columns:1fr}} .calc__in{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(1.4rem,1.1rem + 1.1vw,2rem)} .calc__f + .calc__f{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--line-2)} .calc__lab{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.75rem} .calc__lab b{font-size:.9375rem;font-weight:600;color:var(--ink);letter-spacing:-.014em} .calc__lab span{font-family:'Geist Mono',ui-monospace,monospace;font-size:.6875rem;letter-spacing:.06em;color:var(--muted-2)} .seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;background:var(--bg-alt);border:1px solid var(--line);border-radius:11px} .seg button{ padding:.62rem .4rem;border:none;border-radius:8px;background:transparent;cursor:pointer; font-size:.8125rem;font-weight:600;color:var(--muted);letter-spacing:-.008em;line-height:1.25; transition:background var(--t-fast),color var(--t-fast),box-shadow var(--t-fast); } .seg button:hover{color:var(--ink)} .seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:var(--sh-1)} .seg button[aria-pressed="true"]::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-right:.4rem;vertical-align:middle} @media (max-width:520px){.seg{grid-auto-flow:row;grid-auto-columns:auto}} .opts{display:flex;flex-wrap:wrap;gap:.45rem} .opts button{ display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .9rem;cursor:pointer; border:1px solid var(--line);border-radius:var(--r-pill);background:#fff; font-size:.8125rem;font-weight:500;color:var(--ink-2); transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast); } .opts button svg{width:13px;height:13px;color:var(--muted-2);transition:color var(--t-fast),transform var(--t) var(--e-spring)} .opts button:hover{border-color:var(--ink)} .opts button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-sf);color:var(--ink)} .opts button[aria-pressed="true"] svg{color:var(--accent);transform:rotate(45deg)} .calc__out{ position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-card); background:linear-gradient(158deg,#1E2A38 0%,#0C1319 100%);color:#fff; padding:clamp(1.5rem,1.1rem + 1.3vw,2.1rem);display:flex;flex-direction:column; } .calc__out::after{content:"";position:absolute;right:-30%;top:-30%;width:80%;aspect-ratio:1;border-radius:50%; background:radial-gradient(circle,rgba(242,101,34,.34) 0%,transparent 68%);z-index:-1} .calc__out .t-label{color:#F79A63} .calc__price{ font-family:'Geist Mono',ui-monospace,monospace;font-weight:500;letter-spacing:-.045em;line-height:1; font-size:clamp(1.75rem,1.1rem + 2.4vw,2.75rem);margin:.9rem 0 .35rem;color:#fff; font-variant-numeric:tabular-nums; } .calc__hint{font-size:.8125rem;line-height:1.55;color:#8E99A5} .calc__list{display:grid;gap:.5rem;margin:1.35rem 0;padding-top:1.25rem;border-top:1px solid var(--line-inv)} .calc__list li{display:grid;grid-template-columns:17px 1fr;gap:.6rem;align-items:start;font-size:.8125rem;line-height:1.45;color:#B6BEC7} .calc__list li svg{width:17px;height:17px;color:var(--accent);margin-top:.05rem} .calc__ways{display:grid;gap:.5rem;margin-top:auto} .calc__ways .btn{width:100%} .calc__row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem} .calc__ways .btn--wa{background:#25D366;color:#fff} .calc__ways .btn--wa:hover{background:#1FAE55} .calc__ways .btn--line{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.18)} .calc__ways .btn--line:hover{background:rgba(255,255,255,.15)} .calc__note{margin-top:.85rem;font-size:.6875rem;line-height:1.5;color:#6C7783} /* --- 34. Vorher/Nachher-Schieber ---------------------------------------- */ .vn{position:relative;border-radius:var(--r-media);overflow:hidden;background:var(--bg-alt);touch-action:pan-y;container-type:inline-size} .vn img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover} .vn__after{position:absolute;inset:0;width:var(--vn,50%);overflow:hidden} /* 100cqw = volle Breite des .vn-Containers — die Ueberlagerung bleibt deckungsgleich */ .vn__after img{width:100cqw;max-width:none;height:100%;object-fit:cover} .vn__grip{position:absolute;top:0;bottom:0;left:var(--vn,50%);width:2px;background:#fff;box-shadow:0 0 0 1px rgba(17,24,32,.16);z-index:2;cursor:ew-resize} .vn__grip::after{ content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:0 4px 16px rgba(17,24,32,.24); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111820' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6 4 12l5 6M15 6l5 6-5 6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:center;background-size:20px; } .vn__tag{ position:absolute;bottom:1rem;z-index:3;padding:.4rem .8rem;border-radius:var(--r-pill); background:rgba(11,16,22,.72);backdrop-filter:blur(10px);color:#fff; font-family:'Geist Mono',ui-monospace,monospace;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase; } .vn__tag--l{left:1rem} .vn__tag--r{right:1rem;background:rgba(242,101,34,.9)} .vn__range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:4;margin:0} /* --- 35. Referenzen-Laufband -------------------------------------------- */ .ref__mask{ position:relative;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); } .ref__track{display:flex;gap:.85rem;width:max-content;animation:refRoll 58s linear infinite} .ref__mask:hover .ref__track{animation-play-state:paused} @keyframes refRoll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.ref__track{animation:none}.ref__mask{overflow-x:auto}} .ref__i{position:relative;flex:none;width:clamp(220px,32vw,320px);border-radius:14px;overflow:hidden;background:var(--bg-alt)} .ref__i img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover} .ref__i figcaption{ position:absolute;left:.75rem;bottom:.75rem;padding:.3rem .7rem;border-radius:var(--r-pill); background:rgba(11,16,22,.7);backdrop-filter:blur(10px);color:#fff; font-family:'Geist Mono',ui-monospace,monospace;font-size:.625rem;letter-spacing:.08em;text-transform:uppercase; } /* --- 36. Fehlerseite ---------------------------------------------------- */ .subhero--404{padding-top:clamp(6.75rem,4.9rem + 8.3vw,12rem);padding-bottom:clamp(4rem,3rem + 4vw,7rem);text-align:center} .e404{max-width:44rem;margin-inline:auto;color:#fff} .e404 .kicker{justify-content:center} .e404__no{ font-family:'Geist Mono',ui-monospace,monospace;font-weight:500;letter-spacing:-.06em;line-height:.9; font-size:clamp(4.5rem,2.5rem + 10vw,9.5rem);color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.55); margin:.65rem 0 1.1rem;user-select:none; } .e404__no .hl{color:var(--accent);-webkit-text-stroke:0} .e404 h1{color:#fff;font-size:clamp(1.75rem,1.15rem + 2.4vw,2.625rem);line-height:1.12;letter-spacing:-.03em;margin-bottom:1rem} .e404__p{color:rgba(255,255,255,.78);font-size:clamp(.9375rem,.9rem + .22vw,1.0625rem);line-height:1.62;max-width:34rem;margin-inline:auto} .e404 .hero__cta{justify-content:center;margin-top:1.9rem} /* --- 38. Leistungen als ausfahrende Panels ------------------------------ */ .lz{display:flex;gap:12px;height:clamp(460px,46vw,580px)} .lz__p{ position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:20px;isolation:isolate; background:#0C1319;cursor:pointer; transition:flex-grow .6s var(--e-out); } .lz__p.is-on{flex-grow:3.4;cursor:default} /* Zwei Bildebenen: Ruhebild und ein anderes Motiv im aktiven Zustand */ .lz__bg,.lz__bg2{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:opacity .6s var(--e-out),filter .6s var(--e-out),transform .9s var(--e-out)} .lz__bg{z-index:-3;filter:grayscale(.4) brightness(.6)} .lz__p:hover .lz__bg{filter:grayscale(.12) brightness(.78)} .lz__bg2{z-index:-2;opacity:0;transform:scale(1.06)} .lz__p.is-on .lz__bg2{opacity:1;transform:none} .lz__p.is-on .lz__bg{filter:grayscale(.4) brightness(.6)} .lz__p::after{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(10,14,19,.5) 0%,rgba(10,14,19,.12) 30%,rgba(10,14,19,.82) 72%,rgba(10,14,19,.94) 100%); opacity:0;transition:opacity .5s var(--e-out); } .lz__p.is-on::after{opacity:1} /* Kurzlabel oben — im aktiven Panel ausgeblendet */ /* Waagerecht — mit sechs Kacheln ist eine geschlossene rund 135 px breit, da passt die Beschriftung wieder hin. Bei acht Kacheln waren es 115 px und sie lief hinten aus dem Bild; dann muss sie hochkant (18.09.2026). */ .lz__kurz{ position:absolute;top:1.35rem;left:1.35rem;right:1rem;z-index:2; font-size:clamp(1.0625rem,.9rem + .7vw,1.4375rem);font-weight:600;letter-spacing:-.024em; color:rgba(255,255,255,.92);white-space:nowrap; transition:opacity .35s var(--e-out); } .lz__p.is-on .lz__kurz{opacity:0} .lz__bar{display:none} /* Inhalt — nur im aktiven Panel */ .lz__c{ position:absolute;left:0;right:0;bottom:0;z-index:2; padding:clamp(1.4rem,1rem + 1.2vw,2rem); display:flex;flex-direction:column;gap:.75rem;color:#fff; opacity:0;transform:translateY(14px);pointer-events:none; transition:opacity .45s var(--e-out) .1s,transform .5s var(--e-out) .1s; } .lz__p.is-on .lz__c{opacity:1;transform:none;pointer-events:auto} .lz__c h3{color:#fff;font-size:clamp(1.1875rem,1rem + .8vw,1.5rem);line-height:1.2;letter-spacing:-.026em;margin:0} .lz__c > p{font-size:.9375rem;line-height:1.55;color:rgba(255,255,255,.8);margin:0;max-width:36ch} .lz__c .checks li{color:rgba(255,255,255,.86);font-size:.875rem} .lz__c .checks li::before{background-color:rgba(242,101,34,.2)} .lz__c .checks{gap:.45rem;margin-top:.15rem} .lz__go{ display:inline-flex;align-items:center;gap:.6rem;align-self:flex-start;margin-top:.4rem; padding:.7rem .75rem .7rem 1.15rem;border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.08);backdrop-filter:blur(8px); font-size:.875rem;font-weight:600;color:#fff;white-space:nowrap; transition:background var(--t) var(--e-out),border-color var(--t) var(--e-out); } .lz__go:hover{background:var(--accent);border-color:var(--accent)} .lz__go i{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none} .lz__go i svg{width:14px;height:14px} .lz__p.is-on::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none; border-radius:20px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)} /* Mobil ist es dieselbe Ziehharmonika, nur SENKRECHT: geschlossen eine flache Leiste mit Titel und Pfeil, offen die hohe Bildkarte. Nicht als Kartenraster auflösen — die Sektion lebt vom Auf- und Zufahren. */ @media (max-width:1000px){ .lz{display:flex;flex-direction:column;gap:12px;height:auto} .lz__p{flex:none;height:84px;border-radius:16px;cursor:pointer; transition:height .55s var(--e-out)} .lz__p.is-on{height:clamp(430px,116vw,560px);cursor:default} .lz__p.is-on::before{border-radius:16px} /* Reihenfolge nach Nachfrage — alle sechs bleiben sichtbar. ACHTUNG: jede Kachel braucht hier eine Zeile. Wer eine vergisst, bekommt order:0 und die Kachel springt an den Anfang der Liste. Volumen (Keyword Planner 18.09.2026): entrümpelung 12.100, haushaltsauflösung 8.100, wohnungsauflösung 3.600 pro Monat. */ .lz__p:nth-child(1){order:1} .lz__p:nth-child(4){order:2} .lz__p:nth-child(5){order:3} .lz__p:nth-child(6){order:4} .lz__p:nth-child(2){order:5} .lz__p:nth-child(3){order:6} /* geschlossene Leiste: voller Titel links, Pfeil rechts */ .lz__kurz{display:none} .lz__bar{ display:flex;align-items:center;justify-content:space-between;gap:1rem; position:absolute;inset:0;z-index:3;padding:0 1.15rem 0 1.25rem; transition:opacity .3s var(--e-out); } .lz__bar > span{ font-size:clamp(1.0625rem,.92rem + .95vw,1.3125rem);font-weight:600; letter-spacing:-.024em;line-height:1.2;color:#fff; } .lz__bar svg{width:22px;height:22px;flex:none;color:rgba(255,255,255,.85)} .lz__p.is-on .lz__bar{opacity:0;pointer-events:none} /* geschlossen dunkler, damit der Titel trägt */ .lz__bg{filter:grayscale(.25) brightness(.5)} .lz__p:hover .lz__bg{filter:grayscale(.25) brightness(.5)} .lz__p.is-on .lz__bg{filter:grayscale(.4) brightness(.6)} .lz__p::after{opacity:1} .lz__c{padding:1.35rem} } /* --- 39. WhatsApp-Angebot: Handy-Mockup + Copy -------------------------- */ .wa{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(2rem,1rem + 4vw,5rem);align-items:center} @media (max-width:940px){.wa{grid-template-columns:1fr;gap:2.75rem}} .wa__stage{position:relative;display:flex;justify-content:center;padding-block:1rem} .phone{ position:relative;width:min(100%,344px);border-radius:38px;background:#fff; border:1px solid var(--line);padding:9px; box-shadow:0 2px 6px rgba(17,24,32,.04),0 28px 60px rgba(17,24,32,.10); } .phone__in{border-radius:30px;overflow:hidden;background:#F3F1EC;display:flex;flex-direction:column} .phone__notch{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:74px;height:5px;border-radius:5px;background:var(--line);z-index:3} .chat__head{display:flex;align-items:center;gap:.6rem;padding:1.5rem .9rem .7rem;background:#fff;border-bottom:1px solid var(--line-2)} .chat__av{width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;flex:none;overflow:hidden} .chat__av img{width:100%;height:100%;object-fit:cover} .chat__head b{display:block;font-size:.8125rem;font-weight:600;color:var(--ink);line-height:1.25;letter-spacing:-.012em} .chat__head span{display:block;font-size:.6875rem;color:#22A45D} .chat__head svg{width:15px;height:15px;margin-left:auto;color:var(--muted-2)} /* Feste Hoehe: das Handy bleibt kompakt, aeltere Nachrichten schieben sich nach oben aus dem Bild — wie in einem echten Verlauf. */ /* Fensterhoehe fest, der Verlauf darunter wandert nach oben. Kein scrollTop — ein Element mit overflow:hidden laesst sich nicht programmatisch scrollen. */ .chat__body{background:#F3F1EC;height:clamp(290px,29vw,384px);overflow:hidden} .chat__flow{padding:.85rem .8rem 1rem;display:grid;gap:.5rem;align-content:start; transition:transform .55s var(--e-spring);will-change:transform} .msg{max-width:84%;padding:.55rem .7rem;border-radius:12px;font-size:.75rem;line-height:1.45;position:relative; opacity:0;transform:translateY(8px)} /* Staffel: jede Blase startet 0,4 s nach der vorigen */ /* Der Verlauf baut sich Nachricht fuer Nachricht von oben auf. Erst wenn das Fenster voll ist, schieben sich die aelteren Blasen nach oben aus dem Bild — wie in einem echten Chat. Ohne JS fehlt .is-schritt und alles steht sofort. */ .wa__stage.is-schritt .msg{display:none} .wa__stage.is-schritt .msg.is-da{display:block;animation:blaseAuf .5s var(--e-spring) forwards} .wa__stage.is-in .chat__status, .wa__stage.is-in .wa__preis{ animation:blaseAuf .5s var(--e-spring) forwards; animation-delay:calc(.3s + var(--i,0) * .75s); } @keyframes blaseAuf{to{opacity:1;transform:none}} .msg time{display:block;margin-top:.2rem;font-size:.5625rem;color:var(--muted-2);text-align:right} .msg--in{justify-self:start;background:#fff;color:var(--ink-2);border-top-left-radius:3px;box-shadow:0 1px 1px rgba(17,24,32,.05)} .msg--out{justify-self:end;background:#DCF8C6;color:#12291B;border-top-right-radius:3px;box-shadow:0 1px 1px rgba(17,24,32,.05)} .msg--out time{color:#4F7A5C} .msg--out time::after{content:" ✓✓";color:#34B7F1;letter-spacing:-.06em} .fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;width:172px;border-radius:8px;overflow:hidden} .fotos img{width:100%;height:56px;object-fit:cover;display:block} .fotos__mehr{position:relative;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:.8125rem;font-weight:600;height:56px} .msg--foto{padding:.35rem .35rem .3rem;max-width:none;width:max-content} .chat__status{ display:flex;align-items:center;gap:.65rem;margin:.2rem .8rem .1rem;padding:.7rem .8rem; border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1); opacity:0;transform:translateY(8px); } .chat__haken{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%; background:#22A45D;color:#fff} .chat__haken svg{width:14px;height:14px} .chat__status b{display:block;font-size:.75rem;font-weight:600;color:var(--ink);letter-spacing:-.012em;line-height:1.3} .chat__status > span > span{display:block;margin-top:1px;font-size:.6875rem;color:var(--muted)} .chat__foot{display:flex;align-items:center;gap:.5rem;padding:.55rem .7rem .85rem;background:#F3F1EC} .chat__bar{flex:1;height:30px;border-radius:15px;background:#fff;box-shadow:0 1px 1px rgba(17,24,32,.05)} .chat__send{width:30px;height:30px;border-radius:50%;background:#25D366;display:grid;place-items:center;flex:none;color:#fff} .chat__send svg{width:14px;height:14px} .wa__copy .checks{margin-top:1.4rem} .wa__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem} .btn--wa{background:#25D366;color:#fff} .btn--wa:hover{background:#1FAE55} @media (max-width:520px){.wa__cta .btn{width:100%;white-space:normal;text-align:center}} /* --- 41. Weitere Leistungen (Foto + Overlay) ---------------------------- */ .wl{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.85rem,.5rem + 1vw,1.25rem)} @media (max-width:760px){.wl{grid-template-columns:1fr}} .wl__c{ position:relative;display:flex;flex-direction:column;justify-content:flex-end; min-height:clamp(180px,22vw,230px);padding:clamp(1.4rem,1rem + 1.2vw,1.9rem); border-radius:var(--r-card);overflow:hidden;isolation:isolate;color:#fff; transition:transform var(--t) var(--e-out); } .wl__c:hover{transform:translateY(-3px)} .wl__c img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2; transition:transform .8s var(--e-out)} .wl__c:hover img{transform:scale(1.05)} .wl__c::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(115deg,rgba(10,14,19,.88) 0%,rgba(10,14,19,.62) 52%,rgba(10,14,19,.3) 100%)} .wl__c h3{color:#fff;font-size:clamp(1.125rem,1rem + .6vw,1.375rem);line-height:1.22;letter-spacing:-.024em;margin:0 0 .45rem} .wl__c p{font-size:.875rem;line-height:1.5;color:rgba(255,255,255,.76);margin:0 0 1.1rem;max-width:34ch} .wl__go{display:inline-flex;align-items:center;gap:.55rem;font-size:.9375rem;font-weight:600;color:#fff;position:relative} .wl__go::after{content:"";position:absolute;left:0;right:22px;bottom:-3px;height:1.5px;background:var(--accent); transform:scaleX(0);transform-origin:left;transition:transform var(--t) var(--e-out)} .wl__c:hover .wl__go::after{transform:scaleX(1)} .wl__go svg{width:15px;height:15px;transition:transform var(--t) var(--e-out)} .wl__c:hover .wl__go svg{transform:translateX(3px)} /* --- 39b. Preiskarte am Handy (haengt am .phone, nicht an der Spalte) ---- */ .wa__preis{ opacity:0;transform:translateY(8px); /* haengt an der unteren Ecke, damit keine Nachricht verdeckt wird */ position:absolute;right:clamp(-46px,-3vw,-16px);bottom:-18px;z-index:5; background:#fff;border:1px solid var(--line);border-radius:16px;padding:1rem 1.2rem; box-shadow:0 4px 10px rgba(17,24,32,.06),0 24px 46px rgba(17,24,32,.18); } .wa__preis b{display:block;font-size:1.875rem;font-weight:600;letter-spacing:-.035em;color:var(--ink);line-height:1} .wa__preis span{display:flex;align-items:center;gap:.4rem;margin-top:.35rem;font-size:.8125rem;font-weight:500;color:var(--muted);white-space:nowrap} .wa__preis span svg{width:14px;height:14px;color:#1E7A3C;flex:none} @media (max-width:520px){ .wa__preis{right:-6px;bottom:-14px;padding:.8rem 1rem} .wa__preis b{font-size:1.5rem} .wa__preis span{font-size:.75rem} } /* Unter 360 px ragte die Preiskarte 3 px ueber den Fensterrand — das war der letzte waagerechte Ueberlauf der Startseite. Sie schliesst jetzt buendig mit dem Handy ab. */ @media (max-width:360px){.wa__preis{right:0}.wa__preis span{white-space:normal}} /* --- 43. FAQ: grosses Logo als leise Hintergrund-Deko ------------------- */ #faq{position:relative;overflow:hidden} .faqdeko{ position:absolute;top:50%;right:11%;width:min(46%,620px);z-index:0; transform:translateY(-50%) rotate(-7deg); opacity:.06;pointer-events:none;user-select:none; } #faq > .wrap,#faq > .wrap-n{position:relative;z-index:1} @media (max-width:900px){.faqdeko{right:-4%;top:88%;width:min(86%,440px);opacity:.05}} /* --- 42. Mobiles Menü: Gruppen, Direktwege, CTA ------------------------- */ .d-ways{display:grid;gap:.6rem;margin-top:1.75rem} .d-way{display:grid;grid-template-columns:42px 1fr;gap:.85rem;align-items:center; padding:.8rem 1rem;border:1px solid var(--line);border-radius:14px;background:#fff} .d-way i{width:42px;height:42px;border-radius:12px;background:var(--accent-sf);color:var(--accent);display:grid;place-items:center} .d-way i svg{width:18px;height:18px} .d-way b{display:block;font-size:.9375rem;font-weight:600;color:var(--ink);line-height:1.3} .d-way > span > span{display:block;font-size:.75rem;color:var(--muted);line-height:1.4} .drawer .btn{margin-top:1.1rem;white-space:nowrap} @media (prefers-reduced-motion:reduce){ .msg,.chat__status,.wa__preis{opacity:1 !important;transform:none !important;animation:none !important} .wa__stage.is-schritt .msg{display:block} .chat__flow{transition:none} } /* --- 44. Rechts- und Kontaktseiten -------------------------------------- */ /* Kopfbereich ohne Bild: der Header steht hier von Anfang an hell (.hdr--solid), deshalb braucht die Brotkrume dunkle statt weisser Schrift. */ .seitenkopf{padding-top:clamp(8.5rem,6.5rem + 5vw,11rem);padding-bottom:clamp(2rem,1.4rem + 2vw,3rem)} .seitenkopf h1,.artkopf h1{font-size:clamp(1.875rem,1.2rem + 2.7vw,2.875rem);line-height:1.08;letter-spacing:-.032em;margin:.4rem 0 1rem} .crumb--ink{color:var(--muted-2)} .crumb--ink a{color:var(--muted)} .crumb--ink a:hover{color:var(--ink)} .crumb--ink span[aria-current]{color:var(--accent)} .crumb--ink svg{opacity:.45} .prose--recht{max-width:none} .prose--recht h2{margin-top:3.25rem;font-size:clamp(1.25rem,1.1rem + .7vw,1.625rem);line-height:1.2;letter-spacing:-.022em;font-weight:600} .prose--recht > h2:first-child{margin-top:0} .prose--recht h3{margin-top:2rem;margin-bottom:.55rem} .prose--recht p{font-size:1rem;line-height:1.72} .prose--recht ul{margin-top:1rem;padding-left:1.15rem;list-style:disc} .prose--recht li{font-size:1rem;line-height:1.7;color:var(--ink-2);margin-top:.35rem} .prose--recht li::marker{color:var(--accent)} .prose--recht .tbl-scroll{margin-top:1.4rem} .prose--recht strong{color:var(--ink);font-weight:600} /* Die Absaetze in Grossbuchstaben (Art. 21 DSGVO) sind Vorschrift, aber hart zu lesen — etwas Laufweite und ein ruhigerer Ton nehmen die Schaerfe raus. */ .prose--recht .versal{font-size:.9375rem;line-height:1.75;letter-spacing:.01em;color:var(--muted)} .rechtsbox{margin-top:1.6rem;padding:1.3rem 1.5rem;background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r-card)} .rechtsbox p{margin:0;font-size:.9375rem} .rechtsbox p + p{margin-top:.6rem} /* --- 46. Textgrößen: gesamte Seite eine Stufe kleiner -------------------- */ /* Florian, 29.08.2026: „Die Texte sind auf PC und mobil alle relativ groß." Bewusst nur die Schriftgrade, nicht die Abstände — das Raster bleibt stehen. */ .t-hero{font-size:clamp(1.9375rem,1.05rem + 3.55vw,3.3125rem)} .t-h2 {font-size:clamp(1.25rem,.99rem + 1.55vw,2.1875rem)} .t-h3 {font-size:clamp(1.03125rem,.97rem + .3vw,1.21875rem)} .t-h4 {font-size:1rem} .t-lead{font-size:clamp(.96875rem,.93rem + .22vw,1.09375rem)} .t-body{font-size:1rem} .t-sm {font-size:.875rem} .subhero__copy h1,.subhero__copy .subhero__gross{font-size:clamp(1.71875rem,1.1rem + 2.45vw,2.625rem)} .subhero__copy p{font-size:clamp(.875rem,.85rem + .16vw,.9375rem)} .seitenkopf h1,.artkopf h1{font-size:clamp(1.71875rem,1.1rem + 2.45vw,2.625rem)} .hero__checks li{font-size:.96875rem} .prose p{font-size:1rem} .prose--recht p{font-size:.9375rem} .prose--recht li{font-size:.9375rem} .checks li{font-size:.96875rem} .cmp__list li{font-size:.875rem} .tile__p{font-size:.875rem} .tile__h{font-size:clamp(1.09375rem,.97rem + .55vw,1.5rem)} .wl__c p{font-size:.875rem} .faq summary{font-size:1rem} .faq__a p{font-size:.9375rem} .tbl th,.tbl td{font-size:.875rem} .trust__i span{font-size:.8125rem} .qf__q{font-size:1rem} .qf__head h3{font-size:1.125rem} .cta__way b{font-size:.9375rem} /* --- 47. Mobiler Header: Logo eine Spur kleiner -------------------------- */ @media (max-width:760px){ .hdr__logo img{height:42px} .hdr.is-scrolled .hdr__logo img,.hdr.is-mega .hdr__logo img{height:38px} } /* --- 48. Display-Typografie: condensed, schwer, versal ------------------- */ /* Florian, 29.08.2026, nach bad-fabrik.de. Archivo hat eine Breitenachse, deshalb bleibt alles in EINER Schriftfamilie: Fliesstext normal breit, die grossen Grade schmal und fett. Versalien vertragen keine negative Laufweite, deshalb hier 0 statt der sonst ueblichen -.03em. */ .t-hero,.t-h2, .subhero__copy h1,.subhero__copy .subhero__gross, .seitenkopf h1,.artkopf h1, .tile__h{ font-stretch:76%; font-weight:800; text-transform:uppercase; letter-spacing:0; line-height:.95; } /* Schmale Schrift traegt mehr Zeichen pro Zeile — die Grade duerfen wachsen */ .t-hero{font-size:clamp(2.0625rem,1.1rem + 3.6vw,3.25rem)} .t-h2 {font-size:clamp(1.5rem,1.12rem + 2.05vw,2.75rem)} .subhero__copy h1,.subhero__copy .subhero__gross{font-size:clamp(2rem,1.2rem + 3.2vw,3.25rem)} .seitenkopf h1,.artkopf h1{font-size:clamp(2rem,1.2rem + 3.2vw,3.25rem)} .tile__h{font-size:clamp(1.1875rem,1rem + .8vw,1.75rem);line-height:1} /* Umlaute stossen bei enger Zeile an die Zeile darueber */ .t-hero,.t-h2,.subhero__copy h1,.subhero__copy .subhero__gross,.seitenkopf h1,.artkopf h1{padding-top:.06em} /* --- 49. Kundenlogo-Leiste nach dem Hero --------------------------------- */ /* Weiss statt grau: das Band sitzt seit 17.09.2026 direkt unter dem Hero und soll dort nicht als eigene Flaeche lesen, sondern als Fussleiste des Heros. Nur unten eine Linie — oben schliesst das Hero-Foto ab. */ .logos{padding-block:clamp(2rem,1.5rem + 1.8vw,3rem);background:var(--bg); border-bottom:1px solid var(--line)} .logos__zeile{text-align:center;margin-bottom:clamp(1.3rem,1rem + 1vw,1.9rem); font-size:clamp(.9375rem,.9rem + .2vw,1.0625rem);color:var(--muted)} .logos__zeile b{color:var(--accent);font-weight:600} .logos__mask{ position:relative;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); } .logos__track{display:flex;align-items:center;width:max-content; gap:clamp(2.4rem,1.8rem + 2.4vw,4.5rem);animation:logoRoll 52s linear infinite} .logos__mask:hover .logos__track{animation-play-state:paused} @keyframes logoRoll{from{transform:translateX(0)}to{transform:translateX(-50%)}} .klogo{flex:none;height:clamp(22px,2.3vw,30px);width:auto; opacity:.88;transition:opacity var(--t) var(--e-out)} .klogo:hover{opacity:1} @media (prefers-reduced-motion:reduce){ .logos__track{animation:none} .logos__mask{overflow-x:auto;-webkit-mask-image:none;mask-image:none} } /* --- 50. Hero-Headline richtet sich nach der SPALTE, nicht am Viewport ---- */ /* Problem: die Textspalte im Hero ist mal 640 px breit (Desktop neben dem Formular), mal 463 px (um 1100 px) und mal 280 px (Handy). Ein clamp() am Viewport traf das nie — bei 320 px brach "Entrümpelung & Umzug" um. Gemessen: bei font-stretch 76 % braucht die Zeile das 10,98-fache des Schriftgrades, bei 64 % das 10,0-fache. Daraus die cqi-Werte unten. */ .hero__copy,.subhero__copy{container-type:inline-size} .hero__copy .t-hero{font-size:clamp(1.5rem,8.8cqi,3.5rem)} .subhero__copy h1,.subhero__copy .subhero__gross{font-size:clamp(1.4rem,8cqi,3.1rem)} @media (max-width:700px){ .hero__copy .t-hero,.subhero__copy h1,.subhero__copy .subhero__gross{font-stretch:64%} .hero__copy .t-hero{font-size:clamp(1.5rem,9.6cqi,3.5rem)} .subhero__copy h1,.subhero__copy .subhero__gross{font-size:clamp(1.4rem,8.8cqi,3.1rem)} } /* --- 52. Ablauf: Zeitstrahl, der beim Scrollen mitlaeuft ---------------- */ /* Die Schiene fuellt sich mit dem Scrollen; erreicht der Ball einen Punkt, schaltet dessen Schritt an. Hoehe und Anfang der Schiene setzt das JS in Pixeln, gemessen an den Punktmitten — so passt sie bei jeder Textlaenge, ohne dass hier eine Zahl geraten wird. MOBIL (Grundzustand): Schiene links, Punkte links, Text rechts, Bild darunter. DESKTOP ab 900 px: Schiene in der Mitte, die Schritte wechseln die Seite — 1 links, 2 rechts, 3 links, 4 rechts. */ .tl{--tl-top:0px;--tl-h:100%;--p:0%;--tlgap:clamp(1.1rem,.6rem + 1.6vw,2.2rem); position:relative;display:grid;row-gap:clamp(2rem,1.1rem + 2.8vw,3.6rem)} .tl__schiene{position:absolute;z-index:0;left:21px;top:var(--tl-top);height:var(--tl-h); width:2px;background:var(--line);border-radius:2px} .tl__fuell{position:absolute;left:0;top:0;width:100%;height:var(--p); background:var(--accent);border-radius:2px;transition:height .14s linear} .tl__fuell::after{content:"";position:absolute;left:50%;bottom:0;width:11px;height:11px; border-radius:50%;background:var(--accent);transform:translate(-50%,50%); box-shadow:0 0 0 5px rgba(242,101,34,.15)} .tl__s{position:relative;z-index:1;display:grid;align-items:start; grid-template-columns:44px minmax(0,1fr);column-gap:var(--tlgap)} .tl__pkt{width:44px;height:44px;border-radius:50%;display:grid;place-items:center; background:#fff;border:2px solid var(--line); font-family:'Geist Mono',ui-monospace,monospace;font-size:.8125rem;font-weight:500; color:var(--muted-2);transition:background .45s var(--e-out),border-color .45s var(--e-out), color .45s var(--e-out),box-shadow .45s var(--e-out)} .tl__s.is-an .tl__pkt{background:var(--accent);border-color:var(--accent);color:#fff; box-shadow:0 0 0 6px rgba(242,101,34,.12)} .tl__c{display:flex;flex-direction:column;gap:1rem; opacity:.4;transform:translateY(10px); transition:opacity .5s var(--e-out),transform .5s var(--e-out)} .tl__s.is-an .tl__c{opacity:1;transform:none} /* Zeilenmass gedeckelt: breiter bleibt bei den vier Saetzen ein Rest von zwei Woertern auf der letzten Zeile stehen (gemessen bei 1100 px). */ .tl__txt{max-width:36ch} .tl__txt h3{margin:0 0 .45rem} .tl__txt p{margin:0;font-size:.9375rem;line-height:1.6;color:var(--muted)} .tl__punkte{margin:.85rem 0 0;padding:0;list-style:none;display:grid;gap:.32rem} .tl__punkte li{position:relative;padding-left:1rem;font-size:.8125rem;line-height:1.45;color:var(--muted-2)} .tl__punkte li::before{content:"";position:absolute;left:0;top:.52em;width:5px;height:5px; border-radius:50%;background:var(--accent);opacity:.8} .tl__bild{aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-media);background:var(--bg-alt)} .tl__bild img{width:100%;height:100%;object-fit:cover; filter:grayscale(.6);transition:filter .6s var(--e-out)} .tl__s.is-an .tl__bild img{filter:none} /* Desktop: Schiene in die Mitte, Schritte abwechselnd links und rechts. Der Punkt bleibt immer in der Mittelspalte, deshalb liegen seine Kanten bei 50 % ± 22 px — daran haengt die Stichleitung zur Karte, ohne feste Pixel. --tlv zieht jeden Schritt ein Stueck in den vorherigen hinein, damit das Zickzack dicht steht; bewusst deutlich kleiner als eine halbe Kartenhoehe, sonst kaemen sich Schritt 1 und 3 auf derselben Seite ins Gehege. */ @media (min-width:900px){ .tl{--tlgap:clamp(1.6rem,.8rem + 2.2vw,3rem);--tlv:clamp(5rem,12vw,11rem);row-gap:0} .tl__schiene{left:50%;margin-left:-1px} .tl__s{grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr)} .tl__s + .tl__s{margin-top:calc(var(--tlv) * -1)} .tl__pkt{grid-column:2;grid-row:1} /* Die Karte fuellt ihre Spalte: linke Kante buendig unter der Ueberschrift, rechte an der Schiene. Nur der Fliesstext bleibt auf 36ch gedeckelt. */ .tl__c{width:100%} .tl__s:nth-of-type(odd) .tl__c{grid-column:1;grid-row:1;justify-self:end} .tl__s:nth-of-type(even) .tl__c{grid-column:3;grid-row:1;justify-self:start} .tl__bild{order:-1} .tl__s::before{content:"";position:absolute;top:21px;height:2px;width:var(--tlgap); background:var(--line);transition:background .45s var(--e-out)} .tl__s:nth-of-type(odd)::before{right:calc(50% + 22px)} .tl__s:nth-of-type(even)::before{left:calc(50% + 22px)} .tl__s.is-an::before{background:var(--accent)} /* Am PC ist neben jeder Karte eine halbe Sektionsbreite frei — die Schrift darf deshalb eine Stufe groesser stehen als im Rest der Seite. Das Zeilenmass waechst mit (41ch statt 36ch), damit die letzten Zeilen nicht wieder auf zwei Woerter zusammenfallen. Mobil bleibt alles wie es ist. */ .tl__txt{max-width:41ch} .tl__txt h3{font-size:clamp(1.25rem,1.02rem + .62vw,1.5rem);margin-bottom:.6rem} .tl__txt p{font-size:clamp(1rem,.93rem + .3vw,1.0625rem)} .tl__punkte{margin-top:1.05rem;gap:.42rem} .tl__punkte li{font-size:clamp(.875rem,.83rem + .2vw,.9375rem);padding-left:1.15rem} .tl__punkte li::before{width:6px;height:6px} } @media (prefers-reduced-motion:reduce){ .tl__fuell{transition:none} .tl__c{opacity:1;transform:none} .tl__bild img{filter:none} } /* --- 53. Vergleich: Abschluss-Zahl und Handlungsaufruf ------------------- */ /* Die rechte Karte wird zur Flex-Spalte, damit die Zahl per margin-top:auto unten klebt — sie fuellt damit genau den Rest, den die kuerzere Liste uebrig laesst, statt die Karte willkuerlich zu verlaengern. */ .cmp__c--them{display:flex;flex-direction:column} .cmp__stat{margin-top:auto;padding-top:clamp(1.05rem,.75rem + .8vw,1.45rem); border-top:1px solid var(--line-2); display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center; column-gap:clamp(.85rem,.6rem + .8vw,1.25rem);row-gap:.7rem} .cmp__stat__n{margin:0;color:var(--rot); font-stretch:76%;font-weight:800;letter-spacing:0;line-height:.88; font-size:clamp(2rem,1.45rem + 2.2vw,2.9rem); font-variant-numeric:tabular-nums} /* Prozentzeichen kleiner und dicht an die Zahl — in dem Schriftgrad reisst das normale Leerzeichen sonst eine Luecke von einer halben Ziffernbreite. */ .cmp__stat__n i{font-style:normal;font-size:.58em;margin-left:.1em;vertical-align:.06em} .cmp__stat__t{margin:0;font-size:.8125rem;line-height:1.45;color:var(--muted-2)} .cmp__stat__t b{display:block;margin-bottom:.1rem; font-size:.875rem;font-weight:600;color:var(--ink-2)} /* Schiene laeuft bis zum Anteil, den das JS setzt — die Zahl steht nur einmal im Markup, damit sie nicht an zwei Stellen gepflegt werden muss. */ .cmp__stat__schiene{grid-column:1 / -1;display:block;height:5px;overflow:hidden; border-radius:999px;background:var(--line-2)} .cmp__stat__schiene > i{display:block;height:100%;width:0;border-radius:999px; background:linear-gradient(90deg,var(--rot-hell),var(--rot)); transition:width 1.15s var(--e-out)} .cmp__cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center; gap:.75rem clamp(.7rem,.5rem + .7vw,1rem); margin-top:clamp(1.75rem,1.2rem + 1.6vw,2.75rem)} @media (max-width:480px){ /* Nebeneinander passen die beiden Knoepfe hier nicht mehr — dann lieber beide auf volle Breite als ein Umbruch mit unterschiedlich breiten Knoepfen. */ .cmp__cta{flex-direction:column;align-items:stretch} .cmp__cta .btn{width:100%} .cmp__stat{grid-template-columns:1fr;row-gap:.55rem} .cmp__stat__t{margin-top:-.15rem} } @media (prefers-reduced-motion:reduce){ .cmp__stat__schiene > i{transition:none} } /* --- Blog-Karten (drei Teaser) ------------------------------------------ */ .posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,.6rem + 1.2vw,1.5rem)} @media (max-width:940px){.posts{grid-template-columns:1fr 1fr}} @media (max-width:620px){.posts{grid-template-columns:1fr}} .post{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;transition:border-color var(--t),transform var(--t) var(--e-out),box-shadow var(--t)} .post:hover{border-color:#D8D8D3;transform:translateY(-3px);box-shadow:var(--sh-2)} .post__img{aspect-ratio:16/10;overflow:hidden;background:var(--bg-alt)} .post__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--e-out)} .post:hover .post__img img{transform:scale(1.045)} .post__b{padding:1.3rem 1.35rem 1.45rem;display:flex;flex-direction:column;flex:1} .post__meta{display:flex;align-items:center;gap:.55rem;margin-bottom:.75rem;font-family:'Geist Mono',monospace;font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2)} /* Die Rubrik ist ein Schlagwort, kein Fliesstext — also sieht sie auch so aus. Das Orange ist hier dunkler als --accent: auf der hellen Akzentflaeche kommt #F26522 bei 11 px nur auf 2,9:1, das dunklere auf 5,5:1. */ .post__meta em{font-style:normal;display:inline-flex;align-items:center; padding:.32rem .58rem;border-radius:var(--r-pill);line-height:1; background:var(--accent-sf);border:1px solid rgba(242,101,34,.26); color:#A8400E;font-weight:500} .post__b h3{margin-bottom:.5rem} .post__b p{font-size:.9375rem;line-height:1.6;color:var(--muted);margin-bottom:1.2rem} .post__b .tlink{margin-top:auto} /* --- 54. Vorher/Nachher als Dreierreihe ---------------------------------- */ /* Drei Regler nebeneinander statt eines grossen. Unter 820 px werden daraus drei untereinander — bei drei Spalten waere jeder Rahmen so schmal, dass man den Griff mit dem Daumen nicht mehr trifft. */ .vnr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,.6rem + 1.2vw,1.6rem)} .vnr__i{margin:0;display:flex;flex-direction:column;gap:.75rem} .vnr__i figcaption{font-size:.8125rem;line-height:1.5;color:var(--muted-2);text-wrap:pretty} .vnr__i figcaption b{display:block;font-weight:600;color:var(--ink-2);font-size:.875rem} /* Im kleineren Rahmen duerfen Etiketten und Griff nicht mehr so klotzen. ACHTUNG: die Etiketten haengen an `bottom`. Wer hier zusaetzlich `top` setzt, spannt sie ueber die volle Bildhoehe auf — sie werden zu Balken. */ .vnr .vn__tag{font-size:.625rem;padding:.3rem .6rem;bottom:.7rem} .vnr .vn__tag--l{left:.7rem} .vnr .vn__tag--r{right:.7rem} .vnr .vn__grip::after{width:34px;height:34px} @media (max-width:820px){ .vnr{grid-template-columns:1fr;gap:1.75rem} .vnr .vn__tag{font-size:.6875rem;padding:.35rem .7rem;bottom:1rem} .vnr .vn__tag--l{left:1rem} .vnr .vn__tag--r{right:1rem} } /* --- 57. Bewertungen C: zweispaltig, nur Typografie ---------------------- */ /* Ohne Karten und ohne Schatten: links bleibt die Note beim Scrollen stehen, rechts laufen die Stimmen als Liste durch, getrennt nur von Haarlinien. */ .bwc{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr); gap:clamp(2rem,1.2rem + 3.2vw,5rem);align-items:start} .bwc__seite{position:sticky;top:calc(var(--hdr-h,72px) + 2rem)} .bwc__seite h2{margin-bottom:clamp(1.5rem,1.1rem + 1.4vw,2.25rem)} .bwc__note{display:flex;align-items:center;gap:1rem; padding-bottom:1.35rem;margin-bottom:1.35rem;border-bottom:1px solid var(--line)} .bwc__zahl{font-stretch:76%;font-weight:800;line-height:.85;letter-spacing:0; color:var(--ink);font-size:clamp(2.5rem,1.9rem + 2.4vw,3.6rem);font-variant-numeric:tabular-nums} .bwc__nstern{display:flex;flex-direction:column;gap:.35rem;font-size:.8125rem;color:var(--muted)} .bwc__seite .tlink .g-logo{width:17px;height:17px;margin-right:.1rem} .bwc__hinweis{margin-top:1.4rem;max-width:34ch;font-size:.75rem;line-height:1.55;color:var(--muted)} .bwc__hinweis a,.s2-bew__hinweis a,.s3-bew__hinweis a{color:inherit;text-decoration:underline;text-underline-offset:2px} .bwc__liste{display:flex;flex-direction:column} .bwc__i{padding:clamp(1.4rem,1.1rem + 1vw,1.9rem) 0;border-top:1px solid var(--line)} .bwc__i:first-child{border-top:0;padding-top:0} .bwc__i blockquote{margin:.85rem 0 .9rem;font-size:clamp(.9375rem,.9rem + .2vw,1.0625rem); line-height:1.6;color:var(--ink-2);text-wrap:pretty} .bwc__i footer{display:flex;align-items:baseline;gap:.7rem} .bwc__i footer b{font-stretch:82%;font-weight:700;text-transform:uppercase; letter-spacing:.02em;font-size:.875rem;color:var(--ink)} .bwc__i footer span{font-family:'Geist Mono',ui-monospace,monospace;font-size:.6875rem; letter-spacing:.06em;color:var(--muted-2)} @media (max-width:900px){ .bwc{grid-template-columns:1fr;gap:2rem} .bwc__seite{position:static} } @media (prefers-reduced-motion:reduce){ } /* --- 58. Google-Zeile unter dem Namen ------------------------------------ */ /* Bewusst „Bewertung bei Google" und nicht „Google zertifiziert": Google zertifiziert keine Betriebe, die Behauptung waere nach § 5 UWG irrefuehrend. Die Zeile leistet dasselbe — das G weist die Quelle aus. */ .bwc__i footer{display:flex;flex-direction:column;align-items:flex-start;gap:.42rem} .bwc__q{display:inline-flex;align-items:center;gap:.4rem; font-family:'Geist Mono',ui-monospace,monospace;font-size:.6875rem; letter-spacing:.05em;color:var(--muted-2);line-height:1} .bwc__q .g-logo{width:14px;height:14px;flex:none} .bwc__q em{font-style:normal;color:var(--muted-2);opacity:.75} .bwc__q em::before{content:"·";margin-right:.4rem} /* --- 59. Tiefe fuer alle dunklen Flaechen -------------------------------- */ /* „Einfach nur dunkelblau oder schwarz" wirkt stumpf. Jede dunkle Flaeche bekommt denselben Unterbau — leichter Verlauf, weicher Akzent-Glow aus einer Ecke, feine Lichtkante oben — und dazu GENAU EIN eigenes Motiv, damit die Flaechen nicht wie Kopien voneinander aussehen. Regel aus dem Background-Deko-Standard: hoechstens 1–2 Elemente, Motive abwechseln. */ .cmp__c--us{ background-color:var(--bg-dark); background-image: radial-gradient(125% 120% at 100% 0%, rgba(242,101,34,.14), transparent 58%), linear-gradient(158deg, #1C2735 0%, #111820 60%); box-shadow:inset 0 1px 0 rgba(255,255,255,.07); } .cmp__c--us{border-color:#1D2733} /* Motiv 1 — Vergleichskarte: grosser duenner Ring, halb aus der Ecke */ .cmp__c--us::before{ content:"";position:absolute;pointer-events:none;z-index:0; right:-104px;bottom:-142px;width:340px;height:340px;border-radius:50%; border:1px solid rgba(242,101,34,.17); } .cmp__c--us > *{position:relative;z-index:1} @media (max-width:640px){ /* Der Ring klebt auf schmalen Karten hinter dem Text — kleiner und weiter raus */ .cmp__c--us::before{right:-130px;bottom:-170px;width:290px;height:290px} } /* --- 60. Startseiten-Hero: Schnelleinstieg statt Quiz --------------------- */ /* Florian am 14.09.2026: „professionell, stark, hochwertig, aber top einfach." Raus sind die vier Haken-Zeilen und das vierstufige Quiz — die haben die Ueberschrift in eine schmale Spalte gedraengt. Geblieben ist ein Balken mit zwei Feldern, der das vorhandene Anfrage-Overlay VORGEFUELLT oeffnet. Das Formular verschwindet damit nicht, es wird nur klein. */ /* .hero__c liegt IM .wrap, nicht als .wrap — sonst wird die 44-rem-Box zentriert und der Text rutscht auf breiten Schirmen weit nach rechts, statt unter dem Logo zu stehen. container-type, damit die Ueberschrift wieder ihrer eigenen Spalte folgt und nicht dem Fenster. */ .hero__c{max-width:44rem;color:#fff;container-type:inline-size} .hero__c .t-hero{font-size:clamp(1.5rem,8.8cqi,3.5rem)} .hero__c .kicker,.hero__c .t-label,.hero__c .t-hero{color:#fff} .hero__c .t-hero{margin-bottom:1.15rem} /* Nur der Fliesstext, nicht die Schlagzeile: seit der Kicker die H1 traegt, ist die grosse Zeile ein

und fiel sonst unter diese Regel — Zeilenhoehe 1,62 statt 1,06 und 34 rem statt voller Spalte. (Florian, 18.09.2026) */ .hero__c > p:not(.t-hero){color:rgba(255,255,255,.8);max-width:34rem;margin:0; font-size:clamp(.90625rem,.875rem + .18vw,1rem);line-height:1.62} .hero__note{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem .6rem; margin-top:1.5rem;font-size:.8125rem;color:rgba(255,255,255,.72)} .hero__note .g-logo{width:18px;height:18px;flex:none} .hero__note b{color:#fff;font-weight:600} .hero__note .stars svg{width:15px;height:15px} .hero__bar{display:flex;flex-wrap:wrap;align-items:end;gap:.75rem; margin-top:1.5rem;padding:.85rem;max-width:44rem; border-radius:calc(var(--r-card) + 2px); background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)} .hero__feld{flex:1 1 11rem;display:flex;flex-direction:column;gap:.35rem;min-width:0} .hero__feld > span{padding-left:.15rem; font-family:'Geist Mono',ui-monospace,monospace;font-size:.625rem;letter-spacing:.12em; text-transform:uppercase;color:rgba(255,255,255,.66)} .hero__feld select,.hero__feld input{width:100%;padding:.8rem .9rem;font:inherit;font-size:.9375rem; border-radius:var(--r-btn);border:1px solid rgba(255,255,255,.18); background:rgba(10,14,19,.55);color:#fff} .hero__feld input::placeholder{color:rgba(255,255,255,.45)} .hero__feld select:focus-visible,.hero__feld input:focus-visible{outline:2px solid var(--accent);outline-offset:1px} .hero__bar .btn{flex:0 0 auto;padding-block:.85rem} /* Alles nach links: der Verlauf ist links am dunkelsten, weisse Siegel gehen auf der hellen Bildhaelfte sonst unter. */ .hero__fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start; gap:1rem 2.25rem;margin-top:1.75rem;max-width:44rem} /* Seit 19.09.2026 laufen die Siegel in Farbe (Florian). Sie tragen ihre eigenen hellen Flaechen mit — auf dem dunklen Foto stehen sie deshalb als drei Plaketten da, nicht als Silhouetten. Volle Deckkraft, sonst stimmen die Markenfarben nicht mehr. Die weissen Fassungen (-weiss.webp) bleiben im Ordner liegen, falls wir zurueckwollen. */ .hero__siegel{display:flex;align-items:center;flex-wrap:wrap; gap:clamp(.8rem,.6rem + 1vw,1.5rem);list-style:none;margin:0;padding:0} .hero__siegel li{display:flex;align-items:center;justify-content:center} .hero__siegel img{height:clamp(64px,6.6vw,98px);width:auto;display:block} @media (max-width:820px){ /* Auf dem Handy teilen sich die drei Siegel die volle Breite — die Hoehe ergibt sich aus der Spaltenbreite, nicht umgekehrt. Der Deckel bei 118 px verhindert, dass sie auf einem breiten Tablet zu Plakaten werden. */ .hero__siegel{width:100%} .hero__fuss{width:calc(100% + 1.5rem);margin-inline:-.75rem} .hero__siegel{gap:.35rem;align-items:center} .hero__siegel li{flex:1 1 0;min-width:0} .hero__siegel img{width:100%;height:auto;max-height:118px;object-fit:contain} } @media (max-width:620px){ .hero__bar .btn{width:100%} .hero__fuss{flex-direction:column;align-items:flex-start;gap:1.1rem} } /* --- 61. Aktionsleiste über der Kopfzeile -------------------------------- */ /* Orange Leiste ganz oben, weisse Schrift. Sie faehrt beim Scrollen zusammen und die Kopfzeile rutscht nach — sonst kostet sie auf dem Handy dauerhaft ein Zehntel der Bildhoehe. Geschaltet wird das ueber dieselbe Scroll-Marke, die die Kopfzeile schon benutzt. */ :root{--aktion-h:38px} .aktion{position:fixed;inset:0 0 auto;z-index:130;overflow:hidden; height:var(--aktion-h);background:var(--accent);color:#fff; transition:height var(--t) var(--e-out)} .aktion__in{display:flex;align-items:center;justify-content:center;gap:1.5rem; height:var(--aktion-h)} .aktion__text{margin:0;font-size:.8125rem;line-height:1;text-align:center} .aktion__text b{font-weight:700} /* Kein margin-left:auto — sonst klebt die Aussage links und der Kontakt rechts am Rand. Beides steht als eine Gruppe in der Mitte. */ .aktion__kontakt{display:flex;align-items:center;gap:1.35rem} .aktion__kontakt a{display:inline-flex;align-items:center;gap:.4rem; font-size:.8125rem;font-weight:600;color:#fff;line-height:1} .aktion__kontakt a:hover{color:rgba(255,255,255,.78)} .aktion__kontakt svg{width:15px;height:15px;flex:none} .hdr{top:var(--aktion-h);transition:top var(--t) var(--e-out), background var(--t) var(--e-out),border-color var(--t) var(--e-out), box-shadow var(--t) var(--e-out),backdrop-filter var(--t)} html.is-ab .aktion{height:0} html.is-ab .hdr{top:0} /* Die drei Seitenanfaenge muessen die Leiste mit freiraeumen */ .hero{padding-top:calc(clamp(7rem,6rem + 6vw,9.5rem) + var(--aktion-h))} .subhero{padding-top:calc(clamp(6.75rem,4.9rem + 8.3vw,12rem) + var(--aktion-h))} .seitenkopf{padding-top:calc(clamp(8.5rem,6.5rem + 5vw,11rem) + var(--aktion-h))} /* Der Handy-Block des Heros steht weiter oben im Blatt und wurde von der Zeile darueber ueberschrieben — die 102 px waren auf dem Handy nie aktiv. (Florian, 18.09.2026) */ @media (max-width:1080px){ .hero{padding-top:calc(102px + var(--aktion-h))} } @media (max-width:1000px){ /* Auf dem Handy bleibt nur die Aussage — Telefon und WhatsApp stehen dort ohnehin als Knopf in der Kopfzeile und im Floating-Button. */ .aktion__kontakt{display:none} .aktion__in{justify-content:center} } @media (max-width:560px){ :root{--aktion-h:34px} .aktion__text{font-size:.75rem} } @media (prefers-reduced-motion:reduce){ .aktion,.hdr{transition:none} } /* --- 62. Kontaktleiste statt Plus-Knopf ---------------------------------- */ /* Mobil eine Leiste am unteren Rand, am PC eine Karte unten rechts. Sie ERSETZT den Floating-Button — es bleibt bei einem Kontaktangebot auf dem Schirm, deshalb greift die Regel gegen mobile Sticky-Leisten hier nicht. Gleicher dunkler Unterbau wie die Vergleichskarte, damit sie dazugehoert. */ .kbar{ position:fixed;z-index:110;display:flex;align-items:center; gap:clamp(.7rem,.5rem + .8vw,1rem); left:clamp(.7rem,2vw,1.25rem);right:clamp(.7rem,2vw,1.25rem); bottom:clamp(.7rem,2vw,1.25rem); padding:.6rem .7rem;border-radius:calc(var(--r-card) + 4px); background-color:var(--bg-dark);color:#B6BEC7; background-image: radial-gradient(120% 130% at 100% 0%, rgba(242,101,34,.16), transparent 58%), linear-gradient(158deg,#1C2735 0%,#111820 62%); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 34px rgba(11,16,22,.34); } .kbar__bild{width:46px;height:46px;flex:none;border-radius:50%;object-fit:cover; border:2px solid rgba(255,255,255,.18)} .kbar__t{display:flex;flex-direction:column;gap:.18rem;min-width:0;flex:1} .kbar__t b{font-size:.9375rem;font-weight:600;color:#fff;line-height:1.25; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media (min-width:1000px){.kbar__t b{white-space:normal;overflow:visible}} .kbar__status{display:inline-flex;align-items:center;gap:.4rem; font-family:'Geist Mono',ui-monospace,monospace;font-size:.625rem;letter-spacing:.06em; color:var(--muted-2);line-height:1;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .kbar__status i{width:7px;height:7px;border-radius:50%;flex:none;background:#6C7783} .kbar__status.is-offen i{background:#35C759;box-shadow:0 0 0 3px rgba(53,199,89,.2)} .kbar__k{display:flex;align-items:center;gap:.45rem;flex:none} .kbar__wa,.kbar__tel{display:inline-flex;align-items:center;justify-content:center; border-radius:var(--r-pill);transition:background var(--t) var(--e-out)} .kbar__wa{width:42px;height:42px;flex:none;background:rgba(255,255,255,.1);color:#fff} .kbar__wa:hover{background:#25D366} .kbar__wa svg{width:19px;height:19px} .kbar__tel{gap:.5rem;padding:.7rem 1.1rem;background:var(--accent);color:#fff; font-size:.9375rem;font-weight:600;white-space:nowrap} .kbar__tel:hover{background:var(--accent-dk)} .kbar__tel svg{width:17px;height:17px} @media (min-width:1000px){ /* Am PC keine Leiste ueber die ganze Breite — dort wird daraus die Karte, die vorher der Plus-Knopf war. */ .kbar{left:auto;right:clamp(1rem,2.5vw,1.75rem);bottom:clamp(1rem,2.5vw,1.75rem); width:max-content;max-width:27rem;padding:.75rem .9rem} .kbar__status{white-space:normal;overflow:visible} } /* Die Leiste liegt ueber dem Seitenende — sonst verdeckt sie die letzte Footer-Zeile. Am PC ist sie eine Karte in der Ecke und braucht das nicht. */ @media (max-width:999px){ body{padding-bottom:calc(65px + 2 * clamp(.7rem,2vw,1.25rem))} } @media (max-width:420px){ .kbar__tel span{display:none} .kbar__tel{width:42px;height:42px;padding:0} .kbar__status{font-size:.5625rem} } /* Bonus-Zeile in der Kontaktleiste: klein, aber in der Akzentfarbe — sie ist auf dem Handy die einzige Stelle, an der das Angebot steht, sobald die Aktionsleiste weggescrollt ist. */ .kbar__bonus{display:block;font-style:normal;margin-top:.12rem; font-size:.6875rem;font-weight:600;letter-spacing:.005em;color:var(--accent); line-height:1.3} @media (max-width:360px){.kbar__bonus{font-size:.65rem}} /* --- 63. Stoerer im Overlay unter das Schliessen-Kreuz ------------------- */ /* Im Seitenfluss sitzt der Rabatt-Stoerer oben rechts an der Formularkarte. Im Overlay steht dort aber das X — die beiden lagen uebereinander und das Kreuz verdeckte „Rabatt sichern". Im Overlay rutscht der Stoerer deshalb unter das Kreuz; auf den Unterseiten bleibt er, wo er war. */ .ovl .qf__badge{top:58px;right:-10px} @media (max-width:560px){ .ovl .qf__badge{top:52px;right:-6px;width:80px;height:80px} .ovl .qf__badge b{font-size:1.1875rem} } /* --- 66. Drei Schritte waagerecht, Signal laeuft durch ------------------ */ /* Sitzt weit oben auf der Leistungsseite, deshalb ohne Bilder: Punkt, Titel, zwei Saetze. Das Signal laeuft die Bahn entlang und zuendet die Punkte in der Reihenfolge, in der der Kunde sie durchlaeuft. Die Delays sind an der Bahnlaenge gerechnet: die Bahn spannt von 1/6 bis 5/6 der Sektionsbreite, das Signal braucht 3,4 s von ganz links nach ganz rechts. */ /* Der Spalt gehoert in eine Variable: die Bahn muss von Punktmitte 1 bis Punktmitte 3 laufen, und die Spaltenmitte liegt bei (100% - 2*Spalt)/6 — nicht bei 100%/6. Ohne den Abzug beginnt die Bahn 16 px rechts vom ersten Punkt. */ .hs{position:relative;--hsgap:clamp(1.4rem,.8rem + 2.4vw,3.25rem)} .hs__bahn{position:absolute;z-index:0;top:21px; left:calc((100% - 2*var(--hsgap)) / 6);right:calc((100% - 2*var(--hsgap)) / 6); height:2px;background:var(--line);border-radius:2px;overflow:hidden} .hs__bahn i{position:absolute;inset:0; background:linear-gradient(90deg,rgba(242,101,34,0),var(--accent),rgba(242,101,34,0)); background-size:34% 100%;background-repeat:no-repeat; animation:hs-lauf 3.4s var(--e-inout) infinite} @keyframes hs-lauf{from{background-position:-40% 0}to{background-position:140% 0}} .hs__l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--hsgap);text-align:center} .hs__s{position:relative;z-index:1;display:grid;justify-items:center} .hs__pkt{width:44px;height:44px;border-radius:50%;display:grid;place-items:center; background:var(--bg);border:2px solid var(--line); font-family:'Geist Mono',ui-monospace,'SFMono-Regular',monospace; font-size:.8125rem;font-weight:500;color:var(--muted-2); animation:hs-puls 3.4s var(--e-inout) infinite} .sec--alt .hs__pkt{background:var(--bg-alt)} .hs__s:nth-of-type(1) .hs__pkt{animation-delay:.75s} .hs__s:nth-of-type(2) .hs__pkt{animation-delay:1.7s} .hs__s:nth-of-type(3) .hs__pkt{animation-delay:2.65s} @keyframes hs-puls{ 0%,20%{background:var(--accent);border-color:var(--accent);color:#fff; box-shadow:0 0 0 7px rgba(242,101,34,.13)} 38%,100%{background:var(--bg);border-color:var(--line);color:var(--muted-2); box-shadow:0 0 0 0 rgba(242,101,34,0)} } .hs__s h3{margin:1.15rem 0 .5rem;font-size:1.1875rem;line-height:1.25;letter-spacing:-.02em} .hs__s p{font-size:.9375rem;line-height:1.6;color:var(--muted);max-width:26rem} @media (max-width:820px){ .hs__l{grid-template-columns:1fr;gap:1.5rem;text-align:left} .hs__s{grid-template-columns:44px minmax(0,1fr);justify-items:start; column-gap:1.1rem;align-items:start} .hs__s h3{margin:.35rem 0 .4rem} .hs__s h3,.hs__s p{grid-column:2} .hs__s .hs__pkt{grid-column:1;grid-row:1 / span 2} .hs__bahn{top:22px;bottom:22px;left:21px;right:auto;width:2px;height:auto} .hs__bahn i{background:linear-gradient(180deg,rgba(242,101,34,0),var(--accent),rgba(242,101,34,0)); background-size:100% 34%;animation-name:hs-lauf-y} @keyframes hs-lauf-y{from{background-position:0 -40%}to{background-position:0 140%}} } @media (prefers-reduced-motion:reduce){ .hs__bahn i{animation:none;background:var(--accent);background-size:100% 100%;opacity:.35} .hs__pkt{animation:none;background:var(--accent);border-color:var(--accent);color:#fff} } /* --- 67. Einblicke als Wischleiste --------------------------------------- */ /* Loest das Endlos-Laufband ab: das lud 14 img-Tags fuer sieben Motive und animierte dauerhaft. Hier sind es fuenf Bilder, lazy, und Bewegung gibt es nur, wenn jemand wischt oder einen Pfeil drueckt. Das Innenmass der Spur rechnet mit 100% des Elternblocks, NICHT mit 100vw — sonst schiebt die Scrollleiste die erste Kachel aus der Flucht. */ .ew__kopf{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem;align-items:end} .ew__kopf .shead{margin-bottom:clamp(1.6rem,1.2rem + 1.4vw,2.4rem)} .ew__nav{display:flex;gap:.5rem;margin-bottom:clamp(1.6rem,1.2rem + 1.4vw,2.4rem)} .ew__b{width:42px;height:42px;border-radius:var(--r-pill);display:grid;place-items:center; background:var(--bg);border:1px solid var(--line);cursor:pointer; transition:border-color var(--t),background var(--t)} .sec--alt .ew__b{background:var(--bg-alt)} .ew__b:hover{border-color:var(--accent);background:var(--accent-sf)} .ew__b svg{width:17px;height:17px} .ew__b[data-ew="-1"] svg{transform:rotate(180deg)} .ew{overflow:hidden} .ew__spur{display:flex;gap:clamp(.7rem,.4rem + .9vw,1.1rem);overflow-x:auto; scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none; padding-inline:max(var(--gut),calc((100% - var(--wrap)) / 2));padding-bottom:.4rem; /* Ohne scroll-padding rastet die Spur beim Laden sofort auf die erste Kachel und frisst das Innenmass — die Kachel stand dann am Fensterrand statt in der Flucht der Textspalte. */ scroll-padding-inline:max(var(--gut),calc((100% - var(--wrap)) / 2))} .ew__spur::-webkit-scrollbar{display:none} .ew__spur:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:4px} .ew__i{margin:0;position:relative;flex:0 0 clamp(16rem,34vw,25rem);scroll-snap-align:start; border-radius:var(--r-media);overflow:hidden;background:var(--line-2);aspect-ratio:4/3} .ew__i img{width:100%;height:100%;object-fit:cover;display:block} .ew__i figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.5rem .95rem .8rem; font-size:.875rem;font-weight:500;color:#fff; background:linear-gradient(to top,rgba(17,24,32,.74),transparent)} @media (max-width:760px){ .ew__kopf{grid-template-columns:1fr} .ew__nav{display:none} .ew__i{flex:0 0 min(78vw,20rem)} } @media (prefers-reduced-motion:reduce){.ew__spur{scroll-behavior:auto}} /* --- 68. Leistungsumfang als Bildflaeche --------------------------------- */ /* Loest die Positionsliste ab: die war auf dem Handy 2516 px hoch und lud acht Bilder. Hier traegt EIN Foto die Flaeche, die acht Punkte stehen als zwei Spalten darauf. Der Verlauf muss bis hinter die ZWEITE Spalte decken, sonst steht sie auf den hellen Kartons und faellt unter AA — gemessen an den gerenderten Pixeln, nicht geschaetzt. */ .bf{position:relative;border-radius:var(--r-media);overflow:hidden;isolation:isolate; background:var(--bg-dark)} .bf__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:center 35%;z-index:0} .bf::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(100deg,rgba(17,24,32,.96) 0%,rgba(17,24,32,.94) 58%, rgba(17,24,32,.9) 80%,rgba(17,24,32,.42) 100%)} .bf__in{position:relative;z-index:2;padding:clamp(1.6rem,1.1rem + 2.4vw,3.25rem);max-width:60rem} .bf__in h2,.bf__in .kicker{color:#fff} .bf__in h2{margin-bottom:clamp(1.3rem,1rem + 1.2vw,2rem)} .bf__l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(1.2rem,.6rem + 2vw,3rem)} .bf__z{display:grid;grid-template-columns:19px minmax(0,1fr);gap:.8rem;align-items:start; padding:.72rem 0;border-bottom:1px solid rgba(255,255,255,.1)} .bf__z svg{width:18px;height:18px;margin-top:.2rem;color:var(--accent)} .bf__z span{font-size:.875rem;line-height:1.5;color:#A9B3BE} .bf__z b{display:block;font-size:.9375rem;color:#fff;margin-bottom:.1rem} .bf__leg{display:flex;align-items:center;gap:.4rem;margin-top:1.3rem; font-size:.8125rem;color:#8A949F} .bf__leg svg{width:14px;height:14px;color:var(--accent)} @media (max-width:760px){ .bf__l{grid-template-columns:1fr} .bf::after{background:linear-gradient(180deg,rgba(17,24,32,.88) 0%,rgba(17,24,32,.96) 38%)} .bf__bg{object-position:center 22%} } /* --- 69. Einstieg mit drei Kennzahl-Karten ------------------------------ */ /* Heller Grund mit warmem Schimmer von unten — das Gegenstueck zur dunklen Leistungsflaeche darunter. Jede Karte traegt eine kleine Grafik, die die Zahl zeigt statt sie nur zu schmuecken: flache Linie = Preis bleibt, Balken = Antwortzeit, Bogen = Note. */ .eins{ background: radial-gradient(125% 85% at 50% 118%, rgba(242,101,34,.15), transparent 64%), linear-gradient(180deg, var(--bg) 0%, #FAFAF8 55%, var(--bg-alt) 100%); } .eins__kopf{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem 2.5rem; align-items:end;margin-bottom:clamp(1rem,.7rem + 1vw,1.6rem)} .eins__lead{max-width:44rem;margin-bottom:clamp(2rem,1.4rem + 2.2vw,3.25rem); font-size:clamp(1rem,.96rem + .28vw,1.125rem);line-height:1.65;color:var(--muted)} .eins__k{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(.8rem,.5rem + 1vw,1.4rem)} .eins__i{display:flex;flex-direction:column;background:var(--bg); border:1px solid var(--line);border-radius:var(--r-card); padding:clamp(1.3rem,1rem + 1.1vw,1.9rem);box-shadow:var(--sh-1)} .eins__g{display:block;width:100%;height:auto;margin-bottom:clamp(1.1rem,.8rem + 1vw,1.6rem)} /* Die Kennzahl steht mobil in einer schmalen Spalte neben der Grafik — ohne Umbruchfreigabe schiebt ein langes Wort die ganze Seite auf. */ .eins__n{display:block;font-stretch:76%;font-weight:800;text-transform:uppercase; letter-spacing:0;line-height:1;color:var(--ink);overflow-wrap:break-word; font-size:clamp(1.75rem,1.35rem + 1.7vw,2.75rem)} /* Die Zwischenzeile traegt die Aussage: gross und fett genug, um beim Ueberfliegen gelesen zu werden, aber klar unter der Zahl. Bewusst in normaler Breite statt condensed-versal, damit sie sich absetzt. */ .eins__u{display:block;margin-top:.5rem;font-size:clamp(1.0625rem,1rem + .45vw,1.3125rem); font-weight:600;line-height:1.25;letter-spacing:-.02em;color:var(--ink); overflow-wrap:break-word} .eins__t{display:block;margin-top:.55rem;font-size:.9375rem;line-height:1.5;color:var(--muted)} .eins__i--mitte{text-align:center} .eins__i--mitte .eins__t{margin-inline:auto;max-width:17rem} /* Zwischen 861 und 1080 px stehen die drei Karten noch nebeneinander, die Spalte ist dort mit rund 215 px am schmalsten — „6 Fraktionen" und „Zum Stichtag" rissen genau hier in zwei Zeilen. */ @media (min-width:861px) and (max-width:1080px){ .eins__n{font-size:2rem} .eins__u{font-size:1.0625rem} } @media (max-width:860px){ .eins__kopf{grid-template-columns:1fr;align-items:start} .eins__k{grid-template-columns:1fr;gap:.7rem} .eins__n{font-size:clamp(1.4rem,1.1rem + 1.6vw,1.75rem)} .eins__i{display:grid;grid-template-columns:6.75rem minmax(0,1fr); column-gap:1.1rem;align-items:center;padding:1.15rem 1.3rem} /* drei Textzeilen je Karte, die Grafik spannt ueber alle drei */ .eins__g{margin-bottom:0;grid-row:1 / span 3;align-self:center} .eins__i--mitte{text-align:left} .eins__i--mitte .eins__t{margin-inline:0} } /* Auf 320 px bleiben neben der Grafik nur rund 110 px Textbreite — dort zurueck aufs gestapelte Layout, dann steht die Kennzahl wieder in einer Zeile. */ @media (max-width:370px){ .eins__i{grid-template-columns:1fr;justify-items:center;text-align:center; row-gap:.2rem;padding:1.3rem 1rem} .eins__g{grid-row:auto;width:64%;margin:0 auto .7rem} .eins__i--mitte{text-align:center} .eins__i--mitte .eins__t{margin-inline:auto} } /* --- 70. Abschluss-CTA mit angeschnittenem Laptop ----------------------- */ /* Eine Karte in der Sektion, links der Text, rechts laeuft der Laptop aus dem Bild heraus. Der Bildschirm zeigt die echte Seite mit dem Formular, kein Symbolbild. Der Rahmen ist gezeichnet, nicht fotografiert — so bleibt er scharf und kostet 0 KB. */ .lcta{position:relative;overflow:hidden;isolation:isolate; border-radius:var(--r-media); background: radial-gradient(90% 120% at 88% 40%, rgba(242,101,34,.12), transparent 62%), linear-gradient(118deg, #FFFFFF 0%, #F7F7F5 52%, #EFEFEA 100%); border:1px solid var(--line)} .lcta__in{position:relative;z-index:2;max-width:31rem; padding:clamp(1.75rem,1.2rem + 2.6vw,3.5rem)} .lcta__in .kicker{display:block;margin-bottom:.9rem} .lcta__in h2{margin-bottom:1rem} .lcta__in p{font-size:1rem;line-height:1.65;color:var(--muted);margin-bottom:1.6rem} .lcta__wege{display:flex;flex-wrap:wrap;gap:.7rem} .lcta__gz{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.1rem; margin-top:1.3rem;font-size:.8125rem;color:var(--muted-2)} .lcta__gz span{display:inline-flex;align-items:center;gap:.35rem} .lcta__gz svg{width:14px;height:14px;color:var(--accent)} /* Der Laptop: Deckel mit Rand, darunter die Grundplatte. Beide gezeichnet. */ .lap{position:absolute;z-index:1;top:50%;left:54%;width:58%; transform:translateY(-50%);pointer-events:none} .lap__d{border:10px solid #202A36;border-bottom-width:12px;border-radius:14px; background:#202A36;overflow:hidden;box-shadow:0 26px 60px rgba(17,24,32,.22)} .lap__d img{display:block;width:100%;height:auto;border-radius:5px} .lap__f{height:13px;margin:0 -4.2%;border-radius:0 0 12px 12px; background:linear-gradient(180deg,#C9CED4 0%,#A7AEB6 58%,#8D949D 100%)} .lap__f::after{content:"";display:block;width:16%;height:4px;margin:0 auto; border-radius:0 0 4px 4px;background:rgba(17,24,32,.18)} @media (max-width:1100px){ .lcta__in{max-width:27rem} .lap{left:60%;width:64%} } @media (max-width:860px){ /* Mobil steht der Laptop UNTER dem Text und bleibt rechts angeschnitten — ein halber Laptop hinter der Schrift waere dort nicht mehr lesbar. */ .lcta__in{max-width:none;padding-bottom:1.5rem} .lap{position:relative;top:auto;left:auto;transform:none; width:118%;margin:0 0 -6% 4%;padding-bottom:clamp(1.5rem,4vw,2.5rem)} } /* C19, 13.10.2026: Karte ohne Laptop (lcta--ohne-bild, setzt der Stadtseiten-Generator). Der Text steht mittig, mobil bleibt er links und bekommt unten den vollen Innenabstand zurück. */ .lcta--ohne-bild{background: radial-gradient(70% 130% at 50% 0%, rgba(242,101,34,.10), transparent 62%), linear-gradient(180deg, #FFFFFF 0%, #F7F7F5 60%, #EFEFEA 100%)} .lcta--ohne-bild .lcta__in{max-width:56rem;margin-inline:auto;text-align:center} .lcta--ohne-bild .lcta__in > p:not(.lcta__gz){max-width:38rem;margin-inline:auto} .lcta--ohne-bild .lcta__wege,.lcta--ohne-bild .lcta__gz{justify-content:center} @media (max-width:860px){ .lcta--ohne-bild .lcta__in{max-width:none;text-align:left;padding-bottom:clamp(1.75rem,1.2rem + 2.6vw,3.5rem)} .lcta--ohne-bild .lcta__in > p:not(.lcta__gz){max-width:none;margin-inline:0} .lcta--ohne-bild .lcta__wege,.lcta--ohne-bild .lcta__gz{justify-content:flex-start} } /* --- 71. Ueberschriften auf dem Handy eine Stufe groesser ---------------- */ /* Florian, 17.09.2026: „auf der Mobil Version die Schriftgröße aller Überschriften ein bisschen größer". Rund +13 % bei 390 px. Die clamps sind so gerechnet, dass sie bei 760 px exakt auf die bisherigen Werte zulaufen — sonst springt die Schrift beim Drehen eines Tablets. UI-Texte (Formularkopf, Cookie-Hinweis) bleiben, wo sie sind. */ @media (max-width:760px){ .t-hero,.subhero__copy h1,.subhero__copy .subhero__gross,.seitenkopf h1,.artkopf h1{font-size:clamp(1.9rem,1.266rem + 3.73vw,3.3rem)} .t-h2{font-size:clamp(1.5rem,1.554rem + 1.135vw,2.2rem)} .t-h3{font-size:clamp(1.1rem,1.107rem + .23vw,1.3rem)} .hs__s h3{font-size:clamp(1.25rem,1.16rem + .58vw,1.4rem)} .wl__c h3,.bwc__i h3{font-size:clamp(1.15rem,1.1rem + .48vw,1.32rem)} .tile__h{font-size:clamp(1.2rem,1.15rem + .62vw,1.42rem)} .faq summary{font-size:1.125rem} /* Die Startseiten-Hero rechnet in cqi und ist spezifischer als .t-hero — sie braucht ihren eigenen Wert, sonst bleibt sie als einzige klein. */ .hero__c .t-hero{font-size:clamp(1.7rem,9.95cqi,3.5rem)} .lz__c h3{font-size:clamp(1.15rem,1.1rem + .48vw,1.32rem)} .eins__u{font-size:clamp(1.125rem,1.06rem + .42vw,1.28rem)} } /* Auf 320 px reisst die groessere H2 „und das Angebot nicht." in zwei Zeilen und laesst „nicht." allein stehen. Nur dort eine Spur zurueck — ab 361 px bleibt die Vergroesserung voll erhalten. */ @media (max-width:360px){ /* Auf 320 px reissen die langen Komposita die Zeile auf — gemessen: „Betriebsunterbrechung." braucht 335 px, verfuegbar sind 280 px. hyphens:auto hilft hier nicht, headless Chrome hat keine deutschen Trennmuster. Also die Schrift nur auf dieser Breite zurueck. */ .t-h2{font-size:1.5625rem} .t-hero,.subhero__copy h1,.subhero__copy .subhero__gross,.seitenkopf h1,.artkopf h1{font-size:1.625rem} } /* Lange Komposita — „Betriebsunterbrechung", „Haushaltsauflösung" — passen in der vergroesserten Mobilschrift nicht mehr in eine Zeile und schieben die ganze Seite auf. Trennung erlauben statt Schrift verkleinern: sie greift nur dort, wo das Wort sonst ueberlaeuft. */ @media (max-width:760px){ /* Nur lange Komposita trennen. Ohne Untergrenze zerlegt Chrome auch „Umzug" zu „UM-ZUG" — bei einer H1 sieht das nach Fehler aus. 10 Zeichen Mindestlaenge, 4 davor, 4 danach (Florian, 18.09.2026). */ .t-hero,.t-h2,.subhero__copy h1,.subhero__copy .subhero__gross,.seitenkopf h1,.artkopf h1{hyphens:auto;overflow-wrap:break-word; hyphenate-limit-chars:10 4 4} } /* 72 ist frei: dort stand die Hero mit dem Handy in der Hand. Sie ist am 18.09.2026 ersatzlos zurueckgebaut worden — die Startseite traegt wieder die Hero aus §9. Nummer nicht neu vergeben. */ /* --- 74. Standorte: Karte mit Punkten, Liste daneben -------------------- */ /* ACHTUNG Hintergrund: Die Kartenflaeche ist #ECECE8, --bg-alt ist #F6F6F4. Auf grauem Grund verschwindet die Karte fast vollstaendig — diese Sektion muss auf Weiss stehen (gemessen 18.09.2026). Die Punkte sitzen in Prozent; die Mercator-Formel dafuer steht in bau_standorte.py und ist an acht Punkten der Original-SVG geeicht. */ .ort__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.5rem,1rem + 2.5vw,3rem);align-items:start} /* Die Karte ist so breit, dass ihre Hoehe ungefaehr der Liste mit zehn Zeilen entspricht — sonst steht neben der halben Karte nur Weissraum. Seitenverhaeltnis 1000 : 1354. */ .ort__karte{position:relative;max-width:390px;margin-inline:auto;width:100%} .ort__karte img{width:100%;height:auto;display:block} .ort__pins{position:absolute;inset:0} .ort__p{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px; display:flex;align-items:center;justify-content:center; border:0;background:transparent;padding:0;cursor:pointer} .ort__p span{width:11px;height:11px;border-radius:50%;background:#fff; border:3px solid var(--accent);box-shadow:0 1px 4px rgba(17,24,32,.25); transition:transform .2s var(--e-out),background .2s var(--e-out)} .ort__p:hover span,.ort__p:focus-visible span{transform:scale(1.45);background:var(--accent)} .ort__p--an span{transform:scale(1.5);background:var(--accent)} .ort__p--hq span{width:15px;height:15px;background:var(--accent);border-color:#fff} /* ACHTUNG: display:flex ueberstimmt das hidden-Attribut — das ist nur display:none aus dem Browser-Stylesheet und damit schwaecher als eine Klasse. Ohne die Zeile darunter stand die Blase schon beim Laden offen, leer und ohne Stadt (Florian, 18.09.2026). */ .ort__blase[hidden]{display:none} .ort__blase{position:absolute;z-index:5;width:min(250px,80%); display:flex;flex-direction:column;gap:.45rem; padding:.95rem 1rem 1rem;border-radius:var(--r-card);background:var(--ink);color:#fff; box-shadow:0 18px 40px -14px rgba(17,24,32,.5)} .ort__blase::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px; background:var(--ink);transform:translateX(-50%) rotate(45deg)} /* Liegt der Punkt weit oben, kippt die Blase nach unten — dann zeigt der Zipfel nach oben. */ .ort__blase--unten::after{bottom:auto;top:-6px} .ort__zu{position:absolute;top:.35rem;right:.5rem;border:0;background:transparent; color:rgba(255,255,255,.5);font-size:1.1rem;line-height:1;cursor:pointer;padding:.2rem} .ort__zu:hover{color:#fff} .ort__land{font-family:'Geist Mono',ui-monospace,monospace;font-size:.5625rem; letter-spacing:.11em;text-transform:uppercase;color:var(--accent)} .ort__blase b{font-family:'Archivo',sans-serif;font-stretch:76%;font-weight:600; font-size:1.45rem;line-height:1;letter-spacing:-.022em} .ort__info{font-size:.75rem;line-height:1.5;color:rgba(255,255,255,.72)} .ort__tel{display:flex;align-items:center;gap:.4rem;font-size:.8125rem;font-weight:600;color:#fff} .ort__tel svg{width:13px;height:13px;color:var(--accent)} .ort__tel:hover{color:var(--accent)} .ort__go{display:flex;align-items:center;gap:.4rem;margin-top:.15rem;padding-top:.6rem; border-top:1px solid rgba(255,255,255,.14);font-size:.8125rem;font-weight:600; color:var(--accent)} .ort__go svg{width:13px;height:13px} /* Die Liste ist genau so hoch wie die Karte: Das Raster streckt beide auf dieselbe Zeilenhoehe, die Liste rollt intern. Ohne min-height:0 wuerde der Flex-Container statt zu rollen einfach mitwachsen. */ .ort__liste{display:flex;flex-direction:column;min-height:0} .ort__suche{display:flex;align-items:center;gap:.6rem;flex:none;margin-bottom:.7rem; padding:.7rem .95rem;border:1px solid var(--line);border-radius:99px;background:#fff; transition:border-color var(--t) var(--e-out)} .ort__suche:focus-within{border-color:var(--accent)} .ort__suche > svg{width:15px;height:15px;color:var(--accent);flex:none} .ort__suche input{flex:1;min-width:0;border:0;background:transparent;font:inherit; font-size:1rem;color:var(--ink);outline:0} .ort__suche input::placeholder{color:var(--muted-2)} .ort__suche em{flex:none;font-style:normal;font-family:'Geist Mono',ui-monospace,monospace; font-size:.625rem;letter-spacing:.09em;padding:.12rem .45rem;border-radius:99px; background:var(--accent-sf);color:#A8400E;border:1px solid rgba(242,101,34,.26)} /* Wie viele Zeilen sichtbar sind, steht als Zahl in --ort-zeilen und wird je Bildschirmbreite gesetzt: zehn auf dem grossen Schirm, fuenf auf dem Telefon. Eine Zeile = 2 x .5rem Polsterung + 1.45rem Zeilenhoehe. Das .55rem am Ende schneidet die naechste Zeile bewusst an — so sieht man, dass die Liste weitergeht (Florian, 18.09.2026). */ .ort__liste{--ort-zeile:2.45rem;--ort-zeilen:10} .ort__rolle{min-height:0;overflow-y:auto;overscroll-behavior:contain; max-height:calc(var(--ort-zeilen) * var(--ort-zeile) + (var(--ort-zeilen) - 1) * .1rem + .55rem); padding-right:.35rem;scrollbar-width:thin;scrollbar-color:var(--line) transparent} .ort__rolle::-webkit-scrollbar{width:6px} .ort__rolle::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px} .ort__rolle::-webkit-scrollbar-thumb:hover{background:var(--muted-2)} .ort__leer{padding:1.2rem .6rem;font-size:.875rem;line-height:1.6;color:var(--muted)} .ort__leer a{color:var(--accent);font-weight:600} .ort__g{display:grid;grid-template-columns:repeat(2,1fr);gap:.1rem;align-content:start} /* Zeilenhoehe ausdruecklich gesetzt, nicht vom Koerpertext geerbt: die Rollhoehe auf dem Telefon rechnet damit (--ort-zeile weiter unten). Wer hier die Polsterung oder die Zeilenhoehe aendert, muss dort mit. */ .ort__z{display:flex;align-items:center;gap:.5rem;padding:.5rem .6rem;margin-left:-.6rem; border-radius:8px;font-size:.875rem;line-height:1.45rem;color:var(--ink-2); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; transition:background var(--t) var(--e-out),color var(--t) var(--e-out)} .ort__z em{margin-left:auto;font-style:normal;font-family:'Geist Mono',ui-monospace,monospace; font-size:.5625rem;letter-spacing:.09em;color:var(--muted-2);flex:none} .ort__z:hover{background:var(--accent-sf);color:#A8400E} .ort__z--an{background:var(--accent-sf);color:#A8400E; box-shadow:inset 2px 0 0 var(--accent)} .ort__z[hidden]{display:none} /* Die eigene Stadt steht in der Liste, verlinkt aber nicht auf sich selbst: kein , „hier" statt Laenderkuerzel. (Florian, 18.09.2026) */ .ort__z--hier{color:var(--muted-2);cursor:default} .ort__z--hier:hover{background:none;color:var(--muted-2)} .ort__z--hier em{color:var(--accent)} @media (max-width:1200px){.ort__liste{--ort-zeilen:8}} @media (max-width:900px){ .ort__grid{grid-template-columns:1fr} .ort__karte{max-width:340px} .ort__liste{--ort-zeilen:6} /* Auf dem Telefon liegen die engsten Punkte 5 px auseinander (Essen, Düsseldorf, Dortmund — gemessen 18.09.2026). Das ist nicht treffbar; eine Empfehlung fuer Tippziele liegt bei 44 px. Die Karte zeigt hier nur noch die Reichweite, geklickt wird in der Liste darunter. */ .ort__pins{pointer-events:none} .ort__p{cursor:default} .ort__blase{display:none} } @media (max-width:620px){.ort__liste{--ort-zeilen:5}} @media (max-width:360px){.ort__g{grid-template-columns:1fr}} /* --- 75. Stadtseiten: Zertifikate und Halteverbot ----------------------- */ /* Zwischenband an der Stelle der frueheren Kundenlogos: eine Zeile, drei Siegel in Farbe. Bewusst KEINE eigene Sektion mit Ueberschrift und Leitsatz — das ist ein Beleg im Vorbeigehen (Florian, 18.09.2026). */ .zertband{padding-block:clamp(2rem,1.5rem + 1.8vw,3rem);background:var(--bg); border-bottom:1px solid var(--line)} .zertband__z{text-align:center;margin:0 auto clamp(1.3rem,1rem + 1vw,1.9rem); max-width:46rem;font-size:clamp(.9375rem,.9rem + .2vw,1.0625rem);color:var(--muted)} .zertband__z b{color:var(--accent);font-weight:600} .zertband__r{display:flex;align-items:center;justify-content:center;flex-wrap:wrap; gap:clamp(1.5rem,1rem + 2.5vw,3.5rem);list-style:none;margin:0;padding:0} .zertband__r img{height:clamp(62px,6.4vw,86px);width:auto;object-fit:contain;display:block} @media (max-width:520px){.zertband__r{gap:1.25rem} .zertband__r img{height:56px}} /* Google-Siegel im Zertband (Florian, 04.10.2026, zuerst nur /umzug-muenster): drittes Siegel in Trustindex-Optik, breit, gleiche Hoehe wie die ProvenExpert- Siegel, auf dem Desktop links, die beiden ProvenExpert-Siegel rechts daneben. Mobil steht es oben ueber die Blockbreite, die ProvenExpert-Siegel darunter nebeneinander, Aussenkanten buendig. Greift nur, wenn die Liste .zertband__r--google traegt. */ .zertband__r--google{gap:clamp(1.25rem,.75rem + 2.2vw,2.75rem)} .gsiegel{display:flex;align-items:center;gap:.85rem;box-sizing:border-box; height:clamp(62px,6.4vw,86px);padding:0 1.25rem 0 1rem; background:#fff;border:1px solid var(--line);border-radius:12px; box-shadow:0 12px 26px -18px rgba(17,24,32,.45); color:var(--ink);text-decoration:none;white-space:nowrap;line-height:1.15; transition:border-color .2s,box-shadow .2s,transform .2s} .gsiegel:hover{border-color:#D5D5CF;box-shadow:0 16px 30px -18px rgba(17,24,32,.5);transform:translateY(-1px)} .gsiegel:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .gsiegel__logo{width:clamp(30px,3vw,40px);height:auto;flex:none} .gsiegel__body{display:flex;flex-direction:column;gap:.12rem} .gsiegel__kopf{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase; font-weight:600;color:var(--muted)} .gsiegel__note{display:flex;align-items:center;gap:.45rem} .gsiegel__note b{font-size:clamp(1.2rem,.95rem + .9vw,1.55rem);font-weight:700; letter-spacing:-.01em;color:var(--ink)} .gsiegel__note .stars{gap:1px} .gsiegel__note .stars svg{width:15px;height:15px} .gsiegel__anz{font-size:.78rem;color:var(--muted)} @media (max-width:640px){ /* Block mit gleichen Aussenkanten: Google oben ueber die volle Blockbreite, darunter die beiden ProvenExpert-Siegel je eine Haelfte. */ .zertband__r--google{gap:.875rem;max-width:16rem;margin-inline:auto} .zertband__r--google .zertband__g{flex:1 1 100%} .zertband__r--google li:not(.zertband__g){flex:1 1 0;min-width:0} .gsiegel{width:100%;height:84px;justify-content:center;gap:.9rem;padding:0 1rem} .gsiegel__logo{width:38px} .gsiegel__kopf{font-size:.68rem} .gsiegel__note b{font-size:1.6rem} .gsiegel__note .stars svg{width:17px;height:17px} .zertband__r--google img{height:auto;width:100%}} /* Halteverbot: eigener Abschnitt, weil sechs Suchvarianten darauf zulaufen (halteverbotszone, halteverbot umzug, parkplatz reservieren …). */ .hv__g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.7rem,.5rem + .6vw,1rem)} .hv__k{position:relative;padding:clamp(1.2rem,1rem + .8vw,1.7rem); border:1px solid var(--line);border-radius:var(--r-card);background:#fff} .hv__k::after{content:"";position:absolute;inset:auto 0 0 0;height:3px; background:var(--accent);border-radius:0 0 var(--r-card) var(--r-card); transform:scaleX(0);transform-origin:left;transition:transform .45s var(--e-out)} .hv__k:hover::after{transform:none} .hv__n{display:block;font-family:'Geist Mono',ui-monospace,monospace;font-size:.6875rem; letter-spacing:.12em;color:var(--accent);margin-bottom:.8rem} .hv__k b{display:block;font-size:1rem;font-weight:600;letter-spacing:-.014em; color:var(--ink);margin-bottom:.4rem} .hv__k p{margin:0;font-size:.9375rem;line-height:1.6;color:var(--muted)} .hv__hinweis{margin:clamp(1.1rem,.9rem + .8vw,1.6rem) 0 0;padding-top:1.1rem; border-top:1px solid var(--line);font-size:.9375rem;line-height:1.6;color:var(--muted); max-width:56rem} @media (max-width:980px){.hv__g{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.hv__g{grid-template-columns:1fr}} /* --- 73. Blog: Uebersicht, Artikel, Inhaltsverzeichnis ------------------ */ /* Die Kopfzeile ist fest und beim Scrollen 70 px hoch. Alles, was kleben bleibt oder angesprungen wird, muss darunter frei bleiben. */ /* Gemessen am 20.09.2026: Aktionsleiste 0-38 px, Kopfzeile 38-113 px. Bei 112 px lag das Inhaltsverzeichnis exakt unter der Leistenkante und ueberlappte optisch. 136 px lassen 23 px Luft darunter. */ :root{--kopf-frei:136px} /* --- Uebersicht -------------------------------------------------------- */ .blogkopf{padding-bottom:clamp(1.5rem,1rem + 1.6vw,2.5rem)} .blogkopf .t-lead{max-width:44rem} .post__d{margin-top:auto;padding-top:.9rem} /* --- Artikel: Text und Spalte ------------------------------------------ */ /* Der Artikel laeuft schmaler als der Rest der Seite. Sonst muesste der Fliesstext entweder ueber 90 Zeichen je Zeile gehen oder es klafft eine Luecke zur Spalte, die keine Randbreite mehr ist (Florian, 18.09.2026). */ :root{--wrap-art:1080px} .artkopf > .wrap,.art{width:min(100% - var(--gut)*2,var(--wrap-art));margin-inline:auto} .art{display:grid;grid-template-columns:minmax(0,1fr) clamp(264px,29%,324px); gap:clamp(1.25rem,.85rem + 1.4vw,2.25rem);align-items:start; padding-top:clamp(1.5rem,1.1rem + 1.4vw,2.25rem)} .art__side{position:sticky;top:var(--kopf-frei);display:grid;gap:1rem;align-content:start} /* --- Artikelkopf in der Textspalte (Florian, 20.09.2026) ----------------- */ /* Titel, Einleitung und Autor stehen in der linken Spalte, damit alles auf einer Hoehe mit dem Inhaltsverzeichnis daneben beginnt. Der Kopf ist ein eigenes Grid-Item, sonst stuende das Verzeichnis auf dem Handy vor dem Titel. */ .artkopf--in{grid-column:1;margin:0 0 1.5rem} .art__text{grid-column:1} .art__side{grid-column:2;grid-row:1/span 2} .artkopf--in h1{font-size:clamp(1.625rem,1.05rem + 2.1vw,2.375rem); line-height:1.14;letter-spacing:-.028em;margin:.35rem 0 1rem} .artkopf--in .einleitung{font-size:1.0625rem;line-height:1.7;color:var(--ink-2);margin:0 0 1.35rem} .artkopf--in .autor{margin-top:0;padding-top:1.15rem;border-top:1px solid var(--line)} /* --- Kurzfassung, aufklappbar ------------------------------------------- */ .tldr{border:1px solid rgba(242,101,34,.28);background:var(--accent-sf); border-radius:var(--r-card);padding:1.05rem 1.2rem;margin-bottom:1.7rem} .tldr > summary{list-style:none;display:flex;align-items:center;gap:.6rem;cursor:pointer; font-weight:600;color:#A8400E;font-size:.9375rem;letter-spacing:-.01em} .tldr > summary::-webkit-details-marker{display:none} .tldr > summary i{width:22px;height:22px;flex:none;margin-left:auto;position:relative; border:1px solid rgba(242,101,34,.4);border-radius:6px;display:grid;place-items:center} .tldr > summary i::before,.tldr > summary i::after{content:"";position:absolute; background:currentColor;border-radius:2px} .tldr > summary i::before{width:10px;height:1.6px} .tldr > summary i::after{width:1.6px;height:10px;transition:transform var(--t) var(--e-out)} .tldr[open] > summary i::after{transform:rotate(90deg)} .tldr__in{margin-top:.9rem} .tldr__in p{margin:0 0 .85rem;font-size:.9375rem;line-height:1.65;color:var(--ink-2)} .tldr__in ul{display:grid;gap:.5rem;margin:0;padding-left:0;list-style:none} .tldr__in li{position:relative;padding-left:1.45rem;font-size:.9375rem;line-height:1.55;color:var(--ink-2)} .tldr__in li::before{content:"";position:absolute;left:.3rem;top:.6em; width:6px;height:6px;border-radius:50%;background:var(--accent)} /* --- Inhaltsverzeichnis ------------------------------------------------ */ /* Keine Monospace hier: das Verzeichnis gehoert zum Lesefluss und traegt dieselbe Schrift wie der Rest der Seite (Florian, 18.09.2026). */ .toc{border:1px solid var(--line);border-radius:var(--r-card);background:#fff; padding:1.15rem 1.2rem 1.25rem} .toc > summary{list-style:none;display:flex;align-items:center;gap:.5rem;cursor:pointer; font-size:.75rem;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--muted)} .toc > summary::-webkit-details-marker{display:none} .toc > summary svg{width:14px;height:14px;margin-left:auto;color:var(--muted-2); transition:transform var(--t) var(--e-out)} .toc[open] > summary svg{transform:rotate(180deg)} .toc ol{margin-top:.85rem;display:grid;gap:.1rem;counter-reset:toc} .toc a{display:grid;grid-template-columns:1.4rem 1fr;gap:.25rem; padding:.4rem .35rem;border-radius:8px; font-size:.875rem;line-height:1.4;color:var(--ink-2); transition:color var(--t) var(--e-out),background var(--t) var(--e-out)} .toc a::before{counter-increment:toc;content:counter(toc,decimal-leading-zero); font-size:.6875rem;font-weight:500;font-variant-numeric:tabular-nums; color:var(--muted);padding-top:.2em} .toc a:hover{background:var(--bg-alt);color:var(--ink)} /* Der laufende Abschnitt wird markiert, nicht nur eingefaerbt — Farbe allein traegt die Information nicht (WCAG 1.4.1). */ .toc a.ist-da{background:var(--accent-sf);color:#A8400E;font-weight:600; box-shadow:inset 2px 0 0 var(--accent)} .toc a.ist-da::before{color:#A8400E} /* --- CTA-Kasten in der Spalte ------------------------------------------ */ .sbox{background:var(--ink);color:#fff;border-radius:var(--r-card); padding:1.35rem 1.3rem 1.45rem;position:relative;overflow:hidden} .sbox::after{content:"";position:absolute;right:-30%;top:-40%;width:90%;aspect-ratio:1; border-radius:50%;background:radial-gradient(circle,rgba(242,101,34,.28),transparent 68%)} .sbox > *{position:relative;z-index:1} .sbox__k{font-family:'Geist Mono',ui-monospace,monospace;font-size:.625rem; letter-spacing:.11em;text-transform:uppercase;color:var(--accent)} .sbox h3{margin:.5rem 0 .45rem;font-size:1.0625rem;line-height:1.25;letter-spacing:-.02em;color:#fff} .sbox p{margin:0 0 1rem;font-size:.8125rem;line-height:1.5;color:rgba(255,255,255,.76)} .sbox .btn{width:100%;justify-content:center} .sbox__tel{display:flex;align-items:center;justify-content:center;gap:.4rem; margin-top:.6rem;font-size:.8125rem;color:rgba(255,255,255,.72)} .sbox__tel svg{width:14px;height:14px;color:var(--accent)} /* --- Fliesstext -------------------------------------------------------- */ /* Eine Spur groesser als der Rest der Seite: bei 733 px Spaltenbreite kommt der Satz sonst auf 90 Zeichen je Zeile, lesbar sind 70 bis 85. */ .prosa{font-size:clamp(1.0625rem,1.02rem + .2vw,1.125rem);line-height:1.7;color:var(--ink-2)} .prosa > * + *{margin-top:1.15rem} .prosa h2{scroll-margin-top:calc(var(--kopf-frei) + .5rem); margin-top:clamp(2.25rem,1.6rem + 2vw,3rem); font-size:clamp(1.375rem,1.15rem + .95vw,1.75rem);line-height:1.2; letter-spacing:-.025em;color:var(--ink)} .prosa h3{margin-top:1.9rem;font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem); line-height:1.3;letter-spacing:-.018em;color:var(--ink)} .prosa a:not(.btn){color:#A8400E;text-decoration:underline;text-underline-offset:.18em; text-decoration-thickness:1px;text-decoration-color:rgba(168,64,14,.35)} .prosa a:not(.btn):hover{text-decoration-color:currentColor} .prosa strong{color:var(--ink);font-weight:600} /* Die Punkte sitzen absolut, nicht als Grid-Spalte. Ein am Zeilenanfang waere im Grid ein eigenes Item — der Text dahinter faellt dann in die naechste Zelle und bricht Wort fuer Wort um (18.09.2026). */ .prosa ul,.prosa ol{display:grid;gap:.55rem;padding-left:0;list-style:none} .prosa ul li,.prosa ol li{position:relative;padding-left:1.6rem} .prosa ul li::before{content:"";position:absolute;left:.3rem;top:.62em; width:6px;height:6px;border-radius:50%;background:var(--accent)} .prosa ol{counter-reset:pl} .prosa ol li{padding-left:2rem} .prosa ol li::before{counter-increment:pl;content:counter(pl) "."; position:absolute;left:0;top:.2em; font-family:'Geist Mono',ui-monospace,monospace;font-size:.8125rem; color:var(--accent)} /* Tabellen duerfen auf dem Handy wischen, aber nie die Seite aufschieben. */ .prosa .tab{overflow-x:auto;-webkit-overflow-scrolling:touch; border:1px solid var(--line);border-radius:var(--r-card);background:#fff} .prosa table{width:100%;border-collapse:collapse;font-size:.9375rem;min-width:30rem} .prosa th,.prosa td{padding:.7rem .9rem;text-align:left;border-bottom:1px solid var(--line)} /* 11 px auf der hellen Flaeche: --muted-2 kam auf 2,9:1, --muted auf 4,9:1. */ .prosa thead th{background:var(--bg-alt);font-size:.6875rem;letter-spacing:.09em; text-transform:uppercase;font-family:'Geist Mono',ui-monospace,monospace; font-weight:500;color:var(--muted)} .prosa tbody tr:last-child td{border-bottom:0} .prosa td:last-child{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:500} .prosa .kasten{border:1px solid rgba(242,101,34,.28);background:var(--accent-sf); border-radius:var(--r-card);padding:1.1rem 1.2rem} .prosa .kasten b{display:block;margin-bottom:.3rem;color:#A8400E} .prosa .kasten p{margin:0;font-size:.9375rem;line-height:1.6} .prosa figure{margin-top:1.6rem} .prosa figure img{width:100%;height:auto;border-radius:var(--r-card);display:block} .prosa figcaption{margin-top:.55rem;font-size:.8125rem;color:var(--muted)} /* --- Seitenanfang: das Bildband ---------------------------------------- */ /* Das Bild ist nur Bild. Es traegt keinen Text, die Kopfzeile liegt darueber — deshalb nur oben abdunkeln, damit sie lesbar bleibt (Florian, 18.09.2026). */ .artband{position:relative;width:100%;overflow:hidden;background:#0B1016; height:clamp(320px,30vw,520px)} .artband img{width:100%;height:100%;object-fit:cover;object-position:center 45%;display:block} /* Die Abdunklung muss ueber die ganze Kopfzeilenhoehe reichen: Logo und Menue stehen sonst auf einer hellen Bildstelle. 124 px sind Leiste plus Kopfzeile, danach darf das Foto wieder es selbst sein. */ .artband::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(11,16,22,.84) 0px,rgba(11,16,22,.78) 124px, rgba(11,16,22,.34) 62%,rgba(11,16,22,.08) 100%)} /* Der Kopf schliesst an das Band an — die volle Sektionshoehe waere hier eine zweite Luecke nach einer, die schon da ist. */ .artband + .sec{padding-top:clamp(2.25rem,1.8rem + 1.8vw,3.25rem)} /* --- Kopf des Artikels: steht unter dem Bild, auf Weiss ----------------- */ .artkopf{width:min(100% - var(--gut)*2,var(--wrap-art));margin:0 auto clamp(2rem,1.4rem + 2vw,3rem)} .artkopf h1{margin:.35rem 0 .9rem} .artkopf .t-lead{max-width:44rem} .artkopf__meta{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem;margin-bottom:.9rem} .artkopf__meta em{font-style:normal;display:inline-flex;align-items:center; padding:.32rem .58rem;border-radius:var(--r-pill);line-height:1; background:var(--accent-sf);border:1px solid rgba(242,101,34,.26); color:#A8400E;font-weight:500;font-family:'Geist Mono',ui-monospace,monospace; font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase} /* 11 px auf Weiss: --muted-2 kam auf 3,1:1 und damit unter die 4,5:1 der WCAG. --muted misst 4,8:1 (gemessen 18.09.2026). */ .artkopf__meta span{font-family:'Geist Mono',ui-monospace,monospace;font-size:.6875rem; letter-spacing:.09em;text-transform:uppercase;color:var(--muted)} .autor{display:flex;align-items:center;gap:.7rem;margin-top:1.3rem} .autor img{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none} .autor b{display:block;font-size:.875rem;color:var(--ink);letter-spacing:-.012em} .autor span{display:block;font-size:.8125rem;color:var(--muted)} /* Lesezeit steht seit 18.09.2026 unter dem Autor statt oben in der Metazeile — direkt vor Inhaltsverzeichnis und Text. */ .artkopf__zeit{margin-top:1.15rem;font-family:'Geist Mono',ui-monospace,monospace; font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)} @media (max-width:980px){ /* Auf dem Handy zuerst das Inhaltsverzeichnis, dann der Text, ganz zum Schluss der Kasten. display:contents loest die Spalte auf, damit die drei Teile einzeln in die Reihenfolge koennen. */ .art{grid-template-columns:minmax(0,1fr);gap:1.75rem;justify-items:stretch} .art__side{display:contents} /* Auf dem Handy sitzt die Meta-Zeile sonst direkt auf der Bildkante. */ .art{padding-top:2.25rem} .artkopf--in{order:1;grid-column:1;margin-bottom:0} .toc{order:2;position:static} .art__text{order:3;grid-column:1} .sbox{order:4} .sbox{order:3;padding:1.5rem 1.4rem 1.6rem} .sbox h3{font-size:1.1875rem} .sbox p{font-size:.875rem} .prosa{max-width:100%} } /* Knopf unter den drei Teasern auf der Startseite */ .mehr{display:flex;justify-content:center;margin-top:clamp(1.5rem,1rem + 1.6vw,2.25rem)} /* --- 76. Neukunden-Pop-up (1x pro Besuch) ------------------------------- */ /* Aufbau nach Flo-Vorgabe 18.09.2026: oberes Drittel Foto, darunter zwei Drittel Text mit dem 20-%-Stoerer und zwei Knoepfen. Das Ding faehrt NIE ueber ein offenes Formular — siehe popup-Block in der main.js. Ein Overlay auf dem DSGVO-Haken kostet echte Anfragen. */ .pop{ position:fixed;inset:0;z-index:240;display:grid;place-items:center; padding:clamp(1rem,3vw,2rem); background:rgba(8,11,14,.66);backdrop-filter:blur(4px); opacity:0;visibility:hidden;transition:opacity .35s var(--e-out),visibility .35s; } .pop.zeig{opacity:1;visibility:visible} .pop__karte{ position:relative;width:min(100%,430px);max-height:92svh;overflow-y:auto; background:#fff;border-radius:var(--r-card);box-shadow:var(--sh-3); transform:translateY(22px) scale(.98);transition:transform .38s var(--e-out); } .pop.zeig .pop__karte{transform:none} .pop__x{ position:absolute;top:.7rem;right:.7rem;z-index:2;width:34px;height:34px;border-radius:50%; border:none;background:rgba(255,255,255,.92);color:var(--ink);cursor:pointer; display:grid;place-items:center;box-shadow:0 2px 10px rgba(17,24,32,.18); transition:transform var(--t) var(--e-out),background var(--t-fast); } .pop__x:hover{transform:rotate(90deg);background:#fff} .pop__x svg{width:15px;height:15px} /* Oberes Drittel: das Foto. Das Seitenverhaeltnis ist so gewaehlt, dass das Bild rund ein Drittel der Kartenhoehe einnimmt — nachgemessen. */ .pop__bild{position:relative;aspect-ratio:430/172;overflow:hidden; border-radius:var(--r-card) var(--r-card) 0 0;background:var(--bg-alt)} .pop__bild img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block} /* Untere zwei Drittel: der Kontext */ .pop__c{padding:1.25rem clamp(1.15rem,1rem + .6vw,1.5rem) 1.35rem} /* Die schmale Karte laesst das Bild mitschrumpfen, der Text darunter bricht dafuer mehr um — auf 375 px waren es nur noch 25,7 %. Deshalb hier ein hoeheres Format. (gemessen 18.09.2026) */ @media (max-width:480px){.pop__bild{aspect-ratio:343/198}} .pop__c h2{font-size:min(1.5rem,5vw);line-height:1.1;letter-spacing:-.03em; margin:.5rem 0 .55rem;white-space:nowrap} .pop__c h2 .hl{color:var(--accent)} .pop__c > p{font-size:.875rem;line-height:1.55;color:var(--muted);margin:0} .pop__checks{display:grid;gap:.38rem;margin:.85rem 0 0} .pop__checks li{display:grid;grid-template-columns:16px 1fr;gap:.5rem;align-items:start; font-size:.8125rem;font-weight:500;color:var(--ink);line-height:1.35} .pop__checks svg{width:16px;height:16px;color:var(--accent);margin-top:.1rem} .pop__knoepfe{display:grid;gap:.5rem;margin-top:1.1rem} @media (min-width:380px){.pop__knoepfe{grid-template-columns:1fr auto}} .pop__knoepfe .btn{width:100%;justify-content:center} body.pop-offen{overflow:hidden} /* --- 49. Standorte „Leitstand“ (19.09.2026) -------------------------------- Karte + Register nach Region, ersetzt die alte .ort-Sektion. Quelle und Labor: rgn-standorte-sektionen/ (Linux-Rechner). Nur opacity/transform. */ .so-vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .so1__tel{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;color:var(--ink)} .so1__tel svg{width:15px;height:15px;color:var(--accent)} .so1__tel:hover{color:var(--accent)} /* --- 0. Gemeinsame Karte ------------------------------------------------- */ .so-karte{position:relative;width:100%;aspect-ratio:1000/1339.6;user-select:none;-webkit-user-select:none} .so-karte > svg{position:absolute;inset:0;width:100%;height:100%;display:block} .so-land path{fill:#ECECE8;stroke:#fff;stroke-width:1.4;stroke-linejoin:round; vector-effect:non-scaling-stroke;transition:fill var(--t) var(--e-out)} .so-pins{position:absolute;inset:0} .so-pin{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;padding:0;border:0; background:none;display:grid;place-items:center;cursor:pointer;z-index:1; transition:opacity var(--t) var(--e-out)} .so-pin i{display:block;width:11px;height:11px;border-radius:50%;background:#fff; border:2.5px solid var(--accent);box-shadow:0 1px 2px rgba(17,24,32,.2); transition:transform var(--t-fast) var(--e-out),background var(--t-fast) var(--e-out),border-color var(--t-fast) var(--e-out)} .so-pin--hq{z-index:2} .so-pin--hq i{width:16px;height:16px;background:var(--accent);border:3px solid #fff; box-shadow:0 0 0 1.5px var(--accent),0 3px 8px rgba(242,101,34,.35)} .so-pin:hover,.so-pin:focus-visible,.so-pin.is-an{z-index:3} .so-pin:hover i,.so-pin:focus-visible i,.so-pin.is-an i{transform:scale(1.5);background:var(--accent);border-color:#fff} .so-pin:focus-visible{outline:none} .so-pin:focus-visible i{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent)} .so-pin.is-weg{opacity:.16;pointer-events:none} /* Name nur beim Überfahren, mittig über der Nadel (Florian, GMH 15.09.2026) */ .so-tip{position:absolute;left:0;top:0;z-index:6;display:flex;flex-direction:column;align-items:center; transform:translate(-50%,calc(-100% - 15px));padding:.4rem .7rem .45rem;border-radius:8px; background:var(--ink);color:#fff;white-space:nowrap;line-height:1.2;pointer-events:none; box-shadow:0 6px 18px rgba(17,24,32,.18);opacity:0;transition:opacity var(--t-fast) var(--e-out)} .so-tip b{font-size:.8125rem;font-weight:600;letter-spacing:-.005em} .so-tip small{margin-top:.18rem;font-family:'Geist Mono',ui-monospace,monospace;font-size:.5625rem; letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55)} .so-tip small:empty{display:none} .so-tip::after{content:"";position:absolute;left:50%;bottom:-4px;width:9px;height:9px;margin-left:-4.5px; background:var(--ink);transform:rotate(45deg);border-radius:2px} .so-tip--unten{transform:translate(-50%,15px)} .so-tip--unten::after{bottom:auto;top:-4px} .so-tip.is-an{opacity:1} .so-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#fff; border:2.5px solid var(--accent);vertical-align:-1px;flex:none} .so-dot--hq{background:var(--accent)} @keyframes so-ein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* ========================================================================== 1 · LEITSTAND — Karte + Register nach Region ========================================================================== */ .so1__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(2rem,1rem + 4vw,5rem);align-items:center} .so1__buehne{position:relative} .so1__karte{max-width:480px;margin-inline:auto;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent); -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent); mask-composite:intersect} .so1__karte .so-land path.is-region{fill:#FBE1D1} .so1__karte .so-land path.is-vorschau{fill:#F6EEE8} .so1__karte.is-fern .so-pin:not(.so-pin--hq) i{transform:scale(.82)} .so1__karte.is-fern .so-pin:not(.so-pin--hq):hover i,.so1__karte.is-fern .so-pin.is-an i{transform:scale(1.4)} .so1__legende{display:flex;justify-content:center;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:.9rem; font-family:'Geist Mono',ui-monospace,monospace;font-size:.625rem;letter-spacing:.12em; text-transform:uppercase;color:var(--muted-2)} .so1__legende span{display:inline-flex;align-items:center;gap:.5rem} .so1__reg{min-width:0} .so1__suche{display:flex;align-items:center;gap:.65rem;padding:0 .6rem 0 1.05rem;height:3.25rem; border:1px solid var(--line);border-radius:var(--r-pill);background:#fff; transition:border-color var(--t) var(--e-out),box-shadow var(--t) var(--e-out)} .so1__suche:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-sf)} .so1__suche > svg{width:16px;height:16px;color:var(--accent);flex:none} .so1__suche input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent; font-size:1rem;color:var(--ink);-webkit-appearance:none;appearance:none} .so1__suche input::placeholder{color:var(--muted-2)} .so1__suche input::-webkit-search-cancel-button{-webkit-appearance:none} .so1__suche em{flex:none;min-width:2.1rem;padding:.2rem .5rem;border-radius:var(--r-pill); background:var(--accent-sf);color:var(--accent-dk);font-style:normal;text-align:center; font-family:'Geist Mono',ui-monospace,monospace;font-size:.6875rem;font-weight:500} /* Tabs mit Routen-Linie als Indikator (Strich + Punkt, Signatur-Motiv) */ .so1__tabs{position:relative;display:flex;gap:.1rem;margin-top:1.1rem;border-bottom:1px solid var(--line); overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain} .so1__tabs::-webkit-scrollbar{display:none} .so1__tab{flex:none;display:flex;align-items:baseline;gap:.45rem;padding:.85rem .75rem .9rem;border:0; background:none;cursor:pointer;font-family:'Geist Mono',ui-monospace,monospace;font-size:.75rem; font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted); transition:color var(--t) var(--e-out)} .so1__tab:first-child{padding-left:.15rem} .so1__tab em{font-style:normal;font-size:.6875rem;color:var(--muted-2);transition:color var(--t) var(--e-out)} .so1__tab:hover{color:var(--ink)} .so1__tab[aria-selected="true"]{color:var(--ink)} .so1__tab[aria-selected="true"] em{color:var(--accent)} .so1__tab:focus-visible{outline-offset:-3px} .so1__tabstrich{position:absolute;left:0;bottom:-1px;width:100px;height:2px;background:var(--accent); transform-origin:0 50%;transform:translateX(var(--x,0)) scaleX(var(--s,.4));pointer-events:none; transition:transform .5s var(--e-spring),opacity var(--t) var(--e-out)} .so1__tabpunkt{position:absolute;left:0;bottom:-4px;width:8px;height:8px;margin-left:-4px;border-radius:50%; background:var(--accent);transform:translateX(var(--e,40px));pointer-events:none; transition:transform .5s var(--e-spring),opacity var(--t) var(--e-out)} .so1__tabs.is-leer .so1__tabstrich,.so1__tabs.is-leer .so1__tabpunkt{opacity:0} .so1__panels{display:grid;margin-top:.25rem} .so1__panel{grid-area:1/1;min-width:0} .so-js .so1__panel[hidden]{display:block;visibility:hidden;pointer-events:none} .so-js .so1__panel:not([hidden]){animation:so-ein .38s var(--e-out)} .so1__regionen li + li{border-top:1px solid var(--line)} .so1__reg-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto 18px; grid-template-areas:"name zahl pfeil" "orte zahl pfeil";column-gap:1.25rem;align-items:center; width:100%;padding:.95rem .15rem;border:0;background:none;text-align:left;cursor:pointer;color:inherit} .so1__reg-name{grid-area:name;font-size:1.0625rem;font-weight:600;color:var(--ink);line-height:1.3} .so1__reg-orte{grid-area:orte;margin-top:.15rem;font-size:.875rem;line-height:1.45;color:var(--muted)} .so1__reg-zahl{grid-area:zahl;min-width:2.2ch;text-align:right;font-stretch:76%;font-size:2.5rem;font-weight:800; line-height:1;letter-spacing:0;color:transparent;-webkit-text-stroke:1.2px var(--muted-2); transition:color var(--t) var(--e-out),-webkit-text-stroke-color var(--t) var(--e-out)} .so1__reg-zeile > svg{grid-area:pfeil;width:16px;height:16px;color:var(--accent);opacity:.35; transition:transform var(--t) var(--e-out),opacity var(--t) var(--e-out)} .so1__reg-zeile:hover .so1__reg-zahl,.so1__reg-zeile:focus-visible .so1__reg-zahl{color:var(--accent);-webkit-text-stroke-color:var(--accent)} .so1__reg-zeile:hover > svg,.so1__reg-zeile:focus-visible > svg{opacity:1;transform:translateX(3px)} .so1__pkopf{display:flex;flex-direction:column;gap:.1rem;padding:1rem 0 .7rem} .so1__pkopf b{font-stretch:76%;font-weight:700;font-size:1.3125rem;line-height:1.1;letter-spacing:.005em; text-transform:uppercase;color:var(--ink)} .so1__pkopf span{font-size:.8125rem;line-height:1.45;color:var(--muted-2)} .so1__liste{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:1.75rem} .so1__liste li{border-top:1px solid var(--line)} .so1__ort{display:flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:.3rem .15rem; font-size:.9375rem;color:var(--ink-2);transition:color var(--t-fast) var(--e-out)} .so1__ort span{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .so1__ort small{flex:none;font-family:'Geist Mono',ui-monospace,monospace;font-size:.5625rem;letter-spacing:.12em; text-transform:uppercase;color:var(--accent)} .so1__ort em{flex:none;margin-left:auto;font-style:normal;font-family:'Geist Mono',ui-monospace,monospace; font-size:.625rem;letter-spacing:.08em;color:var(--muted-2);transition:opacity var(--t-fast) var(--e-out)} .so1__ort svg{flex:none;width:14px;height:14px;margin-left:-14px;color:var(--accent);opacity:0; transform:translateX(-4px);transition:opacity var(--t-fast) var(--e-out),transform var(--t-fast) var(--e-out)} .so1__ort:hover,.so1__ort:focus-visible,.so1__ort.is-an{color:var(--ink)} .so1__ort:hover em,.so1__ort:focus-visible em,.so1__ort.is-an em{opacity:0} .so1__ort:hover svg,.so1__ort:focus-visible svg,.so1__ort.is-an svg{opacity:1;transform:none} .so1__ort--hq span{font-weight:600;color:var(--ink)} .so1__leer{padding:.9rem 0;font-size:.9375rem;color:var(--muted)} .so1__leer a{color:var(--accent);font-weight:600} .so1__fuss{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem 1.5rem; margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.875rem;color:var(--muted)} .so1__fuss .tlink{font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:.45rem} .so1__fuss .tlink svg{width:15px;height:15px;color:var(--accent)} @media (max-width:900px){ .so1__grid{grid-template-columns:minmax(0,1fr);gap:1.5rem} .so1__karte{max-width:420px} .so-js .so1__karte{aspect-ratio:1/1} /* Einspaltig springt unter den Tabs nichts — die Liste darf ihre eigene Höhe haben */ .so-js .so1__panel[hidden]{display:none} } @media (max-width:420px){ .so1__liste{column-gap:1rem} .so1__ort{font-size:.875rem} .so1__reg-zahl{font-size:1.625rem} } /* 13.10.2026 (Agent Umzug, KW 42): Unter 520 px passen die sechs Regionen-Tabs nicht in eine Reihe (Streifen 452 px, Platz 280–437 px, Scrollbalken versteckt, „Ost 6" abgeschnitten). Deshalb zwei Reihen zu je drei Tabs. Der JS-Strich (.so1__tabstrich/.so1__tabpunkt) kennt nur die Horizontale und bleibt aus; den aktiven Tab zeigt seine Unterkante. */ @media (max-width:520px){ .so1__tabs{flex-wrap:wrap;overflow:visible;gap:0;border-bottom:0} .so1__tab,.so1__tab:first-child{flex:1 1 33.333%;min-width:0;box-sizing:border-box;justify-content:center; padding:.75rem .35rem .8rem;border-bottom:1px solid var(--line)} .so1__tab[aria-selected="true"]{box-shadow:inset 0 -2px 0 var(--accent)} .so1__tabstrich,.so1__tabpunkt{display:none} } @media (prefers-reduced-motion:reduce){ .so-js .so1__panel:not([hidden]){animation:none} .so1__tabstrich,.so1__tabpunkt{transition:none} } /* --- 77. Kicker auf dem Handy + Sprechblase der Standortkarte ----------- */ /* Florian, 19.09.2026: „in der mobil version soll die kleine headline einzeilig sein und bisschen kleiner". Die Laufweite von .14em ist der eigentliche Breitenfresser — sie faellt zuerst, dann der Grad. */ @media (max-width:620px){ .hero__c > .kicker .t-label, .subhero__copy .kicker .t-label{font-size:.625rem;letter-spacing:.1em;white-space:nowrap} } /* Sprechblase: beim Ueberfahren bleibt sie die schmale Vorschau wie bisher. Erst der KLICK macht sie zur Karte mit Telefonnummer und Textlink — und erst dann nimmt sie Klicks an. Sonst wuerde sie beim Wegziehen der Maus verschwinden, bevor man den Link erreicht (Florian, 19.09.2026). */ .so-tip__mehr{display:none} .so-tip.is-fest{pointer-events:auto;padding:.7rem .85rem .75rem;border-radius:11px; box-shadow:0 14px 34px -10px rgba(17,24,32,.45)} .so-tip.is-fest b{font-size:1rem} .so-tip.is-fest small{margin-top:.22rem} .so-tip.is-fest .so-tip__mehr{display:flex;flex-direction:column;align-items:stretch;gap:.4rem; width:100%;margin-top:.6rem;padding-top:.6rem;border-top:1px solid rgba(255,255,255,.16)} .so-tip__tel{display:flex;align-items:center;justify-content:center;gap:.4rem; font-size:.875rem;font-weight:600;color:#fff;white-space:nowrap} .so-tip__tel svg{width:14px;height:14px;flex:none;color:var(--accent)} .so-tip__tel:hover{color:var(--accent)} .so-tip__go{display:flex;align-items:center;justify-content:center;gap:.35rem; padding:.5rem .7rem;border-radius:8px;background:var(--accent);color:#fff; font-size:.8125rem;font-weight:600;white-space:nowrap; transition:background var(--t-fast) var(--e-out)} .so-tip__go:hover{background:var(--accent-dk);color:#fff} .so-tip__go svg{width:13px;height:13px;flex:none} .so-tip__zu{position:absolute;top:.25rem;right:.35rem;display:none;border:0;background:none; color:rgba(255,255,255,.55);font-size:1rem;line-height:1;cursor:pointer;padding:.15rem .25rem} .so-tip.is-fest .so-tip__zu{display:block} .so-tip__zu:hover{color:#fff} /* Auf dem Handy haelt der Finger nichts offen — dort ist die feste Karte der Normalfall und darf breiter werden. */ @media (max-width:900px){ .so-tip.is-fest{min-width:164px} } /* --- 78. Ortsfelder mit Adressvorschlägen -------------------------------- */ /* Die Liste haengt am Feld, nicht am Formular — sonst wandert sie beim Scrollen weg. z-index ueber der Fortschrittsleiste, sonst schneidet die den ersten Vorschlag an. (Florian, 19.09.2026) */ .qf__ort{position:relative} .qf__ort[hidden]{display:none} .qf__ort input{width:100%} .qf__vor{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20; margin:0;padding:.25rem;list-style:none;max-height:13.5rem;overflow-y:auto; background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:var(--sh-3)} .qf__vor[hidden]{display:none} .qf__vor li{padding:.55rem .65rem;border-radius:7px;cursor:pointer; font-size:.875rem;line-height:1.35;color:var(--ink)} .qf__vor li:hover{background:var(--accent-sf);color:#A8400E} .qf--dark .qf__vor{background:var(--bg-dark-2);border-color:var(--line-inv)} .qf--dark .qf__vor li{color:#fff} .qf--dark .qf__vor li:hover{background:rgba(242,101,34,.18);color:#fff} /* --- 79. Bewertungen auf dem Handy kürzen ------------------------------- */ /* Am PC bleiben alle sechs stehen — dort stoert die Laenge nicht, weil die Liste neben der Ueberschrift steht. (Florian, 19.09.2026) */ .bwc__mehr{display:none} @media (max-width:900px){ .bwc__mehr{display:inline-flex;margin-top:1.1rem;width:100%;justify-content:center} .bwc__liste:not(.is-auf) .bwc__i:nth-child(n+3){display:none} } /* --- 80. Zweitzeile im Sub-Hero der Stadtseiten ------------------------- */ /* Die H1 traegt „Umzug ", die H2 direkt darunter „Umzugsunternehmen in ". Zwei Suchbegriffe, zwei Zeilen — vorher standen beide in derselben Ueberschrift und nahmen sich gegenseitig das Gewicht. Optisch eine Unterzeile, semantisch eine H2. (Florian, 19.09.2026) */ /* --- 81. Stadtseiten: Fließtext auf dem Handy kleiner -------------------- */ /* Florian, 19.09.2026: „auf den Local-SEO-Landingpages soll der Fließtext in der Mobilversion immer kleiner werden, weil die Leute den eh kaum lesen." Der Text muss trotzdem da sein — er traegt die Keywords. Also kleiner setzen, nicht kuerzen. 14 bis 14,5 px ist die Grenze, darunter wird es fuer laengere Absaetze unzumutbar. Gilt nur fuer body.stadtseite, damit Hub- und Leistungsseiten ihre Lesegroesse behalten. */ @media (max-width:620px){ body.stadtseite .t-lead, body.stadtseite .eins__lead{font-size:.90625rem;line-height:1.58} body.stadtseite .checks li, body.stadtseite .bf__z, body.stadtseite .cmp__list li{font-size:.875rem;line-height:1.45} body.stadtseite .prose p{font-size:.9375rem} body.stadtseite .hero__checks li{font-size:.90625rem} } /* --- 82. Textlinks sichtbar machen -------------------------------------- */ /* Florian, 19.09.2026: „mach die internen Links z. B. im ersten Absatz ruhig sichtbar, also orange und unterstrichen." ACHTUNG Farbwahl: Reines --accent (#F26522) auf Weiss erreicht nur 3,1:1 — unter den 4,5:1, die WCAG fuer Fliesstext verlangt. Auf hellem Grund steht deshalb #A8400E (6,1:1), der dunklere Ton aus der Palette, den die Standortliste beim Ueberfahren schon nutzt. Auf dunklem Grund ist das volle Orange richtig und gut lesbar. */ .t-lead a:not([class]), .eins__lead a:not([class]), .bf__z a:not([class]), .checks li a:not([class]), .so1__pkopf a:not([class]), .faq__a a, .prose a{ color:#A8400E;font-weight:500; text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px; transition:color var(--t-fast)} .t-lead a:not([class]):hover, .eins__lead a:not([class]):hover, .bf__z a:not([class]):hover, .checks li a:not([class]):hover, .faq__a a:hover, .prose a:hover{color:var(--accent)} /* Auf dunklem Grund traegt das volle Orange */ .subhero__copy .t-lead a:not([class]), .hero__c a:not([class]), .sec--dark a:not([class]), .cta a:not([class]){color:var(--accent)} .subhero__copy .t-lead a:not([class]):hover, .hero__c a:not([class]):hover, .sec--dark a:not([class]):hover, .cta a:not([class]):hover{color:#FF7F45} /* --- 83. Umzugshelfer-Sektion: Text links, Rundbild rechts -------------- */ /* Florian, 19.09.2026: mehr Luft zwischen Fließtext und Haken, und rechts ein Rundbild, damit die Spalte nicht leer steht. Der Text steht in der schmaleren Spalte, deshalb laufen die Haken hier EINSPALTIG — zwei Spalten waeren dort zu eng. */ .uh{align-items:center} .uh .t-lead{margin-bottom:0} .uh .checks{margin-top:clamp(1.4rem,1.1rem + .8vw,2rem)} .uh__bild{display:grid;place-items:center} .uh__bild img{ width:min(100%,clamp(220px,26vw,360px));aspect-ratio:1;border-radius:50%; object-fit:cover;object-position:center 22%;display:block;background:var(--bg-alt); box-shadow:0 18px 44px -18px rgba(17,24,32,.35)} @media (max-width:900px){ .uh__bild{order:-1;margin-bottom:.5rem} .uh__bild img{width:min(64%,240px)} } /* --- Einsatzgebiete ohne eigene Seite ------------------------------------ Flo, 19.09.2026: „Die Karten-Links erst mal alle raus ausser fuer die Seiten, die wir haben. Die Punkte sollen sichtbar sein, aber nirgendwohin fuehren." Die Zeile wird darum zum