/* ═══════════════════════════════════════════════════════════════════════════
   WERKSTATTWAND
   Die Seite ist eine Pinnwand in der Werkstatt. Fotos sind Gegenstände:
   angepinnt, leicht schief, mit echtem Schattenwurf. Texte liegen auf Papier.

   Disziplin, damit es nicht chaotisch wird:
   - Nur Fotos und einzelne Karten sind gedreht, maximal 3 Grad.
   - Fließtext steht immer gerade.
   - Genau eine Akzentfarbe: Kessler-Rot.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --wall-dark:   #f1efeb;
  --paper:       #ffffff;
  --paper-deep:  #f1efeb;
  --card:        #ffffff;   /* Papier – auf Weiß trägt der Schatten die Form */
  --ink:         #241c14;
  --body:        #574d42;
  --body-soft:   #857a6c;
  --line:        rgba(36,28,20,.13);
  --line-strong: rgba(36,28,20,.24);
  --shadow:      0 20px 38px -20px rgba(40,30,20,.32), 0 2px 5px rgba(40,30,20,.09),
                 0 0 0 1px rgba(40,30,20,.055);
  --shadow-lift: 0 32px 54px -24px rgba(40,30,20,.36), 0 4px 9px rgba(40,30,20,.11),
                 0 0 0 1px rgba(40,30,20,.07);
}

/* ── Die Wand ──
   Wand und Licht stehen zusammen am Ende der Datei. Hier bleibt nur die
   Koernung aus styles.css abgeschaltet, die auf der Holzkachel nichts
   beitraegt ausser Rauschen. */
body::after{display:none}

.section,.stats,.benefits,.jobs,.fit,.faq{background:transparent}
.section{padding:clamp(74px,9vw,140px) 0}

/* ═══ Bausteine ═══════════════════════════════════════════════════════════ */

/* Papier */
.paper{
  position:relative;background:var(--card);
  box-shadow:var(--shadow);
  padding:clamp(24px,2.6vw,40px);
}
/* Foto im Papierrand, wie ein abgezogener Abzug */
/* Der Grundschatten bleibt statisch. Der staerkere Schatten liegt auf einem
   Pseudoelement und wird nur ein- und ausgeblendet. Damit animieren wir
   ausschliesslich transform und opacity – beides laeuft auf der GPU.
   Vorher wurde box-shadow mitanimiert, das muss jedes Bild neu zeichnen
   und ruckelt bei grossen weichen Schatten sichtbar. */
.shot{
  position:relative;background:var(--card);
  padding:11px 11px 13px;
  box-shadow:var(--shadow);
  transition:transform var(--t-ui) var(--spring);
}
.shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:var(--shadow-lift);
  opacity:0;transition:opacity var(--t-ui) linear;
}
.shot img{width:100%;display:block}
.shot:hover{transform:rotate(0deg) translateY(-6px);z-index:5}
.shot:hover::after{opacity:1}
/* §1 Rückmeldung beim Drücken – das Blatt wird an die Wand gedrückt */
.shot:active,.benefit:active,.area:active{
  transform:scale(.985) !important;
  transition-duration:var(--t-press) !important;
}

/* ── Pinnnadel ──────────────────────────────────────────────────────────────
   Ein Nadelkopf liegt AUF dem Papier, nicht halb darueber. Vorher sassen alle
   Nadeln auf top:-6px, sichtbar blieb also nur eine 6px hohe Sichel ueber der
   Kante – das las sich als abgeschnittener Punkt, nicht als Nadel.
   Jetzt: ganzer Kopf im oberen Innenrand, mit Lichtkante oben links und einem
   kurzen Schlagschatten nach unten, damit er ueber dem Blatt zu stehen scheint.
   Eine Definition, alle Nadeln der Seite teilen sie sich.                    */
.pinned::before,
.hw-note::before,
.stat::before,
.reason::before,
.job-side::before{
  content:"";position:absolute;z-index:3;
  left:50%;transform:translateX(-50%);
  width:14px;height:14px;border-radius:50%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.8), rgba(255,255,255,0) 46%),
    radial-gradient(circle at 52% 46%, #d1493e, var(--red) 54%, #781a13 100%);
  box-shadow:0 1px 2px rgba(40,24,12,.34),
             0 7px 11px -5px rgba(40,24,12,.5),
             inset 0 -1px 2px rgba(60,10,6,.3);
}
.pinned::before{top:12px}
/* Klebeband statt Nadel */
.taped::before{
  content:"";position:absolute;top:-13px;left:50%;transform:translateX(-50%) rotate(-2deg);
  width:96px;height:26px;z-index:3;
  background:rgba(255,246,214,.72);
  box-shadow:0 1px 2px rgba(48,34,20,.16);
}

/* Leichte, feste Drehungen – nie zufällig, damit es ruhig bleibt */
.tilt-l{transform:rotate(-1.6deg)}
.tilt-r{transform:rotate(1.7deg)}
.tilt-l2{transform:rotate(-2.8deg)}
.tilt-r2{transform:rotate(2.6deg)}

/* Handschriftlich wirkende Bildunterschrift */
.scribble{
  margin-top:10px;font-size:13px;font-weight:700;letter-spacing:.02em;
  color:var(--body-soft);text-align:center;
}

/* Rot als „durchgestrichen mit dem Zimmermannsstift" */
/* Der Strich wird als Hintergrund gemalt, damit er hinter der Schrift
   liegt, aber vor der Karte – mit z-index landet er sonst unter dem Papier. */
.mark{
  background-image:linear-gradient(rgba(190,52,43,.28),rgba(190,52,43,.28));
  background-repeat:no-repeat;
  background-position:0 92%;
  background-size:0 .36em;
  transition:background-size .8s var(--ease-out) .3s;
  padding:0 .06em;
}
.in .mark,.mark.in{background-size:100% .36em}

/* ═══ Typografie ══════════════════════════════════════════════════════════ */

.sec-h2,.about-copy h2{color:var(--ink);font-weight:800;letter-spacing:-.032em;line-height:1.04}
.sec-label{color:var(--body-soft)}

/* Buttons: gestempelt, kantig */
.btn{border-radius:2px;font-weight:800;letter-spacing:.02em}
.btn-primary{box-shadow:0 12px 26px -14px rgba(190,52,43,.8)}
.btn-ghost{color:var(--ink);border-color:var(--line-strong);background:rgba(255,253,248,.5)}

/* ═══ HERO ════════════════════════════════════════════════════════════════ */

.hero-w{
  --note: 700px;          /* Breite des Aushangs, steuert auch die Fotolage */
  position:relative;overflow:hidden;
  min-height:min(calc(100vh - 210px), 880px);
  /* Spalte, sonst stellt sich das Laufband NEBEN die Pinnwand */
  display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(48px,6vw,86px);
}


.hw-board{position:relative;width:100%;max-width:1450px;margin-inline:auto;padding-inline:var(--gut)}

/* Auf grossen Schirmen wachsen Aushang, Brett und Abzuege mit, sonst steht
   eine 700px-Karte verloren in einem sehr breiten weissen Feld. */
@media (min-width: 1700px){
  .hero-w{--note:820px}
  .hw-board{max-width:1680px}
}
@media (min-width: 2100px){
  .hero-w{--note:900px}
  .hw-board{max-width:1900px}
}

/* Die angepinnten Fotos */
/* Die Fotos liegen ÜBER dem Aushang. Dadurch überlappt zwangsläufig das
   Foto die Karte und nie die Karte das Foto – ein Gesicht kann so nicht
   verdeckt werden. Die Überlappung landet im leeren Rand der Karte. */
.hw-shot{position:absolute;z-index:6;margin:0}
.hw-shot img{aspect-ratio:3/4;object-fit:cover}
/* Bildausschnitt so, dass die Personen zur Außenkante rücken */
.hw-1 img{object-position:22% 42%}
.hw-2 img{object-position:40% 44%}
.hw-3 img{object-position:70% 38%}
.hw-4 img{object-position:74% 44%}
/* Die Fotos haengen als zwei Spalten neben dem Aushang. Innerhalb einer
   Spalte sorgt ein fester Abstand dafuer, dass sich zwei Abzuege nie
   beruehren koennen – vorher war jedes Foto einzeln absolut positioniert,
   dadurch liessen sich Kollisionen nur nachtraeglich wegjustieren.
   Die Spalte sitzt 2px neben der Karte; die Drehung laesst die Ecken dann
   leicht darauf liegen, genau die gewuenschte Beruehrung. */
/* z-index 6: die Spalten liegen VOR dem Aushang. Beim Umbau auf Spalten
   war das verlorengegangen, dadurch verschwanden die Fotos dahinter. */
.hw-col{
  position:absolute;z-index:6;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:clamp(30px,3.2vw,52px);
  width:clamp(178px,15.5vw,258px);
}
.hw-col-l{right:calc(50% + var(--note) / 2 - 34px);align-items:flex-end}
.hw-col-r{left:calc(50% + var(--note) / 2 - 34px);align-items:flex-start}
.hw-shot{position:relative;margin:0;width:100%}
.hw-2,.hw-4{width:84%}
.hw-1{transform:rotate(-5deg)}
.hw-2{transform:rotate(3.5deg)}
.hw-3{transform:rotate(4.2deg)}
.hw-4{transform:rotate(-3.4deg)}
.hw-4 img{aspect-ratio:4/3}

/* Der Aushang in der Mitte */
/* Der Aushang.
   Vorher ein weisses Rechteck mit Schatten – nichts daran las sich als
   Papier. Drei Dinge machen den Unterschied:

   1 Der Bogen ist nicht flach weiss. Ein sehr flacher Verlauf laesst das
     Licht von oben links einfallen, dasselbe Licht wie auf der Wand.
   2 Der Schatten besteht aus drei Lagen statt zwei: eine harte Kontaktlinie
     direkt am Papier, ein kurzer Schatten und ein weiter, weicher Wurf.
     Ein Blatt an der Wand liegt oben an der Nadel an und steht unten ab.
   3 Eine Haarlinie als Aussenkante, sonst franst Weiss auf Weiss aus.       */
.hw-note{
  position:relative;z-index:4;
  width:min(var(--note),76%);margin-inline:auto;
  background:linear-gradient(158deg, #ffffff 0%, #fffefc 38%, #fbf7f1 100%);
  padding:clamp(34px,4vw,62px) clamp(28px,4.6vw,74px) clamp(30px,3.4vw,50px);
  box-shadow:
    0 0 0 1px rgba(48,34,20,.055),
    0 2px 4px rgba(48,34,20,.07),
    0 14px 22px -14px rgba(48,34,20,.22),
    0 44px 74px -36px rgba(48,34,20,.6);
  text-align:center;
  transform:rotate(-.8deg);
}
.hw-note::before{top:clamp(13px,1.5vw,21px);width:17px;height:17px}
/* Kopf- und Fusszeile des Aushangs bekommen flankierende Striche. Das ist
   die Klammer, die aus einem zentrierten Textblock einen Anschlag macht:
   oben rot, unten grau, gleiche Bauweise, dadurch schliesst der Bogen. */
/* Der Innenrahmen macht aus dem weissen Rechteck einen Anschlag: ein Bogen
   mit Satzspiegel statt einer Flaeche mit Text darauf. Haarfein und warm,
   damit er die Form gibt, ohne den Blick zu binden.
   ::before ist die Nadel, deshalb sitzt der Rahmen auf ::after.            */
.hw-note::after{
  content:"";position:absolute;pointer-events:none;
  inset:clamp(17px,1.75vw,28px);
  border:1px solid rgba(36,28,20,.11);
}

.hw-kick{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(12px,1.1vw,18px);
  margin:0 0 26px;font-size:12px;font-weight:800;letter-spacing:.24em;
  text-transform:uppercase;color:var(--red);
}
.hw-kick::before,.hw-kick::after{
  content:"";height:1px;flex:0 1 clamp(20px,4.4vw,66px);
  background:linear-gradient(90deg, rgba(190,52,43,0), rgba(190,52,43,.55));
}
.hw-kick::after{transform:scaleX(-1)}
.hero-w h1{
  font-size:clamp(39px,5.2vw,80px);
  font-weight:900;line-height:.96;letter-spacing:-.042em;color:var(--ink);margin:0 0 24px;
  font-optical-sizing:auto;
}
.hero-w h1 em{font-style:normal;color:var(--red)}
.hw-lead{
  max-width:40ch;margin:0 auto 34px;
  font-size:clamp(16px,1.1vw,17.5px);line-height:1.62;color:var(--body);
}
.hw-cta{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-bottom:16px}
.hw-meta{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(12px,1.1vw,18px);
  margin:0;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--body-soft);
}
.hw-meta::before,.hw-meta::after{
  content:"";height:1px;flex:0 1 clamp(16px,3.4vw,52px);
  background:linear-gradient(90deg, rgba(36,28,20,0), rgba(36,28,20,.2));
}
.hw-meta::after{transform:scaleX(-1)}

/* Der zweite Knopf stand als cremefarbenes Rechteck auf dem Papier und las
   sich wie ein Kasten, nicht wie ein Knopf. Ohne Fuellung, mit einer
   ruhigen Kante, ordnet er sich dem roten Knopf unter. */
.hero-w .btn-ghost{background:transparent;border-color:rgba(36,28,20,.28)}
/* Kein eigener Hover-Hintergrund mehr: der wuerde die durchwischende
   Fuellung ueberdecken. Die Kante folgt jetzt der Fuellung. */
.hero-w .btn-ghost:hover{border-color:var(--red)}

/* Zettel mit Kernfakten, unten am Brett */
/* Eigene Zeile unter dem Brett. Absolut positionierte Fotos können sie
   dadurch nicht mehr überlagern – Gesichter bleiben in jedem Fall frei. */
.hw-strip{
  position:relative;z-index:5;
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  width:100%;max-width:1450px;margin:clamp(34px,4vw,58px) auto 0;
  padding-inline:var(--gut);
}
.hw-strip span{
  background:rgba(255,246,214,.9);
  padding:9px 16px;
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#6a5a3a;
  box-shadow:0 6px 14px -8px rgba(48,34,20,.5);
}
.hw-strip span:nth-child(2n){transform:rotate(1.4deg)}
.hw-strip span:nth-child(3n){transform:rotate(-1.6deg)}

/* Solange die Fotos sichtbar sind, muss der Innenabstand groesser sein als
   die Ueberlappung – sonst ragt ein Foto auf den Text. */
@media (min-width: 1081px){
  .hw-note{padding-inline:max(74px, 4.6vw)}
}

/* Schmal bricht die Kopf- und Fusszeile um. Die flankierenden Striche saessen
   dann mitten im Satz, deshalb entfallen sie und der Text zentriert normal. */
@media (max-width: 820px){
  .hw-kick,.hw-meta{display:block}
  .hw-kick::before,.hw-kick::after,
  .hw-meta::before,.hw-meta::after{display:none}
}

@media (max-width: 1080px){
  .hw-col{display:none}
  .hw-note{width:100%;transform:none}
  .hero-w{min-height:auto}
}

/* Laufband sitzt auf der Wand, nicht auf Papier */
.marquee{background:transparent;border-color:var(--line-strong)}
.marquee-track span{color:var(--body-soft)}

/* ═══ Zahlenband: drei Zettel ═════════════════════════════════════════════ */

.stats{border:0}
.stats-grid{gap:clamp(16px,2vw,30px);padding-block:clamp(20px,2.4vw,34px)}
.stat{
  background:var(--card);border:0 !important;
  padding:clamp(22px,2.2vw,32px);
  box-shadow:var(--shadow);
  position:relative;
}
.stat:nth-child(1){transform:rotate(-1.2deg)}
.stat:nth-child(2){transform:rotate(.9deg)}
.stat:nth-child(3){transform:rotate(-.6deg)}
.stat::before{top:11px}
.stat-num{color:var(--ink)}

/* ═══ Über uns ════════════════════════════════════════════════════════════ */

.about-media{background:var(--card);padding:12px 12px 14px;box-shadow:var(--shadow);transform:rotate(-1.4deg)}
.about-media img{aspect-ratio:3/2}
.about-badge{
  right:14px;bottom:14px;background:var(--red);
  box-shadow:0 12px 24px -12px rgba(40,24,12,.6);
}

/* ═══ Drei Gründe: Notizzettel ════════════════════════════════════════════ */

.reasons-grid{border:0;gap:clamp(18px,2.2vw,32px)}
.reason{
  background:var(--card);border:0 !important;
  padding:clamp(28px,2.6vw,40px) !important;
  box-shadow:var(--shadow);position:relative;
}
.reason:nth-child(1){transform:rotate(-1.1deg)}
.reason:nth-child(2){transform:rotate(.8deg)}
.reason:nth-child(3){transform:rotate(-.7deg)}
.reason::before{top:13px}
.reason-num{font-size:38px}

/* ═══ Benefits: kleine Karten an der Wand ═════════════════════════════════ */

.benefit-grid{border:0;gap:clamp(12px,1.4vw,20px)}
.benefit{
  background:var(--card) !important;border:0 !important;
  box-shadow:var(--shadow);
  padding:clamp(22px,1.9vw,30px) !important;
}
.benefit:nth-child(3n+1){transform:rotate(-.8deg)}
.benefit:nth-child(3n+2){transform:rotate(.7deg)}
.benefit:nth-child(3n){transform:rotate(-.4deg)}
.benefit::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:var(--shadow-lift);opacity:0;transition:opacity var(--t-ui) linear}
.benefit:hover{transform:rotate(0deg) translateY(-4px)}
.benefit:hover::after{opacity:1}

/* ═══ Bereiche: Fotos angepinnt ═══════════════════════════════════════════ */

/* align-items:start – sonst zieht das Raster jede Karte auf die Hoehe der
   groessten in ihrer Reihe und die kuerzeren laufen unten leer aus.
   An einer Pinnwand haengen Zettel ohnehin unterschiedlich tief. */
.areas-grid{gap:clamp(20px,2.4vw,34px);align-items:start}
.area{
  background:var(--card);padding:11px 11px 13px;
  box-shadow:var(--shadow);overflow:visible;
}
.area:nth-child(2n){transform:rotate(1.2deg)}
.area:nth-child(2n+1){transform:rotate(-1deg)}
.area::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:var(--shadow-lift);opacity:0;transition:opacity var(--t-ui) linear}
.area:hover{transform:rotate(0deg) translateY(-5px);z-index:4}
.area:hover::after{opacity:1}
.area img{opacity:1}
.area:hover img{transform:none;opacity:1}
.area-body{
  position:static;padding:14px 4px 2px;background:none;
}
.area-body h3{color:var(--ink);font-size:19px}
.area-body p{color:var(--body-soft)}

/* ═══ Zitat ═══════════════════════════════════════════════════════════════ */

.quote{border:0}
.quote-media{background:var(--card);padding:12px 12px 14px;box-shadow:var(--shadow);transform:rotate(1.6deg)}
.quote-copy blockquote{color:var(--ink)}
.quote-mark{fill:var(--red)}

/* ═══ Alltag ══════════════════════════════════════════════════════════════ */

.team-photos figure{
  background:var(--card);padding:11px 11px 13px;box-shadow:var(--shadow);
  transition:transform var(--t-ui) var(--spring);
}
.team-photos figure::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:var(--shadow-lift);opacity:0;transition:opacity var(--t-ui) linear}
.team-photos figure:hover::after{opacity:1}
.team-photos figure:nth-child(1){transform:rotate(-2.2deg)}
.team-photos figure:nth-child(2){transform:rotate(1.8deg) translateY(24px)}
.team-photos figure:nth-child(3){transform:rotate(-1.4deg)}
.team-photos figure{position:relative}
.team-photos figure:hover{transform:rotate(0deg) translateY(-6px);z-index:4}
.team-photos figcaption{text-align:center;color:var(--body-soft)}

/* ═══ Stellen: der Aushang am schwarzen Brett ═════════════════════════════ */

.job-main{
  background:var(--card);border:0;
  box-shadow:0 40px 70px -34px rgba(48,34,20,.6), 0 4px 10px rgba(48,34,20,.12);
  transform:rotate(-.6deg);position:relative;
}
.job-main::before{
  content:"";position:absolute;top:-10px;left:50%;transform:translateX(-50%) rotate(-2deg);
  width:132px;height:32px;z-index:3;
  background:linear-gradient(180deg, rgba(250,238,196,.92), rgba(238,224,176,.88));
  box-shadow:0 2px 5px rgba(48,34,20,.22), inset 0 1px 0 rgba(255,255,255,.55);
}
.job-side{
  background:var(--card);border:0;
  box-shadow:var(--shadow);padding:0 clamp(22px,2vw,32px) clamp(22px,2vw,32px);
  position:relative;
}
.job-side:nth-child(1){transform:rotate(.9deg)}
.job-side:nth-child(2){transform:rotate(-1deg)}
.job-side::before{top:12px}
/* Platz fuer den Nadelkopf, der jetzt im Innenrand sitzt */
.job-side .job-body{padding-top:36px}

/* ═══ Vergleich, Passt das, Ablauf, FAQ, Formular ═════════════════════════ */

.compare-table,.fit-grid,.faq-list{
  background:var(--card);box-shadow:var(--shadow);
  padding:clamp(20px,2.4vw,36px);border-top:0;
}
.compare-row:hover{background:rgba(190,52,43,.04)}
.fit-col{padding-block:clamp(18px,2vw,28px)}

.steps li{border-top-color:var(--line-strong)}
.faq-list details:last-child{border-bottom:0}

.apply{border:0}
.apply-form-wrap{
  background:var(--card);border:0;
  box-shadow:0 40px 70px -34px rgba(48,34,20,.6), 0 4px 10px rgba(48,34,20,.12);
  transform:rotate(.5deg);
}
/* Die Basis adressiert die Textfelder ueber input[type=…] und gewinnt damit
   gegen ein blosses .field input – die drei Textfelder blieben deshalb weiss
   auf weisser Karte, waehrend Auswahl und Textfeld schon beige waren.
   Gleiche Schreibweise, gleiches Gewicht, alle fuenf Felder gleich. */
.field input[type=text],.field input[type=tel],.field input[type=email],
.field select,.field textarea{background:#f4efe4}
.location-media{background:var(--card);padding:12px 12px 14px;box-shadow:var(--shadow);transform:rotate(-1.2deg)}

/* Die Karte haengt wie alles andere als Blatt an der Wand: Papierrand,
   Schatten, leichte Gegendrehung zum Foto darueber. */
.location-map{background:var(--card);padding:12px;box-shadow:var(--shadow);transform:rotate(.9deg)}
.rv.in.location-map{transform:rotate(.9deg)}
.map-load{background:#f4efe4}
.map-load:hover{background:#efe8da}

/* ═══ Schluss ═════════════════════════════════════════════════════════════ */

.closer::after{background:linear-gradient(180deg, rgba(48,34,20,.6), rgba(30,20,12,.85))}

/* ═══ Bewegung: Sachen fallen an die Wand ═════════════════════════════════ */

/* Kritisch gedaempft, kein Ueberschwingen. Ein Element, das beim Scrollen
   erscheint, hat keinen Schwung aus einer Geste bekommen – es faellt nur ins
   Bild. Das leichte Nachfedern las sich dort als Verzierung. Ueberschwingen
   bleibt den Hero-Abzuegen vorbehalten, die an die Wand fallen. */
.rv{
  opacity:0;transform:translateY(26px) rotate(-1.5deg) scale(.985);
  clip-path:none;
  transition:opacity var(--t-enter) var(--spring),
             transform var(--t-enter) var(--spring);
}
.rv.in{opacity:1;transform:none}
/* gedrehte Elemente behalten ihre Drehung nach dem Einblenden */
.rv.in.stat:nth-child(1),.rv.in.reason:nth-child(1){transform:rotate(-1.1deg)}
.rv.in.stat:nth-child(2),.rv.in.reason:nth-child(2){transform:rotate(.85deg)}
.rv.in.stat:nth-child(3),.rv.in.reason:nth-child(3){transform:rotate(-.65deg)}
.rv.in.benefit:nth-child(3n+1){transform:rotate(-.8deg)}
.rv.in.benefit:nth-child(3n+2){transform:rotate(.7deg)}
.rv.in.benefit:nth-child(3n){transform:rotate(-.4deg)}
.rv.in.area:nth-child(2n){transform:rotate(1.2deg)}
.rv.in.area:nth-child(2n+1){transform:rotate(-1deg)}
.rv.in.team-photos figure:nth-child(2){transform:rotate(1.8deg) translateY(24px)}
/* Diese Elemente hatten ihre Drehung nach dem Einblenden verloren, weil
   .rv.in den transform pauschal zurueckgesetzt hat. */
.rv.in.about-media{transform:rotate(-1.4deg)}
.rv.in.quote-media{transform:rotate(1.6deg)}
.rv.in.location-media{transform:rotate(-1.2deg)}
.rv.in.job-main{transform:rotate(-.6deg)}
.rv.in.apply-form-wrap{transform:rotate(.5deg)}
.jobs-row .rv.in.job-side:nth-child(1){transform:rotate(.9deg)}
.jobs-row .rv.in.job-side:nth-child(2){transform:rotate(-1deg)}

@media (prefers-reduced-motion: reduce){
  .rv{opacity:1;transform:none;transition:none}
  .mark::after{transform:skewX(-12deg) scaleX(1)}
}

@media (max-width: 700px){
  /* auf dem Handy ruhiger: weniger Drehung, sonst wirkt es unsauber */
  .stat,.reason,.benefit,.area,.job-main,.job-side,
  .about-media,.quote-media,.location-media,.apply-form-wrap,
  .team-photos figure{transform:none !important}
  .rv.in{transform:none !important}
}


/* ═══════════════════════════════════════════════════════════════════════════
   DREI HERO-HINTERGRUENDE ZUR AUSWAHL
   Umschaltbar ueber eine Klasse auf <body>. Nach der Entscheidung bleibt
   eine davon fest im Stylesheet, der Rest fliegt raus.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   HERO
   Kein eigener Farbblock: Der Hero traegt dieselbe Wand wie die ganze Seite.
   Damit entfaellt der Uebergang komplett – die Pinnwand haengt durchgehend
   an einer Wand, statt auf einem Farbfeld zu schweben.
   ═══════════════════════════════════════════════════════════════════════════ */

.hero-w{background:transparent}
/* ── Uebergang Kopfzeile → Wand ────────────────────────────────────────────
   Die Kopfzeile ist reines Weiss, die Wand darunter ein warmer Holzton.
   Dazwischen stand eine harte Kante quer ueber den ganzen Schirm.

   Der Verlauf liegt IM Hero, nicht an der Kopfzeile. Damit bleibt die
   Kopfzeile unangetastet die Replik der Hauptseite.

   z-index 1 setzt ihn ueber die Wand, aber unter Fotos und Aushang – die
   liegen auf 2 und bleiben dadurch klar, statt im Nebel zu stehen.

   Die Stopps folgen einer halben Kosinuswelle statt einer Geraden. Ein
   linearer Alphaverlauf hat in der Mitte eine sichtbare Kante, weil das
   Auge Helligkeit nicht linear wahrnimmt.                                 */
.hero-w::before{
  content:"";position:absolute;left:0;right:0;top:0;
  height:clamp(130px,17vh,250px);
  z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,.99) 6.25%,
    rgba(255,255,255,.962) 12.5%,
    rgba(255,255,255,.916) 18.75%,
    rgba(255,255,255,.854) 25%,
    rgba(255,255,255,.778) 31.25%,
    rgba(255,255,255,.691) 37.5%,
    rgba(255,255,255,.598) 43.75%,
    rgba(255,255,255,.5) 50%,
    rgba(255,255,255,.402) 56.25%,
    rgba(255,255,255,.309) 62.5%,
    rgba(255,255,255,.222) 68.75%,
    rgba(255,255,255,.146) 75%,
    rgba(255,255,255,.084) 81.25%,
    rgba(255,255,255,.038) 87.5%,
    rgba(255,255,255,.01) 93.75%,
    rgba(255,255,255,0) 100%);
}

.hw-board,.hw-strip{position:relative;z-index:2}
.hw-strip{margin-bottom:clamp(30px,3.4vw,52px)}

/* ═══════════════════════════════════════════════════════════════════════════
   DIE WAND UND IHR LICHT

   Kachel: Holzstapel aus dem Shooting, stark weichgezeichnet und aufgehellt.
   Sie ist waagrecht wie senkrecht gespiegelt aufgebaut, dadurch sind ihre
   gegenueberliegenden Kanten identisch und es entsteht keine Fuge. Sie
   wiederholt sich nur senkrecht, weil Bretter waagrecht laufen.

   Licht: eine feste Flaeche ueber der Kachel, hell von oben aus der Mitte,
   zu den Raendern und nach unten faellt es ab. Ohne sie liegt die Wand
   gleichmaessig flach da und die weissen Zettel stehen in derselben Ebene
   wie ihr Untergrund; mit ihr woelbt sich die Wand und die Zettel stehen
   davor. Die Ecken sind rund 13 Punkte dunkler als die Mitte.

   Beides gehoert zusammen und steht deshalb in einem Block. Vorher war
   body::before zweimal deklariert – weiter oben mit display:none, hier mit
   dem Farbwert. Bei gleicher Spezifitaet entscheidet CSS pro Eigenschaft,
   also blieb display:none stehen und die Flaeche hat nie gerendert.
   ═══════════════════════════════════════════════════════════════════════════ */

body{
  background:#f4eee5 url("../assets/img/wall-holz.webp") top center / 100% auto repeat-y fixed;
}
body::before{
  content:"";display:block;
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(88% 62% at 50% -6%,
      rgba(255,255,255,.72) 0%, rgba(255,255,255,.28) 42%, rgba(255,255,255,0) 72%),
    radial-gradient(120% 88% at 50% 42%,
      rgba(94,64,36,0) 46%, rgba(94,64,36,.10) 78%, rgba(94,64,36,.19) 100%);
}


/* ═══════════════════════════════════════════════════════════════════════════
   EINTRITT UND ZEILEN
   Zwei Bewegungen, beide nur mit JavaScript aktiv (.js) und beide bei
   reduzierter Bewegung abgeschaltet.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Zeilen steigen hinter einer Maske hervor ──────────────────────────────
   Jede Zeile bekommt einen Rahmen mit overflow:hidden, der Inhalt startet
   darunter und faehrt hoch. Die Zeilen sind im Markup mit <br> gesetzt,
   deshalb muss nichts gemessen und nichts zerlegt werden.
   Der Innenabstand faengt Unterlaengen ab (g, j, p), die sonst an der
   Maskenkante abgeschnitten wuerden.                                       */
/* Der Innenabstand faengt die Unterlaengen ab (g, j, p). Mit .09em war er
   zu knapp: die Schlagzeile laeuft auf line-height .96, dadurch ragt das j
   von "jeder." unter die Zeilenbox und wurde von der Maske abgeschnitten.
   Der negative Aussenabstand haelt die Zeilenhoehe unveraendert. */
.js .ln{display:block;overflow:hidden;padding-bottom:.24em;margin-bottom:-.24em}
.js .ln-i{
  display:block;
  transform:translateY(108%);
  transition:transform .95s var(--spring);
}
.js .lines-in .ln-i{transform:translateY(0)}

/* ── Hero: die Sachen kommen an die Wand ───────────────────────────────────
   Der Aushang zuerst, danach die vier Abzuege einzeln, zuletzt die Zettel.
   Jedes Foto behaelt seine Enddrehung, der Eintritt legt nur Weg und
   Massstab davor – sonst wuerde die Drehung beim Ankommen zurueckspringen. */
.js .hero-w .hw-note,
.js .hero-w .hw-shot,
.js .hero-w .hw-strip span{opacity:0}

.js .hero-w .hw-note{
  transform:rotate(-.8deg) translateY(30px) scale(.972);
  transition:opacity .7s var(--spring), transform .9s var(--spring);
}
.js .hero-w .hw-shot{
  transition:opacity .66s var(--spring), transform .86s var(--spring-bounce);
}
.js .hero-w .hw-1{transform:rotate(-11deg) translate(-26px,-30px) scale(.9)}
.js .hero-w .hw-2{transform:rotate(10deg)  translate(-30px, 34px) scale(.9)}
.js .hero-w .hw-3{transform:rotate(11deg)  translate( 28px,-32px) scale(.9)}
.js .hero-w .hw-4{transform:rotate(-10deg) translate( 30px, 30px) scale(.9)}
.js .hero-w .hw-strip span{
  transform:translateY(14px);
  transition:opacity .5s var(--spring), transform .6s var(--spring);
}

/* Endzustand – die Drehungen aus dem Grundlayout, jetzt ohne Versatz */
.js .hero-w.hero-in .hw-note{opacity:1;transform:rotate(-.8deg)}
.js .hero-w.hero-in .hw-1{opacity:1;transform:rotate(-5deg)}
.js .hero-w.hero-in .hw-2{opacity:1;transform:rotate(3.5deg)}
.js .hero-w.hero-in .hw-3{opacity:1;transform:rotate(4.2deg)}
.js .hero-w.hero-in .hw-4{opacity:1;transform:rotate(-3.4deg)}
.js .hero-w.hero-in .hw-strip span{opacity:1;transform:none}
/* Die feste Schraeglage der Zettel bleibt erhalten */
.js .hero-w.hero-in .hw-strip span:nth-child(2n){transform:rotate(1.4deg)}
.js .hero-w.hero-in .hw-strip span:nth-child(3n){transform:rotate(-1.6deg)}

/* ── Tiefe: die beiden Fotospalten wandern beim Scrollen unterschiedlich ──
   --py wird im Skript gesetzt. Der Grundversatz von -50% bleibt erhalten,
   deshalb steht er im calc und wird nicht ueberschrieben.                  */
.hw-col{transform:translateY(calc(-50% + var(--py, 0px)))}

/* ── Aufklappen der Fragen ────────────────────────────────────────────────
   Der Rahmen wird im Skript eingezogen und seine Hoehe animiert. Hoehe ist
   eine Layout-Eigenschaft, aber ein Aufklapper hat keine Entsprechung auf
   der GPU, die den Textfluss erhaelt. Laeuft nur auf Klick, nie beim
   Scrollen.                                                                */
.faq-body{overflow:hidden}

@media (prefers-reduced-motion: reduce){
  .js .ln-i{transform:none;transition:none}
  .js .hero-w .hw-note,
  .js .hero-w .hw-shot,
  .js .hero-w .hw-strip span{opacity:1;transition:none}
  .js .hero-w .hw-note{transform:rotate(-.8deg)}
  .js .hero-w .hw-1{transform:rotate(-5deg)}
  .js .hero-w .hw-2{transform:rotate(3.5deg)}
  .js .hero-w .hw-3{transform:rotate(4.2deg)}
  .js .hero-w .hw-4{transform:rotate(-3.4deg)}
  .js .hero-w .hw-strip span{transform:none}
}

/* ═══ Zeitleiste an der Wand ══════════════════════════════════════════════ */
.tl-kicker{color:var(--body-soft)}
.tl-track::before{background:var(--line-strong)}
.tl-marker{box-shadow:0 3px 7px -3px rgba(40,24,12,.5)}
.tl-close strong{color:var(--ink)}

/* CTA-Zeile: die Trennlinie tritt auf der Wand etwas zurueck */
.cta-row{border-top-color:var(--line)}
.cta-row p{color:var(--ink)}