in index.php - reiner Positionierungs-Rahmen
(füllt .brand-panel per inset:0 komplett aus), hat selbst kein sichtbares
Aussehen. Enthält .brand-logo und .brand-tagline, die beide unabhängig
voneinander absolut positioniert werden (siehe deren Kommentare). */
.brand-content {
position: absolute;
inset: 0;
z-index: 2;
}
/* Logo und Tagline liegen unabhängig voneinander: das Logo sitzt exakt im
Mittelpunkt der pulsierenden Ringe (.signal-rings), die Tagline hängt sich
als fixer Abstand darunter - so verschiebt der Textblock nicht den
Logo-Mittelpunkt, egal wie viele Zeilen die Tagline umbricht. */
/*
![]()
in index.php (assets/logo.png). top/left:50% +
transform:translate(-50%,-50%) ist der Standard-CSS-Trick, um ein Element
exakt mittig in seinem positionierten Vorfahren (.brand-panel) zu
platzieren - dieser Punkt fällt mit dem Mittelpunkt von .signal-rings
zusammen, weil beide relativ zu .brand-panel zentriert werden. Größe kommt
aus --logo-radius (oben an .brand-panel definiert), nicht aus einem
festen px-Wert hier. */
.brand-logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(var(--logo-radius) * 2);
height: calc(var(--logo-radius) * 2);
object-fit: contain;
filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.25));
background: #fff;
border-radius: 50%;
padding: 14px;
}
/*
in index.php. Ebenfalls absolut positioniert,
aber NICHT vertikal zentriert - "top" ist ein fester Abstand unterhalb des
Logo-Mittelpunkts (Logo-Radius + Gap), "left:50%" + translateX(-50%)
zentriert nur horizontal. So bleibt das Logo exakt im Ring-Mittelpunkt,
unabhängig davon, ob dieser Text ein- oder zweizeilig umbricht. */
.brand-tagline {
position: absolute;
top: calc(50% + var(--logo-radius) + var(--tagline-gap));
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 360px;
margin: 0;
padding: 0 1rem;
font-family: var(--font-display);
font-weight: 500;
font-size: 1.15rem;
line-height: 1.5;
color: #eaf0fc;
letter-spacing: 0.01em;
text-align: center;
}
/* Signalwellen: konzentrische Ringe, angelehnt an die Bögen im Logo */
/*
in index.php - reiner
Positionierungs-Rahmen für die vier .ring-Spans, füllt .brand-panel per
inset:0 aus und zentriert seine Kinder per Flexbox. aria-hidden im HTML
sorgt dafür, dass Screenreader dieses rein dekorative Element ignorieren. */
.signal-rings {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
/*
in index.php - vier identische Kreise, die
sich per @keyframes pulse (siehe unten) laufend aufblähen und ausblenden.
Die Größe (260px) definiert die Start-/Basisgröße vor der Animation. */
.ring {
position: absolute;
border: 1.5px solid rgba(255, 255, 255, 0.22);
border-radius: 50%;
animation: pulse 6s ease-out infinite;
}
/* Jeder Ring startet die gleiche Animation zeitversetzt (0s/1.5s/3s/4.5s
bei 6s Gesamtdauer = 4 gleichmäßig verteilte "Wellen"), dadurch entsteht
der Eindruck kontinuierlich auslaufender Funksignale statt eines
einzelnen pulsierenden Rings. */
.ring-1 {
width: 260px;
height: 260px;
animation-delay: 0s;
}
.ring-2 {
width: 260px;
height: 260px;
animation-delay: 1.5s;
}
.ring-3 {
width: 260px;
height: 260px;
animation-delay: 3s;
}
.ring-4 {
width: 260px;
height: 260px;
animation-delay: 4.5s;
}
/* Animations-Definition für .ring: wächst von Originalgröße auf das 3.1-fache
und wird dabei komplett transparent - die eigentliche zeitliche Steuerung
(Dauer/Verzögerung) steht an .ring bzw. .ring-1..4 oben, nicht hier. Wird
bei "Bewegung reduzieren"-Einstellung über tokens.css praktisch abgeschaltet. */
@keyframes pulse {
0% {
transform: scale(1);
opacity: 0.55;
}
100% {
transform: scale(3.1);
opacity: 0;
}
}
/* ---------- Formular-Panel (rechts) ---------- */
/*