/* * Lehrstellen- und Jobbörse. * * Kein zweites Designsystem: alles erbt die Token und Bausteine aus * assets/css/search-rework.css (.isr-card, .isr-btn, .isr-svc, .isr-trust, * .isr-loc, .isr-empty). Hier steht nur, was dort fehlt. Präfix .ijb-. * * Farbregeln, die gelten: * - Marken-Cyan #36afd8 hat auf Weiss 2,54:1 und ist NIE Textfarbe. * Fuer farbigen Text #1c7291 (5,43:1). * - Badges immer als Flaeche mit dunklem Text, nie helle Schrift auf Weiss. * - Tap-Ziele mindestens 44 px (WCAG 2.5.5 AAA, die Site steht auf 100/100). */ /* ── Rahmen ───────────────────────────────────────────────────────────────── */ /* Seitengrund der Boerse. Blaugrau statt des fast weissen --isr-bg (#f4f7fa), damit sich die weissen Karten ueberhaupt abheben (Maxim 28.07., Wert aus dem Mockup). Zum Vergleich: die Installateurssuche stellt ihre Karten auf reines Weiss und traegt die Abgrenzung allein ueber Rand und Schatten. Flaechen, die DIREKT hierauf liegen, muessen weiss sein, nicht --isr-bg, sonst verschwinden sie. Flaechen INNERHALB der weissen Bloecke (Keyfact, Betriebszeile in der Maske) bleiben auf --isr-bg. 🛑 flex:1 1 100% ist Pflicht, nicht Kosmetik. Astras .ast-container ist im Desktop flex(row); ohne das schrumpft
auf seine Inhaltsbreite und die Seite ist bei 1600 px nur 886 statt 1320 px breit. Gleicher Fix wie .icity-main in css/city-page.css:7. Gemessen, nicht vermutet. */ .ijb-main{--ijb-seite:#e7edf4;background:var(--ijb-seite);flex:1 1 100%;width:100%;min-width:0;} .ijb-main .ish-inner{max-width:1320px;margin:0 auto;padding:0 20px;} /* Schmale Konto-Ansichten (Typ-Auswahl, Eingabemaske): der Inhalt ist auf 760 px begrenzt und sass sonst linksbündig in der vollen Spalte — bei 1680 px standen links 20 px und rechts 540 px Rand. Eigener, mittiger Container. */ .ijb-main .ish-inner.ijk-inner-schmal{max-width:800px;} /* ── /stellen/: „Das Anschlagbrett" (Maxims Wahl, 27.08.2026) ──────────────── * * Designsprache des Profil-Editors: weisse Karten auf hellem Grund, eine * Kontextleiste oben, Abschnittstitel mit kurzem Cyan-Strich, flach, Radius 10. * 🛑 Keine Akzentkante links (memory/keine-seitliche-akzentkante.md) — Zustaende * tragen Punkt, Schrift und Flaeche. */ .ijb-main .ish-inner.ijk-inner-brett{max-width:1180px;} .ijk-topbar{display:flex;align-items:center;gap:18px;flex-wrap:wrap; padding:0 0 12px;margin:0 0 22px;border-bottom:1px solid var(--isr-line);} .ijk-topbar-t{display:flex;align-items:center;gap:9px;font-weight:800; color:var(--isr-navy);font-size:16px;} .ijk-topbar-t svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none; stroke-linecap:round;stroke-linejoin:round;} .ijk-topbar-nav{margin-left:auto;display:flex;align-items:center;gap:16px;font-size:14.5px;} .ijk-topbar-nav a{color:var(--isr-navy);text-decoration:none;font-weight:600;} .ijk-topbar-nav a:hover{color:var(--isr-cyan-600,#1c7291);} /* Der Zustand vor dem Start. Warm statt rot: das ist kein Fehler des Betriebs. */ .ijk-vorstart{display:flex;gap:12px;align-items:flex-start;background:#fdf6e6; border:1px solid #f0dcae;border-radius:10px;padding:13px 16px;margin:0 0 22px; font-size:14.5px;color:#8a5a00;} .ijk-vorstart svg{width:19px;height:19px;flex:none;stroke:#8a5a00;stroke-width:2;fill:none;margin-top:2px;} .ijk-vorstart b{display:block;color:#6b4600;} /* 🛑 `!important` mit zwei Klassen, und zwar zwingend: style.css:1509 setzt bis 767 px `h2, h2 strong{font-size:31px!important}` (Agentur-Altbestand). Ohne das rendert die Abschnittszeile am Handy in 31 px — gemessen, dieselbe Falle wie bei den Betriebsnamen am 25.08. (memory/prod-deploy-2026-08-25). */ .ijb-main .ijk-sect{font-size:13px!important;font-weight:800;letter-spacing:.05em; text-transform:uppercase;color:var(--isr-navy);margin:28px 0 14px;padding-bottom:7px; position:relative;line-height:1.4;} .ijb-main .ijk-sect::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:2px; background:var(--isr-cyan);} .ijb-main .ijk-sect span{color:var(--isr-faint);font-weight:600;letter-spacing:0; text-transform:none;margin-left:8px;font-size:13px;} .ijk-neu-zeile{margin:0 0 4px;} .ijk-neu .ijk-plus{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none; stroke-linecap:round;margin-right:6px;vertical-align:-3px;} /* 🛑 min() im minmax: ohne das erzeugt eine feste Mindestbreite am Handy Querlauf (in der Entwurfsrunde mit 4 px gemessen). */ .ijk-brett{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr));gap:16px;} .ijk-brett-karte{background:#fff;border:1px solid var(--isr-line);border-radius:10px; padding:14px;display:flex;flex-direction:column;gap:0;} .ijk-brett-karte.ijk-zu-rejected{border-color:#e2b7b7;} /* Die Vorschau: dieselbe Karte wie in der Boerse, nur eine Spur kleiner gesetzt und in einen ruhigen Rahmen gelegt, damit sie als Abbild lesbar bleibt und nicht mit der Bedienung darunter konkurriert. */ .ijk-vorschau{border:1px solid var(--isr-line-2,#dbe3ec);border-radius:8px;overflow:hidden;} .ijk-vorschau .ijb-card{border:0;border-radius:0;box-shadow:none;margin:0;} .ijk-vorschau .ijb-card-titel{font-size:16px;} .ijk-vorschau .ijb-card:hover{box-shadow:none;transform:none;} .ijk-vorschau.ist-entwurf{border-style:dashed;background:#fbfdff;} /* Ein Entwurf ohne Titel darf nicht als leere Zeile erscheinen. */ .ijk-vorschau.ist-entwurf .ijb-card-titel:empty::before{content:"Ohne Titel";color:var(--isr-faint);} .ijk-luecken{font-size:13.5px;color:var(--isr-muted,#5f6d82);margin:11px 0 0;line-height:1.5;} .ijk-luecken b{color:var(--isr-navy);font-weight:700;} /* 🛑 NICHT `.ijk-zahlen` nennen: so heisst der alte Statistikblock weiter unten (dort ist `b` 24 px und display:block). Zweiter Namenskonflikt in derselben Datei — bei neuen Klassen hier IMMER erst gegen den Bestand greppen. */ .ijk-brett-zahlen{font-size:13.5px;color:var(--isr-faint);margin:11px 0 0;} .ijk-brett-zahlen b{color:var(--isr-navy);} .ijk-grund{font-size:13.5px;color:#8a3a3a;margin:11px 0 0;line-height:1.5;} /* 🛑 NICHT `.ijk-fuss` nennen: die Klasse gehoert dem klebenden Speicher-Fuss des Eingabeformulars (`position:sticky`, weiter unten in dieser Datei). Beim ersten Bau hier gleich benannt — die Folge war, dass der Kartenfuss aus dem Fluss sprang und die Vorschau ueberdeckte. */ .ijk-brett-fuss{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:auto; padding-top:13px;border-top:1px solid var(--isr-line-2,#dbe3ec);} .ijk-zustand{font-size:13px;font-weight:700;margin-right:auto;display:flex; align-items:center;gap:7px;color:var(--isr-faint);} .ijk-punkt{width:8px;height:8px;border-radius:50%;flex:none;background:#93a4b8;} .ijk-zustand.ijk-zu-active{color:#1c7a4a;} .ijk-zu-active .ijk-punkt{background:#1c7a4a;} .ijk-zustand.ijk-zu-pending{color:var(--isr-cyan-600,#1c7291);} .ijk-zu-pending .ijk-punkt{background:var(--isr-cyan);} .ijk-zustand.ijk-zu-rejected{color:#a33;} .ijk-zu-rejected .ijk-punkt{background:#a33;} .ijk-zustand.ijk-zu-draft{color:var(--isr-faint);} .ijk-zu-draft .ijk-punkt{background:#c3d3e4;} .ijk-brett-fuss .ijk-aktionen{display:flex;gap:8px;flex-wrap:wrap;margin:0;} /* Der Leerzustand setzt sich mittig in die Flaeche, genau wie die Typ-Auswahl unter /stellen/neu/ (.ijk-wahl). 🛑 Zum vierten Mal derselbe Befund: eine Karte am oberen Rand laesst den Rest der Seite leer aussehen. Der Kasten selbst bleibt schmal — er ist der einzige Inhalt, und ueber die vollen 1180 px gezogen wuerde er zerfallen. */ .ijk-einstieg{max-width:640px;margin:0 auto;} .ijk-brett-leer{display:flex;flex-direction:column;justify-content:center; min-height:clamp(340px,calc(100svh - 300px),560px);} .ijk-einstieg-wahl{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;} @media (max-width:720px){ .ijk-brett-leer{min-height:0;} .ijk-einstieg-wahl .isr-btn{flex:1;justify-content:center;} } @media (max-width:720px){ .ijk-brett{grid-template-columns:1fr;} .ijk-brett-fuss{align-items:flex-start;} .ijk-zustand{margin-right:0;width:100%;} .ijk-brett-fuss .ijk-aktionen .isr-btn{flex:1;justify-content:center;} } .ijb-main .ish-section{padding:26px 0;} /* 🛑 Die Überschrift der Konto-Seiten hatte NUR eine Mobil-Regel. Auf dem Desktop erbte sie damit Astra/Elementor: 64 px und SCHWARZ, weil `.elementor-kit-10 h1 {color:#000}` (0,1,1) jede einfache Klasse schlägt. `.ijb-main .ijb-h1` kommt auf (0,2,0) und gewinnt. Gemessen, nicht geraten — vierter Treffer derselben Falle, siehe auch `.ijs-kopf .ijs-h1`. */ .ijb-main .ijb-h1{font-size:30px;font-weight:800;color:var(--isr-navy); letter-spacing:-.015em;line-height:1.2;margin:0 0 8px;} .ijb-main .ish-section + .ish-section{padding-top:0;} /* ── Badges ───────────────────────────────────────────────────────────────── */ .ijb-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;} .ijb-badge{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:5px; background:var(--isr-navy);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.06em;} /* Nie helle Schrift auf Weiss: StepStone setzt „NEU" in #60CFD7, gemessene 1,84:1. */ .ijb-badge-neu{background:var(--isr-chip);color:var(--isr-chip-ink);} /* ── Inserats-Karte (erbt .isr-card) ──────────────────────────────────────── */ .ijb-card{align-items:start;} .ijb-logo{width:96px;height:96px;border-radius:16px;object-fit:contain;background:#fff; border:1px solid var(--isr-line-2);flex:none;display:block;} .ijb-logo-ini{display:flex;align-items:center;justify-content:center;background:var(--isr-chip); color:var(--isr-navy);font-size:28px;font-weight:700;border-color:var(--isr-chip-line);} .ijb-card .ijb-head{display:block;} .ijb-card .ijb-card-titel{font-size:20px;font-weight:700;color:var(--isr-navy);margin:0;hyphens:auto; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .ijb-firmzeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 12px;} .ijb-card-firm{font-size:15px;font-weight:600;color:var(--isr-chip-ink);} /* Der Firmenlink liegt ueber dem ganzflaechigen Overlay-Link der Karte. */ .ijb-card-firm a{color:inherit;pointer-events:auto;position:relative;z-index:3;} .ijb-card-firm a:hover{color:var(--isr-navy);} .ijb-chips-card{margin-bottom:12px;} /* Entgelt: eigene Zeile, kein Chip. #15803d hat 5,02:1 auf Weiss. */ .ijb-pay-zeile{display:flex;align-items:flex-start;gap:7px;margin:0 0 12px; font-size:15px;font-weight:700;color:var(--isr-ok);line-height:1.4;} .ijb-pay-zeile svg{width:16px;height:16px;flex:none;margin-top:3px;stroke:currentColor;stroke-width:2; fill:none;stroke-linecap:round;stroke-linejoin:round;} .ijb-pay-zeile em{display:block;font-style:normal;font-size:13px;font-weight:500;color:var(--isr-faint);} /* 🛑 Das Veröffentlichungsdatum stand in 12,5 px und in der blassesten Farbe und war damit praktisch unlesbar (Maxim, 26.08.2026: „zu klein"). Es ist die einzige Angabe, an der jemand sieht, ob ein Inserat noch aktuell ist. */ .ijb-card-foot{margin:0;padding-top:10px;border-top:1px solid var(--isr-line-2); font-size:14px;color:var(--isr-muted,#5c6b80);display:flex;align-items:center;gap:7px;} .ijb-card-foot::before{content:"";width:13px;height:13px;flex:none; background:currentColor;opacity:.75; -webkit-mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");} /* ── Zeilenform fuers Betriebsprofil ──────────────────────────────────────── */ .ijb-zeile{display:flex;align-items:center;gap:14px;flex-wrap:wrap; border:1px solid var(--isr-line-2);border-radius:var(--isr-radius-sm);padding:13px 14px;} .ijb-zeile + .ijb-zeile{margin-top:10px;} .ijb-zeile-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;align-items:flex-start;} .ijb-zeile-titel{font-size:15.5px;font-weight:700;color:var(--isr-navy);line-height:1.3;} .ijb-zeile-meta{font-size:14px;color:var(--isr-muted);} .ijb-zeile .isr-btn{min-height:44px;} /* ══ Detailseite: Inhalt links, Handlungsspalte rechts ═══════════════════════ Maxims Wahl 29.07. (Variante B der Mockup-Runde `stellenseite-rework.html`). 🛑 Warum das Kachelraster vom 28.07. ersetzt wurde, damit es niemand zurueckbaut: in einem Grid richtet jede ZEILE ihre Kacheln auf gleicher Hoehe aus. Die Inhalte sind aber sehr ungleich lang, also entstand entweder eine gestreckte leere Kachel oder ein Loch darunter. Gemessen auf der alten Seite bei 1440 px: „Das machst du" 563x304 mit 178 px Leerraum, Ansprechperson 1140 px breit fuer einen 46-px-Avatar, Bewerbungskachel 1140x846 mit 540 px totem Feld rechts. Das war der „scuffed"-Eindruck, nicht das Modulare an sich. align-items:start verschiebt das Problem nur nach unten. Der Aufbau hier kennt keine Rasterzeilen: links ein Stapel, rechts ein Stapel. Zwei Spalten koennen nicht ungleich hoch sein, wenn keine Zeile sie verbindet. Die rechte Spalte laeuft mit (sticky) und traegt Entgelt, Eckdaten und den Bewerben-Knopf. Praefix .ijs-. */ .ijs-main{background:var(--isr-bg);padding-bottom:44px;} .ijs-inner{max-width:1180px;margin:0 auto;padding:0 20px;} .ijs-crumbs{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:20px 0 0; font-size:13px;color:var(--isr-faint);} .ijs-crumbs a{color:var(--isr-cyan-600);font-weight:600;text-decoration:none;} .ijs-crumbs a:hover{text-decoration:underline;} .ijs-kopf{padding:16px 0 20px;} /* 🛑 Zwei Stufen, nicht eine: `.elementor-kit-10 h1` setzt color auf SCHWARZ und hat mit (0,1,1) die höhere Spezifität als ein blosses `.ijs-h1` (0,1,0). Deshalb sah der Titel bis 04.08. schwarz aus, obwohl hier Marken-Navy stand — Maxim hat es am Bild erkannt, im Quelltext ist es unsichtbar. Vierter Treffer derselben Falle nach `.ijs-person span`, `style.css`-h2 und `.ijk-fld label`. Gemessen über getComputedStyle, nicht aus der Regel gelesen. */ .ijs-kopf .ijs-h1{font-size:30px;font-weight:800;color:var(--isr-navy);letter-spacing:-.015em; line-height:1.18;margin:9px 0 7px;hyphens:auto;} .ijs-kopf-sub{font-size:16px;color:var(--isr-muted);} .ijs-kopf-sub a{color:var(--isr-navy);font-weight:700;text-decoration:none;} .ijs-kopf-sub a:hover{color:var(--isr-cyan-600);text-decoration:underline;} /* ── Kopfkarte (Maxims Variante B, 04.08.) ─────────────────────────────────── 🛑 Der Titel war „irgendwie schwarz": er ist Marken-Navy, stand aber als einziges Element der Seite OHNE Fläche auf dem blaugrauen Grund, während alles darunter in weissen Karten sitzt. Die Karte war der Fix, nicht ein hellerer Farbwert. Gleichzeitig ersetzt die Firmenzeile die frühere graue „bei …"-Notiz. */ .ijs-kopf-karte{background:#fff;border:1px solid var(--isr-line);border-radius:var(--isr-radius); box-shadow:var(--isr-shadow);padding:20px 22px;margin-bottom:14px;} .ijs-kopf-karte .ijs-h1{margin:10px 0 12px;} .ijs-kopf-firma{display:flex;align-items:center;gap:12px;padding-top:13px; border-top:1px solid var(--isr-line-2);} .ijs-kopf-firma .ijb-logo{width:44px;height:44px;border-radius:11px;flex:none;} .ijs-kopf-firma .ijb-logo-ini{font-size:15px;} .ijs-kopf-firma-txt{min-width:0;} .ijs-kopf-firma-name, a.ijs-kopf-firma-name:link,a.ijs-kopf-firma-name:visited{display:block;font-size:16px;font-weight:800; color:var(--isr-navy);line-height:1.25;letter-spacing:-.01em;text-decoration:none; overflow-wrap:anywhere;} a.ijs-kopf-firma-name:hover{color:var(--isr-cyan-600);text-decoration:underline;} .ijs-badge-aus{background:var(--isr-faint);} /* Zwei Spalten. 372 px rechts, weil die Eckdaten-Zeilen („Beschaeftigung" / „Vollzeit, 38,5 h") darunter umbrechen wuerden. */ .ijs-split{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:22px;align-items:start;} .ijs-haupt{display:flex;flex-direction:column;gap:14px;min-width:0;} .ijs-k{background:#fff;border:1px solid var(--isr-line);border-radius:var(--isr-radius); padding:19px 21px;box-shadow:var(--isr-shadow);} .ijs-k > h2{font-size:17px;font-weight:800;color:var(--isr-navy);margin:0 0 10px;letter-spacing:-.01em;} .ijs-k-lbl{display:block;font-size:11.5px;font-weight:800;letter-spacing:.05em; text-transform:uppercase;color:var(--isr-faint);margin-bottom:6px;} /* Abschnitte innerhalb einer Karte: Haarlinie statt eigener Kachel. Vier Ein-Satz-Bloecke als vier Karten waren zu viel Rahmen fuer zu wenig Inhalt. */ .ijs-abs + .ijs-abs{margin-top:18px;padding-top:18px;border-top:1px solid var(--isr-line-2);} .ijs-abs > h2{font-size:17px;font-weight:800;color:var(--isr-navy);margin:0 0 9px;letter-spacing:-.01em;} /* ── Der Betrieb: helle Karte ──────────────────────────────────────────────── 🛑 War bis 29.07. ein Navy-Klotz. Auf einer Seite, deren einzige Handlung „bewerben" ist, zog die grosse dunkle Flaeche den Blick auf den Betrieb statt auf den Knopf. Dunkel ist jetzt nur noch der Kopf der Handlungsspalte. */ .ijs-betrieb-kopf{display:flex;align-items:center;gap:13px;margin-bottom:12px;} .ijs-k-betrieb .ijb-logo{width:54px;height:54px;border-radius:13px;} .ijs-k-betrieb .ijb-logo-ini{font-size:18px;} .ijs-betrieb-name, a.ijs-betrieb-name:link,a.ijs-betrieb-name:visited{display:block;font-size:17px;font-weight:800; color:var(--isr-navy);line-height:1.25;letter-spacing:-.01em;text-decoration:none;} a.ijs-betrieb-name:hover{color:var(--isr-cyan-600);text-decoration:underline;} .ijs-betrieb-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:3px; font-size:13.5px;color:var(--isr-muted);} .ijs-betrieb-meta b{color:var(--isr-ink);font-weight:700;} .ijs-sterne{color:var(--isr-gold);} /* 🛑 overflow-wrap ist das Netz unter der PHP-Bereinigung, nicht Deko: der Text kommt aus einem fremden Profil, und ein einziges unteilbares Wort (URL,  -Wüste, verketteter String) reisst sonst die ganze Seite auf. Gilt für jeden Fremdtext auf dieser Seite. */ .ijs-betrieb-ueber{font-size:14.5px;line-height:1.6;color:var(--isr-muted);margin:0 0 11px; max-width:70ch;overflow-wrap:anywhere;} .ijs-text,.ijs-ablauf li,.ijs-betrieb-zeile span,.ijs-betrieb-name{overflow-wrap:anywhere;} .ijs-betrieb-zeilen{margin-bottom:12px;} .ijs-betrieb-zeile{display:flex;align-items:flex-start;gap:9px;padding:7px 0; font-size:14px;line-height:1.45;color:var(--isr-muted);border-top:1px solid var(--isr-line-2);} .ijs-betrieb-zeile:first-child{border-top:0;} .ijs-betrieb-zeile svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--isr-cyan-600); stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} .ijs-betrieb-svcs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;} .ijs-svc{display:inline-flex;align-items:center;font-size:13px;font-weight:600;padding:5px 11px; border-radius:7px;background:var(--isr-chip);color:var(--isr-chip-ink);} .ijs-betrieb-btns{display:flex;gap:9px;flex-wrap:wrap;} .ijs-betrieb-btns .isr-btn{min-height:44px;} .ijs-betrieb-note{margin:11px 0 0;font-size:11.5px;line-height:1.45;color:var(--isr-faint);} /* ── Bilder und Video im Inserat ────────────────────────────────────────────── 🛑 Fester Zuschnitt über aspect-ratio + object-fit:cover. Ohne den bestimmt das Seitenverhältnis der hochgeladenen Datei die Kachelhöhe, und ein Hochkant-Handyfoto reisst die Karte auf die dreifache Höhe. Der Betrieb bestimmt den Inhalt, wir die Form. */ .ijs-fotos{display:grid;gap:9px;} .ijs-fotos[data-anzahl="1"]{grid-template-columns:1fr;} .ijs-fotos[data-anzahl="2"]{grid-template-columns:1fr 1fr;} .ijs-fotos[data-anzahl="3"]{grid-template-columns:2fr 1fr;} .ijs-foto{margin:0;border-radius:var(--isr-radius-sm);overflow:hidden;background:var(--isr-bg); border:1px solid var(--isr-line-2);} .ijs-foto-bild{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;} .ijs-fotos[data-anzahl="2"] .ijs-foto-bild{aspect-ratio:4/3;} /* Bei drei Bildern traegt das erste die linke Spalte über beide Zeilen, die anderen stapeln sich rechts. Ergibt eine ruhige Flaeche statt drei Briefmarken. */ .ijs-fotos[data-anzahl="3"] .ijs-foto:first-child{grid-row:span 2;} .ijs-fotos[data-anzahl="3"] .ijs-foto:first-child .ijs-foto-bild{height:100%;aspect-ratio:auto;min-height:230px;} .ijs-fotos[data-anzahl="3"] .ijs-foto:not(:first-child) .ijs-foto-bild{aspect-ratio:16/10;} .ijs-video{display:block;width:100%;margin-top:9px;border-radius:var(--isr-radius-sm); background:#0d1a2a;aspect-ratio:16/9;} .ijs-k-fotos > h2{margin-bottom:12px;} /* ── So laeuft die Bewerbung ab ─────────────────────────────────────────────── Eigene Zaehler statt der Browser-Nummern: die Ziffer soll eine Flaeche sein, damit die Abfolge auf einen Blick als Ablauf lesbar ist. */ .ijs-ablauf{list-style:none;margin:0;padding:0;counter-reset:ijs-schritt;} .ijs-ablauf li{counter-increment:ijs-schritt;position:relative;padding:0 0 0 40px; min-height:28px;font-size:15px;line-height:1.55;color:var(--isr-ink);} .ijs-ablauf li + li{margin-top:14px;} .ijs-ablauf li::before{content:counter(ijs-schritt);position:absolute;left:0;top:-1px; width:28px;height:28px;border-radius:50%;background:var(--isr-chip);color:var(--isr-navy); display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;} /* Verbindungslinie zwischen den Ziffern: macht aus vier Punkten einen Weg. */ .ijs-ablauf li:not(:last-child)::after{content:"";position:absolute;left:13.5px;top:30px; bottom:-14px;width:1px;background:var(--isr-chip-line);} /* Ansprechperson: runder Avatar aus den Initialen, oder ein Foto. */ .ijs-person{display:flex;align-items:center;gap:12px;} .ijs-person-foto{width:44px;height:44px;flex:none;border-radius:50%;object-fit:cover; border:1px solid var(--isr-chip-line);display:block;} .ijs-person-ini{width:44px;height:44px;flex:none;border-radius:50%;background:var(--isr-chip); color:var(--isr-navy);border:1px solid var(--isr-chip-line); display:flex;align-items:center;justify-content:center; font-size:15px;font-weight:800;letter-spacing:.02em;} /* 🛑 Kindkombinator ist Pflicht. Vorher stand hier `.ijs-person span` — das ist spezifischer als `.ijs-person-ini` und hat den Avatar plattgemacht: der Kreis blieb leer, die Initiale stand als 13,5-px-Blockzeile daneben. Die Regel darf nur den Textblock treffen, nicht jeden Span in der Zeile. */ .ijs-person > div > b{display:block;font-size:15.5px;font-weight:700;color:var(--isr-navy);line-height:1.3;} .ijs-person > div > span{display:block;font-size:13.5px;color:var(--isr-muted);margin-top:1px;} .ijs-person-txt{margin:11px 0 0;font-size:13.5px;line-height:1.55;color:var(--isr-muted);} .ijs-text{font-size:15px;line-height:1.65;color:var(--isr-ink);max-width:74ch;} .ijs-text p{margin:0 0 10px;} .ijs-text p:last-child{margin-bottom:0;} .ijs-k-nah{background:transparent;border:0;box-shadow:none;padding:6px 0 0;} .ijs-k-nah > h2{font-size:19px;} /* ── Handlungsspalte ───────────────────────────────────────────────────────── Laeuft beim Scrollen mit, damit der Bewerben-Knopf nie aus dem Bild geht. top:22px statt 0: die Seite hat keine fixierte Kopfleiste, der Abstand ist nur Luft zum oberen Rand. */ .ijs-rail{position:sticky;top:22px;display:flex;flex-direction:column;gap:13px;} /* ── Der Betrieb in der Schiene (Variante B) ───────────────────────────────── Die Karte ist 372 px breit: die beiden Knöpfe nebeneinander würden bei „Profil ansehen" + „Anrufen" umbrechen, deshalb ein Zweispalten-Grid mit gleicher Breite statt flex-wrap. */ .ijs-rail-betrieb .ijs-betrieb-ueber{margin-bottom:11px;font-size:14px;} .ijs-rail-betrieb .ijs-betrieb-zeilen{margin-bottom:11px;} .ijs-rail-betrieb .ijs-betrieb-svcs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;} .ijs-rail-betrieb .ijs-svc{font-size:12.5px;padding:4px 9px;} .ijs-rail-betrieb .ijs-betrieb-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:0;} .ijs-rail-betrieb .isr-btn{width:100%;padding:0 10px;} .ijs-rail-betrieb .ijs-betrieb-note{margin-top:10px;} .ijs-box{background:#fff;border:1px solid var(--isr-line);border-radius:var(--isr-radius); box-shadow:var(--isr-shadow);overflow:hidden;} .ijs-box-kopf{background:var(--isr-navy);color:#fff;padding:15px 19px;} .ijs-box-kopf .ijs-k-lbl{color:#9fc0da;margin-bottom:3px;} .ijs-betrag{font-size:24px;font-weight:800;line-height:1.1;letter-spacing:-.015em; font-variant-numeric:tabular-nums;} .ijs-betrag small{display:block;font-size:12.5px;font-weight:500;color:#c6d8ea;margin-top:4px; letter-spacing:0;line-height:1.45;} .ijs-box-leib{padding:15px 19px;} .ijs-zeile{display:flex;justify-content:space-between;gap:14px;padding:9px 0; border-top:1px solid var(--isr-line-2);font-size:14.5px;} .ijs-zeile:first-child{border-top:0;padding-top:0;} .ijs-zeile dt{color:var(--isr-muted);} .ijs-zeile dd{margin:0;font-weight:700;color:var(--isr-ink);text-align:right;} .ijs-box-fuss{padding:0 19px 18px;} .ijs-box-fuss .isr-btn{width:100%;min-height:50px;font-size:16px;} .ijs-box-fuss .ijs-fuss-fine{font-size:12.5px;color:var(--isr-faint);text-align:center; margin:9px 0 0;line-height:1.5;} .ijs-box-pad{padding:16px 19px;} .ijs-quelle{font-size:12.5px;line-height:1.5;color:var(--isr-faint);margin:9px 2px 0;} .ijs-quelle a{color:var(--isr-cyan-600);font-weight:700;margin-left:6px;} .ijs-aus{background:#fff;border:1px solid var(--isr-line);border-radius:var(--isr-radius); padding:18px;margin-bottom:16px;box-shadow:var(--isr-shadow);} .ijs-aus p{margin:0 0 13px;font-size:15px;color:var(--isr-muted);line-height:1.6;} .ijs-aus b{color:var(--isr-ink);} .ijs-aus-btns{display:flex;gap:9px;flex-wrap:wrap;} .ijs-vorschau{background:var(--isr-chip);border:1px solid var(--isr-chip-line); border-radius:var(--isr-radius-sm);padding:12px 15px;margin-top:18px; font-size:14px;color:var(--isr-chip-ink);line-height:1.5;} .ijs-vorschau b{color:var(--isr-navy);} .ijs-vorschau a{font-weight:700;color:var(--isr-cyan-600);margin-left:6px;} .ijs-meta{margin:18px 0 0;font-size:12.5px;color:var(--isr-faint);} .ijs-meta a{color:var(--isr-cyan-600);font-weight:700;} @media (max-width:1000px){ /* Ein Stapel. Die Handlungsspalte rutscht VOR den Fliesstext: Entgelt und Eckdaten sind das, was zuerst gesucht wird, und der Bewerben-Knopf soll nicht erst nach drei Bildschirmhoehen kommen. */ .ijs-split{grid-template-columns:1fr;gap:14px;} .ijs-rail{position:static;order:-1;} } /* 🛑 style.css setzt ab 991 px global `h2{font-size:31px !important}` (Zeilen 1307 und 1375, Altbestand der Agentur). Ohne denselben Hebel stehen hier „Das machst du" und „Der Betrieb" in 31 px ueber einem 15-px-Absatz. Gemessen bei 390 px: 31 px statt der gesetzten 17. Spezifitaet hilft nicht gegen !important, nur !important. Breakpoint 991, nicht 600, sonst bleibt die Luecke dazwischen. */ @media (max-width:991px){ .ijs-k > h2,.ijs-abs > h2{font-size:17px !important;line-height:1.3 !important;} .ijs-k-nah > h2{font-size:19px !important;line-height:1.3 !important;} .ijb-modal-titel b{font-size:17.5px !important;line-height:1.3 !important;} } @media (max-width:600px){ .ijs-inner{padding:0 14px;} .ijs-h1{font-size:23px !important;line-height:1.24 !important;text-wrap:balance;} .ijs-kopf{padding:12px 0 16px;} .ijs-k{padding:15px 16px;} .ijs-abs + .ijs-abs{margin-top:15px;padding-top:15px;} .ijs-betrieb-btns .isr-btn{flex:1 1 100%;} /* Am Telefon untereinander: drei Bilder in einer 340-px-Zeile sind Briefmarken, und die 2fr/1fr-Teilung ergibt dort keinen Sinn mehr. */ .ijs-fotos,.ijs-fotos[data-anzahl="2"],.ijs-fotos[data-anzahl="3"]{grid-template-columns:1fr;} .ijs-fotos[data-anzahl="3"] .ijs-foto:first-child{grid-row:auto;} .ijs-fotos .ijs-foto-bild{aspect-ratio:16/10 !important;height:auto !important;min-height:0 !important;} } /* ── Bewerbung: eigener Vorgang im Modal ───────────────────────────────────── Maxim 29.07.: das eingebettete Formular „wirkt nicht serioes genug". Die Seriositaet kommt aus der Rahmung, nicht aus der Zahl der Schritte: eigene Flaeche, Kopfzeile „Bewerbung an {Firma}", darunter namentlich, wer liest. Weiterhin KEIN Wizard, siehe Kopf von installateur-stelle.php. 🛑 Progressive Enhancement, nicht Modal-first: ohne JavaScript bleibt das hier ein ganz normaler Abschnitt am Seitenende, erreichbar ueber #bewerben. Erst jobs-apply.js setzt `.is-modal` und macht ein Overlay daraus. Damit haengt die Bedienbarkeit per Tastatur und Screenreader nicht am Overlay, und der No-JS-Hinweis im Formular bleibt sichtbar. */ .ijb-modal{margin-top:14px;} .ijb-modal-flaeche{background:#fff;border:1px solid var(--isr-line); border-radius:var(--isr-radius);box-shadow:var(--isr-shadow);overflow:hidden;} .ijb-modal-kopf{display:flex;align-items:flex-start;gap:13px;padding:18px 22px; border-bottom:1px solid var(--isr-line-2);} .ijb-modal-kopf .ijb-logo{width:46px;height:46px;border-radius:11px;flex:none;} .ijb-modal-kopf .ijb-logo-ini{font-size:15px;} .ijb-modal-titel{flex:1;min-width:0;} .ijb-modal-titel b{display:block;font-size:17.5px;font-weight:800;color:var(--isr-navy); line-height:1.3;letter-spacing:-.01em;} .ijb-modal-titel span{display:block;font-size:13.5px;color:var(--isr-muted);margin-top:3px; line-height:1.45;} .ijb-modal-zu{display:none;appearance:none;border:0;background:transparent;cursor:pointer; padding:8px;margin:-6px -8px 0 0;color:var(--isr-faint);line-height:0;border-radius:7px;flex:none;} .ijb-modal-zu:hover{background:var(--isr-bg);color:var(--isr-ink);} .ijb-modal-zu:focus-visible{outline:2px solid var(--isr-cyan);outline-offset:2px;} .ijb-modal-zu svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2; stroke-linecap:round;} .ijb-modal-leib{padding:20px 22px;} .ijb-modal-fuss{padding:15px 22px 19px;border-top:1px solid var(--isr-line-2); background:var(--isr-bg);} /* Overlay-Zustand, erst von JS gesetzt. */ /* 🛑 z-index 100000, nicht „irgendwas Hohes": die Navbar (.inav) steht auf 99999. Mit 120 lag der Verdunkler UNTER ihr, die Kopfzeile des Modals verschwand hinter der Navigation. Darüber liegt nur noch das Cookie-Banner (.ick-overlay, 2147483001), und das soll auch oben bleiben. */ .ijb-modal.is-modal{position:fixed;inset:0;z-index:100000;margin:0;padding:38px 16px; background:rgba(16,32,52,.55);overflow-y:auto; display:none;align-items:flex-start;justify-content:center;} .ijb-modal.is-modal.is-offen{display:flex;} .ijb-modal.is-modal .ijb-modal-flaeche{width:100%;max-width:566px; box-shadow:0 18px 48px rgba(10,26,46,.3);} .ijb-modal.is-modal .ijb-modal-zu{display:inline-flex;} .ijb-modal.is-modal .ijb-modal-leib{max-height:min(58vh,560px);overflow-y:auto;} body.ijb-modal-offen{overflow:hidden;} @media (max-width:600px){ /* Am Telefon die ganze Flaeche statt eines schwebenden Kaertchens: mehr Platz fuer die Felder, und der Absenden-Knopf steht am unteren Rand. */ .ijb-modal.is-modal{padding:0;align-items:stretch;} .ijb-modal.is-modal .ijb-modal-flaeche{max-width:none;border:0;border-radius:0; display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;} .ijb-modal.is-modal .ijb-form{flex:1;} .ijb-modal.is-modal .ijb-modal-leib{flex:1;max-height:none;padding:18px 17px;} .ijb-modal.is-modal .ijb-modal-kopf{padding:15px 17px;} .ijb-modal.is-modal .ijb-modal-fuss{padding:14px 17px 18px;} .ijb-fld{margin-bottom:20px;} } /* Flex statt display:contents: der Fuss soll am Telefon unten stehen, ohne dass das
aus dem Baum faellt (display:contents kostet in aelteren Browsern die Formular-Rolle). */ .ijb-form{display:flex;flex-direction:column;min-width:0;} /* 🛑 Pflicht, nicht Kosmetik: nach dem Absenden setzt jobs-apply.js form.hidden. Das UA-Stylesheet `[hidden]{display:none}` verliert gegen die Klassenregel oben, ohne diese Zeile bliebe das Formular neben der Danke-Meldung stehen. */ .ijb-form[hidden]{display:none;} .ijb-danke[hidden]{display:none;} .ijb-fld{margin-bottom:16px;} /* 🛑 Kindkombinator: `.ijb-fld:last-child` allein trifft auch das zweite Feld in `.ijb-reihe` und klebt dessen Hilfstext an die naechste Beschriftung. */ .ijb-modal-leib > .ijb-fld:last-child{margin-bottom:0;} /* Name und Kontakt nebeneinander, solange Platz ist. */ .ijb-reihe{display:grid;grid-template-columns:1fr 1fr;gap:15px;} @media (max-width:560px){ .ijb-reihe{grid-template-columns:1fr;gap:0;} } .ijb-fld label,.ijb-lbl{display:block;font-size:14px;font-weight:700;color:var(--isr-navy); margin-bottom:6px;} .ijb-req{color:var(--isr-emrg);} .ijb-form input[type="text"],.ijb-form textarea{width:100%;font-family:inherit;font-size:16px; color:var(--isr-ink);background:#fff;border:1.5px solid var(--isr-line); border-radius:10px;padding:12px 13px;min-height:48px;} .ijb-form textarea{min-height:96px;resize:vertical;} .ijb-form input:focus-visible,.ijb-form textarea:focus-visible{outline:2px solid var(--isr-cyan); outline-offset:2px;border-color:var(--isr-cyan-600);} .ijb-form input.is-err,.ijb-form textarea.is-err{border-color:var(--isr-emrg);} .ijb-hint{font-size:12.5px;color:var(--isr-faint);margin:6px 0 0;line-height:1.45;} .ijb-err{margin:6px 0 0;font-size:13px;font-weight:600;color:var(--isr-emrg);min-height:0;} .ijb-err:empty{display:none;} .ijb-formerr{margin:0 0 12px;font-size:14px;font-weight:600;color:var(--isr-emrg);} .ijb-formerr:empty{display:none;} .ijb-fine{font-size:12.5px;color:var(--isr-faint);line-height:1.5;margin:0 0 12px;} .ijb-fine a{color:var(--isr-cyan-600);font-weight:700;} .ijb-submit{width:100%;} /* Chips als Label-gewrappte Radios: das native Input bleibt bedienbar und fokussierbar, sichtbar ist der Chip. */ .ijb-chips{display:flex;flex-wrap:wrap;gap:8px;} .ijb-chip{position:relative;display:inline-flex;align-items:center;min-height:44px; padding:10px 15px;border-radius:var(--isr-pill);background:var(--isr-chip); color:var(--isr-chip-ink);border:1px solid var(--isr-chip-line); font-size:14px;font-weight:600;cursor:pointer;transition:.14s;} .ijb-chip input{position:absolute;opacity:0;width:100%;height:100%;left:0;top:0;margin:0;cursor:pointer;} .ijb-chip:hover{border-color:var(--isr-cyan);} .ijb-chip.is-on{background:var(--isr-navy);border-color:var(--isr-navy);color:#fff;} .ijb-chip:focus-within{outline:2px solid var(--isr-cyan);outline-offset:2px;} .ijb-danke{background:#fff;padding:34px 24px;text-align:center;} .ijb-danke-ico svg{width:44px;height:44px;color:var(--isr-ok);stroke:currentColor;stroke-width:2.4; fill:none;stroke-linecap:round;stroke-linejoin:round;} .ijb-danke h3{font-size:20px;color:var(--isr-navy);margin:12px 0 8px;} .ijb-danke p{color:var(--isr-muted);font-size:15px;line-height:1.6;margin:0 auto 18px;max-width:420px;} .ijb-danke:focus-visible{outline:2px solid var(--isr-cyan);outline-offset:3px;} /* ── Mobiler Bewerben-Balken ──────────────────────────────────────────────── */ .ijb-sticky{display:none;} @media (max-width:680px){ .ijb-sticky{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40; background:#fff;box-shadow:0 -1px 0 var(--isr-line-2);padding:10px 16px;} .ijb-sticky .isr-btn{width:100%;} /* Der Balken darf den Inhalt nicht verdecken. */ body.inst-job-detail{padding-bottom:76px;} } /* ── Hub und Liste ────────────────────────────────────────────────────────── */ .ijb-filter{background:#fff;border:1px solid var(--isr-line);border-radius:13px; padding:12px;margin:0 0 16px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;} .ijb-seg{display:flex;background:var(--isr-chip);border-radius:10px;padding:3px;gap:3px;} .ijb-seg a{display:inline-flex;align-items:center;justify-content:center;min-height:44px; padding:8px 16px;border-radius:8px;font-size:13.5px;font-weight:700; color:var(--isr-chip-ink);text-decoration:none;transition:.14s;} .ijb-seg a.is-on{background:#fff;color:var(--isr-navy);box-shadow:0 1px 2px rgba(16,40,70,.14);} .ijb-selects{display:flex;gap:8px;flex:1;min-width:220px;} .ijb-selects select{flex:1;font-family:inherit;font-weight:600;font-size:14px;color:var(--isr-navy); background:#fff;border:1.5px solid var(--isr-line);border-radius:10px;padding:10px 12px; min-height:44px;cursor:pointer;} .ijb-selects select:focus-visible{outline:2px solid var(--isr-cyan);outline-offset:2px;} .ijb-noscript-go{min-height:44px;} .ijb-akquise{background:#fff;border:1px solid var(--isr-line); border-radius:var(--isr-radius);padding:20px;margin-top:18px;} .ijb-akquise h2{font-size:18px;font-weight:700;color:var(--isr-navy);margin:0 0 5px;} .ijb-akquise p{font-size:15px;color:var(--isr-muted);margin:0 0 14px;} .ijb-leer .isr-empty p{margin-bottom:18px;} .ijb-leer-btns{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-bottom:14px;} .ijb-leer-link{display:inline-block;font-size:14.5px;font-weight:700;color:var(--isr-cyan-600);} /* ── Betriebsprofil: Block „Offene Stellen" ───────────────────────────────── */ .ijb-profil-block{margin:18px 0 0;} .ijb-profil-block h2{font-size:18px;font-weight:700;color:var(--isr-navy);margin:0 0 10px;} /* ── Marker „Sucht Lehrling" in der Trefferkarte ──────────────────────────── */ .ijb-mark{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700; color:var(--isr-navy);} .ijb-mark svg{width:15px;height:15px;color:var(--isr-cyan-600);stroke:currentColor;stroke-width:2; fill:none;stroke-linecap:round;stroke-linejoin:round;} /* ── Schmale Schirme ──────────────────────────────────────────────────────── */ @media (max-width:680px){ .ijb-main .ish-inner{padding:0 14px;} .ijb-h1{font-size:22px !important;line-height:1.25 !important;text-wrap:balance;} .ijb-kf{grid-template-columns:1fr;padding:15px;} .ijb-kf dt{padding:10px 0 0;} .ijb-kf dd{padding:2px 0 10px;} .ijb-cta-1{width:100%;min-width:0;} .ijb-form{padding:16px;} /* Karte umbrechen wie die Betriebskarte: display:contents hebt die Kinder ins Karten-Grid, damit Chips und Entgelt ueber beide Spalten laufen. */ .ijb-card{ grid-template-columns:auto minmax(0,1fr); grid-template-areas: "media head" "media firm" "chips chips" "pay pay" "cta cta" "foot foot"; column-gap:14px;row-gap:0;padding:16px; } .ijb-card .ijb-body{display:contents;} .ijb-card .ijb-media{grid-area:media;align-self:start;} .ijb-card .ijb-head{grid-area:head;} .ijb-card .ijb-firmzeile{grid-area:firm;margin:6px 0 0;} .ijb-card .ijb-chips-card{grid-area:chips;margin:12px 0 0;} .ijb-card .ijb-pay-zeile{grid-area:pay;margin:12px 0 0;} .ijb-card .ijb-cta{grid-area:cta;flex-direction:row;margin-top:14px;} .ijb-card .ijb-cta .isr-btn{flex:1;min-height:44px;} .ijb-card .ijb-card-foot{grid-area:foot;margin-top:12px;} /* Logo kleiner, Titel bleibt bei 20 px: er traegt die Entscheidung. */ .ijb-logo{width:64px;height:64px;border-radius:14px;} .ijb-logo-ini{font-size:20px;} .ijb-filter{flex-direction:column;align-items:stretch;} .ijb-selects{min-width:0;} .ijb-zeile{align-items:stretch;flex-direction:column;} .ijb-zeile .isr-btn{width:100%;} } /* 🛑 Pflichtpruefung Breitbild: Astra-Flex laesst Karten ab 1600 px zerfallen und die CTA-Spalte abdriften. Die Boerse erbt die Kartenbreite aus .isr-results, deshalb reicht die Container-Begrenzung. */ @media (min-width:1600px){ .ijb-main .ish-inner{max-width:1320px;} } /* ══ Konto: Meine Stellen ═══════════════════════════════════════════════════ */ .ijk-main{min-height:60vh;} .ijk-lead{font-size:15.5px;color:var(--isr-muted);margin:0 0 18px;line-height:1.5;} .isr-btn-s{min-height:44px;padding:9px 15px;font-size:14px;} /* Einstiegskarte bei null Inseraten */ .ijk-einstieg{background:#fff;border:1px solid var(--isr-line);border-radius:var(--isr-radius); padding:26px 22px;max-width:640px;box-shadow:var(--isr-shadow);} /* 🛑 `!important` + zwei Klassen gegen style.css:1509 (`h2{font-size:31px!important}` bis 767 px, Agentur-Altbestand). Ohne das ist die Ueberschrift am Handy 31 px — war hier schon vor dem Umbau vom 27.08. so, gemessen und mitgezogen. */ .ijb-main .ijk-einstieg h2{font-size:20px!important;font-weight:700;color:var(--isr-navy); margin:0 0 8px;line-height:1.3;} .ijk-einstieg p{font-size:15.5px;color:var(--isr-muted);line-height:1.6;margin:0 0 18px;} /* Typ-Auswahl */ /* ── Typ-Auswahl unter /stellen/neu/ ────────────────────────────────────── 🛑 Die Seite hat nur zwei Karten. Standen sie oben, blieb darunter ein Viertel Bildschirm hellblaues Nichts bis zur Fusszeile (Maxim, 27.08.: „in der mitte des screens einfach hellblau und die Auswahl ist einfach ganz oben im oberen viertel"). Zwei Griffe dagegen: die Karten tragen jetzt, WAS an der Wahl haengt, und der Block setzt sich mittig in die Flaeche, statt an ihrem oberen Rand zu kleben. */ .ijk-wahl{display:flex;flex-direction:column;justify-content:center;gap:24px; min-height:clamp(380px,calc(100svh - 250px),660px);} .ijk-wahl-kopf .ijb-h1{margin-bottom:6px;} .ijk-wahl-kopf .ijk-lead{margin:0;max-width:62ch;} .ijk-typen{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;} .ijk-typ{display:flex;flex-direction:column;align-items:flex-start;gap:0;background:#fff; border:1.5px solid var(--isr-line);border-radius:14px;padding:22px 22px 20px;text-decoration:none; transition:border-color .18s ease,background-color .18s ease;} /* 🛑 Kein Anheben beim Zeigen (RRs Vorgabe: flach, kein Lift) — die Karte antwortet ueber Rand und Flaeche. */ .ijk-typ:hover{border-color:var(--isr-cyan);background:var(--isr-bg,#f5f8fb);} .ijk-typ-sym{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center; margin-bottom:13px;background:rgba(28,114,145,.10);color:var(--inst-cyan-600,#1c7291);} .ijk-typ--fach .ijk-typ-sym{background:rgba(30,69,108,.10);color:var(--isr-navy,#1e456c);} .ijk-typ-sym svg{width:23px;height:23px;} .ijk-typ-h{font-size:19px;font-weight:800;color:var(--isr-navy);letter-spacing:-.01em;} .ijk-typ-t{font-size:15px;color:var(--isr-ink);line-height:1.5;margin-top:4px;} .ijk-typ-hang{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--isr-muted,#5c6b80);margin-top:16px;} .ijk-typ-liste{display:flex;flex-direction:column;gap:5px;margin-top:8px;width:100%;} .ijk-typ-liste span{position:relative;padding-left:19px;font-size:14.5px;color:var(--isr-ink);line-height:1.45;} .ijk-typ-liste span::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:50%; background:var(--inst-cyan-600,#1c7291);} .ijk-typ--fach .ijk-typ-liste span::before{background:var(--isr-navy,#1e456c);} .ijk-typ-cta{display:inline-flex;align-items:center;gap:9px;margin-top:18px;font-size:15.5px;font-weight:800; color:var(--inst-cyan-600,#1c7291);} .ijk-typ--fach .ijk-typ-cta{color:var(--isr-navy,#1e456c);} .ijk-typ-cta svg{width:17px;height:13px;transition:transform .2s ease;} .ijk-typ:hover .ijk-typ-cta svg{transform:translateX(3px);} .ijk-typ-p{font-size:13.5px;color:var(--isr-faint);margin-top:9px;} .ijk-typ-p a{color:var(--isr-cyan-600);font-weight:700;} .ijk-typ.is-gesperrt{opacity:.7;cursor:default;background:var(--isr-bg);} .ijk-typ.is-gesperrt:hover{border-color:var(--isr-line);} .ijk-wahl-fuss{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px; margin:0;padding-top:16px;border-top:1px solid var(--isr-line);font-size:14px;color:var(--isr-muted,#5c6b80);} .ijk-wahl-fuss span{max-width:74ch;} .ijk-wahl-zurueck,.ijk-wahl-zurueck:link,.ijk-wahl-zurueck:visited{font-weight:700;white-space:nowrap; color:var(--inst-cyan-600,#1c7291);} @media(max-width:640px){ .ijk-wahl{min-height:0;gap:20px;} .ijk-typ{padding:20px 18px 18px;} } /* Maske */ .ijk-form{max-width:760px;} .ijk-sec{background:#fff;border:1px solid var(--isr-line);border-radius:var(--isr-radius); padding:20px;margin-bottom:14px;} .ijk-sec > h2{font-size:17px;font-weight:700;color:var(--isr-navy);margin:0 0 3px;} .ijk-sub{font-size:13.5px;color:var(--isr-muted);margin:0 0 16px;} .ijk-sec-geld{border-color:var(--isr-chip-line);} .ijk-fld{margin-bottom:16px;} .ijk-fld:last-child{margin-bottom:0;} .ijk-fld label,.ijk-lbl{display:block;font-size:14px;font-weight:700;color:var(--isr-navy);margin-bottom:6px;} .ijk-form input[type="text"],.ijk-form input[type="date"],.ijk-form textarea,.ijk-form select{ width:100%;font-family:inherit;font-size:16px;color:var(--isr-ink);background:#fff; border:1.5px solid var(--isr-line);border-radius:10px;padding:11px 12px;min-height:46px;} /* Dasselbe globale select{padding:...!important} trifft die Maske: ohne den Gegen-Hebel sitzen die Werte in 46-px-Feldern mit 7 px Innenabstand und passen nicht zu den Textfeldern daneben. */ .ijk-form select{padding:11px 12px !important;} .ijk-form select{appearance:none;font-weight:600;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 11px center;background-size:16px;padding-right:36px;} .ijk-form textarea{min-height:110px;resize:vertical;line-height:1.55;} .ijk-form input:focus-visible,.ijk-form textarea:focus-visible,.ijk-form select:focus-visible{ outline:2px solid var(--isr-cyan);outline-offset:2px;border-color:var(--isr-cyan-600);} .ijk-form .is-err{border-color:var(--isr-emrg);} .ijk-form input:disabled{background:var(--isr-bg);color:var(--isr-faint);} .ijk-reihe{display:flex;gap:12px;flex-wrap:wrap;} .ijk-reihe > .ijk-fld{flex:1;min-width:180px;} .ijk-reihe > .ijk-fld.ijk-fld-s{flex:0 0 130px;min-width:110px;} .ijk-reihe-eng{gap:8px;flex-wrap:nowrap;} .ijk-reihe-eng input{flex:1.4;min-width:0;} .ijk-reihe-eng select{flex:1;min-width:0;} /* ── Maske: Ablauf-Schritte ───────────────────────────────────────────────── */ .ijk-schritte{display:flex;flex-direction:column;gap:8px;} .ijk-schritt{display:flex;align-items:center;gap:10px;} .ijk-schritt-nr{flex:none;width:26px;height:26px;border-radius:50%;background:var(--isr-chip); color:var(--isr-chip-ink);display:flex;align-items:center;justify-content:center; font-size:13px;font-weight:800;} .ijk-schritt input{flex:1;min-width:0;} /* ── Maske: Bilder und Video ──────────────────────────────────────────────── */ .ijk-lbl-zahl{float:right;font-weight:600;color:var(--isr-faint);font-variant-numeric:tabular-nums;} .ijk-medien{display:flex;flex-wrap:wrap;gap:10px;} .ijk-medien.is-laedt{opacity:.55;pointer-events:none;} .ijk-medium{position:relative;margin:0;width:150px;height:104px;border-radius:var(--isr-radius-sm); overflow:hidden;background:var(--isr-bg);border:1px solid var(--isr-line);} .ijk-medium img,.ijk-medium video{width:100%;height:100%;object-fit:cover;display:block;} .ijk-medium.is-rund{width:88px;height:88px;border-radius:50%;} .ijk-medium-weg{position:absolute;top:5px;right:5px;width:26px;height:26px;padding:0; display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;cursor:pointer; background:rgba(16,32,52,.72);color:#fff;line-height:0;} .ijk-medium-weg:hover{background:var(--isr-emrg);} .ijk-medium-weg:focus-visible{outline:2px solid #fff;outline-offset:-3px;} .ijk-medium-weg svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;} .ijk-medium-weg:disabled{opacity:.5;cursor:default;} /* Die Auswahl-Fläche ist ein