/* Briede Optik & Kontaktlinsen · Website-Grundlage (Fassung 3, 10.11.2026)
   Terracotta exakt aus dem Briede-Designsystem (#b1785e), Salbei als zweite Farbe.
   Statt Papierstruktur: Glas-Optik mit Unschärfe. Ecken unregelmäßig wie die Bildmarke. */

@font-face { font-family: "Now"; src: url("../fonts/now-light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Now"; src: url("../fonts/now-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Now"; src: url("../fonts/now-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Now"; src: url("../fonts/now-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Now"; src: url("../fonts/now-black.woff2") format("woff2"); font-weight: 900; font-display: swap; }

:root {
  /* Flächen */
  --papier: #f6f3ee;
  --beige-hell: #efebe5;
  --beige: #cac5ba;
  --weiss: #ffffff;
  /* Text: warmes Dunkel statt hartem Schwarz */
  --tinte: #36312c;
  --grau: #625a52;
  /* Terracotta aus dem Designsystem */
  --terracotta: #b1785e;
  --terra-dunkel: #9d6850;   /* nur Hover */
  --terra-hell: #f3e6dd;
  /* Salbei */
  --salbei: #8e9a7f;
  --salbei-hell: #e6e9df;
  --salbei-text: #4d5743;
  --linie: rgba(54, 49, 44, .12);

  /* Glas */
  --glas-flaeche: linear-gradient(140deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .38));
  --glas-rand: rgba(255, 255, 255, .78);
  --glas-filter: blur(22px) saturate(1.5);
  --glas-schatten: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .3), 0 30px 70px -36px rgba(54, 49, 44, .42);

  /* Unregelmäßige Ecken, angelehnt an die Bildmarke */
  --ecke: 30px 30px 30px 30px;
  --ecke-a: 34% 16px 30px 16px / 26% 16px 30px 16px;
  --ecke-b: 16px 30px 34% 16px / 16px 30px 26% 16px;
  --ecke-c: 16px 34% 16px 30px / 16px 22% 16px 30px;
  --pill: 999px;

  --rand: clamp(20px, 5vw, 72px);
  --max: 1200px;

  --h1: clamp(34px, 3.6vw, 52px);
  --h2: clamp(28px, 2.8vw, 40px);
  --h3: clamp(18px, 1.35vw, 20px);
  --text: clamp(16px, 1.05vw, 17px);
  --gross: clamp(17px, 1.2vw, 19px);
  --weich: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0; background: var(--papier); color: var(--tinte);
  font: 400 var(--text)/1.6 "Now", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); }

/* Typografie: gemischte Schreibweise, Now Bold */
.h1, .h2 { font-weight: 700; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.h1 { font-size: var(--h1); line-height: 1.08; }
.h2 { font-size: var(--h2); line-height: 1.12; }
.h3 { font-size: var(--h3); font-weight: 700; line-height: 1.28; letter-spacing: -.005em; margin: 0; }
.h3.gross { font-size: clamp(21px, 1.8vw, 26px); }
.label { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--grau); margin: 0 0 16px; }
.label .bm { width: 14px; height: 15px; }
.lead { font-size: var(--gross); line-height: 1.58; }
.muted { color: var(--grau); }
p { margin: 0 0 1em; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: var(--pill);
  font: 700 15.5px/1 "Now", sans-serif; letter-spacing: .005em; text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; transition: background .25s, color .25s, border-color .25s, transform .25s var(--weich), box-shadow .25s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-termin { background: var(--terracotta); color: var(--weiss); box-shadow: 0 12px 26px -16px rgba(177, 120, 94, .9); }
.btn-termin:hover { background: var(--terra-dunkel); }
.btn-dunkel { background: var(--tinte); color: var(--papier); }
.btn-dunkel:hover { background: #4a433d; }
.btn-hell { background: transparent; color: var(--tinte); border-color: rgba(54, 49, 44, .28); }
.btn-hell:hover { border-color: var(--tinte); background: rgba(255, 255, 255, .55); }
.btn-weiss { background: var(--weiss); color: var(--tinte); }
.btn-glas { background: rgba(255, 255, 255, .55); color: var(--tinte); border-color: var(--glas-rand); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.btn-wa { background: rgba(255, 255, 255, .6); color: var(--tinte); border-color: rgba(54, 49, 44, .14); }
.btn-wa svg { width: 18px; height: 18px; fill: #1fa855; flex: none; }
.btn-wa:hover { border-color: #1fa855; background: var(--weiss); }
.btn-glas svg { width: 17px; height: 17px; flex: none; }
.btn .pfeil-r { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.rund-knopf { width: 46px; height: 46px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; border: 1.5px solid rgba(54, 49, 44, .16); background: rgba(255, 255, 255, .6); color: var(--tinte); cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }
.rund-knopf:hover { background: var(--weiss); border-color: rgba(54, 49, 44, .4); }
.rund-knopf svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.mehr { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: none; color: var(--tinte); margin-top: 8px; }
.mehr svg { width: 18px; height: 18px; fill: none; stroke: var(--terracotta); stroke-width: 2; transition: transform .25s var(--weich); }
.mehr:hover svg { transform: translateX(4px); }
.knoepfe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Bildmarke als Aufzählung */
.bm { width: 1em; height: 1.05em; fill: var(--terracotta); flex: none; }

/* Glas */
.glas { position: relative; background: var(--glas-flaeche); border: 1px solid var(--glas-rand); box-shadow: var(--glas-schatten); backdrop-filter: var(--glas-filter); -webkit-backdrop-filter: var(--glas-filter); }
.glas::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 70% at 12% 0%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 55%); opacity: .7; }
.glas > * { position: relative; }

/* Kleine Glaslinse, Form angelehnt an die Bildmarke: leicht vergrößernd, hell, mit Lichtkante */
.linse-glas { position: absolute; width: clamp(96px, 11vw, 150px); aspect-ratio: 1 / 1.05; z-index: 2; pointer-events: none;
  border-radius: 56% 44% 52% 48% / 46% 52% 48% 54%; rotate: -14deg;
  background: linear-gradient(160deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .04) 60%);
  border: 1.5px solid rgba(255, 255, 255, .85);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, .7), inset 0 -10px 24px rgba(177, 120, 94, .12), 0 24px 44px -22px rgba(54, 49, 44, .45);
  backdrop-filter: blur(5px) saturate(1.35) brightness(1.08); -webkit-backdrop-filter: blur(5px) saturate(1.35) brightness(1.08); }
.linse-glas::after { content: ""; position: absolute; left: 16%; top: 10%; width: 38%; height: 22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .8), transparent); rotate: -20deg; }
.linse-glas.gross { width: clamp(120px, 14vw, 190px); }

/* Fotos in Logo-Form */
.form { position: relative; }
.form .bild { position: absolute; inset: 0; clip-path: url(#linse); }
.form.m .bild { clip-path: url(#linse-m); }
.form .bild img { width: 100%; height: 100%; object-fit: cover; }

/* Header als Glasleiste */
.kopf { position: sticky; top: 0; z-index: 50; padding: 12px clamp(12px, 2vw, 24px) 0; }
.kopf-leiste { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; gap: 22px; min-height: 64px; padding: 0 10px 0 22px; border-radius: 22px; background: rgba(250, 248, 245, .62); border: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 16px 40px -28px rgba(54, 49, 44, .45), inset 0 1px 0 rgba(255, 255, 255, .9); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); }
.kopf .logo { flex: none; }
.kopf .logo img { height: 30px; width: auto; }
.kopf nav { display: flex; gap: 4px; margin-left: 8px; }
.kopf nav a { text-decoration: none; font-weight: 500; font-size: 15px; color: var(--grau); padding: 9px 12px; border-radius: var(--pill); transition: color .2s, background .2s; }
.kopf nav a:hover { color: var(--tinte); background: rgba(255, 255, 255, .7); }
.kopf nav a[aria-current="page"] { color: var(--tinte); background: var(--weiss); }
.kopf .aktionen { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.kopf .btn { min-height: 44px; padding: 0 18px; font-size: 14.5px; white-space: nowrap; }
.kopf .rund-knopf { width: 44px; height: 44px; }
.kopf .rund-knopf svg { width: 17px; height: 17px; fill: var(--terracotta); stroke: none; }
@media (max-width: 1180px) { .kopf nav a { padding: 9px 9px; font-size: 14.5px; } .kopf .rund-knopf { display: none; } }
@media (max-width: 1060px) { .kopf nav { display: none; } }

.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--tinte); color: var(--papier); padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.skip:focus { top: 12px; }

/* Einblenden beim Scrollen: wie beim Scharfstellen, aus der Unschärfe */
.zeigen { opacity: 0; transform: translateY(22px); filter: blur(8px); transition: opacity .9s var(--weich), transform .9s var(--weich), filter .9s var(--weich); }
.zeigen.da { opacity: 1; transform: none; filter: none; }
.ohne-js .zeigen { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .zeigen { opacity: 1; transform: none; filter: none; }
}