/* ===========================================================================
   Barßeler Pflegedienst · Stilblatt
   ---------------------------------------------------------------------------
   Aufbau: Farben und Masse, dann Grundelemente (Typografie, Knöpfe, Verweise),
   dann die Bauteile in der Reihenfolge, in der sie auf der Seite vorkommen,
   dann die Anpassungen für schmale Bildschirme, zuletzt die Bauteile, die nur
   auf einer einzelnen Seite auftreten.

   Jede Regel steht genau einmal. Wo früher Nachträge frühere Werte wieder
   überschrieben haben, steht jetzt der Endwert direkt an der Regel.
   =========================================================================== */

:root{
  /* Die Seite trägt genau einen Farbklang: Pink in zwei Tiefen, dazu ein
     warmes Schwarz für Zwischenüberschriften und drei helle Flächenfarben. */
  --pink:#B44E5F;        /* Hauptton: Knöpfe, Hauptüberschriften, Symbole, Linien */
  --pink-tief:#9E4353;   /* alle Mouseover- und Aktivzustände, dazu Textfarbe auf Beige */
  --pink-tiefer:#7E2F3D; /* zweite Stufe, nur wo bereits das tiefe Pink liegt */
  --schwarz:#141210;     /* Zwischenüberschriften, Kapitelmarken, Fusszeilentext */

  --cream:#F8F4EF;
  --sage:#EDF2EA;
  --taupe:#E4DDD4;
  --white:#FFFFFF;

  --ink:#2A2320;         /* Fliesstext */
  --ink-soft:#6B605A;    /* Nebentext */
  --grau:#786E67;        /* Kleingedrucktes; dunkel genug für 4,5:1 auf Creme */
  --rule:rgba(42,35,32,.16);
  --rule-soft:rgba(42,35,32,.09);
  --pink-linie:rgba(180,78,95,.32);   /* zarte Trennstriche im Hauptton */

  --display:'Source Serif 4',Georgia,'Times New Roman',serif;
  --prose:'Schibsted Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ui:'Schibsted Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --pad:clamp(68px,8.5vw,124px);
  --rail:150px;
  /* Höhe der klebenden Kopfleiste. Sprungziele docken damit an ihre Unterkante an.
     Gemessen ueber die ganze Breite: 80,9 bis 81,6 px oberhalb von 700 px,
     79,0 px darunter (dort entfaellt der Telefonknopf).

     Der Wert liegt bewusst UNTER dem kleinsten gemessenen: Ist er groesser als
     die Leiste, landet die Oberkante des Ziels einen Bruchteil eines Pixels
     unterhalb der Leistenkante – und in diesem Spalt blitzt der vorige Abschnitt
     hervor, beim Sprung auf "Leistungen" als pinke Haarlinie. Ist er kleiner,
     steckt die Oberkante gut einen Pixel unter der Leiste, und das sieht niemand.
     Im Zweifel also abrunden, nie aufrunden.

     Aendert sich die Hoehe der Leiste, muss dieser Wert nachgemessen werden. */
  --kopf:80px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--prose);font-size:19px;line-height:1.62;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

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

/* ---------- Typografie ---------- */
.h1,.h2,.h3,.h4{font-family:var(--display);font-weight:700;letter-spacing:-.006em;margin:0;text-wrap:balance}
/* Die beiden oberen Ebenen tragen den Hauptton, die beiden unteren das Schwarz.
   So bleibt Farbe eine Auszeichnung und wird nicht zur Grundfarbe jeder Zeile. */
.h1,.h2{color:var(--pink)}
.h3,.h4{color:var(--schwarz)}
.h1{font-size:clamp(2.6rem,6vw,4.2rem);line-height:1.06;letter-spacing:-.014em}
.h2{font-size:clamp(1.8rem,3.2vw,2.6rem);line-height:1.12;letter-spacing:-.008em}
.h3{font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.2}
.h4{font-size:1.08rem;line-height:1.32;letter-spacing:-.002em}

/* Rechtsgrundlage in einer Überschrift: kleiner und leichter, damit das
   Stichwort das Stichwort bleibt und die Zeile nicht umbricht. */
.h3__zusatz{
  font-size:.66em;font-weight:400;letter-spacing:0;
  color:var(--ink-soft);white-space:nowrap;
}

/* Abstände ergeben sich aus der Reihenfolge, nicht aus Einzelangaben */
.h1 + .lead,.h2 + .lead{margin-top:24px}
.h1 + .prose,.h2 + .prose{margin-top:26px}
.mark + .h2{margin-top:18px}

.lead{font-size:clamp(1.1rem,1.5vw,1.28rem);line-height:1.58;color:var(--ink);max-width:66ch;margin:0;text-wrap:balance}
.prose{margin:0;max-width:70ch;text-wrap:balance}

.mark{
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--schwarz);
  margin:0;
}

/* ---------- Bänder ---------- */
.band{padding-block:var(--pad);position:relative}
.band--cream{background:var(--cream)}
.band--white{background:var(--white)}
.band--sage{background:var(--sage)}
/* Das Aufmerksamkeitsband: beige wie die Fusszeile, Überschriften im Hauptton. */
.band--akzent{background:var(--taupe);color:var(--schwarz)}
.band--akzent .h1,.band--akzent .h2,.band--akzent .h3{color:var(--pink)}
.band--akzent .mark{color:var(--schwarz)}
.band--akzent .lead{color:#4A423C;margin-top:26px}

/* Sprungziele docken mit ihrer Oberkante an die Unterkante der Kopfleiste an.
   Der Wert ist die gemessene Leistenhöhe, siehe --kopf.

   Die Leiste ist zu 6 % durchsichtig; hinter ihr liegt damit der Abschnitt, der
   vor dem Sprungziel kommt. Der Weichzeichner glättet ihn zu einer ruhigen
   Fläche – bei Fotos ist nichts zu erkennen, beim Sprung auf "Leistungen"
   bleibt ein zarter rosa Hauch der Faktenleiste. Das ist der Preis dafür, dass
   die Oberkante sichtbar andockt und über der Überschrift die volle Luft des
   Bandes steht. */
.band[id],.leistung[id]{scroll-margin-top:var(--kopf)}

/* Signature: die Randmarke – eine Haarlinie mit Kapitelmarke am linken Rand */
.sec{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:0 44px;align-items:start}
.sec__rail{position:sticky;top:104px;padding-top:.35rem}
.sec__rail::after{content:"";display:block;height:1px;background:var(--pink);opacity:.45;margin-top:12px;width:38px}
.sec__body{min-width:0}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--ui);font-size:1rem;font-weight:700;letter-spacing:-.006em;
  display:inline-flex;align-items:center;gap:.55em;
  padding:.86em 1.5em;border-radius:2px;text-decoration:none;
  border:1.5px solid transparent;cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn--solid{background:var(--pink);color:#fff}
.btn--solid:hover{background:var(--pink-tief)}
.btn--ghost{border-color:var(--pink);color:var(--pink);background:transparent}
.btn--ghost:hover{background:var(--pink);border-color:var(--pink);color:#fff}
/* Heller Umriss-Knopf – auf dem Hero-Foto wäre der pinke Umriss zu schwach */
.btn--hell{color:#fff;border:1.5px solid rgba(255,255,255,.8);background:rgba(255,255,255,.06)}
.btn--hell:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn__icon{width:17px;height:17px;flex:none}

.link{
  font-family:var(--ui);font-weight:700;font-size:.98rem;color:var(--pink);
  text-decoration:none;border-bottom:1.5px solid rgba(180,78,95,.35);padding-bottom:1px;
  transition:border-color .18s ease,color .18s ease;
}
.link:hover{color:var(--pink-tief);border-color:var(--pink-tief)}
/* Verweise mitten im Satz nehmen Grösse und Schnitt ihrer Umgebung an – sie
   sollen sich einfügen, nicht herausspringen. Farbe und Unterstrich kennzeichnen
   sie ausreichend. Freistehende Verweise (mit Pfeil) behalten den UI-Schnitt. */
.prose .link,.lead .link,.note .link,.consent .link,.job-detail__foot p .link{
  font-family:inherit;font-size:inherit;font-weight:500;   /* minimal kräftiger als der Fliesstext */
}

:where(a,button,input,textarea,select,summary):focus-visible{
  outline:2.5px solid var(--pink-tief);outline-offset:3px;border-radius:1px;
}

/* ---------- Topbar + Header ---------- */
/* Die Leiste trägt eine Nebenbemerkung und steht deshalb im Beige der
   Fusszeile, nicht im Hauptton. */
.topbar{background:var(--taupe);color:var(--schwarz)}
.topbar__in{
  display:flex;justify-content:center;align-items:center;gap:.9em;flex-wrap:wrap;
  padding-block:11px;font-family:var(--mono);font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;
}
.topbar__in b{font-weight:600;color:var(--schwarz)}
/* Der Hauptton käme auf dem Beige nur auf 3,7:1 und liegt damit unter der
   Lesbarkeitsschwelle. Der Verweis nutzt deshalb das tiefe Pink (4,6:1). */
.topbar a{color:var(--pink-tief);font-weight:700;text-underline-offset:4px;position:relative}
.topbar a:hover{color:var(--pink-tiefer)}
/* Die Klickfläche auf mindestens 24 px vergrössern, ohne die Zeile höher zu
   machen: eine unsichtbare Fläche legt sich über den Verweis. */
.topbar a::after{content:"";position:absolute;inset:-6px -4px}

/* Milchglas: durchsichtig genug, dass man das Durchlaufen der Seite ahnt, aber
   dicht genug, dass die pinke Faktenleiste beim Sprung auf "Leistungen" nicht
   durchschlägt. Bei 94 % war ein rosa Anflug zu sehen. */
.head{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.975);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule-soft)}
.head__in{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-block:16px}
.brand{
  text-decoration:none;line-height:1.05;
  display:flex;align-items:center;gap:13px;
}
/* Bildmarke: so hoch wie die zweizeilige Wortmarke, damit beides eine Einheit bildet */
.brand__mark{flex:none;height:34px;width:auto;display:block}
.brand__text{display:block}
/* Der Firmenname darf nicht umbrechen: Zwischen rund 941 und 1055 px passte er
   sonst nicht mehr in einer Zeile, wurde zweizeilig und machte die Kopfleiste
   6 px höher – womit auch der Sprungabstand nicht mehr stimmte. */
.brand__name{font-family:var(--display);font-weight:700;font-size:1.2rem;letter-spacing:-.012em;color:var(--schwarz);display:block;white-space:nowrap}
.brand__sub{font-family:var(--mono);font-size:.63rem;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-top:3px}

.nav{display:flex;align-items:center;gap:30px}
.nav a{
  font-family:var(--ui);font-size:.95rem;font-weight:500;color:var(--ink);
  text-decoration:none;padding-block:11px;border-bottom:2px solid transparent;
  white-space:nowrap;
}
.nav a:hover{border-color:var(--pink-tief)}
.nav a.is-key{color:var(--pink);font-weight:700}
.head .btn{padding:.7em 1.15em;font-size:.93rem}
.head__right{display:flex;align-items:center;gap:12px}

/* Burger – nur auf schmalen Schirmen */
.burger{display:none;position:relative}
.burger summary{list-style:none;cursor:pointer;width:46px;height:46px;display:grid;place-items:center;
  border:1px solid var(--rule);border-radius:2px}
.burger summary::-webkit-details-marker{display:none}
.burger__bars,.burger__bars::before,.burger__bars::after{
  display:block;width:20px;height:2px;background:var(--pink);content:"";position:relative}
.burger__bars::before{position:absolute;top:-6px}
.burger__bars::after{position:absolute;top:6px}
.burger[open] summary{background:var(--pink-tief);border-color:var(--pink-tief)}
.burger[open] .burger__bars,.burger[open] .burger__bars::before,.burger[open] .burger__bars::after{background:#fff}
.burger__panel{
  position:absolute;right:0;top:calc(100% + 12px);min-width:230px;z-index:40;
  background:#fff;border:1px solid var(--rule);padding:8px 0;
  box-shadow:0 14px 34px rgba(42,35,32,.14);
}
.burger__panel a{
  display:block;padding:13px 22px;text-decoration:none;
  font-family:var(--ui);font-weight:500;font-size:1.02rem;color:var(--ink);
}
.burger__panel a:hover{background:var(--sage);color:var(--pink-tief)}
.burger__panel a.is-key{color:var(--pink);font-weight:700}

/* Feste Aktionsleiste am unteren Rand (Handy) */
.dock{display:none}
.dock a{
  display:flex;align-items:center;justify-content:center;gap:.6em;min-height:58px;
  font-family:var(--ui);font-weight:700;font-size:1.05rem;text-decoration:none;
}
.dock__icon{width:20px;height:20px;flex:none}
.dock__call{color:#fff;background:var(--pink)}
.dock__apply{color:var(--pink);background:#fff;border-left:1px solid rgba(20,18,16,.10)}
.tel{font-family:var(--mono);font-weight:600;letter-spacing:.02em}

/* ---------- Gezeichnete Zeichen ----------
   Pfeil, Sternchen und Bewertungsstern kommen in keinem der eingebundenen
   Schriftschnitte vor. Als Textzeichen fielen sie auf die Systemschrift
   zurück und sähen auf jedem Betriebssystem anders aus. Als Zeichnung nehmen
   sie Schriftgrösse und Farbe ihrer Umgebung an und sitzen überall gleich. */
.zeichen{display:inline-block;vertical-align:-.125em;flex:none}
.zeichen--pfeil{width:1em;height:1em;margin-left:.28em}
.zeichen--deko{width:.95em;height:.95em}
.zeichen--stern{width:.95em;height:.95em}

/* ---------- Hero ---------- */
.hero{background:var(--cream);padding-block:clamp(56px,7vw,92px) clamp(44px,5vw,72px)}
.hero .h1{margin-top:18px}
/* Der Claim steht eine Stufe unter der Hauptzeile: gleiche Farbe, Schnitt 520
   statt 700. So bleibt er Teil der Überschrift, ohne mit ihr um dieselbe
   Stimme zu ringen. */
.hero__claim{
  display:block;font-family:var(--display);font-weight:520;font-size:clamp(1.35rem,2.3vw,1.85rem);
  letter-spacing:-.008em;color:var(--pink);margin:16px 0 0;line-height:1.2;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* Bildrahmen: versetzte Haarlinie statt Schlagschatten */
.frame{position:relative}
.frame::before{
  content:"";position:absolute;inset:16px -16px -16px 16px;border:1.5px solid var(--pink);opacity:.5;
}
.frame__img{
  position:relative;background:var(--taupe);aspect-ratio:4/3.4;
  display:grid;place-items:center;padding:24px;text-align:center;
}
.frame__img--photo{padding:0;aspect-ratio:4/3}
.frame__img--photo img{width:100%;height:100%;object-fit:cover}

/* ---------- Bildband: Einblicke ins Team ----------
   Ab 1100 px stehen alle sechs Aufnahmen nebeneinander: Was hinter einem
   Streifen liegt, sieht kaum jemand. Darunter wird daraus ein schiebbarer
   Streifen mit Pfeilen. Bewusst gerade gestellt und ohne Schatten – die ganze
   Seite arbeitet mit geraden Kanten. Nichts bewegt sich von allein. */
.bildband{background:var(--taupe)}
.bildband__buehne{position:relative}
.bildband__reihe{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(6,1fr);gap:3px;
}
.bildband__reihe li{margin:0;aspect-ratio:3/4}
.bildband__reihe img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:50% 30%;
}
.bildband__pfeil{display:none}

/* ---------- Faktenleiste ---------- */
.facts{background:var(--pink);color:#fff}
.facts__in{
  display:flex;justify-content:space-between;gap:9px 26px;flex-wrap:wrap;padding-block:16px;
  max-width:1340px;                 /* breiter als die Textspalte, damit die Zeile trägt */
  font-family:var(--mono);font-size:clamp(.63rem,.86vw,.75rem);letter-spacing:.02em;
}
.facts__in span{display:flex;gap:.6em;align-items:baseline;white-space:nowrap}
/* Der Haken ist aus demselben Grund gezeichnet wie Pfeil und Stern. */
.facts__in span::before{
  content:"";flex:none;width:.95em;height:.95em;align-self:center;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2CDD4' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.8 12.6 4.8 4.8 9.6-10.8'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* ---------- Vorteilsliste (keine Kacheln) ---------- */
.benefits{
  display:grid;grid-template-columns:1fr 1fr;column-gap:56px;
  border-top:1px solid var(--rule);margin-top:42px;
}
.benefit{
  padding:22px 0 20px;border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:30px 1fr;column-gap:15px;align-content:start;
}
.benefit__icon{grid-row:1 / span 2;color:var(--pink);margin-top:3px}
.benefit .h4{color:var(--schwarz)}
.benefit p{margin:.4em 0 0;font-size:1rem;line-height:1.5;color:var(--ink-soft);max-width:44ch}

/* ---------- Stellenkarten – der eine Kartenmoment ---------- */
.jobs{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:38px}
.job{
  background:var(--white);border:1px solid var(--rule-soft);border-left:4px solid var(--pink);
  padding:30px 32px 28px;display:flex;flex-direction:column;gap:12px;
  transition:border-color .2s ease,transform .2s ease;
}
.job:hover{border-left-color:var(--pink-tief);transform:translateY(-2px)}
.job__tag{
  align-self:flex-start;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--schwarz);background:var(--sage);padding:.45em .8em;
}
.job p{margin:0;font-size:1rem;line-height:1.52;color:var(--ink-soft)}
.job .link{margin-top:auto;align-self:flex-start;padding-top:8px}

/* ---------- Schrittleiste ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0 44px;margin-top:46px}
.step{padding:0 20px 0 0}
.step__n{
  display:flex;align-items:center;gap:16px;
  font-family:var(--display);font-weight:700;font-size:2.3rem;line-height:1;
  letter-spacing:-.03em;color:var(--pink);margin-bottom:18px;
}
/* Die Haarlinie setzt die Zahl fort und läuft bis zum Spaltenende */
.step__n::after{content:"";flex:1;height:1px;background:var(--pink);opacity:.32}
.step .h4{margin-bottom:2px}
.step p{margin:.55em 0 0;font-size:.98rem;line-height:1.55;color:var(--ink-soft)}
.steps--3{grid-template-columns:repeat(3,1fr)}

/* ---------- Leistungen: alles sichtbar ---------- */
.leistungen{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
.leistung{
  background:var(--white);border-top:3px solid var(--pink);
  padding:clamp(26px,2.6vw,34px);
}
.leistung__bild{
  display:block;max-width:none;height:auto;
  width:calc(100% + 2*clamp(26px,2.6vw,34px));
  margin:calc(-1*clamp(26px,2.6vw,34px)) calc(-1*clamp(26px,2.6vw,34px)) 32px;
}
/* Symbol rechtsbündig auf Höhe der Überschrift statt darüber – das spart je
   Karte die Symbolzeile samt Abstand. Die Grundlinien liegen gleich, damit
   Symbol und Wort auf einer Achse sitzen. */
.leistung__kopf{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.leistung__icon{display:block;color:var(--pink);flex:none;margin:0;align-self:center}
.leistung .h3{color:var(--pink)}
.leistung__lead{margin:.6em 0 0;font-size:1.04rem;line-height:1.55;color:var(--ink-soft);max-width:42ch;text-wrap:balance}
.leistung .svc__list{margin-top:22px}
/* Nachsatz unter den vier Kacheln. Er nutzt dieselbe zweispaltige Anlage wie
   die Abschnittsköpfe, damit er ein eigener kleiner Absatz ist und nicht eine
   zweite Kleinzeile unter dem Bildnachweis. Der Text sitzt auf derselben Achse
   wie die Überschrift des Abschnitts.

   Links steht aber ausdrücklich KEINE Kapitelmarke: Die Mono-Versalien der
   Abschnittsköpfe benennen ein Kapitel. Hier steht eine Frage an den Leser, und
   die gehört zum Absatz. Deshalb Hausschrift statt Mono, gemischt statt Versal,
   grösser als die Kapitelmarken – und ohne den Strich, der die Randmarke der
   Abschnittsköpfe kennzeichnet. */
.nachsatz{
  display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:0 44px;
  align-items:start;margin-top:34px;
}
.nachsatz__frage{
  margin:0;font-family:var(--display);font-weight:700;
  font-size:1.15rem;line-height:1.3;letter-spacing:-.006em;
  color:var(--pink);text-wrap:balance;
}
/* Beide Teile tragen eine eigene Klasse. Ein Elementselektor wie ".nachsatz p"
   würde die Frage mitnehmen – sie ist ebenfalls ein <p> – und wäre dabei
   spezifischer als deren eigene Klasse. */
.nachsatz__text{margin:0;font-size:1.02rem;line-height:1.55;color:var(--ink);max-width:58ch}

.svc__list{padding:0;list-style:none}
.svc__list li{position:relative;padding-left:1.2em;font-size:1rem;line-height:1.52;margin-bottom:.6em;text-wrap:pretty}
.svc__list li:last-child{margin-bottom:0}
.svc__list li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;background:var(--pink);border-radius:50%}

/* ---------- Panel ---------- */
.panel{background:var(--white);border:1px solid var(--rule-soft);padding:clamp(28px,3.4vw,44px);margin-top:40px}
.panel .h3{color:var(--pink)}
.panel__grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 56px;margin-top:20px}
.panel__grid p{margin:0;padding:14px 0;border-top:1px solid var(--rule-soft);font-size:1rem;line-height:1.5;color:var(--ink-soft)}
.panel__grid b{font-family:var(--display);font-weight:700;color:var(--schwarz);font-size:.98rem}

/* ---------- Über uns ---------- */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(34px,5vw,68px);align-items:center}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:34px}
/* Trennstrich 1 px auf 32 % Deckkraft – dieselbe Zartheit wie der Strich neben
   den Schrittzahlen. Die Stärke allein reichte nicht, den Unterschied machte
   die Deckkraft. */
.pillar{border-top:1px solid var(--pink-linie)}
.pillar .h4{margin-top:14px;color:var(--pink)}
.pillar p{margin:.4em 0 0;font-size:.96rem;line-height:1.5;color:var(--ink-soft)}

/* ---------- Stimmen: Zitate, keine Kacheln ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px);margin-top:44px;align-items:start}
/* Zwei kurze Stimmen teilen sich die dritte Spalte */
.quote-paar{display:grid;gap:clamp(24px,3vw,38px)}
.quote blockquote{
  margin:0;font-family:var(--display);font-style:italic;font-weight:400;font-size:1.18rem;line-height:1.5;color:var(--ink);
}
/* Eine Bewertung kann aus mehreren Absaetzen bestehen. Der Abstand dazwischen
   bleibt kleiner als der Zeilenabstand mal zwei, damit der Text als ein Zitat
   liest und nicht als drei. Nach aussen gibt der Absatz keinen Rand ab. */
.quote blockquote p{margin:0}
.quote blockquote p + p{margin-top:.62em}
.quote__stars{color:var(--pink);font-size:.9rem;margin-bottom:16px}
.quote__stars .zeichen--stern + .zeichen--stern{margin-left:.24em}
.quote__who{font-family:var(--mono);font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);margin-top:18px}

/* ---------- Einsatzgebiet ---------- */
.area{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,68px);align-items:center}
.places{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.places span{
  font-family:var(--mono);font-size:.82rem;letter-spacing:.03em;color:var(--schwarz);
  border:1px solid var(--pink);padding:.5em .85em;
}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;margin-top:38px;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule);padding:4px 0}
.faq summary{
  list-style:none;cursor:pointer;padding:18px 30px 18px 0;position:relative;
  font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--schwarz);letter-spacing:-.012em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:1.5px solid var(--pink-tief);border-bottom:1.5px solid var(--pink-tief);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq p{margin:0 0 20px;font-size:1rem;line-height:1.56;color:var(--ink-soft);max-width:50ch}

/* ---------- Kontakt ---------- */
.contact{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,64px);margin-top:40px;align-items:start}
.field{width:100%;font-family:var(--ui);font-size:1rem;color:var(--ink);
  background:var(--white);border:1px solid var(--rule);padding:.92em 1em;margin-bottom:12px;border-radius:2px}
.field::placeholder{color:#9A8F88}
.feld-label{
  display:block;margin-bottom:8px;
  font-family:var(--ui);font-weight:700;font-size:.98rem;color:var(--schwarz);
}
.feld-label span{
  display:block;margin-top:3px;
  font-family:var(--mono);font-weight:400;font-size:.75rem;letter-spacing:.04em;color:var(--ink-soft);
}
/* Auswahlfelder: Systemaussehen abschalten, eigener Haken in Weinrot */
select.field{
  appearance:none;-webkit-appearance:none;
  background-color:var(--white);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%2384525E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 7 7.5 13 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:13px 8px;
  padding-right:44px;cursor:pointer;
}
select.field::-ms-expand{display:none}
select.field:invalid{color:#9A8F88}
select.field option{color:var(--ink)}
/* Die beiden Nachrichtenfelder lassen sich weiterhin in der Höhe ziehen, aber
   nicht mehr unbegrenzt: nach unten hält min-height sie bei vier Zeilen, nach
   oben ist bei 520 px Schluss – auf niedrigen Fenstern früher, damit der
   Absendeknopf nicht aus dem Bild geschoben wird. */
textarea.field{min-height:132px;max-height:min(520px, 60vh);resize:vertical}
.consent{display:flex;gap:.7em;align-items:flex-start;margin:8px 0 22px;font-size:.9rem;line-height:1.5;color:var(--ink-soft)}
.consent input{margin-top:.25em;accent-color:var(--pink-tief);flex:none}
.consent .link{border-bottom-width:1px;padding-bottom:0}
.contact__tel{font-family:var(--mono);font-weight:600;font-size:clamp(1.7rem,3.4vw,2.4rem);color:var(--pink);letter-spacing:-.02em;display:block;text-decoration:none}
.contact__tel:hover{color:var(--pink-tief)}
.contact dl{margin:30px 0 0}
.contact dt{font-family:var(--display);font-weight:700;color:var(--schwarz);font-size:1rem;margin-top:22px}
.contact dd{margin:.25em 0 0;font-size:1rem;color:var(--ink-soft)}
.kontakt__zusatz{margin-top:14px;color:var(--ink-soft);font-size:1rem}

/* Köderfeld gegen Werbeprogramme – für Menschen unsichtbar, aber nicht display:none,
   damit Ausfüllhilfen es nicht doch bedienen */
.koeder{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Rückmeldung nach dem Absenden ---------- */
.meldung{
  margin:30px 0 22px;padding:18px 22px;
  border-left:4px solid;border-radius:2px;
  font-family:var(--prose);font-size:1.02rem;line-height:1.55;
}
.meldung--ok{background:var(--sage);border-color:#5C8A63;color:var(--ink)}
.meldung--fehler{background:#F7E9EB;border-color:var(--pink-tief);color:var(--pink-tiefer)}

/* ---------- Footer ---------- */
.foot{background:var(--taupe);color:var(--schwarz);padding-block:64px 30px;font-size:.95rem}
.foot__grid{display:grid;grid-template-columns:1.3fr .8fr 1fr;gap:36px 56px}
.foot h3,.foot h4{font-family:var(--display);font-weight:700;color:var(--schwarz);font-size:1rem;margin:0 0 16px;letter-spacing:-.012em}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:9px;display:flex;align-items:baseline;gap:0}
.foot li a{display:flex;align-items:baseline;gap:0}
.foot__icon{width:15px;height:15px;flex:none;align-self:center;margin-right:.6em;color:var(--pink);opacity:1}
.foot a{color:var(--schwarz);text-decoration:none}
.foot a:hover{color:var(--pink);text-decoration:underline;text-underline-offset:3px}
.foot p{margin:0 0 9px;line-height:1.55}
.social{display:flex;gap:12px;margin-top:18px}
.social a{
  display:grid;place-items:center;width:40px;height:40px;
  color:var(--pink);border:1px solid var(--pink);border-radius:2px;
  transition:background .18s ease,border-color .18s ease;
}
/* Beim Überfahren füllt sich die Fläche im Hauptton, das Symbol wird weiss.
   Das tiefe Pink auf dem Hauptton käme auf 1,3:1 – das Symbol verschwände. */
.social a:hover{background:var(--pink);border-color:var(--pink);color:#fff}
.foot__bar{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:52px;padding-top:22px;border-top:1px solid rgba(20,18,16,.18);
  font-family:var(--mono);font-size:.73rem;letter-spacing:.06em;color:#5A5049;
}
/* Rechtliche Verweise: Klickfläche auf 24 px vergrössern, ohne die Zeile
   höher zu machen. */
.foot__bar a{position:relative}
.foot__bar a::after{content:"";position:absolute;inset:-5px -3px}

/* für Vorleseprogramme, nicht sichtbar */
.nur-lesen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Zentrierte Sektionsköpfe ---------- */
.center{text-align:center;max-width:62ch;margin-inline:auto}
.center .lead{margin-inline:auto}
.cta-row{display:flex;justify-content:flex-start;margin-top:44px}
.cta-row--mitte{justify-content:center}
.note{margin-top:26px;font-size:1rem;color:var(--ink-soft);max-width:70ch;text-wrap:pretty}

/* Kleingedruckter Hinweis am Ende eines Abschnitts */
.bild-hinweis-ki{
  display:block;margin:9px 0 0;
  font-family:var(--display);font-style:italic;font-size:.8rem;line-height:1.55;
  color:var(--grau);           /* 4,5:1 auf Creme und auf Weiss */
  text-wrap:pretty;
}
.bild-hinweis-ki a{color:var(--grau);text-underline-offset:2px}
.bild-hinweis-ki a:hover{color:var(--pink-tief)}
#leistungen .bild-hinweis-ki{margin-top:12px}
.bild-hinweis{
  margin:0 0 14px;font-family:var(--mono);font-size:.7rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
}

/* Klickflächen: freistehende Verweise auf mindestens 44 px Höhe */
.job .link,.cta-row .link,.karte-box figcaption .link{
  display:inline-block;padding-block:11px;
}

/* ---------- Einblendung beim Laden ---------- */
.rise{opacity:0;transform:translateY(14px);animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards}
.rise:nth-child(2){animation-delay:.06s}
.rise:nth-child(3){animation-delay:.12s}
@keyframes rise{to{opacity:1;transform:none}}


/* ===========================================================================
   Hero mit Foto (Startseite)
   Das Autobild trägt den Hero. Es steht als <img> in der Seite und nicht als
   CSS-Hintergrund, damit der Browser es vorrangig lädt und auf dem Handy die
   kleine 900er-Fassung nimmt.
   =========================================================================== */
.hero--foto{
  position:relative;isolation:isolate;overflow:hidden;
  padding:0;min-height:560px;
  display:flex;align-items:center;
  background:var(--taupe);            /* Farbe, solange das Bild lädt */
}
.hero--foto .hero__bild{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:58% center;
}
/* Zwei Schichten: ein Keil von links, wo der Text steht, und ein sehr leichter
   Schleier über allem, damit Weiss auch am Sonnenrand trägt.
   Gemessen: an der hellsten Stelle unter dem Text 5,25:1 gegen Weiss. */
.hero--foto::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg, rgba(24,18,16,.60) 0%, rgba(24,18,16,.56) 30%,
                            rgba(24,18,16,.27) 52%, rgba(24,18,16,.04) 68%,
                            rgba(24,18,16,0) 80%),
    linear-gradient(rgba(24,18,16,.10), rgba(24,18,16,.10));
}
.hero__wrap{position:relative;z-index:2;width:100%;min-width:0}
.hero--foto .hero__text{max-width:540px}
.hero--foto .mark{color:rgba(255,255,255,.86)}
.hero--foto .h1{color:#fff;text-shadow:0 1px 22px rgba(20,14,12,.42)}
.hero--foto .hero__claim{color:rgba(255,255,255,.94)}
.hero--foto .lead{color:rgba(255,255,255,.92);text-shadow:0 1px 14px rgba(20,14,12,.4)}


/* ===========================================================================
   Stellenanzeigen
   =========================================================================== */

/* Hero mit dem Teambild: zweispaltig – Text links auf Creme, Bild rechts.
   Über dem Gruppenbild liegt nichts, alle bleiben erkennbar; der Text steht in
   den normalen Hausfarben und braucht keinen Verlauf. Die linke Innenkante
   liegt auf derselben Linie wie der übrige Seiteninhalt. */
.hero--team{
  display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  min-height:520px;padding:0;background:var(--cream);
}
.hero--team .hero__bild{
  order:2;width:100%;height:100%;
  object-fit:cover;object-position:50% 40%;
}
.hero--team .hero__wrap{
  order:1;max-width:none;margin:0;
  display:flex;align-items:center;
  padding-block:48px;
  padding-right:clamp(24px,3.6vw,56px);
  padding-left:max(28px, calc((100vw - 1180px) / 2 + 28px));
}
.hero--team .hero__text{max-width:none}

.job-detail{
  background:var(--white);border:1px solid var(--rule-soft);border-left:4px solid var(--pink);
  padding:clamp(26px,3vw,40px);margin-top:24px;
}
.job-detail__head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.job-detail__meta{
  font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;color:var(--ink-soft);margin:.5em 0 0;
}
.job-detail__cols{display:grid;grid-template-columns:1fr 1fr;gap:8px 56px;margin-top:30px}
.job-detail h4{
  font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--schwarz);margin:26px 0 12px;
}
.job-detail__cols > div > h4:first-child{margin-top:0}
.job-detail__foot{
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  margin-top:30px;padding-top:26px;border-top:1px solid var(--rule-soft);
}
.job-detail__foot p{margin:0;font-size:1rem;color:var(--ink-soft)}

.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:0 56px;margin-top:38px;border-top:1px solid var(--rule)}
.note-item{padding:24px 0 22px;border-bottom:1px solid var(--rule)}
.note-item p{margin:.45em 0 0;font-size:1rem;line-height:1.5;color:var(--ink-soft)}

.form-panel{background:var(--white);border:1px solid var(--rule-soft);padding:clamp(26px,3.4vw,44px);margin-top:34px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.form-grid .wide{grid-column:1 / -1}


/* ---------- Vorteilskacheln ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
.tile{
  background:var(--white);border:1px solid var(--rule-soft);padding:20px;text-align:center;
  position:relative;overflow:hidden;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.tile::before{
  content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;
  background:var(--pink);opacity:0;transition:opacity .2s ease;
}
.tile__icon{display:block;margin:0 auto 12px;color:var(--pink);transition:color .2s ease}
.tile .h4{color:var(--schwarz)}
.tile p{margin:.55em 0 0;font-size:.95rem;line-height:1.46;color:var(--ink-soft)}


/* ---------- Ansprechpartnerinnen: Bild links, Namen rechts ---------- */
.team-bild{margin:34px 0 0;max-width:640px}
.team-bild img{display:block;width:100%;height:auto;border:1px solid var(--rule-soft)}
.ansprech{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,56px);align-items:center;margin-top:34px}
.ansprech .team-bild{margin:0;max-width:none}

/* Funktion steht über dem Namen – wer sich bewirbt, sucht die Rolle zuerst */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px;margin-top:30px}
.person{
  padding-top:18px;border-top:1px solid var(--pink-linie);
  display:flex;flex-direction:column-reverse;align-items:flex-start;
}
.person b{
  display:block;font-family:var(--display);font-weight:700;font-size:1.22rem;
  color:var(--ink);letter-spacing:-.012em;line-height:1.25;
}
.person span{
  display:block;margin-bottom:7px;
  font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pink);
}
.people.people--stapel{display:block;margin-top:0}
.people.people--stapel .person{padding:14px 0 16px}


/* ---------- Karte Einsatzgebiet (ohne fremde Server) ---------- */
.karte-box{margin:0}
.karte{
  position:relative;border:1px solid var(--rule-soft);overflow:hidden;line-height:0;
  container-type:inline-size;        /* Beschriftung richtet sich nach der Bildbreite, nicht nach dem Bildschirm */
}
.karte img{display:block;width:100%;height:auto}
.ort{position:absolute;width:0;height:0}
.ort::before{
  content:"";position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  width:clamp(6px,1.7cqw,9px);height:clamp(6px,1.7cqw,9px);border-radius:50%;background:var(--pink-tief);
  box-shadow:0 0 0 clamp(1.5px,.45cqw,2.5px) rgba(247,250,246,.92);
}
.ort b{
  position:absolute;left:clamp(9px,3cqw,17px);top:0;transform:translateY(-50%);white-space:nowrap;
  font-family:var(--mono);font-size:clamp(8.5px,2.5cqw,12.2px);font-weight:600;
  letter-spacing:.03em;line-height:1.5;
  color:var(--schwarz);background:rgba(247,250,246,.9);padding:.15em .5em;
}
.ort--l b{left:auto;right:clamp(9px,3cqw,17px)}
.ort--o b{left:0;right:auto;top:clamp(-13px,-2.6cqw,-8px);transform:translate(-50%,-100%)}
/* Barßel ist der eigene Standort und deshalb hervorgehoben */
.ort--haus::before{
  width:clamp(10px,2.9cqw,15px);height:clamp(10px,2.9cqw,15px);background:var(--pink);
  box-shadow:0 0 0 clamp(2px,.55cqw,3px) rgba(247,250,246,.95),0 0 0 clamp(6px,1.9cqw,10px) rgba(132,82,94,.22);
}
.ort--haus b{font-size:clamp(10px,3cqw,14.4px);color:#fff;background:var(--pink);padding:.2em .6em}
.karte__quelle{
  position:absolute;right:.6cqw;bottom:.5cqw;
  font-family:var(--mono);font-size:clamp(7px,1.6cqw,10px);letter-spacing:.05em;line-height:1.6;
  color:#7C7069;background:rgba(247,250,246,.82);padding:.1em .5em;
}
.karte-box figcaption{margin-top:16px;line-height:1.5}


/* ---------- Rechtstexte ---------- */
.rechtstext{margin-top:38px;max-width:70ch}
.rechtstext .h3{margin-top:40px;color:var(--schwarz)}
.rechtstext .h3:first-child{margin-top:0}
/* Anders als bei den Bändern: Hier ist das Ziel eine Zwischenüberschrift mitten
   im Text, keine Fläche. Ohne Abstand läge sie hinter der Leiste. Dahinter steht
   dann Fliesstext – bei 6 % Durchsicht praktisch unsichtbar, anders als ein Foto. */
.rechtstext [id]{scroll-margin-top:var(--kopf)}
.rechtstext .prose{margin-top:12px}
.rechtstext .prose + .prose{margin-top:14px}
.rechtstext .svc__list{margin-top:14px}


/* ===========================================================================
   Schmale Bildschirme
   =========================================================================== */

@media (max-width:1230px){
  .facts__in{gap:9px 16px;letter-spacing:.01em}
}
@media (max-width:1100px){
  /* Bildband wird zum schiebbaren Streifen */
  .bildband__reihe{
    display:flex;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .bildband__reihe::-webkit-scrollbar{display:none}
  .bildband__reihe li{flex:0 0 34vw;scroll-snap-align:start}
  .bildband__reihe:focus-visible{outline:2.5px solid var(--pink-tief);outline-offset:-3px}

  .bildband__pfeil{
    display:grid;place-items:center;position:absolute;top:50%;translate:0 -50%;
    width:44px;height:44px;border:none;border-radius:50%;
    background:rgba(255,255,255,.92);color:var(--pink-tief);
    cursor:pointer;box-shadow:0 2px 10px rgba(42,35,32,.18);
    transition:background .18s ease,opacity .18s ease;
  }
  .bildband__pfeil:hover{background:#fff}
  .bildband__pfeil:focus-visible{outline:2.5px solid var(--pink-tief);outline-offset:2px}
  .bildband__pfeil[hidden]{display:none}
  .bildband__pfeil--links{left:12px}
  .bildband__pfeil--rechts{right:12px}
}
@media (max-width:1090px){
  .nav{gap:20px}
  .nav a{font-size:.9rem}
  .head__in{gap:20px}
}
@media (max-width:1000px){
  .sec,.nachsatz{grid-template-columns:1fr;gap:0}
  .sec__rail{position:static;margin-bottom:16px}
  .nachsatz__frage{margin-bottom:10px}
  .sec__rail::after{display:none}
  .about,.area,.contact{grid-template-columns:1fr}
  .steps,.steps--3{grid-template-columns:1fr 1fr}
  .foot__grid{grid-template-columns:1fr 1fr}
  .facts__in{justify-content:flex-start;gap:10px 26px}
  .job-detail__cols,.form-grid{grid-template-columns:1fr;gap:0}
  .people,.notes{grid-template-columns:1fr}
}
/* Ab hier reicht der Platz nicht mehr für die ausgeschriebene Navigation.
   Der Firmenname darf nicht umbrechen und kann deshalb nicht schrumpfen – die
   Menüpunkte liefen sonst in ihn hinein. Gemessen begann das bei 986 px und
   noch einmal bei 786 px. Der Umbruchpunkt liegt bewusst darüber: Bei 1000 px
   blieben nur 14 px Luft zwischen Firmenname und erstem Menüpunkt, bei 1020 px
   sind es rund 30 px – so viel, wie die Menüpunkte auch untereinander haben.
   Darunter übernimmt das Menüsymbol. */
@media (max-width:1020px){
  .nav{display:none}
  .burger{display:block}
}
@media (max-width:940px){
  .brand__name{font-size:1.02rem}
  .brand__sub{font-size:.58rem;letter-spacing:.15em}
}
@media (max-width:900px){
  .leistungen{grid-template-columns:1fr;gap:16px}
  .ansprech{grid-template-columns:1fr;gap:20px}
  /* Hero hochkant: Text nach unten, Verlauf von unten nach oben – oben
     bleiben Himmel und Sonne sichtbar. */
  .hero--foto{align-items:flex-end;min-height:600px}
  .hero--foto .hero__bild{object-position:42% center}
  .hero--foto::after{
    background:
      linear-gradient(to top, rgba(24,18,16,.62) 0%, rgba(24,18,16,.60) 22%,
                              rgba(24,18,16,.56) 44%, rgba(24,18,16,.44) 62%,
                              rgba(24,18,16,.20) 78%, rgba(24,18,16,0) 92%),
      linear-gradient(rgba(24,18,16,.06), rgba(24,18,16,.06));
  }
  .hero--foto .hero__text{max-width:none;padding:120px 0 28px}
  /* Teambild-Hero untereinander: Bild oben, Text darunter */
  .hero--team{grid-template-columns:1fr;min-height:0}
  .hero--team .hero__bild{order:-1;height:auto;aspect-ratio:5/4;object-position:50% 40%}
  .hero--team .hero__wrap{padding:22px 28px 34px}
}
@media (max-width:780px){
  /* Vier Kacheln in einer Reihe, so lange sie lesbar bleiben. Bei 780 px ist
     eine Kachel noch 170 px breit; darunter wird der Titel zum Buchstabensalat,
     deshalb dann zwei – nie drei, sonst bleibt bei zwölf Kacheln eine Reihe
     halb leer. */
  .tiles{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  body{font-size:18px}
  .benefits,.jobs,.quotes,.faq,.panel__grid,.pillars{grid-template-columns:1fr;column-gap:0}
  .steps,.steps--3,.foot__grid{grid-template-columns:1fr}
  .facts__in{flex-direction:column;gap:9px}
  .facts__in span{white-space:normal}
  .step{padding:0 0 4px}
  .frame::before{inset:12px -12px -12px 12px}
  .quotes{gap:34px}
  .quote{border-top:1px solid var(--rule);padding-top:22px}
}
@media (max-width:700px){
  /* Ohne den Telefonknopf wird die Leiste flacher – siehe Kommentar bei --kopf */
  :root{--kopf:78px}
  .head__tel{display:none}          /* die feste Leiste unten übernimmt das Anrufen */
  .dock{
    display:grid;grid-template-columns:1fr 1fr;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:#fff;border-top:1px solid rgba(20,18,16,.14);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -6px 22px rgba(42,35,32,.13);
  }
  body{padding-bottom:74px}
  .bildband__reihe li{flex:0 0 62vw}
  .people{grid-template-columns:1fr;gap:0}
  .person{margin-top:14px}
  /* Der Fliesstext geht hier von 19 auf 18 px zurück; ohne diese Zeile würde
     der Hinweis im Verhältnis wachsen. */
  .bild-hinweis-ki{font-size:.73rem;line-height:1.5;margin-top:8px}
}
@media (max-width:430px){
  .tiles{grid-template-columns:1fr}
}

/* Wo es einen echten Mauszeiger gibt, tauschen Titel und Text bei den
   Vorteilskacheln die Stelle. */
@media (hover:hover) and (pointer:fine){
  /* --titel: zwei Zeilen Überschrift. Der Text schwebt darüber und
     beansprucht keinen Platz, damit der Ruhezustand ruhig bleibt. */
  .tile{
    --titel:92px;
    height:212px;display:grid;grid-template-rows:auto var(--titel);
    align-content:center;justify-items:center;cursor:default;
  }
  .tile__icon{grid-row:1;transition:opacity .2s ease,color .2s ease,transform .26s ease}
  .tile > .h4{
    grid-row:2;grid-column:1;align-self:center;width:100%;
    transition:opacity .2s ease,transform .26s ease;
  }
  /* Der Text nimmt beim Überfahren die ganze Fläche ein, mittig */
  .tile > p{
    position:absolute;left:20px;right:20px;top:50%;
    margin:0;opacity:0;
    transform:translateY(-50%) translateY(7px);
    transition:opacity .2s ease,transform .26s ease;
  }
  .tile:hover,.tile:focus{
    border-color:var(--pink-tief);box-shadow:0 12px 28px rgba(42,35,32,.10);transform:translateY(-3px);
  }
  .tile:hover::before,.tile:focus::before{opacity:1}
  .tile:hover .tile__icon,.tile:focus .tile__icon{opacity:0;transform:translateY(-7px)}
  .tile:hover > .h4,.tile:focus > .h4{opacity:0;transform:translateY(-7px)}
  .tile:hover > p,.tile:focus > p{opacity:1;transform:translateY(-50%)}
  .tile:focus{outline:none}
  .tile:focus-visible{outline:2.5px solid var(--pink-tief);outline-offset:3px}
}
/* Touchgeräte: kein Überfahren möglich, also steht alles untereinander da */
@media (hover:none),(pointer:coarse){
  .tile{display:block;border-left:3px solid var(--pink)}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rise{opacity:1;transform:none}
  .job:hover{transform:none}
}

/* ---------- Einzelseiten je Stelle ----------
   Die Stellendaten fuer Google liegen auf diesen Seiten, nicht auf der
   Uebersicht. Alles, was dort in den Daten steht, steht hier sichtbar. */
.stelle__zurueck{margin:0 0 26px}
.stelle__titel{font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.1;margin:0}
/* Der Titel auf der Uebersicht fuehrt zur Einzelseite, sieht aber aus wie zuvor */
.stelle__verweis{text-decoration:none;color:inherit}
.stelle__verweis:hover{color:var(--pink)}

/* Der Weg zur Einzelseite: eine Zeile, die auf ganzer Breite anklickbar ist.
   Sie sitzt zwischen Inhalt und Fussbereich – also dort, wo man mit dem Lesen
   fertig ist und sich entscheidet. */
.stelle__mehr{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin:26px 0 0;padding:16px 0 0;border-top:1px solid var(--rule);
  text-decoration:none;font-family:var(--ui);font-weight:700;font-size:.98rem;
  color:var(--pink);transition:color .18s ease;
}
.stelle__mehr:hover{color:var(--pink-tief)}
.stelle__mehr .zeichen--pfeil{margin-left:0}
/* Wo diese Zeile steht, gibt der Fussbereich seine eigene Trennlinie ab –
   sonst laegen zwei Haarlinien rund 70 px auseinander, mit einer einzigen
   Textzeile dazwischen. Es bleibt bei einer Linie je Karte, wie bisher. */
.job-detail:has(.stelle__mehr) .job-detail__foot{
  border-top:0;padding-top:0;margin-top:22px;
}
/* Die Punkte "Was Sie bei uns erwartet" in zwei Spalten, sie sind zahlreich */
.stelle__bieten{columns:2;column-gap:56px;margin-top:12px}
.stelle__bieten li{break-inside:avoid}
@media (max-width:760px){ .stelle__bieten{columns:1} }