/* ==========================================================================
   Ausbildung bei Bucher Stahlhandel
   Ein einziges Stylesheet, kein Framework, kein Build-Schritt.

   Aufbau:
     01  Schrift (selbst gehostet)
     02  Design-Tokens
     03  Reset & Grundlagen
     04  Typografie
     05  Layout-Hilfen
     06  Buttons
     07  Header & Navigation
     08  Hero
     09  Benefits
     10  Ausbildungsberufe
     11  Bewerbungsablauf
     12  Instagram
     13  Karten und Kontaktangaben
     14  Footer
     15  Formular
     16  Inhaltsseiten (Impressum, Datenschutz, Danke)
     17  Utilities & Motion
   ========================================================================== */


/* == 01 Schrift ============================================================
   Figtree ist ein Variable Font: eine Datei deckt 300-900 ab. Selbst
   gehostet, damit keine Verbindung zu Google-Servern aufgebaut wird.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/figtree-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;
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/figtree-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;
}


/* == 02 Design-Tokens ======================================================
   Farben aus dem Corporate-Auftritt bucher-stahl.de.
   Die drei Orange-Varianten sind kein Zufall: das Marken-Orange #EE741D
   erreicht auf Weiss nur 3.0:1 und traegt deshalb keinen Flaechentext.
     --orange       Flaeche, Dekoration, Buttons
     --orange-text  Orange als Text/Link  -> 5.6:1 auf Weiss,
                    5.0:1 auf --surface-tint (dem getoenten Pill-Grund)
     --orange-dark  Hover-Flaeche und Grafiken (3.8:1 auf Tint, Grenze 3:1)
   Auf Orange-Flaechen steht dunkler Text (5.2:1), nicht Weiss (2.9:1).
   -------------------------------------------------------------------------- */

:root {
  /* Farben */
  --navy:        #1B3550;
  --navy-deep:   #14263A;
  --navy-soft:   #2A4A6B;
  --orange:      #EE741D;
  --orange-dark: #C85A0C;
  --orange-text: #A84E0B;
  --ink:         #141414;
  --ink-muted:   #5A6472;
  --surface:     #FFFFFF;
  --surface-alt: #F4F4F4;
  --surface-tint:#FDF1E7;
  --line:        #DEDEDE;
  --line-soft:   #ECECEC;

  /* Radien */
  --radius:    14px;
  --radius-sm: 8px;
  --radius-lg: 22px;

  /* Schatten */
  --shadow:    0 2px 4px rgb(20 38 58 / .05), 0 12px 28px rgb(20 38 58 / .07);
  --shadow-lg: 0 4px 8px rgb(20 38 58 / .06), 0 24px 48px rgb(20 38 58 / .12);

  /* Rhythmus */
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --gap:       clamp(1rem, .6rem + 1.5vw, 2rem);
  --header-h:  72px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}


/* == 03 Reset & Grundlagen ================================================= */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  /* Anker sollen nicht unter dem sticky Header verschwinden. */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: clamp(1rem, .97rem + .15vw, 1.125rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  /* clip statt hidden: verhindert Querscrollen, ohne position:sticky zu brechen */
  overflow-x: clip;
}

img, svg, picture, video {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

/* Sichtbarer Fokus auf allem Interaktiven - nie entfernen. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--orange); color: var(--navy-deep); }

/* Sprungmarke fuer Tastatur- und Screenreader-Nutzung */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--orange);
  color: var(--navy-deep);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }


/* == 04 Typografie =========================================================
   Fluide Groessen per clamp(). Damit entfaellt jede feste Pixelangabe wie
   die font-size:36px der Altseite, die auf Mobilgeraeten umbrach.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: var(--navy);
}

h1 { font-size: clamp(2rem,    1.4rem  + 3vw,   3.5rem); }
h2 { font-size: clamp(1.65rem, 1.3rem  + 1.7vw, 2.5rem); }
h3 { font-size: clamp(1.2rem,  1.08rem + .6vw,  1.5rem); }
h4 { font-size: 1.0625rem; letter-spacing: 0; }

p { text-wrap: pretty; }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--orange-text); }

/* Orange nur als Akzent in grossen, fetten Ueberschriften (>= 24px bold). */
.accent { color: var(--orange); }

.lead {
  font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem);
  color: var(--ink-muted);
  max-width: 62ch;
}

/* Kleine Sektionsauszeichnung ueber der H2 */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange-text);
  margin-bottom: .75rem;
}
.eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 2px;
  background: var(--orange);
}


/* == 05 Layout-Hilfen ====================================================== */

.wrap {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}
.wrap--narrow { max-width: 760px; }

section[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

.section    { padding-block: var(--section-y); }
.section--alt  { background: var(--surface-alt); }
.section--dark { background: var(--navy); color: #fff; }
.section--dark :where(h2, h3, h4) { color: #fff; }
.section--dark .lead { color: rgb(255 255 255 / .78); }

.section__head { max-width: 62ch; margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .lead { margin-inline: auto; }

/* Auto-fit-Raster: passt sich ohne Media-Query an jede Breite an und
   ersetzt die Bootstrap-Spaltenklassen der Altseite. */
.grid { display: grid; gap: var(--gap); }

/* Die Berufe kommen mit auto-fit aus.
   align-items: start ist der Kern des Kartenverhaltens: die Karten sind nur
   so hoch wie ihr Inhalt und haengen nicht aneinander. Der naheliegende Weg
   fuer buendige Karten - gleich hohe Rasterzellen, per stretch oder subgrid -
   koppelt sie naemlich: die aufgeklappte Voraussetzungsliste einer Karte macht
   dann auch die zugeklappten Nachbarkarten hoch, und dort steht der Platz als
   leere Flaeche. So waechst nur die Karte, die angeklickt wurde.
   Fuer die gleiche Hoehe im zugeklappten Zustand misst Abschnitt 6 in main.js
   je Kartenreihe die hoechste Beschreibung und den hoechsten Faktenblock und
   setzt sie als min-height. Ohne JavaScript stehen die Karten unterschiedlich
   hoch - unschoen, aber es fehlt nichts und nichts ueberdeckt sich. */
.grid--jobs {
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  align-items: start;
}

/* Die Benefits laufen ueber Flexbox statt Grid: geht die Anzahl nicht in der
   Zeilenbreite auf, zentriert justify-content die Restzeile von selbst. Ein
   Grid wuerde stattdessen eine linksbuendige Waisenzeile hinterlassen. Das
   haelt die Sektion stabil, wenn Kacheln dazukommen oder wegfallen. */
.grid--benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.grid--benefits > * { flex: 1 1 140px; max-width: 210px; }

/* Vier Ablaufschritte: 1 / 2 / 4 Spalten - immer ohne Restzeile. */
.grid--steps { grid-template-columns: 1fr; }
@media (min-width: 600px) { .grid--steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid--steps { grid-template-columns: repeat(4, 1fr); } }


/* == 06 Buttons ============================================================
   Mindestens 44px hoch - Touch-Ziel nach WCAG 2.5.5.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 48px;
  padding: .7rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .2s var(--ease),
              box-shadow .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Primaer: Marken-Orange mit dunklem Text -> 5.2:1 */
.btn--primary {
  background: var(--orange);
  color: var(--navy-deep);
  box-shadow: 0 6px 18px rgb(238 116 29 / .32);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--orange-dark);
  color: #fff;
  box-shadow: 0 10px 24px rgb(200 90 12 / .38);
}

.btn--outline {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}
.btn--outline:hover, .btn--outline:focus-visible {
  background: var(--navy);
  color: #fff;
}

/* Auf dunklem Grund */
.btn--ghost {
  background: rgb(255 255 255 / .08);
  border-color: rgb(255 255 255 / .45);
  color: #fff;
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--navy);
}

.btn--block { width: 100%; }
/* 44px ist die Untergrenze fuer Touch-Ziele - auch beim kleinen Button. */
.btn--sm { min-height: 44px; padding: .5rem 1.1rem; font-size: .9375rem; }

.btn svg { flex: none; width: 1.1em; height: 1.1em; fill: currentColor; }


/* == 07 Header & Navigation ================================================
   Navy statt Weiss: deckt sich mit dem Corporate-Auftritt und traegt das
   vorhandene weisse Logo ohne zweite Logo-Datei.
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--navy);
  border-bottom: 1px solid rgb(255 255 255 / .1);
}
/* Wird per main.js beim Scrollen gesetzt */
.header.is-scrolled { box-shadow: 0 6px 24px rgb(20 38 58 / .28); }

.header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-h);
}

/* Das vollstaendige Logo mit Wortmarke, Seitenverhaeltnis 6.5:1. Bei so
   einem breiten Zeichen bestimmt die Breite den Platzbedarf, deshalb ueber
   die Breite bemessen - die Hoehe ergibt sich mit 23 bis 29px von selbst. */
.header__logo { flex: none; display: block; line-height: 0; }
.header__logo img { width: clamp(150px, 20vw, 190px); height: auto; }

.header__spacer { flex: 1 1 auto; }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 1.5vw, 1.5rem);
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav__link {
  display: inline-block;
  padding: .5rem .25rem;
  color: rgb(255 255 255 / .88);
  font-weight: 600;
  font-size: .9875rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.nav__link:hover,
.nav__link:focus-visible,
.nav__link[aria-current='page'] {
  color: #fff;
  border-bottom-color: var(--orange);
}

/* Burger - nur unter 900px sichtbar */
.nav__toggle {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  background: rgb(255 255 255 / .08);
  border: 1px solid rgb(255 255 255 / .25);
  border-radius: var(--radius-sm);
  color: #fff;
  cursor: pointer;
}
.nav__toggle svg { width: 22px; height: 22px; fill: currentColor; }
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded='true'] .icon-close { display: block; }
.nav__toggle[aria-expanded='true'] .icon-open  { display: none; }

@media (max-width: 899px) {
  .nav__toggle { display: inline-flex; }

  /* Ohne JavaScript bleibt das Menue sichtbar und als Liste nutzbar,
     weil main.js das hidden-Attribut erst beim Laden setzt. */
  .nav[hidden] { display: none; }
  .nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--navy-deep);
    border-bottom: 3px solid var(--orange);
    box-shadow: var(--shadow-lg);
    padding: .5rem clamp(1rem, 4vw, 2rem) 1.25rem;
  }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    padding: .9rem .25rem;
    border-bottom: 1px solid rgb(255 255 255 / .12);
  }
  .nav__link:hover,
  .nav__link:focus-visible,
  .nav__link[aria-current='page'] { border-bottom-color: var(--orange); }
  .nav__cta { margin-top: 1rem; }
  .nav__cta .btn { width: 100%; }
}

@media (min-width: 900px) {
  /* Desktop: hidden-Attribut aus dem JS ignorieren */
  .nav[hidden] { display: block; }
}


/* == 08 Hero =============================================================== */

.hero {
  position: relative;
  isolation: isolate;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  padding-block: clamp(3rem, 2rem + 6vw, 6rem);
  overflow: hidden;
}

/* Weicher Orange-Schein als einziges dekoratives Element */
.hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -30%;
  right: -10%;
  width: min(680px, 85vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgb(238 116 29 / .28) 0%, transparent 68%);
  pointer-events: none;
}

.hero__inner {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: 1.05fr .95fr; }
}

.hero h1 { color: #fff; }

.hero__lead {
  margin-top: 1.25rem;
  font-size: clamp(1.0625rem, 1rem + .45vw, 1.3rem);
  color: rgb(255 255 255 / .82);
  max-width: 46ch;
}

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  margin-top: 1.75rem;
  padding: 0;
  list-style: none;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .95rem;
  background: rgb(255 255 255 / .1);
  border: 1px solid rgb(255 255 255 / .22);
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 600;
}
.hero__badge svg { width: 1rem; height: 1rem; fill: var(--orange); flex: none; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  margin-top: 2rem;
}

/* Bildbereich - bis echte Fotos vorliegen ein beschrifteter Platzhalter */
/* Das Azubi-Foto liegt im Format 3:2 vor. aspect-ratio deshalb auf 3/2 -
   bei 4/3 wuerde object-fit:cover links und rechts beschneiden. cover
   bleibt als Absicherung stehen, falls spaeter ein anders proportioniertes
   Bild eingesetzt wird. */
.hero__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.hero__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.placeholder {
  display: grid;
  place-content: center;
  gap: .5rem;
  padding: 2rem;
  text-align: center;
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(135deg,
      rgb(255 255 255 / .05) 0 12px,
      transparent 12px 24px),
    var(--navy-soft);
  border: 2px dashed rgb(255 255 255 / .3);
  border-radius: var(--radius-lg);
  color: rgb(255 255 255 / .85);
}
.placeholder__label {
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.placeholder__hint { font-size: .875rem; color: rgb(255 255 255 / .6); }

/* Platzhalter auf hellem Grund */
.placeholder--light {
  background:
    repeating-linear-gradient(135deg,
      rgb(27 53 80 / .05) 0 12px,
      transparent 12px 24px),
    var(--surface-alt);
  border-color: var(--line);
  color: var(--ink-muted);
}
.placeholder--light .placeholder__hint { color: var(--ink-muted); }


/* == 09 Benefits ===========================================================
   Die sechs Icons der Altseite plus vier, die bisher nur auf der
   Karriereseite standen. Recoloring per mask-image, weil die SVGs
   monochrom sind und als <img> nicht umgefaerbt werden koennten.
   -------------------------------------------------------------------------- */

.benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .875rem;
  padding: 1.5rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  text-align: center;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              border-color .25s var(--ease);
}
.benefit:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--shadow);
}

.benefit__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex: none;
  background: var(--surface-tint);
  border-radius: 50%;
}
.benefit__icon i {
  display: block;
  width: 34px;
  height: 34px;
  background-color: var(--navy);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.benefit:hover .benefit__icon i { background-color: var(--orange-dark); }

.benefit__title {
  font-weight: 700;
  font-size: .9875rem;
  line-height: 1.35;
  color: var(--navy);
  /* Lange Woerter wie "Gesundheitsmanagement" duerfen trennen */
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Ein Deklarationsblock pro Icon, damit die SVG-Dateien unveraendert
   uebernommen werden koennen. */
.icon--wallet  i { -webkit-mask-image: url('../icons/wallet.svg');  mask-image: url('../icons/wallet.svg'); }
.icon--party   i { -webkit-mask-image: url('../icons/party.svg');   mask-image: url('../icons/party.svg'); }
.icon--food    i { -webkit-mask-image: url('../icons/food.svg');    mask-image: url('../icons/food.svg'); }
.icon--gym     i { -webkit-mask-image: url('../icons/gym.svg');     mask-image: url('../icons/gym.svg'); }
.icon--heart   i { -webkit-mask-image: url('../icons/heart.svg');   mask-image: url('../icons/heart.svg'); }
.icon--elderly i { -webkit-mask-image: url('../icons/elderly.svg'); mask-image: url('../icons/elderly.svg'); }

/* Vier Ergaenzungen als Inline-SVG statt weiterer Dateien */
.benefit__icon svg { width: 32px; height: 32px; fill: var(--navy); transition: fill .25s var(--ease); }
.benefit:hover .benefit__icon svg { fill: var(--orange-dark); }


/* == 10 Ausbildungsberufe ================================================== */

.jobgroup + .jobgroup { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }

.jobgroup__title {
  display: flex;
  align-items: center;
  gap: .875rem;
  margin-bottom: 1.5rem;
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
}
.jobgroup__title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* Vier Teile untereinander: Beschreibung, Faktenblock, Voraussetzungen,
   Button. Die Karte ist nur so hoch wie ihr Inhalt - fuer die gleiche Hoehe
   nebeneinander sorgt Abschnitt 6 in main.js, siehe .grid--jobs. */
.job {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.job::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 4px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.job:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.job:hover::before,
.job:focus-within::before { transform: scaleX(1); }

.job__body {
  display: flex;
  flex-direction: column;
  gap: .875rem;
  padding: 1.5rem;
}

.job__badge {
  align-self: flex-start;
  padding: .25rem .7rem;
  background: var(--surface-tint);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--orange-text);
}

.job__title {
  font-size: 1.1875rem;
  line-height: 1.3;
  /* Die langen Berufsbezeichnungen der Altseite brachen aus den Buttons.
     Silbentrennung plus break-word haelt sie sicher in der Karte. */
  hyphens: auto;
  overflow-wrap: break-word;
}

.job__text { font-size: .9375rem; color: var(--ink-muted); }

/* Die harten Daten liegen als eigener, leicht getoenter Streifen ueber die
   volle Kartenbreite - deutlicher abgegrenzt als eine blosse Trennlinie. */
.job__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start;
  gap: .5rem .625rem;
  margin: 0;
  padding: 1rem 1.5rem;
  background: rgb(27 53 80 / .035);
  border-top: 1px solid var(--line-soft);
  font-size: .875rem;
}
/* Das Icon steht im <dt>, nicht daneben: in einer <dl> darf ein <div> nur
   dt- und dd-Elemente enthalten - ein <svg> als Geschwister waere invalid.
   Der Fakt ist ein Raster, kein Flexbox-Paar: als Flex-Element schrumpfte das
   <dt> in Firefox unter seine Textbreite, sodass der Schulname direkt am
   Doppelpunkt klebte. Die Spalte aus der <dl> haelt Wert und Beschriftung
   sauber getrennt und richtet zugleich alle Werte untereinander aus. */
.job__fact {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: auto 1fr;
  column-gap: .625rem;
}
@supports (grid-template-columns: subgrid) {
  .job__fact { grid-template-columns: subgrid; }
}
.job__fact dt {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-weight: 700;
  color: var(--navy);
}
.job__fact dt svg {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: .22rem;
  fill: var(--orange-dark);
}
.job__fact dd { margin: 0; color: var(--ink-muted); }

/* Voraussetzungen: natives details/summary, funktioniert ohne JavaScript */
/* Der Innenabstand liegt auf .job__req, nicht auf summary: so bleibt die
   Trennlinie oben ueber die volle Kartenbreite, waehrend Text, Pfeil und
   Voraussetzungsliste auf denselben 1.5rem sitzen wie .job__body und
   .job__foot. Ohne diesen Abstand stand der Pfeil direkt am Kartenrand -
   und weil das um 45 Grad gedrehte Quadrat je Seite rund 1.8px ueber seine
   Box hinausragt, schnitt das overflow:hidden der Karte die Ecke ab. */
.job__req {
  border-top: 1px solid var(--line-soft);
  padding-inline: 1.5rem;
}
.job__req summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-height: 48px;
  padding: .625rem 0;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}
.job__req summary::-webkit-details-marker { display: none; }
.job__req summary::after {
  content: '';
  flex: none;
  width: .55rem;
  height: .55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .25s var(--ease);
}
.job__req[open] summary::after { transform: rotate(-135deg); }
.job__req summary:hover { color: var(--orange-text); }

.job__req ul {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .45rem;
  font-size: .9rem;
  color: var(--ink-muted);
}
.job__req li { display: flex; align-items: flex-start; gap: .5rem; }
.job__req li::before {
  content: '';
  flex: none;
  width: .95rem;
  height: .95rem;
  margin-top: .28rem;
  background: var(--orange);
  /* Haken als Maske, kein zusaetzliches Bild */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 13.3.7 7.8l1.7-1.7 3.8 3.8L13.6 2.4l1.7 1.7z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 13.3.7 7.8l1.7-1.7 3.8 3.8L13.6 2.4l1.7 1.7z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.job__hint {
  margin: -.25rem 0 1rem;
  font-size: .8125rem;
  color: var(--ink-muted);
}

.job__foot { padding: 0 1.5rem 1.5rem; }

/* Initiativ-Hinweis: ersetzt den "NEIN"-Zweig der Altseite, ohne
   Bewerbende aus ihrem Wunschberuf herauszuleiten. */
.initiativ {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  background: var(--navy);
  border-radius: var(--radius);
  color: #fff;
}
.initiativ__text { flex: 1 1 22rem; }
.initiativ h3 { color: #fff; margin-bottom: .35rem; }
.initiativ p { color: rgb(255 255 255 / .78); font-size: .9375rem; }


/* == 11 Bewerbungsablauf =================================================== */

.step {
  position: relative;
  padding-top: 1rem;
}
.step__num {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  background: var(--orange);
  border-radius: 50%;
  font-size: 1.1875rem;
  font-weight: 800;
  color: var(--navy-deep);
}
.step h3 { font-size: 1.0625rem; margin-bottom: .4rem; }
.step p { font-size: .9375rem; color: rgb(255 255 255 / .75); }

/* Verbindungslinie nur bei vier Spalten - sonst zeigte sie am Zeilenende
   ins Leere. */
@media (min-width: 960px) {
  .step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(1rem + 24px);
    left: 60px;
    right: -1rem;
    height: 2px;
    background: repeating-linear-gradient(to right,
      rgb(255 255 255 / .35) 0 6px, transparent 6px 12px);
  }
}


/* == 12 Instagram ==========================================================
   Eine liegende Bank statt einer Kachelreihe: der Kanal soll auffallen,
   aber die Sektion bleibt flach und schiebt den Footer nicht weg. Unter
   etwa 700px bricht sie von selbst in drei Zeilen um - ohne Media-Query,
   weil flex-basis den Umbruchpunkt vorgibt.
   -------------------------------------------------------------------------- */

.insta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.25rem, 1rem + 2vw, 2.5rem);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  background: var(--surface-alt);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

/* Der Verlauf weist den Kanal aus, ohne die Wortmarke zu verwenden. Das
   Symbol selbst ist dekorativ (aria-hidden) - die Zuordnung tragen die
   Ueberschrift und der Button. */
.insta__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, #F9CE34, #EE2A7B 55%, #6228D7);
}
.insta__icon svg { width: 34px; height: 34px; fill: #fff; }

.insta__text { flex: 1 1 320px; }
.insta__text h2 {
  font-size: clamp(1.25rem, 1.1rem + .8vw, 1.75rem);
  margin-bottom: .5rem;
}
.insta__text p { margin: 0; color: var(--ink-muted); }

.insta__cta { flex: none; }


/* == 13 Karten und Kontaktangaben ========================================== */

.card {
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Die Kontaktliste steht nur noch in der Seitenspalte des Formulars. Der
   eigene Kontaktabschnitt auf der Startseite ist entfallen. */
.contact__list { display: grid; gap: 1.125rem; margin: 0; padding: 0; list-style: none; }
.contact__item { display: flex; align-items: flex-start; gap: .875rem; }
.contact__item svg {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  padding: .3rem;
  box-sizing: content-box;
  background: var(--surface-tint);
  border-radius: 50%;
  fill: var(--orange-dark);
}
.contact__label {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.contact__value { font-weight: 600; color: var(--navy); }
.contact__value a { color: var(--navy); }
.contact__value a:hover { color: var(--orange-text); }


/* == 14 Footer ============================================================= */

.footer {
  background: var(--navy-deep);
  color: rgb(255 255 255 / .75);
  padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) 1.5rem;
  font-size: .9375rem;
}
.footer__grid {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.footer__logo img { width: 170px; height: auto; margin-bottom: 1rem; }
.footer h2 {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: .875rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer a { color: rgb(255 255 255 / .78); text-decoration: none; }
.footer a:hover, .footer a:focus-visible { color: #fff; text-decoration: underline; }

/* Instagram im Footer. Die Groesse muss gesetzt werden: ein <svg> ohne
   Angaben faellt sonst auf die Ersatzgroesse von 300x150px zurueck. */
.footer__social { margin-top: 1.25rem; }
.footer__social a { display: inline-flex; align-items: center; gap: .5rem; }
.footer__social svg { flex: none; width: 1.25rem; height: 1.25rem; fill: currentColor; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / .14);
  font-size: .875rem;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }


/* == 15 Formular ===========================================================
   Ein Formular ersetzt die sieben BreezingForms-Seiten der Altversion.
   -------------------------------------------------------------------------- */

.form { display: grid; gap: 1.25rem; }

.field { display: grid; gap: .4rem; }

.field > label {
  font-weight: 700;
  font-size: .9375rem;
  color: var(--navy);
}
.field .req { color: var(--orange-text); }

.field__hint { font-size: .8125rem; color: var(--ink-muted); }

.input, .select, .textarea {
  width: 100%;
  min-height: 48px;
  padding: .7rem .9rem;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-muted); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgb(27 53 80 / .12);
  outline: none;
}
/* Fokus bleibt fuer Tastaturnutzung zusaetzlich sichtbar */
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}
.textarea { min-height: 130px; resize: vertical; }

.select {
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231B3550'%3E%3Cpath d='M8 11.6 2.4 6l1.4-1.4L8 8.8l4.2-4.2L13.6 6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
  cursor: pointer;
}

/* Ungueltige Felder - vom Server per aria-invalid gesetzt */
[aria-invalid='true'] { border-color: #B3261E; }
[aria-invalid='true']:focus { box-shadow: 0 0 0 3px rgb(179 38 30 / .18); }
.field__error {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  font-weight: 600;
  color: #B3261E;
}

.field--row { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Formular links, Hinweise rechts - ab 900px zweispaltig */
.formlayout { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3rem); align-items: start; }
@media (min-width: 900px) {
  .formlayout { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .formlayout__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}

/* Checkliste im Seitenkasten */
.checklist { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; font-size: .9375rem; }
.checklist li { display: flex; align-items: flex-start; gap: .6rem; }
.checklist li::before {
  content: '';
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: .2rem;
  background: var(--orange-dark);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 13.3.7 7.8l1.7-1.7 3.8 3.8L13.6 2.4l1.7 1.7z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 13.3.7 7.8l1.7-1.7 3.8 3.8L13.6 2.4l1.7 1.7z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Datei-Upload */
.file {
  padding: 1rem;
  border: 2px dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
}
.file input[type='file'] { width: 100%; font-size: .9375rem; }
.file input[type='file']::file-selector-button {
  margin-right: .875rem;
  padding: .5rem 1rem;
  background: var(--navy);
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  font-size: .875rem;
  cursor: pointer;
}
.file input[type='file']::file-selector-button:hover { background: var(--navy-soft); }

/* Einwilligung */
.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem;
  align-items: start;
  padding: 1rem;
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  font-size: .875rem;
}
.consent input[type='checkbox'] {
  width: 22px;
  height: 22px;
  margin: .15rem 0 0;
  accent-color: var(--orange-dark);
  flex: none;
  cursor: pointer;
}
.consent label { cursor: pointer; }

/* Honeypot: fuer Menschen unsichtbar, fuer Bots ein Koeder.
   Bewusst kein display:none - manche Bots ueberspringen solche Felder. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Serverseitige Rueckmeldung */
.alert {
  display: grid;
  gap: .5rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-sm);
  border-inline-start: 4px solid;
  font-size: .9375rem;
}
.alert--error { background: #FDECEA; border-color: #B3261E; color: #7A1911; }
.alert--ok    { background: #E9F5EC; border-color: #1E7B34; color: #145724; }
.alert ul { margin: 0; padding-inline-start: 1.25rem; }
.alert strong { display: block; }


/* == 16 Inhaltsseiten ====================================================== */

.page-head {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  padding-block: clamp(2.5rem, 2rem + 4vw, 4.5rem);
}
.page-head h1 { color: #fff; }
.page-head p { margin-top: .875rem; color: rgb(255 255 255 / .8); max-width: 58ch; }

/* Fliesstext von Impressum und Datenschutz */
.prose { max-width: 72ch; }
.prose > * + * { margin-top: 1.125rem; }
.prose h2 { margin-top: 2.75rem; font-size: clamp(1.3rem, 1.15rem + .7vw, 1.6rem); }
.prose h3 { margin-top: 1.75rem; font-size: 1.125rem; }
.prose ul, .prose ol { padding-inline-start: 1.35rem; display: grid; gap: .45rem; }
.prose dl { display: grid; gap: .35rem; }
.prose dt { font-weight: 700; color: var(--navy); }
.prose dd { margin: 0 0 .75rem; }
.prose a { color: var(--navy); }
.prose a:hover { color: var(--orange-text); }

/* Redaktioneller Hinweis - im Entwurf sichtbar, vor dem Live-Gang entfernen */
.todo {
  display: grid;
  gap: .35rem;
  padding: 1rem 1.25rem;
  background: #FFF8E1;
  border-inline-start: 4px solid #C88A00;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  color: #5C4200;
}
.todo strong { color: #4A3500; }

/* Bestaetigungsseite */
.thanks { text-align: center; padding-block: clamp(3rem, 2rem + 6vw, 6rem); }
.thanks__icon {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin: 0 auto 1.75rem;
  background: var(--surface-tint);
  border-radius: 50%;
}
.thanks__icon svg { width: 44px; height: 44px; fill: var(--orange-dark); }
.thanks .lead { margin: 1rem auto 0; }
.thanks__actions { display: flex; flex-wrap: wrap; gap: .875rem; justify-content: center; margin-top: 2.25rem; }


/* == 17 Utilities & Motion ================================================= */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.center { text-align: center; }

/* Abstaende. Bewusst wenige, benannte Stufen statt beliebiger Inline-Werte:
   dadurch enthaelt kein HTML ein style-Attribut und die
   Content-Security-Policy kann ohne 'unsafe-inline' fuer style-src
   auskommen. */
.mt-2xs { margin-top: .5rem; }
.mt-xs  { margin-top: .75rem; }
.mt-m   { margin-top: 1.5rem; }
.mt-l   { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.mb-m   { margin-bottom: 1rem; }
.mb-l   { margin-bottom: 1.25rem; }

/* Der SVG-Sprite selbst wird nie gezeigt, nur per <use> referenziert. */
.sprite { display: none; }

/* Liste ohne Aufzaehlungszeichen - fuer Raster aus <ul>/<ol> */
.list-plain { list-style: none; padding: 0; margin: 0; }

/* Ueberschrift innerhalb einer .card */
.card__title { font-size: 1.1875rem; margin-bottom: 1rem; }

/* Trennlinie innerhalb einer .card */
.rule { border: 0; border-top: 1px solid var(--line-soft); margin: 1.5rem 0; }

/* Kleingedruckter Nachsatz */
.note-small { margin-top: 1.5rem; font-size: .9375rem; color: var(--ink-muted); }

/* Eyebrow auf dunklem Grund - Orange traegt hier, weil es gross und fett
   gesetzt ist und gegen Navy 4.3:1 erreicht. */
.eyebrow--on-dark { color: var(--orange); }

/* Footer der Unterseiten: nur die Copyright-Zeile, ohne obere Trennlinie.
   Der Instagram-Link steht dort in derselben Zeile und braucht deshalb
   keinen oberen Abstand. */
.footer__bottom--bare { margin-top: 0; padding-top: 0; border: 0; }
.footer__bottom .footer__social { margin-top: 0; }

/* Karte auf der Bestaetigungsseite - linksbuendig im zentrierten Layout */
.thanks__card { text-align: left; margin-top: 2.5rem; }

/* Fehlerseite von bewerbung.php: dort stehen die Buttons linksbuendig, nicht
   zentriert wie auf der Bestaetigungsseite. Als Klasse und nicht als
   style-Attribut, weil die CSP Inline-Styles blockiert. */
.thanks__actions--start { justify-content: flex-start; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .btn:hover, .benefit:hover, .job:hover { transform: none; }
}

@media print {
  .header, .footer, .hero__actions, .job__foot, .skip-link { display: none; }
  body { color: #000; }
  /* Die Mindesthoehen aus main.js sind eine Frage des Nebeneinanders auf dem
     Bildschirm - auf Papier waeren sie nur Leerraum. !important, weil sie als
     style-Attribut an der Karte stehen. */
  .job__body, .job__facts { min-height: 0 !important; }
  .section--dark, .hero { background: #fff !important; color: #000 !important; }
  .section--dark :where(h2, h3, h4), .hero h1 { color: #000 !important; }
}