/* ===================================================================== VHC – Landingpage · Entwurf 6 „Variante 1e" — nach Michas Anleitung EIN Container (r=20, overflow:hidden): grauer Header-Block (Verlauf grau->dunkel INNERHALB, ab 94%) + dunkler Hero-Block. Swoosh als PNG mit object-fit:fill + fester flacher Höhe (killt den Glow-Kasten). final-02 OHNE scaleX(-1) (ist bereits „links runter"). Vanilla, keine CDNs. ===================================================================== */ :root { --navy-1: #0b1220; --navy-2: #0d1728; --navy-3: #080f1c; --grey: #c4cad3; --green: #22c55e; --green-h:#4ade80; /* Warmer Akzent, bisher nur im Verlauf der Impressum-Ueberschrift. Bewusst in der Helligkeit auf --green-h abgestimmt, damit beide Akzente auf dem dunklen Grund gleich stark wirken und keiner den anderen ueberstrahlt. */ --orange: #fb923c; --tx: #eef1f6; --tx-dim: #9aa5b6; --tx-dim2:#aab4c4; --ink: #0d1728; /* dunkler Text auf Grau */ /* Fonts laut Anleitung. Dateien fehlen noch → Fallback-Stack; sobald assets/fonts/ befüllt ist, @font-face unten aktivieren. */ --font-head: "Rajdhani", "Oswald", "Segoe UI Semibold", system-ui, sans-serif; --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace; --wrap: 1180px; /* Ungenutzt seit dem Wechsel „Schleier" -> „ersetzen": die Dunkelzonen liegen jetzt transparent über dem HG aus Entwurf 2, statt ihn zu überdecken. Bleibt stehen, falls doch wieder gedämpft werden soll. --veil: rgba(11, 18, 32, .62); */ /* Swoosh-Geometrie — Nav wird an DIESELBE linke Referenz gekoppelt (.mh-head), damit Nav-Ende und Swoosh-Ende bei JEDER Breite bündig sind. */ --sw-start: 60px; /* padding-left des Header-Swoosh */ --sw-width: 1000px; /* Breite des Header-Swoosh */ } /* Hausschriften laut Anleitung, self-contained im Projekt (deploy-sicher). Quelle: zentraler Fontordner /vhc/global-media/fonts (via Font-Tool geladen). */ @font-face { font-family:"Rajdhani"; src:url(assets/fonts/rajdhani-v17-latin-700.woff2) format("woff2"); font-weight:700; font-display:swap; } @font-face { font-family:"IBM Plex Sans"; src:url(assets/fonts/ibm-plex-sans-v23-latin-regular.woff2) format("woff2"); font-weight:400; font-display:swap; } @font-face { font-family:"IBM Plex Sans"; src:url(assets/fonts/ibm-plex-sans-v23-latin-700.woff2) format("woff2"); font-weight:700; font-display:swap; } @font-face { font-family:"IBM Plex Mono"; src:url(assets/fonts/ibm-plex-mono-v20-latin-500.woff2) format("woff2"); font-weight:500; font-display:swap; } @font-face { font-family:"IBM Plex Mono"; src:url(assets/fonts/ibm-plex-mono-v20-latin-700.woff2) format("woff2"); font-weight:700; font-display:swap; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: 17px; line-height: 1.65; color: var(--tx); background: var(--navy-3); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Seite mindestens fensterhoch, Inhalt als Spalte — zusammen mit `margin-top: auto` am Fuss (siehe .site-footer) drueckt das den Fuss an den unteren Rand, SOBALD der Inhalt das Fenster nicht fuellt. Ohne diese Regel endete die Seite mitten im Fenster: gemessen 29.07. auf der IT-Seite bei 1400px Fensterhoehe 207px Leerraum UNTER dem Fuss, waehrend es bei 1000px passte — der Fuss „hing in der Luft", je nach Fenstergroesse. Gehoert ins Grundgeruest, nicht zu einer einzelnen Seite: es betrifft jede. */ min-height: 100vh; display: flex; flex-direction: column; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3 { margin: 0; line-height: 1.1; } p { margin: 0; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 5vw, 44px); } /* ===================================================================== GANZFLÄCHIGER NETZWERK-HINTERGRUND (aus Entwurf 2 „Netzwerk") --------------------------------------------------------------------- Warum fix statt im Hero: der Hintergrund soll EIN durchgehendes Feld hinter der ganzen Seite sein, nicht pro Sektion neu ansetzen. Stapelung: body-Hintergrund (--navy-3) ganz unten -> .net-bg (z 0) -> Inhalt (z 1). Der Inhalt braucht das z-index ausdrücklich, sonst verschwindet er hinter der fixen Ebene. ===================================================================== */ /* Diese Ebene IST der Hintergrund der Seite — Grundverlauf aus Entwurf 2 (dort .hero), darüber Canvas + Aurora. Die Sektionen darunter sind deshalb durchgehend transparent (siehe unten). */ .net-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: radial-gradient(120% 80% at 50% -10%, #14203050 0%, transparent 60%), linear-gradient(180deg, #0b1119 0%, #0e1622 100%); } .net-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* Aurora = statischer Schimmer; trägt den Hintergrund allein, wenn das Canvas ausfällt (kein JS, prefers-reduced-motion). Werte aus Entwurf 2. */ .net-aurora { position: absolute; inset: 0; background: radial-gradient(60% 50% at 78% 22%, rgba(34,197,94,.16), transparent 60%), radial-gradient(55% 45% at 12% 78%, rgba(120,150,180,.14), transparent 62%); } /* Inhalt über die Hintergrund-Ebene heben */ .hero-card, .section, .site-footer { position: relative; z-index: 1; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; font-family: var(--font-sans); font-size: 16px; font-weight: 700; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease; } .btn:hover { transform: translateY(-2px); } .btn-primary { background: var(--green); color: #04160b; box-shadow: 0 8px 22px rgba(34,197,94,.28); } .btn-primary:hover { background: #3ad46f; } .btn-ghost { background: transparent; color: var(--tx); border-color: rgba(154,165,182,.35); } .btn-ghost:hover { border-color: var(--green); color: var(--green-h); } .btn-lg { padding: 17px 40px; font-size: 18px; font-family: var(--font-mono); } /* Der Formular-Knopf neben der Mailadresse (Micha 29.07.): leicht gruen hinterlegt — deutlich schwaecher als der gefuellte Mail-Knopf daneben —, dafuer mit kraeftigem Rand in DERSELBEN Farbe wie dieser (var(--green)). Bewusst eine eigene Klasse statt einer Aenderung an `.btn-ghost`: die Geisterknoepfe tragen auch „Den Aufbau ansehen" und „Zurueck zur Uebersicht" auf den Leistungsseiten, die unveraendert bleiben sollen. */ .btn-formular { background: rgba(34,197,94,.13); border-color: var(--green); /* Kraeftiger Rand — aber der halbe zusaetzliche Millimeter geht vom Innenabstand ab, sonst waere dieser Knopf 2px hoeher als der gefuellte daneben (der Rahmen addiert sich auf die Aussenmasse). */ border-width: 2px; /* Ausgleich je Groesse — Begruendung wie in ../style.css (Zwillingsdatei, synchron halten): 2px Rand sind 0.5px mehr als die 1.5px der Grundklasse. Hier der Grundwert von `.btn` (14/28) fuer den Knopf im Impressumskasten, unten der von `.btn-lg` (17/40) fuer die Kontaktsektion der Startseite. */ padding: calc(14px - 0.5px) calc(28px - 0.5px); } .btn-lg.btn-formular { padding: calc(17px - 0.5px) calc(40px - 0.5px); } .btn-formular:hover { background: rgba(34,197,94,.22); border-color: var(--green-h); color: var(--tx); } /* ===================================================================== HERO-CARD (ein Container, rund, overflow hidden) ===================================================================== */ /* full-bleed: kein dunkler Rand/Rahmen mehr um den hellen Header */ .hero-card { margin: 0; max-width: 100%; border-radius: 0; overflow: hidden; } /* ---------- 1) Grauer Header-Block ---------- */ /* Kopfblock gibt seinen Hintergrund ebenfalls an .net-bg ab — der HG aus Entwurf 2 läuft jetzt durchgehend von ganz oben bis zum Footer. Damit entfällt auch der Grau->Dunkel-Übergang am Blockende (er hatte nur den Zweck, den grauen Kopf an die Dunkelzone anzuschließen). Ursprung 11, für Rückbau aufbewahrt: background: linear-gradient(180deg, #b6bdc9 0%, #b5bcc8 94%, #8b94a4 97%, #454d5e 99%, #0a1120 100%); */ .mh-grey { /* Kopfbereich abgedunkelt: gleichmäßiger Schleier über dem Netzwerk-HG, mit HARTER Kante zum Hero-Block (Vorgabe Micha) — kein Ausblenden. Der Schleier läuft gegen SCHWARZ, nicht gegen das Palette-Navy: #080f1c ist praktisch so dunkel wie der Grund darunter (~rgb 13/22/31) — damit gemischt ergab sich nachgemessen nur 20.5 -> 17.5 Helligkeit, also unsichtbar. Gegen Schwarz wirkt derselbe Alpha-Wert echt abdunkelnd. Stellschraube: der Alpha-Wert (kleiner = heller). */ background: rgba(0,0,0,.28); /* Höhe gekürzt — AUSSCHLIESSLICH über den Leerraum, der Inhalt bleibt unangetastet: Logo 118px, Nav und Swoosh 58px unverändert. Gemessen waren von 300px Blockhöhe 114px reines Padding, davon 74px totes Feld UNTER dem Swoosh. Genau dort wird gekürzt. Ursprung 11: padding: 40px 0 74px; (Blockhöhe 300px) */ padding: 24px 0 28px; /* Seiten-Padding raus: Content über zentrierte Wrap */ } /* Kopfzeile endet exakt am Swoosh-Ende -> Nav (space-between) ist damit bündig, unabhängig von der Fensterbreite (beides links verankert). */ .mh-head { display: flex; align-items: center; justify-content: space-between; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 5vw, 44px); } .brand { display: inline-flex; align-items: center; gap: 24px; } /* Rahmen von 4px Weiß auf 3px Silber — Weiß stach auf dem dunklen Grund als hellster Punkt der Seite hervor. Silber = --grey aus der Palette, kein neuer Sonderwert. Ursprung 11: border: 4px solid #fff; */ .brand-logo { width: 118px; height: 118px; border-radius: 24px; border: 3px solid var(--grey); box-shadow: 0 12px 30px rgba(8,15,28,.30); } /* Firmenname in Silber (--grey, dieselbe Farbe wie der Logo-Rahmen — kein neuer Sonderwert). Zwischenschritt war Fast-Weiß (--tx), als der Kopf auf dunklen Grund kam; Ursprung 11 (für hellen Grund) war var(--ink). Ursprung 11: color: var(--ink); Zwischenstand: color: var(--tx); */ .brand-word { font-family: var(--font-sans); font-weight: 700; font-size: clamp(22px, 2.4vw, 31px); line-height: 1.14; color: var(--grey); white-space: nowrap; letter-spacing: -.01em; } /* Menü rechts, aber 400px vom rechten Rand -> Kontakt bündig mit Swoosh-Ende */ .mh-nav { display: flex; align-items: center; gap: 30px; } /* Navigation auf hell gedreht (Kopf steht auf Dunkel). Der Kontakt-Knopf war ein dunkles Navy-Pill auf Grau — auf dunklem Grund verschwindet es, deshalb auf den Grün-Akzent von 11 (--green, wie .btn-primary) mit dunkler Schrift. Ursprung 11 (für hellen Grund): .mh-nav a { color: #26313f; } .mh-nav .nav-cta{ background: var(--navy-2); color: #fff; } .mh-nav .nav-cta:hover { background: var(--green); } */ .mh-nav a { font-weight: 600; font-size: 17px; color: var(--tx-dim2); transition: color .18s ease; } .mh-nav a:hover { color: var(--green-h); } .mh-nav .nav-cta { background: var(--green); color: #04160b; padding: 11px 22px; border-radius: 999px; } .mh-nav .nav-cta:hover { background: var(--green-h); color: #04160b; } /* Bild-Buttons in der Navigation: kein Polster und kein Grund — der Button bringt seine Form selbst mit, ein Pill darunter waere ein zweiter Rahmen. Die Bilder liegen in doppelter Aufloesung vor (92px hoch fuer 46px Anzeige), damit sie auf feinen Bildschirmen scharf bleiben. */ .mh-nav .nav-bild { padding: 0; background: none; display: inline-flex; } .mh-nav .nav-bild img { display: block; height: 46px; width: auto; transition: filter .2s ease, transform .2s ease; } .mh-nav .nav-bild:hover img { filter: brightness(1.12); transform: translateY(-1px); } /* Swoosh: feste flache Höhe + object-fit:fill (kein Glow-Kasten), rechtsbündig mit 400px Offset -> endet bündig mit Kontakt. final-02, KEIN scaleX(-1). */ .mh-swoosh { margin-top: 10px; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 5vw, 44px); overflow: visible; } /* Glow-Dämpfung (nur der KOPF-Swoosh, nicht der Akzent unter „arbeitet."). Der Glow steckt im PNG: gemessen sind nur ~6% der Pixel der kräftige Kern, ~35% ein weicher Halo mit Alpha 10-160. Genau dieser Halo blüht auf dem dunklen Grund auf — auf dem früheren grauen Kopf war er gedämpft. opacity trifft ihn deshalb überproportional: der schwache Halo fällt unter die Wahrnehmungsschwelle, der Kern bleibt als Linie stehen. EINE Stellschraube — kleiner = weniger Glow. Ursprung 11: kein opacity. */ .swoosh-img { display: block; margin-left: 60px; width: calc(100% - 60px); height: 58px; object-fit: fill; transform: scaleX(-1); pointer-events: none; opacity: .7; } /* ---------- 2) Dunkler Hero-Block ---------- */ /* Hintergrund komplett an .net-bg abgegeben (Entwurf-2-HG ersetzt den alten). Ursprung 11 (Punktraster + Tiefen-Verlauf), für Rückbau aufbewahrt: 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; */ .mh-dark { background: transparent; padding: clamp(44px, 5vw, 72px) 0 clamp(64px, 8vw, 112px); } .mh-hero { display: grid; grid-template-columns: 1.3fr .7fr; gap: 56px; align-items: start; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 5vw, 44px); } .kicker { font-family: var(--font-mono); font-size: 14px; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: var(--green-h); margin: 0 0 22px; } .headline { font-family: var(--font-head); font-weight: 700; font-size: clamp(46px, 6vw, 76px); line-height: 1.05; color: var(--tx); letter-spacing: .005em; } .headline .accent { position: relative; color: var(--green); white-space: nowrap; display: inline-block; overflow: visible; } .headline .accent .accent-swoosh { position: absolute; left: -12px; bottom: -22px; width: 118%; height: 44px; object-fit: fill; transform: scaleX(-1); pointer-events: none; } .hero-text { font-family: var(--font-sans); font-size: clamp(18px, 2vw, 21px); color: var(--tx-dim2); max-width: 44ch; margin: 28px 0 34px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; } /* Leistungsliste = grüne Leiterbahn + Nodes */ .leistungsliste { list-style: none; margin: 6px 0 0; padding: 6px 0 6px 40px; position: relative; display: flex; flex-direction: column; gap: 42px; } .leistungsliste::before { content: ""; position: absolute; left: 9px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(180deg, rgba(34,197,94,.55), rgba(34,197,94,.16)); } .leistungsliste li { position: relative; } .node { position: absolute; left: -40px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(34,197,94,.14), 0 0 14px 2px rgba(34,197,94,.5); } .ll-title { display: block; font-family: var(--font-mono); font-weight: 700; letter-spacing: .12em; color: var(--green-h); font-size: 16px; } .ll-line { display: block; font-family: var(--font-sans); color: var(--tx-dim); font-size: 16px; margin-top: 3px; } /* Die drei Hero-Zeilen sind seit 29.07. Links auf `#leistungen`. `display:block` ist noetig, weil `.ll-title`/`.ll-line` Bloecke sind — in einem inline `` wuerde die Klickflaeche zerfallen. `position` bleibt static, damit `.node` weiter gegen das `li` positioniert (sonst rutschte der Punkt um 40 px). Der Hover faerbt nur auf, was ohnehin schon da ist: Titel weiss, Unterzeile heller, Punkt staerker leuchtend — bewusst keine Verschiebung, weil die Zeilen an einer senkrechten Leitlinie haengen und jedes Wandern die Flucht dieser Linie sichtbar brechen wuerde. */ .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); } @media (prefers-reduced-motion: reduce) { .ll-title, .ll-line, .node { transition: none; } } /* ===================================================================== Weitere Sektionen (unter der Hero-Card) ===================================================================== */ .section { padding: clamp(70px, 9vw, 116px) 0; position: relative; } /* Alle Dunkelzonen geben ihren Hintergrund an .net-bg ab — der HG aus Entwurf 2 ERSETZT Punktraster + Navy-Fläche, statt darunter zu liegen. Ursprung 11, für Rückbau aufbewahrt: .section-dark { background: radial-gradient(circle at 1px 1px, rgba(148,163,184,.08) 1px, transparent 0), #0b1220; 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; } */ .section-dark { background: transparent; } /* Ganz dunkel: Profil ist Teil der durchgehenden Zone */ .section-light { background: transparent; color: #eaf0f6; } /* Grüner Schimmer unten 1:1 aus Entwurf 9 (dort style.css Z.143) zurückgeholt. NUR der grüne Verlauf — Punktraster und die deckende Navy-Fläche aus 9 bleiben draußen, sonst würde der Netzwerk-HG hier wieder verdeckt. Der Verlauf ist durchgehend transparent (rgba .14 -> transparent) und legt sich damit über das Canvas, statt es zuzudecken. */ .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-kicker { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .18em; color: var(--green-h); margin: 0 0 16px; } .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-light .section-kicker { color: #4ade80; } .section-light .section-title { color: #fff; max-width: 22ch; } .section-intro { font-size: 18px; color: var(--tx-dim2); } /* ---------- Pfeil „nach oben" neben dem Sektions-Kicker ---------- Ersatz fuer die fehlende zweite Menuefuehrung: Das Kopfmenue sitzt nur im Hero und scrollt weg, unterhalb davon gab es keinen Weg zurueck. Steht in Leistungen, Profil und Kontakt jeweils direkt hinter dem Kicker-Wort. Bewusst NICHT an `.section-kicker` selbst gebaut (kein display-Wechsel dort): die Klasse laeuft auch in den Unterseiten und in weiteren Bloecken — ein Eingriff dort haette Fernwirkung. Der Pfeil ist ein eigenes inline-Element, der Kicker bleibt unveraendert ein Block. Farbe kommt ueber `currentColor` vom Kicker — damit stimmt sie in der dunklen Zone (var(--green-h)) wie in `.section-light` (#4ade80) von selbst. Ein Kreis statt eines nackten Zeichens, weil das Element eine BEDIENUNG ist und ohne Umriss neben einer Versal-Zeile wie Dekoration wirkt. */ .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); } /* Die Anhebung ist Zierde — bei reduzierter Bewegung entfaellt sie, Farbe und Rahmen bleiben als Rueckmeldung. */ @media (prefers-reduced-motion: reduce) { .zum-anfang { transition: none; } .zum-anfang:hover, .zum-anfang:focus-visible { transform: none; } } .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); } /* Kurzzeile + die drei Unterpunkte je Feld (Beratung steckt in jedem Feld, deshalb kein viertes Consulting-Feld — s. Intro der Sektion). */ .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; } /* ===================================================================== DREI FELDER ALS AUFKLAPPER Reiter nebeneinander (kompakt), Text auf voller Breite darunter. Der Zustand hängt allein an aria-expanded/hidden — die Optik folgt dem Attribut, nicht einer zweiten Klasse, die auseinanderlaufen könnte. ===================================================================== */ /* minmax(0, 1fr) statt 1fr: Grid-Spalten 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 29.07.: 6 px Differenz.) */ .feld-reiter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .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; /* Abgedunkelt 29.07. (gilt fuer beide Reihen): vorher lag ein AUFHELLENDER Weissschleier auf der Kachel, das Netzwerk-Canvas schien fast ungedaempft durch. Jetzt ein dunkler Schleier — die Kachel setzt sich vom Hintergrund ab, Icons und Text stehen darueber und werden nicht mitgedunkelt. Vorher: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)) */ 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-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)); } /* Icon-Bilder (seit 29.07.) statt der frueheren Strich-SVGs. Die Vorlagen sind 200x200 mit Alphakanal und bringen ihre runde Form UND ihren Rand selbst mit — deshalb kein Kasten, kein zweiter Rahmen, keine Hintergrundfuellung mehr. Vorherige Fassung (Kasten 52px, gruener Rahmen, SVG 26px innen): .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; } */ .feld-icon { display: block; width: 128px; height: 128px; margin-bottom: 18px; } .feld-icon img { width: 100%; height: 100%; display: block; } /* Farbiger Schein je Feld (obere Reihe, 29.07.). `drop-shadow` statt `box-shadow`: es folgt der Alphakontur des Bildes, glueht also der runden Form entlang, waehrend box-shadow den quadratischen Rahmen nachzeichnen wuerde. Zwei gestapelte Schatten ergeben engen Kern + weiten Hof. Farbwahl nach dem Motiv: Gehaeuse gruen, Platine blau, Codefenster orange. Gilt fuer BEIDE Reihen — `.feld-icon--*` ist die obere (Bild ueber dem Text), `.feld-bg--*` die untere (Bild hinter dem Text). Dort wirkt der Schein schwaecher, weil die Deckkraft des Elements den Schatten mitdimmt. */ .feld-icon--gruen img, .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-icon--blau img, .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-icon--orange img, .feld-bg--orange { filter: drop-shadow(0 0 8px rgba(251,146,60,.46)) drop-shadow(0 0 20px rgba(251,146,60,.27)); } .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; } /* Pfeil = die einzige Aufforderung; dreht sich beim Öffnen. */ .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); } /* --------------------------------------------------------------------- Vergleichsvariante (29.07.): Icon gross und mittig HINTER dem Text. Das Bild liegt absolut in der Kachelmitte, der Text steht per position/z-index darueber. Deckkraft ist der Startwert zum Feintunen — zu hoch frisst sie die Lesbarkeit der Kurzzeile. --------------------------------------------------------------------- */ .feld-reiter--bild { margin-top: 20px; } /* Quadratische Kachel (Micha 29.07.): die Hoehe folgt der Spaltenbreite, also dem Grid — kein fester Wert, der bei anderer Fensterbreite nicht mehr passt. Ersetzt die frueher feste `min-height: 210px`. */ /* padding-right zurueck auf 24px: die 46px der Grundklasse waren Platz fuer den Aufklapp-Pfeil, den diese Variante nicht mehr hat. Ohne das bricht die Stichwortzeile von „Web-Systeme" in zwei Zeilen, waehrend die anderen beiden einzeilig bleiben. */ /* Die Kachel ist seit 29.07. KEIN Bedienelement mehr (Micha: „die anklickbaren Kaesten deaktivieren, nur ueber Menue") — im Markup ein
statt