/* ==========================================================================
   Quickmail Systems GmbH — Stylesheet
   Kein Framework, keine Abhaengigkeiten. Farben ueber Custom Properties.
   ========================================================================== */

/* --- Schriften ------------------------------------------------------------
   Selbst gehostet, nicht von Google geladen: ein Aufruf an fonts.gstatic.com
   wuerde die IP jedes Besuchers an Google uebertragen und der Zusage in der
   Datenschutzerklaerung widersprechen, keine Drittinhalte einzubinden.

   Beide sind Variable Fonts (eine Datei deckt alle Schnitte), Subset 'latin' --
   das enthaelt Umlaute, ss und typografische Anfuehrungszeichen.
   Lizenz SIL OFL 1.1, Lizenztexte liegen in src/assets/fonts/.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/bricolage-grotesque-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-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;
}

:root {
  /* Bewusst nur helles Design — kein Dark Mode. */
  color-scheme: light;

  --petrol: #19677d;

  --bg: #ffffff;
  --bg-alt: #f4f7f8;
  --text: #17242a;
  --text-muted: #5c6b72;
  --border: #dde5e8;
  --akzent: var(--petrol);
  --akzent-text: #ffffff;

  /* Gilt fuer Kopf, Hero und alle Abschnitte, damit die linken Kanten von
     Logo, Ueberschrift und Inhalt uebereinander liegen. Fliesstext wird davon
     unabhaengig auf --breite-text begrenzt, sonst werden die Zeilen zu lang. */
  --breite: 84rem;
  --breite-text: 44rem;
  --radius: 0.5rem;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Ueberschriften mit Charakter, Fliesstext bleibt Systemschrift (schnell,
     vertraut). Mono nur im Hero und fuer Code-artige Auszeichnungen. */
  --font-display: "Bricolage Grotesque", var(--font);
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--akzent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 5vw, 3rem);
}
h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}
h3 {
  font-size: 1.15rem;
}
h4 {
  font-size: 1rem;
  margin-bottom: 0.3em;
}

p {
  margin: 0 0 1rem;
}

/* --- Layout --------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.wrap--text {
  max-width: var(--breite-text);
}

.section {
  padding-block: clamp(3rem, 7vw, 5rem);
}

.section--alt {
  background: var(--bg-alt);
}

.section__lead {
  max-width: var(--breite-text);
  color: var(--text-muted);
}

.prose {
  max-width: var(--breite-text);
}

.prose ul {
  padding-left: 1.2rem;
}

/*
  Ueberschriften haben global keinen oberen Abstand (siehe h1–h4 weiter oben),
  damit sie am Abschnittsanfang nicht einrueckt wirken. In Fliesstext braucht
  ein neuer Abschnitt aber Luft nach oben, sonst klebt die Ueberschrift am
  vorigen Element — besonders hinter <address>, das der Browser ohne
  Aussenabstand setzt.
*/
.prose h2,
.prose h3 {
  margin-top: 2.25rem;
}

.prose > :first-child {
  margin-top: 0;
}

.prose li {
  margin-bottom: 0.35rem;
}

.muted {
  color: var(--text-muted);
}

.small {
  font-size: 0.875rem;
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  position: static;
  display: inline-block;
  margin: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--akzent);
  color: var(--akzent-text);
  border-radius: var(--radius);
}

/* --- Header --------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  min-height: 4rem;
  padding-block: 0.5rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

.logo__text {
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.95rem;
}

.nav a:hover,
.nav a:focus-visible {
  color: var(--akzent);
  text-decoration: underline;
}

/*
  Dezente Hervorhebung des wichtigsten Menuepunkts: eine leichte Pille in der
  Markenfarbe. Kein Fettdruck allein — der wirkt im Menue schnell wie ein
  aktiver Zustand und wuerde mit einer spaeteren Aktiv-Markierung kollidieren.
*/
.nav a.nav__hervor {
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--petrol) 10%, transparent);
  color: var(--akzent);
  font-weight: 600;
}

.nav a.nav__hervor:hover,
.nav a.nav__hervor:focus-visible {
  background: color-mix(in srgb, var(--petrol) 18%, transparent);
  /* Die Pille traegt die Hervorhebung schon — Unterstreichung waere zu viel */
  text-decoration: none;
}

/* --- Hero "stdout" --------------------------------------------------------
   Dunkles Band ueber der ansonsten hellen Seite. Die Ueberschrift ist die
   Ausgabe des C#-Programms in der Karte daneben; hero.js spielt beides ein.

   Die Farben sind eine Uebersetzung der Vorlage in die Petrol-Markenwelt. Wer
   das originale Violett moechte, ersetzt die Werte im Block unten durch:
     --ht-bg #16092B        --ht-card #221143   --ht-card-tief #190B32
     --ht-rule #35235F      --ht-paper #F3EEFF  --ht-muted #9B8AC4
     --ht-akzent #9A6BFF
   und die vier Syntaxfarben durch:
     .k #C4A6FF  .ty #E4D8FF  .pu #8E7CBE  .ln #4D3A7D
   Das Amber und das Gruen der Status-LED bleiben in beiden Varianten.
   -------------------------------------------------------------------------- */

.hero-term {
  --ht-bg: #0c2c36;
  --ht-card: #164451;
  --ht-card-tief: #102f3a;
  --ht-rule: #1e5567;
  --ht-paper: #eaf4f7;
  --ht-muted: #86afbc;
  --ht-akzent: #4a9ab2;
  --ht-amber: #ffc26b;

  position: relative;
  overflow: hidden;
  /* Seitenabstand kommt aus __inner, damit die linke Kante der Ueberschrift
     genau unter dem Logo und den Abschnitts-Ueberschriften sitzt. */
  padding-block: clamp(3rem, 7vw, 6.5rem);
  background:
    radial-gradient(90ch 60ch at 78% 8%, rgb(74 154 178 / 22%), transparent 62%),
    radial-gradient(60ch 40ch at 10% 96%, rgb(255 194 107 / 9%), transparent 65%),
    var(--ht-bg);
  color: var(--ht-paper);
  font-family: var(--font-display);
}

/* Feines Korn, damit die Flaechen nicht digital-flach wirken */
.hero-term::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

.hero-term__inner {
  position: relative;
  z-index: 1;
  /* Gleiches Raster wie .wrap — Breite und Innenabstand identisch */
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: 1.25rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.4rem;
  align-items: center;
}

@media (min-width: 54rem) {
  .hero-term__inner {
    /* Die Codekarte bekommt den etwas groesseren Anteil — sie hat die
       feste Zeilenlaenge, die Textspalte ist flexibel. */
    grid-template-columns: 1fr 1.08fr;
    gap: clamp(2rem, 4vw, 4rem);
  }
}

/* --- Linke Spalte: die Ausgabe --- */

.hero-term__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ht-muted);
}

.hero-term__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ht-amber);
  box-shadow: 0 0 12px var(--ht-amber);
}

.hero-term__headline {
  margin: 0;
  font-size: clamp(2.5rem, 6.4vw, 4.7rem);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--ht-paper);
}

.hero-term__cursor {
  display: inline-block;
  width: 0.52em;
  height: 0.86em;
  margin-left: 0.06em;
  vertical-align: -0.06em;
  background: var(--ht-amber);
  box-shadow: 0 0 18px rgb(255 194 107 / 55%);
}

.hero-term__headline.is-done .hero-term__cursor {
  animation: ht-blink 1.05s steps(1, end) infinite;
}

@keyframes ht-blink {
  50% {
    opacity: 0;
  }
}

.hero-term__sub {
  margin: 1.4rem 0 0;
  font-family: var(--font-mono);
  font-size: clamp(0.8rem, 1.35vw, 0.95rem);
  color: var(--ht-muted);
}

.hero-term__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.9rem, 4vw, 2.6rem);
}

.hero-term__btn {
  padding: 0.85rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease,
    box-shadow 0.18s ease;
}

/*
  Der Hauptknopf traegt einen weichen Amber-Schein — dieselbe Akzentfarbe wie
  Cursor und stdout-Punkt, damit der Hero als eine Einheit liest. Bewusst als
  Schein statt als farbige Flaeche: der helle Knopf bleibt der Kontrastanker
  auf dem dunklen Band, der Amberton fuehrt nur das Auge dorthin.
*/
.hero-term__btn--primary {
  background: var(--ht-paper);
  color: #0b262e;
  box-shadow: 0 0 0 1px rgb(255 194 107 / 60%), 0 0 1.5rem -0.25rem rgb(255 194 107 / 38%);
}

.hero-term__btn--primary:hover {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: 0 0 0 2px rgb(255 194 107 / 80%), 0 0 2.25rem -0.25rem rgb(255 194 107 / 50%);
}


.hero-term__btn--ghost {
  border-color: var(--ht-rule);
  color: var(--ht-paper);
}

.hero-term__btn--ghost:hover {
  transform: translateY(-2px);
  border-color: var(--ht-akzent);
}

.hero-term__btn:focus-visible {
  outline: 3px solid var(--ht-amber);
  outline-offset: 3px;
}

/* --- Rechte Spalte: die Quelle --- */

.hero-term__card {
  position: relative;
  overflow: hidden;

  /*
    Ohne min-width: 0 erzwingt der nicht umbrechende Code seine
    Min-Content-Breite, das Rasterelement waechst darueber hinaus und die
    Karte schiebt sich auf schmalen Bildschirmen aus dem Viewport
    (Grid-Elemente haben min-width: auto). Mit 0 bleibt die Karte in der
    Spalte, die Schriftgroesse rechnet sich passend klein und overflow-x
    im pre bleibt als Netz.
  */
  min-width: 0;

  /* Bezugsgroesse fuer die Schriftgroesse im Codeblock: der Code richtet sich
     nach der Breite DIESER Karte, nicht nach der des Fensters. */
  container-type: inline-size;
  border: 1px solid var(--ht-rule);
  border-radius: 0.85rem;
  background: linear-gradient(170deg, var(--ht-card), var(--ht-card-tief));
  box-shadow: 0 2.5rem 5.5rem -2rem rgb(0 0 0 / 75%);
}

.hero-term__bar,
.hero-term__status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ht-muted);
}

.hero-term__bar {
  border-bottom: 1px solid var(--ht-rule);
  letter-spacing: 0.06em;
}

.hero-term__file {
  color: var(--ht-paper);
}

.hero-term__lang {
  margin-left: auto;
  color: var(--ht-akzent);
}

.hero-term__code {
  margin: 0;
  padding: 1.25rem 0.9rem 1.4rem;
  font-family: var(--font-mono);
  line-height: 1.6;
  tab-size: 4;

  /*
    Die Schriftgroesse folgt der Kartenbreite (cqi = 1 % davon), nicht der
    Fensterbreite. Damit ist der Code auf jeder Breite vollstaendig zu sehen,
    statt am Rand abgeschnitten zu werden.

    Der Faktor ist im Browser ausgemessen, nicht gerechnet: die laengste Zeile
    (Nr. 11, 56 Zeichen) braucht samt Zeilennummer und Abstand rund 40 em --
    eine Rechnung mit 0,6 em pro Zeichen kommt auf 36 em und ist damit zu
    optimistisch. 40 em x 2,2 % = 88 % der Kartenbreite, der Rest ist
    Innenabstand und Reserve.
    Wird der Code laenger, muss der Faktor 2.2cqi sinken.

    Kein Mindestwert im min(): ein Mindestwert wuerde auf schmalen Karten
    genau das Abschneiden zurueckbringen. overflow-x bleibt als Netz.
  */
  font-size: min(0.95rem, 2.2cqi);
  overflow-x: auto;
  overflow-y: hidden;

  /*
    Wichtig: 'normal' statt des pre-Standards 'pre'. Im Markup steht zwischen
    den Zeilen-Spans je ein Umbruch. Da jede Zeile ohnehin ein eigener Block
    ist (.row ist flex), wuerde dieser Umbruch als zusaetzliche Leerzeile
    gerendert -- der Abstand waere doppelt. Mit 'normal' faellt der
    Zwischenraum weg; die Einrueckung innerhalb der Zeilen bleibt erhalten,
    weil .row selbst wieder 'pre' setzt.
  */
  white-space: normal;
}

.hero-term__code .row {
  display: flex;
  /* em statt rem: der Abstand muss mit der Schrift skalieren, sonst stimmt
     die Breitenrechnung oben auf schmalen Karten nicht mehr. */
  gap: 0.8em;
  white-space: pre;
}

.hero-term__code .ln {
  flex: none;
  width: 1.6em;
  text-align: right;
  user-select: none;
  color: #3a6b7c;
}

.hero-term__code .k {
  color: #8fd3e8;
}
.hero-term__code .ty {
  color: #d7edf4;
}
.hero-term__code .st {
  color: var(--ht-amber);
}
.hero-term__code .pu {
  color: #7fa8b6;
}

.hero-term__status {
  border-top: 1px solid var(--ht-rule);
  letter-spacing: 0.04em;
}

.hero-term__led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ht-muted);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.hero-term__status.is-ok .hero-term__led {
  background: #6ee7a8;
  box-shadow: 0 0 10px #6ee7a8;
}

/* Compile-Sweep: laeuft einmal durch, wenn das Programm startet */
.hero-term__sweep {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--ht-amber), transparent);
  box-shadow: 0 0 24px 3px rgb(255 194 107 / 35%);
}

.hero-term__sweep.is-run {
  animation: ht-sweep 0.85s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes ht-sweep {
  0% {
    top: 0;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

/*
  Sichtbarkeit der Codezeilen: standardmaessig offen, damit ohne JavaScript
  alles lesbar bleibt. Erst wenn hero.js die Klasse setzt, wird verdeckt und
  Zeile fuer Zeile aufgezogen.
*/
.hero-term--animiert .txt {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.2s linear;
}

.hero-term--animiert .txt.is-on {
  clip-path: inset(0 0 0 0);
}

@media (max-width: 54rem) {
  .hero-term__card {
    order: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-term--animiert .txt {
    clip-path: none;
    transition: none;
  }

  .hero-term__sweep {
    display: none;
  }

  .hero-term__headline.is-done .hero-term__cursor {
    animation: none;
  }

  .hero-term__btn {
    transition: none;
  }
}

/* --- Hinweiskasten -------------------------------------------------------- */

.hinweis {
  max-width: var(--breite-text);
  margin-top: 2.5rem;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--akzent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--bg-alt);
}

.hinweis h3 {
  margin-bottom: 0.4rem;
  font-size: 1.05rem;
}

.hinweis p {
  margin: 0;
  color: var(--text-muted);
}

.hinweis__punkte {
  margin: 0.9rem 0 0;
  padding-left: 1.1rem;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

.hinweis__punkte li {
  margin-bottom: 0.4rem;
}

.hinweis__punkte li:last-child {
  margin-bottom: 0;
}

/* Im grauen Abschnitt braucht der Kasten einen hellen Grund, sonst
   verschwindet er im Hintergrund. */
.section--alt .hinweis {
  background: var(--bg);
}

/* --- Mutterunternehmen ---------------------------------------------------- */

/* Label und Logo als Flex-Geschwister: als Inline-Elemente richtet sich das
   Logo an der Textgrundlinie aus und sitzt dann sichtbar zu hoch. */
.mutter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
  margin-top: 2rem;
  color: var(--text-muted);
}

.mutter__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 600;
  text-decoration: none;
}

.mutter__link:hover {
  text-decoration: underline;
}

.mutter__logo {
  display: block;
  width: auto;
  height: 1.5rem;
}

.mutter__extern {
  font-size: 0.85em;
}

/* Nur fuer Screenreader — erklaert, dass der Link ein neues Fenster oeffnet */
.visuell-versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Standort: Hinweis neben Karte ---------------------------------------- */

.standort {
  display: grid;
  gap: 1.5rem;
  margin-top: 3rem;
  align-items: start;
}

@media (min-width: 54rem) {
  .standort {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

/* Kasten und Karte starten oben buendig. Bewusst OHNE height: 100% — auf
   Kartenhoehe gestreckt entstuende unter dem Text eine grosse leere Flaeche,
   die wie ein Fehler aussieht. */
.standort .hinweis {
  max-width: none;
  margin-top: 0;
}

.karte {
  margin: 0;
}

.karte__link {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
}

.karte__link {
  box-shadow: 0 0.75rem 1.75rem -1rem rgb(12 44 54 / 28%), 0 0 0 1px rgb(12 44 54 / 8%);
}

.karte__link img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  /* Anders als bei den Fotos ist Bewegung hier begruendet: die Karte IST ein
     Link. Das langsame Heranfahren bestaetigt das beim Ueberfahren. */
  transition: transform 0.5s ease;
}

.karte__link:hover img {
  transform: scale(1.045);
}

/* Aufforderung liegt auf der Karte — macht sichtbar, dass sie klickbar ist */
.karte__aktion {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius);
  background: var(--akzent);
  color: var(--akzent-text);
  font-size: 0.8125rem;
  font-weight: 600;
  box-shadow: 0 0.5rem 1rem -0.5rem rgb(0 0 0 / 45%);
}

.karte__link:hover .karte__aktion {
  background: var(--petrol);
}

.karte__link:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
}

.karte figcaption {
  margin-top: 0.6rem;
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.karte figcaption strong {
  color: var(--text);
}

/* Kartenlizenz gehoert dazu, darf aber leise sein */
.karte__attribution {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  opacity: 0.8;
}

/* --- Stellen: Anzeige neben Fotos ----------------------------------------- */

.stellen-layout {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 62rem) {
  .stellen-layout {
    grid-template-columns: 1.45fr 1fr;
    gap: 2.5rem;
  }
}

.stellen-layout__bilder {
  display: grid;
  gap: 1.5rem;
}

/* --- Bilder --------------------------------------------------------------- */

.bild {
  margin: 0;
}

/* picture ist von sich aus inline — sonst entsteht unter dem Bild ein
   Zeilenabstand, der die Bildunterschrift nach unten schiebt. */
.bild picture {
  display: block;
}

/*
  Die Fotos sind nicht klickbar, deshalb bewusst KEIN Hover-Effekt: Bewegung
  beim Ueberfahren verspricht Interaktion, die es hier nicht gibt. Die Feinheit
  ist rein statisch.

  Zwei Zutaten: eine weiche, tief angesetzte Schattierung, damit die Fotos auf
  der weissen Flaeche liegen statt in sie hineinzulaufen — und eine Haarlinie
  als Ring. Die braucht es, weil beide Aufnahmen helle Waende und Decken zeigen;
  ohne Kante verliert sich der Bildrand im Seitenhintergrund.
*/
.bild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--bg-alt);
  box-shadow: 0 0.75rem 1.75rem -1rem rgb(12 44 54 / 28%), 0 0 0 1px rgb(12 44 54 / 8%);
}

/*
  Bild als Link. Schatten und Haarlinie wandern auf die Huelle, weil das
  overflow: hidden des Zuschnitts den Schatten des Bildes abschneiden wuerde.
  Anders als bei den reinen Fotos ist Bewegung hier begruendet: das Bild IST
  ein Link, das Heranfahren bestaetigt das beim Ueberfahren.
*/
.bild__link {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: 0 0.75rem 1.75rem -1rem rgb(12 44 54 / 28%), 0 0 0 1px rgb(12 44 54 / 8%);
}

.bild__link img {
  box-shadow: none;
  transition: transform 0.5s ease;
}

.bild__link:hover img {
  transform: scale(1.045);
}

.bild__link:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
}

/* Kurze Beschreibung unter dem Bild, zurueckhaltend gesetzt */
.bild figcaption {
  margin-top: 0.6rem;
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* Breites Bild ueber die Textbreite hinaus, flacher beschnitten */
.bild--breit {
  margin-block: 2rem 2.5rem;
}

/* Das breite Banner traegt mehr Flaeche, also darf der Schatten tiefer sein */
.bild--breit img {
  aspect-ratio: 16 / 6;
  box-shadow: 0 1.5rem 3rem -1.5rem rgb(12 44 54 / 30%), 0 0 0 1px rgb(12 44 54 / 8%);
}

/* Zwei Spalten: Text neben Bild */
.split {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 54rem) {
  .split {
    grid-template-columns: 1.2fr 1fr;
    gap: 3rem;
  }
}

/* --- Kennzahlen ----------------------------------------------------------- */

.kennzahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 3rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}

.kennzahlen li {
  display: flex;
  flex-direction: column;
}

.kennzahlen__wert {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--akzent);
  line-height: 1.1;
}

.kennzahlen__label {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* --- Stellen -------------------------------------------------------------- */

.stellen {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
}

.stelle details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
}

.stelle summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-weight: 600;
}

.stelle summary:hover .stelle__titel {
  color: var(--akzent);
}

.stelle__meta {
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.stelle__body {
  padding: 0 1.25rem 1.5rem;
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
}

.stelle__fakten {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1.5rem;
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
}

.stelle__fakten dt {
  color: var(--text-muted);
}

.stelle__fakten dd {
  margin: 0;
}

/* Luft vor den Zwischenueberschriften — h4 hat global keinen oberen Abstand
   und klebte sonst am Ende der vorigen Liste. */
.stelle__body h4 {
  margin-top: 1.6rem;
}

/* Die Listen stehen in einem <li> und wuerden daher als verschachtelte Ebene
   mit Ringen statt Punkten markiert. */
.stelle__body ul {
  list-style-type: disc;
}

/* --- Definitionslisten (Impressum) --------------------------------------- */

.daten {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 1.5rem;
  margin: 0 0 2rem;
}

.daten dt {
  font-weight: 600;
  margin-top: 0.75rem;
}

.daten dd {
  margin: 0;
  color: var(--text-muted);
}

@media (min-width: 40rem) {
  .daten {
    grid-template-columns: max-content 1fr;
  }

  .daten dt,
  .daten dd {
    margin-top: 0.5rem;
  }
}

/* --- Kontakt / Adressen --------------------------------------------------- */

address,
.kontakt {
  font-style: normal;
}

/* Der Browser gibt <address> keinen Aussenabstand, anders als einem Absatz.
   Ohne das schliesst das naechste Element direkt an. */
address {
  margin-bottom: 1rem;
}

.kontakt {
  margin-top: 2rem;
}

/* --- Footer --------------------------------------------------------------- */

.site-footer {
  padding-block: 2rem;
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 3rem;
  align-items: center;
  justify-content: space-between;
}

.site-footer p {
  margin-bottom: 0;
}

.nav--footer {
  gap: 0.25rem 1rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* Das Heranfahren der verlinkten Bilder entfaellt; Schatten und Haarlinie
     bleiben, die sind statisch. */
  .karte__link img,
  .bild__link img {
    transition: none;
  }

  .karte__link:hover img,
  .bild__link:hover img {
    transform: none;
  }
}