/* ============================================================ AXR-Systems — main.css (Basis + Komponenten) Nutzt Variablen aus tokens.css. Dark Mode über [data-theme]. ============================================================ */ /* ---------- Reset / Basis ---------- */ *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} /* „clip" statt „hidden" — und das ist kein Schönheitsfehler, sondern der Grund, warum die Seitenspalte im Artikel nie klebengeblieben ist. „overflow-x:hidden" auf html oder body macht das Wurzelelement zum Scroll-Container. Damit sucht sich jedes „position:sticky" darunter genau diesen Container als Bezug — und nicht mehr das Sichtfenster. Ergebnis: Die Regel steht da, der Browser ignoriert sie faktisch, und die Tafel scrollt mit weg. Ein Klassiker, der schwer zu finden ist, weil im Quelltext alles richtig aussieht. „overflow-x:clip" schneidet genauso ab, erzeugt aber KEINEN Scroll-Container — sticky funktioniert weiter. Die „hidden"-Zeile bleibt als Rückfall für ältere Browser davor stehen; wer clip kennt, überschreibt sie. Nebenbei: Der seitliche Überlauf, gegen den diese Zeile ursprünglich half, ist inzwischen an der Wurzel behoben (gemessen von 360 bis 1440px kein Überstand). Die Zeile ist nur noch Sicherheitsnetz, nicht Krücke. */ html,body{overflow-x:hidden} html,body{overflow-x:clip} body{margin:0;background:var(--bg);color:var(--ink-2);font-family:var(--font-body);font-size:var(--step-0);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} h1,h2,h3,h4{font-family:var(--font-head);color:var(--ink);line-height:1.12;letter-spacing:-.02em;margin:0} p{margin:0 0 1rem} a{color:inherit;text-decoration:none} img{max-width:100%;height:auto;display:block} ul{margin:0;padding:0} button{font-family:inherit} :focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring);border-radius:8px} .skip-link{position:absolute;left:-9999px;top:0;background:var(--surface);color:var(--ink);padding:.7rem 1rem;border-radius:0 0 var(--r-sm) 0;z-index:200} .skip-link:focus{left:0} /* ---------- Layout ---------- Breiten werden in dieser Datei nach genau drei Kategorien vergeben — wer etwas ergänzt, ordnet es zuerst einer davon zu: 1) SEITENBREITE — Abschnitt, Raster, Sektion, Header, Footer. Immer var(--container). Nur so hat jede Seite dieselbe Kante; genau daher rührte der Eindruck, die Seiten seien unterschiedlich breit. 2) LESEBREITE — Fließtext: Artikeltext, Hero-Lead, Rechtstexte, zentrierte Absätze unter Überschriften. Immer var(--measure). Fließtext wird NICHT auf Seitenbreite aufgezogen, das wäre unlesbar. Vorhandene ch-Angaben (52ch, 68ch, 80ch …) sind dasselbe Prinzip in bewusst engerer oder weiterer Dosierung und bleiben so stehen. 3) KOMPONENTENBREITE — Karte, Formularfeld, Dialog, Bild, Tabelle. Richtet sich nach dem Inhalt, nicht nach der Seite: bleibt als Einzelwert stehen und wird von einer Änderung an --container absichtlich nicht berührt. Header und Footer benutzen dasselbe .container (siehe header.php / footer.php) und haben damit zwangsläufig dieselbe Breite und denselben Außenabstand wie der Inhalt — beides darf nirgends überschrieben werden, sonst springt die Kante beim Scrollen. Sonderfall in den Vorlagen: Wo ein .container selbst nur Fließtext trägt (Rechtstexte, Artikelseiten, 404), steht dort max-width:calc(var(--measure) + 2 * var(--gutter)). Der Innenabstand wird aufgeschlagen, weil er sonst von der Lesebreite abginge und der Text netto rund 80px schmaler geriete als überall sonst. Ausgenommen von allem: die Druckregel weiter unten. */ .container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)} .section{padding:clamp(3.5rem,2rem + 5vw,6rem) 0} /* Hinweis: Der Abschnittsrhythmus bleibt auf dem Telefon bewusst unverändert. Ein Versuch, ihn generell zu straffen, machte die Seite zwar kürzer, nahm ihr aber die Luft — gekürzt wird nur dort, wo tatsächlich eine Leerfläche steht (Fußbereich, Reservierung für die Aktionsleiste). */ .section--tint{background:var(--bg-2)} .section--surface{background:var(--surface-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} /* Abschnittskopf = Überschrift + Einleitungssatz, also Fließtext: Lesebreite. */ .sec-head{max-width:var(--measure);margin-bottom:2.6rem} .sec-head h2{font-size:var(--step-3);margin:.5rem 0 .7rem} .sec-head p{color:var(--muted);margin:0;font-size:var(--step-1)} .eyebrow{font-family:var(--font-head);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brand-2);font-weight:600} .grad-text{background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .muted{color:var(--muted)} .center{text-align:center} .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* Rückfall für .screen-reader-text: Die Klasse kommt sonst nur aus den Block-Styles des WordPress-Kerns. Wird die Datei auf einer Seite nicht geladen, stünde jeder Nur-für-Screenreader-Text sichtbar mitten im Layout — Tabellen-Beschriftungen, Statuswörter, die Live-Zeile des ROI-Rechners. Der Rückfall kostet nichts und schließt die Lücke. */ .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-head);font-weight:600;font-size:.95rem;padding:.8rem 1.35rem;border-radius:var(--r-pill);border:1px solid transparent;cursor:pointer;transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),background var(--dur-1),border-color var(--dur-1)} .btn-primary{background:var(--brand-grad);color:var(--cta-fg);box-shadow:0 8px 24px -8px rgba(79,70,229,.6)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 32px -8px rgba(79,70,229,.7)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn-ghost:hover{border-color:var(--brand-2);transform:translateY(-2px)} .btn-sm{padding:.55rem 1rem;font-size:.85rem} .btn-white{background:#fff;color:var(--brand-1)} /* ---------- Header / Nav ---------- */ .site-header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.4) blur(12px);background:color-mix(in srgb,var(--bg) 80%,transparent);border-bottom:1px solid var(--line)} .nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:1rem} .brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-head);font-weight:700;font-size:1.2rem;letter-spacing:.06em;color:var(--ink)} /* Der Markenlink in der Kopfzeile war nur so hoch wie das Zeichen (32px) und damit das kleinste Ziel der ganzen Seite — ausgerechnet der Weg zurück zur Startseite. Die Kopfzeile ist 72px hoch, der Platz ist also da. */ .site-header .brand-link{display:inline-flex;align-items:center;min-height:44px} .brand svg{width:30px;height:30px;flex:none} .nav-links{display:flex;gap:1.6rem;align-items:center;list-style:none} .nav-links a{font-size:.92rem;color:var(--ink-2);font-weight:500;position:relative;padding:.4rem 0} .nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--brand-grad);transition:width var(--dur-2) var(--ease)} .nav-links a:hover::after,.nav-links .current-menu-item>a::after{width:100%} .nav-tools{display:flex;align-items:center;gap:.5rem} .icon-btn{width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);cursor:pointer;color:var(--ink);transition:border-color var(--dur-1)} .icon-btn:hover{border-color:var(--brand-2)} .lang{display:flex;border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden;font-size:.8rem;font-weight:600} /* min-height statt reinem Innenabstand: Die Pille stand mit 27,6px neben einer 38px-Schaltfläche und einem 42px-Knopf — drei Höhen in einer Reihe, und die kleinste davon wirkte wie hineingerutscht. 36px plus 1px Rahmen oben und unten ergeben exakt die 38px der Icon-Schaltfläche daneben. Über min-height statt height, damit die Pille mitwächst, wenn die Schrift größer gestellt wird. */ /* font-weight ausdrücklich auf 600: Ohne Angabe erbt der Umschalter die 400 vom . Eine Space Grotesk 400 gibt es im Theme nicht, also griff der Browser zum nächsthöheren vorhandenen Schnitt — und lud spacegrotesk-500 (13 KB) auf JEDER Seite nach, allein für die zwei Wörter im Umschalter. Die 600 ist ohnehin schon da, sie trägt jeden Knopf. */ .lang a{padding:.4rem .8rem;min-height:36px;color:var(--muted);font-family:var(--font-head);font-weight:600;display:inline-flex;align-items:center;gap:.42rem;line-height:1} .lang a.is-active{background:var(--brand-grad);color:#fff} /* Sprache ohne Übersetzung DIESER Seite: sichtbar zurückgenommen, damit niemand einen Beitrag erwartet, den es dort nicht gibt. Anklickbar bleibt sie — der Weg zur Übersicht ist besser als kein Weg. */ .lang a.is-ohne{opacity:.5} .lang a.is-ohne:hover,.lang a.is-ohne:focus-visible{opacity:1} .lang-flag{width:18px;height:12.6px;border-radius:2px;overflow:hidden;flex:none;display:block;box-shadow:0 0 0 1px rgba(0,0,0,.12)} [data-theme="dark"] .lang-flag{box-shadow:0 0 0 1px rgba(255,255,255,.18)} .lang-t{display:inline-block} .nav-burger{display:none} /* Sun/Moon icon swap */ .theme-moon{display:none} [data-theme="dark"] .theme-sun{display:none} [data-theme="dark"] .theme-moon{display:block} /* Mobile menu */ /* Die Liste ist länger als der Bildschirm: sieben Hauptpunkte plus neun eingerückte Unterpunkte, darunter Erstgespräch-Button und Sprachwahl — zusammen rund 990px. Auf einem 390px-Gerät bleiben unter der 72px hohen Kopfzeile je nach Modell 590–770px. Weil das Panel fixiert ist und weder Höhengrenze noch Bildlauf hatte, waren die letzten Punkte samt Sprachumschalter schlicht nicht erreichbar. */ .mobile-menu{position:fixed;inset:72px 0 auto 0;background:var(--surface);border-bottom:1px solid var(--line);padding:1rem var(--gutter) 1.5rem;transform:translateY(-120%);transition:transform var(--dur-2) var(--ease);z-index:49;box-shadow:var(--shadow); max-height:calc(100vh - 72px); /* dvh rechnet die eingeblendete Browserleiste mit; vh davor bleibt als Rückfall für ältere Geräte stehen. */ max-height:calc(100dvh - 72px); overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch} .mobile-menu.open{transform:translateY(0);visibility:visible;transition:transform var(--dur-2) var(--ease),visibility 0s} /* ACHTUNG — hier ist eine ganze Navigation unsichtbar in der Tabulator- Reihenfolge gelandet: Das Panel wurde nur mit translateY(-120%) aus dem Bild geschoben. Es blieb display:block, visibility:visible, opacity:1 — und damit blieben seine zwanzig Verweise fokussierbar. Auf dem Desktop tabbte man nach der Kopfzeile durch zwanzig Stationen, die niemand sieht, und der Browser scrollte dabei ins Leere. Zwei Riegel dagegen: 1. Geschlossen ist es visibility:hidden — verzögert, damit die Ausblend-Bewegung noch zu Ende läuft. 2. Oberhalb von 900 px, wo der Umschalter gar nicht angezeigt wird (siehe .nav-burger), ist es display:none. Was es dort nicht gibt, kann auch nicht in die Reihenfolge geraten. */ .mobile-menu{visibility:hidden;transition:transform var(--dur-2) var(--ease),visibility 0s var(--dur-2)} @media(min-width:901px){ .mobile-menu{display:none} } .mobile-menu ul{list-style:none} .mobile-menu a{display:block;padding:.85rem 0;font-family:var(--font-head);font-weight:600;color:var(--ink);border-bottom:1px solid var(--line)} /* Kein seitlicher Innenabstand mehr an den Links: Er betrug .2rem und war der Grund, warum die Beschriftungen um gut 3px gegen Marke, Schaltfläche und Sprachwahl versetzt standen. Jetzt sitzt alles auf derselben Kante. */ /* ---- Zeile mit Aufklapp-Schaltfläche ---- */ .mobile-menu .mobile-row{display:flex;align-items:center;gap:.25rem;border-bottom:1px solid var(--line)} .mobile-menu .mobile-row a{flex:1 1 auto;min-width:0;border-bottom:0} /* Der negative Außenabstand zieht die 44px große Tippfläche über die Inhaltskante hinaus, damit nicht die Schaltfläche, sondern der PFEIL auf derselben Kante endet wie Trennlinie, Erstgespräch-Knopf und Sprachwahl. Rechnung bei 390px: Inhaltskante 356,6 — Pfeil 16px mittig in 44px, also 14px Innenabstand; 14px = .875rem. Vorher standen es -.35rem, der Pfeil endete gut 12px vor der Kante und hing sichtbar in der Luft. */ .mobile-toggle{ flex:none;width:44px;height:44px;margin-right:-.875rem; display:grid;place-items:center; background:none;border:0;padding:0;cursor:pointer;color:var(--muted); border-radius:50%; transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)} .mobile-toggle:hover{color:var(--ink);background:color-mix(in srgb,var(--line) 45%,transparent)} .mobile-toggle:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)} .mobile-toggle svg{display:block;transition:transform var(--dur-1) var(--ease)} /* Zu = Pfeil nach unten (Standard), auf = Pfeil nach oben. */ .mobile-toggle[aria-expanded="false"] svg{transform:rotate(-90deg)} /* ---- Unterpunkte ---- Eingerückt und leiser als die Hauptpunkte; der kurze Strich davor macht die Ebene auch ohne Einrückungsgefühl ablesbar. Die Liste ist ausgeklappt, bis theme.js sie einklappt — ohne JavaScript bleiben alle Links erreichbar. */ .mobile-menu .mobile-sub{margin:0;padding:0} .mobile-menu .mobile-sub[hidden]{display:none} .mobile-menu .mobile-sub a{padding-left:1.15rem;font-weight:500;font-size:.94rem;color:var(--ink-2); border-bottom-color:color-mix(in srgb,var(--line) 55%,transparent)} .mobile-menu .mobile-sub li:last-child a{border-bottom:1px solid var(--line)} .mobile-menu .mobile-sub a::before{content:"";display:inline-block;width:10px;height:1px; background:var(--line);vertical-align:middle;margin-right:.6rem} /* ---------- Footer ---------- */ .site-footer{position:relative;background:var(--surface-2);border-top:1px solid var(--line);padding:2.75rem 0 1.75rem;margin-top:4rem} /* Auf dem Telefon summierten sich Abschlussabstand des letzten Abschnitts, Außenabstand des Footers und dessen Innenabstand auf rund 165px — eine sichtbare Leerzone zwischen letztem Inhalt und Fußbereich. Zwei Drittel davon reichen; der Trennstrich übernimmt die Abgrenzung. */ @media(max-width:640px){ .site-footer{margin-top:1.75rem;padding:1.9rem 0 1.4rem} /* Newsletter-Zeile auf dem Telefon aus dem Fußbereich nehmen: Dort steht sie unter vier bereits ausgeklappten Linklisten, also an der Stelle mit der geringsten Aufmerksamkeit der ganzen Seite — und verlängert den Fuß um einen weiteren Block. Auf /newsletter/ und im Blog bleibt sie erhalten. */ .foot-newsletter{display:none} /* Auch innerhalb des Footers waren die Abstände für Desktop-Spalten gedacht; einspaltig untereinander wirken sie wie Absätze ohne Inhalt. */ .foot-bottom{margin-top:1.6rem;padding-top:1.1rem} /* Hier stand dieselbe Abstandskorrektur noch einmal für .foot-newsletter. Sie war wirkungslos: Der Block ist drei Zeilen darüber in derselben Abfrage auf display:none gesetzt. Entfernt, damit niemand den Wert für wirksam hält, wenn die Zeile eines Tages wieder eingeblendet wird. */ } /* Feiner Verlaufs-Akzent an der Oberkante — dezent, markenfarben. */ .site-footer::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 4%,var(--brand-1) 34%,var(--brand-3) 66%,transparent 96%);opacity:.55;pointer-events:none} [data-theme="dark"] .site-footer{background:var(--bg-2)} /* Newsletter-Zeile (schlanke Variante) über den Spalten, mit eigener Trennkante. */ /* Newsletter am Footer-ENDE: eine schmale, zurückhaltende Zeile über der Rechtsleiste (Kundenwunsch: kompakt, nicht prominent). Der Präfix ».ax-nl[data-axnl]« ist nötig: newsletter.css nutzt dieselbe Attribut- Spezifität und lädt später — ohne die Zusatzstufe verliert jede dieser Regeln den Gleichstand. */ .foot-newsletter{margin-top:2.5rem;padding-top:1.6rem;border-top:1px solid var(--line)} .site-footer .foot-newsletter .ax-nl[data-axnl]{margin-block:0;padding:0;border:0;background:none;box-shadow:none} .site-footer .foot-newsletter .ax-nl[data-axnl] .ax-nl-glow{display:none} .site-footer .foot-newsletter .ax-nl[data-axnl] .ax-nl-inner{ display:grid;grid-template-columns:minmax(240px,.9fr) minmax(340px,1.35fr); gap:.35rem 3rem;align-items:center;padding:0; } /* Modern-flach: kein Eyebrow-Etikett, nur eine ruhige Zeile Text neben dem Eingabefeld — vertikal mittig, damit die Leiste wie EINE Zeile wirkt. */ .site-footer .foot-newsletter .ax-nl[data-axnl] .ax-nl-eyebrow{display:none} .site-footer .foot-newsletter .ax-nl[data-axnl] .ax-nl-h{font-size:.92rem;font-weight:600;line-height:1.45;margin:0;color:var(--ink-2)} .site-footer .foot-newsletter .ax-nl[data-axnl] .ax-nl-lead, .site-footer .foot-newsletter .ax-nl[data-axnl] .ax-nl-trust{display:none} .site-footer .foot-newsletter .ax-nl[data-axnl] .ax-nl-row{ display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem;margin:0; } .site-footer .foot-newsletter .ax-nl[data-axnl] .ax-nl-input input{font-size:.9rem;padding-block:.55rem} .site-footer .foot-newsletter .ax-nl[data-axnl] .ax-nl-go{font-size:.85rem;padding:.55rem 1.1rem} .site-footer .foot-newsletter .ax-nl[data-axnl] .ax-nl-consent{ display:flex;align-items:flex-start;gap:.45rem; margin:.45rem 0 0;font-size:.74rem;line-height:1.4;color:var(--muted); } .site-footer .foot-newsletter .ax-nl[data-axnl] .ax-nl-consent a{color:inherit} .site-footer .foot-newsletter .ax-nl[data-axnl] .ax-nl-consent input{width:15px;height:15px;margin-top:.1rem;flex:none} @media(max-width:820px){ .site-footer .foot-newsletter .ax-nl[data-axnl] .ax-nl-inner{grid-template-columns:1fr;gap:.8rem} } .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.5rem 2.25rem} .foot-grid h3,.foot-grid h4{font-family:var(--font-head);font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 1rem;font-weight:700} .foot-grid a{display:block;color:var(--ink-2);font-size:.9rem;padding:.28rem 0;transition:color var(--dur-1) var(--ease)} .foot-grid a:hover{color:var(--brand-2)} .foot-grid a:focus-visible,.foot-bottom a:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:4px} .foot-list{list-style:none} /* Markenspalte: Logo, Zweizeiler, Kontakt. */ .foot-brand .brand-link{display:inline-block;margin-bottom:.35rem} .foot-tagline{color:var(--muted);font-size:.9rem;line-height:1.65;max-width:36ch;margin:.55rem 0 1.15rem} .foot-contact{list-style:none;display:grid;gap:.15rem;margin:0;padding:0} .foot-contact a{display:inline-flex;align-items:center;gap:.6rem} .foot-contact svg{width:15px;height:15px;flex:none;color:var(--brand-2);opacity:.85} /* Untere Leiste: Copyright, Rechtliches, Sprache + Herkunftshinweis. */ .foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.9rem 1.75rem;margin-top:2.75rem;padding-top:1.4rem;border-top:1px solid var(--line);color:var(--muted);font-size:.82rem} .foot-legal{list-style:none;display:flex;flex-wrap:wrap;gap:.2rem 1.4rem;margin:0;padding:0} .foot-legal a{display:block;color:var(--ink-2);font-size:.82rem;padding:.2rem 0;transition:color var(--dur-1) var(--ease)} .foot-legal a:hover{color:var(--brand-2)} .foot-meta{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.5rem 1.25rem} /* Footer-Raster gestaffelt: unter ~1000px zwei Spalten (Marke volle Breite), unter 700px bleiben zwei schmale Spalten, unter 460px eine. */ @media(max-width:999px){ .foot-grid{grid-template-columns:1fr 1fr} .foot-brand{grid-column:1/-1;max-width:520px} } @media(max-width:459px){ .foot-grid{grid-template-columns:1fr} .foot-bottom{justify-content:flex-start} } /* ---------- Hero ---------- */ .hero{position:relative;overflow:hidden;padding:clamp(3.5rem,2rem + 8vw,7rem) 0 clamp(3rem,2rem + 5vw,5.5rem)} .hero .mesh{position:absolute;inset:-20% -10% auto -10%;height:120%;z-index:0;filter:blur(60px);opacity:.55;pointer-events:none} .hero .blob{position:absolute;border-radius:50%} .hero .b1{width:46vw;height:46vw;background:radial-gradient(circle at 30% 30%,#6366F1,transparent 60%);top:-8%;left:-6%;animation:axFloat1 16s var(--ease) infinite alternate} .hero .b2{width:40vw;height:40vw;background:radial-gradient(circle at 60% 40%,#22D3EE,transparent 60%);top:-4%;right:-8%;animation:axFloat2 20s var(--ease) infinite alternate} .hero .b3{width:34vw;height:34vw;background:radial-gradient(circle at 50% 50%,#A855F7,transparent 62%);bottom:-30%;left:30%;animation:axFloat1 18s var(--ease) infinite alternate} @keyframes axFloat1{to{transform:translate3d(4%,3%,0) scale(1.08)}} @keyframes axFloat2{to{transform:translate3d(-5%,4%,0) scale(1.12)}} .hero .grid-overlay{position:absolute;inset:0;z-index:0;opacity:.5;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:60px 60px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 40%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 40%,transparent 75%)} /* Hero-Textblock und Hero-Lead sind Fließtext, keine Sektion: Sie bleiben auf Lesebreite, auch wenn der Hero selbst über die volle Seitenbreite läuft. Bei 1500px würde eine Überschrift sonst quer über den halben Bildschirm laufen und der Lead darunter auf über 100 Zeichen je Zeile kommen. */ .hero .inner{position:relative;z-index:1;max-width:var(--measure)} .hero h1{font-size:var(--step-4);margin-bottom:1.1rem} .hero .lead{font-size:var(--step-1);color:var(--ink-2);max-width:var(--measure);margin:0 0 2rem} .hero .cta-row{display:flex;gap:.8rem;flex-wrap:wrap} .badge{display:inline-flex;align-items:center;gap:.5rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:.4rem .9rem;font-size:.82rem;font-weight:600;color:var(--ink-2);box-shadow:var(--shadow-sm);margin-bottom:1.4rem} .badge .dot{width:8px;height:8px;border-radius:50%;background:var(--brand-3);box-shadow:0 0 0 4px rgba(34,211,238,.2)} .trust-line{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:2.2rem;color:var(--muted);font-size:.85rem} .trust-line span{display:inline-flex;align-items:center;gap:.45rem} .trust-line svg{width:16px;height:16px;color:var(--brand-2);flex:none} /* ---------- Cards / Grids ---------- Bei 1500px Seitenbreite geprüft (netto ~1420px zwischen den Rändern): grid-4 ergibt ~335px je Kachel, grid-3 ~455px — beides liegt im komfortablen Kartenbereich, die Spaltenzahl bleibt deshalb wie sie ist. Feste Spaltenzahlen sind hier auch nötig: Die Vorlagen liefern bewusst Dreier- und Vierergruppen, ein auto-fit/auto-fill würde daraus je nach Fensterbreite Fünfer- oder Einzelreihen machen. Angepasst wird stattdessen der Abstand: Er wächst mit dem Fenster mit, damit die Kacheln bei 1500px nicht bloß in die Länge gezogen aneinander kleben. Bis ~950px Fensterbreite bleibt die Formel bei den bisherigen 1.2rem, darüber wächst sie auf gut 25px bei 1500px. */ .grid{display:grid;gap:clamp(1.2rem,.55rem + 1.1vw,2.2rem)} .grid-2{grid-template-columns:1fr 1fr} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} .fork-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:2rem;overflow:hidden;transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2)} .fork-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} .fork-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--brand-grad)} .fork-card h3{font-size:var(--step-2);margin-bottom:.5rem} .fork-card .tag{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-2)} .fork-card ul{list-style:none;margin:1.1rem 0 1.4rem} .fork-card li{display:flex;gap:.6rem;padding:.35rem 0;font-size:.95rem} .fork-card li svg{flex:none;width:18px;height:18px;color:var(--brand-2);margin-top:.2rem} .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2),border-color var(--dur-2)} .card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--brand-2) 40%,var(--line))} .card .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--brand-grad-soft);margin-bottom:1rem} .card .ic svg{width:24px;height:24px;color:var(--brand-2)} .card h3,.card h2{font-size:1.15rem;margin-bottom:.4rem;font-weight:700} .card p{font-size:.92rem;color:var(--muted);margin:0 0 .9rem} .card .more{font-size:.88rem;font-weight:600;color:var(--brand-2)} .card--cta{display:grid;place-content:center;text-align:center;background:var(--brand-grad);color:#fff;border:0} .card--cta h3,.card--cta p{color:#fff} /* Stats */ .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;text-align:center} .stat .n{font-family:var(--font-head);font-size:var(--step-3);font-weight:700;color:var(--ink);line-height:1} .stat .l{color:var(--muted);font-size:.9rem;margin-top:.4rem} /* Process steps */ /* Prozess-Schritte stehen auf dem Desktop in EINER Zeile — egal ob es vier oder fünf sind. Vorher waren hier vier Spalten fest verdrahtet; die fünfte Karte rutschte allein in eine zweite Reihe und riss die Zeitleiste ausein- ander. grid-auto-flow:column legt so viele gleich breite Spalten an, wie Karten da sind, ohne dass die Zahl irgendwo im CSS steht. */ .steps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:1.2rem;counter-reset:s} /* Ab sieben Schritten wird eine Zeile zu eng — dann doch umbrechen. Browser ohne :has() ignorieren die Regel; bei vier bis sechs Schritten ändert sie ohnehin nichts. */ .steps:has(> .step:nth-child(7)){grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} /* Unter 1200 px wird eine Fünferzeile zu schmal: drei Spalten lesen sich besser als fünf Streifen mit je vier Wörtern. */ @media(max-width:1199px){ .steps{grid-auto-flow:row;grid-template-columns:repeat(3,1fr)} } .step{position:relative;padding:clamp(1.1rem,.7rem + .7vw,1.6rem);border:1px solid var(--line);border-radius:var(--r);background:var(--surface)} .step::before{counter-increment:s;content:"0" counter(s);font-family:var(--font-head);font-weight:700;font-size:1.6rem;background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .step h3{font-size:1.05rem;margin:.5rem 0 .35rem} .step p{font-size:.88rem;color:var(--muted);margin:0} /* Quote */ .quote{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(2rem,1rem + 3vw,3.5rem);text-align:center;max-width:860px;margin:0 auto;box-shadow:var(--shadow)} .quote p{font-family:var(--font-head);font-size:var(--step-2);color:var(--ink);line-height:1.35;margin:0 0 1.2rem} .quote .who{color:var(--muted);font-size:.9rem} /* Blog cards */ .post-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2)} .post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .post-card .thumb{height:150px;background:var(--brand-grad)} .post-card .body{padding:1.3rem} .post-card .cat{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--brand-2)} .post-card h3{font-size:1.08rem;margin:.5rem 0} .post-card .meta{font-size:.8rem;color:var(--muted)} /* CTA band */ .cta-band{position:relative;overflow:hidden;background:var(--brand-grad);border-radius:var(--r-xl);padding:clamp(2.5rem,1.5rem + 4vw,4.5rem);text-align:center;color:#fff} .cta-band h2{color:#fff;font-size:var(--step-3);margin-bottom:.7rem} /* Zentrierter Absatz unter der CTA-Überschrift: Lesebreite. */ .cta-band p{color:rgba(255,255,255,.9);max-width:var(--measure);margin:0 auto 1.6rem} .cta-band::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 120%,rgba(255,255,255,.25),transparent 50%);pointer-events:none} .cta-band>*{position:relative;z-index:1} /* ---------- Leistungs-/Unterseiten ---------- */ .hero--sub{padding:clamp(2.5rem,1.5rem + 4vw,4rem) 0 clamp(2rem,1rem + 3vw,3rem)} .crumbs{position:relative;z-index:1;display:flex;gap:.5rem;flex-wrap:wrap;font-size:.82rem;color:var(--muted);margin-bottom:1.2rem} .crumbs a:hover{color:var(--brand-2)} .ps-grid .ps-solution{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.8rem;box-shadow:var(--shadow-sm)} .results-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.8rem 1.6rem} .results-list li{display:flex;gap:.7rem;align-items:flex-start;padding:.4rem 0} .results-list li svg{flex:none;width:20px;height:20px;color:var(--brand-2);margin-top:.15rem} .faq-list{display:flex;flex-direction:column;gap:.7rem} .faq-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .faq-item summary{cursor:pointer;padding:1.1rem 1.3rem;font-family:var(--font-head);font-weight:600;color:var(--ink);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:"+";font-size:1.4rem;color:var(--brand-2);transition:transform var(--dur-1)} .faq-item[open] summary::after{content:"–"} .faq-item .faq-a{padding:0 1.3rem 1.2rem;color:var(--muted)} a.card{color:inherit;display:block} @media(max-width:560px){ .results-list{grid-template-columns:1fr} } /* ---------- Fallstudien / Referenzen ---------- */ .fs-kunde{font-family:var(--font-head);font-weight:600;color:var(--ink-2);margin:0 0 .6rem} .fs-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.4rem;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.6rem,1rem + 2vw,2.4rem);box-shadow:var(--shadow-sm)} .fs-kpi .n{font-family:var(--font-head);font-size:var(--step-3);font-weight:700;line-height:1} .fs-kpi .l{color:var(--muted);font-size:.9rem;margin-top:.4rem} .fs-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem} .fs-card{display:flex;flex-direction:column} .fs-card-kpi{display:flex;flex-direction:column;margin-bottom:.7rem} .fs-card-kpi .n{font-family:var(--font-head);font-size:var(--step-2);font-weight:700;line-height:1} .fs-card-kpi .l{color:var(--muted);font-size:.82rem;margin-top:.15rem} .fs-card-kunde{color:var(--muted);font-size:.85rem;font-weight:600;margin:0 0 .5rem} .fs-card .more{margin-top:auto;padding-top:.6rem} /* ---------- Seiteninhalt (page.php) ---------- */ .entry-content{font-size:1.05rem;line-height:1.75} .entry-content h2{font-size:var(--step-2);margin:1.8rem 0 .7rem} .entry-content h3{font-size:1.25rem;margin:1.4rem 0 .5rem} .entry-content p{margin:0 0 1.1rem} .entry-content ul,.entry-content ol{margin:0 0 1.1rem 1.2rem} .entry-content a{color:var(--brand-2);text-decoration:underline;text-underline-offset:3px} /* ---------- Blog ---------- */ .cluster-chips{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:1.4rem;position:relative;z-index:1} .chip{display:inline-flex;padding:.4rem .9rem;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);font-size:.82rem;font-weight:600;color:var(--ink-2)} .chip:hover{border-color:var(--brand-2);color:var(--brand-2)} .chip.is-active{background:var(--brand-grad);color:#fff;border-color:transparent} .post-meta{display:flex;gap:.6rem;flex-wrap:wrap;color:var(--muted);font-size:.88rem;position:relative;z-index:1} /* Zweispaltiges Blog-Layout: Das Raster ist eine Sektion (Seitenbreite), die Textspalte darin bleibt Fließtext (Lesebreite). Die endgültigen Werte setzt der Block „Batch 40" weiter unten; hier steht nur der Grundzustand. */ .article-wrap{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:2.5rem;max-width:var(--container);padding-top:clamp(1.5rem,1rem + 2vw,2.5rem);padding-bottom:1rem} .article-main{min-width:0;max-width:var(--measure)} .article-hero-img{margin:0 0 2rem} .toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.3rem} .toc-title{font-family:var(--font-head);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 .6rem} .toc ol{list-style:none;margin:0;counter-reset:toc} .toc li{margin:.25rem 0} .toc li.lvl3{padding-left:1rem} .toc a{font-size:.9rem;color:var(--ink-2)} .toc a:hover{color:var(--brand-2)} .toc-mobile{display:none;margin:0 0 2rem} /* (abgelöst durch die Sticky-Spalte weiter unten) */ /* Prose (Fließtext-Typografie im Artikel) */ .prose{font-size:1.06rem;line-height:1.75} .prose h2{font-size:var(--step-2);margin:2.2rem 0 .8rem;scroll-margin-top:90px} .prose h3{font-size:1.3rem;margin:1.8rem 0 .6rem;scroll-margin-top:90px} .prose p{margin:0 0 1.2rem} .prose a{color:var(--brand-2);text-decoration:underline;text-underline-offset:3px} .prose ul,.prose ol{margin:0 0 1.2rem 1.2rem} .prose li{margin:.4rem 0} .prose blockquote{border-left:3px solid var(--brand-2);margin:1.5rem 0;padding:.4rem 0 .4rem 1.2rem;color:var(--muted);font-style:italic} .prose img{border-radius:var(--r);margin:1.5rem 0} .prose code{background:var(--surface-2);padding:.15em .4em;border-radius:6px;font-size:.9em} .author-box{display:flex;gap:1rem;align-items:flex-start;margin-top:2.5rem;padding:1.4rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)} /* Feste Kantenlänge: Als Bild dient das Beitragsbild (150px-Thumbnail) — ohne Begrenzung würde es die Autorbox sprengen. */ .author-box .avatar{width:72px;height:72px;object-fit:cover;border-radius:50%;flex:none} /* Marken-Avatar: das Logo-Zeichen auf Markenfläche statt Personenfoto — der Absender ist die Marke, nicht eine Person (Kundenwunsch). */ .author-avatar--brand{display:grid;place-items:center;width:72px;height:72px;flex:none;border-radius:50%;background:var(--brand-grad);box-shadow:var(--shadow-sm)} .author-avatar--brand svg{width:38px;height:38px;color:#fff} .author-name{font-family:var(--font-head);font-weight:700;color:var(--ink);margin:0 0 .2rem} .author-bio{margin:0;color:var(--muted);font-size:.9rem} .pagination{display:flex;gap:.5rem;flex-wrap:wrap} .pagination .page-numbers{display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 .6rem;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink-2);font-weight:600} .pagination .page-numbers.current{background:var(--brand-grad);color:#fff;border-color:transparent} .pagination a.page-numbers:hover{border-color:var(--brand-2)} @media(max-width:900px){ .article-wrap{grid-template-columns:1fr} .article-side{display:none} .toc-mobile{display:block} } /* ---------- Reveal on scroll ---------- */ .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:var(--rev-d,0s)} .reveal.in{opacity:1;transform:none} /* Landet der Fokus per Tabulator in einem noch nicht eingeblendeten Abschnitt, wird er sichtbar — sonst tippt jemand blind. */ .reveal:focus-within{opacity:1;transform:none} /* Der erste Bildschirm wird NICHT eingeblendet. Warum: „.reveal" setzt opacity:0, und die Klasse „.in" vergibt erst theme.js — ein Skript im Fußbereich, zusätzlich mit defer. Die größte Überschrift der Seite (das LCP-Element) war damit erst sichtbar, nachdem das gesamte CSS geparst, das HTML fertig gelesen und 23 KB JavaScript ausgeführt waren. Und ohne JavaScript blieb die Startseite komplett leer. Ein Hero, der beim Laden schon im Bild steht, hat vom Einblenden ohnehin nichts: Es ist vorbei, bevor jemand hinsieht. */ .hero.reveal{opacity:1;transform:none} /* ---------- Responsive ---------- */ @media(max-width:900px){ .grid-2,.grid-3,.grid-4,.stats-grid,.steps{grid-template-columns:1fr 1fr} .steps{grid-auto-flow:row} .nav-links{display:none} .nav-burger{display:grid} .axr-cta-nav{display:none} /* CTA steckt im mobilen Menü */ } @media(max-width:560px){ .grid-2,.grid-3,.grid-4,.stats-grid,.steps{grid-template-columns:1fr} .steps{grid-auto-flow:row} } /* ---------- Reduced motion ---------- */ @media(prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important;scroll-behavior:auto !important} .reveal{opacity:1;transform:none} } /* ============================================================ Batch 3 — Vollbild-Hero, Popup, Sticky-CTA, Feinschliff ============================================================ */ /* Vollbild-Hero (immersiver Einstieg) */ .hero--full{min-height:min(92vh,880px);display:flex;align-items:center} .hero--full .container{width:100%} /* „2rem+6vw" ohne Leerzeichen ist in einer Rechenfunktion ein Syntaxfehler — die gesamte padding-top-Angabe wurde verworfen und der Hero behielt das große Grundpolster. Gleicher Fehler weiter unten bei .hero--sub. */ @media(max-width:640px){ .hero--full{min-height:auto;padding-top:clamp(2.5rem,2rem + 6vw,4rem)} } /* Scroll-Hinweis unter dem Hero */ .hero--full .inner::after{content:"";display:block} /* Lead-Popup Am .ax-popup-card stand „clamp(1.6rem,1rem+3vw,2.4rem)" ohne Leerzeichen um das Plus. Das ist ein Syntaxfehler, die Angabe wurde verworfen — die Karte hatte also gar keinen Innenabstand und der Text klebte am Rahmen. */ .ax-popup{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;transition:opacity .25s var(--ease-out,ease)} .ax-popup.is-open{opacity:1} .ax-popup[hidden]{display:none} .ax-popup-backdrop{position:absolute;inset:0;background:color-mix(in srgb,#020617 62%,transparent);backdrop-filter:blur(3px)} .ax-popup-card{position:relative;z-index:1;width:min(520px,100%);background:var(--surface,#fff);color:var(--ink,#0f172a);border:1px solid var(--line,#e2e8f0);border-radius:var(--r-lg,20px);padding:clamp(1.6rem,1rem + 3vw,2.4rem);box-shadow:0 30px 80px rgba(2,6,23,.35);transform:translateY(12px) scale(.98);transition:transform .25s var(--ease-out,ease)} .ax-popup.is-open .ax-popup-card{transform:none} .ax-popup-card h3{font-size:var(--step-2,1.4rem);margin:.35rem 0 .6rem;line-height:1.25} .ax-popup-card p{color:var(--muted,#64748b);margin:0 0 1.2rem} .ax-popup-actions{display:flex;gap:.6rem;flex-wrap:wrap} .ax-popup-x{position:absolute;top:.6rem;right:.8rem;background:none;border:0;font-size:1.6rem;line-height:1;color:var(--muted,#64748b);cursor:pointer;padding:.2rem .4rem;border-radius:8px} .ax-popup-x:hover{color:var(--ink,#0f172a);background:var(--bg-2,#f1f5f9)} .ax-popup-dismiss{display:block;margin:1rem auto 0;background:none;border:0;color:var(--muted,#64748b);font-size:.9rem;text-decoration:underline;cursor:pointer} /* Mobile Aktionsleiste (.ax-sticky-cta): Die gesamte Gestaltung steht gebündelt am Ende dieser Datei — bewusst nur EINE Quelle dafür. */ /* Preis-Bloecke auf der Produktseite (Tier = Ueberschrift + Liste) */ .entry-content .ax-pricing{margin:1.4rem 0} .entry-content .ax-pricing h3{margin:1.4rem 0 .5rem;font-size:var(--step-1,1.15rem);padding-top:1rem;border-top:1px solid var(--line,#e2e8f0)} .entry-content .ax-pricing h3:first-child{border-top:0;padding-top:0} /* ============================================================ Batch 5 — Vergleichstabelle Die früheren Testimonial-Regeln (.ax-testimonial*, .ax-stars) sind entfallen: Es gibt keine freigegebenen Kundenstimmen, der zugehörige Shortcode rendert stattdessen den Vertrauensblock (.ax-trust*, Plugin). Damit bleibt im Theme keine Sterne-Bewertung übrig. ============================================================ */ /* Vergleichstabelle — hochwertig, strukturiert & symmetrisch: feste, gleich breite Options-Spalten, zentrierte Werte, klare Trenner, Standard-Spalte neutral / AXR-Systems-Spalte als hervorgehobene Empfehlungs-Karte mit Gradient-Header + Badge, Ja/Nein-Icon-Badges. */ .entry-content .ax-compare{overflow-x:auto;margin:2.2rem 0;-webkit-overflow-scrolling:touch;padding:2px} .entry-content .ax-compare table{table-layout:fixed;width:100%;border-collapse:separate;border-spacing:0;min-width:620px;font-size:1rem; background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden; box-shadow:0 22px 50px -30px rgba(2,6,23,.30)} /* Symmetrie: Kriterien-Spalte schmaler, beide Options-Spalten exakt gleich breit. */ .entry-content .ax-compare th:first-child,.entry-content .ax-compare td:first-child{width:30%} .entry-content .ax-compare th:nth-child(2),.entry-content .ax-compare td:nth-child(2), .entry-content .ax-compare th:nth-child(3),.entry-content .ax-compare td:nth-child(3){width:35%} /* Grundzellen */ .entry-content .ax-compare th,.entry-content .ax-compare td{padding:1.05rem 1.2rem;vertical-align:middle;border-bottom:1px solid var(--line)} .entry-content .ax-compare tbody tr:last-child th,.entry-content .ax-compare tbody tr:last-child td{border-bottom:0} /* Vertikale Trenner (nur im Körper) für klare Struktur. */ .entry-content .ax-compare tbody td:nth-child(n+2){border-left:1px solid var(--line)} /* Kopfzeile: Kriterien links & leise, Optionen zentriert & kräftig. */ .entry-content .ax-compare thead th{font-family:var(--font-head);font-weight:700;font-size:.98rem;color:var(--ink);background:var(--surface-2);text-align:center;border-bottom:1px solid var(--line)} .entry-content .ax-compare thead th:first-child{font-family:var(--font-body);font-weight:600;font-size:.76rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);text-align:left;background:var(--surface)} /* Zeilen-Label links; Werte zentriert & symmetrisch. */ .entry-content .ax-compare tbody th{font-weight:650;color:var(--ink);text-align:left} .entry-content .ax-compare tbody td{text-align:center} /* Standard-Spalte: neutral getönte Karte. */ .entry-content .ax-compare tbody td:nth-child(2){background:color-mix(in srgb,var(--muted) 5%,transparent)} /* Empfehlungs-Spalte: hervorgehobene Karte + Gradient-Header + Badge. */ .entry-content .ax-compare .ax-col-axona{background:var(--brand-grad-soft)} .entry-content .ax-compare thead th.ax-col-axona{background:var(--brand-grad);color:#fff;border-bottom-color:transparent} .entry-content .ax-compare thead th.ax-col-axona span.ax-rec{display:inline-flex;align-items:center;gap:.5rem;justify-content:center;flex-wrap:wrap} .entry-content .ax-compare thead th.ax-col-axona::after{content:"Empfohlen";display:inline-block;margin-left:.55rem;font-family:var(--font-body);font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;background:rgba(255,255,255,.24);color:#fff;padding:.16rem .55rem;border-radius:999px;vertical-align:middle;white-space:nowrap} /* Werte mit Icon-Badge, zentriert. WICHTIG: .ax-yes/.ax-no sitzen auf den selbst — daher KEIN display-Wechsel (sonst kollabiert das Tabellen-Layout). Icon inline über ::before. */ .entry-content .ax-compare .ax-yes{color:var(--ink);font-weight:600;line-height:1.4} .entry-content .ax-compare .ax-no{color:var(--muted);font-weight:500;line-height:1.4} .entry-content .ax-compare .ax-yes::before,.entry-content .ax-compare .ax-no::before{content:"";display:inline-block;vertical-align:-.38em;width:22px;height:22px;border-radius:50%;margin-right:.5rem;background-repeat:no-repeat;background-position:center;background-size:13px} .entry-content .ax-compare .ax-yes::before{background-color:color-mix(in srgb,#16a34a 18%,transparent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")} .entry-content .ax-compare .ax-no::before{background-color:color-mix(in srgb,var(--muted) 15%,transparent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")} /* ============================================================ Hero mit KI-Produkt-Mockup (zweispaltig) ============================================================ */ .hero-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center;width:100%} /* Textspalte des zweispaltigen Heros: ebenfalls Lesebreite. Bei 1500px ist die Spalte selbst rund 700px breit — ohne Deckel liefe der Lead voll aus. */ @media(min-width:1000px){ .hero-grid{grid-template-columns:1.02fr .98fr;gap:3rem} .hero-grid .inner{max-width:var(--measure)} } .hero-visual{position:relative;display:flex;justify-content:center} .ax-mockup{position:relative;width:min(500px,100%);background:var(--surface,#fff);border:1px solid var(--line,#e2e8f0);border-radius:20px;padding:1.1rem 1.1rem 1.2rem;box-shadow:0 40px 90px -30px rgba(2,6,23,.5),0 8px 30px rgba(2,6,23,.08)} @media(min-width:1000px){ .ax-mockup{transform:rotate(-1.4deg)} } .ax-mockup-bar{display:flex;align-items:center;gap:.4rem;padding:.2rem .3rem .8rem} .ax-mockup-bar .d{width:10px;height:10px;border-radius:50%;display:inline-block} .ax-mockup-bar .dr{background:#ff5f57}.ax-mockup-bar .da{background:#febc2e}.ax-mockup-bar .dg{background:#28c840} .ax-mockup-url{margin-left:.6rem;font-size:.8rem;color:var(--muted,#64748b)} .ax-mockup-stats{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:.2rem 0 .9rem} .ax-mstat{border:1px solid var(--line,#e2e8f0);border-radius:12px;padding:.8rem .9rem;background:var(--bg-2,#f8fafc);display:flex;flex-direction:column;gap:.15rem} .ax-mstat .l{font-size:.62rem;letter-spacing:.06em;color:var(--muted,#64748b);text-transform:uppercase} .ax-mstat .v{font-family:var(--font-head,inherit);font-size:1.35rem;font-weight:750;color:var(--ink,#0f172a);line-height:1.1} .ax-mstat .up{font-size:.72rem;color:#16a34a;font-weight:600} .ax-mstat .s{font-size:.72rem;color:var(--muted,#64748b)} .ax-mockup-chart{display:flex;align-items:flex-end;gap:.5rem;height:74px;margin:.2rem .2rem 1rem} .ax-mockup-chart span{flex:1;border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,#7c5cff,#6366f1);opacity:.9} .ax-mockup-rows{display:flex;flex-direction:column;gap:.5rem} .ax-mockup-rows .mr{display:flex;align-items:center;gap:.6rem;font-size:.86rem} .ax-mockup-rows .n{color:var(--ink,#0f172a);font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ax-mockup-rows .b{font-size:.66rem;font-weight:700;color:#6d5efc;background:color-mix(in srgb,#6d5efc 12%,transparent);border-radius:999px;padding:.12rem .5rem} .ax-mockup-rows .t{color:var(--muted,#64748b);font-variant-numeric:tabular-nums;font-size:.8rem} .ax-mockup-chip{position:absolute;display:inline-flex;align-items:center;gap:.3rem;font-size:.78rem;font-weight:600;color:#0f766e;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:999px;padding:.4rem .7rem;box-shadow:0 8px 20px rgba(2,6,23,.12)} .ax-mockup-chip.chip-top{top:-14px;right:-8px} .ax-mockup-chip.chip-bottom{bottom:-14px;left:-8px} @media(max-width:520px){ .ax-mockup-chip.chip-top{right:0} .ax-mockup-chip.chip-bottom{left:0} } [data-theme="dark"] .ax-mockup-chip{color:#6ee7b7;background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.3)} /* Aufgeräumt (Tiefencheck 2026-08): Das frühere Vertrauens-/Standards-Band (.ax-trustband, .ax-trust-eyebrow, .ax-trust-logos, .ax-logo-ph, .ax-trust-note, .ax-trust-points) existiert in keinem Template mehr (alte front-page.php); Regeln entfernt. */ /* ============================================================ Batch 4 — Geräte-Feinschliff (Responsive-Optimierung alle Breakpoints) ============================================================ */ /* Kopfzeile: Im Mobil-/Burger-Modus wandert der Sprachumschalter ins Menü, damit die obere Leiste auch auf sehr kleinen Geräten (≤360px) nie überläuft. */ @media(max-width:900px){ .nav-tools .lang{display:none} .nav .nav-tools{gap:.4rem} .icon-btn{width:44px;height:44px} /* größere Touch-Ziele */ } .nav-tools{flex-shrink:0} .site-header .nav{gap:.5rem} /* Sprachumschalter im mobilen Menü */ /* Erstgespräch-Knopf im mobilen Menü: volle Breite, gleicher Abstand nach oben wie die Sprachwahl darunter — die drei Blöcke (Menü, Knopf, Sprache) sitzen damit in einem Raster statt in drei verschiedenen. Der Selektor braucht ZWEI Klassen: „.mobile-menu a" (eine Klasse + ein Element) schlägt sonst „.btn" und „.btn-primary" und überschrieb damit genau die drei Eigenschaften, die den Knopf ausmachen — der Text stand ohne seitlichen Innenabstand links an der Kante, in dunkler Textfarbe auf violettem Grund, mit einer Trennlinie quer unter dem Knopf. */ .mobile-menu .mobile-cta{ width:100%;display:flex;align-items:center;justify-content:center;margin-top:1.1rem; padding:.95rem 1.35rem; color:var(--cta-fg,#fff); border-bottom:0; text-align:center} /* Sprachwahl im mobilen Menü. Vorher stand die Pille als schmaler Block rechts neben der Beschriftung — zwei Kästchen von je rund 60px in einem 353px breiten Panel, optisch ein Fremdkörper zwischen zwei vollbreiten Elementen (Erstgespräch-Button oben, Menüzeilen darüber). Jetzt: Beschriftung auf eigener Zeile, darunter die Pille über die volle Breite mit zwei gleich großen Hälften. Damit liegen Button, Menü und Sprachwahl auf denselben Kanten. */ .mobile-lang{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--line)} .mobile-lang__label{display:block;margin-bottom:.55rem;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .mobile-lang .lang{display:grid;grid-template-columns:1fr 1fr;width:100%} /* „display" muss hier ausdrücklich stehen: „.lang a" und „.mobile-menu a" haben dieselbe Spezifität (0,1,1), und „.mobile-menu a{display:block}" steht weiter unten in dieser Datei — es gewann. Damit verlor die Pille ihr Flex-Layout, die Flagge rutschte ÜBER das Kürzel und die Schaltfläche wurde doppelt so hoch. Drei Klassen (0,3,1) beenden den Streit. */ .mobile-lang .lang a{display:flex;align-items:center;justify-content:center;gap:.55rem; padding:.85rem 1rem;font-size:.9rem;line-height:1.2;border-bottom:0} /* Im Menü ist Platz für den ausgeschriebenen Namen — „DE" und „EN" sind eine Abkürzung für die Kopfzeile, wo jeder Pixel zählt. Wer die Sprache wechseln will, sucht „Deutsch" und „English", nicht zwei Buchstaben. */ .lang-full{display:none} .mobile-lang .lang-t{display:none} .mobile-lang .lang-full{display:inline-block} .mobile-lang .lang a + a{border-left:1px solid var(--line)} .mobile-lang .lang a.is-active + a{border-left-color:transparent} /* Vergleichstabelle: auf kleinen Geräten kompakter + weicher horizontaler Scroll mit Rand-Verlauf als Hinweis, dass seitlich mehr Inhalt kommt. */ @media(max-width:560px){ .entry-content .ax-compare{ -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; /* Der Verlauf endete auf voll durchsichtig. Bei 353px sichtbarer Breite sind das die letzten 28px — und die blieben auch dann blass, wenn man ganz nach rechts gescrollt hat, also genau dort, wo die Empfehlungs- spalte steht. Der Saum bleibt als Hinweis erhalten, hört aber bei 45% Deckkraft auf, damit kein Inhalt unlesbar wird. */ -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 20px),rgba(0,0,0,.45)); mask-image:linear-gradient(90deg,#000 calc(100% - 20px),rgba(0,0,0,.45)); } .entry-content .ax-compare table{min-width:440px;font-size:.9rem} .entry-content .ax-compare th,.entry-content .ax-compare td{padding:.6rem .6rem} .entry-content .ax-compare::-webkit-scrollbar{height:6px} .entry-content .ax-compare::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px} } /* Bilder & Medien im Inhalt nie breiter als der Container */ .entry-content img,.entry-content video,.entry-content iframe,.entry-content pre{max-width:100%;height:auto} .entry-content pre{overflow-x:auto} /* Wortumbruch für sehr lange Wörter/URLs auf schmalen Screens */ .entry-content,.hero p,.card p{overflow-wrap:break-word} /* Formulare: Eingaben ≥16px, damit iOS beim Fokus nicht heranzoomt. Die Aufzählung zählte nur text/email/tel auf. Das Suchfeld aus searchform.php (404-Seite, Suchergebnisse) ist type="search" und fiel dadurch durch das Raster — es bekommt von keiner Regel im Theme eine Schriftgröße, gilt also mit den rund 13px des Browser-Standards und löste den Zoom aus. Die übrigen Typen stehen vorsorglich mit dabei: Sie sind dieselbe Art Eingabefeld, und die nächste Redaktions- oder Formularzeile soll nicht wieder einzeln nachgetragen werden müssen. Nicht aufgeführt sind checkbox/radio/range/submit — dort ist die Schriftgröße entweder wirkungslos oder sie würde die Schaltfläche vergrößern. */ @media(max-width:600px){ .ax-form input,.ax-form select,.ax-form textarea, input[type=text],input[type=email],input[type=tel],input[type=search], input[type=number],input[type=url],input[type=password],input[type=date], input:not([type]),textarea,select{font-size:16px} } /* ============================================================ Batch 5 — Immersive Vollbild-Heroes auf allen Seiten, Conversion-CTAs, Scroll-Hinweis ============================================================ */ /* Unterseiten-Heroes werden zum immersiven Vollbild-Einstieg (vertikal zentriert). */ .hero--sub{min-height:min(80vh,760px);display:flex;align-items:center} .hero--sub .container{width:100%} .hero--sub .inner{margin-top:0} /* Ausnahme: Lese-/Rechtsseiten bleiben kompakt (Artikel, Impressum, Datenschutz …). Ohne !important tragfähig: Diese Regel steht NACH .hero--sub (gleiche Spezifität) und die 100vh-Desktop-Regel schließt .hero--compact selbst aus. */ .hero--compact{min-height:0;display:block} /* Auf der Artikelseite trägt der Hero nur Brotkrumen, Titel und Meta-Zeile — er bekommt ruhiges Polster statt der Bühnen-Höhe anderer Unterseiten, und unten bewusst wenig: Der Abstand zum Beitragsbild entsteht sonst doppelt (Hero-Polster + Polster des Artikelrahmens). */ .ax-article .hero--compact{padding:clamp(1.9rem,1.4rem + 1.6vw,2.75rem) 0 clamp(1.1rem,.8rem + 1vw,1.6rem)} @media(max-width:640px){ /* Leerzeichen um das Plus: ohne sie war die Angabe ungültig (siehe .hero--full). */ .hero--sub{min-height:auto;padding-top:clamp(2.2rem,1.6rem + 6vw,3.4rem)} } /* Conversion: CTA-Reihe im Hero */ .hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:1.8rem} .hero-cta .hero-hint{font-size:.85rem;color:var(--muted)} /* Animierter Scroll-Hinweis am unteren Hero-Rand */ .hero--full::after, .hero--sub:not(.hero--compact)::after{ content:"";position:absolute;left:50%;bottom:20px;width:20px;height:20px; transform:translateX(-50%) rotate(45deg); border-right:2px solid var(--muted);border-bottom:2px solid var(--muted); opacity:.45;z-index:1;pointer-events:none; animation:axScrollCue 1.9s var(--ease) infinite; } @keyframes axScrollCue{0%,100%{opacity:.3;bottom:22px}50%{opacity:.65;bottom:13px}} @media(max-width:640px){ .hero--full::after,.hero--sub::after{display:none} } @media(prefers-reduced-motion:reduce){ .hero--full::after,.hero--sub::after{animation:none} } /* ============================================================ Batch 6 — Größeres Bündel: Premium-Inhaltstypografie, FAQ-Akkordeon, Lesefortschritt, Card-Hover, Abschluss-CTA ============================================================ */ /* ---- Premium-Typografie für Inhaltsseiten ---- */ .entry-content{font-size:1.04rem;line-height:1.72} .entry-content > h2{font-size:var(--step-2);margin:2.6rem 0 .9rem} .entry-content > h2:first-child{margin-top:.4rem} .entry-content > h2::before{content:"";display:block;width:46px;height:4px;border-radius:4px;background:var(--brand-grad);margin-bottom:.9rem} .entry-content h3{font-size:1.2rem;margin:1.7rem 0 .5rem;color:var(--ink)} .entry-content p{margin:0 0 1.15rem} .entry-content p.lead,.entry-content > p:first-of-type{font-size:1.12rem;color:var(--ink-2)} .entry-content a{color:var(--brand-2);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--brand-2) 45%,transparent);transition:text-decoration-color var(--dur-1)} .entry-content a:hover{text-decoration-color:var(--brand-2)} .entry-content strong{color:var(--ink)} .entry-content ul{list-style:none;margin:0 0 1.2rem;padding:0} .entry-content ul li{position:relative;padding-left:1.75rem;margin:.5rem 0} .entry-content ul li::before{content:"";position:absolute;left:0;top:.34em;width:1.05rem;height:1.05rem;border-radius:50%;background:color-mix(in srgb,#16a34a 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,#16a34a 40%,transparent)} .entry-content ul li::after{content:"";position:absolute;left:.34rem;top:.62em;width:.32rem;height:.16rem;border-left:2px solid #16a34a;border-bottom:2px solid #16a34a;transform:rotate(-45deg)} .entry-content ol{margin:0 0 1.2rem;padding-left:1.3rem} .entry-content ol li{margin:.45rem 0;padding-left:.3rem} .entry-content blockquote{margin:1.6rem 0;padding:1.1rem 1.3rem;border-left:4px solid var(--brand-2);background:var(--surface-2);border-radius:0 12px 12px 0;color:var(--ink-2)} .entry-content blockquote p:last-child{margin:0} .entry-content > table:not([class]){width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.97rem} .entry-content > table:not([class]) th,.entry-content > table:not([class]) td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--line)} .entry-content hr{border:0;border-top:1px solid var(--line);margin:2.2rem 0} .entry-content h2 + h3{margin-top:.8rem} /* ---- FAQ-Akkordeon ---- */ .ax-faq-item{border:1px solid var(--line);border-radius:14px;margin:.65rem 0;background:var(--surface);overflow:hidden;transition:border-color var(--dur-1),box-shadow var(--dur-2)} .ax-faq-item.open{border-color:color-mix(in srgb,var(--brand-2) 40%,var(--line));box-shadow:0 10px 30px -18px rgba(2,6,23,.25)} .ax-faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.05rem 1.2rem;background:none;border:0;cursor:pointer;text-align:left;font-family:var(--font-head);font-weight:600;font-size:1.06rem;color:var(--ink);line-height:1.4} .ax-faq-q:hover{color:var(--brand-2)} .ax-faq-ic{position:relative;width:18px;height:18px;flex:none} .ax-faq-ic::before,.ax-faq-ic::after{content:"";position:absolute;background:var(--brand-2);border-radius:2px;transition:transform var(--dur-2) var(--ease),opacity var(--dur-1)} .ax-faq-ic::before{top:8px;left:0;width:18px;height:2px} .ax-faq-ic::after{left:8px;top:0;width:2px;height:18px} .ax-faq-item.open .ax-faq-ic::after{transform:scaleY(0);opacity:0} .ax-faq-a{max-height:0;overflow:hidden;transition:max-height var(--dur-2) var(--ease);padding:0 1.2rem} .ax-faq-item.open .ax-faq-a{max-height:1200px;padding-bottom:1.05rem} .ax-faq-a p{margin:0 0 .7rem;color:var(--ink-2)} .ax-faq-a > *:last-child{margin-bottom:0} /* ---- Lesefortschritts-Leiste (Artikel) ---- Eigene Klasse (.ax-read-progress), damit sie NICHT mit der pro-Frage- Fortschrittsleiste des KI-Check-Tools (.ax-progress aus dem Plugin) kollidiert. */ .ax-read-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--brand-grad);z-index:60;transition:width .08s linear;pointer-events:none} /* ---- Card-Hover / Micro-Interactions ---- */ .card,.fork-card,.fs-card{transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),border-color var(--dur-1)} .card:hover,.fork-card:hover,.fs-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px -20px rgba(2,6,23,.30);border-color:color-mix(in srgb,var(--brand-2) 38%,var(--line))} .card .ic{transition:transform var(--dur-2) var(--ease)} .card:hover .ic{transform:scale(1.08) rotate(-3deg)} @media(prefers-reduced-motion:reduce){ .card:hover,.fork-card:hover,.fs-card:hover{transform:none} .card:hover .ic{transform:none} .ax-faq-a{transition:none} } /* ============================================================ Batch 7 — Vollbild-Sektionen: nicht nur der Hero, sondern jeder Abschnitt füllt mind. den Bildschirm (Desktop). Inhalt wird vertikal zentriert; längere Inhalte fließen sauber weiter (margin-block:auto kollabiert dann ohne Überlappung/Abschnitt). ============================================================ */ @media(min-width:900px){ html{scroll-padding-top:80px} /* Alle Standard-Sektionen bildschirmfüllend + vertikal zentriert. „safe center“ zentriert kurzen Inhalt symmetrisch (edles Weißraum-Gefühl) und richtet langen Inhalt oben aus, sodass nichts abgeschnitten wird. */ .section{min-height:100vh;display:flex;flex-direction:column;justify-content:safe center} .section > .container{width:100%} /* Kompakte Abschnitte: nicht zwingend bildschirmfüllend, sondern nur so hoch wie nötig — verhindert leere Flächen bei kurzen, dichten Sektionen. */ .section--compact{min-height:auto;padding-top:clamp(3rem,2rem + 4vw,6rem);padding-bottom:clamp(3rem,2rem + 4vw,6rem)} /* Heroes ebenfalls voll (kompakte Lese-/Rechtsseiten ausgenommen) */ .hero--full{min-height:100vh} .hero--sub:not(.hero--compact){min-height:100vh} /* Der Vollbild-Scroll-Hinweis sitzt weiterhin am unteren Rand */ } /* Sicherheits-Ausnahme: sehr lange Inhaltssektionen dürfen wachsen (min-height greift, Zentrierung kollabiert automatisch). */ /* ============================================================ Batch 8 — Feinschliff: Teilen-Buttons, Text-Auswahl, dezenter Scrollbar-Stil (Desktop) ============================================================ */ /* Teilen-Leiste unter Artikeln */ .ax-share{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:2rem 0 0;padding-top:1.5rem;border-top:1px solid var(--line)} .ax-share-label{font-size:.8rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.09em;margin-right:.15rem} .ax-share-btn{display:inline-flex;align-items:center;gap:.4rem;justify-content:center;min-width:40px;height:40px;padding:0 .75rem;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--ink-2);cursor:pointer;font-family:var(--font-head);font-weight:600;font-size:.85rem;line-height:1;transition:border-color var(--dur-1),color var(--dur-1),transform var(--dur-1),background var(--dur-1)} .ax-share-btn:hover{border-color:var(--brand-2);color:var(--brand-2);transform:translateY(-2px)} .ax-share-btn.is-copied{border-color:#16a34a;color:#16a34a;background:color-mix(in srgb,#16a34a 8%,transparent)} /* Text-Auswahl in Markenfarbe */ ::selection{background:color-mix(in srgb,var(--brand-2) 28%,transparent);color:var(--ink)} /* Dezenter, markiger Scrollbar (nur Desktop; Firefox + WebKit) */ @media(min-width:900px){ html{scrollbar-width:thin;scrollbar-color:var(--line) transparent} ::-webkit-scrollbar{width:12px;height:12px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--line);border-radius:10px;border:3px solid var(--bg)} ::-webkit-scrollbar-thumb:hover{background:var(--muted)} } /* ============================================================ Batch 9 — Feinschliff: „Nach oben“, 404-Schnellzugriff, Druck ============================================================ */ /* Nach-oben-Button (nur Desktop; auf Mobil gibt es den Sticky-CTA) */ .ax-top{position:fixed;right:clamp(1rem,2vw,2rem);bottom:clamp(1rem,2vw,2rem);width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow);opacity:0;transform:translateY(12px) scale(.92);pointer-events:none;transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),border-color var(--dur-1),color var(--dur-1);z-index:55} .ax-top.show{opacity:1;transform:none;pointer-events:auto} .ax-top:hover{border-color:var(--brand-2);color:var(--brand-2);transform:translateY(-2px)} .ax-top svg{width:20px;height:20px} @media(max-width:899px){ .ax-top{display:none} } @media(prefers-reduced-motion:reduce){ .ax-top{transition:opacity var(--dur-1)} } /* 404 – Schnellzugriff-Kacheln */ .ax-quicklinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;max-width:620px;margin:2rem auto 0} .ax-quicklink{display:flex;flex-direction:column;gap:.15rem;padding:1rem 1.1rem;border:1px solid var(--line);border-radius:14px;background:var(--surface);text-align:left;transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2),border-color var(--dur-1)} .ax-quicklink:hover{transform:translateY(-3px);box-shadow:0 16px 34px -18px rgba(2,6,23,.28);border-color:color-mix(in srgb,var(--brand-2) 40%,var(--line))} .ax-quicklink b{font-family:var(--font-head);color:var(--ink);font-size:1rem} .ax-quicklink span{font-size:.85rem;color:var(--muted)} /* ---- Druck-Stile: sauberer Ausdruck von Artikeln & Rechtstexten ---- */ @media print{ .site-header,.site-footer,.mobile-menu,.ax-sticky-cta,.ax-top,.ax-read-progress,.ax-share, .ax-popup,#axPopup,.cta-band,.hero .mesh,.hero .grid-overlay,.article-side,.toc-mobile, .hero-cta,.hero--full::after,.hero--sub::after,.author-box{display:none !important} html,body{background:#fff !important;color:#000 !important} .hero,.section{min-height:0 !important;display:block !important;padding:0 !important} .container{max-width:100% !important} .entry-content{font-size:12pt;line-height:1.5} .entry-content h1,.entry-content h2,.entry-content h3,.hero h1{color:#000 !important} .entry-content h2::before{display:none} a{color:#000 !important;text-decoration:underline} .ax-faq-item{border:1px solid #ccc;break-inside:avoid} .ax-faq-a{max-height:none !important;padding:0 1rem 1rem !important} .grad-text{-webkit-text-fill-color:#000 !important;color:#000 !important} } /* ============================================================ Batch 10 — Abschnitts-Punktnavigation + Menü-Scrollspy ============================================================ */ .ax-dots{position:fixed;right:clamp(.8rem,1.4vw,1.7rem);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:.85rem;z-index:54} .ax-dot{position:relative;width:11px;height:11px;border-radius:50%;border:1.5px solid var(--muted);background:transparent;display:block;transition:background var(--dur-1),border-color var(--dur-1),transform var(--dur-1) var(--ease)} .ax-dot:hover{border-color:var(--brand-2);transform:scale(1.25)} .ax-dot.active{background:var(--brand-grad);border-color:transparent;transform:scale(1.3)} .ax-dot-tip{position:absolute;right:22px;top:50%;transform:translateY(-50%) translateX(6px);background:var(--surface);border:1px solid var(--line);color:var(--ink);font-family:var(--font-head);font-size:.78rem;font-weight:600;padding:.25rem .6rem;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--shadow-sm);transition:opacity var(--dur-1),transform var(--dur-1) var(--ease)} .ax-dot:hover .ax-dot-tip,.ax-dot:focus-visible .ax-dot-tip{opacity:1;transform:translateY(-50%) translateX(0)} @media(max-width:1100px){ .ax-dots{display:none} } /* Aktiver Menüpunkt (Scrollspy) */ .nav-links a.is-current{color:var(--ink)} .nav-links a.is-current::after{width:100%} /* ============================================================ Batch 11 — Interne Verlinkung (Leistung ↔ Fallstudie, Geschwister-Leistungen) ============================================================ */ .related-case{display:grid;grid-template-columns:1.4fr .9fr;gap:clamp(1rem,2vw,2rem);align-items:center;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:clamp(1.3rem,2.4vw,2.1rem);box-shadow:var(--shadow-sm);transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1),border-color var(--dur-1)} .related-case:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--brand-2)} .related-case-body h3{font-size:var(--step-2);margin:.35rem 0 .6rem;color:var(--ink)} .related-case-body p{color:var(--ink-2);margin:0 0 1rem;max-width:52ch} .related-more{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-head);font-weight:700;color:var(--brand-2)} .related-case:hover .related-more span[aria-hidden]{transform:translateX(4px)} .related-more span[aria-hidden]{transition:transform var(--dur-1) var(--ease)} .related-case-kpis{display:grid;gap:.9rem;border-left:1px solid var(--line);padding-left:clamp(1rem,2vw,1.8rem)} .related-case-kpis .n{display:block;font-family:var(--font-head);font-weight:800;font-size:clamp(1.5rem,3.6vw,2.1rem);line-height:1.05} /* Die Beschriftung kommt aus der Redaktion und ist beliebig lang. In der schmalen KPI-Spalte (mobil rund 130px) sprengt ein Kompositum wie „Bearbeitungszeit" die Spalte, weil overflow-wrap hier nicht vererbt wird — .entry-content und .card p setzen es, diese Karte nicht. */ .related-case-kpis .l{display:block;color:var(--ink-2);font-size:.86rem;margin-top:.15rem;overflow-wrap:break-word} @media(max-width:720px){ .related-case{grid-template-columns:1fr} .related-case-kpis{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:1.1rem;grid-template-columns:repeat(3,1fr)} } .svc-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem} .svc-link-card{display:flex;align-items:center;gap:.9rem;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:1rem 1.1rem;transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1),border-color var(--dur-1)} .svc-link-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--brand-2)} .svc-link-ic{flex:0 0 auto;width:42px;height:42px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--brand-2)} .svc-link-tx{display:flex;flex-direction:column;line-height:1.25;min-width:0} .svc-link-tx strong{font-family:var(--font-head);color:var(--ink);font-size:1rem} .svc-link-tx small{color:var(--ink-2);font-size:.82rem;margin-top:.1rem} .svc-link-arrow{margin-left:auto;color:var(--brand-2);font-weight:700;transition:transform var(--dur-1) var(--ease)} .svc-link-card:hover .svc-link-arrow{transform:translateX(4px)} /* ============================================================ Batch 12 — Formular-Interaktivität & Conversion (Theme-Layer) Liegt nach forms.css → überschreibt/erweitert die Plugin-Formulare. ============================================================ */ /* Fortschrittsleiste oben im Formular */ .ax-formprog{height:5px;border-radius:5px;background:var(--surface-2);overflow:hidden;margin:0 0 1.6rem} .ax-formprog>span{display:block;height:100%;width:0;background:var(--brand-grad);border-radius:5px;transition:width .4s var(--ease)} /* Fokus hebt das Label farblich an */ .ax-field{position:relative} .ax-field:focus-within label{color:var(--brand-2);transition:color .15s} /* Gültiges Feld: grüner Rahmen + Häkchen (nur einzeilige Eingaben) */ .ax-field.ax-valid input[type=text], .ax-field.ax-valid input[type=email], .ax-field.ax-valid input[type=tel]{ border-color:color-mix(in srgb,#22c55e 55%,var(--line)); padding-right:2.5rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right .9rem center;background-size:16px} /* Ungültiges Feld: roter Rahmen + Hinweis */ .ax-field.ax-invalid input, .ax-field.ax-invalid textarea, .ax-field.ax-invalid select{border-color:#e5484d;box-shadow:0 0 0 3px color-mix(in srgb,#e5484d 18%,transparent)} .ax-inline-hint{display:block;color:#e5484d;font-size:.82rem;font-weight:600;margin-top:.4rem;animation:axHintIn .25s var(--ease-out)} @keyframes axHintIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}} /* Vertrauens-Zeile */ .ax-trust{display:flex;flex-wrap:wrap;gap:.7rem 1.5rem;margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--line)} .ax-trust-item{display:inline-flex;align-items:center;gap:.45rem;color:var(--muted);font-size:.85rem;font-weight:600;font-family:var(--font-head)} .ax-trust-item svg{color:var(--brand-2);flex:none} /* Absende-Ladezustand mit Spinner */ .ax-form button[type=submit].is-loading, .ax-form [data-axr-submit].is-loading{position:relative;pointer-events:none;opacity:.92} .ax-form button.is-loading::before, .ax-form [data-axr-submit].is-loading::before{ content:"";width:16px;height:16px;margin-right:.55rem;vertical-align:-3px;display:inline-block; border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:axspin .7s linear infinite} @keyframes axspin{to{transform:rotate(360deg)}} /* Häkchen-Badge auf ausgewählten Auswahl-Karten (Wizard) */ .ax-choice{overflow:hidden} .ax-choice:has(input:checked)::after{ content:"";position:absolute;top:.7rem;right:.7rem;width:20px;height:20px;border-radius:50%; background:var(--brand-grad);background-repeat:no-repeat;background-position:center;background-size:12px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); animation:axPop .3s var(--ease-out)} /* Erfolgsmeldung sanft einblenden */ .ax-alert-success.ax-pop{animation:axPop .5s var(--ease-out)} @keyframes axPop{from{opacity:0;transform:scale(.96) translateY(6px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){ .ax-formprog>span{transition:none} .ax-inline-hint,.ax-choice:has(input:checked)::after,.ax-alert-success.ax-pop{animation:none} .ax-form button.is-loading::before,.ax-form [data-axr-submit].is-loading::before{animation-duration:1.6s} } /* ============================================================ Batch 13 — Buttons in Fließtext (.entry-content) korrigieren Die Link-Farbe von .entry-content a (Spezifität 0,1,1) überschrieb sonst die Button-Textfarbe (.btn-primary 0,1,0) → unsichtbarer Text auf Gradient-Buttons. Wir stellen die korrekten Button-Farben wieder her. ============================================================ */ .entry-content a.btn{text-decoration:none} .entry-content a.btn-primary{color:#fff} .entry-content a.btn-white{color:var(--ink)} .entry-content a.btn-ghost{color:var(--ink)} .entry-content a.btn:hover{text-decoration:none} /* ============================================================ Batch 14 — KI-Check / ROI-Tool: Dunkelmodus reparieren tools.css (Plugin) referenziert Variablen (--text, --border, --brand, --radius, --shadow), die es im Theme unter diesen Namen nicht gibt — daher fiel es auf helle Fallback-Farben zurück (dunkler Text auf dunklem Grund = unsichtbar im Dark Mode). Wir definieren die erwarteten Alias-Variablen auf .ax-tool und mappen sie auf die echten Theme-Tokens (hell & dunkel korrekt). ============================================================ */ .ax-tool, .ax-tool-lead{ --text: var(--ink); --border: var(--line); --brand: var(--brand-2); --radius: var(--r-lg); --shadow: var(--shadow-md); } /* ============================================================ Batch 15 — Mehr Substanz in inhaltsarmen Vollbild-Abschnitten Füllt sparsam gefüllte Sektionen edler aus, OHNE die Vollbildhöhe zu ändern. ============================================================ */ /* Kennzahlen als hochwertige Kacheln statt nackter Zahlen */ .stats-grid{gap:clamp(1rem,.6rem + 1.4vw,1.6rem)} .stat{ background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:clamp(1.6rem,1rem + 2.4vw,2.6rem) 1.25rem; box-shadow:var(--shadow-sm); position:relative;overflow:hidden; transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1),border-color var(--dur-1); } .stat::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--brand-grad)} .stat:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--brand-2)} .stat .n{font-size:clamp(2.4rem,1.4rem + 3.4vw,3.6rem)} .stat .l{font-size:.95rem;margin-top:.6rem} /* Kundenzitat: dekoratives Anführungszeichen für mehr Präsenz */ .quote{position:relative} .quote::before{ content:"\201C";position:absolute;top:clamp(-.4rem,-.2rem + .6vw,.4rem);left:clamp(.8rem,.4rem + 1.6vw,2rem); font-family:var(--font-head);font-weight:700;font-size:clamp(4rem,2rem + 8vw,7rem);line-height:1; color:var(--brand-2);opacity:.16;pointer-events:none; } .quote p,.quote .who{position:relative;z-index:1} @media(prefers-reduced-motion:reduce){ .stat:hover{transform:none} } /* ============================================================ Batch 16 — Abschluss-CTA füllt die Vollbild-Sektion (kein Leerraum-Pill) Der Abschnitt bleibt Vollbild; das CTA-Panel wächst zu einem großzügigen, immersiven Abschluss statt einer kleinen Fläche im leeren Raum. ============================================================ */ @media(min-width:900px){ /* Der Abschluss-CTA ist eine Sektion und hatte mit 1120px eine eigene, knapp schmalere Kante als der Rest — genau so entsteht der Eindruck unterschiedlicher Seitenbreiten. Jetzt Seitenbreite; die 92% bleiben als Sicherung für Fenster zwischen 900px und 1500px. */ .section:has(> .container > .cta-band) > .container{max-width:min(var(--container),92%)} .section:has(> .container > .cta-band) .cta-band{ min-height:70vh; display:flex;flex-direction:column;align-items:center;justify-content:center; padding:clamp(3rem,7vh,6rem) clamp(1.6rem,5vw,4.5rem); } .section:has(> .container > .cta-band) .cta-band h2{ font-size:clamp(2rem,1.2rem + 2.6vw,3.2rem);max-width:20ch; } .section:has(> .container > .cta-band) .cta-band p{ font-size:clamp(1.05rem,1rem + .55vw,1.3rem);max-width:60ch; } .section:has(> .container > .cta-band) .cta-band .btn{ padding:1rem 2rem;font-size:1.05rem; } } /* Aufgeräumt (Tiefencheck 2026-08): Batch 17 „News-Magazin-Blogübersicht" (.post-feature*, .post-card-excerpt) wurde durch die axb-*-Blogübersicht (inc/blog-archiv.php) ersetzt und kommt in keinem Template mehr vor; Regeln entfernt. */ /* ============================================================ Batch 18 — KI-Check-Tool: immersiver, hochwertiger, animierter Rein präsentativ über tools.css gelegt (Theme lädt danach). Betrifft den KI-Check (.ax-kicheck) und teils den ROI-Rechner (.ax-tool). ============================================================ */ /* Immersiver Abschnitt mit sanftem Glow hinter dem Tool */ .section:has(.ax-kicheck),.section:has(.ax-roi){position:relative;isolation:isolate} .section:has(.ax-kicheck)::before,.section:has(.ax-roi)::before{ content:"";position:absolute;z-index:-1;top:50%;left:50%;transform:translate(-50%,-50%); width:min(900px,90%);height:min(620px,70vh);pointer-events:none; background:radial-gradient(ellipse at center,color-mix(in srgb,var(--brand-2) 22%,transparent),transparent 70%); filter:blur(30px);opacity:.7} /* Tool-Karte: größer, edler, mit animierter Gradient-Kante */ .ax-tool.ax-kicheck,.ax-tool.ax-roi{ max-width:840px;margin-inline:auto;border-radius:26px; padding:clamp(1.6rem,1rem + 3vw,3.2rem); box-shadow:0 44px 100px -55px rgba(2,6,23,.6),var(--shadow-md); position:relative;overflow:hidden} .ax-tool.ax-kicheck::before,.ax-tool.ax-roi::before{ content:"";position:absolute;top:0;left:0;right:0;height:4px; background:linear-gradient(90deg,var(--brand-1,#7C5CFF),var(--brand-2),#22D3EE,var(--brand-2),var(--brand-1,#7C5CFF)); background-size:250% 100%;animation:axShimmer 4s linear infinite} @keyframes axShimmer{to{background-position:250% 0}} /* Fortschrittsbalken mit Lauflicht */ .ax-kicheck .ax-progress-fill,.ax-roi .ax-progress-fill{position:relative;overflow:hidden} .ax-kicheck .ax-progress-fill::after,.ax-roi .ax-progress-fill::after{ content:"";position:absolute;inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); transform:translateX(-100%);animation:axSlide 1.8s ease-in-out infinite} @keyframes axSlide{to{transform:translateX(220%)}} .ax-kicheck .ax-progress-label{font-weight:700;letter-spacing:.02em} /* Frage + Optionen: gestaffelte Einblend-Animation pro Schritt */ .ax-kicheck .ax-fade .ax-q-frage{animation:axFadeUp .45s var(--ease-out) backwards} .ax-kicheck .ax-fade .ax-q-hilfe{animation:axFadeUp .45s .05s var(--ease-out) backwards} .ax-kicheck .ax-fade .ax-opt{animation:axFadeUp .5s var(--ease-out) backwards} .ax-kicheck .ax-fade .ax-opt:nth-child(1){animation-delay:.08s} .ax-kicheck .ax-fade .ax-opt:nth-child(2){animation-delay:.14s} .ax-kicheck .ax-fade .ax-opt:nth-child(3){animation-delay:.20s} .ax-kicheck .ax-fade .ax-opt:nth-child(4){animation-delay:.26s} .ax-kicheck .ax-fade .ax-opt:nth-child(5){animation-delay:.32s} @keyframes axFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* Optionen: deutlichere Interaktion */ .ax-tool .ax-opt{transition:border-color .15s,background .15s,transform .12s var(--ease),box-shadow .15s} .ax-tool .ax-opt:hover{transform:translateY(-2px);box-shadow:0 10px 26px -14px var(--brand-2)} .ax-tool .ax-opt[aria-pressed="true"]{box-shadow:0 0 0 2px var(--brand-2) inset,0 12px 28px -16px var(--brand-2)} .ax-tool .ax-opt[aria-pressed="true"] .ax-opt-dot::after{animation:axPop .3s var(--ease-out)} /* Ergebnis: Score-Ring & Tipps treten nacheinander hervor */ .ax-kicheck .ax-result .ax-score-ring{animation:axScoreIn .7s var(--ease-out)} @keyframes axScoreIn{from{opacity:0;transform:scale(.8) rotate(-8deg)}to{opacity:1;transform:none}} .ax-kicheck .ax-result .ax-score-num, .ax-kicheck .ax-result-titel, .ax-kicheck .ax-result-text{animation:axFadeUp .5s var(--ease-out) backwards} .ax-kicheck .ax-result-titel{animation-delay:.15s} .ax-kicheck .ax-result-text{animation-delay:.25s} .ax-kicheck .ax-tipps li{animation:axFadeUp .5s var(--ease-out) backwards} .ax-kicheck .ax-tipps li:nth-child(1){animation-delay:.30s} .ax-kicheck .ax-tipps li:nth-child(2){animation-delay:.40s} .ax-kicheck .ax-tipps li:nth-child(3){animation-delay:.50s} .ax-kicheck .ax-tipps li:nth-child(4){animation-delay:.60s} /* Navigations-Buttons etwas präsenter */ .ax-tool .ax-nav .btn{transition:transform .12s var(--ease),box-shadow .15s,background .15s} .ax-tool .ax-nav .btn:hover{transform:translateY(-2px)} @media(prefers-reduced-motion:reduce){ .ax-tool.ax-kicheck::before,.ax-tool.ax-roi::before, .ax-kicheck .ax-progress-fill::after,.ax-roi .ax-progress-fill::after{animation:none} .ax-kicheck .ax-fade .ax-q-frage,.ax-kicheck .ax-fade .ax-q-hilfe,.ax-kicheck .ax-fade .ax-opt, .ax-kicheck .ax-result .ax-score-ring,.ax-kicheck .ax-result .ax-score-num, .ax-kicheck .ax-result-titel,.ax-kicheck .ax-result-text,.ax-kicheck .ax-tipps li{animation:none} .ax-tool .ax-opt:hover{transform:none} } /* ============================================================ Batch 22 — KI-Check: Vollbild-Conversion-Layout + sichtbarer, animierter Fortschrittsbalken + klarer Auswahl-Zustand ============================================================ */ /* Der pro-Frage-Fortschrittsbalken des Plugins wurde zuvor von der globalen .ax-progress-Regel (fixe Lese-Leiste) überschrieben. Hier explizit als ruhiger, sichtbarer Balken im Tool zurückgesetzt und gestylt. */ .ax-tool .ax-progress{position:static;top:auto;left:auto;inset:auto;width:100%;height:auto; background:none;z-index:auto;pointer-events:auto;transition:none; display:flex;flex-direction:column;gap:.55rem;margin:0 0 1.4rem} .ax-tool .ax-progress-bar{width:100%;height:9px;border-radius:6px;background:var(--surface-2);overflow:hidden} .ax-tool .ax-progress-fill{height:100%;min-height:9px;border-radius:6px;background:var(--brand-grad); transition:width .55s cubic-bezier(.4,0,.2,1)} .ax-tool .ax-progress-label{display:block;font-size:.8rem;font-weight:700;letter-spacing:.03em;color:var(--muted);text-transform:uppercase} /* Auswahl-Zustand deutlicher: gefüllter Punkt + zarte Tönung */ .ax-tool .ax-opt{cursor:pointer} .ax-tool .ax-opt[aria-pressed="true"]{background:color-mix(in srgb,var(--brand-2) 10%,var(--surface));border-color:var(--brand-2)} .ax-tool .ax-opt[aria-pressed="true"] .ax-opt-dot{border-color:var(--brand-2);background:var(--brand-2)} .ax-tool .ax-opt[aria-pressed="true"] .ax-opt-dot::after{content:"";position:absolute;inset:0;margin:auto;width:8px;height:8px;border-radius:50%;background:#fff} .ax-tool .ax-opt-dot{position:relative} .ax-tool .ax-opt:active{transform:translateY(0) scale(.99)} /* Zwei-Spalten-Conversion-Layout, vollflächig zentriert */ /* Werkzeugseiten (Sichtbarkeits-Check, KI-Check): Das Zwei-Spalten-Layout ist eine Sektion und hing an der alten Seitenbreite 1180px fest. Jetzt am Token, damit die Werkzeugseiten dieselbe Kante haben wie Startseite und Blog. */ .check-section .container{max-width:var(--container)} .check-layout{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.1fr); gap:clamp(1.5rem,4vw,3.6rem);align-items:center} .check-aside .eyebrow{margin-bottom:.5rem} .check-aside h1,.check-aside h2{font-size:var(--step-2);margin:.2rem 0 .8rem} .check-aside-lead{color:var(--ink-2);font-size:var(--step-1);line-height:1.5;margin:0 0 1.5rem;max-width:46ch} .check-trust{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem} .check-trust li{display:flex;gap:.85rem;align-items:flex-start} .check-trust-ic{flex:none;width:38px;height:38px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center; background:color-mix(in srgb,var(--brand-2) 14%,transparent);color:var(--brand-2)} .check-trust-ic svg{width:20px;height:20px} .check-trust-tx{display:flex;flex-direction:column;gap:.1rem} .check-trust-tx strong{font-weight:700;color:var(--ink);line-height:1.25} .check-trust-tx em{font-style:normal;color:var(--muted);font-size:.9rem;line-height:1.35} .check-steps{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:.7rem} .check-steps-h{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .check-step{display:flex;align-items:center;gap:.7rem;color:var(--ink-2);font-weight:500} .check-step-n{flex:none;width:25px;height:25px;border-radius:50%;background:var(--brand-grad);color:#fff; font-family:var(--font-head);font-weight:700;font-size:.82rem;display:inline-flex;align-items:center;justify-content:center} /* Tool füllt seine Spalte (Standard-Zentrierung/Max-Breite aufheben) */ .check-tool .ax-tool.ax-kicheck{max-width:none;margin:0;width:100%} .check-tool .ax-kontakt-tabs{max-width:none;margin:0;width:100%} @media(max-width:900px){ .check-layout{grid-template-columns:1fr;gap:1.8rem} .check-aside-lead{max-width:none} } /* ============================================================ Batch 19 — Hero-Grafik für Unterseiten (wie Startseite, dezent abstrakt) ============================================================ */ .hero--sub{position:relative;overflow:hidden} /* Die Hero-Grafik hing am Fensterrand statt am Inhalt. Bei 1500px Seitenbreite und breiterem Fenster wäre sie dadurch neben den Container gerutscht und hätte im leeren Außenrand geschwebt. max() zieht sie deshalb spätestens auf die Innenkante des Containers; bis 1500px Fensterbreite gilt wie bisher der clamp-Wert (der Vergleichswert ist dort rechnerisch kleiner). */ .hero--sub .hero-art{position:absolute;z-index:1;top:50%; right:max(clamp(1.5rem,7vw,9rem), calc((100% - var(--container)) / 2 + var(--gutter))); transform:translateY(-50%); width:min(400px,33vw);height:min(360px,30vw);pointer-events:none} .hero--sub .container{position:relative;z-index:2} .hero--sub.hero--compact .hero-art{display:none} @media(max-width:1080px){ .hero--sub .hero-art{display:none} } .hero-art-glow{position:absolute;inset:-18%;border-radius:50%; background:radial-gradient(circle at 62% 42%,color-mix(in srgb,var(--brand-2) 34%,transparent),transparent 62%);filter:blur(26px);opacity:.85} .hero-art-card{position:absolute;left:9%;top:11%;right:9%;bottom:11%; background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border:1px solid var(--line);border-radius:20px;box-shadow:0 46px 90px -46px rgba(2,6,23,.65); padding:1.15rem 1.2rem;overflow:hidden;animation:hvFloat 6.5s ease-in-out infinite} .hero-art-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--brand-grad)} .hero-art-head{display:flex;align-items:center;gap:.4rem;margin:.2rem 0 1.1rem} .hero-art-head i{width:9px;height:9px;border-radius:50%;background:var(--line)} .hero-art-head span{flex:1;height:8px;border-radius:6px;background:var(--surface-2);margin-left:.5rem} /* Aufgeräumt (Tiefencheck 2026-08): .hero-art-row wird von keinem Template mehr erzeugt (template-helpers.php baut hero-art-flow/-chart/-sbar/-res). */ .hero-art-chart{display:flex;align-items:flex-end;gap:.5rem;height:clamp(58px,8vw,84px);margin-top:1.1rem} .hero-art-chart span{flex:1;border-radius:6px 6px 0 0;background:var(--brand-grad);opacity:.9} .hero-art-chip{position:absolute;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:13px; background:var(--surface);border:1px solid var(--line);box-shadow:0 16px 34px -14px rgba(2,6,23,.55)} .hero-art-chip svg{width:20px;height:20px} .hero-art-chip.chip-a{top:1%;left:-5%;color:var(--brand-2);animation:hvFloat 5.5s ease-in-out infinite} .hero-art-chip.chip-b{bottom:5%;right:-4%;color:#22D3EE;animation:hvFloat 7.5s ease-in-out infinite reverse} @keyframes hvFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}} @media(prefers-reduced-motion:reduce){.hero-art-card,.hero-art-chip{animation:none}} /* ============================================================ Batch 20 — Individuelle, beschriftete Hero-Grafiken je Seite ============================================================ */ .hero-art-head{display:flex;align-items:center;gap:.6rem;margin:.1rem 0 1rem} .hero-art-ic{width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center; background:color-mix(in srgb,var(--brand-2) 16%,transparent);color:var(--brand-2);flex:none} .hero-art-ic svg{width:19px;height:19px} .hero-art-title{font-family:var(--font-head);font-weight:700;font-size:.95rem;color:var(--ink);letter-spacing:-.01em;line-height:1.15} .hero-art-cap{margin-top:.95rem;font-size:.72rem;color:var(--muted);font-weight:600;letter-spacing:.02em} /* Flow (KI-Tools, Automatisierung) */ .hero-art-flow{display:flex;align-items:center;gap:.35rem;margin:.5rem 0} .hero-art-flow .fn{width:22px;height:22px;border-radius:7px;background:var(--surface-2);border:1px solid var(--line);flex:none} .hero-art-flow .fn.a{background:var(--brand-grad);border:0} .hero-art-flow .fn.b{background:color-mix(in srgb,var(--brand-2) 45%,transparent);border:0} .hero-art-flow .fn.c{background:#22D3EE;border:0} .hero-art-flow .fc{flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 5px,transparent 5px 9px)} /* Suche (SEO & KI-Suche) */ .hero-art-sbar{display:flex;align-items:center;gap:.5rem;padding:.5rem .6rem;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);margin-bottom:.75rem} .hero-art-sbar span{flex:1;height:8px;border-radius:5px;background:var(--line)} .hero-art-sbar svg{width:15px;height:15px;color:var(--brand-2);flex:none} .hero-art-res{display:flex;align-items:center;gap:.55rem;margin-bottom:.55rem} .hero-art-res i{width:18px;height:18px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:.62rem;font-weight:700;font-family:var(--font-head);background:color-mix(in srgb,var(--brand-2) 18%,transparent);color:var(--brand-2);flex:none} .hero-art-res b{height:9px;border-radius:5px;background:linear-gradient(90deg,var(--brand-2),color-mix(in srgb,var(--brand-2) 12%,transparent))} /* Status (Managed Service) */ .hero-art-slist{margin:.3rem 0 .2rem} .hero-art-sr{display:flex;align-items:center;gap:.55rem;margin-bottom:.6rem} .hero-art-sr .d{width:9px;height:9px;border-radius:50%;background:#34D399;box-shadow:0 0 0 3px color-mix(in srgb,#34D399 22%,transparent);flex:none} .hero-art-sr b{height:9px;border-radius:5px;background:var(--surface-2)} /* Formular (Kontakt) */ .hero-art-form{display:flex;flex-direction:column;gap:.6rem;margin:.4rem 0} .hero-art-form .fl{height:11px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line)} .hero-art-form .fl.s{width:58%} .hero-art-fbtn{align-self:flex-start;width:40px;height:28px;border-radius:9px;background:var(--brand-grad);display:inline-flex;align-items:center;justify-content:center;color:#fff;margin-top:.2rem} .hero-art-fbtn svg{width:15px;height:15px} /* Preis-Stufen (Produkt) */ .hero-art-tiers{display:flex;align-items:flex-end;gap:.5rem;height:clamp(74px,10vw,104px);margin:.5rem 0} .hero-art-tiers span{flex:1;border-radius:10px 10px 6px 6px;background:var(--surface-2);border:1px solid var(--line)} .hero-art-tiers span.hl{background:var(--brand-grad);border:0} /* Browserfenster (Webseiten & Web-Plattformen) */ .hero-art-site{display:flex;flex-direction:column;gap:.5rem;margin:.5rem 0} .hero-art-site .hs-bar{display:flex;align-items:center;gap:.32rem;padding:.34rem .45rem;border:1px solid var(--line);border-radius:8px 8px 4px 4px;background:var(--surface-2)} .hero-art-site .hs-bar i{width:6px;height:6px;border-radius:50%;background:var(--line);flex:none} .hero-art-site .hs-bar b{flex:1;height:6px;border-radius:4px;margin-left:.28rem;background:linear-gradient(90deg,var(--brand-2),color-mix(in srgb,var(--brand-2) 12%,transparent))} .hero-art-site .hs-hero{display:block;height:clamp(30px,4.4vw,44px);border-radius:8px;background:var(--brand-grad);opacity:.9} .hero-art-site .hs-row{display:flex;gap:.5rem} .hero-art-site .hs-row em{flex:1;height:clamp(20px,2.8vw,28px);border-radius:7px;background:var(--surface-2);border:1px solid var(--line)} /* Zeilen (Blog, Über uns) */ .hero-art-lines{display:flex;flex-direction:column;gap:.55rem;margin:.5rem 0} .hero-art-lines .ll{height:10px;border-radius:6px;background:var(--surface-2)} .hero-art-lines .ll:first-child{height:12px;background:linear-gradient(90deg,var(--brand-2),color-mix(in srgb,var(--brand-2) 12%,transparent))} /* Reifegrad-Ring (KI-Check) */ .hero-art-gauge{position:relative;width:clamp(98px,13vw,122px);height:clamp(98px,13vw,122px);margin:.4rem auto .2rem} .hero-art-gauge svg{width:100%;height:100%;transform:rotate(-90deg)} .hero-art-gauge .g-track{fill:none;stroke:var(--surface-2);stroke-width:10} .hero-art-gauge .g-val{fill:none;stroke:var(--brand-2);stroke-width:10;stroke-linecap:round;stroke-dasharray:217 302} .hero-art-gauge-n{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:1.55rem;color:var(--ink)} /* ============================================================ Batch 21 — Textseiten als ruhige Vollbild-Abschnitte je H2 ============================================================ */ .entry-panel{padding-top:clamp(2.4rem,6vh,4.5rem);padding-bottom:clamp(2.4rem,6vh,4.5rem)} .entry-panel .entry-content{width:100%} .entry-panel .entry-content>h2:first-child{margin-top:0} /* Erstes Panel (Intro direkt unter dem Hero) etwas kompakter anschließen. */ .entry-panel:first-of-type{padding-top:clamp(1.6rem,4vh,3rem)} /* Seiten ohne Hero: Der erste Abschnitt trägt die H1 und muss den Abstand mitbringen, den sonst der Hero liefert — sonst klebt die Überschrift unter der Kopfzeile. Die H1 bekommt hier die Größe, die sie im Hero hätte; die Fließtext-H2 der übrigen Abschnitte bleiben unberührt. */ .entry-panel--start{padding-top:clamp(2.6rem,1.8rem + 4vw,5rem)} .entry-panel--start .entry-content>h1{font-size:var(--step-3);line-height:1.12;margin:0 0 1rem;letter-spacing:-.01em} .entry-panel--start .entry-content>h1+p{font-size:var(--step-1);color:var(--ink-2);max-width:var(--measure)} /* ============================================================ Batch 23 — Sektions-Feinschliff über alle Seiten hinweg: ruhige Kaskaden, klarere Abschnittsköpfe, edlere Karten, Prozess-Timeline, Zitat-Akzent, Kennzahl-Betonung. ============================================================ */ /* Abschnittskopf: dezente Akzentlinie unter dem Eyebrow, mehr Präsenz */ .sec-head .eyebrow{position:relative;display:inline-flex;align-items:center;gap:.55rem} .sec-head .eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--brand-grad)} /* Zentrierte Variante für großzügige Vollbild-Abschnitte */ .sec-head--center{margin-inline:auto;text-align:center} .sec-head--center .eyebrow{justify-content:center} /* Karten: Icon reagiert beim Hover, Link rückt nach */ .card:hover .ic{transform:translateY(-2px) scale(1.06);box-shadow:0 12px 26px -14px var(--brand-2)} .card .more{display:inline-flex;align-items:center;gap:.3rem;transition:gap .18s var(--ease)} .card:hover .more{gap:.6rem} .card--cta{background:var(--brand-grad);color:#fff;border:0;display:flex;flex-direction:column;justify-content:center} .card--cta h3,.card--cta p{color:#fff} .card--cta p{opacity:.9} /* Volle Rasterbreite: Die CTA-Karte steht unter den Leistungen und soll das Raster abschließen, statt als überzählige Kachel eine Reihe anzubrechen. */ .card--cta-breit{grid-column:1/-1;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.7rem 1.8rem;text-align:left;padding-block:clamp(1.1rem,2vw,1.6rem)} .card--cta-breit h3{margin:0;flex:0 0 auto} .card--cta-breit p{margin:0;flex:1 1 16rem;min-width:12rem} .card--cta-breit .btn{flex:0 0 auto} @media(max-width:640px){.card--cta-breit{flex-direction:column;align-items:flex-start;text-align:left;gap:.55rem}} /* Fork-Karten: Häkchen dezent hervorheben beim Hover */ .fork-card li svg{transition:transform .18s var(--ease)} .fork-card:hover li svg{transform:scale(1.15)} /* Prozess-Schritte: verbindende Timeline-Linie + Nummer als Node */ .steps{position:relative} /* Die Verbindungslinie gilt nur, wenn die Schritte tatsächlich in EINER Zeile stehen. Bei 3+2 lief sie vorher quer über die erste Reihe und endete im Nichts — sie behauptete eine Reihenfolge, die das Raster an der Stelle gar nicht mehr abbildet. */ @media(min-width:1200px){ .steps::before{content:"";position:absolute;top:2.5rem;left:10%;right:10%;height:2px;z-index:0; background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--brand-2) 45%,transparent) 0 10px,transparent 10px 18px)} .steps:has(> .step:nth-child(7))::before{content:none} } .step{position:relative;z-index:1;padding-top:1.5rem;transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2),border-color var(--dur-1)} .step:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--brand-2) 38%,var(--line))} .step::before{display:inline-flex;align-items:center;justify-content:center;width:2.6rem;height:2.6rem;margin-bottom:.6rem; border-radius:14px;font-size:1.15rem;background:var(--brand-grad-soft); -webkit-background-clip:border-box;background-clip:border-box;color:var(--brand-2); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand-2) 30%,transparent)} /* Kennzahlen: sanfter Pop beim Einblenden (ergänzt das Hochzählen) */ .stat.in .n,.stats-grid .reveal.in .n{animation:axNumPop .6s var(--ease-out) both} @keyframes axNumPop{0%{opacity:0;transform:scale(.8)}60%{transform:scale(1.04)}100%{opacity:1;transform:none}} /* Zitat: große dekorative Anführung + edlere Anmutung */ .quote::before{content:"\201C";position:absolute;top:-.35em;left:.2em;font-family:var(--font-head); font-size:6rem;line-height:1;color:color-mix(in srgb,var(--brand-2) 26%,transparent);pointer-events:none} .quote{padding-top:clamp(2.6rem,1.4rem + 3vw,4rem)} .quote p{position:relative;z-index:1} /* Blog-Teaser: Bildzoom + Pfeil beim Hover */ .post-card .thumb{overflow:hidden} .post-card .thumb img{transition:transform .5s var(--ease-out)} .post-card:hover .thumb img{transform:scale(1.06)} .post-card h3{transition:color .18s var(--ease)} .post-card:hover h3{color:var(--brand-2)} /* Aufgeräumt (Tiefencheck 2026-08): Hover-Regeln des entfernten Trust-Bands (.ax-trust-logos/.ax-logo-ph) mit entfernt — Markup existiert nicht mehr. */ /* CTA-Band: sanfter Glanz-Durchlauf für mehr Sog */ .cta-band{position:relative;overflow:hidden} .cta-band::after{content:"";position:absolute;top:0;left:-30%;width:30%;height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);transform:skewX(-18deg); animation:axSheen 5.5s ease-in-out infinite} @keyframes axSheen{0%,100%{left:-40%}55%{left:130%}} @media(prefers-reduced-motion:reduce){ .stat.in .n,.stats-grid .reveal.in .n{animation:none} .cta-band::after{animation:none;display:none} .post-card:hover .thumb img,.card:hover .ic,.fork-card:hover li svg,.step:hover{transform:none} } /* ============================================================ Batch 24 — Ergänzungszeile für Abschnitte (Zahlen, Vorgehen …) ============================================================ */ .section-note{margin-top:clamp(2rem,4vh,3.4rem);text-align:center} .section-note-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem 1.6rem;margin-bottom:1rem} .section-note-row span{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--ink);font-size:.95rem} .section-note-row svg{width:18px;height:18px;color:var(--brand-2);flex:none} /* Zentrierter Hinweisabsatz unter einem Abschnitt: Fließtext, Lesebreite. */ .section-note p{color:var(--muted);max-width:var(--measure);margin:0 auto;line-height:1.55} .section-note a{color:var(--brand-2);font-weight:600;white-space:nowrap} /* Blog-Teaser: Kurzbeschreibung + „Weiterlesen“-Anreiz */ .post-card .excerpt{font-size:.9rem;color:var(--muted);margin:.5rem 0 .8rem;line-height:1.5} .post-card .post-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:.2rem} .post-card .post-foot .meta{margin:0} .post-card .read-more{font-size:.82rem;font-weight:700;color:var(--brand-2);display:inline-flex;align-items:center;gap:.3rem;transition:gap .18s var(--ease)} .post-card:hover .read-more{gap:.6rem} /* ============================================================ Batch 25 — entfernt: Referenzen/Stimmen-Karussell (.tcar/.tcard) Der Abschnitt zeigte erfundene Kundenstimmen samt Sterne-Bewertung und wurde durch die Verlässlichkeits-Zusagen ersetzt (siehe Batch 48 am Dateiende). Die Regeln waren ausschließlich für dieses Karussell da. ============================================================ */ /* ============================================================ Batch 26 — Conversion-CTA-Block (zweispaltig, Trust, nächste Schritte) ============================================================ */ .btn-glass{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.55);backdrop-filter:blur(4px)} .btn-glass:hover{background:rgba(255,255,255,.26);border-color:#fff} .cta-pro{position:relative;overflow:hidden;border-radius:var(--r-xl,28px); background:var(--brand-grad);color:#fff;isolation:isolate; padding:clamp(1.8rem,1.2rem + 3vw,3.6rem); display:grid;grid-template-columns:1.25fr .9fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:center; box-shadow:0 46px 100px -50px rgba(76,70,229,.7)} .cta-pro::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(circle at 85% 15%,rgba(255,255,255,.22),transparent 45%), radial-gradient(circle at 10% 90%,rgba(34,211,238,.28),transparent 45%)} .cta-pro::after{content:"";position:absolute;top:0;left:-30%;width:28%;height:100%;z-index:-1; background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);transform:skewX(-18deg); animation:axSheen 6s ease-in-out infinite} .cta-pro-eyebrow{font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85)} .cta-pro-main h2{font-size:var(--step-3);margin:.5rem 0 .7rem;color:#fff;max-width:16ch} .cta-pro-main>p{color:rgba(255,255,255,.9);font-size:var(--step-1);line-height:1.5;margin:0 0 1.5rem;max-width:52ch} .cta-pro-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.4rem} .cta-pro-trust{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.7rem 1.6rem} .cta-pro-trust li{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.92rem;color:rgba(255,255,255,.95)} .cta-pro-trust svg{width:18px;height:18px;flex:none} .cta-pro-side{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:var(--r-lg); padding:clamp(1.3rem,1rem + 1.5vw,2rem);backdrop-filter:blur(6px)} .cta-pro-side-h{display:block;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-bottom:1.1rem} .cta-pro-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.1rem} .cta-pro-steps li{display:flex;gap:.85rem;align-items:flex-start} .cta-pro-n{flex:none;width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; font-family:var(--font-head);font-weight:700;background:#fff;color:var(--brand-2)} .cta-pro-tx{display:flex;flex-direction:column;gap:.15rem} .cta-pro-tx strong{color:#fff;font-weight:700} .cta-pro-tx em{font-style:normal;color:rgba(255,255,255,.85);font-size:.9rem;line-height:1.4} @media(max-width:860px){.cta-pro{grid-template-columns:1fr;gap:1.8rem}} @media(prefers-reduced-motion:reduce){.cta-pro::after{animation:none;display:none}} /* ============================================================ Batch 27 — Kontakt: kompakteres Formular + interaktive Termin- Slots & Assistent-Auswahlkarten (wie KI-Check). Nur im Kontakt- Bereich (.ax-kontakt-tabs), damit andere Formulare unberührt bleiben. ============================================================ */ /* Kompakteres Kontaktformular */ .ax-kontakt-tabs .ax-field{margin-bottom:.9rem} .ax-kontakt-tabs .ax-form input, .ax-kontakt-tabs .ax-form textarea, .ax-kontakt-tabs .ax-form select{padding:.62rem .8rem} .ax-kontakt-tabs .ax-form textarea{min-height:96px} .ax-kontakt-tabs .ax-form-intro{margin-bottom:1.05rem} .ax-kontakt-tabs .ax-grid-2{gap:.35rem .9rem} .ax-kontakt-tabs .ax-actions{margin-top:1rem} .ax-kontakt-tabs .ax-consent{margin:.6rem 0} /* Termin-Slots: klare Interaktion + Auswahl */ .ax-slot{transition:transform .12s var(--ease),box-shadow .15s,border-color .15s,background .15s;cursor:pointer} .ax-slot:hover{transform:translateY(-2px);border-color:var(--brand-2);box-shadow:0 9px 22px -13px var(--brand-2)} .ax-slot:has(input:checked),.ax-slot[aria-pressed="true"],.ax-slot.is-selected,.ax-slot.is-active{ border-color:var(--brand-2);background:color-mix(in srgb,var(--brand-2) 10%,var(--surface)); box-shadow:0 0 0 1px var(--brand-2) inset} .ax-slot-daylabel{font-weight:700;color:var(--ink)} /* Assistent: Auswahlkarten wie KI-Check-Optionen */ .ax-choice{transition:transform .12s var(--ease),box-shadow .15s,border-color .15s,background .15s;cursor:pointer} .ax-choice:hover{transform:translateY(-3px);border-color:var(--brand-2);box-shadow:0 12px 26px -14px var(--brand-2)} .ax-choice:has(input:checked),.ax-choice[aria-pressed="true"],.ax-choice.is-selected,.ax-choice.is-active{ border-color:var(--brand-2);background:color-mix(in srgb,var(--brand-2) 9%,var(--surface)); box-shadow:0 0 0 2px var(--brand-2) inset} .ax-choice-t{font-weight:700} /* Sanftes Einblenden des jeweils aktiven Wizard-Schritts */ .ax-kontakt-tabs .ax-choice,.ax-kontakt-tabs .ax-slot-day{animation:axFadeUp .4s var(--ease-out) backwards} .ax-kontakt-tabs .ax-choice:nth-child(2){animation-delay:.06s} .ax-kontakt-tabs .ax-choice:nth-child(3){animation-delay:.12s} @media(prefers-reduced-motion:reduce){ .ax-slot:hover,.ax-choice:hover{transform:none} .ax-kontakt-tabs .ax-choice,.ax-kontakt-tabs .ax-slot-day{animation:none} } /* ============================================================ Batch 28 — Termin-Buchung: Tages-Karten mit Uhrzeit-Chips (scoped auf .ax-kontakt-tabs, hebt Batch 27 gezielt an) ============================================================ */ .ax-kontakt-tabs .ax-slot-days{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.9rem} .ax-kontakt-tabs .ax-slot-day{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px; padding:1rem 1.05rem;overflow:hidden;transition:transform .15s var(--ease),box-shadow .15s,border-color .15s;margin:0} .ax-kontakt-tabs .ax-slot-day::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--brand-grad);opacity:.9} .ax-kontakt-tabs .ax-slot-day:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--brand-2) 32%,var(--line))} .ax-kontakt-tabs .ax-slot-daylabel{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:.9rem;color:var(--ink);margin:.1rem 0 .85rem} .ax-kontakt-tabs .ax-slot-daylabel::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--brand-2);flex:none} .ax-kontakt-tabs .ax-slot-times{display:flex;flex-wrap:wrap;gap:.5rem} .ax-kontakt-tabs .ax-slot{position:relative;display:inline-flex;align-items:center;justify-content:center; padding:.42rem .8rem;border:1px solid var(--line);border-radius:999px;background:var(--surface-2); font-size:.85rem;font-weight:600;color:var(--ink);cursor:pointer;margin:0; transition:transform .12s var(--ease),border-color .15s,background .15s,color .15s,box-shadow .15s} .ax-kontakt-tabs .ax-slot input{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none} .ax-kontakt-tabs .ax-slot:hover{transform:translateY(-1px);border-color:var(--brand-2);color:var(--brand-2)} .ax-kontakt-tabs .ax-slot:has(input:checked){background:var(--brand-grad);border-color:transparent;color:#fff; box-shadow:0 6px 16px -8px var(--brand-2)} .ax-kontakt-tabs .ax-slot:has(input:focus-visible){outline:2px solid var(--brand-2);outline-offset:2px} @media(prefers-reduced-motion:reduce){.ax-kontakt-tabs .ax-slot-day:hover,.ax-kontakt-tabs .ax-slot:hover{transform:none}} /* ============================================================ Batch 29 — Leistungs-Seiten: individuell & nicht leer - Akzentfarbe je Service kommt aus functions.php (body.lst-) - Abschnitte sitzen an der Inhaltshöhe statt erzwungenem Vollbild, damit kurze Sektionen keine leeren Flächen erzeugen. Breite bleibt einheitlich — sie kommt aus var(--container), nicht mehr aus einer hier notierten Pixelzahl. Nur der Hero bleibt bildschirmfüllend. ============================================================ */ @media(min-width:900px){ body.lst .section:not(.hero){ min-height:auto; padding-top:clamp(3rem,2.2rem + 3vw,5rem); padding-bottom:clamp(3rem,2.2rem + 3vw,5rem); justify-content:flex-start; } body.lst .entry-panel{ padding-top:clamp(2.6rem,2rem + 2.5vw,4.2rem); padding-bottom:clamp(2.6rem,2rem + 2.5vw,4.2rem); } /* Der erste Inhalts-Abschnitt (Problem/Lösung) bekommt oben etwas Luft, da der Hero direkt darüber sitzt. */ body.lst .section.ps-anchor{padding-top:clamp(3.5rem,2.6rem + 3.5vw,5.5rem)} } /* Fließtext-Panels: großzügige, aber inhaltsnahe Typo — wirkt voller */ body.lst .entry-panel .entry-content{max-width:none} body.lst .entry-panel .entry-content > p{max-width:74ch} /* Service-Feature-Karten (individuelle Content-Blöcke je Seite) */ .svc-figrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;margin:2rem 0} .svc-figrid .fc{padding:1.3rem 1.35rem;border:1px solid var(--line);border-radius:16px;background:var(--surface);transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2),border-color var(--dur-1)} .svc-figrid .fc:hover{transform:translateY(-4px);box-shadow:0 20px 44px -22px rgba(2,6,23,.30);border-color:color-mix(in srgb,var(--brand-2) 40%,var(--line))} .svc-figrid .fc .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--brand-grad-soft);color:var(--brand-2);margin-bottom:.75rem} .svc-figrid .fc .ic svg{width:22px;height:22px} .svc-figrid .fc b{display:block;font-family:var(--font-head);font-size:1.02rem;margin-bottom:.3rem} .svc-figrid .fc span{color:var(--muted);font-size:.92rem;line-height:1.55} /* Service-Checkliste (z. B. SEO-Signale) */ .svc-check{list-style:none;margin:1.6rem 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1.6rem} .svc-check li{position:relative;padding-left:2rem;color:var(--ink-2);line-height:1.55} .svc-check li::before{content:"";position:absolute;left:0;top:.15rem;width:20px;height:20px;border-radius:6px;background:var(--brand-grad); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/70% no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/70% no-repeat} @media(max-width:560px){ .svc-check{grid-template-columns:1fr} } /* Kompakter Stat-/Highlight-Streifen im Content */ .svc-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin:2.2rem 0;padding:clamp(1.4rem,1rem + 2vw,2rem);border-radius:18px;background:var(--brand-grad-soft);border:1px solid color-mix(in srgb,var(--brand-2) 22%,var(--line))} .svc-band .it{text-align:center} .svc-band .it b{display:block;font-family:var(--font-head);font-size:clamp(1.5rem,1.1rem + 1.6vw,2.1rem);background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.1} .svc-band .it span{display:block;color:var(--ink-2);font-size:.88rem;margin-top:.3rem} /* ============================================================ Batch 30 — Inhaltsseiten (Über uns, Vorgehen …): voller & interaktiv ============================================================ */ @media(min-width:900px){ /* Inhalts-Panels an der Inhaltshöhe statt erzwungenem Vollbild — keine leeren Flächen mehr; die Breite kommt einheitlich aus var(--container). */ .entry-panel{min-height:auto;justify-content:flex-start; padding-top:clamp(2.8rem,2rem + 3vw,4.6rem);padding-bottom:clamp(2.8rem,2rem + 3vw,4.6rem)} } /* Interaktive FAQ als Akkordeon im Seiteninhalt (liefert zugleich FAQPage-Schema: H3-Frage + P-Antwort bleiben im DOM erhalten). */ .entry-content .faq-list{display:flex;flex-direction:column;gap:.7rem;margin:1.5rem 0} .entry-content details.faq-item{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden;transition:border-color var(--dur-1),box-shadow var(--dur-1)} .entry-content details.faq-item[open]{border-color:color-mix(in srgb,var(--brand-2) 40%,var(--line));box-shadow:0 14px 34px -22px rgba(2,6,23,.30)} .entry-content details.faq-item>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.05rem 1.3rem} .entry-content details.faq-item>summary::-webkit-details-marker{display:none} .entry-content details.faq-item>summary h3{margin:0;font-size:1.04rem;font-family:var(--font-head);font-weight:600} .entry-content details.faq-item>summary h3::before{display:none} .entry-content details.faq-item>summary .ax-plus{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:var(--brand-grad-soft);color:var(--brand-2);font-size:1.35rem;line-height:1;transition:transform var(--dur-2) var(--ease)} .entry-content details.faq-item[open]>summary .ax-plus{transform:rotate(45deg)} .entry-content details.faq-item>*:not(summary){margin:0;padding:0 1.3rem 1.15rem;color:var(--ink-2);line-height:1.65} /* Prozess-Timeline (Vorgehen) */ .ax-timeline{list-style:none;counter-reset:tl;margin:1.8rem 0;padding:0} .ax-timeline>li{position:relative;padding:0 0 1.8rem 3.4rem} .ax-timeline>li:last-child{padding-bottom:0} .ax-timeline>li::before{counter-increment:tl;content:counter(tl);position:absolute;left:0;top:0;width:2.3rem;height:2.3rem;border-radius:50%;background:var(--brand-grad);color:#fff;display:grid;place-items:center;font-family:var(--font-head);font-weight:700;font-size:.95rem;box-shadow:0 8px 20px -8px color-mix(in srgb,var(--brand-2) 60%,transparent)} .ax-timeline>li::after{content:"";position:absolute;left:1.1rem;top:2.6rem;bottom:.2rem;width:2px;background:linear-gradient(var(--brand-2),transparent)} .ax-timeline>li:last-child::after{display:none} .ax-timeline h3{margin:.15rem 0 .35rem;font-size:1.12rem} .ax-timeline h3::before{display:none} .ax-timeline p{margin:0;color:var(--ink-2);line-height:1.65} /* Werte-/Trust-Pill-Reihe */ .ax-pills{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.4rem 0} .ax-pills span{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem 1rem;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);font-size:.92rem;font-weight:600;color:var(--ink-2)} .ax-pills span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand-grad)} /* Sprungleiste über langen Seiten (FAQ). Gleiche Form wie .ax-pills, aber anklickbar: Die Marken sind hier Verweise auf die Abschnitte darunter. Der Punkt vor dem Text entfällt — er würde bei zehn Marken nur Unruhe stiften und trennt nichts, was nicht schon der Abstand trennt. */ .ax-sprung{gap:.5rem;margin:1.6rem 0 2.2rem} .ax-sprung a{display:inline-flex;align-items:center;padding:.48rem .95rem;border:1px solid var(--line); border-radius:var(--r-pill);background:var(--surface);font-size:.88rem;font-weight:600;color:var(--ink-2); text-decoration:none;transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease)} .ax-sprung a:hover{color:var(--ink);border-color:color-mix(in srgb,var(--brand-2) 45%,var(--line)); background:color-mix(in srgb,var(--brand-2) 6%,var(--surface))} .ax-sprung a:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px} /* Sprungziele nicht unter die mitlaufende Kopfzeile schieben. */ .entry-content h2[id]{scroll-margin-top:100px} @media(max-width:560px){ .ax-sprung a{font-size:.82rem;padding:.42rem .8rem} } /* ============================================================ Batch 31 — Feinschliff: leere Absätze, Umbruch, Mobile-Härtung ============================================================ */ /* wpautop erzeugt rund um eingebettete HTML-Blöcke gelegentlich leere Absätze — im Seiteninhalt ausblenden (betrifft NICHT Plugin-Elemente außerhalb von .entry-content, z. B. den Kontakt-Assistenten). */ .entry-content p:empty{display:none} /* Lange deutsche Komposita sauber umbrechen statt überlaufen. */ .entry-content{overflow-wrap:break-word} .entry-content h1,.entry-content h2,.entry-content h3, .sec-head h2,.hero h1{overflow-wrap:break-word;hyphens:auto} /* Eingebettete Grafiken/Blöcke nie breiter als der Textfluss. */ .entry-content .ax-figure-svc,.entry-content .svc-figrid, .entry-content .svc-band,.entry-content .ax-timeline{max-width:100%} .ax-figure-svc>div{max-width:100%} /* Mobile-Härtung der neuen Bausteine. */ @media(max-width:560px){ .svc-figrid{grid-template-columns:1fr} .ax-pills span{font-size:.85rem;padding:.45rem .85rem} .ax-timeline>li{padding-left:2.9rem} .ax-timeline>li::before{width:2.1rem;height:2.1rem;font-size:.9rem} .ax-timeline>li::after{left:1rem} .entry-content details.faq-item>summary{padding:.9rem 1rem} .entry-content details.faq-item>summary h3{font-size:.98rem} .entry-content details.faq-item>*:not(summary){padding:0 1rem 1rem} .ax-figure-svc{padding:1.2rem} } /* ============================================================ Batch 32 — Fix: Komponenten-Listen gegen Basis-Listenstile durchsetzen Die generischen .entry-content ul/ol-Regeln (grüne Bullets, ol-Nummern, Padding) sind spezifischer als die Komponentenklassen und haben Timeline und Checklisten verfälscht. Hier mit höherer Spezifität überschrieben. ============================================================ */ /* Prozess-Timeline: echtes
    , aber ohne Standard-Nummern & Basis-Padding. */ .entry-content ol.ax-timeline{list-style:none;margin:1.8rem 0;padding:0;counter-reset:tl} .entry-content ol.ax-timeline>li{margin:0;padding:0 0 1.8rem 3.4rem} .entry-content ol.ax-timeline>li:last-child{padding-bottom:0} .entry-content ol.ax-timeline>li::marker{content:""} /* Marken-Checkliste: nur der eigene Haken, nicht die grüne Basis-Bullet. */ .entry-content ul.svc-check{list-style:none;margin:1.6rem 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1.6rem} .entry-content ul.svc-check li{position:relative;padding-left:2rem;margin:0;line-height:1.55;color:var(--ink-2)} .entry-content ul.svc-check li::after{content:none;display:none} .entry-content ul.svc-check li::before{content:"";position:absolute;left:0;top:.15rem;width:20px;height:20px;border-radius:6px;box-shadow:none;background:var(--brand-grad); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/70% no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/70% no-repeat} @media(max-width:560px){ .entry-content ul.svc-check{grid-template-columns:1fr} } /* ============================================================ Batch 33 — ROI-Rechner: Vollbild, hochwertig, animiert Innere Elemente werden vom Plugin per JS erzeugt (.ax-roi-*); hier premium gestaltet, plus eigenes roi-enhance.js für Regler- Füllung, Count-up und Bump-Effekt. ============================================================ */ @media(min-width:900px){ .entry-panel:has(.ax-roi){min-height:100vh;justify-content:center} } /* Regler-Raster */ .ax-roi .ax-roi-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 2.6rem;margin:.4rem 0 1.6rem} @media(max-width:640px){ .ax-roi .ax-roi-grid{grid-template-columns:1fr;gap:1.3rem} } .ax-roi .ax-roi-field{display:flex;flex-direction:column;gap:.55rem} .ax-roi .ax-roi-field label{font-weight:600;color:var(--ink);font-size:.96rem;line-height:1.3} .ax-roi .ax-roi-num{align-self:flex-start;font-family:var(--font-head);font-weight:700;font-size:1.25rem; background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums} /* Custom Range-Slider mit Gradient-Füllung bis zum Daumen (--val via JS) */ .ax-roi .ax-roi-field input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:999px; background:linear-gradient(90deg,var(--brand-2) var(--val,50%),var(--line) var(--val,50%));outline:none;cursor:pointer;margin:.15rem 0} .ax-roi .ax-roi-field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%; background:#fff;box-shadow:0 2px 8px rgba(2,6,23,.28),0 0 0 3px var(--brand-2);cursor:grab;transition:transform .12s var(--ease),box-shadow .15s} .ax-roi .ax-roi-field input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 4px 14px rgba(2,6,23,.32),0 0 0 4px var(--brand-2)} .ax-roi .ax-roi-field input[type=range]:active::-webkit-slider-thumb{transform:scale(1.18);cursor:grabbing} .ax-roi .ax-roi-field input[type=range]::-moz-range-thumb{width:22px;height:22px;border:none;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(2,6,23,.28),0 0 0 3px var(--brand-2);cursor:grab} .ax-roi .ax-roi-field input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:transparent} .ax-roi .ax-roi-field input[type=range]:focus-visible{outline:2px solid var(--brand-2);outline-offset:4px} /* Vertrauens-Pillen (per JS injiziert) */ .ax-roi .ax-roi-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:.2rem 0 1.5rem} .ax-roi .ax-roi-trust span{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:600;color:var(--ink-2); border:1px solid var(--line);border-radius:999px;padding:.35rem .85rem;background:var(--surface)} .ax-roi .ax-roi-trust span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand-grad)} /* Ergebnis-Titel + Karten */ .ax-roi .ax-result-titel{font-family:var(--font-head);font-size:1.25rem} .ax-roi .ax-roi-out{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:.7rem 0 0} @media(max-width:560px){ .ax-roi .ax-roi-out{grid-template-columns:1fr} } .ax-roi .ax-roi-card{position:relative;padding:1.7rem 1.3rem;border:1px solid var(--line);border-radius:16px;background:var(--surface);text-align:center;overflow:hidden; transition:transform .3s var(--ease),box-shadow .3s,border-color .2s} .ax-roi .ax-roi-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--brand-grad)} .ax-roi .ax-roi-card:hover{transform:translateY(-5px);box-shadow:0 26px 54px -30px rgba(2,6,23,.4);border-color:color-mix(in srgb,var(--brand-2) 40%,var(--line))} .ax-roi .ax-roi-card .big{display:block;font-family:var(--font-head);font-weight:750;font-size:clamp(1.9rem,1.3rem + 2.2vw,2.85rem);line-height:1.03; background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums;transform-origin:center} .ax-roi .ax-roi-card .lbl{display:block;color:var(--muted);font-size:.86rem;margin-top:.45rem} .ax-roi .ax-roi-hint{text-align:center;color:var(--muted);font-size:.85rem;margin:1.1rem 0 0} /* Einblend-Stagger + Bump bei Wertänderung */ .ax-roi .ax-roi-out .ax-roi-card{animation:axFadeUp .5s var(--ease-out) backwards} .ax-roi .ax-roi-out .ax-roi-card:nth-child(1){animation-delay:.05s} .ax-roi .ax-roi-out .ax-roi-card:nth-child(2){animation-delay:.12s} .ax-roi .ax-roi-out .ax-roi-card:nth-child(3){animation-delay:.19s} .ax-roi .ax-roi-out .ax-roi-card:nth-child(4){animation-delay:.26s} .ax-roi .ax-roi-card.is-bump .big{animation:axRoiBump .42s var(--ease-out)} @keyframes axRoiBump{0%{transform:scale(1)}34%{transform:scale(1.1)}100%{transform:scale(1)}} @media(prefers-reduced-motion:reduce){ .ax-roi .ax-roi-out .ax-roi-card{animation:none} .ax-roi .ax-roi-card:hover{transform:none} .ax-roi .ax-roi-card.is-bump .big{animation:none} } /* ============================================================ Batch 34 — ROI: CTA zentriert + Lead-Formular auf gleiche Breite ============================================================ */ /* CTA-Button des Rechners zentrieren (überschreibt Inline-Style des Plugins). */ .ax-roi .ax-tool-body a.btn.btn-primary{display:flex !important;width:fit-content;max-width:100%;margin:1.4rem auto 0 !important} /* Lead-Formular exakt so breit & mittig wie die Rechner-Karte (840px). */ .entry-content .ax-tool-lead{max-width:840px;margin-inline:auto;width:100%} /* ============================================================ Batch 35 — ROI: Szenario-Presets + Ansicht-Umschalter (interaktiv) ============================================================ */ /* Szenario-Auswahl */ .ax-roi .ax-roi-presets{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem;margin:.2rem 0 1.4rem} .ax-roi .ax-roi-presets-lbl{font-size:.82rem;font-weight:600;color:var(--muted);margin-right:.15rem} .ax-roi .ax-roi-preset{font-family:var(--font-body);font-size:.85rem;font-weight:600;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.42rem .95rem;cursor:pointer;transition:color var(--dur-1),border-color var(--dur-1),background var(--dur-1),transform var(--dur-1),box-shadow var(--dur-1)} .ax-roi .ax-roi-preset:hover{border-color:var(--brand-2);color:var(--brand-2);transform:translateY(-1px)} .ax-roi .ax-roi-preset.is-active{background:var(--brand-grad);color:#fff;border-color:transparent;box-shadow:0 8px 20px -10px var(--brand-2)} .ax-roi .ax-roi-reset{color:var(--muted)} .ax-roi .ax-roi-reset:hover{color:var(--brand-2)} /* Monat/Jahr-Umschalter */ .ax-roi .ax-roi-view{display:flex;width:max-content;margin:.2rem auto 1rem;gap:.25rem;padding:.3rem;background:var(--surface-2);border:1px solid var(--line);border-radius:999px} .ax-roi .ax-roi-view-btn{font-family:var(--font-body);font-size:.85rem;font-weight:600;color:var(--ink-2);background:transparent;border:none;border-radius:999px;padding:.42rem 1.1rem;cursor:pointer;transition:color var(--dur-1),background var(--dur-1),box-shadow var(--dur-1)} .ax-roi .ax-roi-view-btn:hover{color:var(--brand-2)} .ax-roi .ax-roi-view-btn.is-on{background:var(--brand-grad);color:#fff;box-shadow:0 6px 16px -8px var(--brand-2)} .ax-roi .ax-roi-view-btn.is-on:hover{color:#fff} /* Hervorhebung/Abdunklung der Karten je nach Ansicht */ .ax-roi .ax-roi-card{transition:transform .3s var(--ease),box-shadow .3s,border-color .2s,opacity .3s} .ax-roi .ax-roi-card.is-featured{border-color:color-mix(in srgb,var(--brand-2) 55%,var(--line));box-shadow:0 22px 46px -24px var(--brand-2);transform:translateY(-3px)} .ax-roi .ax-roi-card.is-dimmed{opacity:.45} /* ============================================================ Batch 36 — Fix: doppeltes „+" bei Seiten-FAQ (Über uns/Vorgehen) Die Basis-FAQ (.faq-item summary::after) blendet ihr eigenes „+" ein; die Seiten-Akkordeons nutzen aber die .ax-plus-Badge. Hier das Basis-Icon in diesen Akkordeons unterdrücken. ============================================================ */ .entry-content details.faq-item>summary::after{content:none} /* ============================================================ Batch 37 — Live-Domain-Check (SEO/GEO) auf der SEO-Seite ============================================================ */ @media(min-width:900px){ .ax-seocheck-sec{min-height:auto;padding-top:clamp(3rem,2rem + 3vw,5rem);padding-bottom:clamp(3rem,2rem + 3vw,5rem)} } .ax-seocheck{max-width:820px;margin:1.6rem auto 0} .ax-seocheck-form{display:flex;gap:.7rem;flex-wrap:wrap} .ax-seocheck-input{flex:1 1 260px;display:flex;align-items:center;gap:.6rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:.2rem .3rem .2rem 1.1rem;transition:border-color var(--dur-1),box-shadow var(--dur-1)} .ax-seocheck-input:focus-within{border-color:var(--brand-2);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-2) 16%,transparent)} .ax-seocheck-input svg{width:20px;height:20px;color:var(--muted);flex:none} .ax-seocheck-input input{flex:1;border:0;background:none;outline:none;font-family:var(--font-body);font-size:1.02rem;color:var(--ink);padding:.75rem 0} .ax-seocheck-go{white-space:nowrap;border-radius:var(--r-pill)} .ax-seocheck.is-loading .ax-seocheck-go{opacity:.6;pointer-events:none} .ax-seocheck.is-invalid .ax-seocheck-input{border-color:#dc2626;animation:axShake .4s} @keyframes axShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}} .ax-seocheck-hint{text-align:center;color:var(--muted);font-size:.85rem;margin:.7rem 0 0} .ax-seocheck-body{margin-top:1.4rem} /* Scan-Animation */ .ax-sc-scan{text-align:center;padding:2.2rem 1rem} .ax-sc-radar{position:relative;width:74px;height:74px;margin:0 auto 1.1rem} .ax-sc-radar span{position:absolute;inset:0;border-radius:50%;border:2px solid color-mix(in srgb,var(--brand-2) 45%,transparent);animation:axRadar 1.8s ease-out infinite} .ax-sc-radar span:nth-child(2){animation-delay:.6s} .ax-sc-radar span:nth-child(3){animation-delay:1.2s} @keyframes axRadar{0%{transform:scale(.3);opacity:1}100%{transform:scale(1);opacity:0}} .ax-sc-scan-title{font-family:var(--font-head);font-weight:700;font-size:1.1rem;margin:0} .ax-sc-scan-step{color:var(--muted);font-size:.92rem;margin:.3rem 0 1rem;min-height:1.2em} .ax-sc-bar{width:min(320px,80%);height:6px;border-radius:99px;background:var(--line);margin:0 auto;overflow:hidden} .ax-sc-bar i{display:block;height:100%;width:40%;border-radius:99px;background:var(--brand-grad);animation:axScBar 1.3s ease-in-out infinite} @keyframes axScBar{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}} /* Bericht */ .ax-sc-report{animation:axFadeUp .5s var(--ease-out)} .ax-sc-top{display:flex;flex-wrap:wrap;align-items:center;gap:1.6rem 2.2rem;padding:1.6rem;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:0 22px 50px -34px rgba(2,6,23,.3)} .ax-sc-gauge{position:relative;width:132px;height:132px;flex:none} .ax-sc-gauge svg{width:132px;height:132px;transform:rotate(-90deg)} .ax-sc-track{fill:none;stroke:var(--line);stroke-width:10} .ax-sc-arc{fill:none;stroke:url(#axScGrad);stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset .1s linear} .ax-sc-score{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1} .ax-sc-num{font-family:var(--font-head);font-weight:750;font-size:2.3rem;background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .ax-sc-of{font-size:.72rem;color:var(--muted);margin-top:.15rem} .ax-sc-grade{position:absolute;top:-6px;right:-6px;width:30px;height:30px;border-radius:50%;background:var(--brand-grad);color:#fff;font-family:var(--font-head);font-weight:700;font-size:.95rem;display:grid;place-items:center;box-shadow:0 8px 18px -8px var(--brand-2)} .ax-sc-summary{flex:1 1 260px;min-width:220px} .ax-sc-url{font-size:.88rem;color:var(--ink-2);margin:0 0 .3rem;word-break:break-all} .ax-sc-url span{color:var(--muted)} .ax-sc-verdict{font-family:var(--font-head);font-weight:650;font-size:1.15rem;color:var(--ink);margin:0 0 .8rem;line-height:1.4} .ax-sc-legend{display:flex;flex-wrap:wrap;gap:.5rem} .ax-sc-legend span{display:inline-flex;align-items:center;gap:.35rem;font-size:.82rem;color:var(--ink-2);border:1px solid var(--line);border-radius:999px;padding:.28rem .7rem} .ax-sc-legend b{font-family:var(--font-head)} .ax-sc-legend .is-good b{color:#16a34a}.ax-sc-legend .is-warn b{color:#d97706}.ax-sc-legend .is-bad b{color:#dc2626} .ax-sc-checks{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.7rem} @media(max-width:680px){ .ax-sc-checks{grid-template-columns:1fr} } .ax-sc-check{display:flex;align-items:flex-start;gap:.8rem;padding:.9rem 1rem;border:1px solid var(--line);border-radius:14px;background:var(--surface);animation:axFadeUp .45s var(--ease-out) backwards;animation-delay:calc(var(--i)*.045s + .15s)} .ax-sc-ic{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;margin-top:.1rem} .ax-sc-ic svg{width:15px;height:15px} .ax-sc-check.is-good .ax-sc-ic{background:color-mix(in srgb,#16a34a 15%,transparent);color:#15803d} .ax-sc-check.is-warn .ax-sc-ic{background:color-mix(in srgb,#d97706 16%,transparent);color:#b45309} .ax-sc-check.is-bad .ax-sc-ic{background:color-mix(in srgb,#dc2626 14%,transparent);color:#dc2626} /* Neutraler Hinweis ohne Wertung: grau, damit er sich sichtbar von den drei Bewertungsstufen absetzt und niemand ihn fuer ein Problem haelt. */ .ax-sc-check.is-info .ax-sc-ic{background:color-mix(in srgb,var(--muted) 16%,transparent);color:var(--muted)} .ax-sc-main{flex:1;min-width:0} .ax-sc-label{display:block;font-family:var(--font-head);font-weight:600;font-size:.98rem;color:var(--ink)} .ax-sc-tip{display:block;color:var(--muted);font-size:.83rem;line-height:1.45;margin-top:.15rem} .ax-sc-val{flex:none;font-family:var(--font-head);font-weight:600;font-size:.82rem;color:var(--ink-2);background:var(--surface-2);border-radius:999px;padding:.2rem .6rem;white-space:nowrap;max-width:44%;overflow:hidden;text-overflow:ellipsis} .ax-sc-check.is-good .ax-sc-val{color:#15803d} .ax-sc-check.is-bad .ax-sc-val{color:#dc2626} .ax-sc-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem;margin-top:1.4rem;padding:1.6rem 1.8rem;border-radius:18px;background:var(--brand-grad-soft);border:1px solid color-mix(in srgb,var(--brand-2) 22%,var(--line))} .ax-sc-cta-t{font-family:var(--font-head);font-weight:700;font-size:1.15rem;margin:0 0 .2rem} .ax-sc-cta-x{color:var(--ink-2);font-size:.92rem;margin:0;max-width:52ch} .ax-sc-cta-actions{display:flex;flex-wrap:wrap;gap:.6rem} .ax-sc-error{text-align:center;padding:1.6rem;border:1px dashed var(--line);border-radius:14px;color:var(--ink-2);background:var(--surface)} @media(prefers-reduced-motion:reduce){ .ax-sc-report,.ax-sc-check{animation:none} .ax-sc-radar span,.ax-sc-bar i{animation:none} } /* ============================================================ Batch 38 — Blog hochwertiger: aktives TOC, Tags, Beitrags-Navigation, Karten-Feinschliff ============================================================ */ /* Inhaltsverzeichnis: Lese-Fortschritt sichtbar (aktiver Abschnitt) */ .toc ol{counter-reset:toc;padding:0} .toc a{display:block;padding:.28rem 0 .28rem .8rem;border-left:2px solid var(--line);margin-left:-.8rem;color:var(--ink-2);transition:color var(--dur-1),border-color var(--dur-1),background var(--dur-1);border-radius:0 6px 6px 0} .toc a:hover{color:var(--brand-2);border-left-color:color-mix(in srgb,var(--brand-2) 50%,var(--line))} .toc a.is-active{color:var(--brand-2);font-weight:600;border-left-color:var(--brand-2);background:var(--brand-grad-soft)} .toc li.lvl3 a{font-size:.85rem;color:var(--muted)} /* Themen/Tags */ .entry-tags{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:2rem 0 0;padding-top:1.4rem;border-top:1px solid var(--line)} .entry-tags-label{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-right:.2rem} .entry-tag{font-size:.86rem;font-weight:600;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:.32rem .8rem;transition:color var(--dur-1),border-color var(--dur-1),transform var(--dur-1)} .entry-tag:hover{color:var(--brand-2);border-color:var(--brand-2);transform:translateY(-1px)} /* Autorbox: Eyebrow */ .author-eyebrow{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--brand-2)} /* Vorheriger / nächster Beitrag */ .post-nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.2rem} @media(max-width:620px){ .post-nav{grid-template-columns:1fr} } .post-nav-item{display:flex;flex-direction:column;gap:.35rem;padding:1.1rem 1.3rem;border:1px solid var(--line);border-radius:16px;background:var(--surface);transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2),border-color var(--dur-1)} .post-nav-item:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(2,6,23,.32);border-color:color-mix(in srgb,var(--brand-2) 40%,var(--line))} .post-nav-item.is-next{text-align:right} .post-nav-dir{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)} .post-nav-item b{font-family:var(--font-head);font-weight:600;color:var(--ink);line-height:1.35;font-size:1.02rem} .post-nav-item:hover b{color:var(--brand-2)} /* Blog-Karten: Kategorie-Pille + Pfeil beim Hover, Meta mit Punkt */ .post-card .cat{display:inline-block;background:var(--brand-grad-soft);color:var(--brand-2);border-radius:999px;padding:.2rem .6rem;font-size:.68rem} .post-card .body{position:relative} .post-card .thumb{position:relative;overflow:hidden} .post-card .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(2,6,23,.10));opacity:0;transition:opacity var(--dur-2)} .post-card:hover .thumb::after{opacity:1} .post-card .thumb img{transition:transform var(--dur-3) var(--ease)} .post-card:hover .thumb img{transform:scale(1.05)} .post-card .meta{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap} /* Aufgeräumt (Tiefencheck 2026-08): .post-card-excerpt und die Feature-Story- Regeln (.post-feature*) gehörten zur alten Blogübersicht (Batch 17) und werden von keinem Template mehr erzeugt; Regeln entfernt. */ /* FAQ-Sprungmarken: angesteuerte Karte nicht unter dem Sticky-Header verstecken */ .ax-faq-item[id]{scroll-margin-top:96px} /* ========================================================================== Batch 39 — Sichtbarkeits-Check: Kategorien, Prioritäten, Gruppierung ========================================================================== */ .ax-seocheck-wrap{position:relative;z-index:2} /* Einleitungstext über dem Sichtbarkeits-Check: Fließtext, Lesebreite. */ .ax-seocheck-lead{max-width:var(--measure);margin-inline:auto} .ax-seocheck-noscript{margin-top:1rem;padding:1rem 1.2rem;border:1px dashed var(--line);border-radius:var(--r);color:var(--ink-2);font-size:.95rem} /* Note-Zeile unter Abschnittsüberschriften im Bericht */ .ax-sc-h{font-family:var(--font-head);font-weight:650;font-size:1.06rem;color:var(--ink);margin:2rem 0 .2rem;letter-spacing:-.01em} .ax-sc-h-note{color:var(--muted);font-size:.88rem;margin:0 0 .9rem} /* Note im Score-Ring farblich an das Ergebnis koppeln */ .ax-sc-grade.is-good{background:#059669} .ax-sc-grade.is-warn{background:#CA8A04} .ax-sc-grade.is-bad{background:#DC2626} /* ---- Kategorie-Balken ---- */ .ax-sc-cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.7rem} .ax-sc-cat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:.85rem 1rem; opacity:0;transform:translateY(10px);animation:axScIn .45s var(--ease) forwards;animation-delay:calc(var(--i,0)*60ms + 120ms)} .ax-sc-cat-top{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem} .ax-sc-cat-name{font-family:var(--font-head);font-weight:600;font-size:.94rem;color:var(--ink);line-height:1.3} .ax-sc-cat-pct{font-family:var(--font-head);font-weight:700;font-size:1.3rem;letter-spacing:-.02em;line-height:1} .ax-sc-cat-pct i{font-style:normal;font-size:.7em;font-weight:600;opacity:.65;margin-left:1px} .ax-sc-cat.is-good .ax-sc-cat-pct{color:#059669} .ax-sc-cat.is-warn .ax-sc-cat-pct{color:#B45309} .ax-sc-cat.is-bad .ax-sc-cat-pct{color:#DC2626} .ax-sc-cat-bar{height:7px;border-radius:99px;background:#EEF2F7;overflow:hidden;margin:.55rem 0 .45rem} .ax-sc-cat-bar span{display:block;height:100%;border-radius:99px;transform-origin:left center; animation:axScGrow .85s var(--ease) both;animation-delay:calc(var(--i,0)*60ms + 260ms)} .ax-sc-cat.is-good .ax-sc-cat-bar span{background:linear-gradient(90deg,#10B981,#059669)} .ax-sc-cat.is-warn .ax-sc-cat-bar span{background:linear-gradient(90deg,#F59E0B,#B45309)} .ax-sc-cat.is-bad .ax-sc-cat-bar span{background:linear-gradient(90deg,#F87171,#DC2626)} .ax-sc-cat-meta{font-size:.78rem;color:var(--muted)} .ax-sc-cat-meta b{font-weight:700} .ax-sc-cat-meta b.is-bad{color:#DC2626} .ax-sc-cat-meta b.is-warn{color:#B45309} @keyframes axScIn{to{opacity:1;transform:none}} /* Die Breite liefert der Inline-Style; animiert wird nur das Auffahren. */ @keyframes axScGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}} @media(prefers-reduced-motion:reduce){ .ax-sc-cat,.ax-sc-prio-item{animation:none;opacity:1;transform:none} .ax-sc-cat-bar span{animation:none} } /* ---- Die drei größten Hebel ---- */ .ax-sc-prio-list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;counter-reset:none} .ax-sc-prio-item{display:flex;gap:.9rem;align-items:flex-start;padding:1rem 1.1rem;border-radius:var(--r); border:1px solid var(--line);border-left:4px solid var(--line);background:var(--surface); opacity:0;transform:translateY(10px);animation:axScIn .45s var(--ease) forwards;animation-delay:calc(var(--i,0)*90ms + 200ms)} .ax-sc-prio-item.is-bad{border-left-color:#DC2626;background:linear-gradient(90deg,rgba(220,38,38,.045),transparent 42%)} .ax-sc-prio-item.is-warn{border-left-color:#CA8A04;background:linear-gradient(90deg,rgba(202,138,4,.05),transparent 42%)} .ax-sc-prio-n{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center; font-family:var(--font-head);font-weight:700;font-size:.92rem;color:#fff;background:var(--ink)} .ax-sc-prio-item.is-bad .ax-sc-prio-n{background:#DC2626} .ax-sc-prio-item.is-warn .ax-sc-prio-n{background:#CA8A04} .ax-sc-prio-main{display:flex;flex-direction:column;gap:.2rem;min-width:0} .ax-sc-prio-label{font-family:var(--font-head);font-weight:650;color:var(--ink);font-size:1rem;line-height:1.35} .ax-sc-prio-cat{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)} .ax-sc-prio-tip{color:var(--ink-2);font-size:.92rem;line-height:1.55;margin-top:.15rem} /* ---- Gruppentitel in der Detailliste ---- */ .ax-sc-group{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em; color:var(--muted);margin:1.5rem 0 .5rem;padding-bottom:.4rem;border-bottom:1px solid var(--line)} .ax-sc-detail .ax-sc-checks{margin-bottom:0} /* ---- Methodik-Hinweis (Ehrlichkeit sichtbar machen) ---- */ .ax-sc-method{margin:1.6rem 0 0;padding:.9rem 1.1rem;border-radius:var(--r);background:#F8FAFC; border:1px solid var(--line);color:var(--muted);font-size:.83rem;line-height:1.6} /* ---- Fehlerbox ---- */ .ax-sc-error{margin-top:1rem;padding:1rem 1.2rem;border-radius:var(--r); border:1px solid #FCA5A5;background:#FEF2F2;color:#991B1B;font-size:.95rem} @media(max-width:560px){ .ax-sc-cat-grid{grid-template-columns:1fr} .ax-sc-prio-item{padding:.85rem .9rem;gap:.7rem} } /* ========================================================================== Batch 40 — Sichtbarkeits-Check: redaktioneller Seiteninhalt ========================================================================== */ /* Der Panel-Splitter des Themes trennt an jeder H2 — die Blöcke liegen daher direkt in .entry-content. Konflikte mit den Basisstilen hier auflösen. */ .entry-content ol.ax-sc-steps{list-style:none;padding-left:0;margin-left:0} .entry-content ol.ax-sc-steps li::marker{content:none} .entry-content .ax-sc-faq details.faq-item>summary::after{content:"+"} .entry-content .ax-sc-faq details.faq-item[open]>summary::after{content:"–"} .entry-content .ax-sc-areas,.entry-content .ax-sc-steps,.entry-content .ax-sc-faq{margin-block:1.4rem} /* Prüfbereiche als Karten */ .ax-sc-areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1rem;margin-top:1.6rem} .ax-sc-area{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem 1.4rem; transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2),border-color var(--dur-1)} .ax-sc-area:hover{transform:translateY(-3px);box-shadow:0 18px 44px -26px rgba(2,6,23,.34); border-color:color-mix(in srgb,var(--brand-2) 38%,var(--line))} .ax-sc-area-head{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;margin-bottom:.5rem} .ax-sc-area-head h3{margin:0;font-size:1.04rem;line-height:1.35;letter-spacing:-.01em} .ax-sc-area-w{flex:none;font-family:var(--font-head);font-weight:700;font-size:1.25rem;letter-spacing:-.02em; color:var(--brand-2);line-height:1} .ax-sc-area-w i{font-style:normal;font-size:.65em;font-weight:600;opacity:.7} .ax-sc-area p{margin:0;color:var(--ink-2);font-size:.93rem;line-height:1.6} /* Fließtext-Blöcke */ .ax-sc-prose{max-width:68ch} .ax-sc-prose p{color:var(--ink-2);line-height:1.72;margin:0 0 1rem} .ax-sc-prose p:last-child{margin-bottom:0} /* Nummerierte Schrittliste */ .ax-sc-steps{list-style:none;counter-reset:axscs;margin:1.4rem 0 0;padding:0;display:grid;gap:.8rem;max-width:80ch} .ax-sc-steps li{counter-increment:axscs;position:relative;padding:1.05rem 1.3rem 1.05rem 3.6rem; background:var(--surface);border:1px solid var(--line);border-radius:var(--r); color:var(--ink-2);line-height:1.65;font-size:.95rem} .ax-sc-steps li::before{content:counter(axscs);position:absolute;left:1.15rem;top:1.05rem; width:28px;height:28px;border-radius:50%;display:grid;place-items:center; font-family:var(--font-head);font-weight:700;font-size:.85rem;color:#fff;background:var(--brand-grad)} .ax-sc-steps li b{color:var(--ink);font-family:var(--font-head);font-weight:650;display:block;margin-bottom:.15rem} /* Notentabelle */ .ax-sc-gradetable{margin-top:1.4rem;max-width:820px} .ax-sc-gradetable .ax-compare td:first-child{font-family:var(--font-head);font-size:1.05rem;text-align:center} .ax-sc-gradetable .ax-compare td:nth-child(2){white-space:nowrap;color:var(--muted)} /* FAQ */ .ax-sc-faq{margin-top:1.3rem;max-width:80ch;display:grid;gap:.65rem} .ax-sc-faq .faq-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:0 1.2rem;overflow:hidden} .ax-sc-faq .faq-item summary{cursor:pointer;padding:1rem 2rem 1rem 0;font-family:var(--font-head); font-weight:600;color:var(--ink);list-style:none;position:relative;line-height:1.45} .ax-sc-faq .faq-item summary::-webkit-details-marker{display:none} .ax-sc-faq .faq-item summary::after{content:"+";position:absolute;right:.1rem;top:50%;transform:translateY(-50%); font-size:1.35rem;font-weight:400;color:var(--brand-2);transition:transform var(--dur-1) var(--ease)} .ax-sc-faq .faq-item[open] summary::after{content:"–"} .ax-sc-faq .faq-a{padding:0 0 1.05rem} .ax-sc-faq .faq-a p{margin:0;color:var(--ink-2);line-height:1.7;font-size:.95rem} /* Abschluss-CTA */ .ax-sc-endcta{margin-top:3rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:1.4rem;padding:1.8rem 2rem;border-radius:calc(var(--r) + 6px); background:var(--brand-grad-soft);border:1px solid color-mix(in srgb,var(--brand-2) 26%,var(--line))} .ax-sc-endcta>div:first-child{max-width:62ch} .ax-sc-endcta .ax-sc-cta-t{font-family:var(--font-head);font-weight:650;font-size:1.16rem;color:var(--ink);margin:0 0 .3rem} .ax-sc-endcta .ax-sc-cta-x{margin:0;color:var(--ink-2);line-height:1.65;font-size:.95rem} .ax-sc-endcta .ax-sc-cta-actions{display:flex;flex-wrap:wrap;gap:.6rem} @media(max-width:620px){ .ax-sc-endcta{padding:1.4rem 1.2rem} .ax-sc-steps li{padding:.95rem 1rem .95rem 3.2rem} .ax-sc-steps li::before{left:.9rem} } /* ========================================================================== Batch 41 — Sichtbarkeits-Check: Symmetrie & UI-Feinschliff Sieben Prüfbereiche gehen in drei Spalten nicht auf (3+3+1). Der wichtigste Bereich wird deshalb zur Leitkarte über die volle Breite, die übrigen sechs stehen als 3×2 — dadurch ist jede Reihe vollständig gefüllt. ========================================================================== */ .ax-sc-areas{grid-template-columns:repeat(3,1fr);align-items:stretch} .ax-sc-area{display:flex;flex-direction:column;padding:1.35rem 1.45rem 1.15rem} .ax-sc-area p{flex:1 1 auto} /* Leitkarte: volle Breite, zweispaltiger Innensatz, betonte Fläche */ .ax-sc-area--lead{grid-column:1 / -1; background:linear-gradient(120deg,color-mix(in srgb,var(--brand-1) 7%,var(--surface)),var(--surface) 62%); border-color:color-mix(in srgb,var(--brand-2) 32%,var(--line)); display:grid;grid-template-columns:minmax(240px,.85fr) 1.15fr;gap:.4rem 2.2rem;align-items:start; padding:1.6rem 1.7rem 1.4rem} .ax-sc-area--lead .ax-sc-area-head{grid-column:1;margin-bottom:0;flex-direction:column;align-items:flex-start;gap:.35rem} .ax-sc-area--lead .ax-sc-area-head h3{font-size:1.28rem} .ax-sc-area--lead .ax-sc-area-w{font-size:2.1rem} .ax-sc-area--lead p{grid-column:2;grid-row:1 / span 3;margin:0;font-size:.98rem;align-self:center} .ax-sc-area--lead .ax-sc-area-bar{grid-column:1;margin-top:.2rem} .ax-sc-area--lead .ax-sc-area-cap{grid-column:1} /* Gewichtsbalken: gibt jeder Karte eine gemeinsame Unterkante und macht die Gewichtung sichtbar, statt sie nur als Zahl zu behaupten. */ .ax-sc-area-bar{height:6px;border-radius:99px;background:color-mix(in srgb,var(--line) 70%,transparent); overflow:hidden;margin-top:1.05rem} .ax-sc-area-bar span{display:block;height:100%;border-radius:99px;background:var(--brand-grad); transform-origin:left center;animation:axScGrow .8s var(--ease) both .15s} .ax-sc-area-cap{display:block;margin-top:.45rem;font-size:.7rem;font-weight:700;letter-spacing:.07em; text-transform:uppercase;color:var(--muted)} @media(max-width:900px){ .ax-sc-areas{grid-template-columns:repeat(2,1fr)} .ax-sc-area--lead{grid-template-columns:1fr;gap:.2rem} .ax-sc-area--lead p{grid-column:1;grid-row:auto;margin:.5rem 0 0} .ax-sc-area--lead .ax-sc-area-head{flex-direction:row;align-items:baseline;justify-content:space-between;width:100%} } @media(max-width:620px){ .ax-sc-areas{grid-template-columns:1fr} } /* ---- Bericht: Kategorien als gleichförmige Zeilen statt lückenhaftem Raster ---- */ .ax-sc-cat-grid{grid-template-columns:1fr;gap:.5rem} .ax-sc-cat{display:grid;grid-template-columns:minmax(190px,255px) 1fr 62px;align-items:center; gap:.4rem 1.2rem;padding:.8rem 1.1rem} .ax-sc-cat-label{display:flex;flex-direction:column;gap:.1rem;min-width:0} .ax-sc-cat-name{font-size:.95rem} .ax-sc-cat-meta{font-size:.75rem} .ax-sc-cat-meta b.is-good{color:#047857} .ax-sc-cat-bar{margin:0} .ax-sc-cat-pct{text-align:right;font-size:1.22rem} @media(max-width:640px){ .ax-sc-cat{grid-template-columns:1fr auto;gap:.35rem .8rem} .ax-sc-cat-label{grid-column:1} .ax-sc-cat-pct{grid-column:2;align-self:start} .ax-sc-cat-bar{grid-column:1 / -1} } /* ========================================================================== Bericht des Sichtbarkeits-Checks: Kennzahlen, Verteilung, Messwerte KI- und DSGVO-Check zeigen ihre Auswertung als Kacheln und Karten; hier gab es dafür nur die Aufzählung. Bewusst eigene .ax-sc-*-Klassen und keine Wiederverwendung von .ax-kic-*/.ax-area*: ki-check.css wird auf der Sichtbarkeits-Seite nicht geladen. Alle Listen sind
    , kein
      — .entry-content ul li setzt im Inhaltsbereich einen grünen Haken vor jeden Punkt und würde sich durchsetzen (höhere Spezifität als die Komponentenklasse). ========================================================================== */ /* ---- Kennzahlen unter der Note ---- */ .ax-sc-facts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem} .ax-sc-fact{flex:1 1 165px;min-width:0;padding:.6rem .8rem;border:1px solid var(--line); border-radius:var(--r-sm);background:var(--surface-2); opacity:0;transform:translateY(8px);animation:axScIn .45s var(--ease) forwards; animation-delay:calc(var(--i,0)*70ms + 260ms)} .ax-sc-fact:nth-child(2){--i:1} .ax-sc-fact:nth-child(3){--i:2} .ax-sc-fact-n{display:block;font-family:var(--font-head);font-weight:750;font-size:1.55rem; line-height:1.1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums} /* Textkacheln (Bereichsname) tragen keinen Zahlenrhythmus — kleiner setzen und umbrechen lassen, sonst sprengt „KI-Sichtbarkeit (GEO/AEO)" die Kachel. */ .ax-sc-fact-n.is-txt{font-size:.97rem;line-height:1.3;letter-spacing:-.01em; font-variant-numeric:normal;overflow-wrap:anywhere} .ax-sc-fact.is-good .ax-sc-fact-n{color:#047857} .ax-sc-fact.is-warn .ax-sc-fact-n{color:#B45309} .ax-sc-fact.is-bad .ax-sc-fact-n{color:#DC2626} .ax-sc-fact-l{display:block;margin-top:.25rem;font-size:.69rem;font-weight:800;letter-spacing:.05em; text-transform:uppercase;color:var(--muted);line-height:1.35} .ax-sc-fact-l i{display:block;margin-top:.15rem;font-style:normal;font-weight:600;font-size:.75rem; letter-spacing:0;text-transform:none;color:var(--ink-2)} /* ---- Verteilung der Prüfpunkte (gestapelter Balken) ---- */ /* Die Segmentbreite kommt aus flex-grow mit der reinen Anzahl: keine Rundungsreste, die sich über 100 % summieren, und kein Überlauf. */ .ax-sc-dist-bar{display:flex;height:16px;border-radius:99px;overflow:hidden; background:color-mix(in srgb,var(--line) 70%,transparent); transform-origin:left center;animation:axScGrow .8s var(--ease) both .15s} .ax-sc-dist-seg{min-width:0;display:grid;place-items:center;overflow:hidden} .ax-sc-dist-seg.is-good{background:linear-gradient(90deg,#10B981,#059669)} .ax-sc-dist-seg.is-warn{background:linear-gradient(90deg,#F59E0B,#B45309)} .ax-sc-dist-seg.is-bad{background:linear-gradient(90deg,#F87171,#DC2626)} .ax-sc-dist-seg i{font-style:normal;font-family:var(--font-head);font-weight:800;font-size:.66rem; line-height:1;color:#fff;padding:0 .3rem} .ax-sc-dist-key{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin-top:.6rem} .ax-sc-dist-item{display:inline-flex;align-items:baseline;gap:.35rem;font-size:.84rem;color:var(--ink-2)} .ax-sc-dist-item::before{content:"";width:9px;height:9px;border-radius:3px;flex:none; align-self:center;background:var(--muted)} .ax-sc-dist-item.is-good::before{background:#059669} .ax-sc-dist-item.is-warn::before{background:#B45309} .ax-sc-dist-item.is-bad::before{background:#DC2626} .ax-sc-dist-item b{font-family:var(--font-head);font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums} .ax-sc-dist-item i{font-style:normal;color:var(--muted);font-size:.79rem} /* ---- Gewicht als eigene Marke in der Bereichszeile ---- */ .ax-sc-cat-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .5rem} .ax-sc-cat-w{font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase; color:var(--muted);background:var(--surface-2);border-radius:999px;padding:.1rem .45rem; white-space:nowrap} /* ---- Gemessene Werte ---- */ .ax-sc-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.5rem} .ax-sc-metric{min-width:0;padding:.7rem .85rem;border:1px solid var(--line);border-radius:var(--r-sm); background:var(--surface);border-left:3px solid var(--line); opacity:0;transform:translateY(8px);animation:axScIn .45s var(--ease) forwards; animation-delay:calc(var(--i,0)*55ms + 120ms)} .ax-sc-metric.is-good{border-left-color:#059669} .ax-sc-metric.is-warn{border-left-color:#CA8A04} .ax-sc-metric.is-bad{border-left-color:#DC2626} .ax-sc-metric-v{display:block;font-family:var(--font-head);font-weight:750;font-size:1.12rem; line-height:1.2;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums; overflow-wrap:anywhere} .ax-sc-metric.is-good .ax-sc-metric-v{color:#047857} .ax-sc-metric.is-warn .ax-sc-metric-v{color:#B45309} .ax-sc-metric.is-bad .ax-sc-metric-v{color:#DC2626} .ax-sc-metric-l{display:block;margin-top:.2rem;font-size:.76rem;color:var(--muted);line-height:1.4} /* ---- Gemessener Befund neben dem Hebel ---- */ .ax-sc-prio-val{display:inline-block;margin-left:.45rem;vertical-align:middle; font-family:var(--font-head);font-weight:700;font-size:.74rem;color:var(--ink-2); background:var(--surface-2);border-radius:999px;padding:.1rem .5rem} /* Dunkelmodus: die festen Grüntöne oben sind für helle Flächen gewählt. */ [data-theme="dark"] .ax-sc-fact.is-good .ax-sc-fact-n, [data-theme="dark"] .ax-sc-metric.is-good .ax-sc-metric-v{color:#34D399} [data-theme="dark"] .ax-sc-fact.is-warn .ax-sc-fact-n, [data-theme="dark"] .ax-sc-metric.is-warn .ax-sc-metric-v{color:#FBBF24} [data-theme="dark"] .ax-sc-fact.is-bad .ax-sc-fact-n, [data-theme="dark"] .ax-sc-metric.is-bad .ax-sc-metric-v{color:#F87171} [data-theme="dark"] .ax-sc-dist-item.is-warn::before{background:#FBBF24} @media(max-width:420px){ /* Unter 390px stehen drei Kacheln nebeneinander nur noch als Wortsalat. */ .ax-sc-fact{flex:1 1 100%} .ax-sc-metrics{grid-template-columns:1fr 1fr} .ax-sc-dist-item{font-size:.8rem} } @media(prefers-reduced-motion:reduce){ .ax-sc-fact,.ax-sc-metric{animation:none;opacity:1;transform:none} .ax-sc-dist-bar{animation:none} } /* ---- Seite ohne Hero: Brotkrumen freistellen, Werkzeug nach oben holen ---- */ .crumbs--bare{display:block;padding-top:1.6rem;padding-bottom:.2rem;font-size:.85rem} .crumbs--bare a{color:var(--muted)} .crumbs--bare a:hover{color:var(--brand-2)} body.page-sichtbarkeits-check .entry-panel:first-of-type{padding-top:1.2rem} body.page-sichtbarkeits-check .sec-head h1{font-size:var(--step-3);margin:.2rem 0 .8rem} /* Ohne eigenen Section-Wrapper sitzt das Eingabefeld direkt im Panel. */ body.page-sichtbarkeits-check .ax-seocheck{margin-inline:auto} /* ---- Zweispaltiger Textabschnitt: Fließtext + Merksatz statt leerer Fläche ---- */ .ax-sc-split{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:2.6rem;align-items:start;margin:1.4rem 0} .ax-sc-split .ax-sc-prose{max-width:none} .ax-sc-aside{position:sticky;top:104px;padding:1.4rem 1.5rem;border-radius:var(--r); background:linear-gradient(150deg,color-mix(in srgb,var(--brand-1) 9%,var(--surface)),var(--surface) 68%); border:1px solid color-mix(in srgb,var(--brand-2) 30%,var(--line))} .ax-sc-aside-tag{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.1em; text-transform:uppercase;color:var(--brand-2);margin-bottom:.55rem} .ax-sc-aside-lead{margin:0 0 .8rem;font-family:var(--font-head);font-weight:600;font-size:1.04rem; line-height:1.45;color:var(--ink)} .entry-content ul.ax-sc-aside-list,.ax-sc-aside-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem} .ax-sc-aside-list li{position:relative;padding-left:1.4rem;font-size:.9rem;line-height:1.55;color:var(--ink-2)} .entry-content ul.ax-sc-aside-list li::before,.ax-sc-aside-list li::before{content:"";position:absolute;left:0;top:.52em; width:7px;height:7px;border-radius:50%;background:var(--brand-grad)} @media(max-width:900px){ .ax-sc-split{grid-template-columns:1fr;gap:1.4rem} .ax-sc-aside{position:static} } /* ---- Fünf Zitier-Kriterien: erste Karte breit, danach 2×2 → volle Reihen ---- */ .ax-sc-steps{grid-template-columns:repeat(2,1fr);max-width:none} .ax-sc-steps li:first-child{grid-column:1 / -1} @media(max-width:760px){ .ax-sc-steps{grid-template-columns:1fr} .ax-sc-steps li:first-child{grid-column:auto} } /* FAQ und Tabelle über die volle Spaltenbreite, Text innen begrenzt */ .ax-sc-faq{max-width:none} .ax-sc-faq .faq-a p{max-width:78ch} .ax-sc-gradetable{max-width:none} /* ========================================================================== Batch 42 — Zitier-Kriterien: Nummern-Badge lag über dem Text Ursache: .entry-content ol li ist spezifischer als .ax-sc-steps li und setzte das Einrücken auf 0,3rem zurück, sodass Badge und Überschrift übereinander lagen. Hier mit passender Spezifität zurückgeholt. ========================================================================== */ .ax-sc-steps > li, .entry-content ol.ax-sc-steps > li{ padding:1.05rem 1.4rem 1.1rem 3.7rem;margin:0; background:var(--surface);border:1px solid var(--line);border-radius:var(--r); position:relative;list-style:none;color:var(--ink-2);line-height:1.65;font-size:.95rem} .ax-sc-steps > li::marker, .entry-content ol.ax-sc-steps > li::marker{content:none} .ax-sc-steps > li::before, .entry-content ol.ax-sc-steps > li::before{ content:counter(axscs);position:absolute;left:1.2rem;top:1.15rem; width:28px;height:28px;border-radius:50%;display:grid;place-items:center; font-family:var(--font-head);font-weight:700;font-size:.85rem;color:#fff; background:var(--brand-grad);line-height:1} .ax-sc-steps > li > b, .entry-content ol.ax-sc-steps > li > b{ display:block;margin:0 0 .2rem;color:var(--ink); font-family:var(--font-head);font-weight:650;line-height:1.35} @media(max-width:760px){ .ax-sc-steps > li,.entry-content ol.ax-sc-steps > li{padding-left:3.3rem} .ax-sc-steps > li::before,.entry-content ol.ax-sc-steps > li::before{left:.95rem} } /* ========================================================================== Batch 43 — Eigenständige Notenskala Vorher lief sie über .ax-compare (die Produkt-Vergleichstabelle) und erbte deren hervorgehobene Mittelspalte, die Zentrierung und die hohen Zeilen. ========================================================================== */ .ax-grades{width:100%;border-collapse:separate;border-spacing:0; background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .ax-grades thead th{ text-align:left;font-family:var(--font-head);font-weight:700;font-size:.72rem; letter-spacing:.09em;text-transform:uppercase;color:var(--muted); padding:.85rem 1.1rem;background:color-mix(in srgb,var(--line) 26%,var(--surface)); border-bottom:1px solid var(--line)} .ax-grades tbody td{padding:.85rem 1.1rem;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent); vertical-align:middle;text-align:left;background:none} .ax-grades tbody tr:last-child td{border-bottom:0} .ax-grades tbody tr:hover td{background:color-mix(in srgb,var(--brand-1) 4%,transparent)} .ax-grades .ax-grade-cell{width:74px} .ax-grade-badge{display:grid;place-items:center;width:38px;height:38px;border-radius:11px; font-family:var(--font-head);font-weight:700;font-size:1.05rem;color:#fff;letter-spacing:-.01em; box-shadow:0 6px 16px -10px rgba(2,6,23,.5)} .ax-grades tr.is-a .ax-grade-badge{background:linear-gradient(135deg,#10B981,#047857)} .ax-grades tr.is-b .ax-grade-badge{background:linear-gradient(135deg,#34D399,#0D9488)} .ax-grades tr.is-c .ax-grade-badge{background:linear-gradient(135deg,#FBBF24,#CA8A04)} .ax-grades tr.is-d .ax-grade-badge{background:linear-gradient(135deg,#FB923C,#EA580C)} .ax-grades tr.is-e .ax-grade-badge{background:linear-gradient(135deg,#F87171,#DC2626)} .ax-grades tr.is-f .ax-grade-badge{background:linear-gradient(135deg,#EF4444,#991B1B)} .ax-grades .ax-grade-range{width:120px;white-space:nowrap; font-family:var(--font-head);font-weight:650;font-size:.98rem;color:var(--ink)} .ax-grades .ax-grade-desc{color:var(--ink-2);font-size:.94rem;line-height:1.6} @media(max-width:620px){ .ax-grades thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .ax-grades tbody tr{display:grid;grid-template-columns:auto 1fr;gap:.1rem .8rem; padding:.9rem 1rem;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)} .ax-grades tbody td{border:0;padding:0} .ax-grades .ax-grade-cell{grid-row:1 / span 2} .ax-grades .ax-grade-desc{grid-column:2} } /* ========================================================================== Batch 44 — Eingabefeld: nur EIN Fokusring Die globale :focus-visible-Regel setzte zusätzlich einen box-shadow auf das selbst — der zeichnete einen zweiten, eckigeren Ring innerhalb der Pille. Der Fokus gehört auf den äußeren Wrapper, nicht auf beides. ========================================================================== */ .ax-seocheck-input input:focus, .ax-seocheck-input input:focus-visible{outline:none;box-shadow:none;border-radius:0} .ax-seocheck-input:focus-within{ border-color:var(--brand-2); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-2) 45%,transparent)} /* ========================================================================== Batch 45 — Entscheidungsvergleich auf der Produktseite Drei Optionen, gruppierte Kriterien, dreistufige Bewertung. Auf schmalen Displays klappt die Tabelle in Karten je Kriterium um. ========================================================================== */ .ax-cmp{margin:1.6rem 0 0} .ax-cmp-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed; background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--r) + 4px);overflow:hidden} /* Kopf */ .ax-cmp-table thead th{vertical-align:bottom;text-align:left;padding:1.15rem 1.1rem 1rem; background:color-mix(in srgb,var(--line) 22%,var(--surface));border-bottom:1px solid var(--line)} .ax-cmp-table thead th.ax-cmp-crit{font-family:var(--font-head);font-weight:700;font-size:.72rem; letter-spacing:.09em;text-transform:uppercase;color:var(--muted);width:24%} .ax-cmp-opt{width:25.33%;position:relative} .ax-cmp-opt-name{display:block;font-family:var(--font-head);font-weight:650;font-size:1rem; line-height:1.3;color:var(--ink);letter-spacing:-.01em} .ax-cmp-opt-sub{display:block;margin-top:.2rem;font-size:.8rem;color:var(--muted);font-weight:400} .ax-cmp-opt.is-lead{background:linear-gradient(160deg,color-mix(in srgb,var(--brand-1) 13%,var(--surface)),color-mix(in srgb,var(--brand-2) 9%,var(--surface))); box-shadow:inset 3px 0 0 var(--brand-1),inset -3px 0 0 var(--brand-1)} .ax-cmp-opt.is-lead .ax-cmp-opt-name{color:var(--brand-2)} .ax-cmp-flag{display:inline-block;margin-top:.5rem;padding:.2rem .6rem;border-radius:999px; background:var(--brand-grad);color:#fff;font-size:.66rem;font-weight:800; letter-spacing:.08em;text-transform:uppercase} /* Gruppentitel als eigene Zeile */ .ax-cmp-grouprow th{padding:.7rem 1.1rem;text-align:left; font-family:var(--font-head);font-weight:800;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase; color:var(--brand-2);background:color-mix(in srgb,var(--brand-1) 5%,var(--surface)); border-top:1px solid var(--line);border-bottom:1px solid var(--line)} /* Kriterien und Zellen */ .ax-cmp-table tbody th.ax-cmp-crit{text-align:left;padding:.9rem 1.1rem;vertical-align:top; font-family:var(--font-head);font-weight:600;font-size:.93rem;color:var(--ink);line-height:1.4; border-bottom:1px solid color-mix(in srgb,var(--line) 65%,transparent)} .ax-cmp-cell{padding:.9rem 1.1rem;vertical-align:top;font-size:.9rem;line-height:1.5;color:var(--ink-2); border-bottom:1px solid color-mix(in srgb,var(--line) 65%,transparent)} .ax-cmp-cell.is-lead,.ax-cmp-fit.is-lead{ background:linear-gradient(160deg,color-mix(in srgb,var(--brand-1) 6%,transparent),color-mix(in srgb,var(--brand-2) 4%,transparent)); box-shadow:inset 3px 0 0 var(--brand-1),inset -3px 0 0 var(--brand-1)} .ax-cmp-cell.is-lead .ax-cmp-txt{color:var(--ink)} .ax-cmp-ic{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px; border-radius:50%;margin-right:.5rem;vertical-align:-.28em;flex:none} .ax-cmp-ic svg{width:11px;height:11px} .is-good .ax-cmp-ic{background:#D1FAE5;color:#047857} .is-part .ax-cmp-ic{background:#FEF3C7;color:#B45309} .is-no .ax-cmp-ic{background:#FEE2E2;color:#B91C1C} .ax-cmp-txt{display:inline} /* Abschlusszeile „wann passt was" */ .ax-cmp-fitrow th.ax-cmp-crit,.ax-cmp-fit{border-bottom:0;padding-top:1rem;padding-bottom:1.1rem; background:color-mix(in srgb,var(--line) 14%,var(--surface))} .ax-cmp-fit{font-size:.88rem;line-height:1.55;color:var(--ink-2);vertical-align:top;padding-inline:1.1rem} .ax-cmp-fit.is-lead{background:linear-gradient(160deg,color-mix(in srgb,var(--brand-1) 10%,var(--surface)),color-mix(in srgb,var(--brand-2) 7%,var(--surface)));color:var(--ink)} .ax-cmp-note{margin:.85rem 0 0;font-size:.79rem;line-height:1.6;color:var(--muted)} /* Ehrlichkeits-Block + CTA */ .ax-cmp-honest{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:1.3rem;align-items:center; justify-content:space-between;padding:1.5rem 1.7rem;border-radius:calc(var(--r) + 4px); background:var(--brand-grad-soft);border:1px solid color-mix(in srgb,var(--brand-2) 28%,var(--line))} .ax-cmp-honest>div:first-child{max-width:64ch} .ax-cmp-honest-t{margin:0 0 .35rem;font-family:var(--font-head);font-weight:650;font-size:1.14rem;color:var(--ink)} .ax-cmp-honest-x{margin:0;color:var(--ink-2);line-height:1.68;font-size:.95rem} .ax-cmp-honest-actions{display:flex;flex-wrap:wrap;gap:.6rem} /* Mobil: Tabelle wird zu Karten je Kriterium */ @media(max-width:860px){ .ax-cmp-table,.ax-cmp-table tbody,.ax-cmp-table tr,.ax-cmp-table td,.ax-cmp-table th{display:block;width:auto} .ax-cmp-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .ax-cmp-table{border:0;background:none;overflow:visible} .ax-cmp-table tbody tr:not(.ax-cmp-grouprow){background:var(--surface);border:1px solid var(--line); border-radius:var(--r);margin-bottom:.7rem;overflow:hidden} .ax-cmp-grouprow th{border-radius:var(--r);margin:1.3rem 0 .6rem;border:1px solid var(--line)} .ax-cmp-table tbody th.ax-cmp-crit{border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--line) 18%,var(--surface));font-size:.95rem} .ax-cmp-cell,.ax-cmp-fit{border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent); padding:.7rem 1rem .75rem;box-shadow:none !important} .ax-cmp-cell::before,.ax-cmp-fit::before{content:attr(data-opt);display:block;font-size:.68rem; font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.2rem} .ax-cmp-cell.is-lead,.ax-cmp-fit.is-lead{background:color-mix(in srgb,var(--brand-1) 7%,var(--surface))} .ax-cmp-cell.is-lead::before,.ax-cmp-fit.is-lead::before{color:var(--brand-2)} .ax-cmp-table tbody tr td:last-child{border-bottom:0} .ax-cmp-honest{padding:1.2rem 1.1rem} } /* ========================================================================== Batch 46 — Vergleich: Auswertung, Filter, Spalten-Fokus, Begründungen ========================================================================== */ /* Bilanz je Option */ .ax-cmp-score{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin-bottom:1.4rem} .ax-cmp-scorecard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:1.05rem 1.15rem;opacity:0;transform:translateY(12px); animation:axScIn .5s var(--ease) forwards;animation-delay:calc(var(--i,0)*90ms)} .ax-cmp-scorecard.is-lead{border-color:color-mix(in srgb,var(--brand-2) 40%,var(--line)); background:linear-gradient(150deg,color-mix(in srgb,var(--brand-1) 8%,var(--surface)),var(--surface) 66%); box-shadow:0 14px 36px -26px rgba(79,70,229,.7)} .ax-cmp-scorehead{display:flex;align-items:baseline;justify-content:space-between;gap:.7rem} .ax-cmp-scorename{font-family:var(--font-head);font-weight:600;font-size:.9rem;line-height:1.3;color:var(--ink)} .ax-cmp-scorepct{font-family:var(--font-head);font-weight:700;font-size:1.55rem;letter-spacing:-.02em; color:var(--muted);line-height:1;white-space:nowrap} .ax-cmp-scorepct i{font-style:normal;font-size:.62em;font-weight:600;opacity:.7;margin-left:1px} .ax-cmp-scorecard.is-lead .ax-cmp-scorepct{color:var(--brand-2)} .ax-cmp-scorebar{display:flex;height:8px;border-radius:99px;overflow:hidden;margin:.7rem 0 .55rem; background:color-mix(in srgb,var(--line) 60%,transparent)} .ax-cmp-scorebar span{display:block;transform:scaleX(0);transform-origin:left center} .is-live .ax-cmp-scorebar span{animation:axScGrow .9s var(--ease) both} .is-live .ax-cmp-scorebar .seg-part{animation-delay:.12s} .is-live .ax-cmp-scorebar .seg-no{animation-delay:.24s} .ax-cmp-scorebar .seg-good{background:linear-gradient(90deg,#10B981,#059669)} .ax-cmp-scorebar .seg-part{background:linear-gradient(90deg,#FBBF24,#D97706)} .ax-cmp-scorebar .seg-no{background:linear-gradient(90deg,#F87171,#DC2626)} .ax-cmp-scoremeta{display:flex;flex-wrap:wrap;gap:.15rem .85rem;font-size:.76rem;color:var(--muted)} .ax-cmp-scoremeta b{font-weight:800;font-family:var(--font-head)} .ax-cmp-scoremeta .is-good b{color:#047857} .ax-cmp-scoremeta .is-part b{color:#B45309} .ax-cmp-scoremeta .is-no b{color:#B91C1C} /* Filter */ .ax-cmp-filter{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .9rem;margin-bottom:.9rem} .ax-cmp-filter-label{font-size:.82rem;font-weight:700;color:var(--muted); letter-spacing:.04em;text-transform:uppercase} .ax-cmp-filter-btns{display:flex;flex-wrap:wrap;gap:.4rem} .ax-cmp-fbtn{border:1px solid var(--line);background:var(--surface);color:var(--ink-2); border-radius:999px;padding:.45rem .95rem;font-family:var(--font-head);font-weight:600;font-size:.85rem; cursor:pointer;transition:transform var(--dur-1) var(--ease),border-color var(--dur-1),background var(--dur-1),color var(--dur-1)} .ax-cmp-fbtn:hover{border-color:var(--brand-2);color:var(--brand-2);transform:translateY(-1px)} .ax-cmp-fbtn.is-on{background:var(--brand-grad);border-color:transparent;color:#fff; box-shadow:0 8px 20px -12px rgba(79,70,229,.85)} .ax-cmp-fbtn:focus-visible{outline:3px solid var(--brand-2);outline-offset:2px} .ax-cmp-filter-count{font-size:.8rem;color:var(--muted);margin-left:auto} /* Zeilen ein-/ausblenden */ .ax-cmp-row.is-hidden,.ax-cmp-whyrow.is-hidden,.ax-cmp-grouprow.is-hidden{display:none} .ax-cmp-row{transition:background var(--dur-1)} .ax-cmp-row:hover>*{background-color:color-mix(in srgb,var(--brand-1) 3%,transparent)} /* Kriterium als Aufklapp-Schalter */ .ax-cmp-why{display:flex;align-items:flex-start;gap:.45rem;width:100%;text-align:left; border:0;background:none;padding:0;cursor:pointer;font:inherit;color:inherit} .ax-cmp-why svg{width:15px;height:15px;flex:none;margin-top:.22em;color:var(--brand-2); transition:transform var(--dur-1) var(--ease);opacity:.75} .ax-cmp-why[aria-expanded="true"] svg{transform:rotate(180deg)} .ax-cmp-why:hover{color:var(--brand-2)} .ax-cmp-why:focus-visible{outline:3px solid var(--brand-2);outline-offset:3px;border-radius:6px} /* Begründungszeile */ .ax-cmp-whyrow td{padding:.85rem 1.1rem 1rem;background:color-mix(in srgb,var(--brand-1) 5%,var(--surface)); border-bottom:1px solid color-mix(in srgb,var(--line) 65%,transparent); font-size:.89rem;line-height:1.65;color:var(--ink-2)} .ax-cmp-why-tag{display:inline-block;margin-right:.5rem;padding:.12rem .5rem;border-radius:999px; background:var(--brand-grad);color:#fff;font-size:.62rem;font-weight:800; letter-spacing:.08em;text-transform:uppercase;vertical-align:.1em} /* Spalten-Fokus — Zuordnung über explizite Spaltenklassen. :nth-of-type() zählt nach Elementtyp: im Kopf sind alle Zellen th, im Körper ist die erste ein th und der Rest td. Dadurch lag der Index im Kopf um eins daneben und es leuchtete oben eine andere Spalte als unten. */ .ax-cmp-table .ax-cmp-cell,.ax-cmp-table .ax-cmp-fit,.ax-cmp-table .ax-cmp-opt{ transition:opacity var(--dur-1) var(--ease)} .ax-cmp-table.has-focus .col-0,.ax-cmp-table.has-focus .col-1,.ax-cmp-table.has-focus .col-2{opacity:.55} .ax-cmp-table.focus-0 .col-0,.ax-cmp-table.focus-1 .col-1,.ax-cmp-table.focus-2 .col-2{opacity:1} @media(prefers-reduced-motion:reduce){ .ax-cmp-table.has-focus .col-0,.ax-cmp-table.has-focus .col-1,.ax-cmp-table.has-focus .col-2{opacity:1} } /* Mitlaufender Tabellenkopf bei der langen Tabelle */ @media(min-width:861px){ .ax-cmp-table thead th{position:sticky;top:72px;z-index:3} } @media(max-width:860px){ .ax-cmp-score{grid-template-columns:1fr} .ax-cmp-filter-count{margin-left:0;width:100%} .ax-cmp-whyrow td{border-radius:var(--r);margin-bottom:.7rem} } @media(prefers-reduced-motion:reduce){ .ax-cmp-scorecard{animation:none;opacity:1;transform:none} .ax-cmp-scorebar span{animation:none;transform:none} } /* ========================================================================== Batch 47 — Zwei Korrekturen am Vergleich 1) Der mitlaufende Tabellenkopf hat die erste Datenzeile überlagert und den Text angeschnitten. In einer Tabelle mit overflow:hidden verhält sich position:sticky ohnehin unzuverlässig — deshalb entfernt. 2) Die Kopfzahl war ein gewichteter Prozentwert. Bei „teilweise zählt halb" ergaben 4 Stärken + 6 teilweise exakt so viel wie 1 Stärke + 12 teilweise (beide 47 %) — mathematisch korrekt, aber irreführend. Jetzt steht dort die belegbare Zahl klar erfüllter Kriterien. ========================================================================== */ @media(min-width:861px){ .ax-cmp-table thead th{position:static;top:auto;z-index:auto} } .ax-cmp-scorepct{font-size:1.8rem;color:var(--ink)} .ax-cmp-scorepct i{font-size:.5em;font-weight:700;opacity:.5;letter-spacing:-.02em} .ax-cmp-scorecard.is-lead .ax-cmp-scorepct{color:var(--brand-2)} .ax-cmp-scorelabel{display:block;margin-top:-.15rem;font-size:.72rem;font-weight:700; letter-spacing:.07em;text-transform:uppercase;color:var(--muted)} .ax-cmp-scorehead{align-items:flex-start} .ax-cmp-scorebar{margin-top:.85rem} /* ========================================================================== Batch 48 — Verlässlichkeits-Zusagen auf der Startseite (#referenzen) Ersetzt das frühere Kundenstimmen-Karussell (.tcar/.tcard, Batch 25). Die dort gezeigten Stimmen waren erfunden; erfundene Kundenstimmen sind irreführende Werbung (§ 5 UWG). Bis freigegebene Referenzen vorliegen, stehen hier ausschließlich nachprüfbare Zusagen zur Arbeitsweise — ohne Zahlen, Sterne oder Logos. Eigene Klassen (.ax-zusage*), damit es keine Kollision mit .ax-trust* aus dem Plugin (tools.css) und .ax-trustband weiter oben gibt. Farben, Kanten und Schatten kommen ausschließlich aus tokens.css — dadurch greift der Dark Mode über [data-theme="dark"] ohne eigene Zusatzregeln. ========================================================================== */ .ax-zusagen{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1rem,.6rem + 1vw,1.4rem); grid-template-columns:repeat(3,1fr)} .ax-zusage{display:flex;flex-direction:column;gap:.45rem;margin:0; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:1.7rem 1.55rem;box-shadow:var(--shadow-sm); transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2),border-color var(--dur-2)} .ax-zusage:hover{transform:translateY(-4px);box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--brand-2) 30%,var(--line))} .ax-zusage-ic{width:44px;height:44px;flex:none;margin-bottom:.5rem;border-radius:14px; display:inline-flex;align-items:center;justify-content:center;color:var(--brand-2); background:var(--brand-grad-soft);border:1px solid color-mix(in srgb,var(--brand-2) 20%,transparent)} .ax-zusage-ic svg{width:22px;height:22px} .ax-zusage-t{font-family:var(--font-head);font-size:1.03rem;font-weight:700;line-height:1.35; color:var(--ink);margin:0} .ax-zusage-x{margin:0;color:var(--muted);font-size:.95rem;line-height:1.6} .ax-zusagen-foot{margin-top:clamp(2rem,4vh,3.2rem);display:flex;flex-direction:column; align-items:center;gap:1.15rem;text-align:center} .ax-zusagen-foot p{max-width:66ch;margin:0;color:var(--muted);line-height:1.6} @media(max-width:979px){.ax-zusagen{grid-template-columns:repeat(2,1fr)}} @media(max-width:639px){.ax-zusagen{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){.ax-zusage:hover{transform:none}} /* ============================================================ MOBILE AKTIONSLEISTE („Sticky-CTA") — einzige Quelle ------------------------------------------------------------ Ersetzt die frühere randlose graue Leiste mit zwei gleich lauten Buttons. Leitgedanken: 1. Hierarchie: eine primäre Handlung (Erstgespräch, farbige Fläche) und eine sekundäre (KI-Check, ruhige Kachel). 2. Vertrauen: nur überprüfbare Aussagen über die eigene Arbeitsweise — keine Zahlen, keine Verknappung. 3. Schwebende Karte statt Systemleiste: Abstand zum Rand, feine Kante, mehrstufiger Schatten, großzügiger Radius. Das wirkt wie ein Bedienelement der Seite und nicht wie ein aufgesetztes Werbebanner. Sichtbarkeit steuert assets/js/sticky-cta.js über die Klasse .is-visible; ohne JavaScript bleibt die Leiste per [hidden] aus (die Seite hat genügend eigene CTAs). ============================================================ */ /* Grundzustand: auf großen Screens gar nicht vorhanden. */ .ax-sticky-cta{display:none} @media(max-width:768px){ /* Freigestellte Karte: seitlicher Abstand + Safe-Area an allen Kanten, damit iPhone-Rundungen und Home-Indikator nichts abschneiden. */ .ax-sticky-cta:not([hidden]){ display:block;position:fixed;z-index:90; left:calc(.7rem + env(safe-area-inset-left,0px)); right:calc(.7rem + env(safe-area-inset-right,0px)); bottom:calc(.7rem + env(safe-area-inset-bottom,0px)); opacity:0;visibility:hidden;pointer-events:none; transform:translateY(calc(100% + 1.4rem)); transition:opacity var(--dur-2,.42s) var(--ease-out,ease), transform var(--dur-2,.42s) var(--ease-out,ease), visibility 0s linear var(--dur-2,.42s); } .ax-sticky-cta.is-visible{ opacity:1;visibility:visible;pointer-events:auto;transform:none; transition-delay:0s,0s,0s; } /* Platz am Seitenende: Karte (~104px) + Abstand + Safe-Area, damit Footer-Inhalte nie verdeckt werden. NUR solange die Leiste tatsächlich eingeblendet ist (Klasse setzt assets/js/sticky-cta.js). Vorher galt die Reservierung pauschal unter 768px — auf jeder Seite, auch auf denen ganz ohne Leiste, und auch bevor sie erscheint. Übrig blieb eine 132px hohe leere Fläche unter dem Footer. Ein Sprung entsteht dadurch nicht: Die Leiste erscheint erst nach dem Hero, also weit oberhalb des Seitenendes. */ body.ax-sticky-on{padding-bottom:calc(8.25rem + env(safe-area-inset-bottom,0px))} /* Der Nach-oben-Button säße sonst unter der Karte. Solange die Leiste sichtbar ist, hat sie Vorrang — eine Schaltfläche weniger ist ruhiger als zwei übereinander. */ body.ax-sticky-on .ax-top{opacity:0;visibility:hidden;pointer-events:none} } /* Bei geöffnetem mobilen Menü tritt die Leiste zurück. :has() ist reine Kür — fehlt die Unterstützung, passiert nichts. */ body:has(.mobile-menu.open) .ax-sticky-cta{opacity:0;pointer-events:none;visibility:hidden} /* ---- Karte ---- */ .ax-sticky-card{ position:relative; padding:.45rem .6rem .6rem; border-radius:var(--r-lg,24px); border:1px solid color-mix(in srgb,var(--line,#E3E9F3) 80%,transparent); background:color-mix(in srgb,var(--surface,#fff) 86%,transparent); -webkit-backdrop-filter:saturate(1.6) blur(16px); backdrop-filter:saturate(1.6) blur(16px); /* Mehrstufiger Schatten: Kontaktschatten, Nahfeld, weites Feld. Erst die Kombination liest sich als „schwebend". */ box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(11,16,32,.05), 0 10px 24px -14px rgba(23,34,73,.30), 0 30px 60px -28px rgba(23,34,73,.36); } /* ---- Kopfzeile: Vertrauenssignal + Ausblenden ---- */ .ax-sticky-top{display:flex;align-items:center;gap:.5rem;min-height:1.9rem} .ax-sticky-trust{ margin:0;display:flex;align-items:center;gap:.4rem;flex:1;min-width:0; font-family:var(--font-body);font-size:.72rem;line-height:1.2; letter-spacing:.005em;color:var(--muted,#5B657A); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .ax-sticky-trust svg{width:14px;height:14px;flex:none;color:var(--brand-2,#7C5CFF)} .ax-sticky-x{ position:relative;flex:none;width:30px;height:30px;padding:0; display:inline-flex;align-items:center;justify-content:center; border:0;background:none;color:var(--muted,#5B657A);cursor:pointer; border-radius:var(--r-pill,999px); transition:color var(--dur-1,.18s),background var(--dur-1,.18s); } .ax-sticky-x svg{width:14px;height:14px} /* Unsichtbare Vergrößerung der Tippfläche auf 48px — Zielgröße erfüllt, ohne dass die Optik lauter wird. */ .ax-sticky-x::after{content:"";position:absolute;top:50%;left:50%;width:48px;height:48px;transform:translate(-50%,-50%)} .ax-sticky-x:hover{color:var(--ink,#0B1020);background:var(--bg-2,#EEF2F9)} .ax-sticky-x:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)} /* ---- Aktionen ---- */ /* Ungleiche Spalten: die Hauptaktion bekommt sichtbar mehr Fläche. Das ist die eigentliche Hierarchie — nicht die Farbe allein. */ .ax-sticky-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:.5rem;margin-top:.35rem} .ax-sticky-btn{ display:flex;align-items:center;gap:.55rem; min-height:52px;padding:.5rem .8rem; border:1px solid transparent;border-radius:var(--r,16px); font-family:var(--font-head);text-decoration:none; transition:transform var(--dur-1,.18s) var(--ease,ease), box-shadow var(--dur-1,.18s) var(--ease,ease), border-color var(--dur-1,.18s),background var(--dur-1,.18s); } .ax-sticky-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)} .ax-sticky-btn:active{transform:translateY(1px)} .ax-sticky-tx{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1} .ax-sticky-lbl{font-weight:600;font-size:.95rem;line-height:1.15;letter-spacing:-.01em} .ax-sticky-sub{ font-family:var(--font-body);font-weight:400;font-size:.68rem;line-height:1.2; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* Sekundär (KI-Check): niedrigschwellig, aber bewusst leise. */ .ax-sticky-btn--sec{ background:color-mix(in srgb,var(--surface-2,#F1F5FC) 72%,transparent); border-color:var(--line,#E3E9F3);color:var(--ink,#0B1020); } .ax-sticky-btn--sec .ax-sticky-sub{color:var(--muted,#5B657A)} .ax-sticky-btn--sec:hover{border-color:color-mix(in srgb,var(--brand-2) 45%,var(--line))} /* Primär (Erstgespräch): Markenverlauf wie .btn-primary. */ .ax-sticky-btn--pri{ background:var(--brand-grad);color:var(--cta-fg,#fff); box-shadow:0 8px 22px -10px rgba(79,70,229,.6); } .ax-sticky-btn--pri .ax-sticky-sub{color:rgba(255,255,255,.84)} .ax-sticky-arrow{width:17px;height:17px;flex:none;transition:transform var(--dur-1,.18s) var(--ease,ease)} .ax-sticky-btn--pri:hover .ax-sticky-arrow{transform:translateX(2px)} /* ---- Dark Mode (gleiche Technik wie tokens.css: [data-theme]) ---- */ [data-theme="dark"] .ax-sticky-card{ background:color-mix(in srgb,var(--surface,#10172A) 84%,transparent); border-color:color-mix(in srgb,var(--line,#212B47) 95%,transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 2px 6px rgba(0,0,0,.35), 0 18px 40px -20px rgba(0,0,0,.7), 0 40px 80px -30px rgba(0,0,0,.8); } [data-theme="dark"] .ax-sticky-btn--sec{background:color-mix(in srgb,var(--surface-2,#161F38) 80%,transparent)} [data-theme="dark"] .ax-sticky-btn--pri{box-shadow:0 10px 26px -12px rgba(124,92,255,.65)} [data-theme="dark"] .ax-sticky-x:hover{background:var(--surface-2,#161F38);color:var(--ink,#EEF2FB)} /* ---- Sehr schmale Geräte (~320px): Typo etwas zurücknehmen ---- */ @media(max-width:359px){ .ax-sticky-lbl{font-size:.88rem} .ax-sticky-sub{font-size:.64rem} .ax-sticky-btn{padding:.5rem .6rem;gap:.4rem} } /* ---- Reduzierte Bewegung: kein Ein-/Ausfahren, nur da oder nicht ---- */ @media(prefers-reduced-motion:reduce){ .ax-sticky-cta:not([hidden]){transform:none;transition:none} .ax-sticky-cta.is-visible{transition:none} .ax-sticky-btn,.ax-sticky-arrow,.ax-sticky-x{transition:none} .ax-sticky-btn:active,.ax-sticky-btn--pri:hover .ax-sticky-arrow{transform:none} } /* ============================================================ BLOG-VERZEICHNIS (Übersicht, Kategorie- & Schlagwort-Archive) Gehört zu template-parts/blog-liste.php + inc/blog-archiv.php. Alle Klassen tragen das Präfix .axb-, damit dieser Block keine Regeln der älteren .post-card/.grid-Darstellung überschreibt und umgekehrt: Beide können nebeneinander bestehen, solange andere Templates (Suche, Startseite) noch die alten Klassen nutzen. Leitidee „symmetrisch": Jede Karte hat dieselbe Bildfläche (aspect-ratio), dieselbe maximale Titel- und Anrisshöhe (Zeilen- begrenzung) und eine Meta-Zeile, die per margin-top:auto immer an der Unterkante klebt. Dadurch liegen Bildkanten, Titel und Meta über alle Karten hinweg auf einer Linie — unabhängig davon, wie lang der einzelne Text ist. ============================================================ */ /* ---- Vertikale Rhythmik ---- Ein einziger Abstandswert für alle gleichartigen Blöcke der Seite. Wer den Rhythmus ändern will, ändert genau diese Zeile. */ .axb-liste{--axb-rhythm:clamp(2.25rem,1.4rem + 3vw,3.5rem);padding-top:clamp(2rem,1rem + 3vw,3rem)} .axb-liste > .container > * + *{margin-top:var(--axb-rhythm)} .axb-liste .axb-sec-head{margin-bottom:0} /* Die Newsletter-Karte bringt aus dem Plugin einen eigenen Außenabstand mit (margin-block:var(--nl-5), rund 37px). Oben ersetzt ihn die Rhythmus-Regel ohnehin, unten blieb er stehen — dabei ist die Karte der letzte Block der Sektion. Darunter folgen nur noch deren Polster (auf dem Telefon 56px) und der Fußbereich: zusammen rund 150px Fläche ohne Inhalt. Gleiche Lösung wie bei `.article-main > .ax-nl` weiter unten. */ .axb-liste > .container > .ax-nl{margin-block:var(--axb-rhythm) 0} /* ---- Werkzeugleiste: Themen-Reiter + Suche ---- */ .axb-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem 1.5rem;flex-wrap:wrap; padding-bottom:1.1rem;border-bottom:1px solid var(--line)} .axb-tabs{min-width:0;flex:1 1 420px} /* Auf schmalen Geräten waagerecht scrollbar statt umbrechend: Die Reiter bleiben so eine Zeile und die Liste beginnt nicht erst nach vier Reihen. */ /* contain:paint ist hier nicht Kosmetik, sondern der Grund, warum die Seite auf dem Telefon nicht mehr seitwärts scrollt: overflow-x:auto begrenzt nur den Layout-Überlauf. Was die Reiter darüber hinaus MALEN — Schatten, Ränder, Fokusringe der Pillen — meldet der Browser weiterhin an die Seite, und die Wurzel bekam dadurch eine Scrollbreite von 618px bei 375px Fenster. Gemessen: mit contain:paint fällt sie auf exakt die Fensterbreite. */ .axb-tablist{display:flex;gap:.5rem;list-style:none;margin:0;padding:.15rem 0;overflow-x:auto;contain:paint;scrollbar-width:thin;-webkit-overflow-scrolling:touch} .axb-tablist::-webkit-scrollbar{height:4px} .axb-tablist::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px} .axb-tab{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap; padding:.5rem .95rem;border:1px solid var(--line);border-radius:var(--r-pill); background:var(--surface);color:var(--ink-2);font-family:var(--font-head);font-weight:600;font-size:.85rem; text-decoration:none;transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease)} .axb-tab:hover{color:var(--brand-2);border-color:var(--brand-2)} .axb-tab:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)} .axb-tab-num{font-size:.72rem;font-weight:700;line-height:1;padding:.2rem .42rem;border-radius:999px; background:var(--surface-2);color:var(--muted)} .axb-tab.is-active{background:var(--brand-grad);border-color:transparent;color:#fff} .axb-tab.is-active .axb-tab-num{background:rgba(255,255,255,.22);color:#fff} .axb-search{display:flex;align-items:center;gap:.5rem;flex:0 1 320px;min-width:230px; border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);padding:.28rem .28rem .28rem .85rem; transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)} .axb-search:focus-within{border-color:var(--brand-2);box-shadow:0 0 0 3px var(--ring)} .axb-search-ic{width:17px;height:17px;flex:none;color:var(--muted)} .axb-search-in{flex:1;min-width:0;border:0;background:none;color:var(--ink);font:inherit;font-size:.9rem;padding:.42rem 0} .axb-search-in:focus{outline:none} .axb-search-in::placeholder{color:var(--muted)} .axb-search-btn{flex:none;border:0;cursor:pointer;background:var(--brand-grad);color:var(--cta-fg,#fff); font-family:var(--font-head);font-weight:600;font-size:.82rem;padding:.5rem 1rem;border-radius:var(--r-pill)} .axb-search-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)} /* ---- Aufmacher: volle Breite, Bild links, Text rechts ---- */ /* opacity gehört in beide Übergänge: .reveal (Einblenden beim Scrollen) wird weiter oben in dieser Datei definiert — ohne den Eintrag hier würde die spätere Regel die Einblendung überschreiben und die Karten poppten hinein. */ .axb-feature{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface); box-shadow:var(--shadow-sm);transition:opacity .7s var(--ease-out),transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)} .axb-feature:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--brand-2) 45%,var(--line))} .axb-feature-link{display:grid;grid-template-columns:1.1fr 1fr;text-decoration:none;color:inherit} .axb-feature-link:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--ring)} .axb-feature-media{position:relative;aspect-ratio:16/10;background:var(--surface-2);overflow:hidden} .axb-feature-media img{width:100%;height:100%;object-fit:cover;display:block} .axb-feature-tag{position:absolute;top:1rem;left:1rem;padding:.4rem .85rem;border-radius:var(--r-pill); background:rgba(2,6,23,.58);color:#fff;font-family:var(--font-head);font-weight:700;font-size:.7rem; letter-spacing:.06em;text-transform:uppercase} .axb-feature-body{padding:clamp(1.5rem,1rem + 2.4vw,2.75rem);display:flex;flex-direction:column;justify-content:center} .axb-feature-title{font-size:clamp(1.45rem,1.05rem + 1.6vw,2.2rem);line-height:1.18;margin:.55rem 0 .8rem;color:var(--ink)} .axb-feature-text{color:var(--ink-2);font-size:1.02rem;line-height:1.6;margin:0 0 1.1rem;max-width:52ch} .axb-feature .axb-meta{margin-bottom:1rem} .axb-more{display:inline-flex;align-items:center;gap:.4rem;color:var(--brand-2);font-family:var(--font-head);font-weight:700;font-size:.95rem} .axb-arrow{transition:transform var(--dur-1) var(--ease)} .axb-feature:hover .axb-arrow{transform:translateX(4px)} /* ---- Symmetrisches Kartenraster ---- grid-auto-rows:1fr zwingt alle Zeilen auf dieselbe Höhe, nicht nur die Karten innerhalb einer Zeile. */ .axb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:clamp(1rem,.6rem + 1.2vw,1.6rem)} .axb-card{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; box-shadow:var(--shadow-sm); transition:opacity .7s var(--ease-out),transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)} .axb-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--brand-2) 40%,var(--line))} .axb-card-link{display:flex;flex-direction:column;width:100%;text-decoration:none;color:inherit} .axb-card-link:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--ring)} /* Feste Bildfläche: reserviert den Platz schon vor dem Laden (kein Layout-Sprung) und hält die Bildkanten aller Karten auf einer Höhe. */ .axb-card-media{position:relative;aspect-ratio:16/10;background:var(--surface-2);overflow:hidden;flex:none} .axb-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease-out)} .axb-card:hover .axb-card-media img{transform:scale(1.05)} .axb-card-body{display:flex;flex-direction:column;flex:1;padding:1.25rem 1.35rem 1.35rem;min-height:0} .axb-cat{font-family:var(--font-head);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--brand-2)} /* Zeilenbegrenzung mit sauberem Rückfall: max-height gilt immer (auch ohne -webkit-line-clamp), die Box-Variante ergänzt nur das Auslassungszeichen. */ .axb-card-title{font-family:var(--font-head);font-size:1.1rem;line-height:1.35;margin:.5rem 0 .55rem;color:var(--ink); overflow:hidden;max-height:calc(1.35em * 2);transition:color var(--dur-1) var(--ease)} .axb-card:hover .axb-card-title{color:var(--brand-2)} .axb-card-text{color:var(--ink-2);font-size:.92rem;line-height:1.55;margin:0 0 1rem; overflow:hidden;max-height:calc(1.55em * 3);min-height:calc(1.55em * 3)} @supports (-webkit-line-clamp:2){ .axb-card-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:none} .axb-card-text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;max-height:none} } /* Meta immer bündig an der Unterkante — der Kern der Symmetrie. */ .axb-meta{margin-top:auto;display:flex;align-items:center;flex-wrap:wrap;gap:.4rem; color:var(--muted);font-size:.8rem;padding-top:.15rem} .axb-dot{opacity:.6} /* ---- Blätterung ---- */ .axb-pager{display:flex;flex-direction:column;align-items:center;gap:.8rem; padding-top:clamp(1.5rem,1rem + 1.5vw,2.25rem);border-top:1px solid var(--line)} .axb-pager-list{display:flex;gap:.45rem;flex-wrap:wrap;justify-content:center;list-style:none;margin:0;padding:0} .axb-pager .page-numbers{display:inline-grid;place-items:center;min-width:42px;height:42px;padding:0 .75rem; border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink-2); font-family:var(--font-head);font-weight:600;font-size:.88rem;text-decoration:none; transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)} .axb-pager a.page-numbers:hover{color:var(--brand-2);border-color:var(--brand-2)} .axb-pager a.page-numbers:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)} .axb-pager .page-numbers.current{background:var(--brand-grad);border-color:transparent;color:#fff} .axb-pager .page-numbers.dots{border-color:transparent;background:none} /* Zurück/Weiter: inline-grid stapelte Text und Pfeil als zwei Grid-Zeilen übereinander — deshalb Flex in einer Zeile, ohne Umbruch. */ .axb-pager .prev,.axb-pager .next{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap} .axb-pager-info{margin:0;color:var(--muted);font-size:.82rem} /* ---- Leerzustand ---- */ .axb-empty{max-width:560px;margin-inline:auto;text-align:center; border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--surface); padding:clamp(2rem,1.4rem + 2vw,3.25rem) clamp(1.25rem,1rem + 1.5vw,2.5rem)} .axb-empty-ic{width:40px;height:40px;color:var(--brand-2);opacity:.75} .axb-empty-title{font-size:var(--step-2);margin:.9rem 0 .6rem;color:var(--ink)} .axb-empty-text{color:var(--ink-2);margin:0 0 1.5rem;line-height:1.6} .axb-empty-actions{display:flex;gap:.65rem;flex-wrap:wrap;justify-content:center} /* ---- Feed-Hinweis (bewusst leise) ---- */ .axb-feed{margin:0;text-align:center} .axb-feed-link{display:inline-flex;align-items:center;gap:.5rem;color:var(--muted);font-size:.85rem;text-decoration:none; transition:color var(--dur-1) var(--ease)} .axb-feed-link svg{width:15px;height:15px} .axb-feed-link:hover{color:var(--brand-2)} .axb-feed-link:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring);border-radius:8px} /* ---- Dark Mode (gleiche Mechanik wie tokens.css: [data-theme]) ---- Farben kommen aus den Tokens; hier nur, was sich nicht allein über Variablen lösen lässt (Kontrast der Flächen, Kanten, Schatten). */ [data-theme="dark"] .axb-card, [data-theme="dark"] .axb-feature, [data-theme="dark"] .axb-empty{background:color-mix(in srgb,var(--surface) 92%,transparent)} [data-theme="dark"] .axb-card-media, [data-theme="dark"] .axb-feature-media{background:var(--surface-2)} [data-theme="dark"] .axb-tab-num{background:var(--surface-2);color:var(--ink-2)} [data-theme="dark"] .axb-search{background:color-mix(in srgb,var(--surface) 90%,transparent)} [data-theme="dark"] .axb-card:hover{box-shadow:var(--shadow-lg)} /* ---- Umbrüche ---- */ /* Sehr breite Fenster: Bei 1500px Seitenbreite wären drei Karten je Reihe rund 455px breit — dieselbe Karte, nur in die Breite gezogen. Das Verzeichnis ist eine offene Liste mit beliebig vielen Beiträgen, deshalb ist hier (anders als bei .grid-3 mit seinen gesetzten Dreiergruppen) eine vierte Spalte der richtige Weg: Die Kachel behält ihre gewohnten ~335px, die zusätzliche Breite bringt einen Beitrag mehr statt Leerlauf. */ @media(min-width:1440px){ .axb-grid{grid-template-columns:repeat(4,minmax(0,1fr))} } @media(max-width:1040px){ .axb-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:760px){ .axb-feature-link{grid-template-columns:1fr} .axb-feature-media{aspect-ratio:16/9} /* nowrap ist hier entscheidend: Eine UMBRECHENDE Spalten-Flexbox bildet mehrere Zeilen, und deren Querbreite richtet sich nach dem breitesten Inhalt — die Reiterliste hat als Zeile 709px Eigenbreite. „stretch" zog die Kinder auf diese 709px statt auf die 338px des Containers, und die ganze Seite bekam einen waagerechten Scrollbalken. Ohne Umbruch gibt es genau eine Zeile, die Kinder nehmen die Containerbreite an, und die Reiterliste scrollt wie vorgesehen in sich selbst. */ .axb-bar{flex-direction:column;align-items:stretch;flex-wrap:nowrap} /* In der Spaltenrichtung bezieht sich flex-basis auf die HÖHE: Aus „flex:1 1 420px" wurden 420px hohe Reiter mit einer 45px hohen Liste darin — ein 375px großes Loch zwischen Themen und Suche. */ .axb-tabs{flex:0 0 auto} .axb-search{flex:0 0 auto} /* Trefferfläche der Reiter: 13,6px Schrift × 1,65 Zeilenhöhe + 2 × .5rem Polster + 2 × 1px Rahmen ergeben 40px — vier zu wenig für einen Daumen. min-height statt mehr Polster, damit die Pillenform und der Abstand zwischen Name und Beitragszahl unverändert bleiben. */ .axb-tab{min-height:44px} /* Der weiche Verlauf am rechten Rand zeigt, dass die Reiterliste seitwärts weitergeht — endet sie hart und bündig, hält man sie für vollständig. Dasselbe Mittel nutzt weiter oben schon die Vergleichstabelle. Bewusst OHNE negative Außenabstände bis zur Bildschirmkante: In der Spalten-Flexbox der Leiste vergrößert das die Breite des gesamten Containers — die Seite bekam dadurch einen waagerechten Scrollbalken von 618px bei 375px Fenster. Das Polster oben/unten ersetzt die bisherigen .15rem: Der Fokusring ist 3px breit und wurde vom overflow der Liste angeschnitten. */ .axb-tablist{padding:.35rem 0; -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); mask-image:linear-gradient(90deg,#000 88%,transparent)} /* iOS zoomt beim Fokus in jedes Feld unter 16px hinein (das Viewport-Meta verbietet das Zoomen bewusst nicht). Die allgemeine Regel dafür weiter oben zählt input[type=text|email|tel] auf — dieses Feld ist type=search und fiel durch das Raster. */ .axb-search-in{font-size:16px} /* Gleiche Rechnung wie beim Reiter: 13,1px × 1,65 + 2 × .5rem = 38px. */ .axb-search-btn{min-height:44px} } @media(max-width:560px){ /* Einspaltig ist jede Karte eine eigene Rasterzeile — und grid-auto-rows:1fr zieht ALLE Zeilen auf die Höhe der höchsten (genau das, was der Wert mehrspaltig leisten soll). Eine Karte mit einzeiligem Titel und kurzem Anriss bekam so bis zu 70px Luft unter der Meta-Zeile, die durch margin-top:auto an der Unterkante klebt. Untereinander gibt es nichts auszurichten: Jede Karte trägt ihre eigene Höhe. Erst damit greift auch das min-height:0 der nächsten Regel. */ .axb-grid{grid-template-columns:1fr;grid-auto-rows:auto} /* Einspaltig darf der Anriss frei atmen: Die feste Mindesthöhe dient nur der Ausrichtung nebeneinanderliegender Karten. */ .axb-card-text{min-height:0} /* Titel dürfen eine Zeile mehr: Bei 390px Fenster bleiben der Karte 390 − 2 × 18,4px Seitenrand − 2 × 1px Rahmen − 2 × 21,6px Innenabstand = 308px. Bei 17,6px Schrift sind das rund 33 Zeichen je Zeile, also 66 auf zwei Zeilen — deutsche Beitragstitel liegen regelmäßig darüber und wurden mitten im Wort abgeschnitten. Nebeneinander wäre die dritte Zeile ein Ausrichtungsproblem, einspaltig ist sie keins. */ .axb-card-title{max-height:calc(1.35em * 3)} @supports (-webkit-line-clamp:3){ .axb-card-title{-webkit-line-clamp:3;max-height:none} } /* Der Aufmacher-Anriss steht mit 36 Wörtern in einer rund 300px breiten Spalte: gut sieben Zeilen, zusammen mit Bild und Titel über einen ganzen Telefonbildschirm für einen einzigen Teaser. Vier Zeilen bleiben eine Stufe großzügiger als die drei der Karten und halten damit die Rangordnung — der Anriss ist ein Versprechen, kein Ersatz für den Text. */ .axb-feature-text{overflow:hidden;max-height:calc(1.6em * 4)} @supports (-webkit-line-clamp:4){ .axb-feature-text{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;max-height:none} } /* Meta-Zeile: Die Zeile bricht um (bei „Aktualisiert am …" plus Lesezeit plus Quelle sicher), soll aber zwischen den Angaben brechen und nicht mitten im Datum („12." / „August 2026"). Nowrap ist hier ungefährlich, weil die längste Einzelangabe („Aktualisiert am 12. September 2026", ~211px bei 12,8px Schrift) auch bei 360px Fenster in die Karte passt. */ .axb-meta > *{white-space:nowrap} /* Blätterung: 42px waren knapp unter der Mindestgröße einer Touch-Fläche. Die Liste bricht ohnehin um (justify-content:center), die zwei Pixel kosten also keine Zeile. */ .axb-pager .page-numbers{min-width:44px;height:44px} /* Der Feed-Hinweis ist bewusst leise, war als Ziel mit 22px Höhe aber kleiner als jede Empfehlung. Polster statt größerer Schrift: Er soll leise bleiben, nur treffbar werden. */ .axb-feed-link{padding:.5rem .25rem} } /* ---- Reduzierte Bewegung respektieren ---- */ @media(prefers-reduced-motion:reduce){ .axb-card,.axb-feature,.axb-card-media img,.axb-arrow,.axb-tab,.axb-search,.axb-feed-link{transition:none} .axb-card:hover,.axb-feature:hover{transform:none} .axb-card:hover .axb-card-media img,.axb-feature:hover .axb-arrow{transform:none} } /* ========================================================================== Batch 40 — Blogartikel auf Publikations-Niveau Ein zusammenhängender Block: vertikale Rhythmik, Kernaussagen-Kasten, nummeriertes Inhaltsverzeichnis, schwebende Teilen-Leiste, Abschluss-CTA und symmetrische Karten für verwandte Beiträge. Leitgedanke „symmetrisch": Abstände zwischen gleichartigen Blöcken kommen aus EINER Variablen (--ax-flow), Spaltenbreiten aus zwei weiteren (--ax-col, --ax-side). Wer den Rhythmus ändern will, ändert eine Zahl — nicht fünfzehn Einzelabstände. ========================================================================== */ /* ---- 1) Raster & Rhythmik ------------------------------------------------ */ .article-wrap{ /* Textspalte = Lesebreite aus den Tokens. Sie wächst bei 1500px Seiten- breite bewusst NICHT mit: Ein Artikel mit 1400px langen Zeilen wäre unlesbar. Die Seitenspalte darf dagegen etwas Luft dazubekommen, sie trägt nur Inhaltsverzeichnis und Kurzhinweise. */ --ax-col:var(--measure); --ax-side:clamp(280px,24vw,340px); /* ab ~1420px Fenster volle 340px statt bisher fix 280px */ /* Eine Stufe enger als früher (2–3rem): Der Artikel soll dicht gesetzt sein wie ein Magazin, nicht luftig-leer (Kundenfeedback „zu viel Freifläche"). */ --ax-flow:clamp(1.6rem,1.25rem + 1vw,2.25rem); /* Abstand zwischen Blöcken */ --ax-stick:96px; /* Sticky-Offset unter dem Header */ grid-template-columns:minmax(0,var(--ax-col)) var(--ax-side); /* Volle Headerbreite (Kundenwunsch): Textspalte beginnt an der Container- Kante (bündig mit dem Logo), die Seitenspalte endet an der rechten Kante. Die Lücke dazwischen wächst mit dem Fenster — die Lesebreite nicht. */ justify-content:space-between; column-gap:clamp(2rem,1rem + 3vw,3.5rem); row-gap:0; /* Der Rahmen ist eine Sektion und läuft deshalb auf Seitenbreite; wie breit der Artikel wirklich wird, entscheiden die beiden Spalten darüber. */ max-width:var(--container); /* Oben knapp: Das Polster zum Hero existiert bereits als dessen Unterkante — hier noch einmal voll aufzuschlagen ergab die Leere aus dem Screenshot. */ padding-top:clamp(.9rem,.6rem + 1vw,1.5rem); padding-bottom:clamp(2rem,1.5rem + 1.5vw,3rem); } .article-main{max-width:var(--ax-col)} /* Der komplette vertikale Rhythmus des Artikels an genau einer Stelle. Dadurch bleibt der Abstand identisch, egal welcher Block gerade fehlt (kein Beitragsbild, keine Schlagwörter, keine Kernaussagen). */ .article-main > * + *{margin-top:var(--ax-flow)} .article-main > .article-hero-img{margin:0} .article-main > .toc-mobile{margin:0} .article-main > .ax-share, .article-main > .entry-tags{margin-bottom:0;padding-top:calc(var(--ax-flow) - .6rem)} /* Schlagwörter + Teilen bilden EINE Meta-Gruppe unter EINER Trennlinie: zwei Hairlines mit vollem Blockabstand direkt übereinander lasen sich wie zwei angefangene Abschnitte statt wie ein Abspann. */ .article-main > .entry-tags + .ax-share{border-top:0;margin-top:.5rem;padding-top:0} .article-main > .author-box, .article-main > .post-nav, .article-main > .ax-post-cta{margin-top:var(--ax-flow)} /* Die Newsletter-Karte bringt aus dem Plugin einen eigenen Außenabstand mit (margin-block) — im Artikel gilt aber die eine Rhythmus-Variable, sonst tanzt genau dieser Block aus der Reihe. */ .article-main > .ax-nl{margin-block:var(--ax-flow) 0} /* Kartenfamilie am Artikelende: Autorbox, Abschluss-CTA und die beiden Navigationskarten hatten drei Radien, zwei Flächenfarben und drei Innenabstände — die „fehlende Symmetrie" aus dem Kundenfeedback. Eine Regel für alle: Wer die Familie ändern will, ändert sie hier. */ .article-main > .author-box, .article-main > .ax-post-cta, .article-main .post-nav-item{ padding:clamp(1.15rem,1rem + .5vw,1.4rem) clamp(1.25rem,1.1rem + .5vw,1.5rem); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); } /* Überschriften mit einheitlichem Vorlauf: H2 beginnt ein Kapitel, H3 einen Unterabschnitt — der Abstand davor soll diese Hierarchie hörbar machen. */ .prose h2{margin:2.6rem 0 .9rem;scroll-margin-top:calc(var(--ax-stick,96px) + .5rem)} .prose h3{margin:1.9rem 0 .6rem;scroll-margin-top:calc(var(--ax-stick,96px) + .5rem)} .prose > :first-child{margin-top:0} .prose > :last-child{margin-bottom:0} /* Meta-Zeile im Kopf: Datum, Aktualisierung, Lesezeit, Umfang, Autor. */ .post-meta{align-items:center;row-gap:.35rem} .post-meta-upd{color:var(--brand-2);font-weight:600} /* ---- 2) Kernaussagen-Kasten („Das Wichtigste in Kürze") ------------------ */ .ax-key{ position:relative;overflow:hidden; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:clamp(1.1rem,.9rem + .6vw,1.5rem) clamp(1.2rem,1rem + .8vw,1.7rem); box-shadow:var(--shadow-sm); } /* Markenkante links statt farbiger Fläche: hebt hervor, ohne den Lesefluss mit einem großen Farbblock zu unterbrechen. */ .ax-key::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand-grad)} .ax-key-title{ display:flex;align-items:center;gap:.5rem;margin:0 0 .85rem; font-family:var(--font-head);font-weight:700;font-size:.78rem; letter-spacing:.1em;text-transform:uppercase;color:var(--brand-2); } .ax-key-title svg{flex:none} .ax-key-list{list-style:none;margin:0;padding:0;display:grid;gap:.65rem} .ax-key-list li{position:relative;padding-left:1.6rem;color:var(--ink-2);line-height:1.6} .ax-key-list li::before{ content:"";position:absolute;left:.2rem;top:.55em;width:8px;height:8px; border-radius:50%;background:var(--brand-grad); } /* ---- 3) Inhaltsverzeichnis: nummeriert, verschachtelt, aktiv ------------- */ .toc-list,.toc-sub{list-style:none;margin:0;padding:0} .toc .toc-list{counter-reset:toc} /* Höhere Spezifität als das frühere `.toc ol{counter-reset:toc}` — sonst setzt die Unterliste den Hauptzähler zurück und die Nummerierung springt. */ .toc .toc-sub{counter-reset:tocsub;padding-left:.9rem;margin:.15rem 0 .4rem} .toc .toc-list > li{counter-increment:toc} .toc .toc-sub > li{counter-increment:tocsub;padding-left:0} /* Eine H3 ohne vorangehende H2 rückt nicht ein — sie ist hier Hauptpunkt. (Neutralisiert die ältere Regel `.toc li.lvl3{padding-left:1rem}`.) */ .toc .toc-list > li.lvl3{padding-left:0} .toc a{ display:grid;grid-template-columns:auto minmax(0,1fr);gap:.45rem;align-items:baseline; padding:.32rem 0 .32rem .8rem;line-height:1.4; } /* Nummern per CSS-Zähler statt im Markup: Screenreader lesen den reinen Überschriftentext, die Gliederung stimmt auch bei H3 ohne vorheriges H2. */ .toc .toc-list > li > a::before{ content:counter(toc) ".";font-variant-numeric:tabular-nums; font-family:var(--font-head);font-weight:700;font-size:.76rem;color:var(--muted); } .toc .toc-sub > li > a::before{content:counter(toc) "." counter(tocsub)} .toc a:hover::before,.toc a.is-active::before{color:var(--brand-2)} .toc-txt{display:block} /* Kapitel, in dem man sich befindet, bleibt mitmarkiert, auch wenn gerade ein Unterabschnitt aktiv ist. */ .toc .toc-list > li.is-open > a{color:var(--ink)} .toc .toc-list > li.is-open > a::before{color:var(--brand-2)} /* Seitenspalte: die GANZE Spalte (Verzeichnis + Werbetafel) klebt unter dem Header. Nur das Verzeichnis scrollt bei Überlänge in sich selbst — so bleibt die Tafel darunter dauerhaft sichtbar (Kundenwunsch: sticky), statt im Scrollbereich des Verzeichnisses zu verschwinden. */ .article-side{ align-self:start; position:sticky;top:var(--ax-stick,96px); max-height:calc(100vh - var(--ax-stick,96px) - 2rem); display:flex;flex-direction:column;gap:1.1rem; } .toc-sticky{ position:static; flex:0 1 auto;min-height:0; overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin; } .article-side .ax-d24{flex:none} /* Mobil: eingeklappt (
      , funktioniert ohne JavaScript). */ .toc-collapse{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .toc-collapse-sum{ display:flex;align-items:center;justify-content:space-between;gap:.6rem; padding:.85rem 1.1rem;cursor:pointer;list-style:none; font-family:var(--font-head);font-weight:700;font-size:.78rem; letter-spacing:.1em;text-transform:uppercase;color:var(--muted); } .toc-collapse-sum::-webkit-details-marker{display:none} .toc-collapse-sum:hover{color:var(--brand-2)} .toc-collapse-ic{flex:none;transition:transform var(--dur-1) var(--ease)} .toc-collapse[open] .toc-collapse-ic{transform:rotate(180deg)} .toc-collapse[open] .toc-collapse-sum{border-bottom:1px solid var(--line)} /* Der Titel steht bereits in der Zusammenfassung — im Kasten wäre er doppelt. */ .toc-collapse .toc{background:transparent;border:0;border-radius:0;padding:.8rem 1.1rem 1rem} .toc-collapse .toc-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* ---- 4) Teilen: bewusst im Textfluss belassen. Die frühere schwebende Leiste am linken Fensterrand wirkte losgelöst vom Artikel und hat dem Kunden nicht gefallen — die Teilen-Zeile bleibt daher am Artikelende, wo sie inhaltlich hingehört. -------------------------------------------- */ /* ---- 5) Abschluss-Hinweis & Sprungmarke nach oben ------------------------ */ /* Nur Anordnung — Fläche, Kante und Radius kommen aus der Kartenfamilie (siehe Abschnitt 1), damit der CTA nicht aus der Reihe fällt. */ .ax-post-cta{ display:flex;align-items:center;justify-content:space-between;gap:1rem 1.5rem;flex-wrap:wrap; } .ax-post-cta-t{margin:0 0 .2rem;font-family:var(--font-head);font-weight:700;font-size:1rem;color:var(--ink)} .ax-post-cta-x{margin:0;max-width:54ch;font-size:.9rem;line-height:1.55;color:var(--muted)} /* Auf der hellen Kartenfläche braucht der Ghost-Button eine eigene Stufe, sonst verschwindet er in der Karte. */ .ax-post-cta-btn{flex:none;background:var(--surface-2)} .ax-to-top{text-align:center;margin-bottom:0} .ax-to-top-link{ display:inline-flex;align-items:center;gap:.45rem;padding:.5rem 1rem; border:1px solid transparent;border-radius:var(--r-pill); font-family:var(--font-head);font-weight:600;font-size:.85rem;color:var(--muted); transition:color var(--dur-1) var(--ease),border-color var(--dur-1),background var(--dur-1); } .ax-to-top-link:hover{color:var(--brand-2);border-color:var(--line);background:var(--surface)} /* ---- 6) Verwandte Beiträge: gleiche Bild- und Kartenhöhe ----------------- */ .ax-rel-grid{align-items:stretch;grid-auto-rows:1fr} .post-card--sym{display:flex} .post-card--sym > a{display:flex;flex-direction:column;width:100%} /* aspect-ratio statt fester Pixelhöhe: das Bild ist auf jeder Breite gleich proportioniert, alle drei Karten schneiden identisch ab. */ .post-card--sym .thumb{height:auto;aspect-ratio:16/10} .post-card--sym .thumb img{display:block;width:100%;height:100%;object-fit:cover} .post-card--sym .body{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;flex:1;padding:1.15rem 1.3rem 1.3rem} /* Titel auf zwei Zeilen begrenzt und die Höhe reserviert — damit die Meta-Zeilen aller Karten auf derselben Linie sitzen. */ .post-card--sym h3{ margin:0;font-size:1.06rem;line-height:1.4;min-height:2.8em; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .post-card--sym .meta{margin-top:auto;padding-top:.2rem} /* ---- 7) Dark Mode (Mechanik aus tokens.css: [data-theme="dark"]) --------- */ [data-theme="dark"] .ax-key{background:color-mix(in srgb,var(--surface) 88%,transparent)} /* CTA-Fläche folgt im Dunkeln der Kartenfamilie (var(--surface)) — eine eigene Mischfarbe hätte die Symmetrie der Endblöcke wieder gebrochen. */ [data-theme="dark"] .toc-collapse, [data-theme="dark"] .ax-to-top-link:hover{background:var(--surface-2)} [data-theme="dark"] .toc .toc-list > li.is-open > a{color:var(--ink)} /* ---- 8) Schmale Fenster: eine Spalte, Leiste wieder im Fluss ------------- */ @media(max-width:900px){ /* Muss hier wiederholt werden: die frühere Regel steht weiter oben in der Datei und würde von der neuen Raster-Definition überschrieben. */ /* Einspaltig ist der Artikel nur noch Lesespalte — also Lesebreite statt einer eigenen Pixelzahl. Auf Geräten unter 900px wirkt sich das kaum aus, hält den Wert aber an derselben Stellschraube wie die Desktop-Ansicht. */ .article-wrap{grid-template-columns:minmax(0,1fr);max-width:var(--measure)} .article-main{max-width:none} .ax-post-cta{align-items:flex-start} .ax-post-cta-btn{width:100%;justify-content:center} } @media(max-width:620px){ .article-wrap{--ax-flow:1.5rem} .ax-key-list li{padding-left:1.4rem} } /* ---- 9) Bedienbarkeit: Fokus, reduzierte Bewegung, Druck ----------------- */ .toc a:focus-visible,.ax-to-top-link:focus-visible,.toc-collapse-sum:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px;box-shadow:none;border-radius:8px} @media(prefers-reduced-motion:reduce){ .toc a,.toc-collapse-ic,.ax-to-top-link,.post-card--sym .thumb img{transition:none} .toc-sticky{scroll-behavior:auto} .toc-collapse[open] .toc-collapse-ic{transform:none} } @media print{ .ax-share--rail,.ax-post-cta,.ax-to-top,.toc-collapse{display:none !important} .ax-key{break-inside:avoid} } /* ================================================================== Artikel-Hero bündig zur Artikelspalte. Der Hero saß bisher als schmaler, MITTIG zentrierter Block über dem Artikel, dessen Text-/Seitenspalten-Paar als Einheit zentriert wird — dadurch begannen Überschrift und Fließtext auf verschiedenen Kanten. Lösung: Der Hero-Container erhält exakt dieselbe Spaltengeometrie wie .article-wrap (gleiche Breiten, gleiche Lücke, gleiche Zentrierung); sein Inhalt liegt in Spalte 1 und beginnt damit pixelgenau auf der Kante des Artikeltexts. Werte bewusst identisch zu .article-wrap — wer dort etwas ändert, muss hier mitziehen. ================================================================== */ .article-hero-wrap{ display:grid; grid-template-columns:minmax(0,var(--measure)) clamp(280px,24vw,340px); justify-content:space-between; /* identisch zu .article-wrap — eine Kante */ column-gap:clamp(2rem,1rem + 3vw,3.5rem); } /* Der Hero hat keinen .inner-Wrapper — jedes direkte Kind gehört in Spalte 1, sonst würde das Grid sie abwechselnd auf beide Spalten verteilen. */ .article-hero-wrap > *{grid-column:1;min-width:0} @media(max-width:900px){ /* Unterhalb der Zweispaltigkeit gilt wieder die schmale Lesebreite — identisch zum einspaltigen .article-wrap. */ .article-hero-wrap{display:block;max-width:calc(var(--measure) + 2 * var(--gutter))} } /* ================================================================== Werbetafel „Dienstleistungen24" (inc/promo-d24.php) Eigenwerbung für die Schwester-Plattform in der Artikel-Seitenspalte, direkt unter dem Inhaltsverzeichnis in derselben Sticky-Spalte. Zielgruppe: Unternehmen/Dienstleister — kostenlos eintragen, Aufträge gewinnen. Formensprache wie die Kartenfamilie am Artikelende (Batch 40): feine Kante, --r-lg, gestufter weicher Schatten. Akzent bewusst ruhig: ein 2px-Verlaufs-Saum oben, sonst Flächen aus den Tokens. Abstände laufen über EINE lokale Skala (--d24-1…-4), damit die Karte einen eigenen, präzisen Rhythmus hat statt vieler Einzelwerte. Logo: echter Schriftzug (dunkler Text) als auf einer hellen Chip-Fläche, die in BEIDEN Modi hell bleibt — im Dark Mode wäre der Schriftzug auf der Kartenfläche sonst unlesbar. Sticky-Verhalten: .toc-sticky ist normalerweise selbst der Scroll- Container (max-height + overflow). Mit Tafel übernimmt das Verzeichnis das interne Scrollen, damit die Tafel nie im Scrollbereich verschwindet und ihr Schatten nicht beschnitten wird. Browser ohne :has() behalten das alte Verhalten — die Tafel scrollt dann schlicht mit. Schmale Fenster (≤900px): .article-side ist dort ausgeblendet (das Verzeichnis übernimmt .toc-mobile). Statt die Tafel doppelt auszugeben, wird die Spalte wieder eingeblendet, nur das Desktop-Verzeichnis darin versteckt: Die Tafel steht dann als letzte Karte nach dem Artikelinhalt im Fluss — ein Markup für beide Breiten. ================================================================== */ .ax-d24{ /* Lokale Abstands-Skala: 1 = eng (Zeilen), 2 = Absatz, 3 = Gruppe, 4 = Rand. */ --d24-1:.5rem; --d24-2:.8rem; --d24-3:1.15rem; --d24-4:1.35rem; position:relative;overflow:hidden; margin-top:1.1rem; padding:var(--d24-3) var(--d24-4) var(--d24-4); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm),0 18px 36px -26px rgba(23,34,73,.35); transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),border-color var(--dur-1); } /* Ruhiger Verlaufs-Saum oben: markiert die Tafel als Akzentkarte — analog zur Markenkante des Kernaussagen-Kastens, nur horizontal und schmaler. */ .ax-d24::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--brand-grad);opacity:.85} .ax-d24:hover{ transform:translateY(-2px); border-color:color-mix(in srgb,var(--brand-2) 34%,var(--line)); box-shadow:var(--shadow-sm),0 24px 44px -24px rgba(23,34,73,.4); } [data-theme="dark"] .ax-d24{box-shadow:var(--shadow-sm),0 18px 36px -24px rgba(0,0,0,.6)} [data-theme="dark"] .ax-d24:hover{box-shadow:var(--shadow-sm),0 24px 46px -22px rgba(0,0,0,.7)} /* Werbekennzeichnung: klein und ruhig, aber als erste Zeile eindeutig. */ .ax-d24-tag{ margin:0 0 var(--d24-2);font-size:.66rem;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--muted); } /* Logo-Chip: bleibt in beiden Modi hell (fester Weißton + feste helle Kante statt Token), weil der Schriftzug im Bild dunkel ist. */ .ax-d24-logo{ display:flex;align-items:center;justify-content:center; margin:0 0 var(--d24-3);padding:.6rem .8rem; background:#FFFFFF;border:1px solid #E4E9F2;border-radius:var(--r-sm); } .ax-d24-logo img{display:block;width:100%;max-width:220px;height:auto} /* Textschriftzug statt Fremdbild — siehe inc/promo-d24.php. Feste Farben, weil der Chip immer weiß ist, auch im dunklen Schema. */ .ax-d24-logo--text{ font-family:var(--font-head);font-weight:700;letter-spacing:-.01em; font-size:1.12rem;line-height:1.2;color:#12203A;gap:.04em; } .ax-d24-logo--text b{color:#1D4ED8;font-weight:800} .ax-d24-logo--text em{font-style:normal;color:#5B6B85;font-weight:600} .ax-d24-title{ margin:0 0 var(--d24-1);font-family:var(--font-head);font-weight:700; font-size:1.04rem;line-height:1.35;color:var(--ink); } .ax-d24-txt{margin:0 0 var(--d24-2);font-size:.86rem;line-height:1.55;color:var(--ink-2)} /* Nutzen-Zeilen mit Haken statt Kategorie-Chips: drei linksbündige Zeilen lesen sich in der schmalen Spalte als ruhiges Argument, während sieben umbrechende Pillen kleinteilig wirken — Zeilen sind hier das Edlere. */ .ax-d24-list{list-style:none;display:grid;gap:var(--d24-1);margin:0 0 var(--d24-3);padding:0} .ax-d24-list li{ display:flex;align-items:flex-start;gap:.55rem; font-size:.82rem;line-height:1.45;color:var(--ink-2); } .ax-d24-list svg{flex:none;margin-top:.14em;color:var(--brand-2)} .ax-d24-btn{ display:flex;align-items:center;justify-content:center;gap:.45rem;width:100%; padding:.68rem 1rem;border-radius:var(--r-pill); background:var(--brand-grad);color:var(--cta-fg); font-family:var(--font-head);font-weight:600;font-size:.88rem;line-height:1.2; box-shadow:0 8px 22px -10px rgba(79,70,229,.55); transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease); } .ax-d24-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(79,70,229,.65);color:var(--cta-fg)} .ax-d24-btn:focus-visible{outline:2px solid var(--brand-2);outline-offset:3px} .ax-d24-arr{transition:transform var(--dur-1) var(--ease)} .ax-d24-btn:hover .ax-d24-arr{transform:translateX(3px)} /* Sticky-Spalte mit Tafel: Scrollen wandert ins Verzeichnis (s. Kopfkommentar). Die Obergrenze ist so gewählt, dass Verzeichnis + Tafel zusammen auch auf flachen Desktop-Fenstern unter dem Sticky-Offset Platz finden. */ .toc-sticky:has(.ax-d24){max-height:none;overflow:visible} .toc-sticky:has(.ax-d24) .toc{ max-height:min(44vh,30rem); overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin; } /* Schmale Fenster: Spalte wieder einblenden, nur die Tafel zeigen — sie rückt als letzte Karte nach dem Artikelinhalt in den Fluss. */ @media(max-width:900px){ /* position:sticky und die Höhengrenze der Desktop-Spalte müssen hier mit zurückgesetzt werden: Einspaltig steht die Tafel im normalen Fluss, eine Deckelung auf Bildschirmhöhe minus Sticky-Offset könnte sie beschneiden. */ .article-side{display:block;position:static;max-height:none} .article-side .toc{display:none} .toc-sticky{position:static;max-height:none;overflow:visible} .ax-d24{margin-top:var(--ax-flow,2rem)} } @media(prefers-reduced-motion:reduce){ .ax-d24,.ax-d24-btn,.ax-d24-arr{transition:none} .ax-d24:hover,.ax-d24-btn:hover{transform:none} .ax-d24-btn:hover .ax-d24-arr{transform:none} } /* Im Druck ist .article-side bereits ausgeblendet (Druck-Stile oben); Sicherung für den Fall, dass die Tafel je woanders eingebunden wird. */ @media print{.ax-d24{display:none !important}} /* ================================================================== Aufklapp-Menü in der Kopfzeile („Produkt & Preise" → Leistungen). HINWEIS: Dieser Block wurde bei einer Footer-Überarbeitung versehentlich überschrieben — deshalb standen die Unterpunkte kurzzeitig offen als Liste im Header. Er ist bewusst wieder als EIGENER Block am Dateiende angelegt; wer am Dateiende ersetzt, muss ihn mitnehmen. Rein CSS-gesteuert: öffnet bei Hover UND bei Tastaturfokus (:focus-within) — ohne JavaScript bedienbar. ================================================================== */ .primary-nav .has-sub{position:relative} .primary-nav .has-sub > a{display:inline-flex;align-items:center;gap:.3rem} .primary-nav .sub-caret{opacity:.6;transition:transform var(--dur-1,.18s) ease} .primary-nav .has-sub:hover .sub-caret, .primary-nav .has-sub:focus-within .sub-caret{transform:rotate(180deg)} .primary-nav .sub-menu{ position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px); min-width:230px;margin:0;padding:.5rem;list-style:none; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md,14px); box-shadow:0 2px 6px rgba(11,16,32,.06),0 18px 44px rgba(23,34,73,.16); opacity:0;visibility:hidden;pointer-events:none; transition:opacity var(--dur-1,.18s) ease,transform var(--dur-1,.18s) ease,visibility 0s linear .18s; z-index:60; } .primary-nav .sub-menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px} .primary-nav .has-sub:hover > .sub-menu, .primary-nav .has-sub:focus-within > .sub-menu{ opacity:1;visibility:visible;pointer-events:auto; transform:translateX(-50%) translateY(0);transition-delay:0s; } .primary-nav .sub-menu li{margin:0;padding:0;list-style:none} .primary-nav .sub-menu li::before,.primary-nav .sub-menu li::marker{content:none} .primary-nav .sub-menu a{ display:block;padding:.55rem .8rem;border-radius:10px; font-size:.92rem;font-weight:600;color:var(--ink-2);white-space:nowrap; } .primary-nav .sub-menu a:hover, .primary-nav .sub-menu a:focus-visible{background:var(--surface-2);color:var(--brand-2)} [data-theme="dark"] .primary-nav .sub-menu{box-shadow:0 18px 44px rgba(0,0,0,.5)} @media (prefers-reduced-motion: reduce){ .primary-nav .sub-menu,.primary-nav .sub-caret{transition:none} } /* ================================================================== Untermenü: jeder Leistungs-Punkt in der Akzentfarbe seiner Seite. Die Farbwerte sind bewusst dieselben wie in functions.php (axona_leistung_accent_css) — wer dort eine Farbwelt ändert, zieht hier nach. Umgesetzt als Unterstreichung, die beim Über- fahren von links hereinwächst, plus Textfärbung. ================================================================== */ /* Unterstreichung nur unter dem TEXT (span.sub-label), nicht über die volle Zeilenbreite — sie wächst beim Überfahren von links heran. */ /* Die Kopfzeilen-Unterstreichung (.nav-links a::after) erbt ins Untermenü und zog dort einen zweiten Strich über die volle Zeilenbreite — im Untermenü übernimmt allein die kurze Label-Linie. */ .primary-nav .sub-menu a::after{content:none} .primary-nav .sub-menu .sub-label{position:relative;display:inline-block} .primary-nav .sub-menu .sub-label::after{ content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px; border-radius:2px;background:var(--sub-akzent,var(--brand-2)); transform:scaleX(0);transform-origin:left center; transition:transform var(--dur-1,.18s) ease; } .primary-nav .sub-menu a:hover .sub-label::after, .primary-nav .sub-menu a:focus-visible .sub-label::after{transform:scaleX(1)} .primary-nav .sub-menu a:hover, .primary-nav .sub-menu a:focus-visible{color:var(--sub-akzent,var(--brand-2));background:var(--surface-2)} /* Farbwelten je Leistung (identisch zu functions.php, jeweils Farbe 1) */ .primary-nav .sub-ki-tools{--sub-akzent:#4F46E5} .primary-nav .sub-marketing{--sub-akzent:#DB2777} .primary-nav .sub-seo-ki-suche{--sub-akzent:#0891B2} .primary-nav .sub-automatisierung{--sub-akzent:#EA580C} .primary-nav .sub-managed-service{--sub-akzent:#2563EB} .primary-nav .sub-webseiten{--sub-akzent:#15803D} /* Im Dunkelmodus die jeweils hellere zweite Farbe der Farbwelt, damit der Kontrast auf dunkler Fläche reicht. */ [data-theme="dark"] .primary-nav .sub-ki-tools{--sub-akzent:#7C5CFF} [data-theme="dark"] .primary-nav .sub-marketing{--sub-akzent:#F472B6} [data-theme="dark"] .primary-nav .sub-seo-ki-suche{--sub-akzent:#22D3EE} [data-theme="dark"] .primary-nav .sub-automatisierung{--sub-akzent:#F59E0B} [data-theme="dark"] .primary-nav .sub-managed-service{--sub-akzent:#38BDF8} [data-theme="dark"] .primary-nav .sub-webseiten{--sub-akzent:#4ADE80} @media (prefers-reduced-motion: reduce){ .primary-nav .sub-menu .sub-label::after{transition:none} } /* ================================================================== Batch 49 — Telefon-Durchgang (Zielbreite 360–430px, Bezug 390px) Rechengrundlage: --gutter ist clamp(1.15rem, .6rem + 2vw, 3.5rem). Bei 390px ergibt die vw-Formel 17,4px und liegt damit UNTER der Untergrenze — es gelten also 18,4px. Netto bleiben 390 − 2 × 18,4 = 353px, bei 360px sogar nur 323px. Jede Regel unten ist gegen diese Zahlen nachgerechnet. Was hier bewusst NICHT steht: Kürzungen am Abschnittsrhythmus. Der Hinweis bei .section gilt weiter — gekürzt wird nur echte Leerfläche, und davon ist an dieser Stelle keine übrig. Der Block liegt am Dateiende, damit er ohne !important gegen die gleich spezifischen Grundregeln weiter oben gewinnt. Wer am Dateiende etwas ersetzt, muss ihn mitnehmen (wie den Untermenü-Block darüber). ================================================================== */ @media(max-width:640px){ /* ---- 1) Trefferflächen auf mindestens 44px Höhe ---- Gerechnet als Schriftgröße × Zeilenhöhe + Innenabstand. Die Buttons selbst (.btn) kommen mit .95rem × 1.65 + 2 × .8rem auf 51px und bleiben deshalb unverändert; die folgenden lagen bei 26–40px. Die Breite ändert sich nirgends — nur die Höhe wächst, die Optik bleibt also dieselbe Pille bzw. Zeile wie bisher. */ /* Sprachumschalter (mobiles Menü UND Fußleiste): .8rem bei line-height:1 plus 2 × .4rem Polster = 26px. */ .lang a{min-height:44px} /* Fußbereich: Spaltenlinks .9rem × 1.65 + 2 × .28rem = 33px, Rechtsleiste .82rem × 1.65 + 2 × .2rem = 28px. Die Markenspalte (Logo-Link) bleibt außen vor, sie ist keine Listenzeile. */ .foot-grid .foot-list a, .foot-legal a{display:flex;align-items:center;min-height:44px} .foot-contact a{min-height:44px} /* Brotkrumen: reine Textlinks ohne Polster, 22px hoch. */ .crumbs{align-items:center} .crumbs a{display:inline-flex;align-items:center;min-height:44px} /* Kleine Buttons: .85rem × 1.65 + 2 × .55rem = 40px. Betrifft u. a. den Abschluss-CTA im Artikel, der dort über die volle Breite geht. */ .btn-sm{min-height:44px} /* Teilen-Leiste unter dem Artikel: fest auf 40 × 40px gesetzt. */ .ax-share-btn{min-width:44px;height:44px} /* Schlagwörter am Artikelende: .86rem × 1.65 + 2 × .32rem = 33px. */ .entry-tag{display:inline-flex;align-items:center;min-height:44px} /* Inhaltsverzeichnis (mobil im
      ): .9rem × 1.4 + 2 × .32rem = 30px. align-content zentriert die eine Rasterzeile in der gewachsenen Höhe, sonst klebte der Text oben. */ .toc a{min-height:44px;align-content:center} /* .85rem sind 13,6px — unter der Lesbarkeitsgrenze für Fließtext. */ .toc li.lvl3 a{font-size:.9rem} /* „Nach oben" am Artikelende: .85rem × 1.65 + 2 × .5rem = 38px. */ .ax-to-top-link{min-height:44px} /* Blätterung in Archiv und Suche: fest auf 40 × 40px gesetzt. (.axb-pager gehört zum Blogverzeichnis und bleibt unangetastet.) */ .pagination .page-numbers{min-width:44px;height:44px} /* Lead-Popup: Schließkreuz 32px, Ablehnen-Link 24px. Die Aktions-Buttons darin sind .btn und damit bereits richtig. */ .ax-popup-x{width:44px;height:44px;padding:0} .ax-popup-dismiss{display:flex;align-items:center;justify-content:center;min-height:44px} /* Produktseite, Filterleiste über der Vergleichstabelle: .85rem × 1.65 + 2 × .45rem = 37px. */ .ax-cmp-fbtn{min-height:44px} /* Produktseite, Kriterien-Aufklapper in der Vergleichstabelle: Unter 860px wird die Tabelle zu Karten, das Kriterium ist dann die Kopfzeile der Karte. Deren Polster (.9rem/1.1rem) sitzt aber auf der Zelle — die Schaltfläche selbst hat padding:0 und ist damit nur so hoch wie ihre Zeile: .95rem × 1.4 = 21px, bei einzeiligem Kriterium also die Hälfte der Mindestgröße. Statt die Schaltfläche zu vergrößern, wandert das Polster von der Zelle in die Schaltfläche: Die Fläche sieht identisch aus, ist aber vollständig antippbar (21 + 2 × 14,4 = 50px). :has() grenzt das auf die Zellen ein, die überhaupt eine Schaltfläche tragen — Kriterien ohne Begründung sind reiner Text und behalten ihr Polster. Ohne :has()-Unterstützung greift nur die zweite Regel: dann ist die Karte etwas höher, die Trefferfläche aber ebenfalls korrekt. */ .ax-cmp-table tbody th.ax-cmp-crit:has(> .ax-cmp-why){padding:0} .ax-cmp-why{padding:.9rem 1.1rem} /* Suchfeld (404-Seite, Suchergebnisse): 16px Schrift × 1,2 Zeilenhöhe + 2 × .7rem Polster + 2 × 1px Rahmen = 43,6px. */ .search-field{min-height:44px} /* Kontaktseite, Reiter Formular/Termin/Assistent: die Schaltfläche erbt keine Zeilenhöhe vom , also .95rem × 1.2 + 2 × .8rem = 44px knapp verfehlt. Die Terminchips (.ax-slot) liegen mit ihrem inneren bereits bei 51px und bleiben, wie sie sind. */ .ax-kontakt-tabs .ax-tab{min-height:44px} /* ---- 2) Schriftgrößen unter 14px im Fließtext ---- */ /* Werbetafel: auf dem Telefon steht sie nicht mehr in der schmalen Seitenspalte, sondern über die volle Breite hinter dem Artikel — .86rem/.82rem (13,8/13,1px) sind dort unnötig klein. */ .ax-d24-txt{font-size:.9rem} .ax-d24-list li{font-size:.88rem} /* Fußleiste: Copyright und Rechtslinks standen auf .82rem = 13,1px. */ .foot-bottom, .foot-legal a{font-size:.875rem} /* Fußnote unter der Produkt-Vergleichstabelle: .79rem = 12,6px. */ .ax-cmp-note{font-size:.875rem} /* ---- 3) Raster, die auf dem Telefon nicht aufgingen ---- */ /* Bis 720px stehen die Fallstudien-Kennzahlen dreispaltig. Netto: 353 − 2 × 20,8 Kartenpolster = 312px, minus 2 × 16px Abstand ergibt 93px je Spalte — für eine redaktionelle Beschriftung zu wenig. auto-fit mit 130px Untergrenze ergibt von 360px bis 430px stabil zwei Spalten (2 × 130 + 16 = 276 ≤ 282px bei 360px Fensterbreite). */ .related-case-kpis{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))} /* ---- 4) Redaktionelle Tabellen ohne eigenen Rollbereich ---- Die gestalteten Tabellen (.ax-compare, .ax-cmp-table, .ax-grades) bringen ihre Mobilfassung selbst mit. Eine im Editor eingefügte Tabelle ohne Klasse hat dagegen nichts davon: table-layout:auto wächst bis zur Mindestbreite ihres Inhalts und schiebt die Seite auf. Als Block wird sie stattdessen in sich waagerecht rollbar und bleibt bei schmalem Inhalt trotzdem volle Breite. */ .entry-content > table:not([class]){display:block;width:auto;min-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} } /* Schnellzugriff der 404-Seite. Das Raster ist auto-fit mit 150px Untergrenze und bleibt damit über die ganze Zielbreite zweispaltig: bei 390px sind das (353,2 − 12,8) / 2 = 170px je Kachel, bei 360px nur 155px. Abzüglich Polster (2 × 17,6px) und Rahmen bleiben 118–133px für den Inhalt — die längste Beschriftung („Produkt & Preise →", rund 145px bei 16px Schrift) passt in keiner der beiden Breiten in eine Zeile und bricht mitten im Namen um. Die Grenze liegt rechnerisch bei rund 415px Fensterbreite; 430px ist die obere Kante der Zielbreite und damit der saubere Schnitt. Eine eigene Abfrage statt einer höheren Untergrenze im auto-fit: Letztere hätte auch die Tablet-Ansicht von drei auf zwei Spalten gezogen. */ @media(max-width:430px){ .ax-quicklinks{grid-template-columns:1fr} } /* ========================================================================== Kleinstschriften auf dem Telefon. Auf dem Schreibtisch trägt eine 10px-Kapitälchen-Pille als Beiwerk; auf einem 390px-Gerät ist sie nicht mehr lesbar — und sie steht an Stellen, die Bedeutung tragen: die Empfehlungs-Markierung im Preisvergleich, die Kategorie auf dem Blog-Aufmacher, die Kennzahl-Beschriftungen der Startseite. Gemessen lagen sie bei 9,9 bis 11,2px. Der Block steht ganz am Dateiende und nicht bei den Bauteilen: Die Grunddefinitionen stehen weiter unten in der Datei, eine Media Query weiter oben hätte bei gleicher Spezifität verloren — genau das war beim ersten Versuch der Fall. ========================================================================== */ @media(max-width:640px){ .ax-cmp-flag{font-size:.76rem} .ax-cmp-why-tag{font-size:.72rem} .ax-cmp-table thead th{font-size:.78rem} /* Die Gruppenüberschriften der Vergleichstabelle („Datenschutz & Sicherheit") sind auf dem Telefon die einzige Gliederung der Kartenliste — bei 11,2px waren sie kleiner als der Fließtext darunter. */ .ax-cmp-grouprow th{font-size:.78rem} .axb-feature-tag{font-size:.76rem} /* Suchfeld der Blogübersicht: 40px hoch, also unter der Mindestgröße für ein Ziel, das man im Gehen trifft. Die Pille wächst dadurch auf 52px. */ .axb-search-in{min-height:44px} /* Beschriftungen im Sichtbarkeits- und DSGVO-Check: 10,9 bis 11,2px. Sie benennen, worauf sich die Werte daneben beziehen — wer sie nicht liest, liest die Zahlen falsch. */ .ax-sc-area-cap{font-size:.78rem} .ax-sc-aside-tag{font-size:.76rem} .fs-kpi .l,.ax-mockup-stats .l,.stat .l{font-size:.72rem} .post-card .cat,.card .cat,.cat{font-size:.72rem} /* „Mehr erfahren →" am Kartenfuß war 23px hoch. Der Link ist der einzige Ausgang der Karte und steht direkt über deren Unterkante — mit etwas Innenabstand wird daraus ein Ziel, das man im Gehen trifft, ohne dass die Karte sichtbar anders aussieht. Nur dort, wo der Link WIRKLICH ein Link ist: In Karten, die als Ganzes verlinkt sind, steht an dieser Stelle ein , für den keine Trefferfläche nötig ist. */ a.more{padding:.5rem 0;min-height:44px} } /* axr-tool-vollbreite — Werkzeug-Ergebnisse in voller Inhaltsbreite, Eingabe bleibt mittig */ .ax-seocheck{max-width:none} .ax-seocheck > .ax-seocheck-form, .ax-seocheck > .ax-seocheck-hint{max-width:820px;margin-left:auto;margin-right:auto} /* axr-mobil-feinschliff — gemessene Mobilprobleme, nichts Kosmetisches */ @media (max-width:767px){ /* iOS Safari zoomt beim Fokus, wenn die Schrift unter 16px liegt */ input[type="text"],input[type="email"],input[type="url"],input[type="search"],input[type="tel"],input[type="number"],select,textarea{font-size:16px} /* Datentabellen laufen sonst aus ihrem Kasten heraus (gemessen: 584px Tabelle in 298px Kasten) */ .axlv__daten{overflow-x:auto;-webkit-overflow-scrolling:touch} .axlv__daten>table{min-width:100%} /* 10,9px ist auf dem Telefon zu klein — auf das Niveau der uebrigen Kleinlabels */ .ax-sticky-sub{font-size:.72rem} }