positioniert (sonst rutschte
er um 40 px).
Der Hover färbt nur auf, was ohnehin da ist: Titel weiß, Unterzeile
heller, Punkt stärker leuchtend — bewusst keine Verschiebung, weil die
Zeilen an einer senkrechten Linie hängen und jedes Wandern deren Flucht
sichtbar bräche. */
.ll-link { display: block; }
.ll-title, .ll-line, .node { transition: color .18s ease, box-shadow .18s ease; }
.ll-link:hover .ll-title, .ll-link:focus-visible .ll-title { color: #fff; }
.ll-link:hover .ll-line, .ll-link:focus-visible .ll-line { color: var(--tx); }
.ll-link:hover .node, .ll-link:focus-visible .node {
box-shadow: 0 0 0 6px rgba(34,197,94,.20), 0 0 18px 3px rgba(34,197,94,.70);
}
/* ═══════════════════════════════════════════════════════════════════════
ABSCHNITTE DER STARTSEITE
═══════════════════════════════════════════════════════════════════════ */
/* Profilbereich: Teil derselben durchgehenden Dunkelzone. */
.section-light { background: transparent; color: #eaf0f6; }
/* Grüner Schimmer von unten im Kontaktbereich. Durchgehend durchsichtig
und deshalb ÜBER dem Netzwerk statt darauf — eine deckende Fläche würde
es zudecken. */
.section-contact { background: radial-gradient(60% 80% at 50% 100%, rgba(34,197,94,.14), transparent 60%); text-align: center; }
.section-head { max-width: 640px; margin-bottom: clamp(38px, 5vw, 56px); }
.section-title { font-family: var(--font-head); font-weight: 700; font-size: clamp(27px, 3.6vw, 40px); margin-bottom: 16px; color: #fff; letter-spacing: .01em; }
.section-intro { font-size: 18px; color: var(--tx-dim2); }
.section-light .section-kicker { color: #4ade80; }
.section-light .section-title { color: #fff; max-width: 22ch; }
/* ── Pfeil „nach oben" neben der Abschnittszeile ───────────────────────
Ersatz für die fehlende zweite Menüführung: Das Kopfmenü sitzt nur ganz
oben und scrollt weg, darunter gab es keinen Weg zurück. Steht in
Leistungen, Profil und Kontakt jeweils direkt hinter dem Kickerwort.
Bewusst NICHT an `.section-kicker` selbst gebaut (kein Wechsel der
Anzeigeart dort): Die Klasse läuft auch auf den Unterseiten und in
weiteren Blöcken — ein Eingriff hätte Fernwirkung. Der Pfeil ist ein
eigenes Element im Textfluss, der Kicker bleibt ein Block.
Die Farbe kommt über `currentColor` vom Kicker — damit stimmt sie in der
dunklen Zone wie im Profilbereich von selbst. Ein Kreis statt eines
nackten Zeichens, weil das Element eine BEDIENUNG ist und ohne Umriss
neben einer Versalienzeile wie Zierde wirkt.
Das Ziel `#top` ohne passendes Element ist KEIN Leerlauf: Ist das
Fragment leer oder „top" und existiert keine gleichnamige Kennung, ist
das Ziel laut Standard der Dokumentanfang. Es braucht deshalb weder ein
Ankerelement im Markup noch eine Zeile JavaScript. */
.zum-anfang {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; margin-left: 12px; vertical-align: middle;
border: 1px solid rgba(154,165,182,.34); border-radius: 999px;
color: inherit; flex: none;
transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.zum-anfang svg {
width: 13px; height: 13px; display: block;
fill: none; stroke: currentColor; stroke-width: 2.2;
stroke-linecap: round; stroke-linejoin: round;
}
.zum-anfang:hover, .zum-anfang:focus-visible {
border-color: var(--green-h); background: rgba(34,197,94,.12);
transform: translateY(-2px);
}
/* ═══════════════════════════════════════════════════════════════════════
2. DIE DREI LEISTUNGSKACHELN
═══════════════════════════════════════════════════════════════════════
`minmax(0, 1fr)` statt `1fr`: Rasterspalten haben von sich aus eine
Mindestbreite von `auto` — ein langer Inhalt (etwa eine Stichwortzeile)
sprengt die Spalte dann, und die drei Kacheln werden UNTERSCHIEDLICH
breit. Mit 0 als Minimum bleiben sie exakt gleich (gemessen waren es
sonst 6 px Unterschied). */
.feld-reiter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
/* Grundform der Kachel. Der Schleier ist ABdunkelnd: Eine frühere Fassung
hellte auf, und das Netzwerk schien fast ungedämpft durch. Jetzt setzt
sich die Kachel vom Hintergrund ab, Motiv und Text stehen darüber und
werden nicht mitgedunkelt. */
.feld-tab {
position: relative; display: flex; flex-direction: column; align-items: flex-start;
text-align: left; font: inherit; color: inherit; cursor: pointer;
padding: 26px 46px 22px 24px;
border: 1px solid rgba(148,163,184,.16); border-radius: 16px;
background: linear-gradient(180deg, rgba(6,11,18,.58), rgba(6,11,18,.70));
transition: transform .25s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.feld-tab:hover { transform: translateY(-4px); border-color: rgba(34,197,94,.42); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.feld-name { font-family: var(--font-head); font-weight: 700; font-size: 22px; color: #fff; letter-spacing: .01em; }
.feld-kurz { color: var(--tx-dim2); font-size: 15.5px; margin-top: 6px; }
.feld-stich { font-family: var(--font-mono); font-size: 12px; color: var(--tx-dim); letter-spacing: .02em; margin-top: 14px; }
/* ── Die quadratische Fassung mit großem Motiv ─────────────────────────
EINE Regel für alles, was diese Fassung ausmacht — verteilt auf drei
Stellen war sie vorher schwer zu überblicken:
– `aspect-ratio: 1/1`: Die Höhe folgt der Spaltenbreite, also dem
Raster. Kein fester Wert, der bei anderer Fensterbreite nicht mehr
passt.
– Innenabstand rechts zurück auf 24 px: Die 46 px der Grundform waren
Platz für einen Aufklapp-Pfeil, den diese Fassung nicht mehr hat.
Ohne das bricht die Stichwortzeile von „Web-Systeme" zweizeilig um,
während die anderen beiden einzeilig bleiben.
– Kein Zeigefinger: Die Kachel ist kein Bedienelement mehr (im Markup
ein , kein ). Das Anheben beim Überfahren BLEIBT — es
zeigt, dass die Kachel lebt, auch wenn sie selbst nicht klickbar ist.
– Bezugsrahmen für die Menüs (`position: relative` am Raster, siehe
Abschnitt 2b).
– Randfarbe je Kachel, siehe die Kennungen darunter. */
.feld-reiter--bild { margin-top: 20px; position: relative; }
.feld-tab--bild {
aspect-ratio: 1 / 1;
justify-content: flex-start;
overflow: hidden;
padding-right: 24px;
padding-bottom: 34px;
cursor: default;
border-color: rgba(var(--feldfarbe), .30);
}
.feld-tab--bild:hover { border-color: rgba(var(--feldfarbe), .60); }
/* Die Farbe hängt an der KENNUNG, nicht an der Reihenfolge: Eine
Umsortierung der Kacheln soll die Farben nicht vertauschen. */
#tab-ki-b { --feldfarbe: 56, 189, 248; } /* KI — blau */
#tab-web-b { --feldfarbe: 251, 146, 60; } /* Web — orange */
#tab-it-b { --feldfarbe: 34, 197, 94; } /* IT — grün */
/* Textaufteilung: Der Titelblock setzt knapp unterhalb der Kachelmitte an,
die Stichwortzeile bleibt am unteren Rand.
Warum Prozent am Außenabstand funktioniert: Prozentwerte beziehen sich
dort auf die BREITE des Elternteils — bei einem Seitenverhältnis von 1:1
ist die gleich der Höhe, der Wert ist also zugleich ein Höhenanteil.
47 % plus 26 px Innenabstand oben ergeben rund 55 % der Kachelhöhe. */
.feld-tab--bild .feld-name { margin-top: 49%; }
.feld-tab--bild .feld-stich { margin-top: auto; }
/* Das Motiv, oben rechts mit Abstand zum Rand.
220 px sind 10 % über der nativen Auflösung der Vorlage (200×200) — auf
einem normalen Bildschirm unsichtbar, auf einem hochauflösenden minimal
weicher; wer deutlich größer will, braucht größere Vorlagen.
Die Deckkraft ist die einzige Schraube für die Kräftigkeit des Motivs,
denn sie dimmt auch den farbigen Schein mit. */
.feld-bg {
position: absolute; top: 22px; right: 22px;
width: 220px; height: 220px; z-index: 0; opacity: .70; pointer-events: none;
}
.feld-tab--bild:hover .feld-bg { opacity: .88; }
.feld-tab--bild:focus-within .feld-bg { opacity: .88; }
/* Farbiger Schein je Motiv. `drop-shadow` statt `box-shadow`: Es folgt der
Alphakontur des Bildes, glüht also der runden Form entlang, während
box-shadow den quadratischen Rahmen nachzeichnen würde. Zwei gestapelte
Schatten ergeben engen Kern und weiten Hof.
Farbwahl nach dem Motiv: Gehäuse grün, Platine blau, Codefenster orange. */
.feld-bg--gruen { filter: drop-shadow(0 0 8px rgba(34,197,94,.46)) drop-shadow(0 0 20px rgba(34,197,94,.27)); }
.feld-bg--blau { filter: drop-shadow(0 0 8px rgba(56,189,248,.46)) drop-shadow(0 0 20px rgba(56,189,248,.27)); }
.feld-bg--orange { filter: drop-shadow(0 0 8px rgba(251,146,60,.46)) drop-shadow(0 0 20px rgba(251,146,60,.27)); }
/* Leseschleier zwischen Motiv und Text. Die Motive sollen kräftig bleiben,
aber der Text steht unten in der Kachel und läge sonst auf den hellen
Stellen — bei „Web-Systeme" am stärksten. Statt das Bild zu dimmen,
dunkelt ein Verlauf NUR die untere Hälfte ab.
Stapelung: Bild 0 < Schleier 1 < Text 2.
Die Ansatzpunkte liegen tief, weil das Motiv oben rechts sitzt und der
Text deutlich darunter — ein früher ansetzender Verlauf dimmte die
untere Motivhälfte mit. */
.feld-tab--bild::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(180deg, rgba(6,11,18,0) 48%, rgba(6,11,18,.48) 70%, rgba(6,11,18,.76) 100%);
}
.feld-tab--bild > span, .feld-tab--bild > .feld-burger { position: relative; z-index: 2; }
/* ── Der Burger oben links ─────────────────────────────────────────────
Aufbau: Der MITTLERE Strich steckt im Hintergrund, die beiden äußeren
sind Pseudo-Elemente. Grund war die geplante Verwandlung in ein X —
drei Hintergrundstreifen lassen sich nicht einzeln drehen. Die
Verwandlung ist verworfen (geschlossen wird über das rote X, siehe
unten), der Aufbau bleibt: Er trägt auch so. */
.feld-tab--bild .feld-burger {
position: absolute; top: 24px; left: 24px; width: 24px; height: 16px; z-index: 2;
padding: 0; border: none; background-color: transparent; cursor: pointer; outline: none;
color: rgba(154,165,182,.72);
background: linear-gradient(currentColor, currentColor) left center / 100% 2px no-repeat;
transition: color .25s ease, background-size .25s ease;
}
.feld-tab--bild .feld-burger::before,
.feld-tab--bild .feld-burger::after {
content: ""; position: absolute; left: 0; top: 50%;
width: 100%; height: 2px; margin-top: -1px;
background: currentColor; transform-origin: 50% 50%;
transition: transform .25s ease;
}
.feld-tab--bild .feld-burger::before { transform: translate3d(0, -7px, 0); }
.feld-tab--bild .feld-burger::after { transform: translate3d(0, 7px, 0); }
.feld-tab--bild:hover .feld-burger { color: rgb(var(--feldfarbe)); }
.feld-tab--bild .feld-burger[aria-expanded="true"] { color: rgb(var(--feldfarbe)); }
/* ── Das rote Schließ-X ────────────────────────────────────────────────
Sitzt oben rechts im geöffneten Menü. Anders als der Burger ist das ein
echter im Menü: Die Menüs liegen NEBEN der Kachel im Markup,
nicht darin — dort ist ein Bedienelement zulässig. (Der Burger steckt in
der Kachel; verschachtelte Bedienelemente wären unzulässig, deshalb ist
die Kachel selbst kein Knopf mehr.) */
.menu-schliessen {
position: absolute; top: 20px; right: 20px; z-index: 20;
width: 26px; height: 26px; padding: 0;
background: transparent; border: none; cursor: pointer; outline: none;
pointer-events: auto;
opacity: 0; visibility: hidden;
transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}
.menu-schliessen.sichtbar { opacity: 1; visibility: visible; }
.menu-schliessen:hover { transform: scale(1.12); }
.menu-schliessen:focus-visible { outline: 2px solid #ef4444; outline-offset: 3px; }
.menu-schliessen::before,
.menu-schliessen::after {
content: ""; position: absolute; left: 50%; top: 50%;
width: 22px; height: 2px; margin: -1px 0 0 -11px;
background: #ef4444; border-radius: 1px;
}
.menu-schliessen::before { transform: rotate(45deg); }
.menu-schliessen::after { transform: rotate(-45deg); }
/* ═══════════════════════════════════════════════════════════════════════
2b. DIE KACHELMENÜS
═══════════════════════════════════════════════════════════════════════
Ein Menü je Kachel, geöffnet vom Burger. Die Fläche zieht von oben auf,
die Einträge fahren gestaffelt von unten herein, unten sitzen zwei
Eckwinkel. Vorlage war ein Schnipsel von Selcuk Cura — hell gehalten,
hier auf den dunklen Grund umgesetzt.
NICHT übernommen: GSAP, SmoothScroll und lodash. Das Menü schaltet
ausschließlich Klassen um und läuft deshalb ohne Fremdbibliothek; die
ganze Bewegung liegt in diesem Stylesheet.
Markup in index.php, Schaltung in assets/js/kachelmenue.js.
Der Bezugsrahmen ist `.feld-reiter--bild` (weiter oben, `position:
relative`). Fehlt diese Zeile, beziehen sich Lage und Breite unten auf
einen anderen Vorfahren, und die Menüs sitzen versetzt und zu breit —
einmal genau so passiert, als sie mit einem entfernten Testblock
verschwand (gemessen: 111 px zu breit). */
.stufenmenu {
position: absolute; top: 0; bottom: 0;
/* Spaltenlage aus dem Dreierraster: eine Spalte plus Abstand je Schritt.
Die Nummer kommt aus der Reihenfolge statt aus einem Inline-Stil. */
left: calc((((100% - 40px) / 3) + 20px) * var(--spalte, 0));
width: calc((100% - 40px) / 3);
z-index: 5;
border-radius: 16px; overflow: hidden;
visibility: hidden; pointer-events: none;
transition: visibility 0s linear .3s;
}
.stufenmenu:nth-of-type(1) { --spalte: 0; --feldfarbe: 56, 189, 248; } /* KI — blau */
.stufenmenu:nth-of-type(2) { --spalte: 1; --feldfarbe: 251, 146, 60; } /* Web — orange */
.stufenmenu:nth-of-type(3) { --spalte: 2; --feldfarbe: 34, 197, 94; } /* IT — grün */
.stufenmenu.offen { visibility: visible; pointer-events: auto; transition-delay: 0s; }
/* Grundton dunkel, mit einem Hauch der Kachelfarbe darin. */
.stufenmenu-bg {
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(var(--feldfarbe), .16), rgba(var(--feldfarbe), .06)),
rgba(8, 13, 20, .95);
transform: scaleY(0); transform-origin: top;
transition: transform .25s ease-in;
}
.stufenmenu.offen .stufenmenu-bg { transform: scaleY(1); }
/* Die beiden Eckwinkel unten, in der Kachelfarbe. */
.stufenmenu-bg::before,
.stufenmenu-bg::after {
content: ""; position: absolute; bottom: 0; display: block;
width: 20px; height: 20px; margin: 18px;
border: 1px solid transparent; border-bottom-color: rgba(var(--feldfarbe), .6);
}
.stufenmenu-bg::before { border-left-color: rgba(var(--feldfarbe), .6); }
.stufenmenu-bg::after { border-right-color: rgba(var(--feldfarbe), .6); right: 0; }
.stufenmenu-inhalt {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
}
.stufenmenu-inhalt ul { list-style: none; margin: 0; padding: 0; width: 100%; text-align: center; }
.stufenmenu-inhalt li {
opacity: 0; transform: translateY(100%);
transition: opacity .3s ease, transform .3s ease;
}
/* Staffelung: Jeder Eintrag startet später als der vorige. In der Vorlage
erzeugt eine Sass-Schleife diese Werte; bei drei Einträgen ist die
ausgeschriebene Fassung kürzer als der Generator. */
.stufenmenu.offen .stufenmenu-inhalt li { opacity: 1; transform: translateY(0); }
.stufenmenu.offen .stufenmenu-inhalt li:nth-child(1) { transition-delay: .20s; }
.stufenmenu.offen .stufenmenu-inhalt li:nth-child(2) { transition-delay: .30s; }
.stufenmenu.offen .stufenmenu-inhalt li:nth-child(3) { transition-delay: .40s; }
.stufenmenu-inhalt a {
position: relative; display: inline-block; padding: 10px;
font-family: var(--font-head); font-weight: 700; font-size: 24px;
color: var(--tx); opacity: .65;
transition: transform .2s ease, opacity .2s ease, color .2s ease;
}
.stufenmenu-inhalt a:hover,
.stufenmenu-inhalt a:focus-visible {
transform: scale(1.15); opacity: 1; color: rgb(var(--feldfarbe));
}
/* Unterstrich, der beim Überfahren aufzieht. */
.stufenmenu-inhalt a::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 6px;
width: 30px; height: 1px; margin: 0 auto;
background: currentColor; transform: scaleX(0);
transition: transform .2s ease;
}
.stufenmenu-inhalt a:hover::after,
.stufenmenu-inhalt a:focus-visible::after { transform: scaleX(1); }
/* Der erste Menüpunkt ist zweizeilig: Darüber steht klein „Übersicht".
Der Link braucht dafür Blocksatz statt inline — sonst stünden beide
Zeilen nebeneinander. Die kleine Zeile ist Beiwerk, deshalb gedämpft
und in Versalien wie die Kicker der Seite. */
.stufenmenu-inhalt a.menu-haupt { line-height: 1.15; }
.stufenmenu-inhalt .menu-ueber {
display: block;
font-family: var(--font-mono); font-weight: 500;
font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
color: var(--tx-dim); margin-bottom: 3px;
}
.stufenmenu-inhalt a:hover .menu-ueber,
.stufenmenu-inhalt a:focus-visible .menu-ueber { color: inherit; }
/* ═══════════════════════════════════════════════════════════════════════
3. PROFIL
═══════════════════════════════════════════════════════════════════════ */
.profil-grid { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: start; }
/* Logo oben, Porträt darunter. Der Außenabstand setzt die Bildspalte tiefer
an als die Textspalte — über `align-items: start` begännen sonst beide
exakt auf einer Linie. */
.profil-visual { display: flex; flex-direction: column; align-items: center; gap: 46px; margin-top: 64px; }
/* Rahmen und Rundung wie am Kopflogo — das Logo ist Firmenzeichen und muss
überall gleich aussehen. Weil es hier größer ist, sind die Werte
MITSKALIERT statt übernommen: Radius 24/118 = 20,3 % der Breite, also
39 px bei 190 px; Rand 3 px × 190/118 = 5 px. Gleiche absolute Zahlen
hätten es hier eckiger und dünner umrandet wirken lassen.
Bei einer Größenänderung beide Werte mitrechnen — oder auf
`border-radius: 20.3%` umstellen, dann skaliert die Rundung von selbst.
Die Bilddatei bringt zusätzlich eine eigene Rundung mit (8 %); die
CSS-Rundung liegt darüber und beschneidet sie. */
.profil-logo {
width: 190px; height: auto;
border-radius: 39px; border: 5px solid var(--grey);
box-shadow: 0 12px 30px rgba(8,15,28,.30);
}
/* Ohne Rahmen und Schatten: Das Porträt ist oval freigestellt und
transparent — ein rechteckiger Rand samt Schatten läge sichtbar daneben
statt am Bild. */
.profil-portrait { width: 300px; height: auto; }
.profil-copy p { margin-top: 16px; color: #b7c6d5; max-width: 60ch; }
.einzugsgebiet { color: var(--tx-dim); font-size: 15.5px; }
/* ═══════════════════════════════════════════════════════════════════════
4. KONTAKT
═══════════════════════════════════════════════════════════════════════ */
.contact { max-width: 640px; margin-inline: auto; }
.contact .section-title { max-width: none; }
.contact-lead { font-size: 18px; color: var(--tx-dim2); margin: 14px auto 30px; }
/* Die beiden Kontaktwege nebeneinander. Der Abschnitt ist zentriert,
deshalb hier `justify-content: center` statt einer eigenen Ausrichtung.
`stretch` statt `center`: Die beiden Knöpfe haben unterschiedlich starke
Ränder (gefüllt gegen umrandet) und kamen dadurch auf 59 bzw. 60 Pixel.
Gedehnt sind sie zwangsläufig exakt gleich hoch — verlässlicher, als die
Innenabstände gegeneinander auszurechnen. Beim Umbruch auf schmalen
Schirmen bleibt es wirkungslos, weil dann jeder Knopf allein in seiner
Zeile steht.
Der Abstand von 12 px ist keine Willkür: Bei 18 px messen beide Knöpfe
zusammen 557 px und sprengen die 552 px der Spalte um 5 px — sie fielen
dann untereinander. */
.kontakt-wege { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 12px; }
/* Der Erstgesprächskasten steht hier zentriert und linksbündig gesetzt —
der Abschnitt selbst ist mittig ausgerichtet, ein mittig gesetzter
Fließtext läse sich schlecht. */
.erstgespraech--kontakt { margin-top: 36px; text-align: left; max-width: 640px; margin-inline: auto; }
/* ═══════════════════════════════════════════════════════════════════════
SCHMALE FENSTER
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
.mh-hero { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 760px) {
.feld-reiter { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
.profil-grid { grid-template-columns: 1fr; gap: 28px; text-align: center; }
.profil-visual { order: -1; }
.section-light .section-title, .profil-copy p { max-width: none; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
/* Die Anhebung ist Zierde — bei reduzierter Bewegung entfällt sie, Farbe
und Rahmen bleiben als Rückmeldung. */
.zum-anfang { transition: none; }
.zum-anfang:hover, .zum-anfang:focus-visible { transform: none; }
.ll-title, .ll-line, .node { transition: none; }
}
/* ═══════════════════════════════════════════════════════════════════════
TOP-DEAL-STÖRER
═══════════════════════════════════════════════════════════════════════
Sitzt unter der Leistungsliste im Hero und ragt rechts über den
Inhaltsrahmen hinaus. Erscheint nur bei gesetztem Angebot — der Schalter
`$topdeal` steht oben in index.php.
Zwei Dinge sind hier begründungsbedürftig:
1. FÜLLUNG DAHINTER. Das Rahmenbild ist ein Zackenstern mit DURCHSICHTIGER
Mitte. Die Farbfläche liegt deshalb als eigenes Element darunter, und
die Farbe kommt pro Angebot aus index.php — eine Bilddatei trägt so
beliebig viele Angebotsfarben. Ihre Maße sind aus dem Alphakanal des
Bildes GEMESSEN (größte freie Ellipse: 42,4 % breit, 55,9 % hoch,
Mitte bei 31,8 %/23,8 %). Der Mittelpunkt liegt nicht in der Bildmitte,
weil das „TOP DEAL"-Schild oben links in die Fläche ragt. Ellipse statt
Rechteck, weil sie den Zackentälern folgt und 14 % mehr Fläche deckt.
Wird das Bild getauscht, müssen diese vier Werte neu gemessen werden.
2. ÜBERSTAND NACH RECHTS. Erst ab 1400 px Fensterbreite, per negativem
Außenabstand. Darunter bleibt der Störer im Raster — sonst schöbe er
bei kleinen Fenstern den Inhalt über den Rand und erzeugte seitliches
Scrollen. Vorbild für „darf über seinen Container hinaus" ist der
Swoosh in der Überschrift (weiter oben in dieser Datei). */
/* Bezugsrahmen des Störers: eine Zeile OHNE Höhe direkt hinter der
Hero-Karte. Weil sie nichts hoch ist, verschiebt sie kein Layout; sie
gibt dem Störer nur seinen Nullpunkt und die Ausrichtung am Inhaltsraster
(gleiche Breite und Innenabstände wie `.wrap`).
Die hohe Ebene ist der Kern: Alle Seitenblöcke liegen auf z-index 1 —
von hier aus überlagert der Störer sie, statt vom nächsten Block verdeckt
zu werden. `pointer-events` bleibt frei, geklickt wird nur der Stern. */
.topdeal-lage {
position: relative; z-index: 20; height: 0;
/* `width: 100%` ist Pflicht, kein Beiwerk: Das ist ein
Flex-Container, und ein Flex-Kind schrumpft sonst auf seinen Inhalt —
die Zeile war dadurch nur 88 statt 1180 px breit, und „rechts" lag
mitten auf der Seite. */
width: 100%; max-width: var(--wrap); margin-inline: auto;
padding-inline: clamp(20px, 5vw, 44px);
pointer-events: none;
}
.topdeal {
/* AUS DEM FLUSS und außerhalb der beschneidenden Hero-Karte. Der negative
Wert nach unten lässt ihn bewusst in den Leistungsteil hineinragen —
genau das war vorher unmöglich.
Breite 700 px — so hat Micha die Vorlage in GIMP angelegt. Rechter
Überstand ~130 px über die Inhaltskante hinaus. */
/* Bezugsgröße für die Schrift: Alle Textmaße im Schild sind an DIESE
Breite gekoppelt (Einheit cqw = 1 % davon). Sonst blieben sie beim
Verkleinern des Fensters stehen, während das Bild schrumpft — der Text
sprengte dann das Schild. */
container-type: inline-size;
position: absolute; pointer-events: auto;
bottom: -90px; right: -130px; width: 700px;
display: block; aspect-ratio: 680 / 453;
text-decoration: none; line-height: 1.2;
transition: transform .22s ease, filter .22s ease;
}
/* Die Fläche liegt hinter dem Rahmen und darf an den Zackentälern nicht
hervorschauen. Zwei Vorkehrungen: Die Maße sind mit strenger Schwelle
gemessen (schon der weiche Randschein zählt als Kontur, nicht erst die
deckende Linie) und um 6 % eingezogen. Zusätzlich läuft der Rand weich
aus — eine harte Kante zeigt jede Ungenauigkeit sofort, der Verlauf
verschwindet dagegen im dunklen Grund. */
.topdeal-fuell {
position: absolute; left: 33.1%; top: 25.6%; width: 39.8%; height: 52.3%;
border-radius: 50%; z-index: 0;
background: radial-gradient(ellipse at center,
var(--topdeal-farbe, #101a12) 0 60%,
color-mix(in srgb, var(--topdeal-farbe, #101a12) 50%, transparent) 82%,
transparent 100%);
}
.topdeal-bild { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
/* ── Zweite Form: der Tech-Rahmen ──────────────────────────────────────
Gleiche Lage wie der Stern, aber breiter und flacher wirkend — seine
Innenfläche ist ein liegendes Rechteck statt einer Sternmitte. Deshalb
sitzt das Textfeld hier anders und darf mehr Zeilen tragen. Die Fahne
„BESONDERES ANGEBOT" oben links gehört zum Bild und bleibt frei. */
.topdeal--rahmen { width: 760px; }
.topdeal--rahmen .topdeal-text {
left: 22%; top: 33.9%; width: 60%; height: 50.1%;
align-items: center; text-align: center; padding: 0;
gap: 4px;
}
.topdeal--rahmen .topdeal-z1 { font-size: 30px; }
.topdeal--rahmen .topdeal-z2 { font-size: 15px; }
.topdeal-k {
font-family: var(--font-mono); font-size: 13px; letter-spacing: .16em;
text-transform: uppercase; color: var(--green-h);
}
/* ── Aktionsschild: die festgelegte Schriftpaarung ─────────────────────
Hauptzeile in „Cabin Sketch", Folgezeilen in „Playwrite DE Grund" — von
Micha so entschieden. Steht nach den Schriftblöcken, damit es deren
Vorgaben überschreibt. */
/* Nicht reinweiß, sondern leicht ins Graue gebrochen: Kreide deckt nie
vollständig, pralles Weiß wirkt gedruckt statt geschrieben. */
.topdeal--rahmen .topdeal-z1 { font-family: "Cabin Sketch", cursive; font-size: 6.05cqw; line-height: 1.2; color: #d8dcd6; }
/* Enger Zeilenabstand: Die Aufzählungszeilen gehören zusammen, mit 1.5
standen sie als Einzelaussagen auseinander. */
.topdeal--rahmen .topdeal-z2 { font-family: "Poetsen One", cursive; font-size: 3.42cqw; line-height: 1.18; }
/* Untertitel: halbe Größe, in Klammern, direkt unter der Überschrift und
wie diese mittig. Die Klammern kommen aus dem Stylesheet, damit sie im
Schalter nicht mitgetippt werden. */
.topdeal--rahmen .topdeal-unter {
font-family: "Playwrite DE Grund", cursive; font-size: 1.97cqw; line-height: 1.4;
align-self: flex-start; text-align: left;
/* Etwas Luft nach oben zum Titel und etwas mehr nach unten zur
Aufzählung — die Klammerzeile gehört zum Titel, nicht zu den Zeilen
darunter. */
margin-top: 2px; margin-bottom: 6px;
}
.topdeal--rahmen .topdeal-unter::before { content: "("; }
.topdeal--rahmen .topdeal-unter::after { content: ")"; }
/* Folgezeilen linksbündig mit Strich davor; Überschrift bleibt mittig. */
.topdeal--rahmen .topdeal-text { align-items: center; }
/* Leichte Drehung im Uhrzeigersinn — der Text sitzt dadurch schief auf der
Fläche wie von Hand angeschrieben. Der Drehpunkt liegt in der Mitte,
damit das Feld nicht aus der Fläche wandert. */
.topdeal--rahmen .topdeal-text { transform: rotate(5deg); transform-origin: 50% 50%; }
.topdeal--rahmen .topdeal-z2 { align-self: flex-start; text-align: left; }
.topdeal--rahmen .topdeal-z2::before { content: "– "; }
/* Handlungsaufforderung am Fuß des Schilds. Abgesetzt, damit sie nicht als
vierte Aufzählungszeile gelesen wird — aber knapp: Der Textblock ist
mittig im Feld, ein großer Abstand hier schiebt den Titel nach oben.
Orange, weil sie sich vom grünen Rahmen abheben soll; der Pfeil kommt
aus dem Stylesheet, nicht aus dem Text. */
.topdeal--rahmen .topdeal-cta {
align-self: center; margin-top: 1.4cqw;
font-family: "Cabin Sketch", cursive; font-size: 3.0cqw;
color: #f0a24b; letter-spacing: .02em;
}
.topdeal--rahmen .topdeal-cta::after { content: " ›"; }
.topdeal:hover .topdeal-cta { color: #ffbe6b; }
/* Untertitel und Folgezeilen gemeinsam einrücken — sie sollen unter dem
Titel stehen, nicht an der Feldkante kleben. */
.topdeal--rahmen .topdeal-unter,
.topdeal--rahmen .topdeal-z2 { margin-left: 6.05cqw; }
/* Schrift der Folgezeilen zum Durchtesten (`$schrift_folge` in index.php).
Steht bewusst hier ganz unten, damit es die Vorgabe oben überschreibt. */
/* Text sitzt über Bild und Füllung, mittig in der freien Sternfläche. */
.topdeal-text {
position: absolute; z-index: 2; left: 33.1%; top: 25.6%; width: 39.8%; height: 52.3%;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 4px; text-align: center; padding: 0 4px;
}
.topdeal-z1 {
font-family: var(--font-sans); font-weight: 700; font-size: 26px;
color: #fff; text-wrap: balance;
}
.topdeal-z2 {
font-family: var(--font-mono); font-size: 14px; letter-spacing: .04em;
color: var(--green-h);
}
.topdeal:hover { transform: translateY(-3px) rotate(-1.5deg); filter: brightness(1.06); }
.topdeal:focus-visible { outline: 2px solid var(--green); outline-offset: 6px; border-radius: 8px; }
/* Schmalere Fenster: Der Überstand würde hier seitliches Scrollen erzeugen,
also rückt der Störer heran und schrumpft mit. Unter 1000 px verlässt er
die freie Fläche und stünde über dem Text — dort läuft er wieder im Fluss
mit, mittig unter der Hero-Karte. */
@media (max-width: 1500px) {
.topdeal { width: 480px; right: -60px; bottom: -50px; }
.topdeal-z1 { font-size: 22px; }
}
@media (max-width: 1200px) {
.topdeal { width: 380px; right: 0; bottom: -20px; }
.topdeal-z1 { font-size: 19px; }
}
@media (max-width: 1000px) {
.topdeal-lage { height: auto; padding-block: 8px 26px; }
.topdeal { position: relative; inset: auto; width: min(340px, 100%); margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
.topdeal { transition: none; }
.topdeal:hover { transform: none; }
}
/* ═══════════════════════════════════════════════════════════════════════
BAUNOTIZ: STILLGELEGTE FASSUNGEN UND FRÜHERE WERTE
Vor dem Livegang entfernen (siehe Kopf von grund.css).
═══════════════════════════════════════════════════════════════════════
── Kachelfassung A: kleines Motiv ÜBER dem Text (stillgelegt) ─────────
Vorgänger der heutigen quadratischen Kachel. Das zugehörige Markup steht
auskommentiert in index.php. Die Kachel war damals selbst ein
und klappte ein Textfeld darunter auf, daher Pfeil und aria-Zustand.
.feld-tab:focus-visible { outline: 2px solid var(--green-h); outline-offset: 3px; }
.feld-tab[aria-expanded="true"] { border-color: rgba(34,197,94,.60); background: linear-gradient(180deg, rgba(34,197,94,.09), rgba(255,255,255,.015)); }
.feld-icon { display: block; width: 128px; height: 128px; margin-bottom: 18px; }
.feld-icon img { width: 100%; height: 100%; display: block; }
.feld-icon--gruen img { filter: drop-shadow(0 0 8px rgba(34,197,94,.46)) drop-shadow(0 0 20px rgba(34,197,94,.27)); }
.feld-icon--blau img { filter: drop-shadow(0 0 8px rgba(56,189,248,.46)) drop-shadow(0 0 20px rgba(56,189,248,.27)); }
.feld-icon--orange img { filter: drop-shadow(0 0 8px rgba(251,146,60,.46)) drop-shadow(0 0 20px rgba(251,146,60,.27)); }
.feld-pfeil { position: absolute; right: 24px; top: 32px; width: 10px; height: 10px; border-right: 2px solid rgba(154,165,182,.65); border-bottom: 2px solid rgba(154,165,182,.65); transform: rotate(45deg); transition: transform .25s ease, border-color .25s ease; }
.feld-tab[aria-expanded="true"] .feld-pfeil { transform: rotate(-135deg); border-color: var(--green-h); }
.feld-tab--bild > span.feld-pfeil { display: none; }
Noch älter, vor den Bildmotiven — Icon in einem Kasten mit grünem Rahmen:
.feld-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: rgba(34,197,94,.10); border: 1px solid rgba(34,197,94,.30); color: var(--green-h); margin-bottom: 18px; }
.feld-icon svg { width: 26px; height: 26px; }
── Die Aufklapp-Textfelder unter den Kacheln (stillgelegt) ───────────
Die Inhalte liegen seit dem 29.07. auf eigenen Unterseiten.
.feld-panel { margin-top: 20px; padding: 34px 34px 30px; border: 1px solid rgba(34,197,94,.26); border-radius: 16px; background: linear-gradient(180deg, rgba(34,197,94,.05), rgba(255,255,255,.012)); }
.feld-panel[hidden] { display: none; }
.feld-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 40px; }
.feld-spalten p { color: var(--tx-dim2); font-size: 16.5px; }
@media (max-width: 1000px) { .feld-spalten { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .feld-panel { max-width: 460px; margin-inline: auto; padding: 26px 22px; } }
── Burger wird zum X (verworfen) ─────────────────────────────────────
Aus der Vorlage übernommen, dann verworfen: Geschlossen wird über das
rote X oben rechts.
.feld-tab--bild .feld-burger.ist-offen { background-size: 0 2px; color: var(--green-h); }
.feld-tab--bild .feld-burger.ist-offen::before { transform: rotate3d(0, 0, 1, 45deg); }
.feld-tab--bild .feld-burger.ist-offen::after { transform: rotate3d(0, 0, 1, -45deg); }
Und die Verankerung des Pfeils, falls er zurückkommt: Die Regel, die
ALLE Spans auf `relative` setzt, nimmt einem absolut gesetzten Pfeil
seine Verankerung und lässt ihn in den Textfluss fallen (gemessen: saß
unten links statt oben rechts).
.feld-tab--bild > span.feld-pfeil { position: absolute; z-index: 1; }
── Kartenraster (stillgelegt) ────────────────────────────────────────
Die erste Fassung des Leistungsteils: drei Karten mit Icon, Titel,
Fließtext und Stichwortmarken. Ersetzt durch die Kacheln.
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card { background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)); border: 1px solid rgba(148,163,184,.16); border-radius: 16px; padding: 34px 28px; transition: transform .25s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease; }
.card:hover { transform: translateY(-5px); border-color: rgba(34,197,94,.42); background: linear-gradient(180deg, rgba(34,197,94,.06), rgba(255,255,255,.015)); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.card-icon { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; background: rgba(34,197,94,.10); border: 1px solid rgba(34,197,94,.30); color: var(--green-h); margin-bottom: 22px; }
.card-icon svg { width: 28px; height: 28px; }
.card-title { font-size: 21px; color: #fff; margin-bottom: 10px; }
.card-text { color: var(--tx-dim2); font-size: 16px; }
.card-text + .card-text { margin-top: 12px; }
.card-text strong { color: var(--tx); }
.card-kurz { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--green-h); margin: 0 0 14px; }
.card-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 18px; padding: 0; }
.card-tags li { font-family: var(--font-mono); font-size: 12px; letter-spacing: .03em; color: var(--tx-dim); border: 1px solid rgba(154,165,182,.28); border-radius: 999px; padding: 4px 11px; }
.cards .card.reveal:nth-child(2) { transition-delay: .08s; }
.cards .card.reveal:nth-child(3) { transition-delay: .16s; }
@media (max-width: 760px) { .cards { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }
── Handelszeile und Nachweisblock (auf Unterseiten gewandert) ────────
Die Handelszeile war bewusst eine Zeile und keine Karte, damit sie nicht
wie ein viertes Leistungsfeld gelesen wird; sie steht heute auf der
IT-Seite. Der Nachweisblock (Diagramm links, Text rechts) ist zum
Einblick der KI-Seite geworden.
.handel { max-width: 900px; margin: 34px 0 0; color: var(--tx-dim2); font-size: 16.5px; border-left: 2px solid rgba(34,197,94,.45); padding-left: 20px; }
.handel strong { color: var(--tx); }
.nachweis { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; margin-top: 52px; padding: 30px; border: 1px solid rgba(148,163,184,.16); border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); }
.nachweis-text .section-kicker { margin-bottom: 12px; }
.nachweis-text p { color: var(--tx-dim2); font-size: 17px; margin-bottom: 22px; }
@media (max-width: 1000px) { .nachweis { grid-template-columns: 1fr; gap: 26px; } }
@media (max-width: 760px) { .handel, .nachweis { max-width: 460px; margin-inline: auto; } }
── Bildknöpfe im Kontaktbereich (stillgelegt) ────────────────────────
Zwei Grafiken aus assets/buttons/ als Knöpfe. Das Markup steht
auskommentiert in index.php, die Dateien liegen weiterhin bereit.
Das Bild IST der Knopf, deshalb bleibt der Knopf ohne eigene Fläche —
Rahmen, Farbe und Form stecken in der Grafik. Ein echtes ist
trotzdem nötig: Ein Bild allein ist nicht bedienbar (Tastatur,
Vorleseprogramme), und der Alternativtext trägt die Beschriftung.
Zur Größe: Die Grafiken sind auf die gemeinsame Höhe 62 px gebracht.
In voller Größe messen beide zusammen 551 px — das passte in die 552 px
der Spalte, ließ aber nur EINEN Pixel Reserve; schon geringer Zoom hätte
sie umbrechen lassen. Bei 56 px sind es 498 px inklusive Abstand.
.bildknopf { padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; border-radius: 10px; transition: transform .18s ease, filter .18s ease; }
.bildknopf img { display: block; height: 56px; width: auto; }
.bildknopf:hover { transform: translateY(-2px); filter: brightness(1.08) drop-shadow(0 8px 18px rgba(34,197,94,.30)); }
.bildknopf:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
@media (max-width: 560px) { .bildknopf img { height: 64px; } }
── Frühere Werte aus Entwurf 11 ──────────────────────────────────────
Hero mit eigenem Punktraster und Tiefenverlauf, bevor der Netzwerkgrund
ihn ersetzte:
.mh-dark { background:
radial-gradient(circle at 1px 1px, rgba(148,163,184,.10) 1px, transparent 0),
radial-gradient(130% 120% at 78% 40%, #16233a 0%, #0d1728 45%, #080f1c 100%);
background-size: 34px 34px, auto; }
.section-light { background: radial-gradient(circle at 1px 1px, rgba(148,163,184,.08) 1px, transparent 0), #0b1220; background-size: 34px 34px, auto; }
.section-contact{ background: radial-gradient(circle at 1px 1px, rgba(148,163,184,.08) 1px, transparent 0), radial-gradient(60% 80% at 50% 100%, rgba(34,197,94,.14), transparent 60%), #0b1220; background-size: 34px 34px, auto, auto; }
═══════════════════════════════════════════════════════════════════════ */