/* ==========================================================================
   KARACA HAIR ART — karacahairart.de
   Design "Atelier Bronze": warme Braun-Beige-Welt, Gravur-Typografie,
   Scheren-Schnitt als Signature. Selbst gehostete Fonts (SIL OFL),
   keine externen Requests.
   ========================================================================== */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('../fonts/jost-latin.woff2') format('woff2');
}

/* ---------- Token-System ------------------------------------------------ */
:root {
  /* Primitives — Farbwelt Braun & Beige */
  --sand: #EDE4D6;          /* Seitengrund */
  --sand-deep: #E3D6C2;     /* Abstufung, Streifen */
  --cream: #F7F1E6;         /* Karten, helle Flächen */
  --camel: #C6A886;         /* warme Akzentfläche */
  --mocha: #8A6A4F;         /* Sekundärakzent, Hover, große Akzente */
  --espresso: #4A362A;      /* Text, dunkle Sektionen */
  --espresso-deep: #3A2A20; /* Footer, Tiefen */
  --bronze: #A67C52;        /* Linien, Icons, Ornamente */
  --bronze-ink: #7A5A38;    /* Bronze für kleinen Text (AA auf Sand) */

  /* Semantik */
  --bg: var(--sand);
  --surface: var(--cream);
  --ink: var(--espresso);
  --ink-soft: #6B5140;                 /* gedämpfter Fließtext, AA auf Sand */
  --line: rgba(122, 90, 56, .28);      /* Bronze-Hairlines */
  --on-dark: #F3EADB;                  /* Text auf Espresso */
  --on-dark-soft: rgba(243, 234, 219, .78);

  --grad-blade: linear-gradient(115deg, #8C6239 0%, #C69C6D 42%, #A67C52 60%, #7A5A38 100%);
  --grad-dark: linear-gradient(168deg, #55402F 0%, #4A362A 55%, #3A2A20 100%);

  --font-serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-sans: 'Jost', 'Avenir Next', 'Segoe UI', sans-serif;

  --shadow-soft: 0 24px 60px -30px rgba(58, 42, 32, .38);
  --shadow-card: 0 16px 44px -22px rgba(58, 42, 32, .30);
  --radius: 18px;
  --nav-h: 80px;
  --ease: cubic-bezier(.23, .86, .28, .99);
  --space-section: clamp(5.5rem, 12vh, 9rem);
}

/* ---------- Reset -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--camel); color: var(--espresso); }
:focus-visible { outline: 2px solid var(--bronze-ink); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 500; line-height: 1.1; color: var(--ink); }
h1 { font-size: clamp(2.7rem, 6.4vw, 4.9rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.3rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
h1 em, h2 em { font-style: italic; color: var(--bronze-ink); }

.container { width: min(1180px, 92vw); margin-inline: auto; }
section { position: relative; }

/* ---------- Utility ------------------------------------------------------ */
.eyebrow {
  display: inline-flex; align-items: center; gap: .9rem;
  font-size: .76rem; letter-spacing: .34em; text-transform: uppercase;
  font-weight: 500; color: var(--bronze-ink);
}
.eyebrow::before {
  content: ""; width: 40px; height: 1px; background: var(--bronze);
  transform-origin: left; transform: scaleX(0); transition: transform 1.1s var(--ease) .15s;
}
.in .eyebrow::before, .eyebrow.in::before { transform: scaleX(1); }
.center .eyebrow::after {
  content: ""; width: 40px; height: 1px; background: var(--bronze);
  transform-origin: right; transform: scaleX(0); transition: transform 1.1s var(--ease) .15s;
}
.in .center .eyebrow::after, .center.in .eyebrow::after, .center .eyebrow.in::after { transform: scaleX(1); }
.on-dark-section .eyebrow { color: var(--camel); }

.lead { font-size: clamp(1.05rem, 1.6vw, 1.24rem); color: var(--ink-soft); max-width: 62ch; }
.rule {
  height: 1px; background: var(--line); border: none; width: 100%;
  transform-origin: left; transform: scaleX(0); transition: transform 1.4s var(--ease);
}
.rule.in { transform: scaleX(1); }

/* ---------- Icons (Inline-SVG-Sprite) ------------------------------------ */
.ico { width: 1em; height: 1em; display: inline-block; vertical-align: -0.12em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Preloader ----------------------------------------------------- */
.preloader {
  position: fixed; inset: 0; z-index: 300; display: none;
  place-items: center; background: var(--espresso-deep);
}
html.preload .preloader { display: grid; }
html.preload { overflow: hidden; }
.preloader .pre-logo {
  display: block; width: clamp(180px, 34vw, 300px); height: auto; margin-inline: auto;
  animation: pre-in 1s var(--ease) both;
}
.preloader .pre-line {
  width: 120px; height: 1px; background: var(--bronze); margin: 1.6rem auto 0;
  transform-origin: left; animation: pre-line .9s var(--ease) .2s both;
}
.preloader.done { animation: pre-out .5s var(--ease) forwards; }
@keyframes pre-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pre-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pre-out { to { opacity: 0; visibility: hidden; } }

/* ---------- Navigation ---------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 130; height: var(--nav-h);
  display: flex; align-items: center;
  /* Leiste ist von Anfang an gefüllt (Kundenwunsch), nicht erst beim Scrollen */
  background: rgba(237, 228, 214, .92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(122, 90, 56, .22), 0 14px 40px -26px rgba(58, 42, 32, .4);
}
.nav-inner { width: min(1240px, 94vw); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: block; line-height: 0; }
.brand-logo { height: 46px; width: auto; display: block; }
.brand-logo-light { display: none; }
.nav-links { display: flex; align-items: center; gap: 2rem; }
.nav-links a {
  position: relative; font-size: .78rem; font-weight: 400; letter-spacing: .2em;
  text-transform: uppercase; color: var(--espresso); padding: .4rem 0; transition: color .3s;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--bronze); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease);
}
.nav-links a:hover { color: var(--bronze-ink); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav-links a[aria-current="page"] { color: var(--bronze-ink); }

/* Nav-Leiste ist immer hell; dunkles Logo und Espresso-Links auf allen Seiten */

/* Burger */
.burger { display: none; width: 46px; height: 46px; position: relative; z-index: 140; }
.burger span {
  position: absolute; left: 9px; right: 9px; height: 2px; background: var(--espresso); border-radius: 2px;
  transition: transform .45s var(--ease), opacity .3s, top .45s var(--ease), background-color .3s;
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 29px; }
.burger[aria-expanded="true"] span { background: var(--on-dark); }
.burger[aria-expanded="true"] span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

/* Mobile-Menü */
.mobile-menu {
  position: fixed; inset: 0; z-index: 120; background: var(--grad-dark);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.35rem;
  opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s;
}
.mobile-menu.open { opacity: 1; visibility: visible; }
.mobile-menu a {
  font-family: var(--font-serif); font-size: clamp(1.7rem, 6vw, 2.3rem); color: var(--on-dark);
  opacity: 0; transform: translateY(22px); transition: opacity .5s var(--ease), transform .6s var(--ease), color .3s;
}
.mobile-menu .menu-logo {
  width: clamp(160px, 44vw, 210px); height: auto; margin-bottom: 1rem;
  opacity: 0; transform: translateY(22px); transition: opacity .5s var(--ease) .05s, transform .6s var(--ease) .05s;
}
.mobile-menu.open .menu-logo { opacity: 1; transform: none; }
.mobile-menu.open a { opacity: 1; transform: none; }
.mobile-menu a:hover { color: var(--camel); }
.mobile-menu .btn { font-family: var(--font-sans); margin-top: 1rem; }

/* ---------- Buttons ------------------------------------------------------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: .7rem;
  padding: 1.02rem 2.3rem; border-radius: 999px;
  font-size: .8rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background-color .3s, color .3s, border-color .3s;
  will-change: transform;
}
.btn-primary {
  background: var(--espresso); color: var(--on-dark);
  box-shadow: inset 0 0 0 1px rgba(198, 156, 109, .55), 0 16px 34px -18px rgba(58, 42, 32, .65);
}
.btn-primary:hover { background: var(--espresso-deep); box-shadow: inset 0 0 0 1px var(--camel), 0 22px 44px -18px rgba(58, 42, 32, .7); }
.btn-bronze {
  background: var(--grad-blade); color: #FFF9EF;
  text-shadow: 0 1px 2px rgba(74, 54, 42, .45);
  box-shadow: 0 14px 34px -16px rgba(140, 98, 57, .8);
}
.btn-bronze:hover { box-shadow: 0 20px 44px -16px rgba(140, 98, 57, .9); }
.btn-ghost { background: transparent; color: var(--espresso); border: 1px solid rgba(122, 90, 56, .45); }
.btn-ghost:hover { background: rgba(198, 168, 134, .18); border-color: var(--bronze-ink); }
.btn-ghost.on-dark { color: var(--on-dark); border-color: rgba(198, 156, 109, .5); }
.btn-ghost.on-dark:hover { background: rgba(198, 168, 134, .14); border-color: var(--camel); }

/* ---------- Hero (ruhig, seriös, editorial) -------------------------------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: grid; align-items: center; overflow: hidden;
  /* Diagonale Schnittkante unten: stilles Markenzeichen der Schere */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%);
  margin-bottom: -5vw;
  background: var(--sand-deep);
}
.hero-media { position: absolute; inset: 0; will-change: transform; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 62%;
  animation: hero-kenburns 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes hero-kenburns {
  from { transform: scale(1.02); }
  to { transform: scale(1.09) translateY(-1.2%); }
}
.hero-inner {
  position: relative; z-index: 2; width: 100%;
  display: grid; place-items: center; text-align: center;
  padding: calc(var(--nav-h) + 4vh) 6vw 14vh;
}
.hero-copy { position: relative; padding: clamp(2rem, 5vh, 3.5rem) clamp(2rem, 6vw, 5rem); }
.hero-copy::before {
  content: ""; position: absolute; inset: -14% -20%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(237, 228, 214, .9), rgba(237, 228, 214, .58) 55%, transparent 78%);
}
.hero-copy .eyebrow { justify-content: center; color: var(--bronze-ink); }
.hero-copy .eyebrow::before, .hero-copy .eyebrow::after {
  content: ""; width: 40px; height: 1px; background: var(--bronze); transform: scaleX(1);
}
.hero-title {
  font-family: var(--font-sans); font-weight: 500;
  font-size: clamp(3rem, 10vw, 7.6rem); letter-spacing: .3em; padding-left: .3em;
  color: var(--espresso); margin: 1.2rem 0 .4rem;
}
.hero-sub {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1.25rem, 2.6vw, 1.9rem); color: #5D4433;
}
.hero-meta {
  margin-top: 1.5rem; font-size: .72rem; letter-spacing: .5em; padding-left: .5em;
  text-transform: uppercase; color: var(--bronze-ink);
}
.hero-actions { margin-top: 2.4rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Entrance-Choreografie: gestaffeltes, ruhiges Aufblenden */
.hero-copy > * { animation: hero-rise .95s var(--ease) both; }
.hero-copy .eyebrow { animation-delay: .1s; }
.hero-copy .hero-title { animation-delay: .22s; }
.hero-copy .hero-sub { animation-delay: .38s; }
.hero-copy .hero-meta { animation-delay: .52s; }
.hero-copy .hero-actions { animation-delay: .66s; }
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}
/* Während der Preloader steht, wartet die Choreografie */
html.preload .hero-copy > * { animation-play-state: paused; }

/* Folgesektion rückt unter die Schnittkante */
.hero + .section { padding-top: calc(var(--space-section) + 6vw); }

/* ---------- Subhero (Unterseiten) ----------------------------------------- */
.subhero {
  min-height: 58vh; display: grid; place-items: center; text-align: center;
  background: var(--grad-dark); padding: calc(var(--nav-h) + 7vh) 6vw 9vh; overflow: hidden;
}
.subhero::before {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background:
    radial-gradient(46% 38% at 78% 10%, rgba(198, 168, 134, .22), transparent 70%),
    radial-gradient(34% 30% at 12% 94%, rgba(138, 106, 79, .5), transparent 72%);
}
.subhero-ornament {
  position: absolute; right: -4vw; bottom: -6vh; width: clamp(280px, 34vw, 520px); opacity: .14;
  color: var(--camel); pointer-events: none;
}
.subhero > div { position: relative; max-width: 860px; }
.subhero h1 { color: var(--on-dark); margin: 1.1rem 0 1rem; }
.subhero h1 em { color: var(--camel); }
.subhero p { color: var(--on-dark-soft); max-width: 58ch; margin-inline: auto; }
.subhero .eyebrow { color: var(--camel); justify-content: center; }
.subhero .eyebrow::before, .subhero .eyebrow::after {
  content: ""; width: 40px; height: 1px; background: var(--bronze); transform: scaleX(1);
}
.subhero .hero-actions { margin-top: 2.2rem; }

/* ---------- Sektionen ------------------------------------------------------ */
.section { padding: var(--space-section) 0; }
.section-cream { background: var(--cream); }
.section-dark { background: var(--grad-dark); }
.section-dark h2, .section-dark h3 { color: var(--on-dark); }
.section-dark h2 em { color: var(--camel); }
.section-dark p { color: var(--on-dark-soft); }
.section-dark .lead { color: var(--on-dark-soft); }
.section-camel { background: linear-gradient(180deg, var(--sand-deep), var(--sand)); }

.section-head { max-width: 740px; margin-bottom: clamp(2.4rem, 6vh, 4rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head h2 { margin: 1rem 0; }

/* Schnitt-Trenner zwischen Sektionen */
.cut-divider {
  position: relative; height: 90px; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.cut-divider::before, .cut-divider::after {
  content: ""; position: absolute; top: 50%; height: 1px; width: 44%;
  background: linear-gradient(90deg, transparent, var(--bronze));
  transform: scaleX(0); transform-origin: right; transition: transform 1.3s var(--ease);
}
.cut-divider::before { left: 0; transform-origin: left;
  background: linear-gradient(90deg, var(--bronze), transparent); transform-origin: right; }
.cut-divider::after { right: 0; transform-origin: left; }
.cut-divider::before { left: 0; }
.cut-divider.in::before, .cut-divider.in::after { transform: scaleX(1); }
.cut-divider .ico { font-size: 1.5rem; color: var(--bronze-ink); background: transparent; transform: rotate(-24deg); }

/* ---------- Reveal / Parallax ---------------------------------------------- */
.reveal { opacity: 0; transform: translateY(44px); transition: opacity .9s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .12s; }
.reveal-d2 { transition-delay: .24s; }
.reveal-d3 { transition-delay: .36s; }
[data-parallax] { will-change: transform; }

/* ---------- Karten / Grids -------------------------------------------------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.card {
  position: relative; background: var(--surface); border-radius: var(--radius);
  border: 1px solid rgba(122, 90, 56, .16); box-shadow: var(--shadow-card);
  padding: 2.4rem 2.1rem; transform-style: preserve-3d;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s;
}
.card::after {
  content: ""; position: absolute; left: 2.1rem; right: 2.1rem; top: 0; height: 1px;
  background: linear-gradient(90deg, var(--bronze), transparent 70%);
  opacity: 0; transition: opacity .4s;
}
.card:hover { border-color: rgba(122, 90, 56, .34); box-shadow: 0 30px 66px -26px rgba(58, 42, 32, .42); }
.card:hover::after { opacity: 1; }
.card .card-ico {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  color: var(--bronze-ink); font-size: 1.55rem;
  background: radial-gradient(circle at 32% 28%, rgba(198, 168, 134, .5), rgba(198, 168, 134, .16));
  border: 1px solid rgba(122, 90, 56, .3); margin-bottom: 1.35rem;
  transform: translateZ(28px); transition: color .3s, border-color .3s;
}
.card:hover .card-ico { color: var(--espresso); border-color: var(--bronze); }
.card h3 { margin-bottom: .65rem; transform: translateZ(22px); }
.card p { font-size: .97rem; color: var(--ink-soft); transform: translateZ(14px); }
.card .card-link {
  display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.25rem;
  font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 500;
  color: var(--bronze-ink); transform: translateZ(18px); transition: gap .3s var(--ease), color .3s;
}
.card .card-link:hover { gap: .95rem; color: var(--espresso); }

.card.dark { background: rgba(247, 241, 230, .06); border-color: rgba(198, 156, 109, .24); }
.card.dark h3 { color: var(--on-dark); }
.card.dark p { color: var(--on-dark-soft); }
.card.dark .card-link { color: var(--camel); }
.card.dark .card-link:hover { color: var(--on-dark); }
.card.dark .card-ico { color: var(--camel); background: rgba(198, 168, 134, .12); border-color: rgba(198, 156, 109, .35); }

/* ---------- Statistiken ------------------------------------------------------ */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; }
.stat-num {
  font-family: var(--font-serif); font-weight: 600; line-height: 1;
  font-size: clamp(2.5rem, 5vw, 3.7rem); color: var(--camel);
}
.stat-num sup { font-size: .45em; }
.stat-label { margin-top: .6rem; font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: var(--on-dark-soft); }

/* ---------- Ablauf (3 Schritte) ---------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; counter-reset: step; }
.step {
  position: relative; padding: 2.2rem 1.9rem 2rem; background: var(--surface);
  border-radius: var(--radius); border: 1px solid rgba(122, 90, 56, .16); box-shadow: var(--shadow-card);
}
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-serif); font-size: 2.6rem; font-weight: 600; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--bronze);
  display: block; margin-bottom: 1rem;
}
.step h3 { margin-bottom: .5rem; }
.step p { font-size: .96rem; color: var(--ink-soft); }
.step:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; right: -1.5rem; width: 1.5rem; height: 1px;
  background: var(--bronze); opacity: .5;
}

/* ---------- Preislisten -------------------------------------------------------- */
.price-board {
  background: var(--surface); border: 1px solid rgba(122, 90, 56, .2); border-radius: var(--radius);
  padding: clamp(1.8rem, 4vw, 3rem); box-shadow: var(--shadow-card);
}
.price-board h3 {
  display: flex; align-items: center; gap: 1rem; font-family: var(--font-sans);
  font-size: .92rem; letter-spacing: .3em; text-transform: uppercase; font-weight: 500; color: var(--bronze-ink);
  margin-bottom: 1.6rem;
}
.price-board h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--bronze), transparent); }
.price-group-label { font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--mocha); font-weight: 500; margin: 1.6rem 0 .6rem; }
.price-row { display: flex; align-items: baseline; gap: .8rem; padding: .55rem 0; font-size: 1.02rem; }
.price-row .dots { flex: 1; border-bottom: 1px dotted rgba(122, 90, 56, .45); transform: translateY(-4px); }
.price-row .amount { font-family: var(--font-serif); font-size: 1.18rem; font-weight: 600; color: var(--espresso); white-space: nowrap; }
.price-row .note { display: block; font-size: .85rem; color: var(--mocha); font-style: italic; font-family: var(--font-serif); }
.price-pack {
  background: var(--sand); border-radius: 12px; padding: 1.3rem 1.5rem; margin: 1.4rem 0; text-align: center;
  border: 1px solid rgba(122, 90, 56, .22);
}
.price-pack strong { font-family: var(--font-serif); font-size: 1.22rem; color: var(--espresso); }
.price-pack span { display: block; font-size: .88rem; color: var(--ink-soft); font-style: italic; font-family: var(--font-serif); }

/* ---------- Timeline (Biografie) ------------------------------------------------ */
.timeline { position: relative; margin-top: 3rem; }
.timeline::before {
  content: ""; position: absolute; left: 20px; top: 6px; bottom: 6px; width: 1px;
  background: linear-gradient(rgba(166, 124, 82, .85), rgba(166, 124, 82, .12));
}
.timeline-item { position: relative; padding: 0 0 2.5rem 66px; }
.timeline-item::before {
  content: ""; position: absolute; left: 14px; top: 6px; width: 13px; height: 13px;
  border-radius: 50%; border: 1px solid var(--bronze); background: var(--bg);
}
.section-dark .timeline-item::before { background: var(--espresso); }
.timeline-item .t-label { font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: var(--bronze-ink); font-weight: 500; }
.section-dark .timeline-item .t-label { color: var(--camel); }
.timeline-item h3 { margin: .35rem 0 .5rem; }

/* ---------- Medien / Galerie ------------------------------------------------------ */
.media-frame {
  position: relative; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-soft); border: 1px solid rgba(122, 90, 56, .24);
  background: var(--grad-dark); aspect-ratio: 4 / 3;
}
.media-frame.tall { aspect-ratio: 3 / 4; }
.media-frame.wide { aspect-ratio: 16 / 9; }
.media-frame img, .media-frame video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s var(--ease);
}
.media-frame:hover img, .media-frame:hover video { transform: scale(1.05); }
.frame-video { position: absolute; inset: 0; }
.media-frame .ph-fallback {
  position: absolute; inset: 0; display: none; place-items: center; text-align: center;
  background: var(--grad-dark); color: var(--camel); padding: 1.5rem;
}
.media-frame.noimg .ph-fallback { display: grid; }
.media-frame.noimg img, .media-frame.noimg video { display: none; }
.ph-fallback .ph-mono {
  font-family: var(--font-sans); font-weight: 500; letter-spacing: .4em; padding-left: .4em;
  font-size: 1.05rem; color: var(--camel);
}
.ph-fallback small { display: block; margin-top: .6rem; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-soft); }
.media-caption { margin-top: .9rem; font-family: var(--font-serif); font-style: italic; color: var(--ink-soft); }

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }

/* Comic-Porträt */
.portrait-ph { display: grid; place-items: center; text-align: center; padding: 0; }
.portrait-inner { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 2rem; }
.portrait-mono {
  font-family: var(--font-serif); font-weight: 600; font-size: clamp(3rem, 8vw, 4.6rem); line-height: 1;
  color: var(--camel);
}
.portrait-name { font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; color: var(--on-dark); }
.portrait-role { font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--camel); }

/* ---------- Atmosphäre (Foto als Textur) -------------------------------------------- */
.texture-band {
  position: relative; padding: clamp(6rem, 14vh, 10rem) 0; overflow: hidden; color: var(--on-dark);
}
.texture-band .tex-bg {
  position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center;
  /* Unschärfe ist ins Bild gebacken (storefront-blur.jpg), kein Laufzeit-Filter:
     spart Repaints beim Parallax und hält die 60 fps. */
  transform: scale(1.08) translateZ(0); will-change: transform;
}
.texture-band::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(160deg, rgba(58, 42, 32, .93), rgba(64, 46, 36, .84) 55%, rgba(58, 42, 32, .94));
}
.texture-band > .container { position: relative; z-index: 2; }
.texture-band h2 { color: var(--on-dark); }
.texture-band h2 em { color: var(--camel); }
.texture-band p { color: var(--on-dark-soft); }

/* ---------- Öffnungszeiten ------------------------------------------------------------ */
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table caption {
  caption-side: top; text-align: left; font-size: .78rem; letter-spacing: .3em;
  text-transform: uppercase; font-weight: 500; color: var(--bronze-ink); padding-bottom: 1rem;
}
.section-dark .hours-table caption, .texture-band .hours-table caption { color: var(--camel); }
.hours-table td { padding: .6rem 0; border-bottom: 1px dotted rgba(122, 90, 56, .4); font-size: 1rem; }
.section-dark .hours-table td, .texture-band .hours-table td { border-color: rgba(198, 156, 109, .3); }
.hours-table td:last-child { text-align: right; font-family: var(--font-serif); font-weight: 600; }
.hours-table .closed td:last-child { font-style: italic; font-weight: 500; color: var(--mocha); }
.section-dark .hours-table .closed td:last-child, .texture-band .hours-table .closed td:last-child { color: var(--camel); }

/* ---------- FAQ ------------------------------------------------------------------------ */
.faq-item { border-bottom: 1px solid rgba(122, 90, 56, .26); }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  cursor: pointer; list-style: none; padding: 1.45rem 0;
  font-family: var(--font-serif); font-size: 1.25rem; font-weight: 500; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-family: var(--font-sans); font-weight: 300; font-size: 1.6rem; color: var(--bronze-ink);
  transition: transform .4s var(--ease); flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-body { padding: 0 0 1.6rem; max-width: 68ch; color: var(--ink-soft); }

/* ---------- CTA-Band --------------------------------------------------------------------- */
.cta-band { text-align: center; padding: clamp(5.5rem, 13vh, 9rem) 6vw; background: var(--grad-dark); overflow: hidden; }
.cta-band::before {
  content: "KARACA"; position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-sans); font-weight: 600; font-size: clamp(6rem, 22vw, 18rem);
  letter-spacing: .2em; color: rgba(198, 168, 134, .06); pointer-events: none; user-select: none;
}
.cta-band > * { position: relative; }
.cta-band h2 { color: var(--on-dark); margin-bottom: 1rem; }
.cta-band h2 em { color: var(--camel); }
.cta-band p { color: var(--on-dark-soft); max-width: 54ch; margin: 0 auto 2.3rem; }
.cta-meta {
  margin-top: 2.6rem; display: flex; gap: 2.5rem; justify-content: center; flex-wrap: wrap;
  font-size: .86rem; color: var(--on-dark-soft);
}
.cta-meta .ico { color: var(--camel); margin-right: .45rem; }

/* ---------- Planity / Consent --------------------------------------------------------------- */
.consent-box {
  background: var(--grad-dark); border-radius: var(--radius); border: 1px solid rgba(198, 156, 109, .35);
  padding: clamp(2.4rem, 6vw, 4rem); text-align: center; color: var(--on-dark); box-shadow: var(--shadow-soft);
}
.consent-box h3 { color: var(--on-dark); margin-bottom: 1rem; }
.consent-box p { color: var(--on-dark-soft); max-width: 60ch; margin: 0 auto 1.8rem; font-size: .96rem; }
.consent-box a { color: var(--camel); text-decoration: underline; text-underline-offset: 3px; }
#planity-container { min-height: 60vh; }
.planity-shell {
  background: #FDFBF6; border-radius: var(--radius); border: 1px solid rgba(122, 90, 56, .2);
  padding: clamp(1rem, 3vw, 2rem); box-shadow: var(--shadow-card);
}

/* ---------- Kontakt --------------------------------------------------------------------------- */
.contact-list { display: grid; gap: 1.3rem; margin-top: 2rem; }
.contact-list .c-item { display: flex; gap: 1.2rem; align-items: flex-start; }
.contact-list .c-ico {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
  color: var(--bronze-ink); font-size: 1.15rem;
  background: radial-gradient(circle at 32% 28%, rgba(198, 168, 134, .5), rgba(198, 168, 134, .14));
  border: 1px solid rgba(122, 90, 56, .3);
}
.contact-list .c-label { font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--bronze-ink); font-weight: 500; }
.contact-list .c-val { font-size: 1.06rem; }
.contact-list a.c-val:hover { color: var(--bronze-ink); }
.map-hint {
  border: 1px dashed rgba(122, 90, 56, .5); border-radius: var(--radius); padding: 2rem; text-align: center;
  font-size: .92rem; color: var(--ink-soft); background: var(--surface);
}
.map-hint a { color: var(--bronze-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Footer ------------------------------------------------------------------------------ */
.footer { background: var(--espresso-deep); color: var(--on-dark-soft); padding: 5rem 0 2.5rem; font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3.4rem; }
.footer h4 {
  font-family: var(--font-sans); font-size: .72rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--camel); margin-bottom: 1.3rem; font-weight: 500;
}
.footer a { transition: color .3s; }
.footer a:hover { color: var(--camel); }
.footer li { margin-bottom: .55rem; }
.footer-logo { width: clamp(180px, 16vw, 220px); height: auto; display: block; }
.footer-logo-link { display: inline-block; }
.footer-legal {
  border-top: 1px solid rgba(198, 156, 109, .2); padding-top: 2rem;
  display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: center; font-size: .8rem;
}
.footer-legal nav { display: flex; gap: 1.6rem; }

/* ---------- Rechtstexte ---------------------------------------------------------------------------- */
.legal-body { max-width: 760px; }
.legal-body h2 { font-size: 1.6rem; margin: 2.6rem 0 .9rem; }
.legal-body h3 { font-size: 1.2rem; margin: 1.8rem 0 .6rem; }
.legal-body p, .legal-body li { font-size: .98rem; color: var(--ink-soft); margin-bottom: .8rem; }
.legal-body ul { list-style: disc; padding-left: 1.4rem; }
.legal-body .placeholder { background: rgba(198, 168, 134, .35); padding: 0 .3em; border-radius: 4px; font-style: italic; }
.legal-body a { text-decoration: underline; text-underline-offset: 3px; color: var(--bronze-ink); }

/* ---------- Responsive ------------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 2.4rem; }
  .steps { grid-template-columns: 1fr; }
  .step:not(:last-child)::after { display: none; }
}
@media (max-width: 860px) {
  .nav-links, .nav-cta { display: none; }
  .burger { display: block; }
  .grid-2 { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .grid-3 { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .btn { padding: .95rem 1.7rem; letter-spacing: .16em; }
  .timeline::before { left: 14px; }
  .timeline-item { padding-left: 50px; }
  .timeline-item::before { left: 8px; }
  .cut-a { clip-path: polygon(0 0, 100% 0, 100% 42%, 0 58%); }
  .cut-b { clip-path: polygon(0 58%, 100% 42%, 100% 100%, 0 100%); }
}

/* ---------- Reduced Motion ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal, .rule, .cut-divider::before, .cut-divider::after { opacity: 1 !important; transform: none !important; }
  .eyebrow::before, .eyebrow::after { transform: scaleX(1) !important; }
  .preloader { display: none !important; }
  .hero-media img { animation: none; }
}