/* ==========================================================================
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 stand hier ein Bernstein (#f59e0b) fuer `.blob-2` und
ein Indigo (#4f46e5) fuer `.blob-3` — zwei Farben, die mit keiner Marke etwas
zu tun haben. `.blob-2` sitzt rechts auf halber Hoehe, und weil ein Fleck von
550px mit blur(90px) bei 30% Deckkraft noch eine erkennbare Kante hat, war
das kein Hauch, sondern ein oranger Kreis. Rueckmeldung des User: „vor allem
der orange kreis rechts sieht mies aus“
Jetzt: beide aus der Markenfarbe gemischt, die dritte nur leicht ins Kuehle
verschoben, damit Tiefe entsteht, ohne dass eine fremde Farbe auftaucht.
Vorbild ist die Zurueckhaltung von dealpilot.immo — dort liegen die
Glasflaechen bei rgba(255,255,255,.03) bis .08, also fast unsichtbar, und
die Wirkung kommt aus Unschaerfe und duennen hellen Kanten. */
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. */
/* ⚠️ Deutlich weicher als vorher (.16/110px hell, .34 dunkel). Eine Wolke
soll man nicht als Form sehen, sondern nur als Aufhellung bemerken —
erkennt man den Kreis, ist der Effekt misslungen. */
html[data-modern="on"][data-theme="light"] .blob{opacity:.11;filter:blur(150px)}
html[data-modern="on"][data-theme="dark"] .blob{opacity:.22;filter:blur(130px)}
/* 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;
}
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);
}
/* 🔴 Der Glaseffekt aus base.css BLEIBT auf `.form` (21.08.2026).
Zwischendurch hatte ich ihn hier abgeschaltet, weil das Formular eine
zweite, hellere Flaeche bildete, die exakt an den Kanten der
Eingabefelder endete — die Felder klebten mit NULL Abstand daran.
Rueckmeldung des Users: die Flaeche gefaellt ihm, sie brauchte nur
Abstand nach innen.
Also andersherum geloest: Die Flaeche BLEIBT und bekommt dort, wo sie
gebraucht wird, ihren Innenabstand (siehe `.kp-demo-form form` in
crm.css). Hier stehen weiterhin nur Hintergrund, Rahmen, Schatten und
Innenabstand auf null — auf den Anmeldeseiten mit zwei Feldern ist das
richtig so.
⚠️ Zum Merken: `backdrop-filter` allein erzeugt schon eine sichtbare
Flaeche. In der Regelliste faellt er nicht auf, auf dem Bildschirm
ist er eine Kante. */
.karte-schmal .form{
/* 🔴 Auch auf den Anmeldeseiten die Staffelung (21.08.2026, Ansage des
Users). Bis dahin stand hier alles auf null — das Formular behielt aus
base.css nur den Glaseffekt, und der genuegt, um eine Flaeche zu sein.
Die Felder klebten also an einer Kante, die niemand gesetzt hatte.
Jetzt ist das Formular eine ABSICHTLICHE Flaeche mit Innenmass:
Karte -> 30px -> Formularflaeche -> 24px -> Eingabefeld
Auf der schmalen Karte etwas enger gestaffelt als auf der
Demoanmeldung (42/21/34) — bei 560px Kartenbreite bliebe sonst kaum
noch Feld uebrig.
⚠️ `box-shadow:none` bleibt: Der Schatten aus base.css gehoert zu
einer freistehenden Karte, nicht zu einer Flaeche INNERHALB einer. */
background:color-mix(in srgb, var(--line) 14%, transparent);
border:1px solid var(--line);border-radius:16px;
box-shadow:none;padding:24px;
}
/* Reiterleiste des gemeinsamen Anmeldebildschirms (Kunde / Mitarbeiter).
⚠️ Bewusst NICHT die `.kp-reiter` aus crm.css: Die sind auf `body.kp`
gescholten, und die schmalen Seiten laufen ohne diese Klasse.
Es sind echte Links, keine Schalter — umgeschaltet wird serverseitig. */
.anmelde-reiter{
display:flex;gap:4px;margin:0 0 22px;
border-bottom:1px solid var(--line);
}
.anmelde-reiter a{
padding:9px 14px;margin-bottom:-1px;
border-bottom:2px solid transparent;
color:var(--muted);text-decoration:none;font-size:.94rem;font-weight:500;
}
.anmelde-reiter a:hover{color:var(--text)}
.anmelde-reiter a.aktiv{
color:var(--text);border-bottom-color:var(--brand);font-weight:600;
}
/* Tastaturbedienung sichtbar halten — der Rahmen darf nicht unter der
Trennlinie verschwinden. */
.anmelde-reiter a:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
/* Partikel-Animation aus dem LMS — liegt hinter allem.
Die Fusszeile braucht ihre eigene Ebene: Sie steht sonst als unpositionierter
Block UNTER dem fest positionierten Canvas, und die Punkte laufen ueber
Impressum und Datenschutz. Bei data-modern="on" macht das weiter unten schon
eine eigene Regel — die gilt hier aber nicht, die Glasoptik ist aus. */
#net-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;
/* 🔴 width/height sind PFLICHT, nicht Beiwerk. Die width-/height-Attribute
eines