/* ═══════════════════════════════════════════════════════════════════════ JOBWOCHE — Öffentliche Firmenseiten (Block A.6, 19.08.2026) Reines CSS, kein Tailwind, kein Build-Schritt. Die Design-Tokens sind aus dem :root-Block von public/index.html KOPIERT, nicht verschoben — index.html bleibt unverändert. Wer dort Farben ändert, muss sie hier nachziehen. ═══════════════════════════════════════════════════════════════════════ */ :root { /* ── Brand ─── */ /* v3.38.3: Markenfarbe auf das Tuerkis des neuen JOBWOCHE-Logos umgestellt (vorher Smaragdgruen #059669). Gegenstueck zu den Werten color_primary/color_dark in design_settings, die das SPA steuern - diese Datei hier versorgt die Unterseiten. */ --p: #00A99D; --p-dark: #00847B; --p-hover: #00655E; --p-light: #d3f2ef; --p-xlight: #eafaf8; --amber: #f59e0b; --amber-bg: #fffbeb; --amber-dark: #d97706; /* ── Neutrals ── */ --bg: #f1f5f4; --bg2: #e8efed; --surface: #ffffff; --border: #e2e8f0; --border2: #d1d9d6; /* ── Text ── */ --tx: #111827; --tx2: #374151; --tx3: #6b7280; --tx4: #9ca3af; /* ── Semantic ── */ --danger: #ef4444; --success: #10b981; /* ── Typography ── */ --font-head: 'Outfit', 'Plus Jakarta Sans', sans-serif; --font-body: 'DM Sans', 'Inter', sans-serif; /* ── Layout ── */ --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-xl: 22px; /* ── Shadows ── */ --shadow-xs: 0 1px 2px rgba(0,0,0,.05); --shadow-sm: 0 2px 8px rgba(0,0,0,.06); --shadow: 0 4px 20px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04); --shadow-md: 0 8px 30px rgba(0,0,0,.09), 0 2px 8px rgba(0,0,0,.05); --dunkel: linear-gradient(135deg,#0a1628,#1e3a5f); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--tx); font-family: var(--font-body); font-size: 15px; line-height: 1.6; } img { max-width: 100%; height: auto; } a { color: var(--p-dark); } a:hover { color: var(--p-hover); } .huelle { max-width: 1100px; margin: 0 auto; padding: 0 20px; } /* ── Kopf ───────────────────────────────────────────────────────────── Dieselbe Leiste wie die Startseite (21.08.2026). Die Blade-Seiten hatten bis heute einen eigenen, hellen Kopf mit sechs fest verdrahteten Links, waehrend die Startseite eine dunkle Leiste mit Aufklappmenues aus `design_settings.nav_config` zeigt. Wer von der Startseite auf eine Firmenseite klickte, landete in einem anderen Auftritt. Die Regeln unten sind aus `public/index.html` uebernommen (dort: `.topnav` / `.topnav-inner`) und an zwei Stellen angepasst: * `position: fixed` -> `sticky`. Die SPA gleicht den festen Kopf mit 62px Innenabstand am Inhalt aus; sticky braucht das nicht und kann nichts ueberdecken. * Die Innenbreite folgt der Seite (`huelle` / `huelle-weit`) statt fester 1200px — sonst stuende der Kopf schmaler als der Inhalt der Firmenseite. Die Klassennamen sind bewusst DIESELBEN wie in der SPA (`tn-*`): so ist das hier eine Kopie und keine zweite Fassung, die auseinanderlaeuft. Die Farben kommen wie dort aus `nav_config` — ueber die Variablen `--nav-bg`, `--nav-text`, `--nav-hover-bg`, `--nav-active-bg`, `--nav-active-text`, `--nav-font`, gesetzt im `` des Layouts. ───────────────────────────────────────────────────────────────────── */ .kopf { position: sticky; top: 0; height: 62px; /* v3.34.1: Hintergrund kommt aus dem Admin-Nav-Manager (--nav-bg). Fallback ist solides Dunkelblau wenn die CSS-Variable nicht gesetzt ist oder der gespeicherte Wert leer/ungueltig ist. Kein Glassmorphism mehr (funktionierte auf iPad Safari nicht zuverlaessig). */ background: var(--nav-bg, #0a1628); display: flex; align-items: center; padding: 0; z-index: 300; border-bottom: 1px solid rgba(255,255,255,.1); box-shadow: 0 2px 12px rgba(0,0,0,.35); font-family: var(--nav-font, var(--font-body)); } /* Innenbreite: `.huelle` bringt sie schon mit (1100px, auf weiten Seiten 1520px ueber `huelle-weit`). Hier nur die Anordnung — ein eigenes max-width wuerde den Kopf auf der Firmenseite schmaler stehen lassen als den Inhalt darunter. */ .kopf .huelle { display:flex;align-items:center;width:100%;gap:0; } /* Nur diese Seiten haben eine dunkle Leiste — die Schrift darin muss hell sein, unabhaengig von den Textfarben des Inhalts. */ .kopf a { text-decoration: none; } /* v3.48: Hamburger bis 1199px (Tablets/iPads), sonst lief die horizontale Desktop-Navi bei iPad-Breiten über und schnitt rechts ab (Menü + CTA). Ab 1200px (= Container-Breite) passt die volle Navi. 22.08.2026 aufgehoben: Die Regel stammt aus dem Kopf der Startseite, wo unter 1200px der Hamburger uebernimmt. Diese Datei laedt aber nur auf den Blade-Seiten, und dort gibt es keinen Hamburger — die Navigation verschwand unter 1200px ersatzlos, auf jedem Tablet und jedem Handy. Stattdessen greift jetzt schon ab 1199px die rollende Leiste weiter unten ("Kopf auf kleinen Schirmen"), die genau fuer diesen Fall gebaut wurde. */ .tn-logo { display:flex;align-items:center;gap:10px;cursor:pointer;margin-right:20px;flex-shrink:0; } /* Wortmarke als Bild (20.08.2026). Die Datei ist die helle Variante, weil das Grau von "WOCHE" auf dem dunklen Kopf sonst fast verschwindet. Feste Hoehe, Breite frei — das Seitenverhaeltnis 447:120 bleibt so erhalten und der Kopf springt beim Laden nicht (width/height im img). */ .tn-logo picture { display:flex; } /* max-width/object-fit gelten auch fuer eine im Nav-Manager hochgeladene Datei mit beliebigem Seitenverhaeltnis — sie darf den Kopf nicht sprengen. */ .tn-logo-bild { height:36px;width:auto;max-width:150px;object-fit:contain;display:block; } @media(max-width:479px) { .tn-logo-bild { height:30px; } .tn-logo { margin-right:10px; } } .tn-logo-mark { width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--p),var(--p-dark));display:flex;align-items:center;justify-content:center;font-size:17px;box-shadow:0 4px 14px rgba(5,150,105,.35); } .tn-logo-text { font-family:var(--font-head);font-size:15.5px;font-weight:800;color:#fff;letter-spacing:-.3px;line-height:1.1; } .tn-logo-sub { font-size:9px;color:rgba(255,255,255,.28);letter-spacing:1.2px;text-transform:uppercase;font-family:var(--font-body);font-weight:500;margin-top:1px; } .tn-nav { display:flex;align-items:center;gap:2px;flex:1; } .tn-item { display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:9px;cursor:pointer; font-family:var(--nav-font,var(--font-body));font-size:13.5px;font-weight:700; color:var(--nav-text,rgba(255,255,255,.95));transition:all .12s; white-space:nowrap;position:relative;border:none;background:none; user-select:none;letter-spacing:.01em; } .tn-item:hover { background:var(--nav-hover-bg,rgba(255,255,255,.14)); color:#fff; } .tn-item.active { color:var(--nav-active-text,#fff);background:var(--nav-active-bg,rgba(5,150,105,.35));box-shadow:inset 0 0 0 1px rgba(5,150,105,.4); } .tn-dd-wrap { position:relative; } .tn-dd { position:absolute;top:100%;left:0; min-width:200px;z-index:700; padding-top:8px; /* unsichtbare Hover-Bruecke statt Luecke */ opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .12s ease, transform .12s ease, visibility .12s; pointer-events:none; } .tn-dd::before { content:'';position:absolute;inset:8px 0 0 0; background:rgba(255,255,255,.98);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border:1px solid rgba(0,0,0,.08);border-radius:14px; box-shadow:0 16px 48px rgba(0,0,0,.18); z-index:-1; } .tn-dd > * { position:relative; } .tn-dd { padding-left:7px;padding-right:7px;padding-bottom:7px; } .tn-dd-wrap:hover .tn-dd, .tn-dd-wrap.dd-open .tn-dd { opacity:1;visibility:visible;transform:translateY(0); pointer-events:auto; } /* click outside closes user dd */ .tn-dd-item { display:flex;align-items:center;gap:11px;padding:9px 13px;border-radius:9px;cursor:pointer;font-size:13.5px;font-family:var(--font-body);font-weight:500;color:var(--tx2);transition:background .1s;border:none;background:none;width:100%;text-align:left; } .tn-dd-item:hover { background:var(--bg);color:var(--tx); } .tn-dd-divider { height:1px;background:var(--border);margin:5px 7px; } .tn-actions { display:flex;align-items:center;gap:5px;margin-left:auto; } .tn-sep { width:1px;height:22px;background:rgba(255,255,255,.1);margin:0 6px;flex-shrink:0; } .tn-icon-btn { width:36px;height:36px;border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.85);transition:all .12s;position:relative;flex-shrink:0; } .tn-icon-btn:hover { background:rgba(255,255,255,.2);color:#fff; } .tn-badge { position:absolute;top:-3px;right:-3px;background:var(--danger);color:#fff;border-radius:50%;font-size:9px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;font-weight:700;border:2px solid #0a1628; } .tn-avatar { width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--p),var(--p-dark));display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:13px;font-weight:800;color:#fff;cursor:pointer;flex-shrink:0;border:none;box-shadow:0 2px 8px rgba(5,150,105,.3);transition:all .12s; } .tn-avatar:hover { transform:translateY(-1px); } /* 22.08.2026: Hier stand ein @media(min-width:768px) mit zwei Regeln fuer .sidebar und .topbar — Elemente, die es nur in der Startseite gibt und in keiner Blade-Ansicht. Der Block wurde beim Uebernehmen aus index.html mitkopiert und nie geschlossen: die fehlende Klammer steckte den GESAMTEN Rest dieser Datei in die Bedingung "ab 768px". Unter 768px fielen damit alle Regeln ab dieser Zeile aus, und die spaeteren Media-Bloecke fuer kleine Schirme (Kopf, Tabellen, Karten) lagen verschachtelt darin und kamen nie zum Zug — sichtbar daran, dass die Kopfleiste erst ab 768px umbrach. Beide Regeln waren hier ohnehin wirkungslos; der Block ist deshalb ganz entfernt statt nur geschlossen. */ /* ── Brotkrumen ───────────────────────────────────────────────────────── */ .krumen { font-size: 13px; color: var(--tx3); padding: 16px 0 4px; } .krumen a { color: var(--tx3); text-decoration: none; } .krumen a:hover { color: var(--p-dark); text-decoration: underline; } /* ── Überschriften ────────────────────────────────────────────────────── */ h1, h2, h3 { font-family: var(--font-head); color: var(--tx); line-height: 1.25; } h1 { font-size: 30px; font-weight: 800; margin: 8px 0 6px; } h2 { font-size: 20px; font-weight: 800; margin: 0 0 14px; } h3 { font-size: 15px; font-weight: 700; margin: 0 0 10px; } .unterzeile { color: var(--tx3); font-size: 15px; margin: 0 0 22px; } /* ── Karten ───────────────────────────────────────────────────────────── */ .karte { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; margin-bottom: 18px; box-shadow: var(--shadow-xs); } /* ── Übersicht: Firmenraster ──────────────────────────────────────────── */ .raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin: 20px 0 30px; } .firmenkachel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 10px; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; } .firmenkachel:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--p-light); } .kachel-logo { width: 62px; height: 62px; border-radius: var(--radius); background: var(--bg2); display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--border); flex-shrink: 0; } .kachel-logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .kachel-logo .initialen { font-family: var(--font-head); font-weight: 800; font-size: 20px; color: var(--p-dark); } .kachel-name { font-family: var(--font-head); font-weight: 800; font-size: 16px; color: var(--tx); } .kachel-zeile { font-size: 13px; color: var(--tx3); display: flex; gap: 6px; align-items: center; } .merkmal { display: inline-block; background: var(--p-xlight); color: var(--p-dark); border: 1px solid var(--p-light); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; } /* ── Filter ───────────────────────────────────────────────────────────── */ .filter { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 6px; } .feld { display: flex; flex-direction: column; gap: 5px; } .feld label { font-size: 12px; font-weight: 700; color: var(--tx2); } .feld input, .feld select { font-family: var(--font-body); font-size: 14px; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--tx); min-width: 190px; } .feld input:focus, .feld select:focus { outline: 2px solid var(--p-light); border-color: var(--p); } .knopf { font-family: var(--font-body); font-weight: 700; font-size: 14px; padding: 10px 18px; border-radius: var(--radius-sm); border: 1px solid var(--p-dark); background: var(--p); color: #fff; cursor: pointer; text-decoration: none; display: inline-block; } .knopf:hover { background: var(--p-hover); color: #fff; } .knopf-still { background: var(--surface); color: var(--tx2); border-color: var(--border2); } .knopf-still:hover { background: var(--bg2); color: var(--tx); } /* ── Detailseite: Hero ────────────────────────────────────────────────── */ .hero { border-radius: var(--radius-xl); overflow: hidden; margin: 14px 0 22px; background: var(--dunkel); color: #fff; position: relative; } .hero-bild { width: 100%; height: 260px; object-fit: cover; display: block; opacity: .55; } .hero-inhalt { padding: 24px; display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; } .hero.mit-bild .hero-inhalt { position: absolute; inset: auto 0 0 0; background: linear-gradient(to top, rgba(6,20,35,.94), rgba(6,20,35,.35)); } .hero-logo { width: 88px; height: 88px; border-radius: var(--radius); background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; } .hero-logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .hero-logo .initialen { font-family: var(--font-head); font-weight: 900; font-size: 30px; color: var(--p-dark); } .hero h1 { color: #fff; margin: 0 0 6px; font-size: 28px; } .hero .headline { color: rgba(255,255,255,.9); font-size: 15px; margin: 0 0 8px; } .hero .meta { color: rgba(255,255,255,.72); font-size: 13px; display: flex; gap: 14px; flex-wrap: wrap; } /* ── Eckdaten ─────────────────────────────────────────────────────────── */ .eckdaten { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; } .eckdaten dt { font-size: 12px; font-weight: 700; color: var(--tx3); text-transform: uppercase; letter-spacing: .4px; } .eckdaten dd { margin: 3px 0 0; font-size: 14px; color: var(--tx); word-break: break-word; } /* ── Fließtext ────────────────────────────────────────────────────────── */ .fliesstext { font-size: 15px; line-height: 1.72; color: var(--tx2); white-space: pre-wrap; } /* ── Video ────────────────────────────────────────────────────────────── */ .video-rahmen { position: relative; padding-top: 56.25%; border-radius: var(--radius); overflow: hidden; background: #000; } .video-rahmen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ── Galerie ──────────────────────────────────────────────────────────── */ .galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .galerie figure { margin: 0; } .galerie img { width: 100%; height: 150px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); display: block; } .galerie figcaption { font-size: 12px; color: var(--tx3); margin-top: 5px; } /* ── Stellenliste ─────────────────────────────────────────────────────── */ .stelle { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--border); } .stelle:last-child { border-bottom: 0; } .stelle-titel { font-weight: 700; font-size: 15px; color: var(--tx); margin: 0 0 3px; } .stelle-meta { font-size: 13px; color: var(--tx3); display: flex; gap: 12px; flex-wrap: wrap; } /* ── Downloads ────────────────────────────────────────────────────────── */ .download { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; text-decoration: none; color: inherit; background: var(--bg2); } .download:hover { border-color: var(--p); background: var(--p-xlight); } .download .art { font-weight: 800; font-size: 11px; color: var(--danger); } .download .groesse { margin-left: auto; font-size: 12px; color: var(--tx3); } /* ── Ansprechpartner ──────────────────────────────────────────────────── */ .person { display: flex; gap: 16px; align-items: center; } .person img { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); } /* ── Messeauftritte ───────────────────────────────────────────────────── */ .messe { display: flex; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--border); } .messe:last-child { border-bottom: 0; } .messe-stand { margin-left: auto; font-size: 13px; color: var(--tx3); white-space: nowrap; } /* ── Blättern ─────────────────────────────────────────────────────────── */ .blaettern { display: flex; gap: 7px; justify-content: center; align-items: center; margin: 26px 0; flex-wrap: wrap; } .blaettern a, .blaettern span { min-width: 38px; text-align: center; padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--tx2); text-decoration: none; font-size: 14px; } .blaettern a:hover { border-color: var(--p); color: var(--p-dark); } .blaettern .aktiv { background: var(--p); border-color: var(--p-dark); color: #fff; font-weight: 700; } .blaettern .aus { color: var(--tx4); } /* ── Leerzustand ──────────────────────────────────────────────────────── */ .leer { text-align: center; padding: 50px 20px; color: var(--tx3); } .leer .zeichen { font-size: 46px; margin-bottom: 10px; } /* ── Fuß ──────────────────────────────────────────────────────────────── */ .fuss { margin-top: 44px; padding: 26px 0; border-top: 1px solid var(--border); background: var(--surface); color: var(--tx3); font-size: 13px; } .fuss .huelle { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; } .fuss a { color: var(--tx3); text-decoration: none; } .fuss a:hover { color: var(--p-dark); } /* ── Hinweisstreifen ──────────────────────────────────────────────────── */ .hinweis { background: var(--amber-bg); border: 1px solid var(--amber); color: var(--amber-dark); border-radius: var(--radius); padding: 11px 15px; font-size: 13px; font-weight: 600; margin: 14px 0; } /* ── Kleine Bildschirme ───────────────────────────────────────────────── */ @media (max-width: 700px) { h1 { font-size: 24px; } /* Kleinere Marke, damit die Navigation nicht in eine zweite Zeile rutscht. Klasse seit 21.08.2026 `tn-logo-bild` — dieselbe wie in der SPA. */ .tn-logo-bild { height: 30px; } .hero-bild { height: 180px; } .hero.mit-bild .hero-inhalt { position: static; background: var(--dunkel); } .hero-inhalt { padding: 18px; } .feld input, .feld select { min-width: 0; width: 100%; } .feld { width: 100%; } .filter { flex-direction: column; align-items: stretch; } .karte { padding: 17px; } } /* ── Druck ────────────────────────────────────────────────────────────── */ @media print { .kopf, .fuss, .blaettern, .filter { display: none; } .karte { break-inside: avoid; box-shadow: none; } } /* ═══════════════════════════════════════════════════════════════════════ Video- und Audiogespräch (Block C.4, 19.08.2026) ═══════════════════════════════════════════════════════════════════════ */ .rtc-check { text-align: left; } .rtc-check h3 { margin-top: 0; } .rtc-geraete { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; } @media (max-width: 700px) { .rtc-geraete { grid-template-columns: 1fr; } } .rtc-feld { display: flex; flex-direction: column; gap: 5px; } .rtc-feld label { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.8); } .rtc-feld select { font-family: var(--font-body); font-size: 14px; padding: 9px 11px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: #fff; width: 100%; } .rtc-feld select option { color: #111; } .rtc-vorschau-rahmen { position: relative; background: #000; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/9; margin: 12px 0; } .rtc-vorschau-rahmen video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); } .rtc-pegel-spur { height: 9px; background: rgba(255,255,255,.18); border-radius: 5px; overflow: hidden; margin: 8px 0 4px; } .rtc-pegel-balken { height: 100%; width: 0; background: var(--tx4); transition: width .1s linear; } .rtc-pegel-balken.aktiv { background: var(--success); } .rtc-buehne { position: relative; background: #000; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/9; } .rtc-buehne video.fern { width: 100%; height: 100%; object-fit: cover; } .rtc-buehne video.selbst { position: absolute; right: 14px; bottom: 14px; width: 27%; max-width: 200px; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-sm); border: 2px solid rgba(255,255,255,.55); transform: scaleX(-1); background: #111; } /* Nur-Ton: Videoflächen verschwinden, der Rest bleibt bedienbar. */ body.rtc-ohne-video .rtc-buehne, body.rtc-ohne-video .rtc-vorschau-rahmen { display: none; } .rtc-leiste { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 14px; } .rtc-knopf { font-family: var(--font-body); font-weight: 700; font-size: 14px; padding: 11px 18px; border-radius: 999px; cursor: pointer; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.14); color: #fff; } .rtc-knopf:hover { background: rgba(255,255,255,.24); } .rtc-knopf.aus { background: var(--amber); border-color: var(--amber-dark); color: #111; } .rtc-knopf.auflegen { background: var(--danger); border-color: var(--danger); } .rtc-knopf:disabled { opacity: .45; cursor: not-allowed; } .rtc-status { font-size: 13px; margin: 10px 0 0; color: rgba(255,255,255,.75); } .rtc-status.gut { color: #6ee7b7; font-weight: 700; } .rtc-status.warte { color: #fcd34d; } .rtc-status.schlecht{ color: #fca5a5; font-weight: 700; } .rtc-meldung { border-radius: var(--radius); padding: 11px 14px; font-size: 13px; margin: 12px 0; background: rgba(255,255,255,.12); color: #fff; } .rtc-meldung.gut { background: rgba(16,185,129,.22); } .rtc-meldung.schlecht { background: rgba(239,68,68,.25); } /* ── Live-Schaltung, Chat und Dateien (20.08.2026) ────────────────────── */ .rtc-praesenz { font-size: 14px; font-weight: 600; margin: 4px 0 12px; padding: 9px 13px; border-radius: var(--radius-sm); background: rgba(255,255,255,.07); color: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.12); } .rtc-praesenz.warte { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.4); color: #fcd9a0; } .rtc-praesenz.gut { background: rgba(5,150,105,.18); border-color: rgba(5,150,105,.5); color: #86efac; } .rtc-chat { margin-top: 18px; } .rtc-chat h3 { font-family: var(--font-head); font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: rgba(255,255,255,.55); margin: 0 0 8px; } .rtc-chatliste { height: 190px; overflow-y: auto; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 9px; } .rtc-chat-zeile { max-width: 82%; } .rtc-chat-zeile.eigen { align-self: flex-end; text-align: right; } .rtc-chat-zeile .wer { font-size: 11px; color: rgba(255,255,255,.5); display: block; margin-bottom: 2px; } .rtc-chat-zeile p { margin: 0; font-size: 14.5px; line-height: 1.45; color: #fff; background: rgba(255,255,255,.1); padding: 8px 12px; border-radius: 13px; word-break: break-word; white-space: pre-wrap; } .rtc-chat-zeile.eigen p { background: var(--p); } .rtc-chat-zeile.system { align-self: center; max-width: 100%; text-align: center; font-size: 12.5px; color: rgba(255,255,255,.5); } .rtc-chatform { display: flex; gap: 8px; margin-top: 10px; } .rtc-chatfeld { flex: 1; min-width: 0; font-family: var(--font-body); font-size: 14.5px; color: #fff; padding: 10px 13px; border-radius: var(--radius-sm); background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); } .rtc-chatfeld::placeholder { color: rgba(255,255,255,.42); } .rtc-chatfeld:focus { outline: none; border-color: var(--p); background: rgba(255,255,255,.14); } .rtc-chatfeld:disabled { opacity: .5; } .rtc-dateizeile { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-top: 11px; } .rtc-dateizeile label.rtc-knopf { cursor: pointer; } .rtc-dateihinweis { font-size: 12.5px; color: rgba(255,255,255,.5); } .rtc-dateiliste { margin-top: 9px; display: flex; flex-direction: column; gap: 6px; } .rtc-datei { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13.5px; color: rgba(255,255,255,.85); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-sm); padding: 8px 12px; } .rtc-datei .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rtc-datei .stand { color: rgba(255,255,255,.6); white-space: nowrap; font-size: 12.5px; } .rtc-datei-link { color: #86efac; font-weight: 700; text-decoration: underline; } /* ═══════════════════════════════════════════════════════════════════════ Block D — Kontakt und Bewerbung (20.08.2026) Mobile zuerst: der überwiegende Teil der Bewerbungen kommt vom Handy. Eingaben stehen deshalb untereinander und werden erst ab 640 px nebeneinander gestellt. ═══════════════════════════════════════════════════════════════════════ */ /* Honeypot. Bewusst kein display:none — manche Bots erkennen das und lassen das Feld dann aus. Stattdessen aus dem Sichtfeld geschoben. */ .honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .bewerbung-form, .kontakt-form { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; } .bewerbung-form .feld input, .kontakt-form .feld input, .bewerbung-form textarea, .kontakt-form textarea { width: 100%; box-sizing: border-box; } .bewerbung-form textarea, .kontakt-form textarea, .karte textarea { font-family: var(--font-body); font-size: 14px; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--tx); resize: vertical; } .bewerbung-form textarea:focus, .kontakt-form textarea:focus, .karte textarea:focus { outline: 2px solid var(--p-light); border-color: var(--p); } /* Das Dateifeld muss auf dem Handy gut treffbar sein. */ .bewerbung-form input[type="file"] { font-size: 14px; padding: 10px; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: var(--bg2); width: 100%; box-sizing: border-box; } .feldhinweis { font-size: 12px; color: var(--tx3); line-height: 1.4; } .pflicht { color: #b91c1c; } .einwilligung label { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.5; color: var(--tx2); cursor: pointer; } .einwilligung input[type="checkbox"] { margin-top: 2px; flex: 0 0 auto; width: 17px; height: 17px; } .feldpaar { display: flex; flex-direction: column; gap: 14px; } @media (min-width: 640px) { .feldpaar { flex-direction: row; } .feldpaar .feld { flex: 1; } } .meldung { padding: 11px 13px; border-radius: var(--radius-sm); font-size: 13.5px; line-height: 1.5; margin: 12px 0; background: var(--bg2); color: var(--tx2); border: 1px solid var(--border); } .meldung.gut { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; } .meldung.schlecht{ background: #fef2f2; border-color: #fecaca; color: #991b1b; } .initiativ { font-size: 13px; color: var(--tx3); text-align: center; margin: 22px 0 30px; } /* ── Posteingang ───────────────────────────────────────────────────── */ .filterleiste { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 6px; } .filterleiste a { font-size: 13px; font-weight: 600; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--border); color: var(--tx2); text-decoration: none; background: var(--surface); } .filterleiste a.aktiv { background: var(--p); border-color: var(--p); color: #fff; } .eingang { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding: 13px 0; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; } .eingang:last-of-type { border-bottom: none; } .eingang:hover { background: var(--bg2); } .eingang.ungelesen .eingang-haupt strong::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--p); margin-right: 7px; vertical-align: middle; } .eingang-art { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; padding: 3px 8px; border-radius: 5px; flex: 0 0 auto; } .eingang-art.bewerbung { background: #eff6ff; color: #1d4ed8; } .eingang-art.nachricht { background: #fef3c7; color: #92400e; } .eingang-haupt { flex: 1 1 220px; display: flex; flex-direction: column; gap: 3px; } .eingang-zeile { font-size: 13px; color: var(--tx3); } .eingang-rand { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--tx3); } .stand { font-weight: 700; padding: 2px 8px; border-radius: 5px; background: var(--bg2); } .stand.s-new { background: #dbeafe; color: #1e40af; } .stand.s-shortlisted { background: #fef3c7; color: #92400e; } .stand.s-hired { background: #dcfce7; color: #166534; } .stand.s-rejected, .stand.s-spam { background: #f1f5f9; color: #475569; } .anhang { color: var(--tx3); } .dateiliste { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; } .dateiliste li { font-size: 13px; color: var(--tx2); } .dateiliste .art { font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 4px; background: var(--bg2); color: var(--tx3); margin-right: 6px; } .dateiliste .groesse { color: var(--tx3); } /* ═══════════════════════════════════════════════════════════════════════ Bewerbertag — Standfenster und Besucherfenster (Block E.5/E.6) Praefix bt-, weil .messe, .messe-stand und .stand in dieser Datei schon von den Firmenseiten aus Block A belegt sind. Die rtc-*-Klassen weiter oben werden mitbenutzt: Gerätecheck, Pegel, Bühne und Knopfleiste sind in beiden Blöcken dasselbe. ═══════════════════════════════════════════════════════════════════════ */ .bt-buehne { background: var(--dunkel); color: #fff; border-radius: var(--radius-lg); padding: 26px 22px; margin-bottom: 18px; } .bt-buehne-kopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.14); } .bt-buehne-kopf .bt-logo { width: 52px; height: 52px; flex: 0 0 52px; object-fit: contain; background: #fff; border-radius: var(--radius-sm); padding: 4px; } /* Eingabefeld auf dunklem Grund — die .form-input der hellen Seiten wäre hier unlesbar. */ .bt-feld { padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.1); color: #fff; font: inherit; font-size: 15px; } .bt-feld::placeholder { color: rgba(255,255,255,.45); } .bt-feld:focus { outline: none; border-color: var(--p); background: rgba(255,255,255,.15); } .bt-textknopf { background: none; border: 0; padding: 0 0 0 6px; cursor: pointer; color: #9ae6b4; font: inherit; font-size: 13px; text-decoration: underline; } /* ── Warteraum und Anklopfen ─────────────────────────────────────────── */ .bt-warteraum { text-align: center; padding: 34px 20px; border: 2px dashed rgba(255,255,255,.28); border-radius: var(--radius); } .bt-klopfzeichen { font-size: 40px; line-height: 1; margin-bottom: 12px; animation: bt-klopf 1.5s ease-in-out infinite; } @keyframes bt-klopf { 0%,100% { transform: rotate(0) } 25% { transform: rotate(-16deg) } 75% { transform: rotate(16deg) } } @media (prefers-reduced-motion: reduce) { .bt-klopfzeichen { animation: none } } .bt-klopfkasten { margin-top: 16px; padding: 20px; text-align: center; border-radius: var(--radius); background: rgba(5,150,105,.2); border: 1px solid rgba(5,150,105,.6); } /* ── Gesprächsuhr, auf beiden Seiten sichtbar ────────────────────────── */ /* Läuft die Zeit ab, wird NICHT getrennt — die Uhr zählt in die Verlängerung. Nur die Firma beendet ein Gespräch. */ .bt-uhrzeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .bt-uhr { font-family: var(--font-head); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 800; color: #fff; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.14); } .bt-uhr.knapp { background: rgba(245,158,11,.28); color: #fcd34d; } .bt-uhr.drueber{ background: rgba(239,68,68,.26); color: #fca5a5; } .bt-uhrhinweis { font-size: 12.5px; color: rgba(255,255,255,.65); } /* ── Zustand des eigenen Standes (Gastgeber) ─────────────────────────── */ .bt-hoststatus { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.12); color: rgba(255,255,255,.8); } .bt-hoststatus .bt-punkt { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; background: var(--tx4); } .bt-hoststatus[data-zustand="free"] { background: rgba(5,150,105,.28); color: #86efac; } .bt-hoststatus[data-zustand="free"] .bt-punkt { background: var(--success); } .bt-hoststatus[data-zustand="busy"] { background: rgba(245,158,11,.24); color: #fcd34d; } .bt-hoststatus[data-zustand="busy"] .bt-punkt { background: var(--amber); } .bt-hoststatus[data-zustand="break"] .bt-punkt { background: rgba(255,255,255,.6); } .rtc-knopf.einlassen { background: var(--p); border-color: var(--p-dark); font-weight: 700; } .rtc-knopf.einlassen:hover { background: var(--p-dark); } .rtc-knopf.gefahr { background: rgba(239,68,68,.28); border-color: rgba(239,68,68,.6); } .rtc-knopf.gefahr:hover { background: rgba(239,68,68,.45); } /* Lautstärkeregler für den Klingelton am Stand (20.08.2026) */ .bt-klingelregler { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin: 14px 0 0; font-size: 14px; color: rgba(255,255,255,.85); } .bt-klingelregler label { font-weight: 600; white-space: nowrap; } .bt-klingelregler input[type=range] { flex: 1 1 170px; max-width: 240px; accent-color: var(--p); } .bt-klingelregler #bt-klingel-wert { font-variant-numeric: tabular-nums; min-width: 3.5em; font-weight: 700; color: #fff; } .bt-klingelregler.stumm #bt-klingel-wert { color: #fca5a5; } .bt-klingelhinweis { font-size: 12.5px; color: rgba(255,255,255,.5); } /* ═══════════════════════════════════════════════════════════════════════ Messe-Cockpit (20.08.2026) Die Standseite war eine Spalte: Videofenster, darunter Firmenprofil, darunter Stellen, darunter Flyer. Alles da, aber man musste scrollen — waehrend man in einem Videogespraech sitzt, also genau dann, wenn man nicht scrollt. Das Cockpit stellt dieselben Inhalte daneben. Drei Spalten am Schreibtisch, eine auf dem Handy. Der Umbruch kommt frueh (1200px), weil zwei 260er-Spalten neben einem Video sonst das Video auf Briefmarkengroesse druecken. Praefix ck-, damit nichts mit bt- (Bewerbertag) und rtc- kollidiert. ═══════════════════════════════════════════════════════════════════════ */ .ck { display: grid; grid-template-columns: 264px minmax(0, 1fr) 288px; gap: 16px; align-items: start; max-width: 1500px; margin: 0 auto; } /* Die Spalten laufen mit, bis ihr Inhalt laenger ist als der Schirm. Ohne das scrollt die rechte Spalte am Video vorbei ins Leere. */ .ck-spalte { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow-y: auto; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; } @media (max-width: 1200px) { .ck { grid-template-columns: minmax(0, 1fr); } /* Auf dem Handy zuerst das Gespraech, dann die Spalten. Wer am Stand steht, will das Videofenster sehen und nicht das Programm. */ .ck-mitte { order: 1; } .ck-links { order: 2; } .ck-rechts { order: 3; } .ck-spalte { position: static; max-height: none; overflow: visible; } } /* ── Ein Kasten in einer Seitenspalte ─────────────────────────────────── */ .ck-block { background: var(--dunkel); color: #fff; border-radius: var(--radius); padding: 14px 15px; border: 1px solid rgba(255,255,255,.09); } .ck-block > h2 { font-family: var(--font-head); font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: rgba(255,255,255,.55); margin: 0 0 11px; padding: 0; border: 0; } .ck-block > h2 .zahl { font-weight: 700; letter-spacing: 0; color: rgba(255,255,255,.32); } .ck-leer { font-size: 12.5px; color: rgba(255,255,255,.42); line-height: 1.55; margin: 0; } /* ── Kopf der linken Spalte: Messe-Marke ──────────────────────────────── */ .ck-marke { text-align: center; padding: 16px 15px 15px; } .ck-marke img { max-width: 100%; max-height: 84px; width: auto; display: block; margin: 0 auto 10px; } .ck-marke .titel { font-family: var(--font-head); font-weight: 900; font-size: 17px; line-height: 1.2; color: #fff; letter-spacing: -.2px; } .ck-marke .ort { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255,255,255,.45); margin-top: 5px; } /* ── Navigation der linken Spalte ─────────────────────────────────────── */ .ck-navi { display: flex; flex-direction: column; gap: 2px; } .ck-navi a, .ck-navi button { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; color: rgba(255,255,255,.82); text-decoration: none; background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left; width: 100%; } .ck-navi a:hover, .ck-navi button:hover { background: rgba(255,255,255,.09); color: #fff; } .ck-navi .sym { width: 17px; flex: 0 0 17px; text-align: center; opacity: .75; } /* ── Ansprechpartner: das Kachelraster in der Mitte ───────────────────── */ .ck-leute { display: grid; grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); gap: 10px; } .ck-person { position: relative; display: block; text-align: left; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-sm); background: rgba(255,255,255,.05); padding: 0; overflow: hidden; color: #fff; text-decoration: none; font: inherit; cursor: pointer; transition: border-color .12s, background .12s; } .ck-person:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); } /* Nicht besetzt heisst: kein Klickziel. Der Knopf ist dann wirklich disabled und nicht nur blass — sonst klopft jemand ins Leere. */ .ck-person:disabled { cursor: default; opacity: .5; } .ck-person:disabled:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); } .ck-person .bild { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; display: block; background: rgba(255,255,255,.07); } .ck-person .platzhalter { width: 100%; aspect-ratio: 5 / 4; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.04)); font-family: var(--font-head); font-size: 25px; font-weight: 800; color: rgba(255,255,255,.5); } /* 21.08.2026: Name und Rolle sind und liefen deshalb in EINER Zeile — "Britta Sörensen Personalleitung". Das Abschneiden per text-overflow griff an einem inline-Element ohnehin nicht, und im Raster wurden die Kacheln dadurch unterschiedlich hoch. display:block loest beides. Die feste Hoehe der Zeile haelt die Kacheln gleich hoch, auch wenn eine Rolle fehlt — ein Raster aus unterschiedlich hohen Kacheln sieht ungepflegt aus, egal wie gut die Bilder sind. */ .ck-person .zeile { padding: 8px 9px 9px; min-height: 46px; } .ck-person .name { display: block; font-size: 13px; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ck-person .rolle { display: block; font-size: 11.5px; color: rgba(255,255,255,.55); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Zustandspunkt oben rechts auf der Kachel. */ .ck-punkt { position: absolute; top: 7px; right: 7px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 6px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .2px; background: rgba(10,22,40,.82); backdrop-filter: blur(4px); } .ck-punkt::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 7px; } .ck-punkt.frei { color: #6ee7b7; } .ck-punkt.busy { color: #fcd34d; } .ck-punkt.break { color: #fdba74; } .ck-punkt.offline { color: rgba(255,255,255,.45); } /* Der freie Platz pulsiert leicht — das ist die einzige Kachel, auf die man klicken soll. */ .ck-punkt.frei::before { animation: ck-puls 2s ease-in-out infinite; } @keyframes ck-puls { 0%,100% { opacity: 1 } 50% { opacity: .35 } } @media (prefers-reduced-motion: reduce) { .ck-punkt.frei::before { animation: none } } /* ── Video-Beitraege ──────────────────────────────────────────────────── */ .ck-video + .ck-video { margin-top: 12px; } .ck-video video, .ck-video .platte { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); background: #000; display: block; object-fit: cover; } .ck-video .titel { font-size: 12.5px; font-weight: 700; line-height: 1.35; margin: 7px 0 0; } .ck-video .wer { font-size: 11.5px; color: rgba(255,255,255,.5); margin-top: 2px; } /* ── Stellenanzeigen in der rechten Spalte ────────────────────────────── */ .ck-stelle { display: block; text-decoration: none; color: inherit; padding: 9px 0 9px 13px; position: relative; } .ck-stelle + .ck-stelle { border-top: 1px solid rgba(255,255,255,.08); } .ck-stelle::before { content: ''; position: absolute; left: 0; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: var(--p); } .ck-stelle .titel { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.3; } .ck-stelle .meta { font-size: 11.5px; color: rgba(255,255,255,.5); margin-top: 2px; } .ck-stelle .mehr { font-size: 11.5px; font-weight: 700; color: #6ee7b7; margin-top: 3px; } /* ── Datenaustausch (linke Spalte) ────────────────────────────────────── */ .ck-datei { display: flex; align-items: flex-start; gap: 8px; padding: 8px 9px; border-radius: var(--radius-sm); background: rgba(255,255,255,.06); font-size: 12.5px; } .ck-datei + .ck-datei { margin-top: 6px; } .ck-datei .sym { flex: 0 0 auto; opacity: .8; line-height: 1.4; } .ck-datei .rumpf { min-width: 0; flex: 1 1 auto; } .ck-datei .name { font-weight: 700; color: #fff; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ck-datei .meta { font-size: 11px; color: rgba(255,255,255,.45); margin-top: 1px; } .ck-datei .taten { display: flex; gap: 10px; margin-top: 4px; } .ck-datei .taten a { font-size: 11.5px; font-weight: 700; color: #86efac; text-decoration: none; display: inline-flex; align-items: center; gap: 3px; } .ck-datei .taten a:hover { text-decoration: underline; } /* Die Ablegeflaeche. Sie ist auch ohne Ziehen bedienbar — der ganze Kasten ist ein