/* ===== SchülerMatch – Global Styles ===== */
/* Fonts werden pro Seite via <link> geladen (parallel statt render-blockierendem @import) */

:root {
  --ink: #161a1f;
  --ink-soft: #5a6270;
  --paper: #faf8f4;
  --card: #ffffff;
  --line: #e7e3da;
  --match-green: #00c896;
  /* Am 26.8. gemessen: Dieses Token ist fast ausschliesslich SCHRIFT-
     farbe (rund 48 Stellen: Verweise im Fliesstext, Lohnangaben,
     Status-Etiketten, Zwischenueberschriften). Mit #00a87d kam es auf
     hellem Grund auf 2,9-3,0:1 - noetig sind 4,5:1. Der neue Ton ist
     dasselbe Gruen, nur tiefer, und liegt bei 5,1:1. Er stammt nicht
     von aussen, sondern steckte schon als Anfang von --verlauf-tief
     in der Palette.
     WICHTIG: --match-green (#00c896) bleibt unangetastet. Das ist die
     Markenfarbe fuer Flaechen, Logo, Verlaeufe und Schrift auf dunklem
     Grund - dort ist sie richtig. Geaendert wird nur, was als kleine
     Schrift auf hellem Grund steht. */
  --match-green-dark: #00795c;
  /* Am 26.8. gemessen: Das alte #ff6b4a hatte auf hellem Grund nur
     2,66:1 - noetig sind 4,5:1. Betroffen war ausgerechnet die
     Fehlermeldung unter einem Formularfeld, also der Text, den jemand
     am dringendsten lesen muss. Dieser Ton ist dieselbe Farbe, nur
     tiefer, und kommt auf 6,1:1 (weisse Schrift darauf: ebenfalls 6,1).
     Nicht #b04a30, obwohl der die 4,5 auch schafft: Auf den blassen
     Coral-Toenungen der Status-Etiketten landete der nur bei 4,48 -
     genau auf der Kante. Dieser Ton haelt dort 5,2:1.
     Geprueft: Coral steht nirgends auf dunklem Grund - die Klasse
     .eyebrow-light heisst nur so, sitzt aber auf hellem Papier. */
  --coral: #a5442c;
  --indigo: #2b2f8f;
  /* Marken-Verlauf aus dem Logo: Teal (Schüler) -> Indigo (Arbeitgeber) = das Match */
  --verlauf: linear-gradient(120deg, #00c896 0%, #2b2f8f 100%);
  /* Dunklere Variante für Flächen mit weißem TEXT (Kontrast >= 4.5:1 auch am Teal-Ende) */
  --verlauf-tief: linear-gradient(120deg, #00795c 0%, #2b2f8f 100%);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'IBM Plex Sans', sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* SCROLL-REVEAL */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}
h1, h2, h3, .display { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; margin: 0; }
/* Variante "Zwei Seiten, ein Match": Indigo strukturiert (Abschnitts-Überschriften) */
h2 { color: var(--indigo); }
.mono { font-family: 'IBM Plex Mono', monospace; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* NAV */
nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; max-width: 1120px; margin: 0 auto;
  position: sticky; top: 0; z-index: 30;
  background: var(--paper);
  transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  border-bottom: 1px solid transparent;
}
/* Beim Scrollen: voll deckend + Schatten, damit nichts durchscheint */
nav.scrolled {
  background: var(--card);
  border-bottom-color: var(--line);
  box-shadow: 0 4px 20px rgba(22,26,31,0.06);
}
.logo { display: flex; align-items: center; gap: 9px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1.35rem; }
.logo-mark {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, var(--match-green), var(--indigo));
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 14px; font-weight: 700;
}
.logo-img { height: 30px; width: auto; display: block; }
/* Aus demselben Grund wie in der Fusszeile: unter 28px wird die
   Wortmarke unleserlich. */
@media (max-width: 880px) { .logo-img { height: 28px; } }
.nav-links { display: flex; gap: 30px; font-weight: 500; font-size: 0.95rem; color: var(--ink-soft); }
.nav-links a:hover { color: var(--ink); }

/* BUTTONS */
.btn {
  border: none; border-radius: 12px; padding: 12px 22px;
  font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: 0.95rem;
  cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-dark { background: var(--ink); color: white; }
.btn-dark:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(22,26,31,0.25); }
.btn-green {
  background: var(--verlauf-tief);
  color: #fff;
  box-shadow: 0 2px 10px rgba(24,60,120,0.22);
}
.btn-green:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(24,60,120,0.32); }
.btn-outline { background: transparent; border: 1.5px solid var(--line); color: var(--ink); }
.btn-outline:hover { border-color: rgba(43,47,143,0.45); color: var(--indigo); }
.btn-full { width: 100%; text-align: center; padding: 14px; font-size: 1rem; }
.btn:active { transform: scale(0.97); }

/* FOCUS STATES (Accessibility) */
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--match-green-dark); outline-offset: 2px; border-radius: 8px;
}
.form-group input:focus, .form-group select:focus {
  border-color: var(--match-green);
  box-shadow: 0 0 0 3px rgba(0,200,150,0.18);
}

/* NAV TOGGLE (mobile hamburger) */
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 8px;
}
.nav-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ENTRANCE ANIMATIONS */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-grid > div:first-child { animation: fadeInUp 0.7s ease both; }
.match-stage { animation: fadeInUp 0.7s ease 0.1s both; }
.job-card { animation: fadeInUp 0.5s ease both; }
@media (prefers-reduced-motion: reduce) {
  .hero-grid > div:first-child, .match-stage, .step-card, .track-card, .job-card { animation: none; }
}

/* HERO */
.hero { padding: 90px 24px 60px; }
.hero-grid {
  max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(43,47,143,0.07); color: var(--indigo);
  border: 1px solid rgba(43,47,143,0.22);
  padding: 6px 14px; border-radius: 100px; font-size: 0.8rem;
  font-family: 'IBM Plex Mono', monospace; margin-bottom: 22px;
}
.hero h1 { font-size: 3.6rem; line-height: 1.05; letter-spacing: -1.2px; }
.hero h1 .accent { color: var(--match-green-dark); }
.hero p.lead { margin-top: 20px; font-size: 1.12rem; color: var(--ink-soft); max-width: 460px; }
.hero-ctas { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }
.trust-row { margin-top: 36px; display: flex; gap: 28px; flex-wrap: wrap; }
.trust-row div { font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; color: var(--ink-soft); }
.trust-row b { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.4rem; color: var(--ink); }

/* MATCH VISUAL */
.match-stage {
  position: relative; height: 440px;
  display: flex; align-items: center; justify-content: center;
}
.match-card {
  position: absolute; width: 240px;
  background: var(--card); border-radius: var(--radius);
  box-shadow: 0 20px 45px rgba(22,26,31,0.12);
  padding: 22px; border: 1px solid var(--line);
}
.card-student { top: 10px; left: 0; transform: rotate(-6deg); z-index: 2; }
.card-job { bottom: 10px; right: 0; transform: rotate(5deg); z-index: 1; }
.card-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--match-green), var(--indigo));
  margin-bottom: 14px;
}
.card-job .card-avatar { background: linear-gradient(135deg, var(--coral), var(--indigo)); border-radius: 10px; }
.match-card h4 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1rem; margin-bottom: 4px; }
.match-card p { font-size: 0.82rem; color: var(--ink-soft); margin: 0 0 12px; }
.card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.card-tags span {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem;
  background: var(--paper); border: 1px solid var(--line);
  padding: 3px 8px; border-radius: 6px; color: var(--ink-soft);
}
.match-badge {
  position: absolute; z-index: 3;
  background: var(--ink); color: white;
  padding: 10px 20px; border-radius: 100px;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 0.95rem;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 12px 30px rgba(22,26,31,0.25);
}
.match-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--match-green); }

/* SECTIONS */
section { padding: 130px 24px; }
.section-head { max-width: 600px; margin: 0 auto 50px; text-align: center; }
.section-head .eyebrow-light {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; color: var(--coral);
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; display: block;
}
.section-head h2 { font-size: 2.6rem; letter-spacing: -0.5px; }
.section-head p { margin-top: 14px; color: var(--ink-soft); font-size: 1.05rem; }

/* STEPS */
.steps {
  max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.step-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px;
}
.step-num {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--paper); display: flex; align-items: center; justify-content: center;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 0.95rem;
  margin-bottom: 18px; color: var(--match-green-dark);
}
.step-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.step-card p { font-size: 0.92rem; color: var(--ink-soft); margin: 0; }

/* TRACKS */
.tracks { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.track-card { border-radius: 22px; padding: 38px; }
.track-card.students { background: var(--ink); color: white; }
.track-card.employers { background: var(--card); border: 1px solid var(--line); }
.tag {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.74rem;
  padding: 4px 10px; border-radius: 6px; display: inline-block; margin-bottom: 18px;
}
.students .tag { background: rgba(0,200,150,0.18); color: var(--match-green); }
.employers .tag { background: var(--paper); color: var(--ink-soft); }
.track-card h3 { font-size: 1.55rem; margin-bottom: 12px; }
.track-card ul { list-style: none; padding: 0; margin: 22px 0; }
.track-card li { display: flex; gap: 10px; margin-bottom: 12px; font-size: 0.94rem; align-items: flex-start; }
.students li { color: rgba(255,255,255,0.8); }
.employers li { color: var(--ink-soft); }
.check { color: var(--match-green); flex-shrink: 0; }
.employers .check { color: var(--match-green-dark); }

/* BEISPIEL-JOBS (Startseite) */
.preview-jobs-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.preview-jobs-footer { text-align: center; margin-top: 44px; }
@media (max-width: 880px) { .preview-jobs-grid { grid-template-columns: 1fr; } }

/* FAQ */
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.faq-question {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 22px 26px; display: flex; align-items: center; justify-content: space-between;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 1.02rem; color: var(--ink);
}
.faq-question .faq-icon { font-size: 1.3rem; color: var(--match-green-dark); transition: transform 0.25s ease; flex-shrink: 0; margin-left: 16px; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-answer p { padding: 0 26px 22px; margin: 0; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.65; }

/* ABSCHLUSS-CTA */
.final-cta-section { padding: 20px 24px 100px; }
.final-cta {
  background: linear-gradient(135deg, #00543f 0%, #232766 70%); border-radius: 32px; padding: 80px 40px; text-align: center;
  max-width: 1120px; margin: 0 auto;
}
.final-cta h2 { color: white; font-size: 2.4rem; letter-spacing: -0.5px; }
.final-cta p { color: rgba(255,255,255,0.7); margin-top: 16px; font-size: 1.05rem; }
.final-cta .hero-ctas { justify-content: center; margin-top: 34px; }
@media (max-width: 880px) { .final-cta { padding: 56px 24px; } .final-cta h2 { font-size: 1.8rem; } }

/* AUTH FORMS (login / register) */
.auth-page { min-height: 100vh; display: flex; flex-direction: column; }
.auth-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.auth-box {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 24px; padding: 42px; width: 100%; max-width: 440px;
  box-shadow: 0 20px 50px rgba(22,26,31,0.08);
  animation: fadeInUp 0.6s cubic-bezier(0.16,1,0.3,1) both;
}
.auth-box h2 { font-size: 1.6rem; margin-bottom: 6px; }
.auth-box .sub { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 28px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 7px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line);
  border-radius: 10px; font-family: 'IBM Plex Sans', sans-serif; font-size: 0.95rem;
  background: var(--paper); color: var(--ink); outline: none;
  transition: border-color 0.15s;
}
.form-group textarea { resize: vertical; min-height: 80px; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--match-green); }
.auth-switch { margin-top: 20px; text-align: center; font-size: 0.9rem; color: var(--ink-soft); }
.auth-switch a { color: var(--match-green-dark); font-weight: 600; }
.role-tabs { display: flex; gap: 10px; margin-bottom: 28px; }
.role-tab {
  flex: 1; padding: 10px; text-align: center; border-radius: 10px;
  border: 1.5px solid var(--line); cursor: pointer; font-weight: 600;
  font-size: 0.88rem; transition: all 0.15s;
  /* Sind echte <button> (damit per Tastatur bedienbar) - Browser-Optik zuruecksetzen */
  background: var(--card); color: var(--ink); font-family: 'IBM Plex Sans', sans-serif;
}
.role-tab.active { border-color: var(--match-green); background: rgba(0,200,150,0.08); color: var(--match-green-dark); }
.consent-group { background: var(--paper); border-radius: 10px; padding: 14px; }
.consent-label { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; font-size: 0.85rem; cursor: pointer; }
.consent-label input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; accent-color: var(--match-green); cursor: pointer; }

/* GROSSE SUCHE (Mobbin-Stil) */
.search-hero { position: relative; max-width: 640px; margin-bottom: 18px; }
.search-hero .search-icon {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; stroke: var(--ink-soft); fill: none; stroke-width: 2; pointer-events: none;
}
.search-hero input {
  width: 100%; padding: 16px 20px 16px 50px; font-size: 1.05rem;
  border: 1.5px solid var(--line); border-radius: 16px; background: var(--card);
  outline: none; font-family: 'IBM Plex Sans', sans-serif;
  box-shadow: 0 4px 18px rgba(22,26,31,0.05);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search-hero input:focus { border-color: var(--match-green); box-shadow: 0 0 0 4px rgba(0,200,150,0.12); }

/* KATEGORIE-PILLS */
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.pill {
  border: 1.5px solid var(--line); background: var(--card); color: var(--ink-soft);
  padding: 8px 16px; border-radius: 100px; font-weight: 600; font-size: 0.85rem;
  cursor: pointer; font-family: 'IBM Plex Sans', sans-serif; transition: all 0.15s;
}
.pill:hover { border-color: var(--ink); color: var(--ink); }
.pill.active { background: var(--indigo); border-color: var(--indigo); color: #fff; }
@media (max-width: 880px) {
  .pill-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .pill { flex: 0 0 auto; }
}

/* KATEGORIE-KACHELN (Startseite) */
.kat-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kat-tile {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 22px 18px; display: flex; align-items: center; gap: 12px;
  font-weight: 600; font-size: 0.95rem;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.kat-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(22,26,31,0.09); border-color: rgba(0,200,150,0.4); }
.kat-tile .kat-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: rgba(0,200,150,0.1); color: var(--match-green-dark);
  display: flex; align-items: center; justify-content: center;
}
.kat-tile .kat-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }
@media (max-width: 880px) { .kat-grid { grid-template-columns: repeat(2, 1fr); } }

/* LOHN-HERVORHEBUNG */
.job-meta .lohn-highlight {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 0.95rem;
  color: var(--match-green-dark);
}

/* JOB FILTER */
.filter-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.filter-row input, .filter-row select {
  padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 10px;
  font-family: 'IBM Plex Sans', sans-serif; font-size: 0.9rem; background: var(--card); color: var(--ink);
  outline: none; transition: border-color 0.15s;
}
.filter-row input:focus, .filter-row select:focus { border-color: var(--match-green); }
.filter-row input { flex: 1; min-width: 180px; }
.filter-row select { min-width: 160px; }
@media (max-width: 880px) {
  .filter-row input, .filter-row select, .filter-row .btn { width: 100%; min-width: 0; flex: 1 1 100%; }
}

/* JOBS LIST */
.jobs-page { max-width: 1120px; margin: 0 auto; padding: 40px 24px; }
.jobs-header { margin-bottom: 32px; }
.jobs-header h1 { font-size: 2rem; margin-bottom: 8px; }
.jobs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.job-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; transition: transform 0.15s, box-shadow 0.15s;
}
/* feine Verlaufs-Oberkante: die "Match-Linie" auf jeder Job-Karte */
.job-card::before {
  content: ''; position: absolute; top: 0; left: 14px; right: 14px; height: 3px;
  background: var(--verlauf); border-radius: 0 0 3px 3px; opacity: 0.9;
}
.job-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(22,26,31,0.14); border-color: rgba(0,200,150,0.35); }
.job-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.company-logo {
  width: 48px; height: 48px; border-radius: 12px;
  background: linear-gradient(135deg, var(--coral), var(--indigo));
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 1.1rem;
}
.job-badge {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem;
  background: rgba(0,200,150,0.1); color: var(--match-green-dark);
  padding: 4px 10px; border-radius: 6px;
  display: inline-flex; align-items: center; gap: 4px;
}
.job-card h3 { font-size: 1.05rem; margin-bottom: 4px; }
.job-card .company-name { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 12px; display: flex; align-items: center; gap: 5px; }
.job-description {
  font-size: 0.85rem; color: var(--ink-soft); margin: 0 0 12px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.job-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.82rem; color: var(--ink-soft); font-family: 'IBM Plex Mono', monospace; }
.job-meta span { display: flex; align-items: center; gap: 5px; }
.meta-icon { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.75; }
.kategorie-chip {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem;
  background: rgba(43,47,143,0.07); color: var(--indigo);
  border: 1px solid rgba(43,47,143,0.18);
  padding: 2px 8px; border-radius: 100px; margin-left: 6px; white-space: nowrap;
}

/* MERKEN-BUTTON (Herz) */
.merken-btn {
  position: absolute; top: 16px; right: 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: 50%;
  width: 36px; height: 36px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s ease, border-color 0.15s ease; z-index: 2;
}
.merken-btn:hover { transform: scale(1.12); border-color: var(--coral); }
.merken-btn svg { width: 18px; height: 18px; stroke: var(--ink-soft); fill: none; stroke-width: 1.8; transition: fill 0.15s, stroke 0.15s; }
.merken-btn.gemerkt svg { fill: var(--coral); stroke: var(--coral); }
.job-card { position: relative; }
.job-card--clickable { cursor: pointer; }

/* BEWERBUNGS-STATUS (kein Button, sondern Status-Anzeige) */
.job-status {
  margin-top: 14px; padding: 11px 14px; border-radius: 12px; text-align: center;
  font-size: 0.85rem; font-weight: 600; font-family: 'IBM Plex Sans', sans-serif;
  border: 1px dashed var(--line); cursor: default; box-sizing: border-box;
}
.job-status--ausstehend { background: rgba(255,193,7,0.08); color: #a67c00; border-color: rgba(255,193,7,0.3); }
.job-status--angenommen { background: rgba(0,200,150,0.08); color: var(--match-green-dark); border-color: rgba(0,200,150,0.3); }
.job-status--abgelehnt { background: var(--paper); color: var(--ink-soft); border-color: var(--line); }
.jobs-count { font-size: 0.78rem; color: var(--ink-soft); margin: 0 0 16px; }
/* Die Trefferzahl steht erst da, wenn die Daten kommen. Ohne reservierte
   Zeile ist der Absatz vorher 0px hoch und schiebt beim Füllen die ganze
   Liste nach unten. Gemessen: 18,7px Sprung auf jeder Jobseite. */
.jobs-count { min-height: 1.4em; }
.job-badge--pausiert { background: rgba(255,193,7,0.12); color: #a67c00; }

/* SIDEBAR NAVIGATION */
.hamburger-btn {
  background: none; border: 1.5px solid var(--line); border-radius: 10px;
  font-size: 1.1rem; cursor: pointer; padding: 8px 12px; margin-right: 4px; line-height: 1;
}
.hamburger-btn:hover { background: var(--paper); }
.sidebar-overlay {
  display: none; position: fixed; inset: 0; background: rgba(22,26,31,0.35); z-index: 40;
}
.sidebar-overlay.open { display: block; }
.sidebar {
  position: fixed; top: 0; left: -280px; width: 260px; height: 100%;
  background: var(--card); border-right: 1px solid var(--line); z-index: 50;
  padding: 90px 16px 16px; display: flex; flex-direction: column; gap: 6px;
  transition: left 0.25s ease; box-shadow: 8px 0 30px rgba(22,26,31,0.08);
}
.sidebar.open { left: 0; }
.sidebar-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 1px; color: var(--ink-soft); padding: 6px 16px; margin-top: 8px;
}
.sidebar-item {
  position: relative; display: flex; align-items: center; gap: 12px;
  text-align: left; background: none; border: none; padding: 12px 16px;
  border-radius: 12px; font-weight: 600; font-size: 0.95rem; cursor: pointer;
  color: var(--ink); font-family: 'IBM Plex Sans', sans-serif; transition: background 0.15s, color 0.15s;
}
.sidebar-item svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; flex-shrink: 0; }
.sidebar-item:hover { background: var(--paper); }
.sidebar-item.active { background: rgba(0,200,150,0.1); color: var(--match-green-dark); }
.sidebar-item.active::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; background: var(--match-green); border-radius: 0 3px 3px 0;
}
.sidebar-item .sidebar-badge {
  margin-left: auto; background: var(--coral); color: #fff;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.66rem; font-weight: 500;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 100px;
  display: flex; align-items: center; justify-content: center;
}
.sidebar-badge:empty { display: none; }
.sidebar-user {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px;
  border-radius: 12px; background: var(--paper); border: 1px solid var(--line);
}
.sidebar-user .cv-photo-preview { width: 36px; height: 36px; font-size: 0.9rem; }
.sidebar-user b { font-size: 0.88rem; display: block; }
.sidebar-user span { font-size: 0.72rem; color: var(--ink-soft); font-family: 'IBM Plex Mono', monospace; }

.dashboard-view { display: none; }
.dashboard-view.active { display: block; }

/* GAMIFICATION – ABZEICHEN */
.abzeichen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.abzeichen {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px 16px; text-align: center; transition: transform 0.15s;
}
.abzeichen.erreicht { border-color: rgba(0,200,150,0.4); background: rgba(0,200,150,0.05); }
.abzeichen.erreicht:hover { transform: translateY(-3px); }
.abzeichen .icon { font-size: 2rem; display: block; margin-bottom: 8px; filter: grayscale(1) opacity(0.35); }
.abzeichen.erreicht .icon { filter: none; }
.abzeichen b { font-size: 0.9rem; display: block; margin-bottom: 3px; }
.abzeichen span { font-size: 0.75rem; color: var(--ink-soft); line-height: 1.4; }

/* BEWERBER-AMPEL */
.ampel { display: inline-flex; align-items: center; gap: 5px; font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; font-weight: 500; padding: 3px 9px; border-radius: 100px; margin-left: 6px; }
.ampel-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ampel-gruen { background: rgba(0,200,150,0.1); color: var(--match-green-dark); }
.ampel-gruen .ampel-dot { background: var(--match-green); }
.ampel-gelb { background: rgba(240,180,41,0.12); color: #a67c00; }
.ampel-gelb .ampel-dot { background: #f0b429; }
.ampel-rot { background: rgba(165,68,44,0.1); color: var(--coral); }
.ampel-rot .ampel-dot { background: var(--coral); }

/* VERIFIZIERUNG */
.verify-badge {
  padding: 12px 18px; border-radius: 12px; font-size: 0.88rem; font-weight: 600;
  margin: 18px 0 0;
}
.verify-badge--ok { background: rgba(0,200,150,0.1); color: var(--match-green-dark); border: 1px solid rgba(0,200,150,0.25); }
.verify-badge--pending { background: rgba(255,193,7,0.12); color: #a67c00; border: 1px solid rgba(255,193,7,0.3); }
.verify-badge--missing { background: rgba(165,68,44,0.1); color: var(--coral); border: 1px solid rgba(165,68,44,0.25); }

/* DASHBOARD STATS */
.stats-row { display: flex; gap: 14px; margin-top: 20px; flex-wrap: wrap; }
.stat-box {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 22px; min-width: 140px;
}
.stat-box b { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.6rem; color: var(--ink); }
.stat-box span { font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; color: var(--ink-soft); }

/* SO SCHÜTZEN WIR DICH */
.schutz-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.schutz-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; }
.schutz-icon {
  width: 48px; height: 48px; border-radius: 12px; margin-bottom: 16px;
  background: rgba(0,200,150,0.1); color: var(--match-green-dark);
  display: flex; align-items: center; justify-content: center;
}
.schutz-icon svg { width: 24px; height: 24px; }
.schutz-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.schutz-card p { font-size: 0.92rem; color: var(--ink-soft); margin: 0; line-height: 1.6; }
@media (max-width: 880px) { .schutz-grid { grid-template-columns: 1fr; } }

.arbeitszeit-chip {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem;
  background: rgba(165,68,44,0.08); color: var(--coral);
  border: 1px solid rgba(165,68,44,0.2);
  padding: 2px 8px; border-radius: 100px; margin-left: 6px; white-space: nowrap;
}

/* UMKREIS-SLIDER */
.radius-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.radius-row label { font-size: 0.8rem; color: var(--ink); }
.radius-row label b { color: var(--match-green-dark); }
.radius-row input[type="range"] { flex: 1; min-width: 160px; max-width: 320px; accent-color: var(--match-green); }
.distanz-chip {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem;
  background: rgba(43,47,143,0.07); color: var(--indigo);
  border: 1px solid rgba(43,47,143,0.15); padding: 2px 8px; border-radius: 100px; margin-left: 6px;
}

/* JOB-INSIGHTS (Firmen-Dashboard) */
.job-insights {
  display: flex; gap: 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 0.8rem; color: var(--ink-soft); font-family: 'IBM Plex Mono', monospace;
}
.job-insights b { color: var(--ink); font-family: 'Bricolage Grotesque', sans-serif; }

/* BENACHRICHTIGUNGS-GLOCKE */
.glocke-wrap { position: relative; }
.glocke-btn {
  position: relative; background: none; border: 1.5px solid var(--line); border-radius: 10px;
  width: 40px; height: 40px; cursor: pointer; color: var(--ink);
  display: flex; align-items: center; justify-content: center; transition: background 0.15s, border-color 0.15s;
}
.glocke-btn:hover { background: var(--paper); border-color: var(--ink); }
.glocke-btn svg { width: 20px; height: 20px; }
.glocke-badge {
  position: absolute; top: -6px; right: -6px; background: var(--coral); color: #fff;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; font-weight: 500;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 100px;
  display: none; align-items: center; justify-content: center;
}
.glocke-badge.aktiv { display: flex; }
.glocke-dropdown {
  display: none; position: absolute; top: 48px; right: 0; width: 320px; max-height: 400px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; z-index: 60;
  box-shadow: 0 18px 44px rgba(22,26,31,0.16); padding: 8px;
}
.glocke-dropdown.offen { display: block; }
.glocke-titel { font-family: 'IBM Plex Mono', monospace; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-soft); padding: 10px 12px 6px; }
.benachr-item {
  display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border-radius: 10px;
  text-align: left; width: 100%; background: none; border: none; cursor: pointer; font-family: 'IBM Plex Sans', sans-serif;
}
.benachr-item:hover { background: var(--paper); }
.benachr-item .b-icon { font-size: 1.1rem; flex-shrink: 0; }
.benachr-item .b-text { font-size: 0.85rem; color: var(--ink); line-height: 1.4; }
.benachr-item .b-text b { font-weight: 600; }
.benachr-leer { padding: 24px 12px; text-align: center; color: var(--ink-soft); font-size: 0.85rem; }
@media (max-width: 640px) { .glocke-dropdown { width: calc(100vw - 32px); right: -60px; } }

/* CHAT / NACHRICHTEN */
.konv-liste { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.konv-item {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; cursor: pointer; font-family: 'IBM Plex Sans', sans-serif; transition: border-color 0.15s, transform 0.15s;
}
.konv-item:hover { border-color: rgba(0,200,150,0.4); transform: translateY(-2px); }
.konv-item .cv-photo-preview { width: 42px; height: 42px; font-size: 1rem; }
.konv-item b { font-size: 0.95rem; display: block; }
.konv-item span { font-size: 0.8rem; color: var(--ink-soft); }
.konv-item .konv-badge { margin-left: auto; background: var(--coral); color: #fff; font-family: 'IBM Plex Mono', monospace; font-size: 0.66rem; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 100px; display: flex; align-items: center; justify-content: center; }

.chat-box { max-width: 720px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.chat-kopf { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.chat-kopf .cv-photo-preview { width: 40px; height: 40px; font-size: 0.95rem; }
.chat-kopf b { font-size: 0.95rem; }
.chat-kopf .zurueck { margin-left: auto; background: none; border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 0.82rem; color: var(--ink-soft); }
.chat-thread { height: 380px; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 10px; background: var(--paper); }
.chat-msg { max-width: 75%; padding: 10px 14px; border-radius: 16px; font-size: 0.9rem; line-height: 1.45; position: relative; }
.chat-msg p { margin: 0; white-space: pre-wrap; word-break: break-word; }
.chat-msg--ich { align-self: flex-end; background: var(--match-green); color: var(--ink); border-bottom-right-radius: 4px; }
.chat-msg--anderer { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.chat-zeit { display: block; font-size: 0.66rem; opacity: 0.6; margin-top: 3px; text-align: right; }
.chat-form { display: flex; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--line); }
.chat-input { flex: 1; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 10px; font-family: 'IBM Plex Sans', sans-serif; font-size: 0.92rem; background: var(--paper); outline: none; }
.chat-input:focus { border-color: var(--match-green); }

/* TOAST-NACHRICHTEN */
.toast-container {
  position: fixed; top: 20px; right: 20px; z-index: 200;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--ink); color: #fff; padding: 13px 18px; border-radius: 12px;
  font-size: 0.9rem; font-weight: 500; box-shadow: 0 12px 30px rgba(22,26,31,0.25);
  opacity: 0; transform: translateX(20px); transition: opacity 0.3s, transform 0.3s;
  max-width: 340px;
}
.toast.sichtbar { opacity: 1; transform: translateX(0); }
.toast-icon {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700;
}
.toast--ok .toast-icon { background: var(--match-green); color: var(--ink); }
.toast--fehler .toast-icon { background: var(--coral); color: #fff; }
.toast--info .toast-icon { background: #f0b429; color: var(--ink); }
@media (max-width: 640px) { .toast-container { left: 12px; right: 12px; top: 12px; } .toast { max-width: none; } }

/* SKELETON LOADER */
.skeleton-card {
  /* 2.9.2026: Die Jobkarte hat eine Zeile dazubekommen (wie alt die
     Anzeige ist), echte Karten sind seitdem rund 319px hoch. */
  height: 305px; border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(90deg, var(--card) 25%, var(--paper) 50%, var(--card) 75%);
  background-size: 200% 100%; animation: skeleton-pulse 1.4s ease-in-out infinite;
}
@keyframes skeleton-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton-card { animation: none; } }
/* Solange Platzhalter im Gitter stehen, wird der Bereich hoch genug
   gehalten. Sonst steht die Fußzeile beim Laden mitten im Bild und
   rutscht weg, sobald die Treffer da sind (gemessen: CLS 0,037). */
.jobs-grid:has(.skeleton-card) { min-height: 70vh; }

/* EMPTY STATES */
.empty-state {
  grid-column: 1 / -1; text-align: center; padding: 60px 24px;
  color: var(--ink-soft); display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.empty-state svg { width: 48px; height: 48px; opacity: 0.35; }
.empty-state p { font-size: 0.95rem; margin: 0; }

/* Vorschlaege im leeren Trefferfall (4.9.2026).
   Statt "keine Jobs" plus einem Knopf, der alles wegwirft, steht hier je
   ein Knopf pro Filter, dessen Ruecknahme wieder Treffer bringt - mit der
   Zahl daneben, damit die Entscheidung ohne Ausprobieren faellt. */
.filter-vorschlaege {
  display: flex; flex-direction: column; gap: 8px;
  width: 100%; max-width: 340px; margin-top: 4px;
}
.filter-vorschlaege .btn {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; text-align: left; font-size: 0.86rem; padding: 10px 14px;
}
.filter-vorschlaege .mono {
  font-size: 0.72rem; color: var(--ink-soft); white-space: nowrap;
}

/* FOOTER */
footer { background: #232766; color: rgba(255,255,255,0.72); padding: 50px 24px 30px; }
.footer-inner { max-width: 1120px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
footer .logo { color: white; }
/* Die Wortmarke ist ein Bild (480x91). Bei 26px Hoehe blieben pro
   Buchstabe rund 8px - die Punze im "e" und im "a" fiel dabei zu, und
   "SchuelerMatch" las sich als Klumpen. Auf dunklem Grund faellt das
   besonders auf, weil weisse Schrift dort zusaetzlich auslaeuft.
   Gemessen am 2.9.2026: bei 26px zu, bei 32px grenzwertig, ab 34px offen.
   Mehr Pixel in der Datei helfen dabei NICHT - die Datei ist bereits 3,5x
   so gross wie die Anzeige. Die Anzeigegroesse ist die Grenze. */
.footer-logo-img { height: 34px; width: auto; display: block; }
.footer-links { display: flex; gap: 22px; font-size: 0.86rem; flex-wrap: wrap; }
.footer-links a:hover { color: white; }
.footer-bottom { max-width: 1120px; margin: 28px auto 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.78rem; opacity: 0.55; font-family: 'IBM Plex Mono', monospace; }

.note-banner {
  background: var(--match-green); color: var(--ink); text-align: center;
  padding: 10px 16px; font-size: 0.85rem; font-family: 'IBM Plex Mono', monospace;
}

/* LEGAL PAGES (Impressum / Datenschutz) */
.legal-page { max-width: 760px; padding: 50px 24px 80px; }
.legal-page h1 { font-size: 2.1rem; margin-bottom: 8px; }
.legal-sub { color: var(--ink-soft); margin-bottom: 40px; font-family: 'IBM Plex Mono', monospace; font-size: 0.85rem; }
.legal-page section { padding: 0; margin-bottom: 32px; }
.legal-page h2 { font-size: 1.15rem; margin-bottom: 10px; }
.legal-page p, .legal-page li { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.7; }
.legal-page ul { padding-left: 20px; margin: 0; }
.legal-page li { margin-bottom: 6px; }
.legal-page a { color: var(--match-green-dark); text-decoration: underline; }
/* Knoepfe sind keine Fliesstext-Links. Die Zeile darueber ist
   spezifischer als .btn-green und faerbte deren Schrift gruen ein -
   gruen auf gruenem Verlauf, gemessen 1,77:1 statt der vorgesehenen
   5,4:1 (26.8. auf fairer-lohn, jobideen und ferienjob). Hier wird die
   eigentliche Knopffarbe zurueckgeholt. */
.legal-page a.btn { text-decoration: none; }
.legal-page a.btn-green, .legal-page a.btn-dark { color: #fff; }
.legal-page a.btn-outline { color: var(--ink); }
.legal-page a.btn-outline:hover { color: var(--indigo); }
.legal-highlight {
  background: rgba(0,200,150,0.08); border: 1px solid rgba(0,200,150,0.25);
  border-radius: var(--radius); padding: 22px 24px;
}
.legal-highlight h2 { color: var(--match-green-dark); }
.legal-note { font-size: 0.82rem; font-style: italic; margin-top: 16px; }

/* BEWERBER-LISTE (Firmen-Dashboard) */
.bewerber-list { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.bewerber-title { font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; color: var(--ink-soft); margin-bottom: 10px; }
.bewerber-item { font-size: 0.85rem; padding: 10px; background: var(--paper); border-radius: 8px; margin-bottom: 8px; }
.bewerber-item a { color: var(--match-green-dark); }
.cv-block { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 0.82rem; }
.status-badge {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem;
  padding: 2px 8px; border-radius: 100px; margin-left: 6px; white-space: nowrap;
}
.status-ausstehend { background: rgba(255,193,7,0.12); color: #a67c00; border: 1px solid rgba(255,193,7,0.3); }
.status-angenommen { background: rgba(0,200,150,0.1); color: var(--match-green-dark); border: 1px solid rgba(0,200,150,0.25); }
.status-abgelehnt { background: rgba(165,68,44,0.1); color: var(--coral); border: 1px solid rgba(165,68,44,0.25); }

/* POST JOB BOX (Firmen-Dashboard) */
.post-job-box {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 32px; max-width: 640px;
}

/* CV BUILDER (Lebenslauf) */
.cv-builder { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.cv-editor {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 32px;
}
.photo-upload-row { display: flex; align-items: center; gap: 16px; }
.cv-photo-preview {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--match-green), var(--indigo));
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 1.3rem;
  font-family: 'Bricolage Grotesque', sans-serif;
}

.cv-preview {
  position: sticky; top: 20px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 22px; padding: 34px;
  box-shadow: 0 20px 50px rgba(22,26,31,0.1);
}
.cv-preview-header { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.cv-preview-photo {
  width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--match-green), var(--indigo));
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 1.5rem;
  font-family: 'Bricolage Grotesque', sans-serif;
}
.cv-preview-name { font-size: 1.3rem; }
.cv-preview-school { font-size: 0.85rem; color: var(--ink-soft); margin-top: 3px; }
.cv-preview-section { margin-bottom: 20px; }
.cv-preview-section h4 {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--match-green-dark); margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.section-icon { width: 14px; height: 14px; flex-shrink: 0; }
.cv-preview-section p { font-size: 0.9rem; color: var(--ink); line-height: 1.6; margin: 0; }
.cv-preview-image { width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); display: block; }
.cv-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-tag {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem;
  background: var(--paper); border: 1px solid var(--line);
  padding: 4px 10px; border-radius: 6px; color: var(--ink-soft);
}
.cv-preview-empty { color: var(--ink-soft); font-size: 0.9rem; font-style: italic; }

@media (max-width: 880px) {
  .cv-builder { grid-template-columns: 1fr; }
  .cv-preview { position: static; }
}

/* BLOCK EDITOR (Lebenslauf-Bausteine) */
.block-list { display: flex; flex-direction: column; gap: 14px; margin: 24px 0; }
.block-item {
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 18px;
}
.block-item-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.block-type-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; text-transform: uppercase;
  color: var(--ink-soft); background: var(--card); border: 1px solid var(--line);
  padding: 3px 8px; border-radius: 6px;
}
.block-item-controls { margin-left: auto; display: flex; gap: 4px; }
.block-item-controls button {
  background: none; border: 1px solid var(--line); border-radius: 6px; width: 28px; height: 28px;
  cursor: pointer; font-size: 0.85rem; color: var(--ink-soft);
}
.block-item-controls button:hover { background: var(--card); }
.block-item input[type="text"], .block-item textarea {
  width: 100%; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 8px;
  font-family: 'IBM Plex Sans', sans-serif; font-size: 0.9rem; background: var(--card); margin-bottom: 8px;
}
.block-item textarea { min-height: 90px; resize: vertical; }
.block-image-preview { width: 100%; max-height: 200px; object-fit: cover; border-radius: 10px; margin-top: 8px; display: block; border: 1px solid var(--line); }
.block-add-row { display: flex; gap: 10px; flex-wrap: wrap; }
.block-add-btn { padding: 9px 16px; font-size: 0.85rem; }

/* PREMIUM-KOMPONENTEN */
.neu-badge {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; font-weight: 500;
  background: var(--coral); color: #fff; padding: 3px 8px; border-radius: 100px;
  position: absolute; top: -8px; left: 16px; letter-spacing: 0.5px;
}
.share-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1.5px solid var(--line); border-radius: 10px;
  padding: 8px 14px; font-size: 0.82rem; font-weight: 600; cursor: pointer;
  color: var(--ink-soft); font-family: 'IBM Plex Sans', sans-serif; transition: all 0.15s;
}
.share-btn:hover { border-color: var(--ink); color: var(--ink); }

/* CV VORLAGEN */
.cv-templates { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.cv-template-chip {
  border: 1.5px dashed var(--line); background: var(--paper); border-radius: 12px;
  padding: 10px 14px; font-size: 0.82rem; font-weight: 600; cursor: pointer;
  color: var(--ink-soft); font-family: 'IBM Plex Sans', sans-serif; transition: all 0.15s;
}
.cv-template-chip:hover { border-color: var(--match-green); color: var(--match-green-dark); background: rgba(0,200,150,0.06); }

/* FORTSCHRITTSBALKEN */
.cv-progress-bar { height: 6px; background: var(--line); border-radius: 100px; overflow: hidden; margin: 4px 0 10px; }
.cv-progress-bar > div { height: 100%; background: linear-gradient(90deg, var(--match-green), var(--match-green-dark)); border-radius: 100px; transition: width 0.4s cubic-bezier(0.16,1,0.3,1); }
.cv-progress-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; color: var(--ink-soft); }

/* FORMULIERUNGSHILFE */
.tipp-btn {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  background: rgba(43,47,143,0.06); border: 1px solid var(--line);
  cursor: pointer; font-size: 0.8rem; font-family: 'IBM Plex Sans', sans-serif; font-weight: 500;
  color: var(--indigo); padding: 8px 14px; border-radius: 999px;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.tipp-btn:hover { background: rgba(43,47,143,0.11); border-color: rgba(43,47,143,0.3); }
.tipp-btn:active { transform: scale(0.97); }

/* PASSWORT-STAERKE */
.pw-meter { height: 5px; background: var(--line); border-radius: 100px; overflow: hidden; margin-top: 8px; }
.pw-meter > div { height: 100%; width: 0; border-radius: 100px; transition: width 0.25s, background 0.25s; }
.pw-meter-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; margin-top: 4px; display: block; }

/* ZEILEN-EDITOR (Sprachen / Skill-Regler) */
.zeilen-editor { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.zeilen-editor input[type="text"] { flex: 1; margin-bottom: 0 !important; }
.zeilen-editor input[type="range"] { flex: 1; accent-color: var(--match-green); }
.zeilen-editor select { padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--card); font-family: 'IBM Plex Sans', sans-serif; font-size: 0.85rem; }
.skill-wert-label { font-size: 0.72rem; color: var(--ink-soft); min-width: 38px; text-align: right; }
.zeile-weg { background: none; border: 1px solid var(--line); border-radius: 6px; width: 28px; height: 28px; cursor: pointer; color: var(--ink-soft); flex-shrink: 0; }
.zeile-weg:hover { border-color: var(--coral); color: var(--coral); }

/* CV-VORSCHAU: SPRACHEN-BADGES */
.cv-sprachen { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-sprache-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 100px;
  padding: 5px 6px 5px 12px; font-size: 0.82rem; color: var(--ink);
}
.cv-sprache-badge b {
  background: var(--match-green); color: var(--ink); font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem; font-weight: 600; padding: 2px 8px; border-radius: 100px;
}

/* CV-VORSCHAU: SKILL-BALKEN */
.cv-skillbar { margin-bottom: 10px; }
.cv-skillbar-top { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 4px; }
.cv-skillbar-track { height: 7px; background: var(--paper); border: 1px solid var(--line); border-radius: 100px; overflow: hidden; }
.cv-skillbar-track > div { height: 100%; background: linear-gradient(90deg, var(--match-green), var(--indigo)); border-radius: 100px; transition: width 0.3s; }

/* CV FORTSCHRITT */
.cv-progress { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.cv-progress-item {
  display: flex; align-items: center; gap: 5px; font-size: 0.75rem; font-family: 'IBM Plex Mono', monospace;
  padding: 6px 12px; border-radius: 100px; border: 1px solid var(--line); color: var(--ink-soft); background: var(--paper);
}
.cv-progress-item.done { border-color: rgba(0,200,150,0.35); background: rgba(0,200,150,0.08); color: var(--match-green-dark); }

/* MODAL (Bewerbungsformular) */
.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(22,26,31,0.45);
  z-index: 100; align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--card); border-radius: 22px; padding: 32px; max-width: 520px; width: 100%;
  max-height: 90vh; overflow-y: auto; box-shadow: 0 30px 70px rgba(22,26,31,0.25);
}
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.modal-close { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--ink-soft); padding: 4px 8px; }
.modal-close:hover { color: var(--ink); }

/* PASSWORT-TOGGLE */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 86px; }
.pw-toggle {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; color: var(--ink-soft);
}
.pw-toggle:hover { color: var(--ink); }

/* INLINE-FELDFEHLER */
.form-group input.invalid, .form-group select.invalid {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(165,68,44,0.12);
}
.field-error { color: var(--coral); font-size: 0.78rem; margin: 6px 0 0; }
.consent-label input.invalid { outline: 2px solid var(--coral); outline-offset: 2px; }

/* AUTH MESSAGES */
.auth-msg {
  padding: 12px 14px; border-radius: 10px;
  font-size: 0.9rem; margin-bottom: 16px;
}
.auth-msg--error { background: #fff0ee; color: #c0392b; border: 1px solid #f5c6c0; }
.auth-msg--success { background: #edfaf5; color: #00a87d; border: 1px solid #b0ead6; }

/* RESPONSIVE */
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 2.2rem; }
  .match-stage { height: 340px; }
  .match-card { width: 180px; padding: 16px; }
  .steps, .tracks { grid-template-columns: 1fr; }

  nav { position: relative; flex-wrap: wrap; }
  .nav-toggle { display: flex; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 24px; right: 24px;
    flex-direction: column; gap: 4px; background: var(--card); border: 1px solid var(--line);
    border-radius: 14px; padding: 12px; box-shadow: 0 12px 30px rgba(22,26,31,0.12); z-index: 10;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 10px 12px; border-radius: 8px; }
  .nav-links a:hover { background: var(--paper); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ============================================================
   BEWERTUNGEN (Firmen-Rezensionen)
   ============================================================ */
.sterne-anzeige { display: inline-flex; gap: 1px; color: #f5b301; font-size: 0.95rem; line-height: 1; letter-spacing: 1px; }
.sterne-anzeige .leer { color: var(--line); }
.bewertung-summary { display: flex; align-items: center; gap: 10px; margin: 8px 0; flex-wrap: wrap; }
.bewertung-summary .schnitt { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--ink); }
.bewertung-summary .anzahl { color: var(--ink-soft); font-size: 0.85rem; }
.bewertung-liste { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.bewertung-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.bewertung-card .kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.bewertung-card .name { font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.bewertung-card .verifiziert { font-size: 0.7rem; color: var(--match-green-dark); font-weight: 600; white-space: nowrap; }
.bewertung-card p { margin: 4px 0 0; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.55; white-space: pre-wrap; }
.bewertung-card .datum { font-size: 0.7rem; color: var(--ink-soft); margin-top: 6px; display: block; }

/* Sterne-Auswahl (interaktiv) */
.bewerten-box { margin-top: 22px; padding: 18px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--paper); }
.bewerten-box h4 { margin: 0 0 4px; font-family: 'Bricolage Grotesque', sans-serif; font-size: 1rem; }
.bewerten-box .hinweis { font-size: 0.82rem; color: var(--ink-soft); margin: 0 0 12px; }
.sterne-wahl { display: inline-flex; gap: 5px; font-size: 1.8rem; cursor: pointer; color: var(--line); line-height: 1; }
.sterne-wahl span { transition: color 0.12s, transform 0.12s; }
.sterne-wahl span:hover { transform: scale(1.15); }
.sterne-wahl span.aktiv { color: #f5b301; }
.bewerten-box textarea { width: 100%; box-sizing: border-box; margin-top: 12px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; font-family: 'IBM Plex Sans', sans-serif; font-size: 0.9rem; background: var(--card); color: var(--ink); resize: vertical; min-height: 68px; outline: none; }
.bewerten-box textarea:focus { border-color: var(--match-green); }

/* ============================================================
   MEINE BEWERBUNGEN (Status-Übersicht mit Timeline)
   ============================================================ */
.bew-stats { display: flex; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.bew-stats > div {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 22px; min-width: 100px;
}
.bew-stats b { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.5rem; color: var(--ink); }
.bew-stats span { font-size: 0.78rem; color: var(--ink-soft); }
.bew-liste { display: flex; flex-direction: column; gap: 14px; }
.bew-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 20px;
}
.bew-card--zusage { border-color: var(--match-green); box-shadow: 0 0 0 3px rgba(0,200,150,0.08); }
.bew-card-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.bew-card-kopf b { font-size: 1.02rem; display: block; }
.bew-meta { font-size: 0.82rem; color: var(--ink-soft); display: block; margin-top: 2px; }
.bew-datum { font-size: 0.72rem; color: var(--ink-soft); white-space: nowrap; }
.bew-timeline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bew-schritt {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8rem; color: var(--ink-soft); white-space: nowrap;
}
.bew-schritt .punkt {
  width: 22px; height: 22px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 0.72rem;
  background: var(--paper); border: 1.5px solid var(--line); flex-shrink: 0;
}
.bew-schritt.done { color: var(--ink); }
.bew-schritt.done .punkt { background: rgba(0,200,150,0.12); border-color: var(--match-green); color: var(--match-green-dark); }
.bew-schritt.aktiv .punkt { border-color: #f0b429; color: #f0b429; }
.bew-schritt.gruen { color: var(--match-green-dark); font-weight: 600; }
.bew-linie { flex: 1; min-width: 18px; max-width: 70px; height: 2px; background: var(--line); border-radius: 2px; }
.bew-linie.done { background: var(--match-green); }
.bew-trost { margin: 12px 0 0; font-size: 0.85rem; color: var(--ink-soft); background: var(--paper); border-radius: 10px; padding: 10px 14px; }

/* ============================================================
   ONBOARDING-CHECKLISTE (Erste Schritte)
   ============================================================ */
.onboard-card {
  background: linear-gradient(135deg, rgba(0,200,150,0.06), rgba(43,47,143,0.05));
  border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 20px; margin-top: 18px;
}
.onboard-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.onboard-kopf b { font-size: 0.95rem; }
.onboard-weg {
  background: none; border: none; cursor: pointer; color: var(--ink-soft);
  font-size: 0.9rem; padding: 4px 8px; border-radius: 8px;
}
.onboard-weg:hover { background: var(--paper); color: var(--ink); }
.onboard-balken { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin-bottom: 14px; }
.onboard-balken-voll { height: 100%; background: linear-gradient(90deg, var(--match-green), var(--indigo)); border-radius: 3px; transition: width 0.4s ease; }
.onboard-schritte { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.onboard-schritt {
  display: flex; align-items: center; gap: 10px; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; cursor: pointer; font-family: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.onboard-schritt:not(.fertig):hover { border-color: var(--match-green); transform: translateY(-1px); }
.onboard-schritt.fertig { opacity: 0.65; cursor: default; }
.onboard-schritt b { display: block; font-size: 0.82rem; color: var(--ink); }
.onboard-schritt small { font-size: 0.7rem; color: var(--ink-soft); }
.onboard-check {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--line); display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.72rem; color: var(--match-green-dark); background: var(--paper);
}
.onboard-schritt.fertig .onboard-check { background: rgba(0,200,150,0.15); border-color: var(--match-green); }

/* ============================================================
   PDF-DESIGN-AUSWAHL (CV-Builder)
   ============================================================ */
.pdf-design-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding: 10px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
}
.pdf-design-label { font-size: 0.68rem; color: var(--ink-soft); }
.pdf-layout-chip {
  border: 1px solid var(--line); background: var(--paper); border-radius: 999px;
  padding: 5px 12px; font-size: 0.76rem; cursor: pointer; font-family: inherit;
  color: var(--ink-soft); transition: all 0.15s ease;
}
.pdf-layout-chip:hover { border-color: var(--match-green); color: var(--ink); }
.pdf-layout-chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.pdf-farben { display: inline-flex; gap: 6px; margin-left: auto; }
.pdf-farbe {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; padding: 0; transition: transform 0.15s ease;
}
.pdf-farbe:hover { transform: scale(1.15); }
.pdf-farbe.active { border-color: var(--ink); box-shadow: 0 0 0 2px var(--card); }

/* ============================================================
   JOB-ASSISTENT (Schritt-für-Schritt, Firma)
   ============================================================ */
.wizard-box { min-height: 380px; display: flex; flex-direction: column; }
.wizard-progress { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.wizard-progress-fill {
  height: 100%; width: 16.66%; border-radius: 3px;
  background: var(--verlauf); transition: width 0.45s cubic-bezier(0.16,1,0.3,1);
}
.wizard-zaehler { font-size: 0.7rem; color: var(--ink-soft); margin: 10px 0 20px; letter-spacing: 0.04em; }

.wizard-step { display: none; }
.wizard-step.active { display: block; }
.wizard-step.rein-rechts { animation: wzRechts 0.38s cubic-bezier(0.16,1,0.3,1); }
.wizard-step.rein-links { animation: wzLinks 0.38s cubic-bezier(0.16,1,0.3,1); }
@keyframes wzRechts { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes wzLinks  { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }

.wizard-frage { font-size: 1.5rem; letter-spacing: -0.4px; margin-bottom: 6px; }
.wizard-hint { color: var(--ink-soft); font-size: 0.92rem; margin: 0 0 22px; }
.wizard-block-label { font-size: 0.68rem; color: var(--ink-soft); margin: 0 0 8px; }
.wizard-gross { font-size: 1.1rem !important; padding: 14px 16px !important; }

.wizard-nav { display: flex; gap: 10px; align-items: center; margin-top: auto; padding-top: 28px; }
.wizard-nav .wizard-btn-zurueck { margin-right: auto; }

.wizard-zusammenfassung {
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: 6px 16px; margin-bottom: 4px;
}
.wz-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 12px 8px; margin: 0; border: none; border-bottom: 1px solid var(--line);
  background: none; font-family: inherit; font-size: 0.9rem; color: var(--ink);
  text-align: left; cursor: pointer; border-radius: 8px;
  transition: background 0.15s ease;
}
.wz-zeile:last-child { border-bottom: none; }
.wz-zeile:hover { background: var(--card); }
.wz-zeile > span:first-child { color: var(--ink-soft); flex-shrink: 0; }
.wz-zeile > b { margin-left: auto; text-align: right; }
.wz-edit {
  flex-shrink: 0; font-size: 0.72rem; font-weight: 600; color: var(--indigo);
  opacity: 0; transition: opacity 0.15s ease;
}
.wz-zeile:hover .wz-edit, .wz-zeile:focus-visible .wz-edit { opacity: 1; }
@media (hover: none) { .wz-edit { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .wizard-step.rein-rechts, .wizard-step.rein-links { animation: none; }
  .wizard-progress-fill { transition: none; }
}

/* Assistent auf dem Handy: Hauptaktion volle Breite, Vorlagen als Wischleiste */
@media (max-width: 560px) {
  .wizard-nav { flex-wrap: wrap; gap: 8px; }
  #wizard-weiter, #wizard-posten { flex: 1 1 100%; order: -1; }
  .wizard-frage { font-size: 1.3rem; }
  .wizard-step .cv-templates {
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px;
    scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  }
  .wizard-step .cv-templates .cv-template-chip { flex-shrink: 0; }
}

/* ============================================================
   ADMIN-BEREICH (Verifizierungen prüfen)
   ============================================================ */
.admin-wrap { max-width: 900px; margin: 0 auto; padding: 26px 22px 70px; }
.admin-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.admin-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 12px 16px; margin-bottom: -1px; cursor: pointer; font-family: inherit;
  font-size: 0.95rem; font-weight: 600; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 6px;
}
.admin-tab:hover { color: var(--ink); }
.admin-tab.active { color: var(--indigo); border-bottom-color: var(--indigo); }
.admin-panel { display: none; }
.admin-panel.active { display: block; }

/* Firma-Freigabe-Banner (im Firmen-Dashboard) */
.firma-status-banner {
  border-radius: 14px; padding: 14px 18px; margin: 0 auto 4px; max-width: 760px;
  font-size: 0.9rem; line-height: 1.5;
}
.firma-status-banner--neu { background: rgba(240,180,41,0.13); border: 1px solid rgba(240,180,41,0.35); color: #7a5600; }
.firma-status-banner--gesperrt { background: rgba(165,68,44,0.1); border: 1px solid rgba(165,68,44,0.3); color: var(--coral); }
.firma-status-banner a { color: inherit; text-decoration: underline; }
.job-badge--pruefung { background: rgba(240,180,41,0.18); color: #7a5600; }
.admin-badge {
  font-size: 0.62rem; letter-spacing: 0.08em; font-weight: 600;
  background: var(--verlauf-tief); color: #fff; padding: 4px 9px; border-radius: 6px;
}
.admin-karte {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 20px; margin-bottom: 14px;
}
.admin-karte-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.admin-karte-kopf b { font-size: 1.05rem; }
.admin-meta { display: block; font-size: 0.82rem; color: var(--ink-soft); margin-top: 2px; }
.admin-status { font-size: 0.72rem; font-weight: 600; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.admin-status--ok { background: rgba(0,200,150,0.14); color: var(--match-green-dark); }
.admin-status--warten { background: rgba(240,180,41,0.16); color: #9a6f00; }
.admin-status--keins { background: var(--paper); color: var(--ink-soft); }
.admin-details {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin: 16px 0 0;
  background: var(--paper); border-radius: 12px; padding: 12px 14px;
}
.admin-details > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-details span { font-size: 0.7rem; color: var(--ink-soft); }
.admin-details b { font-size: 0.85rem; overflow-wrap: anywhere; }
.admin-dok-zeile { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.admin-dok-btn { padding: 9px 16px; font-size: 0.83rem; }
.admin-aktionen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.admin-aktionen .btn { padding: 10px 18px; font-size: 0.87rem; }

.dok-inhalt { max-height: 78vh; overflow: auto; background: #4a4d55; border-radius: 0 0 var(--radius) var(--radius); }
.dok-bild { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.dok-frame { width: 100%; height: 74vh; border: 0; display: block; }

@media (max-width: 560px) {
  .admin-aktionen .btn, .admin-dok-btn { flex: 1 1 100%; }
}

/* "Fast geschafft"-Ansicht nach der Registrierung (E-Mail bestätigen) */
.auth-bestaetigen { text-align: center; padding: 10px 0; }
.auth-bestaetigen-icon { font-size: 2.6rem; margin-bottom: 10px; }
.auth-bestaetigen h2 { margin-bottom: 12px; }
.auth-bestaetigen p { color: var(--ink-soft); font-size: 0.95rem; margin: 6px 0; overflow-wrap: anywhere; }
.auth-bestaetigen-hinweis { font-size: 0.8rem !important; margin-top: 14px !important; }

/* Touch-Geräte: Bedienelemente auf mind. ~44px Tipp-Höhe bringen (WCAG 2.5.8) */
@media (pointer: coarse) {
  .pill { padding: 11px 18px; }
  .cv-template-chip { padding: 11px 16px; }
  .tipp-btn { padding: 11px 16px; }
  .pdf-layout-chip { padding: 9px 14px; }
}

/* Zwei-Klick-Bestätigung statt Browser-Popup */
.btn-confirm { background: var(--coral) !important; color: #fff !important; border-color: var(--coral) !important; }
.weg-confirm { background: var(--coral) !important; color: #fff !important; border-color: var(--coral) !important; }

/* ============================================================
   LEBENSLAUF-EDITOR (lebenslauf.html) – Editor links, A4-Vorschau rechts
   ============================================================ */
.ll-body { background: var(--paper); }
.ll-topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 18px;
  padding: 10px 22px; background: var(--card);
  border-bottom: 1px solid var(--line);
}
.ll-zurueck { font-size: 0.85rem; color: var(--ink-soft); text-decoration: none; }
.ll-zurueck:hover { color: var(--ink); }
.ll-savestatus { margin-left: auto; font-size: 0.72rem; color: var(--ink-soft); }

.ll-wrap {
  display: grid; grid-template-columns: 45fr 55fr; gap: 26px;
  max-width: 1240px; margin: 0 auto; padding: 26px 22px 60px;
  align-items: start;
}
.ll-hinweis { font-size: 0.7rem; color: var(--ink-soft); margin: 20px 0 8px; }

.ll-progress {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 6px;
}
.ll-progress-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ll-progress-kopf b { font-size: 1rem; }
#ll-progress-label { font-size: 0.72rem; color: var(--ink-soft); }
.ll-progress-balken { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
#ll-progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--match-green), var(--indigo)); border-radius: 3px; transition: width 0.3s ease; }

.ll-karte {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  margin-bottom: 10px; overflow: hidden;
}
.ll-karte[open] { border-color: var(--match-green); }
.ll-karte summary {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 0.92rem; user-select: none;
}
.ll-karte summary::-webkit-details-marker { display: none; }
.ll-karte-name { flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-karte-typ { margin-left: auto; font-size: 0.62rem; color: var(--ink-soft); flex-shrink: 0; }
.ll-karte-tools { display: inline-flex; gap: 2px; flex-shrink: 0; }
.ll-karte-tools button {
  background: none; border: none; cursor: pointer; color: var(--ink-soft);
  font-size: 0.85rem; padding: 3px 6px; border-radius: 6px;
}
.ll-karte-tools button:hover { background: var(--paper); color: var(--ink); }
.ll-check {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--line); display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.68rem; color: var(--match-green-dark); background: var(--paper);
}
.ll-check.ok { background: rgba(0,200,150,0.15); border-color: var(--match-green); }
.ll-karte-body { padding: 4px 14px 16px; border-top: 1px solid var(--line); }
.ll-karte-body .form-group { margin-top: 12px; }
.ll-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ll-foto-zeile { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.ll-inhalt { width: 100%; }

.ll-vorschau { position: sticky; top: 64px; }
.ll-vorschau-innen { display: flex; flex-direction: column; }
#vorschau-seiten {
  overflow-y: auto; max-height: calc(100vh - 240px);
  background: #63676e; border-radius: 12px; padding: 18px;
  scroll-behavior: smooth;
}
.ll-a4 {
  display: block; width: 100%; height: auto;
  background: #fff; box-shadow: 0 3px 14px rgba(0,0,0,0.35);
  margin: 0 auto 18px; border-radius: 2px;
}
.ll-a4:last-child { margin-bottom: 0; }
.ll-vorschau-lade { color: #e5e7eb; font-size: 0.85rem; padding: 30px; text-align: center; }

.ll-mobil-toggle { display: none; }

@media (max-width: 980px) {
  .ll-wrap { grid-template-columns: 1fr; }
  .ll-mobil-toggle {
    display: flex; gap: 8px; position: sticky; top: 52px; z-index: 55;
    background: var(--paper); padding: 10px 22px;
  }
  .ll-mobil-toggle button {
    flex: 1; padding: 9px; border-radius: 999px; border: 1px solid var(--line);
    background: var(--card); font-family: inherit; font-size: 0.85rem; cursor: pointer;
    color: var(--ink-soft);
  }
  .ll-mobil-toggle button.active { background: var(--ink); color: #fff; border-color: var(--ink); }
  .ll-vorschau { display: none; position: static; }
  body.ll-zeige-vorschau .ll-vorschau { display: block; }
  body.ll-zeige-vorschau .ll-editor { display: none; }
  #vorschau-seiten { max-height: none; }
}

/* Bewerbungs-Modal: Lebenslauf-Wahl als auswählbare Karten */
.cv-wahl {
  display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem;
  margin-top: 10px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 14px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.cv-wahl:hover { border-color: rgba(43,47,143,0.35); }
.cv-wahl:has(input:checked) { border-color: var(--indigo); background: rgba(43,47,143,0.045); }
.cv-wahl input { margin-top: 2px; accent-color: var(--indigo); flex-shrink: 0; }
.cv-wahl.deaktiviert { opacity: 0.55; cursor: not-allowed; }
.cv-wahl.deaktiviert:hover { border-color: var(--line); }
.cv-wahl-info {
  margin: 8px 2px 4px; padding: 12px 14px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  display: flex; gap: 12px; align-items: center;
}
.cv-wahl-info canvas { width: 60px; height: auto; background: #fff; border: 1px solid var(--line); border-radius: 3px; flex-shrink: 0; box-shadow: 0 1px 4px rgba(22,26,31,0.08); }
.cv-wahl-info a { color: var(--indigo); font-size: 0.8rem; font-weight: 500; }
.cv-wahl-hinweis { font-size: 0.78rem; color: var(--ink-soft); font-weight: 400; }
.cv-wahl-leer { margin: 8px 2px 4px; }

/* ---------- MELDE-FUNKTION ---------- */
.melde-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  color: var(--ink-soft); font-size: 0.78rem; font-family: inherit;
  padding: 5px 8px; border-radius: 8px; transition: color 0.15s, background 0.15s;
}
.melde-btn:hover { color: var(--coral); background: rgba(165,68,44,0.08); }
.melde-btn svg { flex-shrink: 0; }

.melde-intro {
  font-size: 0.88rem; line-height: 1.6; color: var(--ink-soft);
  background: var(--paper); border-radius: 12px; padding: 12px 14px; margin: 0 0 18px;
}
.melde-grund {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1.5px solid var(--line); border-radius: 12px;
  padding: 11px 13px; margin-bottom: 8px; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.melde-grund:hover { border-color: var(--ink-soft); }
.melde-grund:has(input:checked) { border-color: var(--indigo); background: rgba(43,47,143,0.05); }
.melde-grund input { margin-top: 3px; flex-shrink: 0; }
.melde-grund b { font-size: 0.9rem; font-weight: 600; display: block; }
.melde-hinweis {
  display: block; font-size: 0.78rem; color: var(--ink-soft); margin-top: 2px; line-height: 1.45;
}
.melde-notfall {
  font-size: 0.82rem; line-height: 1.6;
  background: rgba(165,68,44,0.08); border-left: 3px solid var(--coral);
  border-radius: 8px; padding: 11px 13px; margin-top: 4px;
}

/* Melde-Button im Chat: nur bei Hover auf fremder Nachricht zeigen */
.chat-msg { position: relative; }
.chat-msg--anderer .melde-btn { opacity: 0; transition: opacity 0.15s; }
.chat-msg--anderer:hover .melde-btn,
.chat-msg--anderer .melde-btn:focus-visible { opacity: 1; }
@media (pointer: coarse) {
  .chat-msg--anderer .melde-btn { opacity: 1; }

  /* Am Finger war der Melden-Knopf nur 24px hoch - zu wenig zum sicheren
     Treffen. Aufgefallen erst am 27.8., als er auch auf der
     Anzeigenseite auftauchte und der Tippziel-Test ihn zu sehen bekam;
     im Chat und im Dashboard war er genauso klein, nur nie geprueft.
     Ausgerechnet der Knopf, mit dem man Belaestigung meldet. */
  .melde-btn { min-height: 44px; padding: 11px 12px; }
}

/* Admin: Meldungs-Karten */
.meldung-card {
  border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; margin-bottom: 12px; background: var(--card);
}
.meldung-card .kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.meldung-grund-chip {
  font-size: 0.74rem; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: rgba(165,68,44,0.12); color: var(--coral);
}
.meldung-status-chip {
  font-size: 0.72rem; padding: 3px 9px; border-radius: 999px;
  background: var(--paper); color: var(--ink-soft); font-family: 'IBM Plex Mono', monospace;
}
.meldung-status-offen { background: rgba(240,180,41,0.15); color: #8a6100; }
.meldung-status-erledigt { background: rgba(0,200,150,0.13); color: var(--match-green-dark); }
.meldung-zitat {
  border-left: 3px solid var(--line); padding: 8px 12px; margin: 10px 0;
  font-size: 0.9rem; line-height: 1.6; color: var(--ink); white-space: pre-wrap;
  background: var(--paper); border-radius: 0 8px 8px 0;
}
.meldung-meta { font-size: 0.75rem; color: var(--ink-soft); font-family: 'IBM Plex Mono', monospace; }

/* ---------- SICHERHEIT IM CHAT ---------- */
.chat-sicherheit {
  border-bottom: 1px solid var(--line);
  background: rgba(43,47,143,0.04);
  font-size: 0.82rem;
}
.chat-sicherheit summary {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 20px; cursor: pointer; color: var(--indigo);
  font-weight: 600; list-style: none; user-select: none;
}
.chat-sicherheit summary::-webkit-details-marker { display: none; }
.chat-sicherheit summary::after {
  content: '▾'; margin-left: auto; transition: transform 0.2s; opacity: 0.7;
}
.chat-sicherheit[open] summary::after { transform: rotate(180deg); }
.chat-sicherheit summary:hover { background: rgba(43,47,143,0.07); }
.chat-sicherheit summary svg { flex-shrink: 0; }
.chat-sicherheit ul {
  margin: 0; padding: 0 20px 14px 40px; color: var(--ink-soft); line-height: 1.65;
}
.chat-sicherheit li { margin-bottom: 5px; }
.chat-sicherheit li b { color: var(--ink); font-weight: 600; }

.chat-warnung {
  align-self: flex-start; max-width: 85%;
  background: rgba(240,180,41,0.14); border-left: 3px solid #f0b429;
  border-radius: 0 10px 10px 0; padding: 8px 12px;
  font-size: 0.79rem; line-height: 1.5; color: var(--ink);
  margin: -4px 0 2px;
}

/* ---------- BETREIBER-STATISTIK ---------- */
.stat-gruppe { margin-bottom: 28px; }
.stat-gruppe h3 {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-soft); font-family: 'IBM Plex Mono', monospace;
  margin: 0 0 12px; font-weight: 500;
}
.stat-box--achtung { border-color: #f0b429; background: rgba(240,180,41,0.09); }

.stat-tabelle-wrap { overflow-x: auto; }
.stat-tabelle { width: 100%; border-collapse: collapse; font-size: 0.86rem; min-width: 520px; }
.stat-tabelle th, .stat-tabelle td { padding: 9px 10px; text-align: left; }
.stat-tabelle thead th {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-soft); font-weight: 600; border-bottom: 1px solid var(--line);
}
.stat-tabelle tbody tr { border-bottom: 1px solid var(--line); }
.stat-tabelle tbody tr:last-child { border-bottom: none; }
.stat-tabelle tbody th {
  font-weight: 500; color: var(--ink-soft);
  font-family: 'IBM Plex Mono', monospace; font-size: 0.76rem; white-space: nowrap;
}
.stat-balken-zelle { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.stat-balken { height: 9px; border-radius: 999px; min-width: 2px; transition: width 0.3s; }
.stat-balken-zelle span { font-size: 0.8rem; font-weight: 600; min-width: 18px; }
.balken-anmeldung { background: var(--indigo); }
.balken-job { background: var(--match-green-dark); }
.balken-bewerbung { background: #f0b429; }

/* ---------- JOBBÖRSE: FILTER HINTER EINEM KNOPF ---------- */
/* Filter liegen in einem Panel, das per Knopf aufgeht - auf jedem Gerät.
   Dadurch beginnt die Jobliste sofort, ohne Filterblock davor. */

.jobs-layout { display: block; }

/* Kategorien: EINE Zeile zum Wischen statt Umbruch über zwei Zeilen */
.pill-row {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  padding-bottom: 4px; margin-bottom: 20px;
  -webkit-overflow-scrolling: touch;
}
.pill-row::-webkit-scrollbar { display: none; }
.pill-row .pill { flex: 0 0 auto; }

/* --- Filter-Panel (fährt von links ein) --- */
.filter-panel {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 330px; max-width: 88vw; z-index: 60;
  background: var(--card); border-right: 1px solid var(--line);
  padding: 22px; overflow-y: auto;
  transform: translateX(-100%); transition: transform 0.25s ease;
  box-shadow: 8px 0 40px rgba(22,26,31,0.15);
}
.filter-panel.offen { transform: translateX(0); }

.filter-panel-kopf { display: flex; align-items: center; margin-bottom: 18px; }
.filter-panel-kopf b { font-size: 1.1rem; }
.filter-schliessen {
  margin-left: auto; background: none; border: none; cursor: pointer;
  font-size: 1.2rem; color: var(--ink-soft); padding: 4px 8px; line-height: 1;
}
.filter-schliessen:hover { color: var(--ink); }

.filter-gruppe { margin-bottom: 18px; }
.filter-gruppe label {
  display: block; font-size: 0.8rem; font-weight: 600;
  color: var(--ink); margin-bottom: 6px;
}
.filter-gruppe input, .filter-gruppe select {
  width: 100%; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px;
  font-family: 'IBM Plex Sans', sans-serif; font-size: 0.9rem;
  background: var(--paper); color: var(--ink); outline: none; transition: border-color 0.15s;
}
.filter-gruppe input:focus, .filter-gruppe select:focus { border-color: var(--match-green); }
.filter-hinweis {
  display: block; font-size: 0.73rem; color: var(--ink-soft); margin-top: 5px; line-height: 1.45;
}
.filter-leeren { margin-top: 4px; font-size: 0.85rem; padding: 11px; }

.filter-hintergrund {
  position: fixed; inset: 0; z-index: 59;
  background: rgba(22,26,31,0.4); opacity: 0; pointer-events: none;
  transition: opacity 0.25s;
}
.filter-hintergrund.offen { opacity: 1; pointer-events: auto; }

/* --- Kopfzeile über den Ergebnissen --- */
.ergebnis-kopf {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.ergebnis-kopf .jobs-count { margin: 0; }

.filter-oeffnen {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink); font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.88rem; font-weight: 600; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.filter-oeffnen:hover { border-color: var(--ink); background: var(--paper); }
.filter-anzahl:empty { display: none; }
.filter-anzahl {
  background: var(--indigo); color: #fff; border-radius: 100px;
  font-size: 0.72rem; min-width: 19px; height: 19px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}

.sort-wahl { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sort-wahl span { font-size: 0.78rem; color: var(--ink-soft); white-space: nowrap; }
.sort-wahl select {
  padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 10px;
  font-family: 'IBM Plex Sans', sans-serif; font-size: 0.85rem;
  background: var(--card); color: var(--ink); outline: none; cursor: pointer;
}
.sort-wahl select:focus { border-color: var(--match-green); }

/* --- Aktive Filter als entfernbare Chips --- */
.aktive-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.aktive-filter:empty { display: none; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(43,47,143,0.08); color: var(--indigo);
  border: 1px solid rgba(43,47,143,0.18); border-radius: 100px;
  padding: 5px 8px 5px 12px; font-size: 0.8rem; font-weight: 500;
}
.filter-chip button {
  background: none; border: none; cursor: pointer; color: inherit;
  font-size: 0.95rem; line-height: 1; padding: 2px 4px; border-radius: 50%; opacity: 0.65;
}
.filter-chip button:hover { opacity: 1; background: rgba(43,47,143,0.15); }

/* --- Handy: Panel fährt stattdessen von unten ein --- */
@media (max-width: 900px) {
  .filter-panel {
    top: auto; right: 0; width: auto; max-width: none;
    border-right: none; border-radius: 20px 20px 0 0;
    max-height: 82vh; padding: 20px;
    transform: translateY(100%);
    box-shadow: 0 -8px 40px rgba(22,26,31,0.18);
  }
  .filter-panel.offen { transform: translateY(0); }
  .sort-wahl { margin-left: auto; }
  .sort-wahl span { display: none; }
  .ergebnis-kopf { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .filter-panel, .filter-hintergrund { transition: none; }
}

/* Kopfbereich der Jobbörse straffen, damit Jobs früher sichtbar werden */
.jobs-page { padding-top: 28px; }
.jobs-page .jobs-header { margin-bottom: 18px; }
.jobs-page .jobs-header h1 { font-size: 1.75rem; margin-bottom: 4px; }
.jobs-page .jobs-header p { font-size: 0.9rem; }
.jobs-page .search-hero { margin-bottom: 14px; }
.jobs-page .pill-row { margin-bottom: 16px; }
@media (max-width: 900px) {
  .jobs-page { padding-top: 20px; }
  .jobs-page .jobs-header { margin-bottom: 14px; }
  .jobs-page .jobs-header h1 { font-size: 1.5rem; }
}

/* ============================================================
   ÜBERLAUF-KORREKTUREN
   Gefunden per Messung bei 360/390/768px: Text lief über Ränder,
   auf der Startseite scrollte die Seite seitlich.
   ============================================================ */

/* 1) Lange deutsche Wörter (z.B. "Datenschutzerklärung") umbrechen lassen,
      statt sie über den Rand laufen zu lassen. */
h1, h2, h3, h4, p, li, a, span, b, label, summary, td, th {
  overflow-wrap: break-word;
}
/* Silbentrennung auch im FLIESSTEXT, nicht nur in Ueberschriften
   (27.8., abgeschaut bei schuelerjobs.de).
   Dort stehen weiche Trennstriche von Hand in den Woertern:
   „Einverstaendnis&shy;erklaerung", „Jugend&shy;arbeits&shy;schutz&shy;gesetz".
   Das loest dasselbe Problem, muss aber bei jedem Wort einzeln gemacht
   werden - und wer es vergisst, hat es wieder.

   `hyphens: auto` mit `lang="de"` macht es der Browser selbst, an
   richtigen Silbengrenzen und MIT sichtbarem Trennstrich. Ohne das
   griff nur `overflow-wrap: break-word` - das bricht hart mitten im
   Wort, ohne Strich, und liest sich wie ein Fehler.
   Gemessen bei 320px: „Einverstaendniserklaerung",
   „Datenschutzerklaerung", „Jugendarbeitsschutz" standen im Fliesstext
   auf `hyphens: manual`. */
h1, h2, h3, h4, p, li, a, span, b, label, summary, td, th, button {
  hyphens: auto;
}

/* Wo Trennstriche stoeren: Zahlen, Adressen und alles, was man abtippt
   oder vorliest. Ein Trennstrich mitten in einer E-Mail-Adresse waere
   schlimmer als der Ueberlauf. */
input, textarea, select, code, .mono, [class*="chip"], .job-badge {
  hyphens: none;
}

/* 2) Kategorie-Kacheln: Grid-Kinder dürfen schrumpfen, sonst sprengen
      lange Wörter wie "Organisation" das Raster. */
.kat-tile { min-width: 0; }
.kat-tile span:not(.kat-icon) { min-width: 0; }
@media (max-width: 560px) {
  .kat-grid { gap: 10px; }
  .kat-tile { padding: 15px 12px; font-size: 0.85rem; gap: 9px; }
  .kat-tile .kat-icon { width: 32px; height: 32px; flex-shrink: 0; }
  .kat-tile .kat-icon svg { width: 17px; height: 17px; }
}

/* 3) Ort + Kategorie + Arbeitszeit auf Job-Karten dürfen umbrechen */
.job-card .company-name { flex-wrap: wrap; row-gap: 6px; }

/* 4) Rechtstexte: große Überschrift auf schmalen Schirmen verkleinern */
@media (max-width: 560px) {
  .legal-page { padding: 32px 20px 60px; }
  .legal-page h1 { font-size: 1.55rem; }
  .legal-page h2 { font-size: 1.05rem; }
}

/* 5) Flex- und Grid-Kinder dürfen generell schrumpfen (häufigste
      Überlauf-Ursache: min-width:auto verhindert das Umbrechen). */
.jobs-grid > *, .stats-row > *, .filter-gruppe > *, .ergebnis-kopf > * { min-width: 0; }

/* 6) Tabellen und Codeblöcke nie über den Rand: eigener Scrollbereich */
.stat-tabelle-wrap, .meldung-zitat { max-width: 100%; }

/* 7) Job-Karten: minmax(320px) zwang die Karten auf 320px, auch wenn nur
      312px Platz war -> Karten ragten über den Rand. min() lässt sie
      auf schmalen Handys mitschrumpfen. */
.jobs-grid { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }

/* ============================================================
   LEBENSLAUF AUF DEM HANDY BEDIENBAR MACHEN
   Gemessen bei 390px: Eingabefelder nur 128px breit, die Karten-
   Knöpfe (hoch/runter/löschen) nur 19x24px – praktisch nicht
   treffbar. Empfehlung für Touch: mindestens ~44px.
   ============================================================ */

@media (max-width: 620px) {
  /* Schule/Klasse, Ort usw. untereinander statt in zwei 128px-Spalten */
  .ll-zwei { grid-template-columns: 1fr; gap: 14px; }

  /* Karten-Kopf: mehr Luft, damit Text und Knöpfe sich nicht drängen */
  .ll-karte summary { padding: 12px 12px; gap: 8px; flex-wrap: wrap; }
  .ll-karte-name { flex: 1 1 auto; min-width: 0; }
  .ll-karte-typ { display: none; }        /* Typ-Label spart Platz, Icon reicht */

  .ll-karte-body { padding: 4px 12px 18px; }
  .ll-wrap { padding-left: 16px; padding-right: 16px; }
  .ll-mobil-toggle { padding: 10px 16px; }
}

/* Touch-Ziele im Lebenslauf-Editor vergrößern */
@media (pointer: coarse) {
  /* Hoch / Runter / Löschen an jeder Karte */
  .ll-karte-tools { gap: 4px; }
  .ll-karte-tools button {
    min-width: 40px; min-height: 40px; font-size: 1rem;
    display: inline-flex; align-items: center; justify-content: center; padding: 0;
  }
  .ll-karte-tools button:active { background: var(--paper); }

  /* Umschalter Bearbeiten / Vorschau */
  .ll-mobil-toggle button { padding: 13px; font-size: 0.9rem; }

  /* Bausteine hinzufügen, Foto hochladen, Formulierungshilfe */
  .block-add-btn, .ll-karte-body .btn, .ll-foto-zeile .btn { min-height: 44px; }

  /* Aufklappbare Karte selbst bequem treffbar */
  .ll-karte summary { min-height: 52px; }
}

/* Eingabefelder im Editor nie unter eine sinnvolle Breite */
.ll-karte-body input, .ll-karte-body select, .ll-karte-body textarea { min-width: 0; width: 100%; }

/* Sprachen-/Fähigkeiten-Zeilen: auf schmalen Schirmen umbrechen.
   Vorher drückte das lange Niveau-Dropdown ("Muttersprache") das
   Namensfeld auf 8px zusammen. */
@media (max-width: 620px) {
  .zeilen-editor { flex-wrap: wrap; gap: 8px 8px; }
  .zeilen-editor input[type="text"] { flex: 1 1 100%; }
  .zeilen-editor select { flex: 1 1 auto; min-width: 0; }
  .zeilen-editor input[type="range"] { flex: 1 1 60%; }
}

/* Bequeme Touch-Höhen im gesamten Lebenslauf-Editor */
@media (pointer: coarse) {
  .ll-karte-body input[type="text"],
  .ll-karte-body select,
  .zeilen-editor input[type="text"],
  .zeilen-editor select {
    min-height: 44px; padding-top: 10px; padding-bottom: 10px;
  }
  .zeilen-editor input[type="range"] { min-height: 44px; }
  .zeile-weg { width: 44px; height: 44px; font-size: 1rem; }
  .tipp-btn { min-height: 44px; }
  .cv-template-chip { min-height: 44px; }
  .ll-karte-body textarea { min-height: 110px; }
}

/* ============================================================
   BARRIEREFREIHEIT
   ============================================================ */

/* Nur für Screenreader: unsichtbar, aber vorgelesen.
   Für Beschriftungen, die optisch nicht nötig sind. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Auth-Seiten: die Überschrift ist jetzt ein h1 (war h2) – Aussehen bleibt */
.auth-box h1 { font-size: 1.6rem; margin-bottom: 6px; }

/* Dashboard: die Ansichts-Überschriften sind jetzt h2 (nur EIN h1 pro Seite) */
.jobs-header h2 { font-size: 1.6rem; margin-bottom: 8px; }
.jobs-page .jobs-header h2 { font-size: 1.6rem; }
#view-jobs .jobs-header h2 { font-size: 1.75rem; margin-bottom: 4px; }
@media (max-width: 900px) { #view-jobs .jobs-header h2 { font-size: 1.5rem; } }

/* Beispiel-Karten im Hero: sehen aus wie Überschriften, sind aber Inhalt */
.match-card-name { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1rem; font-weight: 700; margin-bottom: 4px; }

/* ============================================================
   SCHRIFTSCHNITTE: kein künstlicher Fettdruck mehr
   Gemessen: An drei Stellen wurde ein Schnitt verlangt, den wir gar
   nicht laden – der Browser rechnet ihn dann künstlich hoch, was
   sichtbar schlechter aussieht. Ursache war jeweils ein geerbtes
   "bolder" statt eines festen Werts.
   ============================================================ */

/* <b> heißt "fetter als der Elternwert" – in einem 600er-Label landet
   das bei 900, das laden wir nicht. Fester Wert statt relativ. */
#radius-wert { font-weight: 700; }

/* IBM Plex Mono gibt es hier nur in 400 und 500. Überall, wo Mono
   fett geerbt hätte, den vorhandenen Schnitt festschreiben. */
.mono b, b.mono { font-weight: 500; }
.cv-preview-section h4, .ll-karte-typ { font-weight: 500; }
/* Kleingedrucktes in der Einwilligung erbte 600 vom Label */
.consent-label .mono { font-weight: 400; }
/* Niveau im Sprach-Abzeichen: <b> hätte auf 600 hochgerechnet */
.cv-sprache-badge b { font-weight: 500; }

/* ===================================================================
   TASTATURBEDIENUNG – sichtbarer Fokus überall
   -------------------------------------------------------------------
   Viele Eingabefelder setzten weiter oben bewusst `outline: none` und
   zeigten den Fokus nur über eine dezent geänderte Rahmenfarbe. Mit der
   Maus fällt das nicht auf; wer sich mit der Tab-Taste durch die Seite
   bewegt, verliert dabei aber die Orientierung. Deshalb hier – bewusst
   ganz am Ende der Datei, damit es die früheren Regeln überschreibt –
   ein einheitlicher Fokus-Ring.

   `:focus-visible` heißt: nur bei Tastatur-Fokus. Beim Mausklick in ein
   Feld bleibt die Optik unverändert.
   =================================================================== */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[contenteditable]:focus-visible {
  outline: 2px solid var(--match-green-dark);
  outline-offset: 2px;
}
/* Checkboxen/Radios sitzen dicht am Text – etwas mehr Abstand, sonst
   verschmilzt der Ring mit der Beschriftung. */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible { outline-offset: 3px; }

/* „Zum Inhalt springen“: unsichtbar, bis man mit Tab darauf landet.
   Erspart Tastaturnutzern auf jeder Unterseite die komplette Navigation. */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100000;
  background: var(--card); color: var(--match-green-dark);
  border: 2px solid var(--match-green-dark); border-radius: 10px;
  padding: 10px 16px; font-weight: 600; font-size: 0.92rem;
  text-decoration: none; box-shadow: 0 6px 20px rgba(22,26,31,0.15);
  transition: top 0.15s;
}
.skip-link:focus { top: 12px; }
/* Der Inhaltsbereich bekommt beim Anspringen tabindex="-1"; dort soll
   kein Ring erscheinen, der Sprung selbst ist die Rückmeldung. */
main[tabindex="-1"]:focus { outline: none; }

/* Jobtitel im Schueler-Dashboard ist ein echter <button>, damit die Karte
   auch per Tastatur zu oeffnen ist. Optisch soll er eine Ueberschrift
   bleiben - deshalb die Browser-Optik komplett zuruecksetzen. */
.job-titel-btn {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.job-titel-btn:focus-visible { outline: 2px solid var(--match-green-dark); outline-offset: 3px; border-radius: 6px; }

/* ===================================================================
   FEHLERZUSTAENDE (siehe js/zustand.js)
   -------------------------------------------------------------------
   Bewusst anders als der Leerzustand: Ein leerer Bereich ist normal,
   eine Stoerung nicht. Sie soll erkennbar sein, ohne zu erschrecken -
   deshalb das warme Rot nur als Akzent, nicht als Flaeche.
   =================================================================== */
.fehler-state svg { color: var(--coral); opacity: 0.75; }
.fehler-state h1 { font-size: 1.35rem; margin: 0; }
.fehler-state p { max-width: 420px; }
.fehler-hinweis { font-size: 0.85rem; opacity: 0.8; }
.fehler-erneut { margin-top: 4px; }
.fehler-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
/* Nebeneinander stehen hier ein <button> und ein <a> - ohne das hier waeren sie
   unterschiedlich hoch, weil beide ihre eigene Standard-Zeilenhoehe mitbringen. */
.fehler-knoepfe .btn {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1.35; text-decoration: none;
  /* .fehler-erneut bringt einen margin-top mit; im Flex-Container frisst der
     genau die 4px, um die der Knopf sonst niedriger ist als der Link daneben. */
  margin-top: 0;
}
.seiten-fehler { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }

/* ===================================================================
   LAYOUT-SPRUENGE
   -------------------------------------------------------------------
   Die Job-Detailseite zeigt beim Aufruf nur "Lade Job..." - eine Zeile.
   Kommt der echte Inhalt, wuchs die Seite schlagartig und der Footer
   rutschte sichtbar nach unten (gemessener Sprung: 0,12). Deshalb wird
   der Platz von Anfang an reserviert. Der Wert entspricht ungefaehr der
   Hoehe einer normalen Anzeige; genauer geht nicht, weil Beschreibungen
   unterschiedlich lang sind.
   =================================================================== */
#job-detail { min-height: 60vh; }

/* Im Schueler-Dashboard stehen drei zunaechst leere Kaesten ueber der Suche,
   die per JS gefuellt werden. Zusammen schoben sie beim Laden alles darunter
   um rund 246px nach unten. Die Statistik-Zeile ist immer da und immer gleich
   hoch (gemessen: 96px) - dafuer laesst sich der Platz gefahrlos vorher
   reservieren.
   Der Verifizierungs-Hinweis und die Onboarding-Box bekommen BEWUSST keine
   feste Hoehe: Beide koennen dauerhaft verschwinden (weggeklickt bzw. alles
   erledigt), und dann bliebe fuer immer eine leere Luecke stehen. Ein
   kurzer Sprung beim Laden ist das kleinere Uebel als ein Dauerloch. */
#stats-row { min-height: 96px; }

/* ===================================================================
   TIPPZIELE AUF DEM HANDY
   -------------------------------------------------------------------
   Gemessen auf einem Pixel 7 mit echter Touch-Emulation: Viele haeufig
   genutzte Knoepfe lagen unter den empfohlenen 44x44 Pixeln - der
   "Anzeigen"-Knopf am Passwortfeld war nur 15px hoch, das Hamburger-
   Menue 38x32. Fruehere Runden hatten das nur fuer den Lebenslauf-
   Editor geloest; der Rest der Seite blieb ungedeckt.

   Nicht angefasst: Links im Fliesstext (die sind naturgemaess zeilenhoch)
   und die Einwilligungs-Checkbox - die sitzt in einem <label>, also ist
   der ganze Text die Trefferflaeche, nicht das 18px-Kaestchen.
   =================================================================== */
@media (pointer: coarse) {
  /* Menue-Knoepfe: werden auf jeder Seite angetippt */
  .nav-toggle, .hamburger-btn, .glocke-btn {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .nav-toggle { flex-direction: column; gap: 5px; }

  /* "Anzeigen" am Passwortfeld war 61x15 - kaum zu treffen */
  .pw-toggle { min-height: 44px; padding: 0 10px; display: inline-flex; align-items: center; }

  /* Schliessen-Kreuze und Wegklick-Knoepfe */
  .filter-schliessen, .onboard-weg {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* Teilen-Knopf auf der Jobseite */
  .share-btn { min-height: 44px; }

  /* Eingabefelder und Auswahlmenues: lagen bei 38-40px */
  .form-group input, .form-group select,
  .filter-gruppe input, .filter-gruppe select,
  .sort-wahl select, .filter-leeren, .filter-oeffnen {
    min-height: 44px;
  }

  /* Knoepfe allgemein lagen bei 41-43px - knapp daneben ist auch daneben */
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .pill { min-height: 44px; }

  /* Herz-Knopf auf den Job-Karten: 36x36, wird oft angetippt */
  .merken-btn { min-width: 44px; min-height: 44px; }

  /* Footer-Links und der "Alle Jobs"-Ruecksprung: mehr Luft zum Treffen */
  footer a, .footer-links a, a.mono { display: inline-block; padding: 13px 0; }

  /* Eintraege im Seitenmenue */
  .sidebar-item { min-height: 44px; }

  /* Auf dem Handy standen Logo und der Knopf rechts daneben ohne jeden
     Abstand direkt aneinander (gemessen: beide enden/beginnen bei 205px).
     Das gab es schon vorher, fiel aber weniger auf, solange das Logo
     halb so hoch war wie der Knopf. */
  nav { gap: 12px; }

  /* Das Logo fuehrt zur Startseite und war nur 25px hoch */
  /* Nicht nur in <nav>: Der Betreiber-Bereich hat eine eigene Kopfzeile. */
  .logo, .ll-zurueck { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ===================================================================
   JOBIDEEN (jobideen.html)
   -------------------------------------------------------------------
   Aus dem Wettbewerbsvergleich am 25.8.: schuelerjobs.de fuehrt
   "Jobideen" als eigenen Menuepunkt. Der Vorteil fuer uns: Die Seite
   hat Inhalt, auch solange noch keine Firmen Anzeigen geschaltet haben.
   =================================================================== */
.ideen-liste { display: grid; gap: 14px; margin-top: 18px; }
@media (min-width: 720px) { .ideen-liste { grid-template-columns: 1fr 1fr; } }

.idee {
  border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; background: var(--card);
}
.idee h3 { font-size: 1rem; margin: 0 0 6px; }
.idee p { margin: 0; }

/* Alter und Verdienst stehen direkt unter der Ueberschrift - genau die
   zwei Angaben, wegen denen man die Seite ueberhaupt liest. */
.idee-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px !important; }
.idee-alter, .idee-lohn {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.idee-alter { background: rgba(43,47,143,0.09); color: var(--indigo); }
.idee-lohn { background: rgba(0,200,150,0.12); color: var(--match-green-dark); }

.legal-page .ideen-liste + section { margin-top: 32px; }

/* ===================================================================
   JOB-FINDER (job-finder.html)
   -------------------------------------------------------------------
   Aus dem Vergleich mit ausbildung.de am 25.8.: Deren "Berufscheck"
   fuehrt Leute weiter, die noch nicht wissen, was sie wollen. Passt
   besonders gut hierher, weil die Plattform SchuelerMatch heisst -
   gematcht wurde bisher aber nur nach Alter und Ort.
   =================================================================== */
.finder-box {
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--card); padding: 26px 24px 30px; margin-bottom: 36px;
}

.finder-kopf { margin-bottom: 22px; }
.finder-schritt {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem;
  color: var(--ink-soft); display: block; margin-bottom: 8px;
}
.finder-balken { height: 4px; background: var(--paper); border-radius: 99px; overflow: hidden; }
/* Der Fragebereich ist im HTML leer und wird erst per JS gefüllt.
   Ohne reservierte Höhe wächst er beim Start von 0 auf 266px und
   schiebt alles darunter weg. Vorsorge: Bei einem frischen Aufruf misst
   der Browser dafür keinen Sprung, der Bereich ist aber wirklich leer,
   und die Reservierung kostet nichts. Alle fünf Fragen sind gleich
   hoch, deshalb hält die reservierte Höhe die Karte auch beim
   Weiterklicken ruhig. Auf schmalen Rändern brechen zwei Fragen um. */
#finder-inhalt { min-height: 266px; }
@media (max-width: 560px) { #finder-inhalt { min-height: 300px; } }
.finder-fortschritt {
  height: 100%; width: 0; border-radius: 99px;
  background: var(--verlauf-tief); transition: width 0.3s ease;
}

.finder-frage { font-size: 1.3rem !important; margin-bottom: 6px !important; }
.finder-hinweis { font-size: 0.88rem; margin-bottom: 18px !important; }

/* Antworten sind grosse Flaechen statt Radiobuttons: Auf dem Handy
   trifft man sie sicher, und ein Tipp genuegt statt Auswaehlen +
   Weiter-Knopf. */
.finder-antworten { display: grid; gap: 10px; }
.finder-antwort {
  width: 100%; text-align: left; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--card); color: var(--ink);
  font-family: 'IBM Plex Sans', sans-serif; font-size: 0.95rem; font-weight: 500;
  padding: 15px 18px; min-height: 52px;
  transition: border-color 0.15s, transform 0.1s;
}
.finder-antwort:hover { border-color: var(--match-green); }
.finder-antwort:active { transform: scale(0.99); }

.finder-zurueck {
  background: none; border: none; cursor: pointer; padding: 12px 2px;
  color: var(--ink-soft); font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.85rem; margin-top: 14px;
}
.finder-zurueck:hover { color: var(--ink); }

/* Der beste Treffer wird hervorgehoben - sonst wirken vier
   gleichrangige Karten wie eine beliebige Liste. */
.finder-ergebnis .idee--top { border-color: var(--match-green); position: relative; }
.idee-top-marke {
  position: absolute; top: -9px; left: 16px;
  background: var(--match-green); color: #fff;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem;
  padding: 2px 9px; border-radius: 99px;
}

.finder-weiter { margin-top: 24px; }
.finder-weiter p { margin-bottom: 12px; }

/* ===================================================================
   ELTERNSEITE + DRUCKVORLAGE (eltern.html)
   -------------------------------------------------------------------
   Aus dem Vergleich am 25.8.: schuelerjobs.de hat "Informationen fuer
   Eltern" samt Einverstaendniserklaerung zum Download. Eltern muessen
   bei uns ohnehin zustimmen - und sie sind oft diejenigen, die die
   Plattform pruefen, bevor das Kind sich anmeldet.

   Die Vorlage ist am Bildschirm sichtbar (man soll sehen, was man
   ausdruckt), beim Drucken bleibt aber NUR sie uebrig.
   =================================================================== */
.druck-vorlage {
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); padding: 30px 28px; margin: 0 0 32px;
}
.druck-vorlage h2 { font-size: 1.15rem; margin-bottom: 22px; }
.druck-block { margin-bottom: 22px; }

.druck-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem;
  color: var(--ink-soft); margin: 0 0 2px !important;
}
/* Schreiblinie zum Ausfuellen mit der Hand */
.druck-linie {
  border-bottom: 1px solid var(--ink-soft);
  height: 26px; margin: 0 0 14px !important;
}
.druck-text { margin-bottom: 24px !important; }

.druck-unterschrift {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 34px;
}
.druck-fuss {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem;
  color: var(--ink-soft); margin-top: 26px !important;
}

@media print {
  /* Alles ausser der Vorlage verschwindet - sonst druckt man drei Seiten
     Erklaertext mit, den niemand auf Papier braucht. */
  nav, footer, .skip-link, .legal-page h1, .legal-sub,
  .legal-page section { display: none !important; }
  .druck-vorlage {
    border: none; padding: 0; margin: 0;
    page-break-inside: avoid;
  }
  .legal-page { padding: 0; max-width: none; }
  body { background: #fff; }
}

/* ===================================================================
   ARBEITGEBER-SEITE (fuer-firmen.html)
   -------------------------------------------------------------------
   Bisher gab es fuer Unternehmen nur einen kleinen Kasten auf der
   Startseite. Das staerkste Argument stand nirgends: Wer Minderjaehrige
   beschaeftigt, haftet nach dem Jugendarbeitsschutzgesetz - und die
   Mindestalter-Pruefung nimmt ihm genau dieses Risiko ab.
   =================================================================== */
.firma-schritte { counter-reset: schritt; list-style: none; padding: 0; }
.firma-schritte li {
  position: relative; padding-left: 46px; margin-bottom: 18px;
}
.firma-schritte li::before {
  counter-increment: schritt; content: counter(schritt);
  position: absolute; left: 0; top: -2px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--verlauf-tief); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 0.85rem;
}

/* Rechtlicher Hinweis - sichtbar, aber nicht so laut wie der Fliesstext */
.firma-hinweis { font-size: 0.82rem; opacity: 0.85; margin-top: 14px !important; }

/* Aktuelle Seite in der Navigation markieren.
   Angelegt am 25.8., als die Navigation vereinheitlicht wurde: Vorher
   hatte jede Seite eine andere Leiste, und man sah nie, wo man ist. */
.nav-links a[aria-current="page"] {
  color: var(--indigo); font-weight: 600;
}

/* ===================================================================
   EINSTIEGE AUF DER STARTSEITE (Abschnitt "Womit faengst du an?")
   -------------------------------------------------------------------
   Aus dem Vergleich mit studentjob.de am 25.8.: Deren Startseite bietet
   mehrere Einstiege nebeneinander - nach Jobart, nach Stadt, "weiss noch
   nicht", und einen eigenen fuer Arbeitgeber. Wer mit einer anderen
   Absicht kommt, findet trotzdem seinen Weg.

   Bei uns waren die vier neuen Seiten bisher nur kleine Textlinks.
   =================================================================== */
.wege-grid {
  max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
@media (max-width: 900px) { .wege-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .wege-grid { grid-template-columns: 1fr; } }

.weg-karte {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--card); padding: 22px 20px 20px;
  text-decoration: none; color: var(--ink);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.weg-karte:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(22,26,31,0.09);
  border-color: rgba(0,200,150,0.4);
}
.weg-karte b { font-size: 1rem; }

.weg-icon {
  width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper); color: var(--indigo);
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 0.95rem;
  margin-bottom: 4px;
}

.weg-text { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.55; flex: 1; }
.weg-pfeil {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem;
  color: var(--match-green-dark); margin-top: 4px;
}

/* Die Elternkarte richtet sich an eine andere Zielgruppe - dezent
   abgesetzt, damit Schueler nicht faelschlich dort landen. */
.weg-karte--andere { background: var(--paper); }
.weg-karte--andere .weg-icon { background: var(--card); }

/* ===================================================================
   LOHNTABELLE (fairer-lohn.html)
   -------------------------------------------------------------------
   Aus dem Ratgeber-Vergleich am 25.8.: "Ein Recht auf einen bestimmten
   Stundenlohn hast du als Schueler nicht - auch nicht auf den
   Mindestlohn." Das stimmt (MiLoG § 22 Abs. 2) und stand bei uns
   nirgends. Fuer eine Plattform, die Minderjaehrige schuetzen will,
   ist das ein Kernthema.

   Bewusst keine <table>: Auf dem Handy bricht eine dreispaltige
   Tabelle unschoen um. Als Raster laesst sie sich sauber umbauen.
   =================================================================== */
.lohn-tabelle { margin: 18px 0 22px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.lohn-zeile {
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px;
  padding: 11px 16px; align-items: center;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem; color: var(--ink-soft);
}
.lohn-zeile:last-child { border-bottom: none; }
.lohn-zeile span:nth-child(2), .lohn-zeile span:nth-child(3) {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; text-align: right; white-space: nowrap;
}
.lohn-zeile span:nth-child(3) { color: var(--match-green-dark); font-weight: 500; min-width: 62px; }

.lohn-kopf {
  background: var(--paper); color: var(--ink); font-weight: 600;
}
.lohn-kopf span:nth-child(2), .lohn-kopf span:nth-child(3) { color: var(--ink); }

/* ===================================================================
   FIRMENNAME UND ALTER DER ANZEIGE
   -------------------------------------------------------------------
   Am 25.8. gemessen: Die Spalte firma_name gab es laengst, war aber bei
   KEINEM Job gefuellt - sie wurde beim Posten nie geschrieben. Schueler
   sahen also nie, bei wem sie sich bewerben. Fuer Minderjaehrige ist
   das eine Vertrauensfrage; und Google bekam "Arbeitgeber auf
   SchuelerMatch" statt des echten Namens.
   =================================================================== */
.job-firma {
  color: var(--ink-soft); font-size: 0.85rem;
  margin: 2px 0 0 !important;
}

/* Alter der Anzeige. Ab zwei Monaten dezent hervorgehoben - dann lohnt
   eine Nachfrage, ob die Stelle ueberhaupt noch frei ist. */
.job-datum { font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; }
.job-datum.job-alt { color: var(--coral); }

/* ===================================================================
   FERIENKALENDER (ferienjob.html)
   -------------------------------------------------------------------
   Der Countdown ist die eigentliche Antwort auf die Frage, mit der
   Schueler auf die Seite kommen: "Wann habe ich frei, und lohnt sich
   das Suchen jetzt schon?" Deshalb steht er als ruhige Flaeche ueber
   der Terminliste, nicht als Randnotiz daneben.
   =================================================================== */
.ferien-waehler { margin: 16px 0 14px; }
.ferien-waehler label {
  display: block; margin-bottom: 6px;
  font-size: 0.85rem; font-weight: 600; color: var(--ink);
}
.ferien-waehler select {
  width: 100%; max-width: 320px;
  /* min-height statt reinem Padding: mit 11px Polsterung kam das Feld auf
     43px und fiel damit knapp unter die 44px, die eine Fingerkuppe
     braucht (gemessen am 26.8. vom Tippziel-Test). */
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink);
  font-family: inherit; font-size: 0.95rem;
}
.ferien-waehler select:focus-visible {
  outline: 2px solid var(--indigo); outline-offset: 2px;
}

.ferien-countdown {
  background: var(--ink); color: #fff;
  border-radius: 16px; padding: 26px 24px;
  margin: 0 0 4px;
}
.ferien-countdown .ferien-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--match-green); margin: 0 0 8px;
}
.ferien-countdown .ferien-gross {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.7rem; line-height: 1.15; font-weight: 700;
  color: #fff; margin: 0;
}
.ferien-countdown .ferien-klein {
  margin: 8px 0 0; font-size: 0.9rem;
  /* Auf dem dunklen Grund braucht die Nebenzeile genug Helligkeit,
     sonst rutscht sie unter 4,5:1 Kontrast. */
  color: rgba(255,255,255,0.82);
}
/* Laufende Ferien: gruener Rand als Signal "das gilt jetzt gerade". */
.ferien-countdown.laeuft { box-shadow: inset 0 0 0 2px var(--match-green); }
/* Kein Termin hinterlegt - dann kein Countdown-Auftritt, nur ein Hinweis. */
.ferien-countdown.leer {
  background: var(--paper); border: 1px solid var(--line);
}
.ferien-countdown.leer .ferien-gross { color: var(--ink); font-size: 1.15rem; }
.ferien-countdown.leer .ferien-klein { color: var(--ink-soft); }

.ferien-jetzt {
  display: inline-block; margin-left: 6px;
  background: var(--match-green); color: var(--ink);
  border-radius: 5px; padding: 1px 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem; font-weight: 600; text-transform: uppercase;
}

@media (max-width: 600px) {
  .ferien-countdown { padding: 22px 18px; }
  .ferien-countdown .ferien-gross { font-size: 1.4rem; }
}

/* ===================================================================
   JOB-ALARM (Schueler-Dashboard, unter der Jobliste)
   -------------------------------------------------------------------
   Bewusst ruhig gehalten. Die Karte steht unter der Liste, wo jemand
   ankommt, der nichts Passendes gefunden hat - sie soll ein Angebot
   sein, kein Werbebanner. Erst wenn der Alarm laeuft, bekommt sie
   einen gruenen Rand als Bestaetigung.
   =================================================================== */
.alarm-karte {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  justify-content: space-between;
  margin-top: 26px; padding: 20px 22px;
  background: var(--card);
  border: 1px solid var(--line); border-radius: 16px;
}
.alarm-karte[hidden] { display: none; }
.alarm-karte.alarm-an { border-color: rgba(0,200,150,0.45); }

.alarm-text { flex: 1 1 260px; min-width: 0; }
.alarm-text b { display: block; font-size: 0.98rem; margin-bottom: 4px; }
.alarm-text p { margin: 0; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.55; }

/* Die gespeicherten Kriterien in Monospace: Sie sind Daten, kein
   Fliesstext, und heben sich so ohne zusaetzliche Farbe ab. */
.alarm-kriterien {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.82rem;
  color: var(--match-green-dark);
}

.alarm-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
.alarm-karte .btn { font-size: 0.88rem; padding: 10px 18px; min-height: 44px; }

@media (max-width: 600px) {
  .alarm-karte { padding: 18px; }
  /* Auf dem Handy volle Breite statt gequetschter Knopfreihe. */
  .alarm-knoepfe { width: 100%; }
  .alarm-knoepfe .btn { flex: 1 1 auto; }
}

/* ===================================================================
   RATGEBER-UEBERSICHT (ratgeber.html)
   -------------------------------------------------------------------
   Anlass (26.8.): Ferienjob, Taschengeld und Fairer Lohn waren von der
   Startseite aus NUR ueber den Footer erreichbar - dort sterben Links.
   Statt die Wege-Kacheln auf der Startseite zu ueberladen (vier Karten
   in einem Vierer-Raster; eine fuenfte haette allein in der zweiten
   Zeile gestanden), bekommt der Ratgeber einen eigenen Eintrag in der
   Hauptnavigation und diese Uebersicht als Ziel.
   =================================================================== */
.ratgeber-liste {
  display: grid; gap: 12px; margin: 18px 0 8px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 640px) { .ratgeber-liste { grid-template-columns: 1fr; } }

.ratgeber-karte {
  display: block; padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--line); border-radius: 14px;
  /* .legal-page a unterstreicht alle Verweise - bei einer Kachel waere
     das falsch. Dieselbe Falle wie bei den Knoepfen am 26.8. */
  text-decoration: none !important;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.ratgeber-karte:hover {
  border-color: var(--match-green);
  transform: translateY(-1px);
}
.ratgeber-karte:focus-visible {
  outline: 2px solid var(--indigo); outline-offset: 3px;
}

.ratgeber-karte b {
  display: block; margin-bottom: 5px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1rem; color: var(--ink);
}
.ratgeber-karte span {
  display: block;
  font-size: 0.87rem; line-height: 1.55; color: var(--ink-soft);
}

/* Kleiner Vermerk in der Ueberschrift einer Kachel, z.B. "Konto noetig".
   Steht bewusst NICHT nur im Fliesstext: Wer Kacheln ueberfliegt, liest
   die Ueberschrift und sonst nichts. */
.ratgeber-karte .ratgeber-hinweis {
  display: inline-block; margin-left: 8px; vertical-align: middle;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 100px; padding: 2px 9px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem; font-weight: 400; color: var(--ink-soft);
}

/* ===================================================================
   JOB-FINDER: Weg vom Ergebnis in die Jobboerse
   -------------------------------------------------------------------
   Am 26.8. ergaenzt. Der Test lieferte vier Vorschlaege und einen Knopf
   auf die UNGEFILTERTE Boerse - die fuenf Antworten waren damit umsonst.
   Jetzt fuehrt jede Ergebniskarte zu genau solchen Jobs, passend zum
   angegebenen Alter.
   =================================================================== */
.idee-suche {
  display: inline-block; margin-top: 10px;
  font-size: 0.85rem; font-weight: 600;
  color: var(--match-green-dark);
  text-decoration: none;
  /* Tippziel: der Text allein waere auf dem Handy zu flach. */
  padding: 8px 0; min-height: 24px;
}
.idee-suche:hover { text-decoration: underline; }
.idee-suche:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; border-radius: 4px; }

/* Hinweis zum Jugendarbeitsschutz im Anzeigenformular.
   Erscheint unter der Alterswahl, sobald ein Alter gewählt ist, bei dem
   engere Regeln gelten. Kein Fehler, sondern eine Erklärung — deshalb
   ruhig statt rot. */
.jugendschutz-hinweis {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--match-green-dark);
  background: rgba(0, 200, 150, 0.07);
  border-radius: 0 8px 8px 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.jugendschutz-hinweis[hidden] { display: none; }

/* Anhaltspunkte zu einer neuen Firma im Betreiber-Bereich.
   Heisst bewusst NICHT .firma-hinweis - den Namen gibt es schon als
   Haftungshinweis auf ferienjob/fairer-lohn/fuer-firmen. Die Kollision
   hat dort den Link-Kontrast auf 4,47:1 gedrueckt (noetig 4,5:1);
   tests/kontrast.spec.js hat es gefangen.
   Eine Lesehilfe, kein Urteil — deshalb zurückhaltend. Ein Betreiber,
   der lauter rote Warnungen sieht, klickt sie nach drei Tagen weg. */
.pruef-hinweise { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.pruef-hinweis {
  font-size: 0.8rem;
  line-height: 1.5;
  padding: 7px 10px 7px 26px;
  border-radius: 8px;
  position: relative;
  color: var(--ink-soft);
  background: rgba(0, 0, 0, 0.03);
}
.pruef-hinweis::before { position: absolute; left: 8px; top: 7px; }
.pruef-hinweis--gut::before     { content: '✓'; color: var(--match-green-dark); }
.pruef-hinweis--hinweis::before { content: '·'; color: var(--ink-soft); font-weight: 700; }
.pruef-hinweis--achtung::before { content: '!'; color: var(--coral); font-weight: 700; }
.pruef-hinweis--achtung { background: rgba(165, 68, 44, 0.07); color: var(--coral); }

/* ---------- Anschreiben-Coach ----------
   Ersetzt seit dem 27.8. den Knopf, der einen fertigen Beispieltext ins
   Feld warf. Drei kurze Fragen, der Text entsteht aus den eigenen
   Antworten. Zugeklappt, damit niemand sich bevormundet fühlt — wer
   einfach lostippen will, soll das können. */
.coach {
  border: 1.5px solid var(--line);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
  background: var(--paper);
}
.coach-auf {
  display: block; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  padding: 12px 14px; font-family: inherit;
  min-height: 44px;
}
.coach-auf:hover { background: rgba(0, 200, 150, 0.06); }
.coach-auf-titel { display: block; font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.coach-auf-mehr { display: block; font-size: 0.78rem; color: var(--ink-soft); margin-top: 2px; }

.coach-inhalt { padding: 4px 14px 14px; }
.coach-inhalt[hidden] { display: none; }

.coach-frage { margin-bottom: 14px; }
.coach-frage label {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 0.86rem; font-weight: 600; color: var(--ink);
  margin-bottom: 6px;
}
.coach-nr {
  flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--match-green-dark); color: #fff;
  font-size: 0.72rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.coach-frage textarea {
  width: 100%; resize: vertical;
  font-family: inherit; font-size: 0.9rem;
}
.coach-hinweis {
  font-size: 0.76rem; line-height: 1.5;
  color: var(--ink-soft); margin: 5px 0 0;
}
.coach-fuss {
  font-size: 0.76rem; color: var(--ink-soft);
  margin: 8px 0 0; text-align: center;
}

/* Rückmeldung unter dem Textfeld. Nie blockierend — es ist seine
   Bewerbung, absenden darf er immer. */
.coach-rueckmeldung { margin-top: 8px; display: grid; gap: 5px; }
.coach-punkt {
  margin: 0; font-size: 0.8rem; line-height: 1.5;
  padding: 7px 10px 7px 26px; border-radius: 8px; position: relative;
}
.coach-punkt::before { position: absolute; left: 9px; top: 7px; font-weight: 700; }
.coach-punkt--fehlt   { background: rgba(0, 0, 0, 0.035); color: var(--ink-soft); }
.coach-punkt--fehlt::before   { content: '·'; }
.coach-punkt--gut     { background: rgba(0, 200, 150, 0.08); color: var(--match-green-dark); }
.coach-punkt--gut::before     { content: '✓'; }
.coach-punkt--achtung { background: rgba(165, 68, 44, 0.08); color: var(--coral); }
.coach-punkt--achtung::before { content: '!'; }

/* ---------- Bereich „Einstellungen" (27.8.) ----------
   Der Job-Alarm liess sich vorher nur unter der Jobliste einrichten, und
   nur indem er die dort gesetzten Filter übernahm. Hier stellt der
   Schüler ihn direkt ein. */
.einst-kopf {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-bottom: 6px;
}
.einst-kopf h3 { margin: 0; font-size: 1.05rem; }
.einst-status {
  font-size: 0.78rem; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.05); color: var(--ink-soft);
}
.einst-status--an { background: rgba(0, 200, 150, 0.12); color: var(--match-green-dark); }

.einst-erklaerung {
  font-size: 0.86rem; line-height: 1.6;
  color: var(--ink-soft); margin: 0 0 18px;
}

/* Zwei Felder nebeneinander, auf dem Handy untereinander. */
.form-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .form-zeile { grid-template-columns: 1fr; } }

.einst-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* Textlink-Knopf in der Alarm-Karte. */
.alarm-link {
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 0.82rem;
  color: var(--match-green-dark); text-decoration: underline;
  padding: 11px 8px; min-height: 44px;
}
.alarm-link:hover { color: var(--ink); }

/* ---------- „Konto löschen" (27.8.) ----------
   Bewusst abgesetzt vom Rest der Einstellungen und ruhig gestaltet: Ein
   knallroter Kasten macht Angst und wird trotzdem geklickt. Die Hürde
   liegt nicht in der Farbe, sondern im getippten Wort. */
.gefahr-box { border: 1.5px solid rgba(165, 68, 44, 0.3); margin-top: 20px; }
.gefahr-box .einst-kopf h3 { color: var(--coral); }

.gefahr-knopf { color: var(--coral); border-color: rgba(165, 68, 44, 0.4); }
.gefahr-knopf:hover { background: rgba(165, 68, 44, 0.06); }

.gefahr-knopf-voll {
  background: var(--coral); color: #fff; border: 1.5px solid var(--coral);
}
.gefahr-knopf-voll:hover { background: #8d3924; border-color: #8d3924; }
.gefahr-knopf-voll:disabled { opacity: 0.6; cursor: default; }

/* Bestätigung nach dem Löschen des Kontos (27.8.).
   Bleibt stehen, bis man sie wegklickt — ein Toast wäre weg, bevor man
   ihn gelesen hat, und diese Nachricht will man lesen. */
.konto-weg {
  display: flex; align-items: flex-start; gap: 12px;
  max-width: 620px; margin: 12px auto; padding: 14px 16px;
  background: rgba(0, 200, 150, 0.09);
  border: 1px solid rgba(0, 121, 92, 0.25);
  border-radius: 12px;
  font-size: 0.88rem; line-height: 1.6; color: var(--ink);
}
.konto-weg p { margin: 4px 0 0; color: var(--ink-soft); }
.konto-weg-zu {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--ink-soft); font-size: 1rem;
  min-width: 44px; min-height: 44px;
}
.konto-weg-zu:hover { color: var(--ink); }

/* `<b>` bedeutet in CSS „eine Stufe fetter" - in einem ohnehin fetten
   <label> wird daraus 900. Diesen Schnitt laedt die Seite gar nicht, der
   Browser rechnet ihn dann kuenstlich hoch und es sieht schlechter aus.
   tests/schriften.spec.js hat es gefangen. */
.gefahr-box label b,
.coach-frage label b { font-weight: 700; }

/* ============================================================
   RATGEBER ALS WEG (27.8.)
   ------------------------------------------------------------
   Die Artikel sind keine Kategorien, sondern eine Reihenfolge:
   „darf ich das überhaupt" → „was gibt es" → „was ist das wert" →
   „brauche ich was dafür" → „wie bewerbe ich mich" → „und in den
   Ferien". Weil die Reihenfolge hier wirklich Information trägt,
   sind es nummerierte Stationen mit einer Linie dazwischen — und
   keine beliebig gestreuten Kacheln.

   Die Titel sind Fragen. So kommt ein Fünfzehnjähriger an: mit einer
   Frage, nicht mit einem Stichwort.

   Eltern stehen bewusst NEBEN dem Weg (ohne Nummern, ohne Linie) —
   sie sind andere Leser mit anderen Fragen.
   ============================================================ */

.weg-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--match-green-dark);
  margin: 0 0 6px;
}

.weg { list-style: none; margin: 22px 0 8px; padding: 0; position: relative; }

/* Die Linie, die die Stationen verbindet. Läuft hinter den Marken
   durch und endet an der letzten — deshalb am :last-child gekappt. */
.weg-station { position: relative; padding-left: 62px; padding-bottom: 14px; counter-increment: weg; }
.weg-station::before {
  content: '';
  position: absolute; left: 21px; top: 44px; bottom: 0;
  width: 2px; background: var(--line);
}
.weg-station:last-child { padding-bottom: 0; }
.weg-station:last-child::before { display: none; }

/* Die Marke: Nummer und Bild teilen sich denselben Kreis. Die Nummer
   steht als Mono-Ziffer darüber links — sie ist ein Index, kein Text. */
.weg-marke {
  position: absolute; left: 0; top: 4px;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--card);
  border: 1.5px solid var(--line);
  color: var(--match-green-dark);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.weg-marke svg { width: 24px; height: 24px; }
.weg-station::after {
  content: counter(weg);
  position: absolute; left: 0; top: -2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--match-green-dark); color: #fff;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
}

.weg .ratgeber-karte { padding: 14px 18px; }
.weg .ratgeber-karte b { font-size: 1.08rem; }

.weg-station:hover .weg-marke,
.weg-station:focus-within .weg-marke {
  border-color: var(--match-green);
  background: rgba(0, 200, 150, 0.08);
}

/* Eltern: ruhiger, ohne Weg-Motiv. */
.eltern-block { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.eltern-vorspann { color: var(--ink-soft); font-size: 0.9rem; margin: -4px 0 0; }

@media (max-width: 560px) {
  .weg-station { padding-left: 54px; }
  .weg-marke { width: 38px; height: 38px; }
  .weg-marke svg { width: 21px; height: 21px; }
  .weg-station::before { left: 18px; top: 40px; }
}

/* Seiten mit Rollenpruefung: Inhalt zurueckhalten, bis feststeht, ob er
   ueberhaupt fuer diesen Besucher ist. `visibility` statt `display`,
   damit das Layout nicht springt. Der Wecker in der Seite nimmt die
   Klasse zur Not selbst wieder weg – eine dauerhaft leere Seite waere
   schlimmer als ein kurzes Aufblitzen. */
.pruefe-zugang { visibility: hidden; }

/* ============================================================
   LEBENSLAUF-EDITOR, UMGEBAUT (1.9.2026)

   Sanad: das Eintippen, Bearbeiten und Verschieben sei "einfach
   hässlich" und man verstehe es nicht auf Anhieb. Angesehen habe ich
   mir dafür Resumonk, Kickresume, Rezi, Enhancv und lebenslauf.de.
   Drei Dinge sind dort überall gleich:

     1. Verschoben wird an einem Griff, nicht mit Textpfeilchen.
     2. Werkzeuge stehen nicht in der Kopfzeile, wo sie die
        Überschrift zerdrücken.
     3. Ein neuer Abschnitt kommt aus einer benannten Auswahl, nicht
        aus acht gleich aussehenden Knöpfen nebeneinander.
   ============================================================ */

/* --- Kopfzeile der Karte: Griff, Haken, Name, Art --- */
.ll-karte summary { gap: 4px; }

.ll-griff {
  flex-shrink: 0;
  width: 44px; height: 44px;
  margin-left: -10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
  font-size: 1.05rem; line-height: 1;
  cursor: grab;
  border-radius: 8px;
  /* Ohne das scrollt das Handy die Seite, statt die Karte zu ziehen. */
  touch-action: none;
}
.ll-griff:hover { background: var(--paper); color: var(--ink); }
.ll-karte .ll-griff:active { cursor: grabbing; }

/* Die Art des Abschnitts in Worten statt in Grossbuchstaben-Fachsprache. */
.ll-karte-typ {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* --- Werkzeuge im Fuss der Karte statt in der Kopfzeile --- */
.ll-karte-fuss {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.ll-werkzeug {
  min-height: 44px;
  padding: 10px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.82rem; font-weight: 500;
  cursor: pointer;
}
.ll-werkzeug:hover:not(:disabled) { background: var(--paper); }
.ll-werkzeug:disabled { opacity: 0.4; cursor: default; }
.ll-werkzeug-weg { margin-left: auto; color: var(--coral); border-color: rgba(165,68,44,0.28); }
.ll-werkzeug-weg:hover { background: rgba(165,68,44,0.07); }
.ll-werkzeug-weg.weg-confirm { background: var(--coral); color: #fff; border-color: var(--coral); }

/* --- Hilfstext unter einem Feld --- */
.ll-feldhilfe {
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 6px 0 0;
}

/* --- Knopf fuer Hilfen und "+ Sprache" / "+ Faehigkeit" --- */
.ll-hilfe-knopf {
  min-height: 44px;
  margin-top: 12px;
  padding: 10px 16px;
  border: 1.5px dashed var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.82rem; font-weight: 500;
  cursor: pointer;
}
.ll-hilfe-knopf:hover { background: var(--paper); border-style: solid; }

/* --- Zeilen fuer Sprachen und Faehigkeiten ---
   Vorher: Eingabefeld, Regler und ein winziges Kreuz in einer engen
   Reihe, ohne Beschriftung. Jetzt hat jedes Feld seinen Namen, und der
   Entfernen-Knopf ist gross genug zum Treffen. */
.ll-zeilen { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.ll-zeile {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.ll-zeile .form-group { margin: 0; }
.ll-zeile input[type="range"] { width: 100%; accent-color: var(--match-green); height: 28px; }
.ll-stufe { color: var(--match-green-dark); font-weight: 600; }
.ll-zeile-weg {
  min-height: 44px; padding: 10px 14px;
  border: 1.5px solid rgba(165,68,44,0.28);
  border-radius: 10px;
  background: var(--card);
  color: var(--coral);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.8rem; font-weight: 500;
  cursor: pointer; white-space: nowrap;
}
.ll-zeile-weg:hover { background: rgba(165,68,44,0.07); }

/* --- Bild-Zeile --- */
.ll-bild-zeile { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ll-bild-zeile .btn, .ll-foto-knopf { min-height: 44px; padding: 10px 16px; font-size: 0.82rem; }
.ll-bild-weg { color: var(--coral); }

/* --- Auswahl fuer einen neuen Abschnitt --- */
.ll-abschnitt-box { margin-top: 22px; }
.ll-abschnitt-btn { width: 100%; min-height: 48px; }
.ll-abschnitt-wahl { display: none; margin-top: 12px; }
.ll-abschnitt-wahl.offen { display: block; }
.ll-wahl-gruppe + .ll-wahl-gruppe { margin-top: 18px; }
.ll-wahl-titel {
  font-size: 0.74rem; font-weight: 600;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.ll-wahl {
  display: block; width: 100%; text-align: left;
  margin-bottom: 8px; padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  cursor: pointer;
  font-family: 'IBM Plex Sans', sans-serif;
}
.ll-wahl:hover { border-color: var(--match-green); background: var(--paper); }
.ll-wahl b { display: block; font-size: 0.92rem; color: var(--ink); margin-bottom: 3px; }
.ll-wahl span { display: block; font-size: 0.8rem; line-height: 1.45; color: var(--ink-soft); }

/* --- Waehrend des Ziehens --- */
.ll-zieht-gerade { cursor: grabbing; }
.ll-zieht-gerade .ll-karte { transition: transform 0.12s ease; }
.ll-karte.zieht {
  border-color: var(--match-green);
  box-shadow: 0 12px 28px rgba(22,26,31,0.16);
  opacity: 0.95;
}

/* --- Schmale Raender --- */
@media (max-width: 560px) {
  .ll-zeile { grid-template-columns: 1fr; align-items: stretch; }
  .ll-zeile-weg { width: 100%; }
  .ll-werkzeug { flex: 1 1 100%; }
  .ll-werkzeug-weg { margin-left: 0; }
  .ll-karte-typ { display: none; }   /* Platz gehoert hier dem Namen */
}

/* ============================================================
   DER EDITOR ALS ASSISTENT (2.9.2026)
   Fuenf Schritte statt einer langen Liste - Form uebernommen von
   app.onlinelebenslauf.com, das Sanad als Vorbild geschickt hat.
   ============================================================ */

.ll-schritt-leiste { margin-bottom: 18px; }
.ll-schritt-zahl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 4px;
}
/* 500, nicht 600: Von IBM Plex Mono laedt die Seite nur 400 und 500.
   Bei 600 rechnet der Browser die Fettung selbst aus, und das sieht
   anders aus als der echte Schnitt. schriften.spec.js faengt genau
   das ab - und hat es hier auch getan. */
.ll-schritt-zahl b { color: var(--ink); font-weight: 500; }
.ll-schritt-name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.5rem; line-height: 1.15; margin: 0 0 12px; color: var(--ink);
}
.ll-schritt-leiste .ll-progress-balken { margin-bottom: 6px; }
.ll-progress-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem; color: var(--ink-soft); margin: 0; text-align: right;
}

.ll-schritt-text { margin-bottom: 20px; }
.ll-schritt-text h3 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.12rem; line-height: 1.3; margin: 0 0 6px; color: var(--ink);
}
.ll-schritt-text p {
  font-size: 0.9rem; line-height: 1.55; color: var(--ink-soft); margin: 0;
}

/* Ein leerer Schritt sieht sonst aus wie ein Fehler. */
.ll-schritt-leer {
  border: 1.5px dashed var(--line); border-radius: 12px;
  padding: 18px; margin: 0 0 4px;
  font-size: 0.88rem; line-height: 1.55; color: var(--ink-soft);
  background: var(--paper);
}
.ll-schritt-leer[hidden] { display: none; }
#ll-vorlagen-box[hidden], #ll-abschnitt-box[hidden] { display: none; }

.ll-schritt-fuss {
  display: flex; gap: 12px; align-items: center;
  margin-top: 26px; padding-top: 18px;
  border-top: 1px solid var(--line);
}
.ll-schritt-fuss .btn { min-height: 48px; padding: 12px 26px; }
.ll-schritt-fuss #ll-weiter { margin-left: auto; }
.ll-schritt-fuss .btn:disabled { opacity: 0.4; cursor: default; }

@media (max-width: 560px) {
  .ll-schritt-name { font-size: 1.3rem; }
  .ll-schritt-fuss .btn { flex: 1; padding: 12px 16px; }
}

/* Wer auf einer Hinweisseite landet, soll sehen, MIT WELCHEM Konto.
   Sanad war sicher, nicht angemeldet zu sein - er war es.
   Eine Supabase-Sitzung ueberlebt das Schliessen des Tabs. */
.hinweis-konto {
  font-size: 0.85rem; line-height: 1.5; color: var(--ink-soft);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 16px; margin: 4px 0 18px;
  max-width: 46ch;
}

/* Wie alt eine Anzeige ist. Indeed und StepStone schreiben das an jede
   Karte - und aus gutem Grund: Ob sie von gestern oder von vor drei
   Monaten ist, entscheidet, ob sich das Bewerben lohnt. Ein Datum muss
   man umrechnen, "vor 2 Tagen" nicht. */
.job-frische {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem; color: var(--ink-soft);
  margin: 10px 0 0;
}

/* ============================================================
   DIE ANZEIGENSEITE ALS LANDESEITE (2.9.2026)
   Aus dem Vergleich mit Indeed/StepStone und den Untersuchungen zu
   Abbruchgruenden: Eine Anzeigenseite ist keine Akte, sondern eine
   Seite, auf der jemand entscheidet. Oben stehen die vier Angaben,
   die die Entscheidung tragen - vorher lagen sie in einer flachen
   Reihe zwischen Aufrufzahl und Anzeigenalter.
   ============================================================ */

.job-eckdaten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px; margin: 22px 0 0;
  background: var(--line); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
}
.job-eckdaten > div { background: var(--card); padding: 14px 16px; }
.job-eckdaten dt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 4px;
}
.job-eckdaten dd {
  margin: 0; font-size: 1.02rem; font-weight: 600; color: var(--ink);
  line-height: 1.3;
}

/* Die Handlung frueh, nicht erst nach Beschreibung und Bewertungen. */
.job-cta-oben { margin: 18px 0 6px; }
.job-cta-oben .btn { min-height: 50px; padding: 14px 28px; font-size: 1rem; }
.job-cta-oben p {
  font-size: 0.8rem; color: var(--ink-soft); margin: 8px 0 0;
}

/* Wer eine Anzeige liest, liest sie nicht - er ueberfliegt sie. */
.job-punkte { margin: 10px 0 0; padding-left: 22px; }
.job-punkte li { margin-bottom: 8px; line-height: 1.6; }

@media (max-width: 560px) {
  .job-eckdaten { grid-template-columns: 1fr 1fr; }
  .job-cta-oben .btn { width: 100%; }
}

/* Ein freiwilliges Feld muss als freiwillig zu erkennen sein - sonst
   fuellt man es aus Pflichtgefuehl aus und bricht ab, wenn einem nichts
   einfaellt. */
.feld-freiwillig {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase;
  /* 500, nicht geerbt: Diese Auszeichnung steht IN einem <label>, und
     Labels sind hier 600. Von IBM Plex Mono laedt die Seite aber nur
     400 und 500 - der Browser wuerde die Fettung selbst ausrechnen.
     Dieselbe Falle wie beim <b> im Label. */
  font-weight: 500;
  color: var(--ink-soft); background: var(--paper);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 8px; margin-left: 6px; vertical-align: middle;
}
.feld-hilfe {
  font-size: 0.8rem; line-height: 1.5; color: var(--ink-soft);
  margin: 0 0 10px;
}

/* Etwas Luft zwischen Knopf, Zusatz und dem, was darunter kommt. */
.job-cta-oben { margin-bottom: 18px; }
.job-frische { margin-bottom: 6px; }

/* ============================================================
   DER STAND EINER BEWERBUNG (2.9.2026)
   Die Zeitleiste hatte drei Schritte, aber nur zwei Zustaende.
   Jetzt haengt der mittlere an `angesehen_am`, und eine Absage
   sagt, warum.
   ============================================================ */

/* Das Datum am Schritt - klein, damit es den Schritt nicht ueberlagert. */
.bew-schritt em {
  display: block; font-style: normal;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.64rem; color: var(--ink-soft); margin-top: 2px;
}

.bew-absage {
  margin-top: 12px; padding: 12px 14px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 12px;
}
.bew-absage-grund {
  margin: 0 0 6px; font-size: 0.9rem; font-weight: 600; color: var(--ink);
}
.bew-absage .bew-trost { margin: 0; }

/* Die Gruende treten an die Stelle der Knopfreihe - kein Popup. */
.absage-gruende { flex-direction: column; align-items: stretch; }
.absage-frage {
  font-size: 0.82rem; line-height: 1.5; color: var(--ink-soft);
  margin: 0 0 8px;
}
.absage-wahl, .absage-zurueck {
  min-height: 44px; text-align: left; padding: 10px 14px;
  font-size: 0.82rem; margin-bottom: 6px;
}
.absage-zurueck { color: var(--ink-soft); }

/* ============================================================
   FIRMENSEITE AUFGERAEUMT (2.9.2026)
   Die Bewerber steckten in der Anzeigenliste - die Ansicht hiess
   selbst "Meine Jobs & Bewerber". Jetzt zwei Ansichten.
   ============================================================ */

.bew-gruppe { margin-bottom: 28px; }
.bew-gruppe-kopf {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 8px; margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.bew-gruppe-kopf h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.05rem; margin: 0; color: var(--ink);
}
.bew-gruppe-kopf span {
  margin-left: auto; font-size: 0.72rem; color: var(--ink-soft);
  white-space: nowrap;
}

/* Der Weg von der Anzeige zu ihren Bewerbungen. */
.job-bew-hinweis {
  margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.82rem; color: var(--ink-soft);
}
.job-bew-link {
  background: none; border: 0; padding: 0;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.85rem; font-weight: 600;
  color: var(--match-green-dark); cursor: pointer;
  text-align: left;
}
.job-bew-link:hover { text-decoration: underline; }

/* Das Firmenlogo im Profil. */
#firma-logo-preview { font-size: 1.6rem; }

/* ============================================================
   DIE OEFFENTLICHE FIRMENSEITE (2.9.2026)
   Ein Schueler sah von einer Firma bisher nur einen Namen auf der
   Anzeige. Nachsehen, wer das ist, konnte er nirgends.
   ============================================================ */

.firma-kopf { display: flex; align-items: center; gap: 18px; margin: 18px 0 6px; }
.firma-kopf h1 { font-size: 1.9rem; margin: 0 0 4px; }
.firma-kopf .company-name { margin: 0; }
.firma-logo {
  width: 72px; height: 72px; flex-shrink: 0;
  border-radius: 16px; border: 1px solid var(--line);
  background: var(--paper) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.8rem; font-weight: 700; color: var(--ink-soft);
}
.firma-marken { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.firma-marke {
  font-size: 0.74rem; font-weight: 600;
  color: var(--match-green-dark);
  background: rgba(0,200,150,0.10);
  border: 1px solid rgba(0,121,92,0.22);
  border-radius: 999px; padding: 4px 12px;
}
.firma-marke--leise {
  color: var(--ink-soft); background: var(--paper);
  border-color: var(--line); font-weight: 500;
}
.firma-bewertung {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 10px; background: var(--card);
}
.firma-bewertung b { font-size: 0.9rem; }
.firma-bewertung p { margin: 6px 0 0; font-size: 0.92rem; line-height: 1.6; }

@media (max-width: 560px) {
  .firma-kopf { gap: 12px; }
  .firma-logo { width: 56px; height: 56px; font-size: 1.4rem; }
  .firma-kopf h1 { font-size: 1.45rem; }
}