/* Briede · Seiten, Fassung 3 (10.11.2026): große Bilder, Glas und Unschärfe, Termin immer griffbereit */

section { position: relative; }
.abschnitt { padding: clamp(80px, 9vw, 136px) 0; }
.nw { white-space: nowrap; }
main { position: relative; }

/* Kopfzeile eines Abschnitts: Titel links, Einleitung rechts */
.kopfzeile { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 90px); align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.kopfzeile .lead { margin: 0; color: var(--grau); max-width: 34em; }

/* Menü mobil */
.menue-knopf { display: none; margin-left: 2px; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(54,49,44,.18); background: rgba(255,255,255,.6); cursor: pointer; place-items: center; }
.menue-knopf span, .menue-knopf span::before, .menue-knopf span::after { display: block; width: 16px; height: 1.5px; background: var(--tinte); position: relative; content: ""; transition: transform .2s; }
.menue-knopf span::before { position: absolute; top: -5px; } .menue-knopf span::after { position: absolute; top: 5px; }
.menue-offen .menue-knopf span { background: transparent; }
.menue-offen .menue-knopf span::before { transform: translateY(5px) rotate(45deg); }
.menue-offen .menue-knopf span::after { transform: translateY(-5px) rotate(-45deg); }
.menue-panel { display: none; }
@media (max-width: 1060px) {
  .menue-knopf { display: grid; }
  .menue-panel { display: block; position: fixed; inset: 0; padding: 104px var(--rand) 40px; background: rgba(246,243,238,.86); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; overflow-y: auto; z-index: 45; }
  .menue-offen .menue-panel { opacity: 1; visibility: visible; }
  .menue-panel a.punkt { display: block; padding: 15px 0; border-bottom: 1px solid var(--linie); font-weight: 700; font-size: 24px; letter-spacing: -.01em; text-decoration: none; }
  .menue-panel a.punkt[aria-current="page"] { color: var(--terracotta); }
  .menue-panel .knoepfe { margin-top: 26px; flex-direction: column; align-items: stretch; }
}
@media (max-width: 1060px) { .kopf .rund-knopf { display: inline-grid; } .kopf .aktionen .btn-wa { display: none; } }
@media (max-width: 400px) { .kopf-leiste { gap: 10px; padding-left: 16px; } .kopf .logo img { height: 25px; } .kopf .btn-termin { padding: 0 14px; font-size: 13.5px; } }

/* ---------- Hero Startseite: Bild groß, Headline auf Glas ---------- */
.hero-start { margin-top: -76px; padding-top: 88px; }
.hero-buehne { position: relative; max-width: 1440px; margin: 0 auto; padding: 0 clamp(12px, 2vw, 24px); }
.hero-bild { margin: 0; height: min(78vh, 54vw); min-height: 440px; overflow: hidden; border-radius: 40px 40px 40px clamp(120px, 16vw, 240px) / 40px 40px 40px clamp(100px, 13vw, 200px); background: var(--beige-hell); }
.hero-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.scharf img { animation: scharfstellen 1.8s var(--weich) both; }
@keyframes scharfstellen { from { filter: blur(18px); transform: scale(1.06); } to { filter: none; transform: none; } }
.hero-kontur { position: absolute; left: clamp(-6px, 1vw, 16px); bottom: -64px; width: clamp(140px, 17vw, 250px); aspect-ratio: 1 / 1.05; fill: none; stroke: var(--terracotta); stroke-width: 1.5; overflow: visible; pointer-events: none; z-index: 2; }
.hero-karte { position: absolute; right: clamp(24px, 4vw, 64px); bottom: clamp(-120px, -7vw, -60px); width: min(600px, 46%); padding: clamp(26px, 2.6vw, 40px); border-radius: 34px 34px 34px 90px / 34px 34px 34px 70px; z-index: 3; animation: karte-rein 1.1s .5s var(--weich) both; }
@keyframes karte-rein { from { opacity: 0; transform: translateY(30px); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
.adresse { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; color: var(--grau); margin: 0 0 14px; }
.adresse .bm { width: 13px; height: 14px; }
.hero-titel { font-size: clamp(32px, 3.2vw, 46px); line-height: 1.04; margin-bottom: 18px; }
.hervor { display: block; margin: .12em 0 .06em -.05em; }
.hervor img { height: 1.62em; width: auto; max-width: 100%; }
.hero-karte .lead { color: var(--grau); margin-bottom: 24px; font-size: clamp(16px, 1.1vw, 17.5px); }
.wa-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 15px; text-decoration: none; padding: 12px 6px; }
.wa-link svg { width: 18px; height: 18px; fill: #1fa855; }
.wa-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Kacheln: mit Bild, luftig abgesetzt */
.kacheln { position: relative; z-index: 1; padding: clamp(150px, 13vw, 190px) 0 clamp(56px, 6vw, 88px); }
.kacheln ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.kacheln li:nth-child(2) { transition-delay: .08s; } .kacheln li:nth-child(3) { transition-delay: .16s; } .kacheln li:nth-child(4) { transition-delay: .24s; }
.kacheln a { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: end; text-decoration: none; }
.kachel-bild { grid-column: 1 / -1; display: block; aspect-ratio: 4 / 3.1; overflow: hidden; border-radius: var(--ecke-a); background: var(--beige-hell); }
.kacheln li:nth-child(even) .kachel-bild { border-radius: var(--ecke-c); }
.kachel-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--weich); }
.kacheln a:hover .kachel-bild img { transform: scale(1.05); }
.kachel-text { display: grid; gap: 2px; }
.kacheln .titel { font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.kacheln .unter { font-size: 14.5px; color: var(--grau); }
.kacheln .pfeil { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(54,49,44,.18); display: grid; place-items: center; transition: transform .3s var(--weich), background .3s, border-color .3s; }
.kacheln a:hover .pfeil { transform: rotate(45deg); background: var(--terracotta); border-color: var(--terracotta); }
.kacheln .pfeil svg { width: 15px; height: 15px; stroke: var(--tinte); fill: none; stroke-width: 2; }
.kacheln a:hover .pfeil svg { stroke: var(--weiss); }

/* Marken: echte Logos, klein und ruhig */
.marken { padding: 34px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.marken .wrap { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
.marken .label { margin: 0; }
.logos { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 34px; }
.logos img { filter: grayscale(1); opacity: .78; transition: filter .3s, opacity .3s; }
.logos li:hover img { filter: none; opacity: 1; }

/* Unschärfe: weiche Farbflächen hinter Glas */
.unschaerfe { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.unschaerfe span { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: treiben 22s ease-in-out infinite alternate; }
.unschaerfe span:nth-child(1) { width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; background: #e6c4b1; left: -8vw; top: 6%; }
.unschaerfe span:nth-child(2) { width: 38vw; height: 38vw; max-width: 520px; max-height: 520px; background: #cfd7c2; right: -6vw; bottom: 0; animation-duration: 28s; }
.unschaerfe span:nth-child(3) { width: 26vw; height: 26vw; max-width: 380px; max-height: 380px; background: #efe0cf; left: 40%; top: 40%; animation-duration: 34s; }
@keyframes treiben { from { transform: translate(0, 0) scale(1); } to { transform: translate(6vw, -4vw) scale(1.12); } }
.abschnitt > .wrap { position: relative; z-index: 1; }

/* ---------- Termin ---------- */
.termin .wrap { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.termin-info { position: sticky; top: 112px; }
.termin-info .h2 { margin-bottom: 14px; }
.termin-info > p { color: var(--grau); }
.arten { list-style: none; margin: 26px 0 28px; padding: 0; border-top: 1px solid var(--linie); }
.arten li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--linie); font-weight: 500; }
.arten strong { font-weight: 700; white-space: nowrap; }
.oeffnung { padding: 18px 22px; border-radius: 20px 20px 20px 44px; margin-bottom: 18px; }
.klein-titel { font-size: 13px; font-weight: 500; color: var(--grau); margin: 0 0 4px; }
.oeffnung p:last-child { margin: 0; }
.alternativ { font-size: 15px; color: var(--grau); }
.alternativ a { color: var(--tinte); font-weight: 500; text-underline-offset: 3px; }
.kalender { border-radius: 30px 30px 30px 80px / 30px 30px 30px 64px; overflow: hidden; background: #f4f5f8; box-shadow: 0 40px 80px -50px rgba(54,49,44,.45), 0 0 0 1px var(--linie); }
.kalender iframe { display: block; width: 100%; height: 820px; border: 0; }

/* ---------- Formbilder mit Kontur und Glaslinse ---------- */
.form-bild { position: relative; width: 100%; max-width: 580px; aspect-ratio: 1 / 1.04; }
.form-bild.hoch { aspect-ratio: 1 / 1.18; max-width: 500px; margin-left: auto; }
.form-bild .form { position: absolute; inset: 0; }
.form-bild .form .bild img { transition: transform 1.2s var(--weich); }
.form-bild:hover .form .bild img { transform: scale(1.03); }
.form-bild .kontur { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--terracotta); stroke-width: 1.5; overflow: visible; pointer-events: none; translate: 18px -16px; }
.form-bild .linse-glas { left: 2%; bottom: 10%; }
.form-bild.hoch .linse-glas { left: auto; right: 4%; top: 14%; bottom: auto; }

/* ---------- Konzept ---------- */
.konzept .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: center; }
.konzept .h2 { margin-bottom: 18px; }
.konzept .lead { color: var(--grau); }
.drei-worte { margin: 30px 0; padding: 22px 0 22px 26px; border-left: 3px solid var(--terracotta); }
.drei-worte blockquote { margin: 0; }
.drei-worte blockquote p { margin: 0 0 6px; font-weight: 700; font-size: clamp(22px, 2vw, 28px); letter-spacing: -.015em; line-height: 1.2; }
.drei-worte figcaption { font-size: 14px; color: var(--grau); }
.vorteile { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 30px; }
.vorteile li { display: flex; gap: 14px; align-items: flex-start; }
.vorteile .bm { width: 20px; height: 21px; margin-top: 2px; fill: var(--salbei); }
.vorteile .h3 { font-size: 17px; margin-bottom: 4px; }
.vorteile p { margin: 0; font-size: 15.5px; color: var(--grau); line-height: 1.5; }

/* ---------- Anfahrt ---------- */
.anfahrt { background: var(--weiss); }
.anfahrt .wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
.anfahrt .h2 { margin-bottom: 24px; }
.infozeilen { list-style: none; margin: 0 0 30px; padding: 0; border-top: 1px solid var(--linie); }
.infozeilen li { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--linie); }
.infozeilen .bm { margin-top: .32em; width: 14px; height: 15px; }
.laden-bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.laden-bilder figure { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--ecke-c); }
.laden-bilder figure.gross { grid-column: 1 / -1; aspect-ratio: 16 / 9; border-radius: var(--ecke-a); }
.laden-bilder img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--weich); }
.laden-bilder figure:hover img { transform: scale(1.04); }
.laden-bilder figcaption, .karte-hinweis { position: absolute; left: 14px; bottom: 14px; padding: 7px 14px; border-radius: var(--pill); font-size: 13.5px; font-weight: 500; background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.karte { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 16px 16px 34% 16px / 16px 16px 26% 16px; }
.karte img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--weich); }
.karte:hover img { transform: scale(1.04); }
.karte-hinweis { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.karte-hinweis svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ---------- Brillen ---------- */
.lookbook { margin-bottom: clamp(64px, 7vw, 104px); }
.lookbook-spur { list-style: none; margin: 0; padding: 0 var(--rand); display: flex; gap: clamp(12px, 1.4vw, 20px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--rand); scrollbar-width: none; overscroll-behavior-x: contain; }
.lookbook-spur::-webkit-scrollbar { display: none; }
@media (min-width: 1344px) { .lookbook-spur { padding-left: calc((100vw - var(--max)) / 2); scroll-padding-left: calc((100vw - var(--max)) / 2); } }
.lookbook-spur li { position: relative; flex: 0 0 clamp(260px, 27vw, 380px); aspect-ratio: 4 / 5; overflow: hidden; scroll-snap-align: start; border-radius: var(--ecke-a); background: var(--beige-hell); }
.lookbook-spur li:nth-child(3n+2) { border-radius: var(--ecke-c); }
.lookbook-spur li:nth-child(3n) { border-radius: var(--ecke-b); }
.lookbook-spur img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--weich); }
.lookbook-spur li:hover img { transform: scale(1.04); }
.look-titel { position: absolute; left: 14px; bottom: 14px; padding: 8px 15px; border-radius: var(--pill); font-size: 14px; font-weight: 700; background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.8); backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5); }
.lookbook-steuerung { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 22px; }
.lookbook-steuerung .muted { margin: 0; font-size: 14.5px; }
.pfeile { display: flex; gap: 8px; }
.pfeile [data-zurueck] svg { transform: rotate(180deg); }

.auswahl { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.auswahl-text .h3 { margin-bottom: 14px; }
.auswahl-text > p { color: var(--grau); }
.arten-links { list-style: none; margin: 22px 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.arten-links a { display: inline-block; padding: 9px 16px; border-radius: var(--pill); border: 1.5px solid rgba(54,49,44,.16); background: rgba(255,255,255,.55); font-weight: 500; font-size: 15px; text-decoration: none; transition: border-color .2s, background .2s; }
.arten-links a:hover { border-color: var(--terracotta); background: var(--weiss); }

/* Lupe: unscharfes Bild, scharf unter der Linse */
.lupe { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--ecke-b); background: var(--beige-hell); touch-action: pan-y; --x: 50%; --y: 50%; --r: clamp(80px, 11vw, 150px); cursor: crosshair; }
.lupe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lupe-unscharf img { filter: blur(9px) saturate(.9); transform: scale(1.04); }
.lupe-scharf { position: absolute; inset: 0; clip-path: circle(var(--r) at var(--x) var(--y)); }
.lupe-scharf img { transform: scale(1.12); transform-origin: var(--x) var(--y); }
.lupe-ring { position: absolute; left: var(--x); top: var(--y); width: calc(var(--r) * 2); height: calc(var(--r) * 2); margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1); border-radius: 50%; pointer-events: none; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.9), inset 0 10px 24px rgba(255,255,255,.35), 0 18px 40px -16px rgba(54,49,44,.45); }
.lupe-ring::after { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(50% 40% at 30% 20%, rgba(255,255,255,.55), transparent 70%); }
.lupe-hinweis { position: absolute; left: 14px; bottom: 14px; padding: 8px 15px; border-radius: var(--pill); font-size: 13.5px; font-weight: 500; background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.ohne-js .lupe-unscharf img { filter: none; }
.ohne-js .lupe-ring { display: none; }

.regal { margin-top: clamp(48px, 5vw, 72px); display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.4vw, 20px); }
.regal figure { margin: 0; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--ecke-c); }
.regal figure:nth-child(odd) { border-radius: var(--ecke-a); }
.regal img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--weich); }
.regal figure:hover img { transform: scale(1.05); }
.regal figure:nth-child(2) { transition-delay: .08s; } .regal figure:nth-child(3) { transition-delay: .16s; } .regal figure:nth-child(4) { transition-delay: .24s; }

/* ---------- Rodenstock ---------- */
.rodenstock { background: var(--beige-hell); overflow: hidden; }
.rodenstock .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: center; }
.rodenstock-logo { height: 48px; width: auto; margin-bottom: 26px; }
.rodenstock .h2 { margin-bottom: 18px; }
.rodenstock .lead { color: var(--grau); }
.zahlen { list-style: none; margin: 30px 0 10px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.zahlen li { padding: 18px 18px 16px; border-radius: 18px 18px 18px 40px; background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.85); }
.zahlen strong { display: block; white-space: nowrap; font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -.02em; line-height: 1.1; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.zahlen strong .vor { display: block; font-size: 13px; font-weight: 500; color: var(--grau); letter-spacing: 0; margin-bottom: 2px; }
.zahlen strong .leer { visibility: hidden; }
.zahlen > li > span { font-size: 14px; color: var(--grau); line-height: 1.4; display: block; }
.quelle { font-size: 13px; color: var(--grau); margin: 0 0 18px; }

/* ---------- Kontaktlinsen ---------- */
.kontaktlinsen .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: center; }
.kl-text .h2 { margin-bottom: 16px; }
.kl-text .lead { color: var(--grau); }
.zitat { margin: 6px 0 26px; }
.zitat blockquote { margin: 0; }
.zitat blockquote p { margin: 0 0 6px; font-weight: 700; font-size: clamp(20px, 1.7vw, 24px); letter-spacing: -.01em; line-height: 1.25; color: var(--tinte); }
.zitat figcaption { font-size: 14px; color: var(--grau); }
.hersteller { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; padding: 18px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); margin-bottom: 24px; }
.hersteller span { font-size: 14px; color: var(--grau); }
.hersteller img { filter: grayscale(1); opacity: .8; }
.preis-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.preis-zeile p { margin: 0; display: grid; }
.preis-zeile span { font-size: 14px; color: var(--grau); }
.preis { display: block; font-size: clamp(30px, 2.8vw, 40px); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.kl-bild { position: relative; }
.ecke-bild { margin: 0; aspect-ratio: 4 / 4.6; overflow: hidden; border-radius: 40px 40px clamp(110px, 14vw, 200px) 40px / 40px 40px clamp(90px, 12vw, 170px) 40px; }
.ecke-bild img { width: 100%; height: 100%; object-fit: cover; }
.kl-bild .linse-glas { left: -5%; top: 16%; }
.mehr-karte { position: absolute; left: 22px; bottom: 22px; display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 20px; border-radius: 20px 20px 20px 40px; text-decoration: none; font-weight: 700; z-index: 3; }
.mehr-karte svg { width: 16px; height: 16px; fill: none; stroke: var(--terracotta); stroke-width: 2.2; }

/* ---------- Sehanalyse ---------- */
.sehanalyse { background: var(--terra-hell); }
.ablauf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 22px); position: relative; --linie-oben: calc(var(--bildh, 300px) + 33px); }
.ablauf::before { content: ""; position: absolute; left: 0; right: 0; top: var(--linie-oben); height: 2px; background: rgba(177, 120, 94, .25); }
.ablauf::after { content: ""; position: absolute; left: 0; top: var(--linie-oben); height: 2px; width: calc(var(--fortschritt, 0) * 100%); background: var(--terracotta); transition: width .3s linear; }
.schritt { position: relative; }
.schritt-bild { aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 18px; border-radius: var(--ecke-a); }
.schritt:nth-child(even) .schritt-bild { border-radius: var(--ecke-c); }
.schritt-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--weich); }
.schritt:hover .schritt-bild img { transform: scale(1.04); }
.schritt .nr { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--weiss); color: var(--tinte); font-weight: 700; font-size: 13px; margin-bottom: 14px; box-shadow: 0 0 0 4px var(--terra-hell); transition: background .3s, color .3s; }
.schritt.aktiv .nr { background: var(--terracotta); color: var(--weiss); }
.schritt .h3 { margin-bottom: 6px; }
.schritt p { margin: 0; color: var(--grau); font-size: 15.5px; line-height: 1.5; }
.schritt:nth-child(2) { transition-delay: .08s; } .schritt:nth-child(3) { transition-delay: .16s; } .schritt:nth-child(4) { transition-delay: .24s; }
.sa-fuss { margin-top: clamp(40px, 4vw, 60px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; padding: 24px clamp(22px, 3vw, 36px); border-radius: 24px 24px 24px 60px; }
.sa-fuss p { margin: 0; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.sa-fuss p span { color: var(--grau); }
.sa-fuss .preis { margin: 0; }

/* ---------- Über ---------- */
.ueber .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 6vw, 100px); align-items: center; }
.ueber .h2 { margin-bottom: 18px; }
.ueber p { color: var(--grau); }
.ueber .lead { color: var(--tinte); }
.titel-liste { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.titel-liste li { padding: 8px 14px; border-radius: var(--pill); background: var(--salbei-hell); color: var(--salbei-text); font-weight: 500; font-size: 14.5px; }

/* ---------- Schluss: Glaskarte über unscharfem Ladenbild ---------- */
.schluss { position: relative; padding: clamp(90px, 10vw, 150px) 0; overflow: hidden; }
.schluss-bild { position: absolute; inset: 0; }
.schluss-bild img { width: 100%; height: 100%; object-fit: cover; filter: blur(6px) saturate(.95); transform: scale(1.06); }
.schluss-bild::after { content: ""; position: absolute; inset: 0; background: rgba(246, 243, 238, .22); }
.schluss .wrap { position: relative; }
.schluss-karte { max-width: 620px; padding: clamp(28px, 3.4vw, 48px); border-radius: 34px 34px 34px 96px / 34px 34px 34px 76px; }
.schluss-karte .h2 { margin-bottom: 12px; }
.schluss-karte > p:not(.label) { color: var(--grau); margin-bottom: 24px; }

/* ---------- Footer ---------- */
.fuss { background: var(--terracotta); color: var(--weiss); padding: 64px 0 36px; }
.fuss .zeile1 { display: flex; justify-content: space-between; align-items: end; gap: 30px; padding-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,.5); flex-wrap: wrap; }
.fuss .zeile1 .logo img { height: 52px; width: auto; }
.fuss .claim { width: min(380px, 100%); height: auto; }
.fuss-spalten { display: grid; grid-template-columns: 1fr auto; gap: 30px 60px; margin: 30px 0; align-items: start; }
.fuss .kontakte { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 20px 56px; }
.fuss .kontakte a { text-decoration: none; display: grid; gap: 2px; }
.fuss .kontakte span { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.92); }
.fuss .kontakte strong { font-size: 16.5px; font-weight: 700; }
.fuss-nav { display: grid; gap: 6px; }
.fuss-nav a { text-decoration: none; font-weight: 700; }
.fuss-nav a:hover, .fuss .kontakte a:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.fuss .unten { display: flex; justify-content: space-between; gap: 18px 30px; flex-wrap: wrap; align-items: center; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.35); font-size: 14.5px; font-weight: 500; }
.fuss .zeiten { margin: 0; }
.fuss .rechtliches { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.fuss .rechtliches a, .fuss .rechtliches button { color: var(--weiss); font: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Termin immer griffbereit ---------- */
.schwebe { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: flex; gap: 8px; align-items: center; transform: translateY(120px); opacity: 0; transition: transform .5s var(--weich), opacity .3s; }
.schwebe.da { transform: none; opacity: 1; }
.schwebe-wa { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.66); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 18px 40px -20px rgba(54,49,44,.55); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5); }
.schwebe-wa svg { width: 22px; height: 22px; fill: #1fa855; }
.termin-schwebe { display: inline-flex; align-items: center; gap: 10px; padding: 0 24px 0 18px; min-height: 54px; border-radius: var(--pill); background: var(--terracotta); color: var(--weiss); font-weight: 700; font-size: 15.5px; text-decoration: none; box-shadow: 0 18px 40px -18px rgba(54,49,44,.6), inset 0 1px 0 rgba(255,255,255,.25); transition: background .2s; }
.termin-schwebe:hover { background: var(--terra-dunkel); }
.termin-schwebe .punkt { width: 9px; height: 9px; border-radius: 50%; background: #fbe3d6; animation: puls 2.4s ease-out infinite; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(251,227,214,.8); } 70%,100% { box-shadow: 0 0 0 10px rgba(251,227,214,0); } }

.buchung[hidden] { display: none; }
.buchung { position: fixed; inset: 0; z-index: 120; }
.buchung-hinter { position: absolute; inset: 0; background: rgba(54,49,44,.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: einblenden .3s ease; }
.buchung-fenster { position: absolute; top: 12px; right: 12px; bottom: 12px; width: min(560px, calc(100% - 24px)); background: var(--papier); border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; box-shadow: -30px 0 70px -30px rgba(54,49,44,.55); animation: reinschieben .45s var(--weich); }
.buchung-kopf { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--linie); }
.buchung-kopf .label { margin: 0 0 2px; }
.buchung .zu { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--linie); background: var(--weiss); cursor: pointer; position: relative; flex: none; }
.buchung .zu span, .buchung .zu span::before { position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; background: var(--tinte); transform: translate(-50%, -50%) rotate(45deg); content: ""; }
.buchung .zu span::before { transform: translate(-50%, -50%) rotate(90deg); }
.buchung-inhalt { flex: 1; overflow-y: auto; overscroll-behavior: contain; background: #f4f5f8; }
.buchung-inhalt iframe { display: block; width: 100%; height: 900px; border: 0; }
.buchung-fuss { margin: 0; padding: 14px 22px; font-size: 14.5px; color: var(--grau); border-top: 1px solid var(--linie); }
.buchung-fuss a { color: var(--tinte); font-weight: 500; }
@keyframes einblenden { from { opacity: 0; } }
@keyframes reinschieben { from { transform: translateX(40px); opacity: 0; } }
body.buchung-offen { overflow: hidden; }

/* Cookie-Banner */
.cookie { position: fixed; z-index: 100; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(680px, calc(100% - 24px)); background: rgba(255,255,255,.86); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: var(--tinte); border-radius: 24px; padding: 24px 26px; border: 1px solid rgba(255,255,255,.9); box-shadow: 0 24px 60px -20px rgba(54,49,44,.45); }
.cookie[hidden] { display: none; }
.cookie h2 { font-size: 18px; font-weight: 700; margin: 0 0 8px; }
.cookie p { font-size: 14.5px; line-height: 1.5; margin: 0 0 16px; color: var(--grau); }
.cookie .knoepfe .btn { flex: 1 1 200px; }

/* ---------- Unterseiten ---------- */
.seiten-hero { padding: clamp(28px, 3vw, 48px) 0 0; }
.seiten-hero .kopf-text { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(28px, 3vw, 44px); }
.seiten-hero .h1 { font-size: clamp(36px, 4vw, 58px); }
.seiten-hero .lead { color: var(--grau); margin: 0 0 22px; }
.pfad { font-size: 13.5px; color: var(--grau); margin: 0 0 18px; }
.pfad a { text-decoration: none; }
.pfad a:hover { text-decoration: underline; }
.seiten-bild { max-width: 1440px; margin: 0 auto; padding: 0 clamp(12px, 2vw, 24px); position: relative; }
.seiten-bild figure { margin: 0; height: min(66vh, 46vw); min-height: 320px; overflow: hidden; border-radius: 40px 40px clamp(120px, 16vw, 240px) 40px / 40px 40px clamp(100px, 13vw, 200px) 40px; }
.seiten-bild img { width: 100%; height: 100%; object-fit: cover; }
.seiten-bild .hero-kontur { top: auto; bottom: -30px; right: auto; left: clamp(0px, 3vw, 50px); }

.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: center; }
.zwei.umgekehrt > :first-child { order: 2; }
.text-block .h2 { margin-bottom: 18px; }
.text-block > p { color: var(--grau); }
.text-block .lead { color: var(--tinte); }
.bild-gross { margin: 0; overflow: hidden; aspect-ratio: 4 / 3.4; border-radius: var(--ecke-a); }
.bild-gross.b { border-radius: var(--ecke-b); }
.bild-gross.c { border-radius: var(--ecke-c); }
.bild-gross img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--weich); }
.bild-gross:hover img { transform: scale(1.03); }
.bilderreihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(40px, 5vw, 64px); }
.bilderreihe figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--ecke-c); position: relative; }
.bilderreihe figure:nth-child(odd) { border-radius: var(--ecke-a); }
.bilderreihe img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--weich); }
.bilderreihe figure:hover img { transform: scale(1.04); }
.bilderreihe figcaption { position: absolute; left: 12px; bottom: 12px; padding: 6px 13px; border-radius: var(--pill); font-size: 13.5px; font-weight: 500; background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.bilderreihe figure:nth-child(2) { transition-delay: .08s; } .bilderreihe figure:nth-child(3) { transition-delay: .16s; }
.hell { background: var(--weiss); }
.beige { background: var(--beige-hell); }
.salbei { background: var(--salbei-hell); }
.terra { background: var(--terra-hell); }

.zitat-gross { max-width: 900px; margin: 0 auto; text-align: center; }
.zitat-gross blockquote { margin: 0; }
.zitat-gross blockquote p { font-weight: 700; font-size: clamp(24px, 2.6vw, 38px); letter-spacing: -.02em; line-height: 1.22; margin: 0 0 16px; text-wrap: balance; }
.zitat-gross figcaption { color: var(--grau); font-size: 15px; }

.drei { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.drei > li { padding: clamp(22px, 2.4vw, 32px); border-radius: 22px 22px 22px 56px; }
.drei .wort { display: block; font-weight: 700; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.02em; color: var(--terracotta); margin-bottom: 10px; }
.drei p { margin: 0; color: var(--grau); }

.faktenliste { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--linie); }
.faktenliste li { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--linie); }
.faktenliste .bm { margin-top: .32em; width: 14px; height: 15px; }

/* Reiter (Brillenarten, Kontaktlinsenarten) */
.reiter { display: flex; flex-wrap: wrap; gap: 8px; }
.reiter button { cursor: pointer; border: 1.5px solid rgba(54,49,44,.14); background: rgba(255,255,255,.6); border-radius: var(--pill); padding: 11px 18px; font-weight: 500; font-size: 15px; transition: background .2s, color .2s, border-color .2s; }
.reiter button:hover { border-color: rgba(54,49,44,.4); }
.reiter button[aria-selected="true"] { background: var(--tinte); border-color: var(--tinte); color: var(--papier); }
.panel[hidden] { display: none; }
.panel { animation: auftauchen .5s var(--weich); }
.panel .h3 { font-size: clamp(21px, 1.8vw, 26px); margin-bottom: 10px; }
.panel p { color: var(--grau); }
@keyframes auftauchen { from { opacity: 0; transform: translateY(8px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.chips { list-style: none; margin: 18px 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 6px 13px; border-radius: var(--pill); background: var(--beige-hell); font-size: 14px; font-weight: 500; }

/* Brillen-Finder */
.finder { border-radius: 30px 30px 30px 90px / 30px 30px 30px 70px; padding: clamp(22px, 3vw, 44px); }
.finder .buehne { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; margin-top: clamp(20px, 3vw, 32px); }
.glas-grafik, .auge { margin: 0; }
.glas-grafik svg { width: 100%; height: auto; display: block; overflow: visible; }
.glas-grafik .grund { fill: #f4f0ea; }
.glas-grafik .z-fern { fill: #d3dbc8; }
.glas-grafik .z-mitte { fill: #ead3b8; }
.glas-grafik .z-nah { fill: #eccfbd; }
.glas-grafik .rahmen, .glas-grafik .steg, .glas-grafik .buegel { fill: none; stroke: var(--tinte); stroke-width: 4.5; stroke-linejoin: round; stroke-linecap: round; }
.glas-grafik .art { opacity: 0; transition: opacity .5s ease; }
.glas-grafik[data-zeige="fern"] .art-fern, .glas-grafik[data-zeige="lese"] .art-lese, .glas-grafik[data-zeige="gleit"] .art-gleit, .glas-grafik[data-zeige="office"] .art-office { opacity: 1; }
.glas-grafik .beschriftung text { font: 700 16px "Now", sans-serif; fill: var(--tinte); text-anchor: middle; }
.glas-grafik .beschriftung text.klein { font-size: 12px; font-weight: 500; fill: var(--grau); }
.glas-grafik .beschriftung { transform: translateY(5px); transition: opacity .5s ease, transform .5s ease; }
.glas-grafik[data-zeige="fern"] .beschriftung.art-fern, .glas-grafik[data-zeige="lese"] .beschriftung.art-lese, .glas-grafik[data-zeige="gleit"] .beschriftung.art-gleit, .glas-grafik[data-zeige="office"] .beschriftung.art-office { transform: none; }
.glas-grafik .blick { fill: var(--terracotta); opacity: .85; }
.glas-grafik[data-zeige="fern"] .blick { animation: blick-fern 5s ease-in-out infinite; }
.glas-grafik[data-zeige="lese"] .blick { animation: blick-lese 5s ease-in-out infinite; }
.glas-grafik[data-zeige="gleit"] .blick { animation: blick-gleit 6s ease-in-out infinite; }
.glas-grafik[data-zeige="office"] .blick { animation: blick-office 6s ease-in-out infinite; }
@keyframes blick-fern { 0%,100% { transform: translate(-42px, -30px); } 50% { transform: translate(42px, -30px); } }
@keyframes blick-lese { 0%,100% { transform: translate(-36px, 34px); } 50% { transform: translate(36px, 34px); } }
@keyframes blick-gleit { 0%,15% { transform: translate(0, -50px); } 45%,55% { transform: translate(0, 28px); } 85%,100% { transform: translate(0, 62px); } }
@keyframes blick-office { 0%,20% { transform: translate(-30px, -40px); } 50% { transform: translate(30px, -40px); } 75%,100% { transform: translate(0, 50px); } }

/* Kontaktlinsen-Grafik */
.linsen { display: grid; grid-template-columns: 230px 1.25fr 1fr; gap: clamp(20px, 3vw, 48px); align-items: center; border-radius: 30px 30px 90px 30px / 30px 30px 70px 30px; padding: clamp(22px, 3vw, 44px); }
.reiter.senkrecht { flex-direction: column; align-self: stretch; justify-content: center; }
.reiter.senkrecht button { text-align: left; border-radius: 14px; }
.auge svg { width: 100%; height: auto; display: block; overflow: visible; }
.auge .augapfel { fill: var(--weiss); stroke: var(--beige); stroke-width: 2; }
.auge .netzhaut { fill: none; stroke: var(--terra-hell); stroke-width: 7; stroke-linecap: round; }
.auge .kammer { fill: rgba(142, 154, 127, .14); }
.auge .hornhaut { fill: none; stroke: var(--tinte); stroke-width: 3; }
.auge .iris { fill: none; stroke: var(--salbei); stroke-width: 7; stroke-linecap: round; }
.auge .augenlinse { fill: rgba(239, 235, 229, .9); stroke: var(--beige); stroke-width: 2; }
.auge .hinweis path { fill: none; stroke: var(--grau); stroke-width: 1; stroke-dasharray: 3 3; }
.auge .hinweis text { font: 500 14px "Now", sans-serif; fill: var(--grau); }
.auge .linse path { fill: none; stroke: var(--terracotta); stroke-width: 6; stroke-linecap: round; }
.auge .linse .hinweis path { stroke: var(--grau); stroke-width: 1; stroke-dasharray: 3 3; }
.auge .linse .reservoir { fill: rgba(142, 154, 127, .4); stroke: none; }
.auge .linse, .auge .tagnacht, .auge .vorne, .auge .seite, .auge .nur-kerato, .auge .nur-normal { transition: opacity .45s ease, transform .55s var(--weich); }
.auge .linse { opacity: 0; transform: translateX(-26px); }
.auge[data-zeige="weich"] .l-weich, .auge[data-zeige="form"] .l-form, .auge[data-zeige="orthok"] .l-orthok, .auge[data-zeige="kerato"] .l-kerato, .auge[data-zeige="skleral"] .l-skleral { opacity: 1; transform: none; }
.auge .nur-kerato { opacity: 0; }
.auge[data-zeige="kerato"] .nur-kerato { opacity: 1; }
.auge[data-zeige="kerato"] .nur-normal { opacity: 0; }
.auge .vorne { opacity: 0; transform: scale(.94); transform-origin: 210px 150px; }
.auge[data-zeige="iris"] .vorne { opacity: 1; transform: none; }
.auge[data-zeige="iris"] .seite { opacity: 0; }
.auge .lid { fill: var(--weiss); stroke: var(--tinte); stroke-width: 2.5; }
.auge .iris-print { fill: #a9b39a; }
.auge .print-muster path { stroke: var(--salbei-text); stroke-width: 3; stroke-linecap: round; opacity: .7; }
.auge .pupille { fill: var(--tinte); }
.auge .linsenrand { fill: none; stroke: var(--terracotta); stroke-width: 3; stroke-dasharray: 6 5; }
.auge[data-zeige="iris"] .print-muster { animation: drehen 24s linear infinite; transform-origin: 210px 150px; }
@keyframes drehen { to { transform: rotate(360deg); } }
.auge .tagnacht { opacity: 0; }
.auge[data-zeige="orthok"] .tagnacht { opacity: 1; }
.auge .tagnacht text { font: 500 13px "Now", sans-serif; fill: var(--grau); text-anchor: middle; }
.auge .himmel { fill: var(--tinte); }
.auge .mond { fill: var(--papier); }
.auge .sonne { fill: #e3b25c; }
.auge .strahlen { stroke: #e3b25c; stroke-width: 3; stroke-linecap: round; fill: none; }
.auge[data-zeige="orthok"] .nacht { animation: nacht 7s ease-in-out infinite; }
.auge[data-zeige="orthok"] .tag { animation: tag 7s ease-in-out infinite; }
.auge[data-zeige="orthok"] .l-orthok { animation: linse-nacht 7s ease-in-out infinite; }
.auge:not([data-zeige="orthok"]) .tag { opacity: 0; }
@keyframes nacht { 0%,42% { opacity: 1; } 50%,92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes tag { 0%,42% { opacity: 0; } 50%,92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes linse-nacht { 0%,42% { opacity: 1; transform: none; } 50%,92% { opacity: 0; transform: translateX(-26px); } 100% { opacity: 1; transform: none; } }

.weg ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.weg li { display: grid; gap: 6px; align-content: start; }
.weg .weg-bild { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--ecke-a); margin-bottom: 12px; }
.weg li:nth-child(2) .weg-bild { border-radius: var(--ecke-c); }
.weg .weg-bild img { width: 100%; height: 100%; object-fit: cover; }
.weg .nr { font-weight: 700; color: var(--terracotta); font-size: 14px; }
.weg strong { font-size: 18px; }
.weg li > span:last-child { color: var(--grau); font-size: 15.5px; line-height: 1.5; }
.weg li:nth-child(2) { transition-delay: .08s; } .weg li:nth-child(3) { transition-delay: .16s; }

.preis-karte { padding: clamp(22px, 2.6vw, 34px); border-radius: 22px 22px 22px 60px; display: grid; gap: 8px; align-content: start; }
.preis-karte span { color: var(--grau); font-size: 14.5px; }

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
  .linsen { grid-template-columns: 1fr 1fr; }
  .reiter.senkrecht { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; }
  .reiter.senkrecht button { border-radius: var(--pill); }
  .ablauf { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .ablauf::before, .ablauf::after { display: none; }
  .kacheln ul { grid-template-columns: 1fr 1fr; }
  .marken .wrap { flex-direction: column; align-items: flex-start; }
  .logos { justify-content: flex-start; }
}
@media (max-width: 960px) {
  .kopfzeile, .termin .wrap, .konzept .wrap, .anfahrt .wrap, .auswahl, .rodenstock .wrap, .kontaktlinsen .wrap, .ueber .wrap, .zwei, .finder .buehne, .seiten-hero .kopf-text { grid-template-columns: 1fr; }
  .zwei.umgekehrt > :first-child { order: 0; }
  .hero-bild { height: auto; min-height: 0; aspect-ratio: 4 / 3.1; border-radius: 30px 30px 30px 110px / 30px 30px 30px 90px; }
  .hero-bild img { object-position: 46% 40%; }
  .hero-karte { position: relative; right: auto; bottom: auto; width: auto; margin: -70px 10px 0; }
  .hero-kontur { bottom: auto; top: -18px; left: auto; right: 6px; width: 120px; }
  .kacheln { padding-top: 48px; }
  .termin-info { position: static; }
  .form-bild { max-width: 480px; margin: 0 auto; }
  .form-bild.hoch { margin: 0 auto; }
  .weg ol { grid-template-columns: 1fr; }
  .bilderreihe { grid-template-columns: 1fr 1fr; }
  .bilderreihe figure:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .drei { grid-template-columns: 1fr; }
  .fuss-spalten { grid-template-columns: 1fr; }
}
/* ---------- Handy ---------- */
@media (max-width: 700px) {
  .kopf { padding: 8px 8px 0; }
  .kopf-leiste { min-height: 58px; border-radius: 18px; padding: 0 8px 0 16px; }
  .hero-start { padding-top: 78px; }
  .hero-buehne { padding: 0 8px; }
  .hero-bild { aspect-ratio: 4 / 3.8; }
  .hero-bild img { object-position: 44% 40%; }
  .hero-kontur { display: none; }
  .hero-karte { margin: -36px 6px 0; padding: 24px 20px; border-radius: 26px 26px 26px 64px / 26px 26px 26px 54px; }
  .hero-titel { font-size: clamp(30px, 8.4vw, 38px); }
  .schwebe { display: none; }
  .cookie { bottom: calc(10px + env(safe-area-inset-bottom)); padding: 18px 18px 16px; }
  .cookie h2 { font-size: 16px; } .cookie p { font-size: 13px; line-height: 1.45; margin-bottom: 12px; }
  .cookie .knoepfe { flex-wrap: nowrap; gap: 8px; } .cookie .knoepfe .btn { flex: 1 1 0; min-height: 44px; padding: 0 10px; }
  .vorteile { grid-template-columns: 1fr; }
  .ablauf { grid-template-columns: 1fr; }
  .schritt-bild { aspect-ratio: 4 / 3; }
  .logos { gap: 20px 28px; }
  .laden-bilder { gap: 10px; }
  .regal { grid-template-columns: 1fr 1fr; }
  .zahlen { grid-template-columns: 1fr; }
  .zahlen li { display: flex; align-items: baseline; gap: 14px; }
  .zahlen strong { margin: 0; min-width: 4.6em; }
  .kalender iframe { height: 980px; }
  .buchung-fenster { inset: 0; width: 100%; border-radius: 0; animation-name: hochschieben; }
  .reiter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * clamp(22px, 3vw, 40px)); padding: 0 clamp(22px, 3vw, 40px) 4px; }
  .reiter button { flex: none; }
  .knoepfe .btn { flex: 1 1 auto; }
  .fuss .kontakte { grid-template-columns: 1fr; }
  .seiten-bild figure { height: auto; aspect-ratio: 4 / 3.2; min-height: 0; border-radius: 26px 26px 90px 26px / 26px 26px 74px 26px; }
  .lookbook-steuerung .pfeile { display: none; }
  .mehr-karte { left: 12px; bottom: 12px; right: 12px; justify-content: space-between; }
}
@keyframes hochschieben { from { transform: translateY(40px); opacity: 0; } }

/* Anfahrt-Seite */
.karte.gross { aspect-ratio: 4 / 3.3; border-radius: var(--ecke-b); }
.kontaktwege a { text-decoration: none; }
.kontaktwege a:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.text-block .arten { margin: 22px 0 26px; }
.text-block .chips { margin-bottom: 0; }


/* ================= Fassung 4 (10.11.) ================= */
/* Zweiter Weg: Telefon statt WhatsApp */
.tel-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 15px; text-decoration: none; padding: 12px 6px; }
.tel-link svg { width: 17px; height: 17px; fill: var(--terracotta); flex: none; }
.tel-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.btn-tel svg { width: 17px; height: 17px; fill: var(--terracotta); flex: none; }
.btn-ig svg, .btn-ig-voll svg { width: 18px; height: 18px; flex: none; }
.btn-ig-voll { background: var(--tinte); color: var(--papier); }
.btn-ig-voll:hover { background: #24201d; }

/* Schwebender Kontakt (Desktop): Telefon + Termin */
.schwebe-tel { height: 54px; min-width: 54px; padding: 0 17px; border-radius: var(--pill); display: inline-flex; align-items: center; justify-content: center; gap: 0; background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 18px 40px -18px rgba(54,49,44,.45); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5); color: var(--tinte); text-decoration: none; font-weight: 700; font-size: 15px; }
.schwebe-tel svg { width: 19px; height: 19px; fill: var(--terracotta); flex: none; }
.schwebe-nummer { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .45s var(--weich), margin .45s var(--weich); }
.schwebe-tel:hover .schwebe-nummer, .schwebe-tel:focus-visible .schwebe-nummer { max-width: 150px; margin-left: 10px; }

/* Event-Störer, wird aus /data/events.json gefüllt */
.event-platz { position: absolute; z-index: 3; top: clamp(16px, 2.4vw, 34px); right: clamp(30px, 4vw, 64px); }
.stoerer { position: relative; width: clamp(134px, 11vw, 158px); aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 16px; text-align: center; color: var(--tinte); text-decoration: none; background: rgba(255,255,255,.64); border: 1px solid rgba(255,255,255,.92); box-shadow: 0 26px 50px -26px rgba(54,49,44,.6), inset 0 1px 0 rgba(255,255,255,.85); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); rotate: -8deg; scale: .5; opacity: 0; transition: scale .8s cubic-bezier(.3,1.6,.5,1), opacity .4s, rotate .5s var(--weich); }
.stoerer::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1.5px dashed rgba(177,120,94,.6); animation: drehen 46s linear infinite; }
.stoerer.da { scale: 1; opacity: 1; }
.stoerer:hover { rotate: -2deg; }
.stoerer > span { position: relative; }
.stoerer-tag { font-size: 11.5px; font-weight: 500; letter-spacing: .03em; color: var(--grau); }
.stoerer-datum { font-size: clamp(28px, 2.5vw, 35px); font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--terracotta); }
.stoerer-titel { font-size: 12.5px; font-weight: 700; line-height: 1.2; max-width: 11ch; }
.stoerer-status { margin-top: 3px; padding: 3px 10px; border-radius: var(--pill); background: var(--tinte); color: var(--papier); font-size: 11px; font-weight: 700; }
@keyframes drehen { to { rotate: 360deg; } }

/* Laufband (Logos auf dem Handy, Kundenstimmen) */
.laufband { overflow: hidden; }
.laufband-spur { display: flex; width: max-content; list-style: none; margin: 0; padding: 0; }
@keyframes laufen { to { transform: translateX(-50%); } }
.marken .wrap { margin-bottom: 20px; }
.marken-band { max-width: calc(var(--max) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); }
.marken-band .laufband-spur { width: auto; }
.marken-band .klon { display: none; }
@media (max-width: 960px) {
  .marken-band { max-width: none; padding: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
  .marken-band .laufband-spur { width: max-content; flex-wrap: nowrap; justify-content: flex-start; gap: 0; animation: laufen 32s linear infinite; }
  .marken-band .laufband-spur li { flex: none; padding: 0 22px; display: flex; align-items: center; }
  .marken-band .klon { display: flex; }
}

/* Kundenstimmen */
.stimmen .kopfzeile { align-items: center; }
.bewertung { justify-self: end; display: flex; align-items: center; gap: 16px; padding: 16px 24px 16px 22px; border-radius: 22px 22px 22px 52px / 22px 22px 22px 42px; text-decoration: none; color: var(--tinte); }
.bewertung .note { font-size: 42px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.bewertung .sterne { display: flex; gap: 2px; }
.bewertung .sterne svg { width: 18px; height: 18px; fill: var(--terracotta); }
.bewertung .quelle-text { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.bewertung .quelle-text span { color: var(--grau); text-decoration: underline; text-underline-offset: 3px; }
.stimmen-band { padding: 8px 0 28px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.stimmen-band .laufband-spur { animation: laufen 80s linear infinite; }
.stimmen-band:hover .laufband-spur, .stimmen-band:focus-within .laufband-spur { animation-play-state: paused; }
.stimme { flex: none; width: clamp(280px, 29vw, 370px); margin-right: clamp(14px, 1.6vw, 22px); padding: 26px 26px 22px; display: flex; flex-direction: column; justify-content: space-between; border-radius: var(--ecke-c); }
.stimme:nth-child(3n+1) { border-radius: var(--ecke-a); }
.stimme:nth-child(3n) { border-radius: var(--ecke-b); }
.stimme blockquote { margin: 0; }
.stimme blockquote p { margin: 0 0 18px; font-size: 16.5px; line-height: 1.5; }
.stimme .wer { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.stimme .wer::before { content: "★★★★★"; color: var(--terracotta); letter-spacing: 1px; font-size: 13px; }
.stimmen-hinweis { margin: 0 0 clamp(36px, 4vw, 56px); font-size: 13px; color: var(--grau); }
.presse { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 48px; padding-top: 28px; border-top: 1px solid var(--linie); }
.presse .label { margin: 0; }
.presse ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 22px 52px; }
.presse a { display: flex; flex-direction: column; gap: 9px; text-decoration: none; color: var(--grau); font-size: 13px; }
.presse img { height: 26px; width: auto; filter: grayscale(1); opacity: .82; transition: filter .3s, opacity .3s; }
.presse img[src*="hasepost"] { height: 21px; }
.presse img[src*="opticvs"] { height: 18px; }
.presse a:hover img { filter: none; opacity: 1; }
.presse a:hover span { color: var(--tinte); text-decoration: underline; text-underline-offset: 3px; }

/* Instagram-Feed */
.ig-profil .lead { margin: 0 0 18px; color: var(--grau); }
.ig-feed .lookbook-spur li { flex-basis: clamp(230px, 21vw, 300px); }
.ig-feed a { position: absolute; inset: 0; display: block; color: var(--tinte); text-decoration: none; }
.ig-thema { position: absolute; left: 12px; top: 12px; padding: 6px 12px; border-radius: var(--pill); font-size: 12.5px; font-weight: 500; background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.92); backdrop-filter: blur(12px) saturate(1.5); -webkit-backdrop-filter: blur(12px) saturate(1.5); }
.ig-reel { position: absolute; right: 12px; top: 12px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.ig-reel svg { width: 13px; height: 13px; fill: var(--tinte); translate: 1px 0; }
.ig-titel { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 12px 14px; border-radius: 16px 16px 16px 30px / 16px 16px 16px 26px; background: rgba(255,255,255,.74); border: 1px solid rgba(255,255,255,.92); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5); font-weight: 700; font-size: 15px; line-height: 1.3; transition: transform .45s var(--weich); }
.ig-feed li:hover .ig-titel { transform: translateY(-4px); }

/* Sehanalyse: großes Bild wie auf der alten Seite */
.sa-gross { margin: 0 0 clamp(40px, 4.5vw, 64px); aspect-ratio: 21 / 9; overflow: hidden; border-radius: 40px 40px 40px clamp(110px, 14vw, 200px) / 40px 40px 40px clamp(90px, 12vw, 170px); }
.sa-gross img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--weich); }
.sa-gross:hover img { transform: scale(1.03); }

/* Anfahrt: Karte über die ganze Breite, Sonnenbrillen-Bild */
.laden-bilder .karte.breit { grid-column: 1 / -1; aspect-ratio: 16 / 7; }
.sonne-bild { position: relative; }
.sonne-bild .linse-glas { left: -5%; top: 16%; }

@media (max-width: 960px) {
  /* Termin: erst der Kalender, die Preise stehen im Kalender ohnehin */
  .termin .wrap { display: flex; flex-direction: column; }
  .termin-info { display: contents; }
  .termin .kalender { order: 1; margin: 20px 0 28px; }
  .termin-info .arten { display: none; }
  .termin-info .oeffnung { order: 2; margin-bottom: 14px; }
  .termin-info .alternativ { order: 3; }
  .stimmen .kopfzeile { align-items: start; }
  .bewertung { justify-self: start; }
  .sa-gross { aspect-ratio: 4 / 3; border-radius: 26px 26px 26px 90px / 26px 26px 26px 74px; }
  .laden-bilder .karte.breit { aspect-ratio: 16 / 9; }
}
@media (max-width: 700px) {
  .event-platz { top: 10px; right: 14px; }
  .stoerer { width: 112px; padding: 10px; gap: 2px; }
  .stoerer-datum { font-size: 25px; }
  .stoerer-titel { font-size: 11px; }
  .stoerer-tag { font-size: 10.5px; }
  .stoerer-status { font-size: 10px; padding: 2px 8px; }
  .stimme { width: 82vw; }
  .ig-feed .lookbook-spur li { flex-basis: 68vw; }
  .presse ul { gap: 20px 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .laufband-spur { animation: none !important; }
  .laufband .klon { display: none !important; }
  .stimmen-band, .marken-band { overflow-x: auto; }
  .stoerer::before { animation: none; }
}
/* Instagram-Kacheln: große Rundung unten rechts, damit Thema und Reel-Zeichen oben frei bleiben */
.ig-feed .lookbook-spur li, .ig-feed .lookbook-spur li:nth-child(3n+2), .ig-feed .lookbook-spur li:nth-child(3n) { border-radius: 16px 30px 34% 16px / 16px 30px 22% 16px; }
.ig-titel { right: 22%; }
@media (min-width: 961px) { .hero-start .event-platz { top: clamp(84px, 7vw, 104px); } }

/* ================= Fassung 5 ================= */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600 700; font-display: swap; src: url(/assets/fonts/cormorant-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: "Cormorant Garamond"; font-style: normal; font-weight: 600 700; font-display: swap; src: url(/assets/fonts/cormorant-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; }
.hervor { display: block; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 1.34em; line-height: .95; letter-spacing: -.01em; color: var(--terracotta); margin: .06em 0 .1em -.02em; }
.fuss .claim { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: clamp(30px, 3.4vw, 48px); line-height: 1; letter-spacing: -.005em; color: var(--weiss); }

/* Presse-Leiste: nur Logos, in Originalfarbe */
.presse-leiste { padding: clamp(30px, 3.5vw, 48px) 0 clamp(50px, 5vw, 72px); }
.presse-leiste .presse { border-top: 1px solid var(--linie); padding-top: 28px; }
.presse-leiste ul { align-items: center; gap: 22px clamp(36px, 5vw, 68px); }
.presse-leiste a { display: block; padding: 6px 0; }
.presse-leiste img { filter: none; opacity: .9; height: 30px; }
.presse-leiste img[src*="hasepost"] { height: 22px; }
.presse-leiste img[src*="opticvs"] { height: 20px; }
.presse-leiste img[src*="hfak"] { height: 34px; }
.presse-leiste a:hover img { opacity: 1; }
.stimmen-hinweis { margin-bottom: 0; }

/* Brillen-Finder: Wellness und Vorher-nachher */
.glas-grafik .z-wellness { fill: #e6dccb; }
.glas-grafik[data-zeige="wellness"] .art-wellness { opacity: 1; }
.glas-grafik[data-zeige="wellness"] .blick { animation: blick-office 6s ease-in-out infinite; }
.vergleich { position: relative; margin: 20px 0 22px; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 16px 16px 30% 16px / 16px 16px 22% 16px; --pos: 50%; background: var(--beige-hell); }
.vergleich img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vergleich-links { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.vergleich-strich { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--weiss); box-shadow: 0 0 0 1px rgba(54,49,44,.12); pointer-events: none; }
.vergleich-strich::after { content: ""; position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 8px 20px -10px rgba(54,49,44,.6); backdrop-filter: blur(8px); }
.vergleich input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.vg-label { position: absolute; top: 10px; padding: 4px 10px; border-radius: var(--pill); font-size: 12px; font-weight: 500; background: rgba(255,255,255,.78); pointer-events: none; }
.vg-label.links { left: 10px; } .vg-label.rechts { right: 10px; }
.vergleich figcaption { position: absolute; left: 10px; bottom: 8px; font-size: 11px; color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(0,0,0,.4); pointer-events: none; }

/* Konzept: Tablett-Bild als Rechteck mit Ecke statt Blob */
.zwei .bild-gross { aspect-ratio: 4 / 4.4; }

/* Anfahrt: Parken */
.wegschritte { list-style: none; margin: 18px 0 26px; padding: 0; display: grid; gap: 12px; }
.wegschritte li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.wegschritte .nr { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--terracotta); color: var(--weiss); font-weight: 700; font-size: 14px; }
.skizze { margin: 0; overflow: hidden; border-radius: var(--ecke-b); box-shadow: 0 30px 60px -44px rgba(54,49,44,.5); }
.skizze img { width: 100%; height: auto; display: block; }
.parken-bilder { margin-top: clamp(28px, 3vw, 44px); }

/* ---------- Produkte im Laden ---------- */
.im-laden .kopfzeile { align-items: end; }
.im-laden-steuerung { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 22px; }
.im-laden .reiter { margin: 0; }
.produkt-band { margin-bottom: clamp(30px, 3vw, 48px); }
.produkt-spur li, .produkt-spur li:nth-child(3n+2), .produkt-spur li:nth-child(3n) { flex: 0 0 clamp(220px, 19vw, 270px); aspect-ratio: auto; overflow: visible; background: none; border-radius: 0; }
.produkt a { display: block; text-decoration: none; color: var(--tinte); }
.produkt-bild { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #fff; border-radius: 16px 16px 30% 16px / 16px 16px 22% 16px; box-shadow: 0 18px 40px -32px rgba(54,49,44,.5); }
.produkt-bild img { width: 100%; height: 100%; object-fit: contain; transition: transform .9s var(--weich); }
.produkt a:hover .produkt-bild img { transform: scale(1.06) rotate(-1deg); }
.produkt-info { display: flex; flex-direction: column; gap: 7px; padding: 14px 4px 0; }
.produkt-logo { height: 14px; width: auto; max-width: 120px; object-fit: contain; object-position: left; filter: grayscale(1); opacity: .85; }
.produkt-name { font-weight: 700; font-size: 15px; line-height: 1.3; }
.produkt-hinweis { align-self: flex-start; padding: 2px 9px; border-radius: var(--pill); background: var(--beige-hell); font-size: 12px; color: var(--grau); }
.produkt-raster { list-style: none; margin: 0 0 clamp(40px, 4vw, 60px); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: clamp(18px, 2vw, 28px) clamp(14px, 1.6vw, 22px); }
.raster-titel { margin: 0 0 18px; }
.raster-titel .muted { font-weight: 500; }

/* Kampagnenbilder im Lookbook: Markenlogo am Bild (Andy Wolf verlangt das Logo gut lesbar beim Bild) */
.look-marke { position: absolute; left: 12px; bottom: 12px; padding: 8px 12px; border-radius: var(--pill); background: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.95); backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); display: flex; align-items: center; }
.look-marke img { height: 14px; width: auto; max-width: 120px; position: static; object-fit: contain; }
.lookbook-spur li .look-marke img { width: auto; height: 14px; }

/* Markenleiste: Logos verlinkt */
.logos a { display: block; }
.marken-alle { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--tinte); }
.marken .label { width: 100%; }

/* Markenseiten */
.marken-kopf { display: grid; grid-template-columns: 1fr .9fr; gap: clamp(28px, 5vw, 80px); align-items: center; margin-bottom: clamp(20px, 3vw, 40px); }
.marken-logo-gross { height: 30px; width: auto; max-width: 220px; margin-bottom: 22px; }
.marken-kopf-text .lead { color: var(--grau); margin: 0 0 22px; }
.marken-kopf-bild { margin: 0; aspect-ratio: 4 / 4.6; overflow: hidden; border-radius: 40px 40px clamp(110px, 14vw, 200px) 40px / 40px 40px clamp(90px, 12vw, 170px) 40px; }
.marken-kopf-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.marken-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 28px); }
.marken-karte a { display: block; text-decoration: none; color: var(--tinte); }
.marken-karte-bild { display: block; aspect-ratio: 4 / 4.4; overflow: hidden; border-radius: var(--ecke-b); background: #fff; }
.marken-karte:nth-child(3n+2) .marken-karte-bild { border-radius: var(--ecke-c); }
.marken-karte-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transition: transform 1.2s var(--weich); }
.marken-karte-bild img.freisteller { object-fit: contain; padding: 12%; }
.marken-karte a:hover .marken-karte-bild img { transform: scale(1.04); }
.marken-karte-text { display: flex; flex-direction: column; gap: 8px; padding: 16px 4px 0; font-size: 15px; color: var(--grau); }
.marken-karte-text img { height: 20px; width: auto; max-width: 160px; object-fit: contain; object-position: left; margin-bottom: 4px; }
.marken-karte-text strong { color: var(--tinte); font-size: 14px; }
.seiten-hero.schmal .kopf-text { margin-bottom: clamp(36px, 4vw, 56px); }
@media (max-width: 960px) {
  .marken-kopf { grid-template-columns: 1fr; }
  .marken-raster { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .produkt-spur li, .produkt-spur li:nth-child(3n+2), .produkt-spur li:nth-child(3n) { flex-basis: 62vw; }
  .produkt-raster { grid-template-columns: 1fr 1fr; }
  .marken-raster { grid-template-columns: 1fr; }
  .marken-alle { display: none; }
}
.produkt-spur .produkt-logo, .produkt-raster .produkt-logo { width: auto; height: 14px; max-width: 120px; object-fit: contain; }
.produkt-spur .produkt-bild img { object-fit: contain; }

/* ---------- Journal ---------- */
.journal-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 28px); }
.journal-karte a { display: block; text-decoration: none; color: var(--tinte); }
.journal-karte-bild { display: block; aspect-ratio: 4 / 4.2; overflow: hidden; border-radius: var(--ecke-b); background: var(--beige-hell); }
.journal-karte:nth-child(3n+2) .journal-karte-bild { border-radius: var(--ecke-c); }
.journal-karte-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--weich); }
.journal-karte a:hover .journal-karte-bild img { transform: scale(1.04); }
.journal-karte-text { display: flex; flex-direction: column; gap: 8px; padding: 16px 4px 0; color: var(--grau); font-size: 15px; }
.journal-karte-text strong { color: var(--tinte); font-size: 19px; line-height: 1.25; letter-spacing: -.01em; }
.journal-kategorie { align-self: flex-start; padding: 4px 11px; border-radius: var(--pill); background: var(--terra-hell); color: var(--tinte); font-size: 12.5px; font-weight: 500; }
.journal-leiste .kopfzeile { align-items: end; }
.artikel-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(30px, 5vw, 80px); align-items: start; }
.artikel-text { max-width: 720px; }
.artikel-text > p { font-size: 17px; line-height: 1.7; color: var(--tinte); }
.artikel-text .h3 { margin: 34px 0 10px; }
.artikel-text .faktenliste { margin: 6px 0 20px; }
.artikel-zitat { margin: 30px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--terracotta); }
.interview-frage { margin: 30px 0 6px; font-weight: 700; color: var(--grau); }
.interview-frage + .artikel-zitat { margin-top: 8px; }
.artikel-logo { margin: 22px 0; }
.artikel-logo img { filter: none; }
.artikel-vergleich { margin: 26px 0; }
.artikel-quelle { font-size: 14px; color: var(--grau); margin-top: 34px; }
.fragen details { border-bottom: 1px solid var(--linie); padding: 14px 0; }
.fragen summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.fragen summary::after { content: "+"; color: var(--terracotta); font-size: 20px; line-height: 1; }
.fragen details[open] summary::after { content: "–"; }
.fragen details p { margin: 10px 0 0; color: var(--grau); }
.artikel-seite { position: sticky; top: 110px; padding: 24px; border-radius: 22px 22px 22px 54px / 22px 22px 22px 44px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.artikel-seite p { margin: 0; }
.artikel-bild { aspect-ratio: 4 / 5; }
@media (max-width: 960px) { .journal-raster { grid-template-columns: 1fr 1fr; } .artikel-wrap { grid-template-columns: 1fr; } .artikel-seite { position: static; } }
@media (max-width: 700px) { .journal-raster { grid-template-columns: 1fr; } }

/* Prüfer-Runde Fassung 5 */
body { overflow-wrap: break-word; }
h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; }
.artikel-logo img { filter: grayscale(1); opacity: .85; }
.skizze { border-radius: 24px 24px 24px 64px / 24px 24px 24px 52px; }
.artikel-bild img.freisteller, .marken-kopf-bild img.freisteller { object-fit: contain; background: #fff; padding: 10%; }
.artikel-bild:has(img.freisteller) { background: #fff; }

/* Buchungskasten hervorheben */
.kalender { border: 2px solid var(--terracotta); box-shadow: 0 0 0 10px rgba(177,120,94,.13), 0 50px 90px -40px rgba(177,120,94,.6); }
.kalender-kopf { display: flex; align-items: center; gap: 12px; padding: 16px 24px; background: var(--terracotta); color: var(--weiss); font-weight: 700; font-size: 16px; letter-spacing: -.005em; }
.kalender-kopf .punkt { width: 10px; height: 10px; border-radius: 50%; background: #fbe3d6; flex: none; animation: puls 2.4s ease-out infinite; }
@media (max-width: 700px) { .kalender { box-shadow: 0 0 0 6px rgba(177,120,94,.13), 0 30px 60px -36px rgba(177,120,94,.6); } .kalender-kopf { padding: 14px 18px; font-size: 15px; } }