/* 166 – Kelim: die Seite als gewebter Flachteppich. El Messiri + Karla. */
:root {
  --madder: #9e2a2b;
  --madder-dk: #7a1f22;
  --indigo: #1f2f5a;
  --indigo-2: #3a5592;
  --saffron: #e2a42b;
  --natural: #f1e8d6;
  --natural-2: #e8dcc3;
  --ink: #2a1d1a;
  --ink-2: #5a4339;
  --green: #2f6b5e;
  --display: 'El Messiri', 'Palatino Linotype', Georgia, serif;
  --sans: 'Karla', 'Helvetica Neue', Arial, sans-serif;
  --bw: 60px;           /* Breite der Seitenbordüre */
  --gap: clamp(20px, 4vw, 64px);
  --ribs: repeating-linear-gradient(90deg, rgba(0,0,0,.075) 0 1px, transparent 1px 2px, rgba(255,255,255,.035) 2px 3px, transparent 3px 4px);
  --weft: repeating-linear-gradient(180deg, transparent 0 3px, rgba(0,0,0,.035) 3px 4px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 20px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font: 400 17px/1.6 var(--sans); color: var(--ink); background: #3b2a22; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--saffron); outline-offset: 3px; box-shadow: 0 0 0 6px var(--indigo); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--natural); color: var(--ink); font-weight: 700; }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Fransen und Abschlussborten ---------- */
.fringe { height: 46px; background: url("fringe.svg") 0 0 / 30px 46px repeat-x; }
.fringe--top { transform: scaleY(-1); }
.end { position: relative; background: var(--weft), var(--ribs), var(--natural); }
.end::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22px;
  background: linear-gradient(180deg,
    var(--natural) 0 3px, var(--indigo) 3px 7px, var(--natural) 7px 10px,
    var(--madder) 10px 15px, var(--natural) 15px 18px, var(--saffron) 18px 22px); }
.end--foot::after { top: 0; bottom: auto; transform: scaleY(-1); }
.end__in { position: relative; display: flex; align-items: center; gap: 28px; max-width: 1360px; margin: 0 auto; padding: 14px clamp(16px, 4vw, 56px) 34px; }
.logo { display: block; flex: none; }
.logo img { width: 92px; height: auto; aspect-ratio: 1510 / 1300; }
.nav { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav__list { display: flex; gap: 4px; margin-left: 12px; }
.nav__list a { position: relative; display: block; padding: 10px 14px; font: 700 15px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--ink); }
.nav__list a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 6px; background: url("teeth-r.svg") 0 0 / 12px 6px repeat-x; opacity: 0; transition: opacity .2s; }
.nav__list a:hover::after { opacity: 1; }
.nav__end { display: flex; align-items: center; gap: 16px; }
.tel { font: 700 17px/1 var(--sans); text-decoration: none; color: var(--madder-dk); }
.tel:hover { text-decoration: underline; }
.lang { display: inline-grid; place-items: center; width: 46px; height: 40px; font: 700 14px/1 var(--sans); letter-spacing: .1em; color: var(--natural); background: var(--indigo); text-decoration: none; clip-path: var(--step); }
.lang:hover { background: var(--madder); }
.menu { display: none; }

/* gestufte Ecken wie gewebt */
:root { --step: polygon(0 6px, 3px 6px, 3px 3px, 6px 3px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px)); }

/* ---------- Teppichkörper mit Seitenbordüren ---------- */
.rug { position: relative; padding-inline: var(--bw); background: var(--madder); }
.rug::before, .rug::after { content: ""; position: absolute; top: 0; bottom: 0; width: var(--bw); background: url("border.svg") 0 0 / var(--bw) calc(var(--bw) * 64 / 60) repeat-y; z-index: 2; }
.rug::before { left: 0; }
.rug::after { right: 0; transform: scaleX(-1); }
.field { position: relative; padding: clamp(70px, 9vw, 130px) var(--gap); }
.field::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    var(--weft), var(--ribs),
    linear-gradient(180deg, rgba(255,255,255,.025) 0 18%, rgba(0,0,0,.02) 18% 31%, transparent 31% 57%, rgba(255,255,255,.02) 57% 64%, rgba(0,0,0,.025) 64% 82%, transparent 82%); }
.field > * { position: relative; }
.field--red { background-color: var(--madder); color: var(--natural); }
.field--natural { background-color: var(--natural); color: var(--ink); }
.field--indigo { background-color: var(--indigo); color: var(--natural); }
.field--saffron { background-color: var(--saffron); color: var(--ink); }
.guard { height: 36px; background: url("guard.svg") 0 0 / 48px 36px repeat-x; position: relative; z-index: 1; }
.guard--b { background-image: url("guard-b.svg"); }

/* Tafeln aus Naturwolle mit Sägezahnkanten */
.panel { position: relative; background: var(--weft), var(--ribs), var(--natural); color: var(--ink); }
.panel::before, .panel::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; background: url("teeth.svg") 0 0 / 24px 12px repeat-x; pointer-events: none; }
.panel::before, .panel::after { background-image: url("teeth-n.svg"); }
.panel::before { top: -12px; }
.panel::after { bottom: -12px; transform: scaleY(-1); }

.kicker { font: 700 13px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--madder); }
h1, h2, h3 { font-family: var(--display); font-weight: 600; }
h2 { font-size: clamp(32px, 3.8vw, 54px); line-height: 1.12; margin: 10px 0 18px; text-wrap: balance; }
h3 { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.2; }
.head { max-width: 760px; margin: 0 auto clamp(44px, 5vw, 72px); text-align: center; }
.intro { font-size: clamp(17px, 1.3vw, 19px); color: var(--ink-2); }
.head--light .kicker { color: var(--saffron); }
.head--light .intro { color: #dfe3ef; }
.field--saffron .kicker { color: var(--madder-dk); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 13px 26px; font: 700 15px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; clip-path: var(--step); transition: background-color .2s, color .2s; }
.btn--red { background: var(--madder); color: var(--natural); }
.btn--red:hover { background: var(--indigo); }
.btn--line { background: var(--indigo); color: var(--natural); }
.btn--line:hover { background: var(--ink); }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(26px, 3.4vw, 46px); padding-bottom: clamp(26px, 3.4vw, 46px); }
.pips { display: flex; justify-content: center; gap: clamp(16px, 4vw, 70px); }
.pips i { width: 30px; height: 30px; background: url("pip.svg") center / contain no-repeat; }
.pips i:nth-child(even) { background-image: url("pip-r.svg"); transform: scale(.7); }
.hero__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 720px) minmax(0, 1fr); align-items: center; gap: clamp(16px, 3vw, 44px); margin: clamp(22px, 3vw, 40px) auto; max-width: 1240px; }
.hero__loz { width: min(100%, 220px); height: auto; justify-self: center; }
.hero__panel { padding: clamp(30px, 3.6vw, 52px) clamp(24px, 4vw, 60px); text-align: center; }
.hero h1 { font-size: clamp(34px, 3.9vw, 58px); line-height: 1.1; margin: 14px 0 18px; color: var(--indigo); text-wrap: balance; }
.lead { font-size: clamp(16.5px, 1.25vw, 18.5px); color: var(--ink-2); max-width: 56ch; margin: 0 auto; }
.ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.avail { margin-top: 20px; font: 700 13px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--green); }

/* ---------- Schwerpunkt ---------- */
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1180px; margin: 0 auto; }
.cases li { position: relative; padding: 30px clamp(18px, 2.4vw, 34px) 34px; text-align: center; }
.cases li::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 60%; height: 6px; transform: translateX(-50%); background: url("teeth.svg") 0 0 / 12px 6px repeat-x; opacity: .7; }
.cases li:nth-last-child(-n+3)::after { display: none; }
.cases li:not(:nth-child(3n))::before { content: ""; position: absolute; right: 0; top: 18%; bottom: 18%; width: 4px; background: repeating-linear-gradient(180deg, var(--indigo) 0 4px, transparent 4px 8px); opacity: .5; }
.pip { display: inline-grid; place-items: center; width: 54px; height: 54px; margin-bottom: 12px; background: url("pip.svg") center / contain no-repeat; font: 700 19px/1 var(--display); color: var(--indigo); padding-top: 2px; }
.pip--r { background-image: url("pip-r.svg"); color: var(--madder-dk); }
.cases h3 { color: var(--indigo); margin-bottom: 8px; hyphens: auto; }
.cases p { font-size: 16px; color: var(--ink-2); }

.stats { display: flex; justify-content: center; gap: clamp(20px, 5vw, 90px); margin: clamp(50px, 5vw, 76px) auto 0; }
.stats li { display: grid; justify-items: center; text-align: center; width: 210px; }
.stats b { display: grid; place-items: center; width: 190px; height: 190px; background: url("dia.svg") center / contain no-repeat; font: 700 clamp(30px, 3vw, 40px)/1 var(--display); color: var(--madder-dk); white-space: nowrap; }
.stats li:nth-child(3) b { font-size: clamp(22px, 2vw, 28px); }
.stats span { margin-top: 10px; font: 700 14px/1.35 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); max-width: 20ch; }

.route { max-width: 900px; margin: clamp(60px, 7vw, 100px) auto 0; text-align: center; }
.route__k { font: 700 13px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--madder); margin-bottom: 18px; }
.route__band { display: flex; align-items: center; justify-content: center; padding: 34px 26px; background: var(--weft), var(--ribs), var(--indigo); clip-path: var(--step); }
.route__band .c { display: grid; place-items: center; min-width: 74px; height: 44px; padding: 0 10px; background: var(--natural); color: var(--indigo); font: 700 19px/1 var(--display); letter-spacing: .08em; transform: translateY(14px); clip-path: var(--step); }
.route__band .c--up { transform: translateY(-14px); background: var(--saffron); color: var(--ink); }
.leg { flex: 1; height: 28px; min-width: 24px; background:
  linear-gradient(var(--natural), var(--natural)) 0 50% / 100% 3px no-repeat; position: relative; }
.leg::before { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--saffron); transform: rotate(45deg); }
.leg--car { background: repeating-linear-gradient(90deg, var(--natural) 0 6px, transparent 6px 11px) 0 50% / 100% 3px no-repeat; }
.leg--car::before { background: var(--natural); border-radius: 0; transform: none; width: 10px; height: 10px; margin: -5px 0 0 -5px; }
.route__text { margin-top: 20px; font-size: 16.5px; }
.route__note { margin-top: 6px; font-size: 15px; font-style: italic; color: var(--ink-2); }

/* ---------- Leistungen ---------- */
.svc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px clamp(18px, 2.4vw, 36px); max-width: 1180px; margin: 0 auto; }
.svc .panel { padding: 30px clamp(20px, 2.2vw, 32px) 32px; text-align: center; }
.svc img { height: 72px; width: auto; margin: 0 auto 18px; }
.svc h3 { color: var(--indigo); margin-bottom: 8px; hyphens: auto; }
.svc p { font-size: 16px; color: var(--ink-2); }

/* ---------- Ablauf ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1180px; margin: 0 auto; }
.steps li { position: relative; padding: 6px clamp(16px, 2.2vw, 30px) 10px; text-align: center; }
.steps li:not(:last-child)::after { content: ""; position: absolute; right: -6px; top: 0; bottom: 0; width: 12px; background: url("teeth.svg") 0 0 / 12px 6px repeat-y; opacity: .55; }
.steps h3 { color: var(--ink); margin-bottom: 6px; }
.steps p { font-size: 16px; color: #3d2a20; }

/* ---------- Über uns ---------- */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 80px); align-items: center; max-width: 100%; }
.about > * { max-width: 600px; }
.about__photo { justify-self: end; width: 100%; max-width: 470px; padding: 16px; background: var(--weft), var(--ribs), var(--natural); clip-path: var(--step); box-shadow: inset 0 0 0 6px var(--indigo), inset 0 0 0 10px var(--saffron); }
.about__photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; padding: 6px; }
.about__txt { padding: clamp(28px, 3.6vw, 48px); }
.about__txt h2 { color: var(--indigo); }
.about__txt > p { color: var(--ink-2); }
.feats { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.feats li { position: relative; padding-left: 26px; font-weight: 700; font-size: 15.5px; }
.feats li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; background: url("pip-r.svg") center / contain no-repeat; }

/* ---------- Kontakt ---------- */
.info { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 1180px; margin: 0 auto; text-align: center; }
.info > div { position: relative; padding: 8px 16px; }
.info > div:not(:last-child)::after { content: ""; position: absolute; right: -6px; top: 4px; bottom: 4px; width: 12px; background: url("teeth-r.svg") 0 0 / 12px 6px repeat-y; opacity: .5; }
.info dt { font: 700 12.5px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--madder); margin-bottom: 8px; }
.info dd { font: 600 17px/1.45 var(--sans); overflow-wrap: anywhere; }
.info dd small { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; color: var(--ink-2); }
.info a { color: var(--indigo); text-underline-offset: 3px; }
.info a:hover { color: var(--madder); }
.contact__cta { margin-top: clamp(36px, 4vw, 56px); text-align: center; }

/* ---------- Fuß ---------- */
.end--foot .end__in--foot { display: grid; grid-template-columns: auto 1fr auto; gap: 14px 36px; padding: 44px clamp(16px, 4vw, 56px) 26px; }
.foot__brand { font: 600 19px/1.3 var(--display); color: var(--indigo); }
.foot__addr p:last-child { font-size: 15px; color: var(--ink-2); }
.foot__nav { display: flex; flex-wrap: wrap; gap: 6px 22px; font-weight: 700; font-size: 15px; }
.foot__nav a { color: var(--indigo); text-underline-offset: 4px; }
.foot__nav a:hover { color: var(--madder); }
.foot__copy { grid-column: 2 / -1; font-size: 13.5px; color: var(--ink-2); }
.fringe--bottom { background-color: #3b2a22; padding-bottom: 50px; height: 96px; background-position: 0 0; }

/* ---------- Weben beim Hereinscrollen ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .weave { clip-path: inset(100% 0 0 0); }
  .js .weave.is-in { clip-path: inset(0 0 0 0); transition: clip-path 1.1s steps(18, end); }
}

/* ---------- Rechtsseiten ---------- */
.legal { padding: clamp(50px, 7vw, 100px) var(--gap) clamp(60px, 8vw, 110px); }
.legal__panel { max-width: 860px; margin: 0 auto; padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 64px); }
.back { display: inline-block; font: 700 15px/1.2 var(--sans); color: var(--indigo); text-underline-offset: 4px; margin-bottom: 24px; }
.back:hover { color: var(--madder); }
.legal h1 { font-size: clamp(30px, 4.6vw, 52px); line-height: 1.12; color: var(--indigo); margin: 10px 0 30px; padding-bottom: 26px; background: url("teeth-r.svg") 0 100% / 12px 6px repeat-x; hyphens: auto; overflow-wrap: break-word; }
.legal-body { max-width: 68ch; font-size: 16.5px; line-height: 1.68; }
.legal-body h2 { font-size: clamp(21px, 2.2vw, 27px); color: var(--indigo); margin: 38px 0 10px; text-wrap: initial; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body ul { margin: 0 0 14px; }
.legal-body li { position: relative; padding-left: 26px; margin-bottom: 8px; }
.legal-body li::before { content: ""; position: absolute; left: 0; top: .4em; width: 14px; height: 14px; background: url("pip-r.svg") center / contain no-repeat; }
.legal-body a { color: var(--madder-dk); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-note { padding: 14px 18px; background: #f6e2b5; border-left: 6px solid var(--saffron); font-style: italic; }
.legal-address { padding: 14px 18px; background: var(--natural-2); font-weight: 600; }

/* ---------- Responsiv ---------- */
@media (max-width: 1180px) {
  :root { --bw: 44px; }
  .hero__row { grid-template-columns: minmax(0, 150px) minmax(0, 1fr) minmax(0, 150px); }
  .info { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 26px; }
  .info > div:nth-child(3)::after { display: none; }
  .nav__list a { padding: 10px 9px; font-size: 14px; }
}
@media (max-width: 1023px) {
  .menu { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; min-height: 46px; padding: 10px 16px; border: 0; background: var(--indigo); color: var(--natural); font: 700 14px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; clip-path: var(--step); }
  .menu__ico { position: relative; width: 18px; height: 12px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
  .menu__ico::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 2px; background: currentColor; }
  .end.open .menu__ico { border-color: transparent; }
  .end.open .menu__ico::after { transform: rotate(45deg); box-shadow: none; }
  .end.open .menu__ico::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 2px; background: currentColor; transform: rotate(-45deg); }
  .nav { position: absolute; left: 0; right: 0; top: calc(100% - 22px); z-index: 30; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 18px clamp(16px, 4vw, 56px) 26px; background: var(--weft), var(--ribs), var(--natural); border-bottom: 8px solid var(--madder); box-shadow: 0 24px 30px -20px rgba(0,0,0,.6); }
  .end.open .nav { display: flex; }
  .nav__list { flex-direction: column; margin: 0; }
  .nav__list a { padding: 14px 4px; font-size: 18px; border-bottom: 1px solid rgba(42,29,26,.18); }
  .nav__end { justify-content: space-between; padding-top: 16px; }
  .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cases li::before, .cases li::after { display: none !important; }
  .svc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
  .steps li::after { display: none; }
  .about { grid-template-columns: 1fr; justify-items: center; }
  .about__photo { justify-self: center; max-width: 440px; }
  .end--foot .end__in--foot { grid-template-columns: auto 1fr; }
  .foot__nav, .foot__copy { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  :root { --bw: 22px; --gap: 16px; }
  body { font-size: 16px; }
  .rug::before, .rug::after { background-size: var(--bw) calc(var(--bw) * 64 / 60); }
  .logo img { width: 72px; }
  .end__in { padding-bottom: 32px; }
  .fringe { height: 30px; background-size: 20px 30px; }
  .hero__row { grid-template-columns: 1fr; margin: 18px 0; }
  .hero__loz { display: none; }
  .hero__panel { padding: 28px 18px 30px; }
  .hero h1 { font-size: clamp(30px, 8.4vw, 38px); }
  .ctas .btn { flex: 1 1 100%; }
  .pips { gap: 14px; }
  .pips i { width: 22px; height: 22px; }
  .pips i:nth-child(n+6) { display: none; }
  .field { padding-top: 60px; padding-bottom: 60px; }
  .cases, .svc, .steps { grid-template-columns: 1fr; }
  .cases li { padding: 18px 6px 24px; }
  .svc { gap: 44px; }
  .stats { flex-direction: column; align-items: center; gap: 26px; }
  .stats b { width: 160px; height: 160px; }
  .route__band { flex-wrap: wrap; row-gap: 22px; padding: 26px 14px; }
  .route__band .c { min-width: 60px; font-size: 17px; transform: none !important; }
  .leg { min-width: 18px; flex: 1 1 18px; }
  .about__photo { padding: 12px; }
  .about__txt { padding: 26px 18px; }
  .feats { grid-template-columns: 1fr; }
  .info { grid-template-columns: 1fr; }
  .info > div::after { display: none; }
  .end--foot .end__in--foot { grid-template-columns: 1fr; padding-bottom: 90px; }
  .foot__copy { grid-column: auto; }
  .fringe--bottom { height: 80px; padding-bottom: 50px; }
  .legal__panel { padding: 28px 16px; }
}