/* 133 – Kintsugi · dunkle Raku-Keramik, Bruchlinien mit Goldlack geschlossen */
:root {
  --ink: #ece4d3;
  --mute: #aaa192;
  --gold: #d2ae5c;
  --gold-hi: #f0d88f;
  --gold-lo: #8f6b28;
  --g0: #0c0b0a;
  --g1: #141210;
  --g2: #1a1613;
  --g3: #111415;
  --g4: #171412;
  --g5: #1c1915;
  --g6: #13110f;
  --g7: #0f0e0c;
  --iron: #34241a;
  --serif: 'Cormorant Garamond', 'Cormorant', Garamond, 'Times New Roman', serif;
  --sans: 'Albert Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --pad: clamp(16px, 5vw, 80px);
  --maxw: 1200px;
  --edge: 64px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--g0); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--g0); color: var(--ink); font: 400 17px/1.7 var(--sans); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; line-height: 1.08; letter-spacing: -.005em; }
p, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 4px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 80; background: var(--gold); color: #120f0a; padding: 10px 16px; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
.muted { color: var(--mute); }

/* ---------- Glasur ---------- */
.glaze {
  background-color: var(--g);
  background-image:
    url(craquele.svg), url(noise.svg),
    radial-gradient(ellipse 60% 50% at var(--sx, 22%) var(--sy, 18%), rgba(255, 236, 210, .06), transparent 70%),
    radial-gradient(ellipse 50% 60% at 85% 90%, rgba(0, 0, 0, .35), transparent 70%);
  background-size: 360px 360px, 240px 240px, 100% 100%, 100% 100%;
}
.glaze--0 { --g: var(--g0); }
.glaze--1 { --g: var(--g1); --sx: 18%; --sy: 30%; }
.glaze--2 { --g: var(--g2); --sx: 70%; --sy: 10%; }
.glaze--3 { --g: var(--g3); --sx: 40%; --sy: 60%; }
.glaze--4 { --g: var(--g4); --sx: 15%; --sy: 20%; }
.glaze--5 { --g: var(--g5); --sx: 80%; --sy: 30%; }
.glaze--6 { --g: var(--g6); --sx: 30%; --sy: 15%; }
.glaze--7 { --g: var(--g7); --sx: 70%; --sy: 70%; }
.glaze--iron { --g: var(--iron); --sx: 40%; --sy: 30%; }

/* ---------- Sektionen als Scherben ---------- */
.sec { position: relative; margin-top: calc(-1 * var(--edge)); padding-top: calc(var(--edge) + clamp(70px, 9vw, 140px)); padding-bottom: clamp(80px, 9vw, 140px); }
.edge-seam { position: absolute; left: 0; top: 0; width: 100%; height: var(--edge); pointer-events: none; z-index: 3; overflow: visible; }
.seams { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; }
.seams--hero-m { display: none; }

/* ---------- Kopf ---------- */
.top { position: relative; z-index: 0; }
.top__in { display: flex; align-items: center; gap: 30px; min-height: calc(92px + var(--edge) * .5); padding-bottom: calc(var(--edge) * .5); padding-inline: var(--pad); max-width: 1560px; margin-inline: auto; }
.logo { flex: none; display: block; }
.logo img { width: 78px; aspect-ratio: 1510 / 1300; }
.menu { display: none; }
.nav { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 40px; }
.nav__list { display: flex; gap: 34px; }
.nav__list a { position: relative; display: block; padding: 8px 0; text-decoration: none; font: 500 13.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.nav__list a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: url(seam-h1.svg) 0 50% / 100% 8px no-repeat; transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.3, .7, .2, 1); }
.nav__list a:hover::after { transform: none; }
.nav__end { display: flex; align-items: center; gap: 22px; }
.tel { font: 500 15px/1 var(--sans); letter-spacing: .06em; text-decoration: none; white-space: nowrap; color: var(--gold); }
.tel:hover { color: var(--gold-hi); }
.lang { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px; text-decoration: none; font: 500 13px/1 var(--sans); letter-spacing: .14em; border: 1px solid rgba(210, 174, 92, .45); border-radius: 50% 46% 52% 44% / 48% 54% 46% 52%; }
.lang:hover { border-color: var(--gold-hi); color: var(--gold-hi); }

/* ---------- Bausteine ---------- */
.kicker { font: 500 12.5px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
h2 { font-size: clamp(36px, 4.4vw, 62px); margin-top: 18px; font-weight: 300; text-wrap: balance; }
.intro { margin-top: 22px; max-width: 56ch; color: var(--mute); font-size: 18px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 30px; text-decoration: none; font: 500 14px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; transition: filter .3s, color .3s, background-position .6s; }
.btn--gold {
  color: #17120a; background: linear-gradient(115deg, #8d6a26 0%, #e2c470 28%, #b8912f 48%, #f1dc96 70%, #a07a32 100%) 0 0 / 200% 100%;
  clip-path: polygon(0 6%, 22% 0, 61% 4%, 100% 0, 98% 52%, 100% 100%, 63% 96%, 28% 100%, 0 95%, 2% 48%);
}
.btn--gold:hover { background-position: 100% 0; }
.btn--line { color: var(--ink); padding-inline: 4px; background: url(seam-h2.svg) 0 100% / 100% 10px no-repeat; }
.btn--line:hover { color: var(--gold-hi); }

/* ---------- Hero ---------- */
.hero { margin-top: calc(-1 * var(--edge)); padding: 0; min-height: calc(100vh - 92px + var(--edge) * .5); min-height: calc(100svh - 92px + var(--edge) * .5); display: flex; align-items: center; }
.shard { position: absolute; inset: 0; }
.shard--photo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; filter: saturate(.72) contrast(1.06) brightness(.82) sepia(.12); }
.shard--photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(12, 10, 8, .45), rgba(12, 10, 8, 0) 70%), url(noise.svg); background-size: auto, 240px; mix-blend-mode: multiply; }
.hero__in { position: relative; z-index: 4; width: 100%; padding: calc(var(--edge) + 40px) var(--pad) 60px; }
.hero__text { max-width: min(46vw, 660px); }
h1 { margin-top: 22px; font-size: clamp(42px, min(4.6vw, 7.4vh), 72px); font-weight: 300; line-height: 1.04; text-wrap: balance; }
.lead { margin-top: 26px; max-width: 46ch; color: var(--mute); font-size: clamp(16px, 1.2vw, 18px); }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 34px; margin-top: 36px; }

/* ---------- Schwerpunkt: Platte aus sechs Scherben ---------- */
.head { max-width: 780px; }
.plate { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(50px, 6vw, 90px); }
.piece { position: relative; padding: clamp(28px, 3vw, 46px) clamp(24px, 2.8vw, 42px) clamp(32px, 3.4vw, 50px); }
.piece::before, .piece::after { content: ''; position: absolute; pointer-events: none; z-index: 1; }
.piece::after { right: -12px; top: -2px; bottom: -2px; width: 24px; background: var(--sv, url(seam-v1.svg)) 0 0 / 100% 100% no-repeat; }
.piece::before { left: -2px; right: -2px; bottom: -12px; height: 24px; background: var(--sh, url(seam-h1.svg)) 0 0 / 100% 100% no-repeat; }
.p1 { --sv: url(seam-v1.svg); --sh: url(seam-h1.svg); }
.p2 { --sv: url(seam-v2.svg); --sh: url(seam-h2.svg); }
.p3 { --sh: url(seam-h3.svg); }
.p4 { --sv: url(seam-v3.svg); }
.p5 { --sv: url(seam-v4.svg); }
.p3::after, .p6::after, .p4::before, .p5::before, .p6::before { display: none; }
.no { font: italic 400 22px/1 var(--serif); color: var(--gold); }
.piece h3 { margin-top: 18px; font-size: clamp(25px, 2.2vw, 31px); font-weight: 500; }
.piece p { margin-top: 10px; color: var(--mute); max-width: 34ch; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(70px, 8vw, 120px); }
.stats li { position: relative; display: grid; gap: 10px; padding: 8px clamp(20px, 3vw, 44px); text-align: center; }
.stats li + li::before { content: ''; position: absolute; left: -12px; top: 0; bottom: 0; width: 24px; background: url(crack-v2.svg) 0 0 / 100% 100% no-repeat; }
.stats strong { font: 300 clamp(54px, 6vw, 88px)/1 var(--serif); font-variant-numeric: lining-nums; color: var(--gold); background: linear-gradient(120deg, #a47c33, #f0d88f 40%, #b8912f 60%, #e8cc7c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stats li:last-child strong { font-size: clamp(40px, 4.2vw, 62px); align-self: end; }
.stats li { align-content: end; }
.stats span { color: var(--mute); font-size: 15px; letter-spacing: .04em; }

/* ---------- Beispielroute ---------- */
.route__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 20px clamp(40px, 6vw, 90px); align-items: center; }
.route__text { font-size: clamp(26px, 2.6vw, 38px); font-family: var(--serif), 'DejaVu Serif', serif; font-weight: 300; line-height: 1.25; }
.route__art { position: relative; }
.route-svg { display: block; width: 100%; height: auto; overflow: visible; }
.route__codes { margin-top: 0; padding-inline: calc(6% - 1.1em); text-align: justify; text-align-last: justify; font: 500 clamp(12px, 1.2vw, 15px)/1 var(--sans); letter-spacing: .2em; color: var(--gold); }
.route__note { grid-column: 2; color: var(--mute); font-size: 15px; font-style: italic; font-family: var(--serif); font-size: 19px; }

/* ---------- Leistungen ---------- */
.head--split { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 60px; align-items: end; }
.head--split .intro { margin: 0; }
.rows { margin-top: clamp(50px, 6vw, 90px); }
.row { position: relative; display: grid; grid-template-columns: 80px minmax(0, 5fr) minmax(0, 6fr); gap: 10px 40px; align-items: baseline; padding: clamp(28px, 3vw, 40px) 0; }
.row::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 24px; background: var(--sh) 0 0 / 100% 100% no-repeat; }
.s1 { --sh: url(seam-h3.svg); } .s2 { --sh: url(crack-h1.svg); } .s3 { --sh: url(crack-h4.svg); }
.s4 { --sh: url(crack-h2.svg); } .s5 { --sh: url(crack-h3.svg); } .s6 { --sh: url(crack-h1.svg); }
.rows::after { content: ''; display: block; height: 24px; margin-top: -12px; background: url(seam-h4.svg) 0 0 / 100% 100% no-repeat; }
.row h3 { font-size: clamp(28px, 2.8vw, 40px); font-weight: 400; transition: color .3s, transform .5s; }
.row p { color: var(--mute); max-width: 52ch; }
.row:hover h3 { color: var(--gold-hi); transform: translateX(6px); }

/* ---------- Ablauf ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(50px, 6vw, 80px); }
.step { position: relative; padding: 10px clamp(18px, 2.4vw, 36px) 20px; }
.step + .step::before { content: ''; position: absolute; left: -12px; top: 0; bottom: 0; width: 24px; background: var(--sv) 0 0 / 100% 100% no-repeat; }
.t2 { --sv: url(crack-v3.svg); } .t3 { --sv: url(seam-v1.svg); } .t4 { --sv: url(crack-v4.svg); }
.step:nth-child(even) { margin-top: 48px; }
.step .no { font-size: 28px; }
.step h3 { margin-top: 14px; font-size: clamp(26px, 2.4vw, 34px); font-weight: 500; }
.step p { margin-top: 8px; color: var(--mute); }

/* ---------- Über uns ---------- */
.about__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.about__shard { position: relative; aspect-ratio: 1; max-width: 520px; }
.about__shard img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.04) brightness(.92); }
.about-seam { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.about__lead { margin-top: 24px; font-size: 19px; max-width: 50ch; }
.feats { margin-top: 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
.feats li { position: relative; padding: 14px 0 14px 26px; font-family: var(--serif); font-size: 21px; font-weight: 500; }
.feats li::before { content: ''; position: absolute; left: 0; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: linear-gradient(135deg, #8d6a26, #f0d88f 50%, #a47c33); clip-path: polygon(50% 0, 100% 38%, 82% 100%, 14% 90%, 0 30%); }

/* ---------- Kontakt ---------- */
.contact { padding-bottom: clamp(90px, 10vw, 150px); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 90px); align-items: center; }
.info { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; margin-top: 44px; }
.info div:first-child { grid-column: 1 / -1; }
.info dt { font: 500 12px/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.info dd { margin-top: 8px; font: 400 22px/1.4 var(--serif); font-variant-numeric: lining-nums; }
.info dd .muted { font: 400 15px/1.5 var(--sans); }
.info a { text-decoration: none; background: url(seam-h4.svg) 0 100% / 100% 7px no-repeat; padding-bottom: 4px; overflow-wrap: anywhere; }
.info a:hover { color: var(--gold-hi); }
.contact .btn { margin-top: 44px; }
.bowl { position: relative; }
.bowl-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------- Fuß ---------- */
.foot { position: relative; padding-block: 70px 96px; }
.foot::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 24px; background: url(seam-h2.svg) 0 0 / 100% 100% no-repeat; z-index: 3; }
.foot__in { display: grid; grid-template-columns: auto 1fr auto; gap: 20px 44px; align-items: center; }
.logo--foot img { width: 92px; }
.foot__brand { font: 500 21px/1.3 var(--serif); }
.foot__addr p:last-child { color: var(--mute); font-size: 15px; }
.foot__addr a { text-decoration: none; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 8px 26px; font: 500 13px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.foot__nav a { text-decoration: none; }
.foot__nav a:hover, .foot__addr a:hover { color: var(--gold-hi); }
.foot__copy { grid-column: 1 / -1; color: var(--mute); font-size: 14px; }

/* ---------- Rechtsseiten ---------- */
.legal { padding-bottom: clamp(90px, 10vw, 150px); }
.legal__in { max-width: calc(70ch + 2 * var(--pad)); }
.legal__bowl { position: absolute; right: var(--pad); top: 200px; width: min(300px, calc(100vw - 70ch - 3 * var(--pad) - 100px)); opacity: .9; }
@media (max-width: 1300px) { .legal__bowl { display: none; } }
.back { display: inline-block; font: 500 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--gold); padding-bottom: 8px; background: url(seam-h3.svg) 0 100% / 100% 7px no-repeat; }
.back:hover { color: var(--gold-hi); }
.legal .kicker { margin-top: 48px; }
.legal h1 { margin-top: 16px; font-size: clamp(38px, 5vw, 66px); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.legal-body { margin-top: 40px; font-size: 17px; line-height: 1.75; }
.legal-body h2 { position: relative; margin: 2.2em 0 .6em; padding-top: 26px; font-size: clamp(25px, 2.4vw, 31px); font-weight: 500; }
.legal-body h2::before { content: ''; position: absolute; left: 0; top: 0; width: 120px; height: 12px; background: url(seam-h1.svg) 0 0 / 100% 100% no-repeat; }
.legal-body h2:nth-of-type(even)::before { background-image: url(seam-h3.svg); width: 90px; }
.legal-body p, .legal-body ul { margin: 0 0 1em; }
.legal-body ul { padding-left: 1.3em; list-style: none; }
.legal-body li { position: relative; margin-bottom: .45em; }
.legal-body li::before { content: ''; position: absolute; left: -1.25em; top: .62em; width: 8px; height: 8px; background: var(--gold); clip-path: polygon(50% 0, 100% 38%, 82% 100%, 14% 90%, 0 30%); }
.legal-body a { color: var(--gold-hi); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-body .legal-note { padding: 18px 22px; background: rgba(210, 174, 92, .08); border-left: 2px solid var(--gold); color: var(--ink); font-size: 15.5px; }
.legal-body .legal-address { font: 400 20px/1.5 var(--serif); }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .nav__list { gap: 22px; }
  .tel { display: none; }
  .route__in { grid-template-columns: 1fr; }
  .route__note { grid-column: 1; }
  .route__art { max-width: 760px; }
  .legal__bowl { display: none; }
}
@media (max-width: 960px) {
  .plate { grid-template-columns: 1fr 1fr; }
  .piece::after, .piece::before { display: none; }
  .p1::after, .p3::after, .p5::after { display: block; }
  .p1::before, .p2::before, .p3::before, .p4::before { display: block; }
  .p3 { --sv: url(seam-v2.svg); } .p5 { --sv: url(seam-v4.svg); } .p4 { --sh: url(seam-h4.svg); }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 30px; }
  .step:nth-child(3)::before { display: none; }
  .step:nth-child(even) { margin-top: 0; }
  .about__grid, .contact__grid { grid-template-columns: 1fr; }
  .bowl { max-width: 460px; justify-self: center; width: 100%; }
}

/* ---------- Mobil ---------- */
@media (max-width: 760px) {
  body { font-size: 16.5px; }
  .top__in { min-height: 118px; gap: 12px; }
  .logo img { width: 62px; }
  .js .menu { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; min-height: 46px; padding: 0 4px; background: none; border: 0; font: 500 13px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
  .menu__ico { position: relative; width: 26px; height: 12px; background: url(seam-h2.svg) 0 0 / 100% 6px no-repeat, url(seam-h4.svg) 0 100% / 100% 6px no-repeat; transition: transform .3s; }
  .menu[aria-expanded="true"] .menu__ico { transform: rotate(90deg); }
  .top__in { flex-wrap: wrap; }
  .nav { flex: 1 1 100%; flex-direction: column; align-items: stretch; gap: 18px; padding-bottom: 20px; }
  .js .nav { display: none; position: absolute; z-index: 40; left: 12px; right: 12px; top: 80px; padding: 22px 22px 24px; background: #15120f; box-shadow: 0 30px 60px -20px #000; clip-path: polygon(0 2%, 30% 0, 66% 3%, 100% 0, 99% 60%, 100% 100%, 54% 98%, 0 100%, 1% 50%); }
  .js .top.open .nav { display: flex; }
  .top { z-index: 20; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__list a { padding: 15px 0; font-size: 15px; }
  .nav__end { justify-content: space-between; }
  .tel { display: inline; font-size: 16px; }

  .hero { display: block; min-height: 0; }
  .shard--photo { position: relative; inset: auto; height: 330px; }
  .shard--iron { display: none; }
  .seams--hero { display: none; }
  .seams--hero-m { display: block; inset: 0 0 auto; height: 330px; }
  .hero__in { padding: 0 var(--pad) 70px; margin-top: -20px; }
  .hero__text { max-width: none; }
  h1 { font-size: clamp(34px, 9.4vw, 42px); }
  .ctas { flex-direction: column; align-items: stretch; }
  .btn--line { align-self: flex-start; }

  .head--split { grid-template-columns: 1fr; }
  .plate { grid-template-columns: 1fr; }
  .piece::after { display: none !important; }
  .piece::before { display: block !important; }
  .p6::before { display: none !important; }
  .p1 { --sh: url(seam-h1.svg); } .p2 { --sh: url(seam-h2.svg); } .p3 { --sh: url(seam-h3.svg); } .p4 { --sh: url(seam-h4.svg); } .p5 { --sh: url(seam-h2.svg); }
  .stats { grid-template-columns: 1fr; gap: 30px; }
  .stats li + li::before { left: 10%; right: 10%; top: -27px; bottom: auto; width: auto; height: 24px; background-image: url(seam-h3.svg); }
  .row { grid-template-columns: 1fr; gap: 6px; }
  .steps { grid-template-columns: 1fr; }
  .step { padding-inline: 0; padding-top: 30px; }
  .step + .step::before { display: block !important; left: 0; right: 0; top: -12px; bottom: auto; width: auto; height: 24px; background-image: url(seam-h1.svg); }
  .feats { grid-template-columns: 1fr; }
  .info { grid-template-columns: 1fr; }
  .foot__in { grid-template-columns: 1fr; }
}