/* Metrisch angepasste Ersatzschriften fuer Anton (2026-09-13): gleiche Laufweite wie Anton, damit Ueberschriften vor und nach dem Laden der Webfont gleich umbrechen. Vorher brach die H1 in Arial Black auf zwei Zeilen um und sprang beim Laden auf eine (Desktop-CLS 0,27). size-adjust = Breite Anton / Breite Ersatzschrift, gemessen ueber alle 37 H1-Texte. */ @font-face{font-family:'Anton Fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('LiberationSans-Bold'),local('Helvetica Bold'),local('Helvetica-Bold');size-adjust:68.5%} @font-face{font-family:'Anton Fallback Roboto';src:local('Roboto Bold'),local('Roboto-Bold');size-adjust:74.4%} @font-face{font-family:'Anton Fallback DejaVu';src:local('DejaVu Sans Bold'),local('DejaVuSans-Bold');size-adjust:62%} @font-face{font-family:'Anton Fallback FreeSans';src:local('FreeSans Bold'),local('FreeSansBold');size-adjust:67.6%} /* BandFactory Redesign — Header (Phase 2). Gescoptes Header-CSS aus der Designer-Lieferung (bandfactory-child). Enthaelt bewusst KEINE globalen Resets (*, body, html, a) und keine Hero/Sektionen/Footer-Regeln, damit waehrend der Migration nur der Header neu gestaltet wird und der restliche (noch alte) Seiteninhalt unberuehrt bleibt. Farb-Tokens werden aus theme.json (bf-* Palette) abgeleitet. */ :root{ --bf-bg:var(--wp--preset--color--bf-base);--bf-bg-deep:var(--wp--preset--color--bf-dark); --bf-surface:var(--wp--preset--color--bf-surface); --bf-ink:var(--wp--preset--color--bf-contrast);--bf-muted:var(--wp--preset--color--bf-muted); --bf-line:var(--wp--preset--color--bf-line);--bf-line-2:#DBD4C5; --bf-acc:var(--wp--preset--color--bf-blue);--bf-acc-deep:var(--wp--preset--color--bf-blue-deep);--bf-acc-soft:var(--wp--preset--color--bf-blue-soft); --bf-orange:var(--wp--preset--color--bf-orange);--bf-orange-deep:var(--wp--preset--color--bf-orange-deep); --bf-wa:#25A95B;--bf-glass:rgba(255,255,255,.80); --bf-shadow:0 20px 50px -16px rgba(70,58,34,.22);--bf-r:14px; --bf-disp:'Anton','Anton Fallback','Anton Fallback Roboto','Anton Fallback DejaVu','Anton Fallback FreeSans','Arial Black',system-ui,sans-serif; --bf-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; } /* alles unter .bf-rd-header gescoped, damit nur unser neuer Header betroffen ist */ .bf-rd-header *{box-sizing:border-box} .bf-rd-header a{color:inherit} /* trust strip */ .bf-rd-header .tstrip{background:var(--bf-bg-deep);color:#fff;font-family:var(--bf-body)} .bf-rd-header .tstrip .in{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;padding:8px 24px;font-size:12.5px;font-weight:600} .bf-rd-header .tstrip .it{display:inline-flex;align-items:center;gap:7px} .bf-rd-header .tstrip .it svg{width:15px;height:15px;color:var(--bf-acc)} .bf-rd-header .tstrip b{color:var(--bf-acc)} .bf-rd-header .tstrip .sm{display:none} /* Telefon rechts im schwarzen Balken, senkrecht ueber dem WhatsApp-Button. Desktop-Grid 1fr|auto|1fr: die beiden aeusseren Spalten sind immer gleich breit, dadurch bleibt die USP-Gruppe exakt mittig UND die Nummer kann sie nie ueberlappen - bei Platzmangel schrumpft die Mittelspalte statt zu kollidieren. Greift erst ab 1081px: darunter bleibt .in der alte zentrierte Flex mit .usps als einzigem Kind = unveraendertes Rendering. */ .bf-rd-header .tstrip .usps{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;min-width:0} .bf-rd-header .tstrip .tel{display:inline-flex;align-items:center;gap:7px;white-space:nowrap} .bf-rd-header .tstrip .tel svg{width:15px;height:15px;color:var(--bf-acc)} .bf-rd-header .tstrip .tel .bf-tel{color:#fff;text-decoration:none} .bf-rd-header .tstrip .tel a.bf-tel:hover{text-decoration:underline} .bf-rd-header .tstrip .tel .bf-tel-zeit{opacity:.72;font-weight:500} @media(min-width:1081px){ .bf-rd-header .tstrip .in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;box-sizing:border-box;max-width:1200px;margin:0 auto} .bf-rd-header .tstrip .usps{grid-column:2} .bf-rd-header .tstrip .tel{grid-column:3;justify-self:end} } /* header bar */ .bf-rd-header .header{position:sticky;top:0;z-index:100;backdrop-filter:saturate(1.3) blur(10px);background:rgba(245,242,232,.86);border-bottom:1px solid var(--bf-line);font-family:var(--bf-body)} .bf-rd-header .bar{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:12px 24px} .bf-rd-header .logo{flex:none;display:flex;align-items:center;text-decoration:none} .bf-rd-header .logo img{height:48px;width:auto} .bf-rd-header .hcta{flex:none;text-decoration:none;display:inline-flex;align-items:center;gap:7px;color:#fff;font-weight:700;font-size:14px;padding:10px 16px;border-radius:11px;background:linear-gradient(135deg,var(--bf-orange),var(--bf-orange-deep));box-shadow:0 10px 22px -8px rgba(234,88,12,.45);transition:transform .15s} .bf-rd-header .hcta:hover{transform:translateY(-1px)}.bf-rd-header .hcta svg{width:15px;height:15px} .bf-rd-header .nav{display:flex;align-items:center;gap:1px;margin-left:2px} .bf-rd-header .ni{position:relative} .bf-rd-header .nl{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:600;color:var(--bf-ink);padding:10px 11px;border-radius:9px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:.15s} .bf-rd-header .nl .car{width:9px;height:9px;opacity:.5;transition:transform .2s} .bf-rd-header .ni:hover>.nl{background:#fff;color:var(--bf-acc)}.bf-rd-header .ni:hover>.nl .car{transform:rotate(180deg)} .bf-rd-header .mega{position:absolute;top:calc(100% + 12px);left:0;background:#fff;border:1px solid var(--bf-line);border-radius:var(--bf-r);box-shadow:0 26px 60px -20px rgba(40,34,20,.32),0 3px 10px -5px rgba(40,34,20,.14);padding:18px;display:grid;gap:22px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s;pointer-events:none;z-index:60} .bf-rd-header .mega::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px} .bf-rd-header .ni:hover>.mega{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto} .bf-rd-header .mega.one{grid-template-columns:290px}.bf-rd-header .mega.two{grid-template-columns:224px 224px} .bf-rd-header .ch{font-size:10.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--bf-acc);margin:2px 0 9px 8px;display:flex;align-items:center;gap:6px} .bf-rd-header .ch::before{content:"";width:13px;height:3px;border-radius:2px;background:var(--bf-acc)} .bf-rd-header .ml{display:flex;align-items:center;justify-content:space-between;gap:12px;text-decoration:none;padding:10px 12px;border-radius:10px;transition:background .16s;position:relative} .bf-rd-header .ml:hover{background:var(--bf-acc-soft)} .bf-rd-header .ml .mt{display:flex;flex-direction:column;min-width:0} .bf-rd-header .mt .t{font-size:14px;font-weight:700;line-height:1.2;color:var(--bf-ink);transition:color .16s} .bf-rd-header .mt .d{font-size:11.5px;color:var(--bf-muted);margin-top:3px} .bf-rd-header .ml:hover .mt .t{color:var(--bf-acc)} .bf-rd-header .ml::after{content:"\203A";font-size:19px;font-weight:700;color:var(--bf-acc);opacity:0;transform:translateX(-7px);transition:.16s;flex:none;line-height:1} .bf-rd-header .ml:hover::after{opacity:1;transform:translateX(0)} .bf-rd-header .right{margin-left:auto;display:flex;align-items:center;gap:9px;flex:none} .bf-rd-header .pl{font-size:14px;font-weight:600;text-decoration:none;padding:10px 10px;border-radius:9px;transition:.15s;color:var(--bf-ink)} .bf-rd-header .pl:hover{color:var(--bf-acc);background:#fff} .bf-rd-header .wa{display:inline-flex;align-items:center;gap:7px;text-decoration:none;font-size:13px;font-weight:700;color:var(--bf-wa);border:1.8px solid var(--bf-wa);border-radius:10px;padding:9px 12px;transition:.15s} .bf-rd-header .wa:hover{background:var(--bf-wa);color:#fff}.bf-rd-header .wa svg{width:15px;height:15px} .bf-rd-header .lang{position:relative} .bf-rd-header .lang summary{list-style:none} .bf-rd-header .lang summary::-webkit-details-marker{display:none} .bf-rd-header .lb{display:inline-flex;align-items:center;gap:6px;cursor:pointer;border:none;background:transparent;border-radius:10px;padding:8px 6px;font-size:13px;font-weight:600;color:var(--bf-ink)} .bf-rd-header .lb .fl{font-size:22px}.bf-rd-header .lb .car{width:9px;height:9px;opacity:.5;transition:.2s}.bf-rd-header .lang:hover .car,.bf-rd-header .lang[open] .car{transform:rotate(180deg)} .bf-rd-header .lm{position:absolute;right:0;top:calc(100% + 8px);min-width:142px;background:var(--bf-glass);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.7);border-radius:12px;box-shadow:var(--bf-shadow);padding:6px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s;z-index:60} .bf-rd-header .lang:hover .lm,.bf-rd-header .lang[open] .lm{opacity:1;visibility:visible;transform:translateY(0)} .bf-rd-header .lm a{display:flex;align-items:center;gap:9px;text-decoration:none;font-size:13.5px;font-weight:600;padding:8px 10px;border-radius:8px;color:var(--bf-ink)} .bf-rd-header .lm a:hover{background:var(--bf-acc-soft)}.bf-rd-header .lm .fl{font-size:15px} .bf-rd-header .burger{display:none;margin-left:auto;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px} .bf-rd-header .burger span{width:24px;height:2.5px;background:var(--bf-ink);border-radius:3px;transition:.25s} .bf-rd-header .burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)} .bf-rd-header .burger.open span:nth-child(2){opacity:0} .bf-rd-header .burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)} .bf-rd-header .mp{display:none;border-top:1px solid var(--bf-line);background:rgba(245,242,232,.98);backdrop-filter:blur(10px);padding:10px 18px 22px} .bf-rd-header .mp.open{display:block} .bf-rd-header .acc{border-bottom:1px solid var(--bf-line)} .bf-rd-header .ah{display:flex;align-items:center;justify-content:space-between} .bf-rd-header .ahl{flex:1;padding:15px 4px;font-size:16px;font-weight:700;color:var(--bf-ink);text-decoration:none;font-family:var(--bf-body)} .bf-rd-header .aht{display:flex;align-items:center;background:none;border:none;cursor:pointer;padding:15px 8px} .bf-rd-header .aht .car{width:12px;height:12px;opacity:.5;transition:.2s}.bf-rd-header .acc.open .aht .car{transform:rotate(180deg)}.bf-rd-header .acc.open .ahl{color:var(--bf-acc)} .bf-rd-header .ab{display:none;padding:2px 4px 14px}.bf-rd-header .acc.open .ab{display:block} .bf-rd-header .ab .sec{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--bf-acc);margin:10px 0 6px} .bf-rd-header .ab a{display:block;text-decoration:none;color:var(--bf-muted);font-size:14.5px;font-weight:500;padding:8px 0 8px 12px;border-left:2px solid var(--bf-line)} .bf-rd-header .ab a:hover{color:var(--bf-acc);border-color:var(--bf-acc)} .bf-rd-header .mflat{display:block;text-decoration:none;font-size:16px;font-weight:700;padding:15px 4px;border-bottom:1px solid var(--bf-line);color:var(--bf-ink)} .bf-rd-header .mx{display:flex;flex-direction:column;gap:10px;margin-top:18px} .bf-rd-header .mx .btn,.bf-rd-header .mx .wa{justify-content:center} .bf-rd-header .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-weight:700;font-size:15px;padding:13px 22px;border-radius:12px;cursor:pointer;border:none;font-family:var(--bf-body)} .bf-rd-header .btn-mag{color:#fff;background:linear-gradient(135deg,var(--bf-orange),var(--bf-orange-deep));box-shadow:0 12px 28px -10px rgba(234,88,12,.5)} .bf-rd-header .mlang{display:flex;flex-wrap:wrap;gap:8px;padding:14px 4px;border-top:1px solid var(--bf-line)} .bf-rd-header .mlang a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--bf-ink);font-weight:600;font-size:15px;padding:8px 12px;border:1px solid var(--bf-line);border-radius:10px} .bf-rd-header .mlang a[aria-current]{border-color:var(--bf-acc);color:var(--bf-acc)} .bf-rd-header .mlang .fl{font-size:20px} @media(max-width:1080px){ .bf-rd-header .nav,.bf-rd-header .right .pl,.bf-rd-header .right .wa{display:none} .bf-rd-header .right{display:none} .bf-rd-header .logo img{height:34px} .bf-rd-header .bar{gap:10px;padding:12px 14px} .bf-rd-header .burger{display:flex} } @media(max-width:600px){ /* drei USPs in einer Zeile (passt ab 320 px) */ .bf-rd-header .tstrip .in{gap:14px;padding:8px 10px;font-size:10.5px;letter-spacing:-.1px} .bf-rd-header .tstrip .usps{gap:8px;flex-wrap:nowrap} .bf-rd-header .tstrip .it{gap:4px;white-space:nowrap} .bf-rd-header .tstrip .it svg{width:12px;height:12px} .bf-rd-header .tstrip .lg{display:none} .bf-rd-header .tstrip .sm{display:inline} } /* Header-Leiste < 400 px: Logo+CTA+Burger (387 px) passten nicht in 360/375 px -> seitliches Scrollen. */ @media(max-width:400px){ .bf-rd-header .logo img{height:28px} .bf-rd-header .hcta{padding:8px 11px;font-size:13px} .bf-rd-header .hcta svg{display:none} .bf-rd-header .burger{padding:6px} .bf-rd-header .bar{padding:12px 10px} } /* Sticky-Menü: Header-Wrapper "auflösen" (display:contents), damit die .header- Leiste direkt unter .wp-site-blocks hängt und seitenweit klebt (ihr eigener Container war nur kopfhoch). .tstrip scrollt weg, nur die Nav-Leiste bleibt – wie im Referenz-Design. Footer (