/* ========================================================================== 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} /* --- KI-Transparenzhinweis ---------------------------------------------- Bewusst leise: eine Zeile unter der Kopfzeile, kein Farbband wie .notice. Er soll dauerhaft mitlaufen, ohne den Blick vom Inhalt zu ziehen. */ .ki-hinweis{ border-bottom:1px solid var(--line); background:var(--brand-soft); font-size:.8rem;color:var(--muted); } .ki-hinweis .container{padding-top:8px;padding-bottom:8px} @media (max-width:640px){ .ki-hinweis{font-size:.75rem} } /* ========================================================================== 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. */ /* 🔴 Bis zum 21.08.2026 ein Bernstein (#f59e0b) rechts und ein Indigo (#4f46e5) unten — zwei Farben ohne Bezug zur Marke. `.blob-2` sitzt rechts auf halber Hoehe und war als oranger Kreis erkennbar statt als Hauch. Rueckmeldung des User: „vor allem der orange kreis rechts sieht mies aus“ Dieselbe Korrektur wie im Kundenportal am selben Tag. */ html[data-modern="on"] .blob-3{ background:radial-gradient(circle, color-mix(in srgb, var(--brand) 30%, #5b6ee1) 0%, transparent 65%); } html[data-modern="on"] .blob-2{ background:radial-gradient(circle, color-mix(in srgb, var(--brand) 70%, #ffffff) 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. 08.08.2026 deutlich abgeschwächt (Ansage des Users: „da ist es mir noch zu dominant"). Vorher dunkel .34 / hell .16 bei blur(90px) — die Bernsteinwolke unten rechts zog den Blick von der Anmeldekarte weg. Statt Farben zu tauschen nur Deckkraft runter und Unschärfe hoch: Der Entwurf bleibt, er wird nur leiser. Wolkenfarben stehen oben. */ html[data-modern="on"][data-theme="light"] .blob{opacity:.08;filter:blur(160px)} html[data-modern="on"][data-theme="dark"] .blob{opacity:.15;filter:blur(140px)} /* 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; } /* „Empfohlen"-Kennzeichnung. Bewusst IM Textbereich der Karte und nicht als Overlay ueber dem Vorschaubild: ein zusaetzlicher Knoten um ein hat am 29.07.2026 mehrere Live-Seiten zerschossen (siehe KI-Kennzeichnung). Hier sitzt es in einem Absatz, den wir selbst kontrollieren — kein Eingriff ins Bildgeruest. */ .demo-card .branche{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .badge-empf{ display:inline-block;padding:3px 9px;border-radius:999px; background:var(--brand-soft);color:var(--accent); border:1px solid color-mix(in srgb, var(--brand) 45%, transparent); font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase; line-height:1.5;white-space:nowrap; } .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; } /* ⚠️ Die Registrierseite bekommt mehr Breite (21.08.2026). 560px sind fuer zwei Eingabefelder richtig bemessen; das Anmeldeformular hat Name, Adresse, zwei Interessenfelder, zwei Auswahllisten und zwei Haken — darin wird es zu einer schmalen Schlucht. Rueckmeldung des User: „die karte ist auch dort zu schmal“ Die schmale Karte bleibt fuer Anmeldung und Bestaetigung. */ /* 1240px wie im Kundenportal — der nutzbare Bereich ist das Ziel, nicht der Rand. */ /* 21px seitlich — die Glasflaeche soll nicht mit der Karte verschmelzen, aber auch nicht in der Mitte schwimmen. Gleiche Wahl wie im Kundenportal. */ .karte-breit{max-width:1240px;padding:38px 42px} @media (max-width:560px){ .karte-breit{padding:26px 20px} } 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); } /* 🔴 Auch das Glas abschalten: base.css legt es auf .form, und ein backdrop-filter allein erzeugt schon eine sichtbare Flaeche. Sonst ist das Formular eine zweite Flaeche, die exakt an den Feldkanten endet. Gleiche Korrektur wie im Kundenportal am selben Tag. */ .karte-schmal .form{ /* Staffelung auch auf den Anmeldeseiten: Karte -> 30px -> Formularflaeche -> 24px -> Eingabefeld. Vorher stand alles auf null, und das Formular war durch den Glaseffekt aus base.css trotzdem eine Flaeche — die Felder klebten an einer Kante, die niemand gesetzt hat. Gleiche Korrektur wie im Kundenportal. */ background:color-mix(in srgb, var(--line) 14%, transparent); border:1px solid var(--line);border-radius:16px; box-shadow:none;padding:24px; } /* 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} } /* ---- Registrierung zweispaltig (21.08.2026) -------------------------------- Dieselbe Aufteilung wie auf demo.servuno.de: links wofuer, rechts das Formular auf einer eigenen Flaeche. Eine Spalte ueber die ganze Karte ergab 834px breite Eingabefelder — dafuer ist kein Feld gemacht. ⚠️ Die Flaeche hinter dem Formular ist der eigentliche Punkt, nicht die Breite: Ohne sie enden die Felder als harte Rechtecke genau auf der Spaltengrenze, und das wirkt angeschoben, auch wenn der Abstand stimmt. Rueckmeldung des User zur selben Sache am servuno-Formular. */ .dp-raster{display:grid;grid-template-columns:1fr;gap:26px} .dp-text .section-label{display:inline-block} .dp-liste{margin:16px 0 0;padding-left:20px;line-height:1.75} .dp-liste li{margin-bottom:4px} @media (min-width:900px){ .dp-raster{grid-template-columns:minmax(0,1fr) minmax(480px,1.25fr);gap:40px;align-items:start} /* 🔴 Die Flaeche ist das FORMULAR, nicht die Spalte. base.css legt den Glaseffekt auf `.form`; liegt zusaetzlich eine Flaeche auf der Spalte, sind es zwei — und die Felder kleben an der inneren. ⚠️ `.karte-schmal` muss in den Selektor: `.karte-schmal .form` (zwei Klassen) schlaegt sonst `.dp-form form`, und das Innenmass bleibt 0. */ /* Zwei Flaechen, 21px dazwischen — wie im Kundenportal: Karte -> 42px -> aeussere Flaeche -> 21px -> Glas -> 34px -> Feld */ .dp-form{ background:color-mix(in srgb, var(--line) 14%, transparent); border:1px solid var(--line);border-radius:20px; padding:21px; } .karte-schmal .dp-form form{ background:color-mix(in srgb, var(--line) 22%, transparent); border:1px solid var(--line);border-radius:16px; padding:32px 34px 34px; } }