/* * Dunkles „Neural"-Design für die klassischen Fallback-Seiten (site.php, * shop.php, shop-produkt.php, shop-anfrage.php und die Auth-Seiten, die das * gemeinsame Layout site_layout_start/_ende nutzen). * * Zweck: Diese Seiten liefen bisher im alten hellen Layout mit heller * Top-Navigation. Der öffentliche Bereich soll aber überall im dunklen * Neuronen-Design erscheinen (wie index.php / Neural Canvas). Dieses * Stylesheet legt die dunklen Neural-Farben auf die bestehenden * .site-*- und .shop-*-Klassen (via --site-*-Variablen) und gibt Kopfzeile, * Inhalts-Karte und Fuß den schlanken Glassmorphism-Look. * * Nur DUNKEL — kein Hell/Dunkel-Umschalter (bewusste Entscheidung: der * öffentliche Bereich ist nur dunkel). Das Layout rendert deshalb fest * . * * Farbwerte sind aus assets/site-neural.css (--nc-*) KOPIERT — es besteht * KEINE Abhängigkeit auf jenes Stylesheet. */ /* --- Neural-Palette auf die bestehenden --site-*-Variablen legen ----------- */ /* Wird NACH site.css geladen und überschreibt deren Dunkel-Werte, sodass alle .site-*-/.shop-*-Regeln automatisch die exakten Neural-Farben tragen. Der data-theme="dark"-Selektor hält zugleich site.css-eigene Dunkel-Varianten (z. B. Fehler-/OK-Kästen der Auth-Seiten) aktiv. */ :root[data-theme="dark"] { --site-akzent: #1FC6D5; /* --nc-cyan */ --site-akzent-hell: #7EE7F0; /* Cyan aufgehellt */ --site-akzent-dunkel: #0FAFC0; /* --nc-cyan-tief */ --site-text: #EAF3F6; /* --nc-text */ --site-text-hell: #8FA6B0; /* --nc-text-dezent*/ --site-flaeche: #0C1016; /* --nc-bg */ --site-flaeche-2: #141C25; /* leicht erhöhte Fläche (Karten/Boxen) */ --site-rahmen: rgba(126, 231, 240, 0.22); /* --nc-glas-rand */ } body.site-klassisch { background: #0C1016; color: var(--site-text); min-height: 100vh; } /* --- Schlanke dunkle Kopfzeile (statt heller Top-Navigation) --------------- */ /* Analog .neural-bar: Glass mit Blur, feiner 1px-Rand, klebt oben. */ body.site-klassisch .site-kopf { padding: 10px 20px; gap: 12px; border-bottom: 1px solid var(--site-rahmen); background: rgba(10, 14, 19, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 30; } body.site-klassisch .site-marke { color: var(--site-text); font-size: 1.05rem; } body.site-klassisch .site-marke img { height: 38px; } .site-kopf-rechts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .site-netzlink { color: var(--site-text-hell); text-decoration: none; font-weight: 600; font-size: 0.9rem; } .site-netzlink:hover, .site-netzlink:focus-visible { color: var(--site-akzent-hell); outline: none; } /* Mitgliederlogin-Button im Marken-Cyan mit dezentem Schatten (wie neural-login). */ .site-loginknopf { padding: 10px 18px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 0.9rem; color: #062B30; background: linear-gradient(120deg, var(--site-akzent-dunkel), var(--site-akzent-hell)); box-shadow: 0 8px 22px -8px rgba(15, 175, 192, 0.55), 0 3px 8px -3px rgba(0, 0, 0, 0.4); transition: transform 160ms ease, box-shadow 160ms ease; } .site-loginknopf:hover, .site-loginknopf:focus-visible { outline: none; transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(15, 175, 192, 0.7), 0 6px 14px -5px rgba(0, 0, 0, 0.45); } /* --- Inhalt als zentrierte Glass-Karte ------------------------------------- */ .site-karte { max-width: 760px; margin: 40px auto 56px; padding: 28px 32px; border: 1px solid var(--site-rahmen); border-radius: 20px; background: rgba(16, 24, 31, 0.55); /* --nc-glas */ backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 24px 70px -20px rgba(0, 0, 0, 0.75); /* --nc-schatten */ } /* Seiten, die eine EIGENE Karte mitbringen (Auth-Formulare, Freigabe-Ansicht), sollen keine doppelte Karte erhalten — äußere Karte hier neutralisieren. */ .site-karte:has(.site-auth), .site-karte:has(.frg-karte) { max-width: none; margin: 24px auto 40px; padding: 0; border: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } /* --- Schlanker dunkler Fuß ------------------------------------------------- */ body.site-klassisch .site-fuss { padding: 18px 24px 24px; border-top: 1px solid var(--site-rahmen); background: rgba(10, 14, 19, 0.72); color: var(--site-text-hell); } body.site-klassisch .site-fuss-links a { color: var(--site-text-hell); } body.site-klassisch .site-fuss-links a:hover { color: var(--site-akzent-hell); } body.site-klassisch .site-fuss-marke { color: var(--site-text-hell); } /* --- Buttons/Links im Marken-Cyan mit dezentem Schatten ------------------- */ body.site-klassisch .site-knopf { border-radius: 999px; background: linear-gradient(120deg, var(--site-akzent-dunkel), var(--site-akzent-hell)); color: #062B30 !important; box-shadow: 0 10px 24px -8px rgba(15, 175, 192, 0.55), 0 4px 10px -4px rgba(0, 0, 0, 0.4); transition: transform 160ms ease, box-shadow 160ms ease; } body.site-klassisch .site-knopf:hover, body.site-klassisch .site-knopf:focus-visible { outline: none; background: linear-gradient(120deg, #0C8E9C, var(--site-akzent-dunkel)); transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(15, 175, 192, 0.7), 0 7px 16px -5px rgba(0, 0, 0, 0.45); } /* Shop-Absenden-Button ebenfalls als Cyan-Pille mit Schatten. */ body.site-klassisch .shop-absenden { border-radius: 999px; box-shadow: 0 10px 24px -8px rgba(15, 175, 192, 0.55), 0 4px 10px -4px rgba(0, 0, 0, 0.4); } /* Fehler-Kasten des Shop-Formulars im Dunkeln lesbar halten. */ body.site-klassisch .shop-fehler { background: rgba(218, 41, 28, 0.16); border-color: rgba(218, 41, 28, 0.55); color: #FF98A0; } /* --- Neue Inhaltsblöcke: FAQ / Slider / Teaser-Karten --------------------- */ /* Diese .site-*-Klassen rendert partials/site_helfer.php (aam_site_bloecke_html) sowohl auf der klassischen Seite (hier) als auch — per innerHTML — im dunklen Neuron-Panel (assets/site-neural.css bringt dort eine eigene Fassung mit den --nc-*-Farben mit). Hier durchgängig über die --site-*-Variablen, damit Hell und Dunkel automatisch aus site.css bzw. dem Dunkel-Override oben folgen — keine festen Farbwerte. */ /* FAQ: natives
-Akkordeon (ohne JS). */ .site-faq { display: flex; flex-direction: column; gap: 10px; margin: 24px 0; } .site-faq-item { border: 1px solid var(--site-rahmen); border-radius: 12px; background: var(--site-flaeche-2); overflow: hidden; } .site-faq-frage { display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; /* Klick-Cursor über der ganzen Frage */ list-style: none; /* Standard-Dreieck aus, eigener Marker unten */ font-family: "Montserrat", Arial, Helvetica, sans-serif; font-weight: 600; color: var(--site-text); } .site-faq-frage::-webkit-details-marker { display: none; } /* WebKit-Marker aus */ /* Eigener Marker: Chevron rechts, dreht sich beim Aufklappen. */ .site-faq-frage::after { content: "\25be"; /* ▾ */ margin-left: auto; color: var(--site-akzent); transition: transform 160ms ease; } .site-faq-item[open] .site-faq-frage::after { transform: rotate(180deg); } .site-faq-frage:hover { color: var(--site-akzent-dunkel); } .site-faq-frage:focus-visible { outline: 3px solid var(--site-akzent); outline-offset: -3px; } .site-faq-antwort { padding: 0 18px 16px; color: var(--site-text); line-height: 1.6; } .site-faq-antwort > :first-child { margin-top: 0; } .site-faq-antwort a { color: var(--site-akzent-dunkel); } .site-faq-antwort a:hover { color: var(--site-akzent); } /* Karussell: transform-basierter Wechsel (translateX) mit dezentem Ken-Burns. Gleiche Struktur/Steuerung wie site-neural.css (site-bloecke.js) — hier nur mit den --site-*-Tokens (klassische Fallback-Seiten, immer dunkel). Kein Scroll-Snap, keine sichtbare Scrollleiste mehr. */ .site-slider { position: relative; margin: 24px 0; border-radius: 18px; } .site-slider:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(31, 198, 213, 0.35); } .site-slider-fenster { overflow: hidden; border: 1px solid var(--site-rahmen); border-radius: 14px; background: #05080b; box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.7); } /* Folien liegen GESTAPELT übereinander; der Wechsel-Effekt ist pro Bild einstellbar (site-bloecke.js schaltet die Zustands-/Effekt-Klassen). */ .site-slider-spur { position: relative; } .site-slide { position: absolute; inset: 0; margin: 0; overflow: hidden; background: #05080b; opacity: 0; visibility: hidden; /* aus dem A11y-Baum + nicht klickbar */ } /* Aktive Folie liegt IN FLOW und gibt der Spur ihre Höhe. */ .site-slide.is-aktiv { position: relative; opacity: 1; visibility: visible; z-index: 2; } /* Abtretende Folie bleibt während des Übergangs sichtbar (darunter). */ .site-slide.is-vorher { opacity: 1; visibility: visible; z-index: 1; } /* Vor JS-Init / ohne JS: erste Folie zeigen, damit nichts kollabiert. */ .site-slider:not([data-slider-bereit]) .site-slide:first-child { position: relative; opacity: 1; visibility: visible; } .site-slide-img { display: block; width: 100%; height: clamp(230px, 42vw, 440px); object-fit: cover; transform: scale(1.04); transform-origin: 50% 50%; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; will-change: transform; } /* Übergangs-Effekte BEIM WECHSEL auf eine Folie. site-bloecke.js setzt die Klasse gemäß data-uebergang der Ziel-Folie. Enter-/Exit-Effekte wirken auf die Folie (.site-slide), der Ken-Burns-Schwenk unten auf das Bild (.site-slide-img). */ .site-slide--rein-vor { animation: site-slide-rein-vor 560ms cubic-bezier(0.22, 0.61, 0.36, 1); } .site-slide--rein-zurueck { animation: site-slide-rein-zurueck 560ms cubic-bezier(0.22, 0.61, 0.36, 1); } .site-slide--raus-vor { animation: site-slide-raus-vor 560ms cubic-bezier(0.22, 0.61, 0.36, 1); } .site-slide--raus-zurueck { animation: site-slide-raus-zurueck 560ms cubic-bezier(0.22, 0.61, 0.36, 1); } .site-slide--blenden { animation: site-slide-blenden 620ms ease; } .site-slide--zoom { animation: site-slide-zoom 620ms cubic-bezier(0.22, 0.61, 0.36, 1); } .site-slide--kenburns-rein { animation: site-slide-blenden 720ms ease; } @keyframes site-slide-rein-vor { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes site-slide-rein-zurueck { from { transform: translateX(-100%); } to { transform: translateX(0); } } @keyframes site-slide-raus-vor { from { transform: translateX(0); } to { transform: translateX(-100%); } } @keyframes site-slide-raus-zurueck { from { transform: translateX(0); } to { transform: translateX(100%); } } @keyframes site-slide-blenden { from { opacity: 0; } to { opacity: 1; } } @keyframes site-slide-zoom { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } /* Laufender Ken-Burns-Schwenk auf der aktiven Folie. Standard (fehlendes oder 'schieben' data-uebergang) = dezenter Schwenk wie bisher; 'kenburns' = langsamer + stärker; 'blenden'/'zoom'/'keiner' = ruhiges Bild ohne Schwenk. */ .site-slide.is-aktiv .site-slide-img { animation: site-kenburns 7s ease-out forwards; } .site-slide.is-aktiv[data-uebergang="kenburns"] .site-slide-img { animation: site-kenburns-lang 14s ease-out forwards; } .site-slide.is-aktiv[data-uebergang="blenden"] .site-slide-img, .site-slide.is-aktiv[data-uebergang="zoom"] .site-slide-img, .site-slide.is-aktiv[data-uebergang="keiner"] .site-slide-img { animation: none; transform: scale(1.04); } @keyframes site-kenburns { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.13) translate(-1.6%, -1.1%); } } @keyframes site-kenburns-lang { from { transform: scale(1.05) translate(0, 0); } to { transform: scale(1.2) translate(-2.4%, -1.6%); } } .site-slide-text { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 26px 15px 30px; font-size: 0.92rem; line-height: 1.45; color: #eaf3f6; background: linear-gradient(to top, rgba(4, 8, 12, 0.85), rgba(4, 8, 12, 0)); } .site-slider-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid var(--site-rahmen); border-radius: 999px; background: rgba(12, 16, 22, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--site-text); font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.6); transition: border-color 160ms ease, color 160ms ease, background 160ms ease, transform 160ms ease; } .site-slider-nav:hover, .site-slider-nav:focus-visible { outline: none; border-color: var(--site-akzent); color: var(--site-akzent); background: rgba(31, 198, 213, 0.16); transform: translateY(-50%) scale(1.07); } .site-slider-zurueck { left: 12px; } .site-slider-vor { right: 12px; } .site-slider-punkte { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 3; display: flex; justify-content: center; gap: 8px; pointer-events: none; } .site-slider-punkt { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: rgba(234, 243, 246, 0.42); cursor: pointer; pointer-events: auto; transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease; } .site-slider-punkt:hover { background: rgba(234, 243, 246, 0.72); } .site-slider-punkt:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(31, 198, 213, 0.4); } .site-slider-punkt[aria-current="true"] { background: var(--site-akzent); transform: scale(1.25); box-shadow: 0 0 10px -1px rgba(31, 198, 213, 0.8); } .site-slider--einzel .site-slider-nav, .site-slider--einzel .site-slider-punkte { display: none; } /* Teaser-Karten: responsives Raster verlinkter Karten. */ .site-teaser { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 24px 0; } .site-teaser-karte { display: flex; flex-direction: column; border: 1px solid var(--site-rahmen); border-radius: 12px; overflow: hidden; background: var(--site-flaeche); color: var(--site-text); text-decoration: none; /* Link-Karte ohne Unterstrich */ transition: box-shadow 160ms ease, transform 160ms ease; } a.site-teaser-karte:hover, a.site-teaser-karte:focus-visible { outline: none; box-shadow: 0 10px 20px -4px rgba(16, 24, 40, 0.18); transform: translateY(-2px); color: var(--site-text); } .site-teaser-bild { display: block; width: 100%; height: 160px; object-fit: cover; } .site-teaser-text { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; } .site-teaser-titel { margin: 0; font-family: "Montserrat", Arial, Helvetica, sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--site-text); } .site-teaser-p { margin: 0; font-size: 0.925rem; color: var(--site-text-hell); } /* --- Ruhe für Bewegungsempfindliche --------------------------------------- */ @media (prefers-reduced-motion: reduce) { .site-loginknopf, body.site-klassisch .site-knopf, body.site-klassisch .site-produkt-karte, body.site-klassisch .shop-karte, .site-slide, .site-teaser-karte, .site-slider-nav, .site-slider-punkt, .site-faq-frage::after { transition: none; } .site-loginknopf:hover, body.site-klassisch .site-knopf:hover, body.site-klassisch .site-produkt-karte:hover, body.site-klassisch .shop-karte:hover, a.site-teaser-karte:hover { transform: none; } /* Karussell: harte Wechsel, keine Bild-Bewegung — unabhängig von der pro Bild eingestellten Übergangs-Art. */ .site-slide.is-aktiv .site-slide-img, .site-slide.is-aktiv[data-uebergang="kenburns"] .site-slide-img { animation: none; transform: none; } .site-slide-img { transform: none; } .site-slide--rein-vor, .site-slide--rein-zurueck, .site-slide--raus-vor, .site-slide--raus-zurueck, .site-slide--blenden, .site-slide--zoom, .site-slide--kenburns-rein { animation: none; } /* Auf/Zu-Zustand bleibt sichtbar, nur ohne Dreh-Animation. */ .site-faq-item[open] .site-faq-frage::after { transform: rotate(180deg); } }