/* Jule Charlotte: Beige, edles Braun, Gold. Leitmotiv ist die Objektivblende in Mokka mit Goldfassung (blende.js).
   Farbrollen nach 70-20-10: Beige (mit Weiß) dominant, Braun sekundär, Gold Akzent, Silbergrau nur für feine Linien.
   Schriften lokal. */
@font-face { font-family: "Prata"; src: url(fonts/prata-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Tenor Sans"; src: url(fonts/tenor-sans-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Tenor Sans"; src: url(fonts/tenor-sans-latin-ext-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "Figtree"; src: url(fonts/figtree-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Figtree"; src: url(fonts/figtree-latin-ext-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "Figtree"; src: url(fonts/figtree-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Figtree"; src: url(fonts/figtree-latin-ext-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "Aguafina Script"; src: url(fonts/aguafina-script-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --beige: #f4ede2; --beige-tief: #e9dfcf; --weiss: #fffdf9; --tinte: #2b241e; --leise: #6e6355;
  --gold: #b8913f; --gold-hell: #e2c88a; --gold-text: #7d5f24; /* Gold als Schrift, Kontrast 5:1 auf Beige */
  --braun: #5b3d2a; --braun-tief: #3e2a1e; --braun-hell: #8b6b54; --gold-auf-braun: #dcc28a; /* Braun trägt Kopf, Laufband, Ablauf, Fuß */
  --silber: #b9b6b0; --grau-hell: #dcd9d4;
  --radius: 14px; --breite: min(1180px, calc(100% - 32px));
  --schrift-kopf: "Prata", Georgia, serif; --schrift-text: "Figtree", system-ui, sans-serif;
  --schrift-etikett: "Tenor Sans", "Figtree", sans-serif; --schrift-hand: "Aguafina Script", cursive;
  font-family: var(--schrift-text); color: var(--tinte); background: var(--beige);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; line-height: 1.6; font-size: 1.0625rem; overflow-x: clip; }
h1, h2, h3 { font-family: var(--schrift-kopf); font-weight: 400; line-height: 1.08; letter-spacing: -.01em; }
h1 em, h2 em, .marke em { font-style: normal; color: var(--gold-text); }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: -999px; } .sprung:focus { left: 16px; top: 16px; z-index: 200; background: #fff; padding: 8px; }
:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; }

/* Kopf */
/* Edles Braun oben, läuft nach unten weich ins Beige aus; feine Goldlinie an der Oberkante */
.kopf { position: sticky; top: 0; z-index: 40; display: flex; gap: 28px; align-items: center; justify-content: space-between;
  padding: 12px max(16px, calc((100% - 1180px) / 2)) 38px; color: var(--beige);
  background: linear-gradient(180deg, var(--braun) 0%, var(--braun) 52%, rgb(91 61 42 / .78) 66%, rgb(91 61 42 / .4) 82%, rgb(91 61 42 / 0) 100%); }
.kopf::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), var(--gold-hell), var(--gold), transparent); }
.kopf .knopf { --k-grund: var(--gold-hell); --k-text: var(--braun-tief); --k-hover-grund: var(--beige); --k-hover-text: var(--braun-tief); }
.marke { font-family: var(--schrift-kopf); font-size: 1.35rem; text-decoration: none; display: flex; align-items: center; gap: 10px; }
.marke img { width: 42px; height: 42px; }
.kopf .marke em { color: var(--beige); }
.kopf__nav { display: flex; gap: 26px; font-family: var(--schrift-etikett); font-size: .86rem; letter-spacing: .12em; text-transform: uppercase; }
.kopf__nav a { text-decoration: none; }
.kopf__menue { display: none; font: inherit; background: none; border: 1px solid currentColor; border-radius: 999px; padding: 8px 16px; color: inherit; }
[data-menue] { --menue-grund: var(--beige); --menue-text: var(--tinte); gap: 28px; justify-items: start; }
[data-menue] ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-family: var(--schrift-kopf); font-size: 2rem; }
[data-menue] ul a { text-decoration: none; color: var(--tinte); }
.menue__zu { position: absolute; right: 16px; top: 12px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--silber); background: var(--weiss); color: var(--tinte); font-size: 1.7rem; line-height: 1; cursor: pointer; }
.menue__anfrage { --k-grund: var(--braun); }
/* Instagram und LinkedIn im Menü wie die Kontaktwege: Etikettschrift, goldene Unterstreichung */
.menue__sozial { display: flex; gap: 22px; margin: 4px 0 0; font: .82rem var(--schrift-etikett); letter-spacing: .14em; text-transform: uppercase; }
.menue__sozial a { color: var(--braun); text-underline-offset: 5px; text-decoration-color: var(--gold); }

.knopf { font: 600 .95rem/1 var(--schrift-text); padding: 14px 24px; border-radius: 999px; text-decoration: none; display: inline-block; border: 0;
  --k-grund: var(--braun); --k-text: var(--weiss); --k-hover-grund: var(--gold-hell); --k-hover-text: var(--braun-tief); background: var(--k-grund); color: var(--k-text); }
.knopf--gold { --k-grund: var(--braun); }
.textlink { color: var(--leise); text-underline-offset: 4px; }
/* Zweiter Weg im Hero: kein zweiter gefüllter Knopf, sondern ein ruhiger Umrandungsknopf */
.textlink--stark { color: var(--tinte); font-weight: 600; text-decoration: none; padding: 13px 22px; border: 1px solid var(--braun-hell); border-radius: 999px; transition: background .3s; }
.textlink--stark:hover { background: var(--beige-tief); }
.etikett { font-family: var(--schrift-etikett); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--braun); margin: 0 0 .7em; }

main > section, .recht { width: var(--breite); margin: 0 auto; }

/* Hero mit Sucher */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; min-height: calc(100svh - 140px); padding-block: 40px 24px; } /* Laufband schaut im ersten Bildschirm unten herein */
.hero h1 { font-size: clamp(2.6rem, 6.4vw, 5.6rem); margin: .1em 0 .3em; max-width: 11ch; }
.hero h1 em { font-family: var(--schrift-hand); font-size: 1.15em; letter-spacing: 0; line-height: .8; padding-right: .08em; }
.hero__lead { max-width: 46ch; font-size: 1.15rem; color: var(--leise); }
.hero__knoepfe { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 28px; }
.hero__sucher { position: relative; justify-self: center; width: min(100%, 520px, 64svh); } /* niedrige Fenster: Sucher und Polaroid bleiben über dem Laufband */
.sucher { position: relative; aspect-ratio: 1; width: 100%; }
.sucher video { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: cover; border-radius: 50%; background: var(--beige-tief); }
.sucher canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Ohne JavaScript: Standbild in der Fassung, Ring um den Knopf aus CSS statt der gezeichneten Blende */
.sucher__ersatz { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 6px var(--braun), 0 0 0 8px var(--gold); }
html:not(.b-js) .blendknopf { box-shadow: inset 0 0 0 10px var(--braun), inset 0 0 0 12px var(--gold); }
/* translate und rotate statt transform: die ruhige Fassung des Baukastens setzt transform im Hero auf none */
.sucher__ton { position: absolute; left: 50%; bottom: -6px; translate: -50% 0; font: 600 .875rem var(--schrift-text); background: var(--weiss); color: var(--tinte);
  border: 1px solid var(--silber); border-radius: 999px; padding: 10px 18px; cursor: pointer; white-space: nowrap; box-shadow: 0 8px 24px rgb(43 36 30 / .12); }
.sucher__ton:hover { background: var(--beige-tief); }
.notiz { font-family: var(--schrift-hand); color: var(--gold-text); font-size: 2.1rem; position: absolute; pointer-events: none; }
.notiz--a { left: -6%; top: 2%; rotate: -12deg; }
.pfeil { position: absolute; color: var(--braun-hell); width: 110px; }
.pfeil--a { left: 2%; top: 13%; rotate: 8deg; }
/* Jule selbst im ersten Bildschirm: Polaroid, das am Sucher lehnt */
.hero__foto { position: absolute; left: -13%; bottom: -2%; width: 25%; margin: 0; padding: 7px 7px 30px; background: var(--weiss); rotate: -7deg;
  box-shadow: 0 16px 34px rgb(43 36 30 / .18); z-index: 2; }
.hero__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; }
.hero__foto figcaption { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font-family: var(--schrift-hand); font-size: 1.25rem; color: var(--braun); }
.sucher__pause { position: absolute; right: 2%; bottom: 12%; z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--silber); background: var(--weiss); cursor: pointer; display: grid; place-items: center; }
.sucher__pause span { width: 12px; height: 13px; border-inline: 4px solid var(--tinte); }
.sucher__pause.ist-pause span { width: 0; height: 0; border: 0; border-left: 12px solid var(--tinte); border-block: 7px solid transparent; margin-left: 3px; }

/* Abschnitte */
.abschnitt { --luft: 60px; padding-block: var(--luft); } /* L-016: höchstens 120 px Lücke am Desktop, 72 px am Handy */
/* Weiße Abschnitte laufen oben und unten weich ins Beige aus, keine harten Kanten */
.abschnitt--weiss { width: 100% !important; padding-inline: max(16px, calc((100% - 1180px) / 2));
  background: linear-gradient(180deg, var(--beige), var(--weiss) 140px, var(--weiss) calc(100% - 140px), var(--beige)); }
/* Brauner Abschnitt (Ablauf): Beige-Schrift, Gold nur in Linien und Handschrift */
.abschnitt--braun { width: 100% !important; padding-inline: max(16px, calc((100% - 1180px) / 2)); background: var(--braun); color: var(--beige); }
/* L-034: Braun läuft unten weich ins Beige des nächsten Abschnitts aus, über dessen oberem Abstand */
.abschnitt--braun::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: calc(var(--luft) - 6px); background: linear-gradient(180deg, var(--braun), rgb(91 61 42 / 0)); pointer-events: none; }
.abschnitt--braun .schritte li { border-top-color: rgb(220 194 138 / .6); }
.abschnitt--braun .schritte__nr { color: var(--gold-auf-braun); }
.abschnitt--braun .schritte p { color: rgb(244 237 226 / .82); }
.abschnitt h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); margin: 0; }
.abschnitt__lead { max-width: 58ch; color: var(--leise); font-size: 1.1rem; margin: 22px 0 36px; }
.kopfzeile { display: flex; gap: 20px; align-items: center; }
.mini-iris { width: 64px; height: 64px; flex: none; }

/* Handy-Bühne neben der Überschrift: drei Handys im Fächer, gebaut aus Braun mit feiner Goldkante */
.reels__kopf { display: grid; grid-template-columns: 1fr minmax(380px, 470px); gap: 40px; align-items: center; margin-bottom: 18px; }
.reels__text .abschnitt__lead { margin-bottom: 0; }
.handybuehne { position: relative; height: 540px; }
.handy { position: absolute; left: 50%; top: 50%; width: 224px; aspect-ratio: 9 / 19.5; padding: 9px; border-radius: 42px;
  background: linear-gradient(150deg, #6b4a33, var(--braun-tief) 55%, #4e3424);
  box-shadow: 0 0 0 1px rgb(184 145 63 / .65), inset 0 0 0 1px rgb(255 240 210 / .12), 0 30px 60px rgb(43 36 30 / .28); }
.handy::after { content: ""; position: absolute; right: -3px; top: 118px; width: 3px; height: 58px; border-radius: 0 3px 3px 0; background: var(--braun-hell); }
.handy__schirm { position: relative; width: 100%; height: 100%; border-radius: 33px; overflow: hidden; background: #1c1410; isolation: isolate; }
.handy__schirm::before { content: ""; position: absolute; z-index: 4; top: 9px; left: 50%; width: 64px; height: 19px; translate: -50% 0; border-radius: 20px; background: #0d0907; }
.handy__schirm img, .handy__schirm video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.handy--mitte { z-index: 2; transform: translate(-50%, -50%); }
.handy--links { z-index: 1; transform: translate(-112%, -45%) rotate(-9deg) scale(.84); }
.handy--rechts { z-index: 1; transform: translate(12%, -45%) rotate(9deg) scale(.84); }
.handy--links .handy__schirm img, .handy--rechts .handy__schirm img { transition: opacity .5s; }
.handy__schirm img.wechselt { opacity: 0; }
.handy__spur { position: absolute; inset: 0; transition: transform .85s cubic-bezier(.65, 0, .35, 1); }
.handy__folie { position: absolute; left: 0; right: 0; height: 100%; }
.handy__punkte { position: absolute; z-index: 3; top: 34px; left: 14px; right: 14px; display: flex; gap: 3px; filter: drop-shadow(0 0 2px rgb(0 0 0 / .55)); }
.handy__punkte span { flex: 1; height: 3px; border-radius: 2px; background: rgb(255 255 255 / .45); overflow: hidden; }
.handy__punkte span.war { background: #fff; }
.handy__punkte span.an::after { content: ""; display: block; height: 100%; background: #fff; transform-origin: left; animation: handyFortschritt var(--dauer, 6s) linear forwards; }
.handybuehne.steht .handy__punkte span.an::after { animation-play-state: paused; }
@keyframes handyFortschritt { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.handy__name { position: absolute; z-index: 3; left: 14px; bottom: 16px; color: #fff; font: 600 .78rem var(--schrift-text); text-shadow: 0 1px 6px rgb(0 0 0 / .55); }
.handy__ton { position: absolute; z-index: 3; left: 50%; bottom: 46px; translate: -50% 0; white-space: nowrap; font: 600 .875rem var(--schrift-text); color: var(--tinte);
  background: rgb(255 253 249 / .92); border: 0; border-radius: 999px; padding: 9px 15px; cursor: pointer; box-shadow: 0 6px 18px rgb(0 0 0 / .25); }
.handy__ton:hover { background: var(--gold-hell); }
.handy__ton:focus-visible { outline: 2px solid var(--gold-hell); outline-offset: 3px; }
.handybuehne__halt { position: absolute; z-index: 3; right: 6px; bottom: 6px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--silber); background: var(--weiss); cursor: pointer; display: grid; place-items: center; }
.handybuehne__halt span { width: 10px; height: 11px; border-inline: 3px solid var(--tinte); }
.handybuehne__halt[aria-pressed="true"] span { width: 0; height: 0; border: 0; border-left: 10px solid var(--tinte); border-block: 6px solid transparent; margin-left: 3px; }

/* Filter und Reel-Wand */
.filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.filter__knopf { font: 400 .82rem var(--schrift-etikett); letter-spacing: .12em; text-transform: uppercase; padding: 10px 18px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--braun) 40%, transparent); background: transparent; color: var(--tinte); cursor: pointer; transition: background .3s, color .3s; }
.filter__knopf[aria-pressed="true"] { background: var(--braun); color: var(--weiss); border-color: var(--braun); }
.reelwand, .ugc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 22px; }
.reel { position: relative; transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity .4s; }
.reel[hidden] { display: none; }
.reel button { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 9 / 16; background: var(--beige-tief); box-shadow: 0 0 0 1px var(--grau-hell); }
.reel button:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 4px; }
.reel video { position: relative; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); }
/* Vorschaubild als eigenes Bild unter dem Film: lädt verzögert und dekodiert asynchron (ein poster-Attribut kann beides nicht) */
.reel__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); }
.reel button:hover :is(video, .reel__bild) { transform: scale(1.04); }
.reel__titel { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 9px 12px; border-radius: 10px; font-size: .86rem; font-weight: 600; line-height: 1.3;
  background: var(--weiss); }
/* Achte Karte: statt Restfläche eine Einladung */
.reelwand { grid-template-columns: repeat(4, 1fr); }
.reel--anfrage a { display: grid; align-content: space-between; gap: 20px; height: 100%; min-height: 220px; aspect-ratio: 9 / 16; padding: 26px 22px; border-radius: var(--radius); text-decoration: none;
  background: linear-gradient(160deg, #6b4a33, var(--braun-tief)); box-shadow: 0 0 0 1px var(--gold); color: var(--beige); }
.reel__frage { font-family: var(--schrift-kopf); font-size: 1.6rem; line-height: 1.15; }
.reel__los { font-family: var(--schrift-hand); font-size: 2rem; color: var(--gold-auf-braun); }
.reel__los::after { content: " →"; font-family: var(--schrift-text); font-size: 1.1rem; }
.reel__titel::before { content: "▶"; color: var(--gold); margin-right: 7px; font-size: .75em; }
.reelwand .reel:nth-child(even) { margin-top: 44px; }
.hinweis { margin-top: 28px; font-size: .9rem; display: inline-block; }

/* Ablauf */
.schritte { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.schritte li { border-top: 1px solid var(--gold); padding-top: 22px; }
.schritte__nr { font-family: var(--schrift-hand); font-size: 2.4rem; color: var(--gold-text); line-height: 1; }
.schritte h3 { font-size: 1.6rem; margin: 10px 0 8px; }
.schritte p { margin: 0; color: var(--leise); }

/* Vor der Kamera */
.kamera { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.ugc { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.reel--klein:nth-child(even) { margin-top: 36px; }
.collage { position: relative; min-height: 760px; }
.foto { position: absolute; margin: 0; background: var(--weiss); padding: 10px 10px 40px; box-shadow: 0 18px 40px rgb(43 36 30 / .14); transition: transform .7s cubic-bezier(.22, 1, .36, 1), z-index 0s .2s; }
.foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.foto figcaption { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-family: var(--schrift-hand); font-size: 1.5rem; color: var(--braun); }
.foto:hover { transform: rotate(0) scale(1.04) !important; z-index: 5; transition-delay: 0s; }
/* Versatz so gewählt, dass keine Bildunterschrift verdeckt wird */
.foto--1 { width: 48%; left: 0; top: 0; z-index: 2; transform: rotate(-5deg); }
.foto--2 { width: 46%; right: 0; top: 50px; z-index: 1; transform: rotate(4deg); }
.foto--3 { width: 44%; left: 6%; top: 52%; z-index: 3; transform: rotate(3deg); }
.foto--4 { width: 42%; right: 3%; top: 58%; z-index: 4; transform: rotate(-4deg); }
.b-js .foto[data-auftritt]:not(.ist-da) { opacity: 0; }

/* Über mich */
.ueber { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: center; position: relative; }
.ueber__bild { margin: 0; border-radius: 200px 200px var(--radius) var(--radius); overflow: hidden; box-shadow: 0 0 0 1px var(--grau-hell); }
.ueber__bild img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 25%; }
.ueber__text { position: relative; max-width: 54ch; }
.ueber__text p { color: var(--leise); }
.notiz--b { position: static; display: block; margin-top: 18px; transform: rotate(-4deg); }
/* Unterschrift in Blattgold: schreibt sich einmal, wenn sie ins Bild kommt, danach steht das Standbild */
.unterschrift { position: relative; width: min(330px, 78%); aspect-ratio: 1191 / 536; margin: 14px 0 0 -10px; }
.unterschrift img, .unterschrift video { position: absolute; inset: 0; width: 100%; height: 100%; }
.unterschrift.schreibt img { opacity: 0; }
.unterschrift--hero { display: block; width: 210px; margin: -26px 0 -30px 6px; }

/* Verzierungen: Funkeln, Schnörkel, Unterstrich, Sucherecken, Umlaufbahn, REC */
.hero { position: relative; }
.hero::before { content: ""; position: absolute; z-index: -1; inset: -10% 0 0 30%; background: radial-gradient(closest-side, rgb(201 172 146 / .30), transparent 72%); pointer-events: none; }
/* Funkeln: zweimal aufblitzen, dann ruhig stehen (keine Endlos-Animation) */
.funkel { position: absolute; width: 22px; height: 22px; color: var(--gold); pointer-events: none; animation: funkeln 2.2s ease-in-out 2 both; }
.funkel--1 { left: 47%; top: 12%; width: 26px; height: 26px; }
.funkel--3 { right: 2%; top: 58%; width: 18px; height: 18px; animation-delay: .6s; }
.funkel--ablauf { right: 6%; top: 70px; width: 20px; height: 20px; }
.funkel--ueber { left: 46%; top: 56px; width: 16px; height: 16px; }
.funkel--form { right: 26px; top: 26px; }
@keyframes funkeln { 0%, 100% { transform: scale(.7) rotate(0); opacity: .55; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
.schnoerkel { position: absolute; width: 150px; color: var(--gold); opacity: .7; pointer-events: none; }
.schnoerkel--ablauf { right: 4%; bottom: 40px; transform: scaleX(-1); }
#ablauf, #ueber { position: relative; }
#ablauf { overflow-x: clip; }
/* Abschnitte atmen unterschiedlich: Reels dicht, Ablauf knapp, Kontakt mit mehr Luft */
#reels { padding-top: 40px; }
.unterstrich { position: relative; display: inline-block; }
.unterstrich svg { position: absolute; left: 0; right: 0; bottom: -.12em; width: 100%; height: .28em; color: var(--gold); overflow: visible; }
.sucher__ecken { position: absolute; inset: -4%; pointer-events: none; }
.sucher__ecken i { position: absolute; width: 34px; height: 34px; border: 0 solid var(--braun); }
.sucher__ecken i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; }
.sucher__ecken i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
.sucher__ecken i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; }
.sucher__ecken i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.sucher__rec { position: absolute; right: 0; top: -2%; display: flex; gap: 7px; align-items: center; font: .78rem var(--schrift-etikett); letter-spacing: .16em; color: var(--tinte); }
/* REC blinkt nur, solange der Film läuft; der Pausenknopf hält beides an */
.sucher__rec i { width: 8px; height: 8px; border-radius: 50%; background: #c0392b; }
.sucher__rec.laeuft i { animation: rec 1s steps(2) infinite; }
.sucher__rec b { font-weight: 400; font-variant-numeric: tabular-nums; color: var(--leise); }
.kopfzeile h2::after { content: ""; display: inline-block; width: .42em; height: .42em; margin-left: .3em; vertical-align: .55em;
  background: var(--gold); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }

/* Laufband */
main > .laufband { width: 100%; }
.laufband__halt { position: absolute; z-index: 2; right: max(12px, calc((100% - 1180px) / 2)); top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--silber); background: var(--beige); cursor: pointer; display: grid; place-items: center; }
.laufband__halt span { width: 9px; height: 10px; border-inline: 3px solid var(--tinte); }
.laufband__halt[aria-pressed="true"] span { width: 0; height: 0; border: 0; border-left: 9px solid var(--tinte); border-block: 5px solid transparent; margin-left: 2px; }
.laufband.steht .laufband__spur { animation-play-state: paused; }
/* Der Text läuft rechts unter einem braunen Verlauf aus, der Halteknopf liegt darauf und verdeckt keine Schrift */
.laufband::after { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; right: 0; width: calc(max(12px, calc((100% - 1180px) / 2)) + 96px);
  background: linear-gradient(90deg, rgb(91 61 42 / 0), var(--braun) 55%); pointer-events: none; }
.laufband { position: relative; overflow: hidden; background: var(--braun); border-block: 3px solid var(--gold); padding: 13px 0; }
.laufband__spur { display: flex; align-items: center; gap: 28px; width: max-content; animation: laufen 38s linear infinite; }
.laufband__spur span { font-family: var(--schrift-kopf); font-size: 1.35rem; white-space: nowrap; color: var(--beige); }
.laufband__spur span:nth-of-type(odd) { font-family: var(--schrift-hand); font-size: 1.9rem; color: var(--gold-auf-braun); line-height: 1; }
.laufband__spur svg { width: 16px; height: 16px; color: var(--gold); flex: none; }
.laufband:hover .laufband__spur, .laufband:focus-within .laufband__spur { animation-play-state: paused; }

/* Filmstreifen über dem Ablauf, randlos */
.filmstreifen { display: flex; gap: 10px; margin: calc(-1 * var(--luft)) calc(-1 * max(16px, calc((100vw - 1180px) / 2))) 64px; padding: 12px 10px; background: var(--braun-tief); overflow: hidden; }
.filmstreifen span { flex: 1 0 140px; height: 70px; border-radius: 4px; overflow: hidden; background: linear-gradient(135deg, #a9a59f, #e6e3de 45%, #b9b6b0); }
/* Standbilder aus Jules Reels statt leerer Felder (Prüfung Runde 3) */
.filmstreifen img { width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.filmstreifen { position: relative; }
.filmstreifen::before, .filmstreifen::after { content: ""; position: absolute; left: 0; right: 0; height: 8px; background: radial-gradient(circle, var(--beige) 2.5px, transparent 3px) 0 50% / 16px 8px repeat-x; }
.filmstreifen::before { top: 1px; } .filmstreifen::after { bottom: 1px; }

/* Instagram und LinkedIn am rechten Rand: braune Reiter mit Goldsymbol, Name klappt beim Darüberfahren aus */
.seitenleiste { position: fixed; z-index: 35; right: 0; top: 50%; transform: translateY(-50%); display: grid; justify-items: end; gap: 8px; }
.seite-link { position: relative; display: flex; align-items: center;
  padding: 12px 14px 12px 13px; border-radius: 999px 0 0 999px; background: var(--braun); color: var(--gold-auf-braun); text-decoration: none;
  box-shadow: 0 0 0 1px rgb(184 145 63 / .55), 0 10px 26px rgb(43 36 30 / .22); }
.seite-link svg { width: 24px; height: 24px; flex: none; }
.seite-link span { position: absolute; right: calc(100% - 10px); top: 50%; padding: 9px 22px 9px 16px; border-radius: 999px 0 0 999px; background: var(--braun-tief);
  white-space: nowrap; color: var(--beige); font: 600 .9rem var(--schrift-text); opacity: 0; visibility: hidden; pointer-events: none; z-index: -1;
  transform: translate(14px, -50%); transition: opacity .3s, visibility .3s, transform .45s cubic-bezier(.22, 1, .36, 1); }
.seite-link:is(:hover, :focus-visible) span { opacity: 1; visibility: visible; transform: translate(0, -50%); }
/* Nur wo der Rand neben dem Inhalt (1180 px) frei ist; schmaler liegen die Links im Menü und im Kontaktteil */
@media (max-width: 1310px) { .seitenleiste { display: none; } }
.seite-link:is(:hover, :focus-visible) { background: var(--braun-tief); }
.seite-link:focus-visible { outline-offset: -4px; outline-color: var(--gold-hell); }
.mit-intro .seitenleiste { display: none; }
.seitenleiste { transition: opacity .5s, visibility .5s, translate .6s cubic-bezier(.22, 1, .36, 1); }
.b-js .seitenleiste:not(.da) { opacity: 0; visibility: hidden; translate: 16px 0; }

/* Anfrageknopf am Handy, erscheint unten, solange das Formular nicht im Bild ist */
.handy-anfrage { display: none; }
@keyframes laufen { to { transform: translateX(calc(-50% - 14px)); } }

/* Kontakt mit Blendknopf und Formular */
.kontakt { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.kontakt__links { display: grid; justify-items: start; }
.blendknopf { position: relative; display: grid; place-items: center; width: 200px; aspect-ratio: 1; border-radius: 50%; text-decoration: none; margin: 4px 0 24px; }
.kontakt__wege { display: grid; gap: 6px; margin: 0; }
.kontakt__wege a { color: var(--tinte); text-underline-offset: 4px; text-decoration-color: var(--gold); }
.formular { position: relative; background: var(--weiss); border-radius: 22px; padding: 34px; display: grid; gap: 16px;
  box-shadow: 0 0 0 1px var(--grau-hell), 0 24px 60px rgb(43 36 30 / .08); }
.formular__titel { font-family: var(--schrift-hand); font-size: 2.4rem; color: var(--braun); margin: 0 0 -4px; line-height: 1; }
.funkel--form { right: 26px; top: 26px; }
.formular__reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.feld { display: grid; gap: 6px; font-size: .92rem; border: 0; margin: 0; padding: 0; min-width: 0; }
.feld > span, .feld legend { font-family: var(--schrift-etikett); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--leise); padding: 0; }
.feld input, .feld textarea { font: inherit; font-size: 1rem; color: var(--tinte); background: var(--beige); border: 1px solid transparent; border-bottom-color: var(--braun-hell); border-radius: 10px 10px 4px 4px; padding: 12px 14px; transition: border-color .3s, background .3s; }
.feld textarea { resize: vertical; min-height: 120px; }
.feld input:focus, .feld textarea:focus { outline: none; background: var(--weiss); border-color: var(--braun); }
.feld input[aria-invalid="true"], .feld textarea[aria-invalid="true"] { border-color: #b3412e; }
.feld--wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.feld--wahl legend { width: 100%; margin-bottom: 6px; }
.feld--wahl label { position: relative; cursor: pointer; }
.feld--wahl input { position: absolute; opacity: 0; }
.feld--wahl span { display: inline-block; padding: 9px 15px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--braun) 40%, transparent); font-size: .9rem; transition: background .3s, color .3s; }
.feld--wahl input:checked + span { background: var(--braun); color: var(--weiss); border-color: var(--braun); }
.feld--wahl input:focus-visible + span { outline: 2px solid var(--gold-text); outline-offset: 2px; }
.haken { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--leise); }
.haken input { accent-color: var(--braun); width: 18px; height: 18px; margin-top: 2px; flex: none; }
.formular .knopf { justify-self: start; }
.formular__fehler { color: #b3412e; font-size: .9rem; margin: 0; min-height: 0; }
.formular__fehler:empty { display: none; }
.formular__hinweis { font-size: .82rem; color: var(--leise); margin: 0; }
.formular__danke { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--beige); border: 1px solid var(--gold); color: var(--tinte); font-weight: 600; }
.formular__danke:focus { outline: none; }
/* Honigtopf gegen Spam-Programme: für Menschen unsichtbar, nicht per Tab erreichbar */
.feld--honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.blendknopf canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.blendknopf__text { font-family: var(--schrift-kopf); font-size: 1.7rem; line-height: 1.1; color: var(--tinte); }
.blendknopf:focus-visible { outline-offset: 6px; border-radius: 50%; }
.kontakt__wege { display: flex; gap: 8px 22px; flex-wrap: wrap; justify-content: start; }

/* Kino (Reel mit Ton) */
.kino { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; }
.kino::backdrop { background: rgb(43 36 30 / .82); backdrop-filter: blur(6px); }
.kino__rahmen { position: relative; width: min(420px, 92vw); }
.kino__film { width: 100%; max-height: 82svh; aspect-ratio: 9 / 16; object-fit: contain; background: #000; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--gold); }
.kino__titel { color: var(--weiss); text-align: center; font-family: var(--schrift-etikett); letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; margin: 12px 0 0; }
.kino__zu { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--silber); background: var(--weiss); font-size: 1.5rem; cursor: pointer; color: var(--tinte); }

/* Intro: Blende in Mokka mit Goldfassung, höchstens 3,5 Sekunden */
.intro { display: none; }
.mit-intro .intro { display: block; position: fixed; inset: 0; z-index: 100; background: var(--beige); }
.mit-intro body { overflow: hidden; }
.intro__film { position: absolute; left: 50%; top: 44%; width: var(--film, 300px); height: var(--film, 300px); transform: translate(-50%, -50%); object-fit: cover; border-radius: 50%; max-width: none; opacity: 0; }
.intro__blende { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro__name { position: absolute; left: 0; right: 0; top: calc(50% + var(--ring, 150px) + 14px); margin: 0; display: flex; justify-content: center; opacity: 0; }
.intro__name img { width: min(24svh, 200px); height: auto; transform: translateX(-2.3%); } /* optisch mittig: das JC sitzt im Logo 14,5 von 640 px rechts der Ringmitte */
.intro__rec { position: absolute; top: 24px; left: 24px; font: .78rem var(--schrift-etikett); letter-spacing: .2em; color: var(--tinte); opacity: 0; display: flex; gap: 8px; align-items: center; }
.intro__rec i { width: 9px; height: 9px; border-radius: 50%; background: #c0392b; animation: rec 1s steps(2) infinite; }
@keyframes rec { 50% { opacity: 0; } }
.intro__weiter { position: absolute; right: 20px; bottom: 20px; font: .82rem var(--schrift-text); background: none; border: 1px solid var(--braun-hell); color: var(--tinte); border-radius: 999px; padding: 9px 16px; cursor: pointer; }

/* Rechtsseiten und Fuß */
.recht { padding-block: 64px; max-width: 72ch; }
.rechtsliste { display: grid; grid-template-columns: max-content 1fr; gap: 6px 24px; margin: 0 0 32px; }
.rechtsliste dt { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--leise); padding-top: 3px; }
.rechtsliste dd { margin: 0; }
.offen { background: #fff2c2; box-shadow: 0 0 0 2px #fff2c2; border-radius: 2px; }
.fuss { padding: 36px max(16px, calc((100% - 1180px) / 2)); display: flex; flex-wrap: wrap; gap: 16px 28px; justify-content: space-between; background: var(--braun); color: rgb(244 237 226 / .85); font-size: .9rem; border-top: 3px solid var(--gold); }
.fuss { align-items: center; }
.fuss nav { display: flex; gap: 18px; }
.fuss__logo { width: 72px; height: 72px; }
/* Unterschrift klein neben dem Logo, nur als Standbild */
.fuss__marke { display: flex; align-items: center; gap: 14px; }
.fuss__unterschrift { width: 140px; height: auto; }
.fuss a { text-decoration: none; } .fuss a:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1240px) {
  .hero__foto { left: -9%; bottom: -12%; width: 26%; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 20px; gap: 24px; }
  .hero__sucher { order: -1; width: min(86vw, 420px); margin-bottom: calc(min(86vw, 420px) * .13); } /* Platz für das Polaroid unter dem Sucher */
  .notiz--a { left: -2%; font-size: 1.7rem; }
  .pfeil--a { width: 80px; }
  .kamera, .ueber { grid-template-columns: 1fr; gap: 40px; }
  .reels__kopf { grid-template-columns: 1fr; gap: 28px; }
  .handybuehne { height: 480px; overflow-x: clip; }
  .handy { width: 196px; border-radius: 38px; }
  .handy__schirm { border-radius: 30px; }
  .schritte { grid-template-columns: 1fr; }
  .kontakt { grid-template-columns: 1fr; gap: 40px; }
  .reelwand { grid-template-columns: repeat(2, 1fr); }
  .schnoerkel { display: none; }
  .funkel--1 { left: auto; right: 6%; top: 2%; }
  .collage { min-height: 120vw; }
  .foto--3 { top: 56vw; } .foto--4 { top: 60vw; }
}
@media (max-width: 760px) {
  .kopf__nav, .kopf > .knopf { display: none; } .kopf__menue { display: inline-block; }
  .abschnitt { --luft: 34px; }
  /* Reel-Wand wird zum wischbaren Streifen */
  .reelwand { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin-inline: -16px; padding: 0 16px 12px; scrollbar-width: none; }
  .reelwand::-webkit-scrollbar { display: none; }
  .reelwand .reel { flex: 0 0 62vw; scroll-snap-align: center; }
  .reelwand .reel:nth-child(even) { margin-top: 0; }
  .rechtsliste { grid-template-columns: 1fr; gap: 2px; } .rechtsliste dd { margin-bottom: 16px; }
  .marke img { width: 32px; height: 32px; }
  .marke { font-size: 1.15rem; gap: 8px; }
  .kopf__menue { padding: 6px 12px; font-size: .9rem; min-height: 44px; }
  /* Wortmarke mittig, Menüknopf rechts */
  .kopf { justify-content: center; position: sticky; }
  .kopf__menue { position: absolute; right: 16px; top: 12px; }
  .hero__foto { left: -5%; bottom: -15%; width: 27%; padding: 5px 5px 22px; }
  .hero__foto figcaption { font-size: 1rem; }
  .sucher__ton { padding: 9px 14px; }
  .reelwand .reel--anfrage { flex: 0 0 62vw; }
  .recht h1 { overflow-wrap: anywhere; hyphens: auto; }
  /* Rechtsseiten: Wortmarke mittig, Rücklink rechts */
  .kopf > a[data-link] { position: absolute; right: 16px; top: 18px; font-size: .9rem; }
  .sucher__ton { width: max-content; max-width: calc(100% - 24px); white-space: normal; text-align: center; }
  .filmstreifen { margin-bottom: 36px; }
  .filmstreifen span { flex-basis: 90px; height: 52px; }
  .kontakt__wege { justify-content: start; text-align: left; }
  .haken, .formular__hinweis { font-size: 1rem; }
  .feld > span, .feld legend, .sucher__rec { font-size: .8rem; }
  .etikett { font-size: .82rem; }
  .collage { min-height: 138vw; }
  .foto--2 { top: 8vw; } .foto--3 { top: 64vw; } .foto--4 { top: 80vw; }
  .handy-anfrage { display: block; position: fixed; z-index: 30; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 14px 26px; border-radius: 999px;
    background: var(--gold-hell); color: var(--braun-tief); font-weight: 600; text-decoration: none; white-space: nowrap; box-shadow: 0 0 0 1px var(--gold), 0 12px 30px rgb(43 36 30 / .25);
    transition: opacity .3s, transform .3s; }
  .handy-anfrage.weg { opacity: 0; pointer-events: none; transform: translate(-50%, 20px); }
  .handybuehne { height: 440px; margin-inline: -16px; }
  .handy { width: 178px; }
  .handy--links { transform: translate(-108%, -45%) rotate(-9deg) scale(.8); }
  .handy--rechts { transform: translate(8%, -45%) rotate(9deg) scale(.8); }
  /* Halteknopf links unten */
  .handybuehne__halt { right: auto; left: 16px; width: 44px; height: 44px; }
  .mit-intro .handy-anfrage { display: none; }
  .formular { padding: 24px 18px; }
  .formular__reihe { grid-template-columns: 1fr; }
  .laufband__spur span { font-size: 1.1rem; } .laufband__spur span:nth-of-type(odd) { font-size: 1.5rem; }
}
@media (max-width: 360px) {
  .marke { font-size: 1.02rem; gap: 6px; } .marke img { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reel, .reel video, .reel__bild, .foto, .seite-link span, .seitenleiste, .handy__spur, .handy__schirm img { transition: none; }
  .handy__punkte span.an::after { animation: none; transform: none; }
  .intro__rec i, .sucher__rec i, .funkel, .sucher__bahn, .laufband__spur { animation: none; }
}