/* ==========================================================================
   FOKUS JOBS – Design Tokens
   Abgeleitet aus dem Look & Feel von fokus-lokal.de, angewendet auf
   Jobseite, Kunden-Dashboard und Plattform-Startseite.
   Direkt einbindbar im Laravel-Projekt (public/css/design-tokens.css).
   ========================================================================== */

/* --------------------------------------------------------------------------
   PROJ-14: Schriften liegen selbst auf dem Server (public/fonts/), vorher
   @import von fonts.googleapis.com. Beim Laden von Google wäre die IP-Adresse
   jedes Besuchers an Google gegangen — ohne Einwilligung und ohne dass es sich
   technisch vermeiden ließe.

   Es sind Variable Fonts: eine Datei deckt den ganzen Gewichtsbereich ab
   (Inter 100–900, Plus Jakarta Sans 200–800), deshalb genügen zwei Dateien pro
   Schrift. Die latin-ext-Variante lädt der Browser nur nach, wenn ein Zeichen
   daraus tatsächlich vorkommt (unicode-range) — für deutsche Texte bleibt es
   bei den beiden latin-Dateien, zusammen rund 74 KB.

   Aktualisieren: Datei bei Google Fonts neu ziehen, in public/fonts/ ablegen,
   die unicode-range-Angaben unten mit übernehmen.
   -------------------------------------------------------------------------- */

/* Inter – latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter – latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Plus Jakarta Sans – latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Plus Jakarta Sans – latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Ohne dieses Reset addieren Elemente mit width:100% (z. B. .input) ihr
   Padding/ihre Border zur Breite hinzu und ragen über ihren Container
   hinaus — sichtbar z. B. als horizontales "Schwimmen" der Seite bei
   Formularen in prozentual breiten Containern. */
*, *::before, *::after {
  box-sizing: border-box;
}

:root {

  /* -- Farben: Marke -------------------------------------------------- */
  --color-teal:        #14B8A6;  /* Primärfarbe: Buttons, Links, Akzente */
  --color-teal-dark:    #0F766E;  /* Hover-Zustand, Text auf hellem Teal-Tint */
  --color-teal-tint:    #E1F5EE;  /* Hintergrund für Badges/Status "Live" */

  /* -- Farben: Neutral / Text ------------------------------------------ */
  --color-navy:         #1E293B;  /* Überschriften, dunkle Flächen, Footer */
  --color-navy-2:       #334155;  /* Karten auf dunklem Hintergrund */
  --color-slate:        #475569;  /* Fließtext */
  --color-slate-muted:  #94A3B8;  /* Meta-Text auf dunklem Hintergrund */
  --color-border:       #E2E8F0;  /* Standard-Rahmen, Trennlinien */
  --color-bg-soft:      #F1F5F9;  /* Alternierende Sektions-Hintergründe */
  --color-bg-page:      #F8FAFC;  /* App-/Dashboard-Hintergrund */
  --color-white:        #FFFFFF;

  /* -- Farben: Status-Badges -------------------------------------------- */
  --color-status-live-bg:     #E1F5EE;  --color-status-live-text:     #0F766E;
  --color-status-booked-bg:   #E6F1FB;  --color-status-booked-text:   #0C447C;
  --color-status-draft-bg:    #F1F5F9;  --color-status-draft-text:    #475569;
  --color-status-expiring-bg: #FEF3C7;  --color-status-expiring-text: #92400E;
  --color-status-expired-bg:  #FEE2E2;  --color-status-expired-text:  #991B1B;

  /* -- Typografie -------------------------------------------------------
     Hinweis: Die exakte Schrift von fokus-lokal.de konnte nicht ausgelesen
     werden (kein CSS-Zugriff möglich). Plus Jakarta Sans + Inter sind die
     nächstliegende freie Google-Fonts-Kombination zum beobachteten Stil
     (geometrisch, bold Headlines, humanistischer Fließtext). Bei Bedarf
     hier austauschen, sobald die Originalschrift bekannt ist. */
  --font-heading: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --text-eyebrow:  12px;  /* Kicker-Label über Headlines, uppercase */
  --text-h1:       30px;  /* Seiten-/Hero-Headline */
  --text-h2:       20px;  /* Abschnitts-Headline */
  --text-h3:       15px;  /* Karten-/Block-Headline */
  --text-body:      14px;  /* Standard-Fließtext */
  --text-meta:      12px;  /* Meta-Info, Badges, Fußzeilen */

  --leading-heading: 1.25;
  --leading-body:    1.7;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* -- Abstände (4px-Raster) --------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* -- Radien -------------------------------------------------------------- */
  --radius-sm: 6px;   /* Icon-Kacheln, kleine Elemente */
  --radius-md: 8px;   /* Buttons, Formularfelder */
  --radius-lg: 10px;  /* Karten */
  --radius-xl: 12px;  /* große Container/Sektionen */
  --radius-pill: 20px; /* Status-Badges */

  /* -- Rahmen ---------------------------------------------------------------- */
  --border-hairline: 0.5px solid var(--color-border);
  --border-emphasis: 1.5px solid var(--color-navy);

  /* -- Schatten (sparsam einsetzen, Design ist bewusst flach) ---------------- */
  --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-popover: 0 8px 24px rgba(15, 23, 42, 0.12);

  /* -- Übergänge --------------------------------------------------------------- */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
}

/* ==========================================================================
   Basis-Elemente
   ========================================================================== */

/* PROJ-16: Ohne margin:0 blieb der Browser-Standardrand von 8 px stehen —
   sichtbar als schmaler weißer Streifen links und rechts neben Hero, Sticky-
   Header und dunklem Footer. jobs/show.blade.php setzte das schon im eigenen
   <style>-Block und war deshalb nie betroffen.
   text-size-adjust verhindert, dass iOS Safari im Querformat eigenmächtig die
   Schriftgröße hochskaliert. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-slate);
  line-height: var(--leading-body);
  background: var(--color-white);
}

h1, h2, h3, .eyebrow {
  font-family: var(--font-heading);
  color: var(--color-navy);
  margin: 0;
}

h1 { font-size: var(--text-h1); font-weight: var(--weight-bold); line-height: var(--leading-heading); }
h2 { font-size: var(--text-h2); font-weight: var(--weight-bold); line-height: var(--leading-heading); }
h3 { font-size: var(--text-h3); font-weight: var(--weight-bold); line-height: var(--leading-heading); }

.eyebrow {
  display: inline-block;
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-teal-dark);
  margin-bottom: var(--space-3);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  padding: 11px 20px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--color-teal);
  color: var(--color-white);
}
.btn-primary:hover { background: var(--color-teal-dark); }

.btn-secondary {
  background: transparent;
  color: var(--color-navy);
  border: var(--border-emphasis);
}
.btn-secondary:hover { background: var(--color-bg-soft); }

.btn-ghost {
  background: transparent;
  color: var(--color-teal-dark);
  padding: 11px 4px;
}
.btn-ghost:hover { text-decoration: underline; }

/* ==========================================================================
   Karten
   ========================================================================== */

.card {
  background: var(--color-white);
  border: var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.card--interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.card--dark {
  background: var(--color-navy-2);
  border: none;
  color: var(--color-white);
}

.metric-card p:first-child {
  font-size: var(--text-meta);
  color: var(--color-slate);
  margin-bottom: var(--space-2);
}
.metric-card p:last-child {
  font-size: 22px;
  font-weight: var(--weight-bold);
  color: var(--color-navy);
  font-family: var(--font-heading);
}

/* ==========================================================================
   Status-Badges
   ========================================================================== */

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--weight-bold);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
}
.badge--live     { background: var(--color-status-live-bg);     color: var(--color-status-live-text); }
.badge--booked   { background: var(--color-status-booked-bg);   color: var(--color-status-booked-text); }
.badge--draft    { background: var(--color-status-draft-bg);    color: var(--color-status-draft-text); }
.badge--expiring { background: var(--color-status-expiring-bg); color: var(--color-status-expiring-text); }
.badge--expired  { background: var(--color-status-expired-bg);  color: var(--color-status-expired-text); }

/* ==========================================================================
   Formularelemente
   ========================================================================== */

.input, .textarea, .select {
  height: 40px;
  width: 100%;
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-body);
  background: var(--color-white);
  transition: border-color var(--transition-fast);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border: 1px solid var(--color-teal);
  box-shadow: 0 0 0 3px var(--color-teal-tint);
}

/* ==========================================================================
   Sektionen / Layout-Rhythmus
   ========================================================================== */

.section          { padding: var(--space-10) var(--space-6); }
.section--soft    { background: var(--color-bg-soft); }
.section--dark    { background: var(--color-navy); color: var(--color-white); }
.section--dark h2 { color: var(--color-white); }

/* PROJ-16: Grundgröße für <x-fj-icon>. Die Komponente rendert ein <svg> mit
   viewBox, aber ohne width/height — ohne CSS-Größe skaliert ein solches SVG auf
   die volle Breite seines Containers. Auf /kontakt kamen die drei Icons dadurch
   mit 480 × 480 px heraus, jedes so groß wie die halbe Karte. Startseite und
   Job-Seite waren nie betroffen, weil sie .fj-icon in ihrem eigenen
   <style>-Block je Kontext dimensionieren. */
.fj-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Icon-Akzente: Tabler-Icons in Teal für positive/Marken-Bezüge,
   Slate für neutrale Meta-Infos, nie mehrfarbig mischen. */
.icon-accent { color: var(--color-teal); }
.icon-muted  { color: var(--color-slate); }

/* ==========================================================================
   Layout-Container
   PROJ-11: aus home.blade.php (dort .home .wrap) hierher verschoben, damit
   <x-fj-header> und <x-fj-footer> auf jeder Seite dieselbe Breite nutzen
   können, nicht nur auf der Startseite.
   ========================================================================== */

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 28px; }

.btn-sm { font-size: 14px; padding: 10px 18px; }

/* PROJ-16: Der Header-CTA braucht drei Klassen. Die Startseite definiert in
   ihrem eigenen <style>-Block .home .btn { font-size:16px; padding:14px 24px }
   — gleiche Spezifität wie .hdr .btn-sm, aber später im Dokument. Der Button
   im Header war auf der Startseite dadurch deutlich größer als auf allen
   anderen Seiten und sprengte unter 360 px die Kopfzeile. */
.hdr .header-actions .btn { font-size: 14px; padding: 10px 18px; }

/* ==========================================================================
   Header — einheitlich auf allen Seiten außer den einzelnen Job-Seiten
   (jobs/show.blade.php bringt bewusst ihr eigenes, markenneutrales
   Footer-Styling mit und bekommt diesen Header nicht, siehe
   platform/docs/konzept-einheitlicher-header-footer.md).
   ========================================================================== */

.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: var(--border-hairline);
  /* PROJ-16: iPhones mit Notch schieben den Inhalt sonst unter die Statusleiste. */
  padding-top: env(safe-area-inset-top, 0px);
}
.hdr-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 70px; }
.brand { display: flex; align-items: baseline; gap: 10px; color: inherit; text-decoration: none; }
.brand-name { font-family: var(--font-heading); font-weight: 800; font-size: 19px; color: var(--color-navy); letter-spacing: -.01em; }
.brand-sub { font-size: 12px; color: var(--color-slate-muted); font-weight: 500; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a { font-size: 15px; font-weight: 500; color: var(--color-slate); text-decoration: none; transition: color var(--transition-fast); }
.nav a:hover { color: var(--color-teal-dark); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.login-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  color: var(--color-teal-dark);
  flex-shrink: 0;
}
.login-link:hover { background: var(--color-bg-soft); }
.login-link::after {
  content: "Login";
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  white-space: nowrap;
  background: var(--color-navy);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.login-link:hover::after { opacity: 1; transform: translateY(0); }

/* --------------------------------------------------------------------------
   PROJ-16: Mobil-Menü. Unter 960 px verschwand .nav bisher ersatzlos — die
   vier Abschnittslinks waren auf dem Handy überhaupt nicht erreichbar.

   Bewusst <details>/<summary> statt eines JS-Toggles: funktioniert auch ohne
   JavaScript, ist von Haus aus tastaturbedienbar und braucht kein aria-expanded
   (der Browser pflegt den Zustand selbst). Das kleine Skript in
   components/fj-header.blade.php ergänzt nur Komfort (Klick außerhalb, Escape).
   -------------------------------------------------------------------------- */

.hdr-menu { display: none; }
.hdr-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  border-radius: var(--radius-md);
  color: var(--color-navy);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.hdr-menu-toggle::-webkit-details-marker { display: none; }
.hdr-menu-toggle:hover { background: var(--color-bg-soft); }
.hdr-menu-toggle .fj-icon-close { display: none; }
.hdr-menu[open] .hdr-menu-toggle .fj-icon-close { display: block; }
.hdr-menu[open] .hdr-menu-toggle .fj-icon-open { display: none; }

.hdr-menu-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-white);
  border-bottom: var(--border-hairline);
  box-shadow: var(--shadow-popover);
  padding: 8px 0 12px;
  display: flex;
  flex-direction: column;
}
.hdr-menu-panel a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 28px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-slate);
  text-decoration: none;
}
.hdr-menu-panel a:active { background: var(--color-bg-soft); }
.hdr-menu-panel .hdr-menu-login {
  margin-top: 8px;
  padding-top: 14px;
  border-top: var(--border-hairline);
  color: var(--color-teal-dark);
  font-weight: 700;
}

/* ==========================================================================
   Footer — einheitlich auf allen Seiten außer den einzelnen Job-Seiten.
   Wird über <x-fj-footer /> (Default-Variante) eingebunden.
   ========================================================================== */

/* PROJ-16: Die Selektoren führen bewusst .ftr-grid bzw. .ftr-note mit, statt
   nur .ftr h4 / .ftr p / .ftr a zu schreiben. Die Startseite definiert in ihrem
   eigenen <style>-Block .home h1,.home h2,.home h3,.home h4 { color: navy },
   .home p und .home a — gleiche Spezifität (0,1,1), aber später im Dokument,
   also gewann die Startseite. Die Footer-Überschriften standen dadurch navy auf
   navy und waren auf der Startseite schlicht unsichtbar. Mit der zweiten Klasse
   liegt der Footer bei (0,2,1) und schlägt .home zuverlässig. */
.ftr { background: var(--color-navy); color: #94A3B8; padding: 56px 0 26px; font-size: 14px; }
.ftr-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 32px; border-bottom: 1px solid #334155; align-items: start; }
.ftr .ftr-grid h4 { font-family: var(--font-heading); font-size: 13px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .07em; margin: 0 0 14px; }
.ftr .ftr-grid .brand-name { color: #fff; margin-bottom: 12px; display: block; }
.ftr .ftr-grid p { line-height: 1.65; margin: 0; color: #94A3B8; }
.ftr .ftr-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.ftr .ftr-grid a,
.ftr .ftr-note a { color: #94A3B8; text-decoration: none; }
/* Tap-Fläche: die reine Textzeile war rund 20 px hoch, das trifft man auf dem
   Handy schlecht. Mit inline-block + Polster kommt jede Zeile auf ~36 px. */
.ftr .ftr-grid li a { display: inline-block; padding: 8px 0; }
.ftr .ftr-grid a:hover,
.ftr .ftr-note a:hover { color: var(--color-teal); }
.ftr-note { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 22px; font-size: 12.5px; color: #64748B; }
.ftr .ftr-note span { color: #64748B; }

/* ==========================================================================
   Inhaltskarte der <x-layout>-Seiten
   PROJ-16: vorher dieselbe Inline-Deklaration in 13 Views kopiert. Inline-
   Styles lassen sich per Media Query nicht überschreiben, deshalb blieb das
   40-px-Polster auch auf 375-px-Displays stehen.
   ========================================================================== */

.fj-panel {
  /* width:100% ist Pflicht, nicht Kosmetik: .fj-layout-content ist eine
     Flex-Spalte (Sticky Footer), und ein Flex-Item mit margin:0 auto wird in der
     Querachse NICHT gestreckt — die automatischen Ränder haben Vorrang und das
     Item bekommt fit-content-Breite. Ohne diese Zeile hing die Breite davon ab,
     wie lang der längste Textblock zufällig ist. */
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: 40px;
}
/* Deutsche Komposita sind länger als 375-px-Displays: ohne Umbruchregel lief
   „Geschäftsbedingungen" oder „Umsatzsteuer-Identifikationsnummer" seitlich aus
   der Karte heraus. hyphens:auto greift, weil <html lang="de"> gesetzt ist. */
.fj-panel { overflow-wrap: break-word; }
.fj-panel h1, .fj-panel h2, .fj-panel h3 { -webkit-hyphens: auto; hyphens: auto; }
.fj-panel--narrow { max-width: 560px; }
.fj-panel--wizard { max-width: 720px; }
.fj-panel--lead   { max-width: 520px; }
.fj-panel--center { text-align: center; }
/* Für die beiden Livewire-Karten: die bringen ihr Polster selbst je Schritt mit
   und schneiden mit overflow:hidden den Fortschrittsbalken auf die Rundung zu. */
.fj-panel--flush  { padding: 0; overflow: hidden; }
/* Für Seiten, die nur eine Spaltenbreite brauchen, ohne Kartenoptik.
   width:100% aus demselben Grund wie bei .fj-panel — ohne die Zeile war /jobs ab
   700 px Fensterbreite konstant 487 px breit statt 760 px. */
.fj-column { width: 100%; max-width: 760px; margin: 0 auto; }

/* Kopfleiste und Inhaltsbereich der beiden Livewire-Karten (Wizard und
   Link/PDF-Einreichung). PROJ-16: vorher inline, dadurch blieben die 32 px
   seitliches Polster auch auf 375-px-Displays stehen. */
.fj-panel-bar {
  padding: 16px 24px;
  border-bottom: var(--border-hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fj-panel-body { padding: 28px 32px 32px; }

/* ==========================================================================
   Responsive — Header / Footer / Wrap
   ========================================================================== */

@media (max-width: 960px) {
  .nav { display: none; }
  /* PROJ-16: Statt der ersatzlos ausgeblendeten Navigation übernimmt hier das
     Burger-Panel. Das Schloss-Icon entfällt dafür — sein „Login"-Label war ein
     reiner CSS-Hover-Tooltip und auf Touch-Geräten damit unsichtbar; im Panel
     steht stattdessen ein beschrifteter Menüpunkt. */
  .hdr-menu { display: block; }
  .login-link { display: none; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .brand-sub { display: none; }
  /* PROJ-11: Ohne flex-shrink/nowrap brach die Wortmarke bei 375 px auf zwei
     Zeilen um und lief aus dem 62 px hohen Header heraus — der CTA-Button
     beanspruchte so viel Platz, dass für „FOKUS JOBS" nur ~66 px blieben.
     Betraf vorher schon die Startseite, fällt jetzt auf allen Seiten mit
     <x-fj-header> an. */
  .hdr-inner { height: 62px; gap: 10px; }
  .brand { flex-shrink: 0; }
  .brand-name { font-size: 17px; white-space: nowrap; }
  .hdr .header-actions .btn { font-size: 13px; padding: 9px 12px; white-space: nowrap; }
  .hdr-menu-panel a { padding: 0 20px; }

  /* PROJ-16: Zwei Spalten rissen hier große Leerflächen auf — Grid-Zeilen
     richten sich an der höchsten Zelle aus, und der lange Beschreibungstext
     links ließ neben „FOKUS LOKAL" rund 200 px Leere stehen. */
  .ftr { padding: 40px 0 24px; }
  .ftr-grid { grid-template-columns: 1fr; gap: 28px; padding-bottom: 26px; }
  .ftr-note { flex-direction: column; gap: 6px; }

  /* :not() nötig — die --flush-Variante steht weiter oben in der Datei und
     hätte bei gleicher Spezifität gegen diese spätere Regel verloren. */
  .fj-panel:not(.fj-panel--flush) { padding: 24px; }
  .fj-panel-bar { padding: 14px 20px; }
  .fj-panel-body { padding: 24px 20px 28px; }
  .fj-panel { border-radius: var(--radius-lg); }

  /* iOS Safari zoomt beim Fokussieren in jedes Feld hinein, dessen Schrift
     kleiner als 16 px ist. Danach steht die Seite verschoben da. */
  .input, .textarea, .select { font-size: 16px; }
}
@media (max-width: 380px) {
  /* Ab hier wird es zwischen Wortmarke, CTA und Burger wirklich eng. */
  .wrap { padding: 0 16px; }
  .hdr .header-actions .btn { font-size: 12px; padding: 9px 10px; }
  .brand-name { font-size: 16px; }
  .hdr-menu-panel a { padding: 0 16px; }
}