/* ==========================================================================
   Bewerber-Landingpage — Arztpraxis Dr. med. Maike Klingler, Oldenburg
   Zwei Hälften: oben die ruhige Praxis-Marke, unten der Collage-Look.
   Farb- und Raumlogik übernommen aus ../tokens.css (Scrape des Originals).
   ========================================================================== */

/* --- Schriften, lokal. Instrument Serif + Archivo, beide OFL. ------------- */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/InstrumentSerif-normal-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/InstrumentSerif-normal-400-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:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url('fonts/InstrumentSerif-italic-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url('fonts/InstrumentSerif-italic-400-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:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/Archivo-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/Archivo-var-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;}

/* --- Token ---------------------------------------------------------------- */
:root{
  --rot:#D6281A;
  --rot-tief:#CC0000;
  --papier:#F9F9F5;
  --papier-warm:#F6F6F1;
  --sand:#F1F1EB;
  --weiss:#FFFFFF;
  --text:#333333;
  --stark:#111111;
  --leise:#666666;
  --linie:#DDDDDD;
  --stahl:#657383;
  --stahl-text:#4F5B69;  /* dunkler Variante fürs Kleingedruckte, 4.5:1 */
  --rot-text:#AF1F10;    /* dunkleres Rot für Kleintext auf getönter Fläche */

  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Archivo',-apple-system,'Helvetica Neue',Helvetica,Arial,sans-serif;

  --sp-marke:0.22em;   /* Signatur der Marke: weites Letterspacing */
  --sp-label:3px;

  --breite:1180px;
  --rahmen:10px;       /* der weiße Bildrand des Originals */
  --luft:clamp(3.5rem,9vw,8rem);

  /* Papierkorn, als Textur über die lauten Flächen */
  --korn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

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

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--papier-warm);
  color:var(--text);
  font-family:var(--sans);
  font-size:clamp(1rem,0.96rem + 0.25vw,1.125rem);
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--rot);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--stark)}

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

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.sprungmarke{
  position:fixed;top:0;left:50%;transform:translate(-50%,-120%);
  z-index:99;background:var(--rot);color:#fff;padding:.7rem 1.3rem;
  font-weight:700;font-size:.9rem;text-decoration:none;
  transition:transform .18s ease;
}
.sprungmarke:focus{transform:translate(-50%,0);color:#fff}

/* --- Bausteine ----------------------------------------------------------- */
.etikett{
  font-family:var(--sans);font-weight:600;text-transform:uppercase;
  letter-spacing:var(--sp-marke);font-size:.66rem;line-height:1.5;
  color:var(--leise);margin:0 0 1.1rem;
}
.etikett--rot{color:var(--rot)}
.etikett--weiss{color:rgba(255,255,255,.86)}
.etikett--mini{font-size:.58rem;letter-spacing:var(--sp-label);color:var(--leise);display:block;margin:0 0 .25rem}

.h2{margin:0 0 1.4rem;line-height:.9;text-wrap:balance}
.h2__caps{
  display:block;font-family:var(--sans);font-weight:900;
  text-transform:uppercase;letter-spacing:-.025em;
  font-size:clamp(2rem,7.4vw,4.5rem);color:var(--stark);
}
.h2__kursiv{
  display:block;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(2.9rem,11vw,6.6rem);color:var(--rot);
  letter-spacing:-.015em;margin-top:-.06em;
}
.h2--klein .h2__caps{font-size:clamp(1.5rem,4.6vw,2.3rem)}
.h2--klein .h2__kursiv{font-size:clamp(2.1rem,6.4vw,3.4rem)}

.h3{font-family:var(--sans);font-weight:700;font-size:1.02rem;
  text-transform:uppercase;letter-spacing:var(--sp-label);
  color:var(--stark);margin:0 0 1.1rem;padding-bottom:.6rem;
  border-bottom:2px solid var(--rot);
}
.h4{font-family:var(--sans);font-weight:700;font-size:.72rem;
  text-transform:uppercase;letter-spacing:var(--sp-marke);
  color:var(--stark);margin:0 0 .8rem}

.fliess{margin:0 0 1.5rem;max-width:46ch;color:var(--text)}
.fliess--eng{max-width:38ch}
.leise{color:var(--leise);font-size:.86em}
.notiz{
  font-size:.88rem;line-height:1.6;color:var(--leise);
  border-left:2px solid var(--rot);padding-left:1rem;margin:0;max-width:34ch;
}

.platzhalter{
  display:inline-block;font-family:var(--sans);font-weight:600;font-size:.8em;
  color:var(--rot-text);background:rgba(214,40,26,.06);
  border:1px dashed var(--rot);border-radius:2px;
  padding:.1em .45em;letter-spacing:.01em;
}
.quelle{font-size:.79rem;line-height:1.55;color:var(--leise);margin:1.2rem 0 0;max-width:42ch}
.quelle--warn{border-top:1px solid var(--linie);padding-top:.9rem}

/* Bilder: weißer 10px-Rand statt Schatten. Nie ein Farbfilter darüber. */
.bild{margin:0;position:relative}
.bild--rahmen img{border:var(--rahmen) solid var(--weiss);background:var(--weiss)}
.bild figcaption{
  font-family:var(--sans);font-size:.78rem;letter-spacing:.01em;
  color:var(--leise);margin-top:.6rem;max-width:32ch;
}

/* Rot ist immer Bauteil, nie Schleier. */
.rotblock{display:block;background:var(--rot);position:absolute;pointer-events:none;z-index:0}
.linie{display:block;position:absolute;pointer-events:none}
.linie--rot{height:3px;background:var(--rot-tief)}
.kreis{
  display:block;position:absolute;pointer-events:none;
  border:9px solid var(--rot);border-radius:50%;aspect-ratio:1;
}

.knopf{
  display:inline-block;background:var(--rot);color:#fff;
  font-family:var(--sans);font-weight:700;font-size:.86rem;
  text-transform:uppercase;letter-spacing:var(--sp-label);
  padding:1rem 1.9rem;text-decoration:none;border:2px solid var(--rot);
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.knopf:hover{background:var(--stark);border-color:var(--stark);color:#fff;transform:translateY(-2px)}
.knopf--leise{background:transparent;color:var(--stark);border-color:var(--stark)}
.knopf--leise:hover{background:var(--stark);color:#fff}
.knopf--gross{font-size:.95rem;padding:1.15rem 2.4rem;cursor:pointer;width:100%}
.knopfreihe{display:flex;flex-wrap:wrap;gap:.8rem;margin:2.2rem 0 0}

/* ==========================================================================
   KOPF
   ========================================================================== */
.kopf{
  position:sticky;top:0;z-index:40;
  background:rgba(249,249,245,.94);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--linie);
}
.kopf__innen{
  max-width:var(--breite);margin:0 auto;
  padding:.7rem clamp(1.1rem,4vw,2.5rem);
  display:flex;align-items:center;gap:1rem;
}
.kopf__marke{display:block;flex:0 0 auto;line-height:0}
.kopf__marke img{width:clamp(104px,26vw,150px);height:auto}
.kopf__ort{
  margin:0;flex:1 1 auto;display:none;gap:.6rem;
  font-size:.66rem;font-weight:600;text-transform:uppercase;
  letter-spacing:var(--sp-marke);color:var(--leise);
}
.kopf__cta{
  flex:0 0 auto;margin-left:auto;
  font-family:var(--sans);font-weight:700;font-size:.7rem;
  text-transform:uppercase;letter-spacing:var(--sp-label);
  color:#fff;background:var(--rot);text-decoration:none;
  /* mind. 44px Tippfläche fürs Handy */
  min-height:44px;padding:0 1.15rem;display:inline-flex;align-items:center;
}
.kopf__cta:hover{background:var(--stark);color:#fff}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  max-width:var(--breite);margin:0 auto;
  padding:clamp(2.4rem,7vw,5rem) clamp(1.1rem,4vw,2.5rem) clamp(4rem,9vw,6rem);
  position:relative;
}
.hero__vorlauf{
  font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,3.4vw,1.4rem);
  color:var(--leise);margin:0 0 .5rem;
}
.titel{margin:0 0 1.6rem;line-height:.86}
.titel__zeile1{
  display:block;font-family:var(--sans);font-weight:900;
  text-transform:uppercase;letter-spacing:-.03em;
  font-size:clamp(1.8rem,8.6vw,3.6rem);color:var(--stark);
}
.titel__riesig{
  display:block;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(3.1rem,15.5vw,7.4rem);line-height:.82;
  letter-spacing:-.022em;color:var(--rot);margin:.04em 0 .1em -.02em;
}
.titel__zeile3{
  display:block;font-family:var(--sans);font-weight:500;
  font-size:clamp(.95rem,3.2vw,1.2rem);line-height:1.35;
  letter-spacing:.01em;color:var(--stark);max-width:22ch;
}
.hero__text{margin:0;max-width:40ch;font-size:1.02em}
.hero__text strong{font-weight:700;color:var(--stark)}

.hero__bild{position:relative;margin-top:clamp(3.4rem,10vw,4rem);z-index:1}
.hero__bild .bild{position:relative;z-index:2}
/* Rot als massiver Block hinter dem Foto — harte Kante, kein Schleier. */
.rotblock--hero{
  width:44%;aspect-ratio:1.05;top:-1.9rem;right:-.9rem;
}
.hero__trauben{
  position:absolute;z-index:3;width:38%;left:0;bottom:-11%;
}
/* Zweites Hero-Bild, 11.09.2026: gleiche Position wie das alte Traubenbild,
   aber im Querformat (Sonogeraet) — darum etwas breiter und tiefer gesetzt. */
.hero__nebenbild{
  position:absolute;z-index:3;width:46%;left:0;bottom:-9%;
}
.hero__nebenbild figcaption{max-width:26ch}

/* ==========================================================================
   FAKTENBAND
   ========================================================================== */
.band{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);background:var(--papier)}
.band__liste{
  max-width:var(--breite);margin:0 auto;
  padding:clamp(1.6rem,4vw,2.4rem) clamp(1.1rem,4vw,2.5rem);
  display:grid;gap:1.4rem clamp(1.5rem,4vw,3rem);
}
.band__liste dt{
  font-size:.62rem;font-weight:700;text-transform:uppercase;
  letter-spacing:var(--sp-marke);color:var(--rot);margin-bottom:.3rem;
}
.band__liste dd{margin:0;font-size:.92rem;line-height:1.45;color:var(--stark)}

/* ==========================================================================
   ARBEITSPLATZ — Bildstrecken, dicht und immer versetzt
   ========================================================================== */
.arbeitsplatz{
  max-width:var(--breite);margin:0 auto;
  padding:var(--luft) clamp(1.1rem,4vw,2.5rem) 0;
}
.arbeitsplatz__kopf{max-width:52ch;margin-bottom:clamp(2.2rem,6vw,3.4rem)}
.arbeitsplatz__kopf .h2__kursiv{color:var(--stark)}

.strecke{position:relative;margin-bottom:clamp(2.6rem,7vw,4.2rem)}
.strecke .bild{margin-bottom:1.2rem}
/* Eigener Stapel pro Bild, damit die roten Bauteile IMMER dahinter liegen —
   sonst deckt der Block die Bildunterschrift zu. */
.strecke > figure{position:relative;z-index:2}

.zwischen{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(1.05rem,4vw,1.5rem);line-height:1.32;
  color:var(--stark);margin:0 0 1.4rem;max-width:26ch;
}
.zwischen__kursiv{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:1.7em;line-height:.9;color:var(--rot);display:block;
  letter-spacing:-.015em;margin-bottom:.06em;
}
.zwischen__leise{display:block;margin-top:.7rem;font-weight:400;
  font-size:.62em;color:var(--leise);letter-spacing:.01em}

/* Mobil: gestapelt, aber versetzt und unterschiedlich groß. Nie paarweise. */
.s-a1{width:92%}
.s-a2{width:54%;margin-left:auto;margin-top:-2.2rem;position:relative;z-index:2}
.s-a3{margin-top:.6rem}
.s-b1{width:56%}
.s-b2{width:82%;margin-left:auto;margin-top:-3rem;position:relative;z-index:2}
.s-c1{width:88%;margin-left:auto}
.s-c2{width:52%;margin-top:-2.6rem;position:relative;z-index:2}
.s-d1{width:94%}
.s-d2{width:50%;margin-left:auto;margin-top:-2.4rem;position:relative;z-index:2}
.s-d3{margin-top:.4rem}

/* Strecken mit Bildern von der Praxis-Website: Haus, Räume, EKG-Raum.
   Gleiche Regeln wie überall — versetzt, ungleich groß, kein Bildpaar
   auf gleicher Höhe bei gleicher Breite. */
.s-h1{width:80%}
.s-h2{width:62%;margin-left:auto;margin-top:-1.8rem;position:relative;z-index:2}
.s-r1{width:86%;margin-left:auto}
.s-r2{width:50%;margin-top:-2.4rem;position:relative;z-index:2}
.s-c3{width:96%;margin-top:1.4rem}

.strecke--a .linie--rot{width:26%;left:0;bottom:14%;z-index:3}
.strecke--b .kreis{width:24%;right:2%;top:2%;z-index:3;opacity:.9}
/* Der Block sitzt hinter der oberen Bildkante — NICHT unter der
   Bildunterschrift: grauer Text auf Rot war unlesbar (Beleg-Runde 3). */
.strecke--d .rotblock--d{width:34%;aspect-ratio:1.3;right:-2%;left:auto;top:-1.2rem;z-index:0}

/* ==========================================================================
   DIE STELLE
   ========================================================================== */
.stelle{
  max-width:var(--breite);margin:0 auto;
  padding:var(--luft) clamp(1.1rem,4vw,2.5rem);
}
.stelle__kopf{margin-bottom:clamp(2rem,5vw,3rem)}
.stelle__spalten{display:grid;gap:clamp(2.4rem,6vw,4rem)}

.liste{list-style:none;margin:0;padding:0}
.liste li{
  position:relative;padding-left:1.6rem;margin-bottom:.85rem;
  font-size:.97rem;line-height:1.55;
}
.liste li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:.65rem;height:3px;background:var(--rot);
}

.rahmen{margin:0;display:grid;gap:0}
.rahmen dt{
  font-size:.62rem;font-weight:700;text-transform:uppercase;
  letter-spacing:var(--sp-marke);color:var(--leise);
  padding-top:.9rem;border-top:1px solid var(--linie);
}
.rahmen dt:first-of-type{border-top:0;padding-top:0}
.rahmen dd{margin:.3rem 0 1rem;font-size:.95rem;line-height:1.5;color:var(--stark)}

/* ==========================================================================
   DER KIPPPUNKT — die einzige Stelle, an der Rot die volle Breite nimmt
   ========================================================================== */
.kipp{
  position:relative;overflow:hidden;
  background:var(--rot);
  /* Fußraum groß genug für Megafon und Pfeil — bei 480/600px stiessen sie
     sonst in die Schlagzeile (Breiten-Sweep 320–1920). */
  padding:clamp(4.5rem,14vw,9rem) clamp(1.1rem,4vw,2.5rem) clamp(12rem,24vw,13rem);
  isolation:isolate;
}
.kipp::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:var(--korn);background-size:180px;
  opacity:.16;mix-blend-mode:multiply;
}
.kipp__titel{
  position:relative;z-index:3;
  max-width:var(--breite);margin:0 auto;line-height:.84;
}
.kipp__caps{
  display:block;font-family:var(--sans);font-weight:900;
  text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(1.5rem,6.4vw,3.2rem);color:#fff;
}
.kipp__caps--rechts{text-align:right;margin-top:.42em}
.kipp__riesig{
  display:block;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(5.5rem,28vw,17rem);line-height:.86;
  letter-spacing:-.03em;color:var(--stark);
  margin:.02em 0 0 -.03em;
}
.kipp .etikett{position:relative;z-index:3;max-width:var(--breite);margin:0 auto 1.2rem}

.kipp__teil{
  display:block;position:absolute;z-index:2;pointer-events:none;
  background:var(--bild) center/contain no-repeat;
}
.kipp__teil--stern{width:min(120px,22vw);aspect-ratio:1;top:6%;right:5%}
/* Abstand in rem, nicht in %: sonst wandern die Bauteile mit der
   Sektionshöhe in die Schlagzeile hinein (bei 390px gemessen). */
.kipp__teil--megafon{width:min(200px,38vw);aspect-ratio:1.34;bottom:1rem;right:-2%;--dreh:-8deg}
.kipp__teil--pfeil{width:min(150px,30vw);aspect-ratio:2.83;bottom:1.2rem;left:4%;--dreh:6deg}

/* ==========================================================================
   COLLAGE — untere Hälfte, Anzeigen-Handschrift
   ========================================================================== */
.collage{
  position:relative;overflow:hidden;background:var(--rot);
  padding:clamp(2rem,6vw,3rem) clamp(1.1rem,4vw,2.5rem) clamp(4rem,10vw,7rem);
  isolation:isolate;
}
.collage::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:var(--korn);background-size:180px;opacity:.18;mix-blend-mode:multiply;
}
.collage__halbton{
  display:block;position:absolute;z-index:1;pointer-events:none;
  background:var(--bild) center/cover no-repeat;
  width:min(420px,64vw);aspect-ratio:1;top:6%;left:-8%;opacity:.5;
}
.collage__kringel,.collage__teil{
  display:block;position:absolute;z-index:4;pointer-events:none;
  background:var(--bild) center/contain no-repeat;
}
/* Der rote Kreidekringel wäre auf rotem Grund unsichtbar — auf schwarz
   gezogen bleibt die Kreidekante, und das Bauteil liest sich. */
/* z-index 1: der Kringel läuft HINTER Aufklebern und Textkästen durch —
   sonst legt er sich bei 900–1024px über den Kastentext. */
.collage__kringel{width:min(250px,50vw);aspect-ratio:1.05;top:1%;right:-9%;
  z-index:1;filter:brightness(0)}
.collage__teil--auge{width:min(150px,30vw);aspect-ratio:1.69;left:2%;bottom:26%;--dreh:-7deg}
.collage__teil--daumen{width:min(120px,24vw);aspect-ratio:1.08;right:4%;bottom:10%;--dreh:12deg}
.collage__teil--blase{
  width:min(200px,42vw);aspect-ratio:1.4;left:-3%;top:37%;
  display:grid;place-items:center;--dreh:5deg;
}
.collage__blasentext{
  font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,5.4vw,2.4rem);
  color:var(--rot);transform:translateY(-9%) rotate(-4deg);
}

/* Aufkleber: Foto in Farbe, weißer Sticker-Rand, harte Kante, schräg. */
.aufkleber{
  position:relative;z-index:3;margin:0 0 clamp(1.4rem,4vw,2.2rem);
}
.aufkleber img{
  border:8px solid var(--weiss);background:var(--weiss);
  box-shadow:7px 9px 0 rgba(17,17,17,.2);
}
.aufkleber--1{width:74%;--dreh:-3deg}
.aufkleber--2{width:48%;margin-left:auto;margin-top:-1.4rem;--dreh:2.6deg}
.aufkleber--3{width:66%;margin-top:-1rem;--dreh:-1.4deg}

/* Schräge weiße Textkästen, wie in der Anzeigen-Vorlage */
.kasten{
  position:relative;z-index:5;
  display:inline-block;background:var(--weiss);color:var(--rot);
  font-family:var(--sans);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.05rem,5vw,1.9rem);line-height:1.02;letter-spacing:-.02em;
  padding:.5em .7em;margin:0 0 .9rem;
  box-shadow:6px 7px 0 rgba(17,17,17,.22);
}
.kasten--1{--dreh:-4deg}
.kasten--2{--dreh:2.4deg;margin-left:12%}
.kasten--3{--dreh:-2deg;margin-left:4%}

/* ==========================================================================
   BEWERBUNG
   ========================================================================== */
.bewerbung{
  position:relative;background:var(--rot);
  padding:0 clamp(1.1rem,4vw,2.5rem) clamp(4rem,10vw,7rem);
  overflow:hidden;
}
.bewerbung__hand{
  display:block;position:absolute;z-index:1;pointer-events:none;
  background:var(--bild) center/contain no-repeat;
  width:min(190px,36vw);aspect-ratio:1.79;left:-4%;bottom:8%;--dreh:-6deg;
}
.karte{
  position:relative;z-index:2;
  max-width:720px;margin:0 auto;
  background:var(--papier);
  padding:clamp(1.6rem,5vw,3rem) clamp(1.2rem,4.5vw,2.8rem) clamp(2rem,5vw,3rem);
  --dreh:-.4deg;
  box-shadow:10px 14px 0 rgba(17,17,17,.18);
}
.karte__band{
  display:block;position:absolute;
  width:min(160px,38%);aspect-ratio:1.98;
  top:-24px;right:9%;transform:rotate(-3deg);
  background:var(--bild) center/contain no-repeat;
  pointer-events:none;
}

.formular{margin-top:1.6rem;display:grid;gap:1.15rem}
.formular__endpunkt{
  margin:0;padding:.7rem .85rem;background:var(--sand);
  border-left:3px solid var(--stahl);
}
.formular__endpunkt code{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.72rem;color:var(--stahl-text);word-break:break-all;
}

.feld{display:grid;gap:.4rem}
.feld label{
  font-family:var(--sans);font-weight:700;font-size:.7rem;
  text-transform:uppercase;letter-spacing:var(--sp-label);color:var(--stark);
}
.feld label .leise{text-transform:none;letter-spacing:.01em;font-weight:500}
.feld abbr{color:var(--rot);text-decoration:none;margin-left:.15em}

.feld input[type=text],.feld input[type=email],.feld input[type=tel],.feld textarea{
  font-family:var(--sans);font-size:1rem;color:var(--stark);
  background:var(--weiss);border:1px solid var(--linie);
  border-bottom:2px solid var(--stark);
  padding:.8rem .85rem;width:100%;
  transition:border-color .15s ease,background .15s ease;
}
.feld input:hover,.feld textarea:hover{border-bottom-color:var(--rot)}
.feld textarea{resize:vertical;line-height:1.55}
.feld input[type=file]{
  font-size:.84rem;padding:.7rem .85rem;width:100%;
  background:var(--weiss);border:1px dashed var(--linie);border-bottom:2px solid var(--stark);
}
.feld input[type=file]::file-selector-button{
  font-family:var(--sans);font-weight:700;font-size:.68rem;
  text-transform:uppercase;letter-spacing:var(--sp-label);
  background:var(--sand);color:var(--stark);border:1px solid var(--stark);
  padding:.45rem .8rem;margin-right:.8rem;cursor:pointer;
}
.feld input[type=file]::file-selector-button:hover{background:var(--stark);color:#fff}
.feld input[aria-invalid=true]{border-color:var(--rot);border-bottom-color:var(--rot);background:rgba(214,40,26,.05)}

.feld--kasten{grid-template-columns:auto 1fr;align-items:start;gap:.7rem;
  background:var(--sand);padding:.95rem 1rem;margin-top:.3rem}
.feld--kasten input{margin-top:.28em;width:1.15rem;height:1.15rem;accent-color:var(--rot)}
.feld--kasten label{text-transform:none;letter-spacing:.01em;font-weight:500;
  font-size:.86rem;line-height:1.5}
.feld--kasten .fehler{grid-column:1 / -1}

.hinweis{margin:0;font-size:.76rem;color:var(--leise)}
.fehler{margin:0;font-size:.8rem;font-weight:600;color:var(--rot-text)}

.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.formular__status{margin:0;font-size:.95rem;font-weight:600;color:var(--stark)}
.formular__status:not(:empty){
  background:var(--weiss);border-left:4px solid var(--rot);padding:.9rem 1rem;
}

@media (min-width:520px){
  .formular{grid-template-columns:1fr 1fr}
  .feld,.formular__endpunkt,.formular__status,.knopf--gross,.feld--kasten{grid-column:1 / -1}
  .feld--halb{grid-column:auto}
}

/* ==========================================================================
   FUSS
   ========================================================================== */
.fuss{background:var(--papier);border-top:8px solid var(--rot)}
.fuss__innen{
  max-width:var(--breite);margin:0 auto;
  padding:clamp(2.6rem,7vw,4rem) clamp(1.1rem,4vw,2.5rem) 2rem;
  display:grid;gap:2.4rem;
}
.fuss__marke img{width:clamp(140px,34vw,180px);margin-bottom:1.1rem}
.fuss__adresse{margin:0;font-size:.92rem;line-height:1.6}
.fuss__kontakt p,.fuss__zeiten p{margin:0;font-size:.92rem;line-height:1.7}
.fuss__zeiten table{border-collapse:collapse;font-size:.9rem;margin-bottom:.8rem}
.fuss__zeiten th{
  text-align:left;font-weight:700;color:var(--rot);
  padding:.16rem 1rem .16rem 0;font-size:.72rem;
  text-transform:uppercase;letter-spacing:var(--sp-label);
  vertical-align:baseline;
}
.fuss__zeiten td{padding:.16rem 0;color:var(--stark);font-variant-numeric:tabular-nums}
.fuss__unten{
  border-top:1px solid var(--linie);
  max-width:var(--breite);margin:0 auto;
  padding:1.3rem clamp(1.1rem,4vw,2.5rem) 2.4rem;
}
.fuss__unten p{margin:0 0 .6rem}
.fuss__unten .platzhalter{margin-right:.5rem}

/* ==========================================================================
   AUFTRITT — gestaffelte Einblendung, Parallax
   ========================================================================== */
/* Eine einzige transform-Formel für alles, was schiebt oder schief steht:
   --py kommt aus app.js (Parallax), --dreh steht statisch im CSS.
   So kollidiert das Skript nie mit einer Drehung. */
[data-parallax],
.aufkleber,.kasten,.kipp__teil,.collage__teil,.collage__kringel,
.collage__halbton,.bewerbung__hand,.karte{
  transform:translate3d(0,var(--py,0px),0) rotate(var(--dreh,0deg));
}
/* will-change nur am großen Schirm: auf dem Handy erzeugen 26 gleichzeitige
   Compositor-Ebenen Flackern statt Flüssigkeit. */
@media (min-width:880px){
  [data-parallax]{will-change:transform}
}

/* Einblendung: Textblöcke bewegen sich, gedrehte Bauteile blenden nur auf.
   Dadurch bleibt die transform-Formel oben unangetastet. */
.animiert .zeigen{opacity:0;transition:opacity .75s cubic-bezier(.2,.7,.3,1)}
.animiert .zeigen.sichtbar{opacity:1}
.animiert .zeigen--text{transform:translateY(24px);
  transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1)}
.animiert .zeigen--text.sichtbar{transform:none}

/* ==========================================================================
   AB 640 px
   ========================================================================== */
@media (min-width:640px){
  .band__liste{grid-template-columns:repeat(2,1fr)}
  .s-a1{width:64%}
  .s-a2{width:36%;margin-top:-6rem}
  .s-b1{width:38%}
  .s-b2{width:58%;margin-top:-8rem}
  .s-c1{width:62%}
  .s-c2{width:36%;margin-top:-5rem;margin-left:6%}
  .s-d1{width:70%}
  .s-d2{width:34%;margin-top:-8rem}
  .s-h1{width:58%}
  .s-h2{width:38%;margin-top:-5rem}
  .s-r1{width:60%}
  .s-r2{width:34%;margin-top:-4rem;margin-left:4%}
  .s-c3{width:78%;margin-left:auto}
  /* bei 768px lag der Daumen sonst auf dem Textkasten */
  .collage__teil--daumen{right:1%;bottom:1.5%}
  .kasten{max-width:74%}
}

/* ==========================================================================
   AB 880 px — asymmetrisches Raster, echte Versetzung
   ========================================================================== */
@media (min-width:880px){
  .kopf__ort{display:flex;justify-content:center}

  .hero{
    display:grid;grid-template-columns:minmax(0,1.34fr) minmax(0,1fr);
    gap:clamp(1.6rem,3vw,3rem);align-items:start;
  }
  .hero__satz{padding-top:clamp(1rem,4vw,3.5rem)}
  /* Das Riesenwort darf über die Spaltenkante hinaus — aber es darf nie
     vom Foto angeschnitten werden. Deshalb hier ein eigener Deckel. */
  .titel__riesig{font-size:clamp(3.4rem,7.6vw,6.1rem)}
  .hero__bild{margin-top:clamp(4rem,8vw,7rem)}
  .hero__trauben{width:38%;left:-18%;bottom:-13%}
  .hero__nebenbild{width:52%;left:-20%;bottom:-10%}
  .rotblock--hero{width:46%;aspect-ratio:1;top:-2.6rem;right:-1.8rem}

  .band__liste{grid-template-columns:repeat(4,1fr)}

  .strecke{display:grid;grid-template-columns:repeat(12,1fr);
    gap:0 clamp(14px,1.8vw,26px);align-items:start}
  .strecke .bild{margin-bottom:0}
  /* nur die Inhalts-Elemente zurücksetzen — die dekorativen <span> stehen
     absolut und behalten ihre eigenen Maße */
  .strecke > figure,.strecke > p{width:auto;margin-left:0;margin-right:0}

  .strecke--a{margin-bottom:clamp(3.5rem,7vw,6rem)}
  .s-a1{grid-column:1 / span 6;grid-row:1;margin-top:0 !important}
  .s-a2{grid-column:8 / span 4;grid-row:1;margin-top:5.5rem !important}
  .s-a3{grid-column:2 / span 4;grid-row:2;margin-top:1.6rem !important}
  .strecke--a .linie--rot{width:16%;left:47%;top:3.2rem;bottom:auto}

  .s-h1{grid-column:1 / span 6;grid-row:1;margin-top:0 !important}
  .s-h2{grid-column:8 / span 5;grid-row:1;margin-top:6rem !important}

  .s-r1{grid-column:6 / span 7;grid-row:1;margin-top:0 !important}
  .s-r2{grid-column:2 / span 3;grid-row:1;margin-top:4.5rem !important}

  .s-c3{grid-column:5 / span 8;grid-row:3;margin-top:2rem !important}

  .s-b1{grid-column:2 / span 3;grid-row:1;margin-top:0 !important}
  .s-b2{grid-column:6 / span 6;grid-row:1;margin-top:6.5rem !important}
  .strecke--b .kreis{width:12%;right:1%;top:.5rem}

  .zwischen--c{grid-column:1 / span 4;grid-row:1;margin-top:1rem}
  .s-c1{grid-column:6 / span 7;grid-row:1;margin-top:0 !important}
  .s-c2{grid-column:3 / span 4;grid-row:2;margin-top:-3.5rem !important;z-index:3}

  .s-d1{grid-column:1 / span 7;grid-row:1;margin-top:0 !important}
  .s-d2{grid-column:9 / span 4;grid-row:1;margin-top:7.5rem !important}
  .s-d3{grid-column:9 / span 4;grid-row:2;margin-top:1.4rem !important}
  /* rechts von der Bildunterschrift, unterhalb des Fotos: freies Feld */
  .strecke--d .rotblock--d{width:17%;aspect-ratio:1.3;left:32%;right:auto;
    top:auto;bottom:-1.5rem}

  .stelle__spalten{grid-template-columns:1.15fr .85fr;gap:clamp(2.5rem,5vw,4.5rem)}

  /* Collage im 12er-Raster: kein Bildpaar auf gleicher Höhe, kein Maß doppelt */
  .collage{
    padding-top:clamp(3.5rem,8vw,6rem);
    display:grid;grid-template-columns:repeat(12,1fr);
    gap:0 clamp(14px,1.8vw,26px);align-items:start;
  }
  .collage > .aufkleber,.collage > .kasten{width:auto;margin:0}
  .aufkleber--1{grid-column:1 / span 5;grid-row:1}
  .kasten--1  {grid-column:7 / span 5;grid-row:1;margin-top:2.5rem;justify-self:start}
  .kasten--2  {grid-column:8 / span 5;grid-row:2;margin-top:1.2rem;justify-self:end}
  .aufkleber--2{grid-column:2 / span 3;grid-row:2;margin-top:2.2rem}
  .kasten--3  {grid-column:1 / span 5;grid-row:3;margin-top:2.6rem;justify-self:start}
  .aufkleber--3{grid-column:7 / span 6;grid-row:3;margin-top:-1.5rem}
  .collage__halbton{top:2%;left:-6%;width:min(400px,34vw)}
  .collage__kringel{width:min(260px,24vw);top:9%;right:-5%}
  .collage__teil--auge{left:32%;bottom:8%}
  /* freies Rotfeld zwischen zweitem und drittem Aufkleber — vorher lag die
     Sprechblase hinter dem Textkasten */
  .collage__teil--blase{left:34%;right:auto;top:52%}
  .collage__teil--daumen{right:36%;bottom:6%}

  .fuss__innen{grid-template-columns:1.1fr .95fr .95fr;gap:clamp(2rem,4vw,3.5rem)}
}

@media (min-width:1080px){
  .aufkleber--1{grid-column:2 / span 4}
  .aufkleber--3{grid-column:8 / span 4}
  .collage{padding-left:clamp(2rem,5vw,4rem);padding-right:clamp(2rem,5vw,4rem)}
}

/* ==========================================================================
   RUHE-MODUS — Parallax und Einblendungen aus
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  [data-parallax]{--py:0px !important}
  .animiert .zeigen,.animiert .zeigen--text{opacity:1 !important}
  .animiert .zeigen--text{transform:none !important}
}

@media print{
  .kopf,.sprungmarke{position:static}
  .kipp,.collage,.bewerbung{background:#fff;color:#000}
}