/* ========================================================================== Funck IT — Demo-Portal Baut auf derselben Basis wie die Demoseiten (shared/base.css) auf. Hier nur: Markenfarben von Funck IT + portal-eigene Bausteine. ========================================================================== */ :root{ --brand:#c8362e; /* Funck-IT-Rot */ --brand-2:#e8756c; --accent:#8f231d; --brand-soft:rgba(200,54,46,.12); } /* --- Logo in der Kopfzeile ---------------------------------------------- Zwei Bilddateien statt Umfärben per CSS: Das Logo ist eine Rastergrafik, und ein Filter würde die feinen Linien des Gasometers zerstören. Umgeschaltet wird über das Attribut am , also ohne JavaScript. */ .brand{text-decoration:none;color:inherit;gap:14px} .brand:hover{text-decoration:none} .brand-logo{height:46px;width:auto;display:block} .brand-logo.dunkel{display:none} html[data-theme="dark"] .brand-logo.hell{display:none} html[data-theme="dark"] .brand-logo.dunkel{display:block} .brand .brand-claim{ border-left:1px solid var(--line);padding-left:14px; font-size:.8rem;font-weight:600;color:var(--muted);white-space:nowrap; } @media (max-width:560px){ .brand-logo{height:38px} .brand .brand-claim{display:none} } /* --- Filterzeilen -------------------------------------------------------- */ .filterzeile{ display:flex;align-items:center;gap:14px;flex-wrap:wrap; justify-content:center;margin-bottom:14px; } .filterlabel{ font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);min-width:96px;text-align:right; } .filterzeile .filterbar{margin-bottom:0} @media (max-width:700px){ .filterzeile{flex-direction:column;gap:8px} .filterlabel{text-align:center;min-width:0} } /* --- Kopfzeile mit Zugangsstatus ---------------------------------------- */ .portal-status{ display:flex;align-items:center;gap:8px; background:var(--card);border:1px solid var(--line);border-radius:999px; padding:7px 14px;font-size:.85rem;font-weight:600;white-space:nowrap; } .portal-status .dot{width:8px;height:8px;border-radius:50%;background:#3fae6b;flex:0 0 auto} /* ========================================================================== Glasoptik base.css bringt Glas für .card, .panel, .form, header und footer mit. Hier ergänzt: die portal-eigenen Bausteine. Immer mit -webkit-Präfix, sonst fehlt der Effekt auf iPhone und iPad komplett. ========================================================================== */ html[data-modern="on"] .demo-card, html[data-modern="on"] .leistung, html[data-modern="on"] .portal-status, html[data-modern="on"] .theme-toggle, html[data-modern="on"] .switch button, html[data-modern="on"] .table-wrap, html[data-modern="on"] .filterbar button{ backdrop-filter:blur(24px) saturate(160%); -webkit-backdrop-filter:blur(24px) saturate(160%); } /* Feiner Lichtrand oben — lässt die Fläche wie eine Glasscheibe wirken statt wie ein halbtransparentes Rechteck. */ html[data-modern="on"] .demo-card, html[data-modern="on"] .leistung{ position:relative;overflow:hidden; box-shadow:0 10px 40px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.22); } html[data-modern="on"][data-theme="dark"] .demo-card, html[data-modern="on"][data-theme="dark"] .leistung{ box-shadow:0 12px 44px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.10); } /* Das Vorschaubild bekommt oben die Rundung der Karte zurück */ html[data-modern="on"] .demo-card .shot{ border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; } /* Beim Überfahren wird die Fläche etwas klarer — als würde Licht einfallen */ html[data-modern="on"] .demo-card:hover{ border-color:color-mix(in srgb, var(--brand) 55%, transparent); box-shadow:0 24px 60px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.34); } /* Der Abschlussbalken darf kräftig bleiben, bekommt aber Tiefe */ html[data-modern="on"] .endbar{ box-shadow:0 18px 50px color-mix(in srgb, var(--brand) 30%, transparent); } /* Kopf- und Fußzeile stärker verglasen als der Standard */ html[data-modern="on"] header.site{ backdrop-filter:blur(28px) saturate(180%); -webkit-backdrop-filter:blur(28px) saturate(180%); } /* Inhalt über die Farbwolken heben. ACHTUNG: header.site darf hier NICHT auf position:relative gesetzt werden — base.css macht ihn sticky, und relative würde das aufheben. */ html[data-modern="on"] main, html[data-modern="on"] footer.site{position:relative;z-index:1} html[data-modern="on"] header.site{z-index:60} /* --- Farbwolken im Hintergrund ------------------------------------------- Die Basis färbt alle drei in Markenfarben — bei Funck-IT-Rot wären das drei rote Flächen. Eine kühle dritte Wolke gibt Tiefe, ohne dass die Marke verwässert. */ html[data-modern="on"] .blob-3{ background:radial-gradient(circle,#4f46e5 0%,transparent 65%); } html[data-modern="on"] .blob-2{ background:radial-gradient(circle,#f59e0b 0%,transparent 65%); } /* Im hellen Modus zurückhaltender: dort liegt bereits ein Verlauf im Hintergrund, und kräftige Wolken würden die Texte stören. */ html[data-modern="on"][data-theme="light"] .blob{opacity:.16;filter:blur(110px)} html[data-modern="on"][data-theme="dark"] .blob{opacity:.34} /* Wer Bewegung nicht mag, bekommt die Wolken ruhig gestellt — die Bewegungsregel in base.css friert die Animation ein, hier zusätzlich die Deckkraft senken, damit nichts flimmert. */ @media (prefers-reduced-motion:reduce){ html[data-modern="on"] .blob{opacity:.12} } /* --- Kopfzeile ---------------------------------------------------------- position:sticky steht in base.css. Hier nur der z-index, damit sie ueber den Farbwolken liegt. NICHT position setzen — genau das war der Fehler, der das Mitscrollen verhindert hat. */ html body header.site{z-index:60} /* --- Hell/Dunkel-Umschalter ---------------------------------------------- */ .theme-toggle{ width:42px;height:42px;flex:0 0 auto; display:grid;place-items:center; border-radius:50%;cursor:pointer; border:1px solid var(--line);background:var(--card);color:var(--text); transition:border-color var(--ease),background var(--ease),transform var(--ease); } .theme-toggle:hover{border-color:var(--brand);transform:rotate(-15deg)} .theme-toggle svg{ width:19px;height:19px;fill:none;stroke:currentColor; stroke-width:2;stroke-linecap:round;stroke-linejoin:round; } /* --- Demo-Kacheln -------------------------------------------------------- */ .demo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:24px} .demo-card{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column; transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease); } .demo-card:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(0,0,0,.18);border-color:var(--brand)} /* Ohne diese Zeile filtert nichts: display:flex oben ueberschreibt das hidden-Attribut, mit dem die Kacheln aus- und eingeblendet werden. */ .demo-card[hidden]{display:none} .demo-card .shot{aspect-ratio:3/2;overflow:hidden;background:var(--brand-soft)} .demo-card .shot img{width:100%;height:100%;object-fit:cover;display:block} .demo-card .body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1} .demo-card h3{margin:0 0 6px;font-size:1.2rem} .demo-card .branche{ font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase; color:var(--accent);margin:0 0 10px; } .demo-card p{color:var(--muted);font-size:.92rem;margin:0 0 18px} .demo-card .cta{margin-top:auto;text-align:center} /* --- Detailseite --------------------------------------------------------- */ .detail-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center} .detail-hero .shot{ border-radius:var(--radius);overflow:hidden;border:1px solid var(--line); box-shadow:var(--shadow); } .detail-hero .shot img{width:100%;display:block} @media (max-width:900px){ .detail-hero{grid-template-columns:1fr} } /* Feste drei Spalten statt auto-fit: Bei sechs Kacheln ergibt auto-fit auf breiten Bildschirmen 4+2 — eine angebrochene Reihe, die unruhig wirkt. Drei Spalten geben zwei volle Reihen. */ .leistungen{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} @media (max-width:900px){ .leistungen{grid-template-columns:repeat(2,1fr)} } @media (max-width:560px){ .leistungen{grid-template-columns:1fr} } .leistung{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:22px;box-shadow:var(--shadow); } .leistung .icon{margin-bottom:12px} .leistung h3{margin:0 0 6px;font-size:1.05rem} .leistung p{margin:0;color:var(--muted);font-size:.9rem} /* --- Umschalter für die Preisdarstellung --------------------------------- */ .switch{display:flex;justify-content:center;gap:8px;margin-bottom:28px} .switch button{ padding:10px 22px;border-radius:999px;cursor:pointer;font-family:inherit; font-size:.92rem;font-weight:700; border:1px solid var(--line);background:var(--card);color:var(--text); transition:background var(--ease),color var(--ease),border-color var(--ease); } .switch button[aria-pressed="true"]{ background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff;border-color:transparent; } /* --- Signaturzeile ------------------------------------------------------- Gleiche Form wie im LMS: Copyright, Zweig der Funck GmbH, Version. */ .portal-signatur{ margin-top:26px;padding-top:18px;border-top:1px solid var(--line); text-align:center;font-size:.85rem;color:var(--muted); } .portal-signatur a{color:var(--muted);text-decoration:none} .portal-signatur a:hover{color:var(--text);text-decoration:underline} .portal-version{opacity:.55;font-size:.78rem;margin-left:8px} /* --- Hinweisleiste am Seitenfuß ------------------------------------------ */ .endbar{ background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff; border-radius:var(--radius);padding:32px 28px;text-align:center;margin-top:44px; } .endbar h2{margin:0 0 10px;color:#fff} .endbar p{margin:0 auto 22px;max-width:60ch;opacity:.92} .endbar .cta{background:#fff;color:var(--accent)} .endbar .cta:hover{background:#fff;filter:brightness(.95)} /* --- Schmale Seiten (Registrierung, Anmeldung, Admin-Login) --------------- */ .schmalseite{min-height:70vh;display:grid;place-items:center;position:relative;z-index:1} .karte-schmal{ width:100%;max-width:560px;margin:0 auto; background:var(--card);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow);padding:34px 30px; } html[data-modern="on"] .karte-schmal{ backdrop-filter:blur(24px) saturate(160%); -webkit-backdrop-filter:blur(24px) saturate(160%); box-shadow:0 14px 46px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.24); } .karte-schmal .form{background:transparent;border:0;box-shadow:none;padding:0} /* Partikel-Animation aus dem LMS — liegt hinter allem */ #net-canvas{position:fixed;inset:0;z-index:0;pointer-events:none} /* --- Meldungen ------------------------------------------------------------ */ .meldung{ padding:13px 16px;border-radius:var(--radius-sm);margin:0 0 18px; font-weight:600;font-size:.94rem;border:1px solid; } .meldung.erfolg{background:var(--brand-soft);border-color:var(--brand);color:var(--text)} .meldung.fehler{background:rgba(220,38,38,.10);border-color:var(--danger);color:var(--danger)} /* ---- Rechtstexte ----------------------------------------------------------- Impressum, Datenschutz und Nutzungsbedingungen. Schmalere Spalte als der uebrige Inhalt: laufender Text liest sich ab etwa 80 Zeichen je Zeile schlecht, und diese Seiten bestehen fast nur aus Text. */ .rechtstext{max-width:780px;margin:0 auto} .rechtstext h2{margin:36px 0 10px;font-size:1.22rem} .rechtstext h2:first-child{margin-top:0} .rechtstext h3{margin:22px 0 6px;font-size:1rem} .rechtstext p,.rechtstext li{color:var(--muted);line-height:1.7} .rechtstext p{margin:0 0 12px} .rechtstext ul{padding-left:20px;margin:0 0 14px} .rechtstext li{margin-bottom:6px} .rechtstext strong{color:var(--text)} .rechtstext address{font-style:normal;color:var(--muted);line-height:1.7;margin:0 0 12px} .rechtstext .stand{font-size:.85rem;opacity:.65;margin-top:38px} /* ---- Kopfzeile: Aktionen --------------------------------------------------- Hell/Dunkel, Restlaufzeit und der Anfrage-Knopf. */ .nav-aktionen{display:flex;align-items:center;gap:12px;flex-wrap:wrap} @media (max-width:860px){ /* Erste Zeile: Logo links, Menue-Knopf rechts. Zweite Zeile: die Aktionen, ueber die volle Breite. Dritte Zeile: die aufgeklappte Navigation (Regel in base.css). */ .brand{order:1;margin-right:auto} .menu-btn{order:2} .nav-aktionen{order:3;flex-basis:100%;justify-content:flex-start; padding-top:12px;border-top:1px solid var(--line)} .nav-aktionen .cta{margin-left:auto} /* base.css setzt nav.main auf order:3 — gleiche Zahl wie die Aktionen, dann entschiede die Reihenfolge im Markup und die Liste stuende oben. */ nav.main{order:4} }