/* Layout „neu“ – Neugestaltung Optik-Uhren-Schmuck Hitzl (Entwurf 24.10.2026)
   Leitidee: ruhige, edle Gestaltung wie bei hochwertigen Optikern und Juwelieren.
   Elfenbein/Sand, Hausschwarz, Gold als einziger Akzent (Rot nur im Logo), große feine Titel (Raleway 300),
   Fließtext Nunito (Hausschrift rudi/design), großzügiger Weißraum, runde Ecken. Keine externen Dateien. */

@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url('../schriften/nunito-variable.ttf') format('truetype'); }
@font-face { font-family: 'Nunito'; font-style: italic; font-weight: 200 1000; font-display: swap; src: url('../schriften/nunito-italic-variable.ttf') format('truetype'); }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../schriften/raleway-normal-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: 'Raleway'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../schriften/raleway-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --tinte: #1A171C;          /* Hausschwarz */
  --tinte-2: #45423E;
  --leise: #6E6962;
  --elfenbein: #FAF8F4;
  --sand: #F2EDE4;
  --linie: #E4DDD1;
  --gold: #B8975A;
  --gold-dunkel: #7D6230;
  --gold-hell: #E9DCC2;
  --gruen: #2A7230;
  --rot: #E2001A;
  --radius: 18px;
  --radius-gross: 28px;
  --schatten: 0 18px 50px rgba(26, 23, 28, .10);
  --kopf: 84px;
  --text: 'Nunito', 'Segoe UI', Arial, sans-serif;
  --titel: 'Raleway', 'Nunito', Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf) + 10px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--text); font-size: 17px; line-height: 1.65; color: var(--tinte-2); background: var(--elfenbein); -webkit-font-smoothing: antialiased; }
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--gold-dunkel); text-decoration: none; }
a:hover { color: var(--tinte); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--titel); color: var(--tinte); font-weight: 300; line-height: 1.1; margin: 0 0 .5em; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
.rahmen { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: -9999px; top: 0; z-index: 200; background: #fff; padding: 10px 16px; }
.sprung:focus { left: 12px; top: 12px; }
.dachzeile { font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dunkel); margin-bottom: 14px; }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 30px; border-radius: 999px; border: 1px solid var(--tinte);
  background: var(--tinte); color: #fff; font: 700 15px/1 var(--text); letter-spacing: .03em; transition: background .25s, color .25s, border-color .25s, transform .25s; }
.knopf:hover { background: var(--gold-dunkel); border-color: var(--gold-dunkel); color: #fff; transform: translateY(-1px); }
.knopf--rand { background: transparent; color: var(--tinte); border-color: var(--linie); }
.knopf--rand:hover { background: #fff; color: var(--tinte); border-color: var(--gold); }
.knopf--klein { padding: 11px 22px; font-size: 14px; }

/* Kopf */
.kopf { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--kopf); background: rgba(250, 248, 244, .86);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); transition: box-shadow .3s, height .3s; }
.kopf.gescrollt { box-shadow: 0 1px 0 var(--linie), 0 8px 30px rgba(26, 23, 28, .06); }
.kopf__innen { display: flex; align-items: center; gap: 28px; height: 100%; }
.kopf__logo img { height: 56px; width: auto; }
.kopf__nav { margin-left: auto; }
.menue { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.menue a { display: block; padding: 10px 14px; border-radius: 999px; color: var(--tinte); font-size: 15px; font-weight: 600; transition: background .2s; }
.menue a:hover, .menue a.aktiv { background: var(--sand); color: var(--tinte); }
.menue-knopf { display: none; margin-left: 4px; background: none; border: 0; padding: 12px; cursor: pointer; color: var(--tinte); }
.menue-knopf span:first-child, .menue-knopf span:first-child::before, .menue-knopf span:first-child::after { display: block; width: 24px; height: 2px; background: currentColor; position: relative; border-radius: 2px; transition: transform .2s, background .2s; }
.menue-knopf span:first-child::before, .menue-knopf span:first-child::after { content: ''; position: absolute; left: 0; }
.menue-knopf span:first-child::before { top: -7px; } .menue-knopf span:first-child::after { top: 7px; }
.menue-knopf[aria-expanded="true"] span:first-child { background: transparent; }
.menue-knopf[aria-expanded="true"] span:first-child::before { transform: translateY(7px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] span:first-child::after { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1000px) {
  .menue-knopf { display: block; }
  .kopf__termin { margin-left: auto; }
  .kopf__nav { position: absolute; top: var(--kopf); left: 0; right: 0; margin: 0; background: var(--elfenbein); box-shadow: 0 20px 30px rgba(26, 23, 28, .08); display: none; }
  .kopf__nav.offen { display: block; }
  .menue { flex-direction: column; padding: 10px 20px 20px; gap: 0; }
  .menue a { padding: 14px 8px; border-radius: 0; border-bottom: 1px solid var(--linie); font-size: 17px; }
}
@media (max-width: 560px) { .kopf__termin { display: none; } .kopf__nav { } .menue-knopf { margin-left: auto; } .kopf__logo img { height: 46px; } }

/* Hinweise (geschlossen/Betriebsurlaub) */
.hinweise { padding: calc(var(--kopf) + 16px) 20px 0; }
.hinweise[hidden], .hinweis[hidden] { display: none; }
.hinweis { margin: 0 auto; max-width: 600px; }
.hinweis + .hinweis { margin-top: 20px; }
.hinweis img { width: 100%; border-radius: var(--radius); box-shadow: var(--schatten); }
.hinweise:not([hidden]) + .start { padding-top: 48px; }

/* Start */
.start { padding: calc(var(--kopf) + 56px) 0 40px; }
.start__raster { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.start__titel { font-size: clamp(46px, 6.4vw, 92px); font-weight: 200; line-height: 1.02; letter-spacing: -.02em; margin-bottom: 28px; }
.start__titel em { font-style: normal; color: var(--gold-dunkel); font-weight: 300; }
.start__einleitung { font-size: 19px; max-width: 34em; color: var(--leise); }
.start__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 26px; }
.start__video { display: inline-flex; align-items: center; gap: 12px; color: var(--tinte); font-weight: 700; }
.start__play { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linie); display: grid; place-items: center; background: #fff; transition: border-color .2s, transform .2s; }
.start__play svg { width: 16px; height: 16px; margin-left: 2px; color: var(--gold-dunkel); }
.start__video:hover .start__play { border-color: var(--gold); transform: scale(1.06); }
.start__bild { position: relative; }
.start__bild picture img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-gross) var(--radius-gross) 160px var(--radius-gross); box-shadow: var(--schatten); }
.start__bild--weit picture img { aspect-ratio: 1 / 1; border-radius: var(--radius-gross) var(--radius-gross) 90px var(--radius-gross); }
.status { position: absolute; left: -28px; bottom: 36px; display: flex; gap: 12px; align-items: center; background: #fff; border-radius: 16px; padding: 14px 20px;
  box-shadow: var(--schatten); font-size: 14px; line-height: 1.35; color: var(--leise); }
.status strong { color: var(--tinte); font-size: 15px; }
.status__punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--leise); flex: 0 0 10px; }
.status.offen .status__punkt { background: var(--gruen); box-shadow: 0 0 0 5px rgba(42, 114, 48, .15); }
.status.zu .status__punkt { background: var(--gold); }
.fakten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 72px; padding-top: 32px; border-top: 1px solid var(--linie); }
.fakt strong { display: block; font-family: var(--titel); font-weight: 400; font-size: 24px; color: var(--tinte); }
.fakt span { color: var(--leise); font-size: 15px; }
@media (max-width: 1000px) {
  .start__raster { grid-template-columns: 1fr; gap: 40px; }
  .start__bild { max-width: 560px; }
  .status { left: 16px; bottom: 16px; }
}
@media (max-width: 640px) { .fakten { grid-template-columns: 1fr; gap: 16px; margin-top: 48px; } .start { padding-top: calc(var(--kopf) + 32px); } }

/* Abschnitte */
.abschnitt { padding: 120px 0; }
.abschnitt--sand { background: var(--sand); }
.abschnitt--dunkel { background: var(--tinte); color: #CFC8BD; }
.kopfzeile { max-width: 720px; margin-bottom: 56px; }
.kopfzeile h2 { font-size: clamp(34px, 4.2vw, 56px); }
.kopfzeile p:last-child { font-size: 19px; color: var(--leise); }
.kopfzeile--hell h2 { color: #fff; }
.kopfzeile--hell .dachzeile { color: var(--gold); }
@media (max-width: 640px) { .abschnitt { padding: 80px 0; } .kopfzeile { margin-bottom: 36px; } }

/* Welten */
.welten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.welt { background: #fff; border-radius: var(--radius-gross); overflow: hidden; box-shadow: 0 1px 0 var(--linie); transition: transform .35s, box-shadow .35s; display: flex; flex-direction: column; }
.welt:hover { transform: translateY(-4px); box-shadow: var(--schatten); }
.welt__bild { overflow: hidden; }
.welt__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .8s; }
.welt:hover .welt__bild img { transform: scale(1.04); }
.welt__text { padding: 30px 32px 34px; }
.welt__nr { font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-dunkel); margin-bottom: 10px; }
.welt h3 { font-size: 27px; margin-bottom: 14px; }
.welt details summary { cursor: pointer; font-weight: 700; color: var(--tinte); list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.welt details summary::-webkit-details-marker { display: none; }
.welt details summary::after { content: '+'; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--linie); font-weight: 400; transition: transform .2s; }
.welt details[open] summary::after { transform: rotate(45deg); }
.welt details p { margin-top: 14px; }
@media (max-width: 1000px) { .welten { grid-template-columns: 1fr; max-width: 640px; } }

/* Highlights (dunkel) */
.highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.highlight { display: flex; flex-direction: column; gap: 10px; padding: 34px; border-radius: var(--radius-gross); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .10);
  color: #CFC8BD; transition: background .3s, border-color .3s, transform .3s; }
.highlight:hover { background: rgba(255, 255, 255, .07); border-color: var(--gold); transform: translateY(-3px); color: #CFC8BD; }
.highlight__logo { width: 104px; height: 104px; border-radius: 22px; background: #fff; display: grid; place-items: center; padding: 14px; margin-bottom: 14px; overflow: hidden; }
.highlight__logo img { max-height: 76px; width: auto; object-fit: contain; }
.highlight__titel { font-family: var(--titel); font-size: 24px; color: #fff; }
.highlight__pfeil { margin-top: auto; padding-top: 10px; color: var(--gold); font-weight: 700; }
@media (max-width: 1000px) { .highlights { grid-template-columns: 1fr; max-width: 640px; } }

/* Service-Reiter */
.reiter__leiste { display: inline-flex; gap: 6px; padding: 6px; background: var(--sand); border-radius: 999px; margin-bottom: 40px; }
.reiter__leiste button { border: 0; background: transparent; padding: 12px 26px; border-radius: 999px; font: 700 15px var(--text); color: var(--leise); cursor: pointer; transition: background .2s, color .2s; }
.reiter__leiste button[aria-selected="true"] { background: #fff; color: var(--tinte); box-shadow: 0 4px 14px rgba(26, 23, 28, .08); }
.reiter__intro { font-size: 19px; color: var(--leise); max-width: 40em; }
.leistungen { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.leistungen li { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 26px 26px 24px; color: var(--leise); font-size: 16px; }
.leistungen strong { display: block; font-family: var(--titel); font-weight: 500; font-size: 20px; color: var(--tinte); margin-bottom: 8px; }
.leistungen strong::before { content: ''; display: block; width: 28px; height: 2px; background: var(--gold); margin-bottom: 18px; }
@media (max-width: 1000px) { .leistungen { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .leistungen { grid-template-columns: 1fr; } .reiter__leiste { display: flex; } .reiter__leiste button { flex: 1; padding: 12px 10px; } }

/* Marken */
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.filter button { border: 1px solid var(--linie); background: transparent; border-radius: 999px; padding: 9px 20px; font: 700 14px var(--text); color: var(--tinte-2); cursor: pointer; transition: all .2s; }
.filter button[aria-pressed="true"] { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.markenwand { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: baseline; }
.markenwand li { font-family: var(--titel); font-weight: 300; font-size: clamp(22px, 2.6vw, 34px); color: var(--tinte); transition: opacity .3s; }
.markenwand li small { font-family: var(--text); font-size: 13px; color: var(--leise); font-weight: 600; margin-left: 4px; }
.markenwand li.aus { display: none; }
.marken__hinweis { margin-top: 44px; color: var(--leise); max-width: 46em; }

/* Team */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 28px; }
.person { margin: 0; }
.person img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-gross); background: var(--sand); filter: grayscale(1) contrast(1.02); transition: filter .4s, transform .4s; }
.person:hover img { transform: translateY(-3px); }
.person figcaption { margin-top: 16px; font-size: 15px; color: var(--leise); line-height: 1.45; }
.person strong { display: block; font-family: var(--titel); font-weight: 500; font-size: 20px; color: var(--tinte); margin-bottom: 4px; }
@media (max-width: 1000px) { .team { grid-template-columns: repeat(2, 1fr); } }

/* Besuch */
.besuch { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: stretch; }
.besuch h2 { font-size: clamp(34px, 4.2vw, 56px); }
.besuch__adresse { font-style: normal; font-size: 19px; color: var(--tinte); margin-bottom: 10px; }
.besuch__hinweis { color: var(--leise); margin-bottom: 26px; }
.besuch__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.zeiten { width: 100%; border-collapse: collapse; font-size: 16px; }
.zeiten th, .zeiten td { padding: 12px 0; border-bottom: 1px solid var(--linie); text-align: left; font-weight: 400; }
.zeiten th { color: var(--tinte); font-weight: 700; width: 38%; }
.zeiten td { color: var(--leise); }
.zeiten tr.heute th, .zeiten tr.heute td { color: var(--gold-dunkel); }
.zeiten tr.heute th::after { content: ' · heute'; font-weight: 600; font-size: 13px; }
.besuch__karte { border-radius: var(--radius-gross); overflow: hidden; min-height: 460px; box-shadow: var(--schatten); background: #e5e3df; }
.besuch__karte iframe { width: 100%; height: 100%; min-height: 460px; border: 0; }
@media (max-width: 1000px) { .besuch { grid-template-columns: 1fr; } }

/* Fuß */
.fuss { background: var(--tinte); color: #A8A196; padding: 90px 0 0; font-size: 15px; }
.fuss a { color: #E8E2D8; }
.fuss a:hover { color: var(--gold); }
.fuss__raster { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 60px; }
.fuss__marke img { height: 56px; width: 134px; max-width: 100%; margin-bottom: 18px; }
.fuss__titel { font-family: var(--text); font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.fuss__soziales { display: flex; gap: 12px; }
.fuss__soziales a { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); display: grid; place-items: center; transition: border-color .2s, color .2s; }
.fuss__soziales a:hover { border-color: var(--gold); }
.fuss__soziales svg { width: 20px; height: 20px; }
.fuss__unten { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; padding-bottom: 28px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14px; }
@media (max-width: 1000px) { .fuss__raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .fuss__raster { grid-template-columns: 1fr; } .fuss { padding-top: 64px; } }

/* Aktionsleiste Handy */
.aktionsleiste { display: none; }
@media (max-width: 760px) {
  .aktionsleiste { display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90; background: var(--tinte);
    border-radius: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); padding: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .aktionsleiste a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; color: #fff; font-size: 12px; font-weight: 700; border-radius: 12px; }
  .aktionsleiste a:active { background: rgba(255, 255, 255, .1); }
  .aktionsleiste svg { width: 20px; height: 20px; color: var(--gold); }
  body { padding-bottom: 86px; }
}

/* Unterseiten */
.seitenkopf { padding: calc(var(--kopf) + 70px) 0 30px; }
.seitenkopf h1 { font-size: clamp(36px, 5vw, 64px); font-weight: 200; }
.seiteninhalt { padding: 10px 0 100px; }
.seiteninhalt .text { max-width: 820px; overflow-wrap: anywhere; }
.seiteninhalt h1 { font-size: 34px; } .seiteninhalt h2 { font-size: 30px; margin-top: 1.4em; } .seiteninhalt h3 { font-size: 22px; font-weight: 500; margin-top: 1.2em; }
.seitenkopf .container, .seiteninhalt .container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 28px; }

/* Vorschläge Startfoto (nur Vorschau, wieder entfernen) */
.vorschlaege { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: start; }
.vorschlag { margin: 0; }
.vorschlag figcaption { margin-top: 16px; font-size: 15px; color: var(--leise); line-height: 1.45; }
.vorschlag strong { display: block; font-family: var(--titel); font-weight: 500; font-size: 20px; color: var(--tinte); margin-bottom: 4px; }
.vorschlag__paar { aspect-ratio: 4 / 5; display: grid; grid-template-rows: 1fr 1fr; gap: 6px; overflow: hidden; border-radius: var(--radius-gross) var(--radius-gross) 160px var(--radius-gross); box-shadow: var(--schatten); }
.vorschlag__paar picture { display: block; min-height: 0; }
.vorschlag__paar img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1000px) { .vorschlaege { grid-template-columns: 1fr; max-width: 520px; } }

/* Einblenden */
.js .einblenden { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.2, 0, 0, 1), transform .9s cubic-bezier(.2, 0, 0, 1); }
.js .einblenden.sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .einblenden { opacity: 1; transform: none; transition: none; } }
@media print { .kopf, .aktionsleiste, .besuch__karte { display: none !important; } .js .einblenden { opacity: 1; transform: none; } }