. Ohne die expliziten 100% blieb der Canvas 300x150
gross, und vom Logo war ab x=300 nichts mehr da (gemessen: das "B" fehlte). */
.azb-logo3d-canvas {
position: fixed; left: 0; top: 0;
width: 100%; height: 100%; display: block;
z-index: 55; pointer-events: none;
}
.logo3d { position: relative; display: block; flex: none; }
.logo3d azb-logo-3d { position: absolute; inset: 0; display: block; }
/* Der PNG-Fallback traegt die Marke, bis die Engine laeuft — und wieder,
falls WebGL wegbricht (contextlost). scale(.943) gleicht den Rand aus, den
die Kamera fuer das Aufklappen freihaelt; so springt beim Wechsel nichts. */
.logo3d .logo3d-png {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: contain; object-position: center;
transform: scale(0.943);
transition: opacity .4s var(--ease-out);
}
.logo3d.is-live .logo3d-png { opacity: 0; }
/* --- Nav: Marke (3D) ueber der Wortmarke, gestapelt wie im Original-Logo --- */
.nav-logo.is-stack { height: auto; display: block; }
.nav-logo .logo3d--nav { width: 172px; height: 32px; }
.nav-logo .logo3d-word {
display: block; width: 172px; height: auto;
aspect-ratio: 2727 / 192; margin-top: 1px;
max-width: none;
}
@media (min-width: 1024px) {
.nav-logo .logo3d--nav { width: 200px; height: 36px; }
.nav-logo .logo3d-word { width: 200px; }
/* Die Leiste waechst genau um den Zuwachs der Marke — 76 -> 88. Auf Mobil
bleibt sie bei 76px, dort passt der Stapel (45px) ohnehin hinein. */
.nav-inner { height: 88px; }
}
/* --- Footer: groesseres Mark, spielt beim Reinscrollen --- */
.footer .nav-logo .logo3d--footer { width: 200px; height: 38px; }
.footer .nav-logo .logo3d-word { width: 200px; }
@media (min-width: 768px) {
.footer .nav-logo .logo3d--footer { width: 240px; height: 44px; }
.footer .nav-logo .logo3d-word { width: 240px; }
}
/* --- Timeline "2017 · AZB Performance": die Marke dreht sich dort, wo sie
historisch entsteht. Kein Wortmarken-Zusatz, sonst wird der Eintrag laut. */
.logo3d--tl { width: 132px; height: 26px; margin: 0 0 10px; opacity: .95; }
@media (min-width: 768px) { .logo3d--tl { width: 150px; height: 28px; } }
/* admin.html haengt als einzige Seite an einer festen Nav-Hoehe (inline
body{padding-top:76px}) und rendert dieselbe Nav. Mit der 88px-Leiste ab
1024px fehlten ihr 12px, der Inhalt waere unter die Leiste gerutscht.
`html body:has(.admin-shell)` ist spezifischer als das inline `body` und
trifft nur diese eine Seite — admin.html selbst bleibt unangetastet. */
@media (min-width: 1024px) {
html body:has(.admin-shell) { padding-top: 88px; }
}
/* Druck: der fixe Canvas druckt nicht mit — dann traegt wieder das PNG. */
@media print {
.azb-logo3d-canvas { display: none !important; }
.logo3d.is-live .logo3d-png { opacity: 1 !important; }
}
/* ==========================================================================
Plaketten v2 — konsolidiert aus index + tuning (Review 4 F2)
--------------------------------------------------------------------------
Dieser Block stand bis 2026-08-04 ZWEIMAL im Quelltext: index.html 487-576
und tuning.html 361-439, zeilenweise identisch bis auf zwei Kommentar-
Formulierungen. Zwei Kopien einer 90-Zeilen-Kachel sind kein Stilproblem,
sondern eine Zeitbombe: wer die Gravur-Kante auf einer Seite anfasst, hat
die andere still auseinanderlaufen lassen.
Hier steht nur der KERN — alles, was beide Seiten gleich brauchen. Seiten-
eigenes bleibt in der jeweiligen Seite:
index.html : .services-grid (Raster) + .azb-cta / .azb-arrow
(die Kacheln sind dort Links und tragen einen CTA)
tuning.html: .svc-grid (Raster) + .azb-liste / .svc-marken + die
Mobil-Straffung (die Kacheln sind dort
ohne Ziel)
.azb-card:focus-visible stand nur in index. Es steht jetzt im Kern, weil
es auf tuning nichts tun KANN (dort sind die Kacheln nicht fokussierbar) —
optisch also eine Null-Aenderung, aber die Regel ist da, sobald eine Kachel
dort einmal ein Ziel bekommt.
Position am DATEIENDE ist Absicht: .azb-title traegt im Markup zusaetzlich
.display (shared.css:92, gleiche Spezifitaet). Nur weil dieser Block
spaeter steht, gewinnt seine line-height:1. Wer den Block nach oben
verschiebt, macht die Plaketten-Ueberschriften unbemerkt hoeher.
========================================================================== */
:root { --red-rgb: 225, 6, 0; } /* = --red #e10600, kanalweise fuer rgba() */
.azb-card {
position: relative; display: flex; flex-direction: column;
padding: 26px 24px 22px;
min-height: 274px;
background: linear-gradient(180deg, #151517 0%, #101012 62%, #0e0e10 100%);
border: 1px solid var(--border-1);
border-radius: 12px;
overflow: hidden; isolation: isolate;
/* .4s = die EINE Karten-Lift-Dauer der Site (Review 20/10 Z10; vorher .35/.4/.45 gemischt) */
transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .35s, background .35s;
}
.azb-card:hover {
transform: translateY(-3px);
border-color: rgba(var(--red-rgb), .5);
box-shadow: 0 0 0 1px rgba(var(--red-rgb), .14),
0 26px 60px -26px rgba(var(--red-rgb), .55),
0 2px 0 rgba(255,255,255,.03) inset;
}
.azb-card:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
/* Gravur-Kante: der helle Anriss oben, der die Plakette "eingelassen" wirken laesst */
.azb-edge {
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg,
rgba(var(--red-rgb), 0),
rgba(var(--red-rgb), .9) 18%,
rgba(var(--red-rgb), .25) 55%,
rgba(var(--red-rgb), 0));
opacity: .55; transition: opacity .35s; pointer-events: none;
}
.azb-card:hover .azb-edge { opacity: 1; }
.azb-halo {
position: absolute; top: -70px; left: -60px; width: 210px; height: 210px;
border-radius: 50%;
background: radial-gradient(circle, rgba(var(--red-rgb), .16), rgba(var(--red-rgb), 0) 70%);
opacity: .5; transition: opacity .4s; pointer-events: none;
}
.azb-card:hover .azb-halo { opacity: 1; }
.azb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.azb-plate {
position: relative; display: grid; place-items: center;
width: 52px; height: 52px; border-radius: 13px;
color: var(--red-bright);
background: linear-gradient(160deg, rgba(var(--red-rgb), .3), rgba(var(--red-rgb), .05) 65%), #141416;
border: 1px solid rgba(var(--red-rgb), .4);
box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 20px -12px rgba(var(--red-rgb), .7);
transition: color .3s, border-color .3s, box-shadow .35s, transform .4s cubic-bezier(.2,.7,.2,1);
}
.azb-card:hover .azb-plate {
color: #fff;
border-color: rgba(var(--red-rgb), .8);
transform: scale(1.04);
box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 26px -12px rgba(var(--red-rgb), .95);
}
/* Ordnungsziffer = reine Dekoration (aria-hidden am Element), traegt keine
Information: die Kachel ist ueber Plakette + Ueberschrift eindeutig, die
Reihenfolge steht schon im Layout. Deshalb von WCAG 1.4.3 ausgenommen —
dieselbe Begruendung wie beim bisherigen .num in --deko-ziffer. */
.azb-num {
font-family: var(--font-mono); letter-spacing: .14em; font-size: 9.5px;
color: rgba(255,255,255,.26);
display: flex; align-items: center; gap: 7px;
transition: color .3s;
}
.azb-card:hover .azb-num { color: rgba(255,255,255,.5); }
.azb-num span { display: block; width: 16px; height: 1px; background: currentColor; opacity: .55; }
.azb-title { font-size: 24px; line-height: 1; margin: 20px 0 0; max-width: 15ch; }
.azb-body { margin: 11px 0 0; font-size: 13.5px; line-height: 1.56; color: rgba(255,255,255,.55); text-wrap: pretty; }
.azb-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; }
.azb-rule {
flex: 1; height: 1px;
background: linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,255,255,0));
transition: background .35s;
}
.azb-card:hover .azb-rule { background: linear-gradient(90deg, rgba(var(--red-rgb), .55), rgba(var(--red-rgb), 0)); }
/* ============================================================================
PARTNER-/HERSTELLER-LEISTE
Verschoben aus dem