/* Arties Studios. Websites für Betriebe aus der Region. */
@font-face { font-family: 'Instrument'; src: url(fonts/instrument.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Instrument'; src: url(fonts/instrument-italic.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Hanken'; src: url(fonts/hanken.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
:root { --bg: #f1efe8; --bg-2: #e8e5dc; --ink: #0f0f0e; --muted: #5b5a55; --line: rgba(15, 15, 14, .12); --line-2: rgba(15, 15, 14, .24);
  --lime: #d7ff3c; --lime-2: #c4ee1f; --dark: #0f0f0e; --on-dark: #f1efe8; --muted-d: #a5a49d; --line-d: rgba(241, 239, 232, .14);
  --font-d: 'Bricolage', 'Arial Black', system-ui, sans-serif; --font-t: 'Hanken', system-ui, -apple-system, sans-serif; --r: 22px; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-t); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-d); font-weight: 700; line-height: 1; letter-spacing: -0.035em; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.dunkel :focus-visible { outline-color: var(--lime); }
.weite { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .weite { padding: 0 40px; } }
.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Logo */
.logo { display: -webkit-inline-box; display: inline-flex; -webkit-box-align: center; align-items: center; text-decoration: none; font-family: var(--font-d); font-weight: 800; font-size: 1.45rem; letter-spacing: -0.05em; line-height: 1; }
.logo__punkte { display: -webkit-inline-box; display: inline-flex; -webkit-box-orient: vertical; flex-direction: column; margin-left: 4px; }
.logo__punkte i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin: 2px 0; }
.logo__punkte i:first-child { background: var(--lime); box-shadow: 0 0 0 1.5px var(--ink); }
.dunkel .logo__punkte i:first-child { box-shadow: none; }

/* Kopf */
.kopf { position: -webkit-sticky; position: sticky; top: 0; z-index: 50; background: rgba(241, 239, 232, .86); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.kopf.ist-unten { border-bottom-color: var(--line); }
.kopf .weite { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: justify; justify-content: space-between; min-height: 72px; }
.nav { display: none; }
.nav a { text-decoration: none; font-weight: 500; font-size: .9375rem; margin: 0 14px; padding: 8px 0; position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--ink); -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left; transform-origin: left; transition: -webkit-transform .25s; transition: transform .25s; }
.nav a:hover::after { -webkit-transform: scaleX(1); transform: scaleX(1); }
.kopf__rechts { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; }
.kopf__menue { background: none; border: 0; font: inherit; font-weight: 600; padding: 10px 0 10px 16px; cursor: pointer; color: inherit; }
.kopf .knopf { display: none; }
@media (min-width: 560px) { .kopf .knopf { display: inline-block; } }
@media (min-width: 1000px) { .nav { display: -webkit-box; display: flex; } .kopf__menue { display: none; } }
.menue { display: none; border-top: 1px solid var(--line); background: var(--bg); }
.menue a { display: block; padding: 16px 20px; font-family: var(--font-d); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.03em; text-decoration: none; border-bottom: 1px solid var(--line); }
body.menue-offen .menue { display: block; }
@media (min-width: 1000px) { body.menue-offen .menue { display: none; } }

/* Knöpfe */
.knopf { display: inline-block; text-decoration: none; text-align: center; font-weight: 700; font-size: .9375rem; line-height: 1.2; padding: 15px 24px; border-radius: 999px; background: var(--ink); color: var(--bg); border: 2px solid var(--ink); transition: transform .2s, background-color .2s, color .2s; }
.knopf:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); }
.knopf--lime { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.knopf--rand { background: transparent; color: inherit; border-color: currentColor; }
.knopf--klein { padding: 11px 18px; font-size: .875rem; }
.knopfreihe { display: -webkit-box; display: flex; flex-wrap: wrap; margin: -6px; }
.knopfreihe > * { margin: 6px; }
.pfeil::after { content: " →"; }

/* Allgemein */
.sektion { padding: 88px 0; }
@media (min-width: 768px) { .sektion { padding: 128px 0; } }
.dunkel { background: var(--dark); color: var(--on-dark); }
.augen { display: -webkit-inline-box; display: inline-flex; -webkit-box-align: center; align-items: center; font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 18px; }
.augen::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 1.5px var(--ink); margin-right: 10px; }
.dunkel .augen::before { box-shadow: none; }
.titel { font-size: 2.6rem; font-size: clamp(2.6rem, 1.4rem + 5vw, 5.6rem); }
.einl { font-size: 1.1875rem; color: var(--muted); max-width: 620px; margin-top: 20px; }
.dunkel .einl { color: var(--muted-d); }
.kopfzeile { display: grid; grid-gap: 20px; gap: 20px; margin-bottom: 52px; }
@media (min-width: 900px) { .kopfzeile--seite { grid-template-columns: 1.2fr 1fr; -webkit-box-align: end; align-items: end; } .kopfzeile--seite .einl { margin-top: 0; } }
.mark { background: linear-gradient(transparent 58%, var(--lime) 58%, var(--lime) 92%, transparent 92%); padding: 0 .06em; }

/* Held */
.held { padding: 40px 0 72px; }
@media (min-width: 768px) { .held { padding: 64px 0 96px; } }
.held__gitter { display: grid; grid-gap: 48px; gap: 48px; -webkit-box-align: center; align-items: center; }
@media (min-width: 1080px) { .held__gitter { grid-template-columns: 1.05fr 1fr; grid-gap: 56px; gap: 56px; } }
.held h1 { font-size: 3.1rem; font-size: clamp(3.1rem, 1.3rem + 5.6vw, 6.2rem); line-height: .92; letter-spacing: -0.05em; }
.held__unter { font-size: 1.1875rem; color: var(--muted); max-width: 540px; margin: 26px 0 32px; }
.held__vertrauen { display: -webkit-box; display: flex; flex-wrap: wrap; margin: 32px -10px 0; color: var(--muted); font-size: .9375rem; }
.held__vertrauen span { margin: 6px 10px; display: -webkit-inline-box; display: inline-flex; -webkit-box-align: center; align-items: center; }
.held__vertrauen svg { width: 18px; height: 18px; margin-right: 8px; color: var(--ink); }

/* Vorher und Nachher */
.vn { position: relative; border-radius: var(--r); overflow: hidden; height: 460px; background: #fff; box-shadow: 0 40px 80px -40px rgba(15, 15, 14, .45), 0 0 0 1px var(--line); -webkit-user-select: none; user-select: none; }
@media (min-width: 768px) { .vn { height: 540px; } }
.vn__ebene { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.vn__alt { -webkit-clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); z-index: 2; }
.vn__griff { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 0; z-index: 3; pointer-events: none; }
.vn__griff::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: var(--lime); box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.vn__griff span { position: absolute; top: 50%; left: 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: var(--lime); color: var(--ink); display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; font-weight: 800; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.vn__regler { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 4; -webkit-appearance: none; appearance: none; }
.vn__etikett { position: absolute; top: 14px; z-index: 5; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 6px 11px; border-radius: 99px; pointer-events: none; }
.vn__etikett--alt { left: 14px; background: #fff; color: #000; border: 1px solid #999; }
.vn__etikett--neu { right: 14px; background: var(--ink); color: var(--lime); }
/* Alte Seite, absichtlich hässlich */
.alt { height: 100%; background: #d4d0c8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='4' height='4' fill='%23c9c4ba'/%3E%3Crect x='4' y='4' width='4' height='4' fill='%23c9c4ba'/%3E%3C/svg%3E"); font-family: 'Times New Roman', Times, serif; color: #000; padding: 54px 18px 18px; font-size: 15px; line-height: 1.35; overflow: hidden; }
.alt__kasten { background: #fffde8; border: 3px ridge #a0a0a0; padding: 14px; max-width: 460px; }
.alt h4 { margin: 0 0 6px; font-family: 'Comic Sans MS', 'Comic Sans', cursive; color: #c00; font-size: 26px; text-align: center; text-decoration: underline; }
.alt marquee, .alt .lauf { display: block; background: #000080; color: #ff0; font-weight: bold; padding: 2px 0; margin: 8px 0; font-size: 13px; white-space: nowrap; overflow: hidden; }
.alt table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 13px; }
.alt td { border: 1px solid #888; padding: 3px 6px; background: #fff; }
.alt a { color: #00e; }
.alt__zaehler { display: inline-block; background: #000; color: #0f0; font-family: 'Courier New', monospace; padding: 1px 6px; letter-spacing: 2px; }
.alt__klein { font-size: 11px; color: #444; margin-top: 8px; text-align: center; }
.alt__bau { display: inline-block; background: repeating-linear-gradient(45deg, #ff0 0 8px, #000 8px 16px); color: #fff; padding: 2px 6px; font-weight: bold; text-shadow: 0 0 2px #000; font-size: 12px; }
/* Neue Seite */
.neu { height: 100%; position: relative; color: #f4e9d8; font-family: Georgia, serif; overflow: hidden; background: #17110d; }
.neu img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.neu::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(23,17,13,.15), rgba(23,17,13,.92) 85%); }
.neu__nav { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; padding: 50px 24px 0; font-family: var(--font-t); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.neu__nav b { font-family: Georgia, serif; font-style: italic; text-transform: none; font-size: 18px; letter-spacing: 0; }
.neu__nav span { background: #e2582c; color: #17110d; padding: 7px 12px; border-radius: 99px; font-weight: 700; }
.neu__inhalt { position: absolute; left: 24px; right: 24px; bottom: 26px; z-index: 2; }
.neu__inhalt small { font-family: var(--font-t); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #f08a5d; font-weight: 700; }
.neu__inhalt strong { display: block; font-weight: 400; font-size: 54px; line-height: .9; letter-spacing: -0.04em; margin: 8px 0 14px; }
@media (min-width: 768px) { .neu__inhalt strong { font-size: 72px; } }
.neu__inhalt strong em { color: #f08a5d; }
.neu__zeile { display: -webkit-box; display: flex; flex-wrap: wrap; font-family: var(--font-t); font-size: 13px; }
.neu__zeile span { margin: 4px 8px 4px 0; padding: 8px 13px; border-radius: 99px; border: 1px solid rgba(244,233,216,.4); }
.neu__zeile span:first-child { background: #e2582c; border-color: #e2582c; color: #17110d; font-weight: 700; }
.neu__zeile .live::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2ecc71; margin-right: 7px; box-shadow: 0 0 0 3px rgba(46,204,113,.3); }
.vn__hinweis { text-align: center; font-size: .875rem; color: var(--muted); margin-top: 14px; }

/* Laufband */
.laufband { overflow: hidden; white-space: nowrap; background: var(--lime); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 16px 0; }
.laufband__spur { display: inline-block; -webkit-animation: lauf 36s linear infinite; animation: lauf 36s linear infinite; font-family: var(--font-d); font-weight: 700; font-size: 1.75rem; letter-spacing: -0.03em; }
.laufband__spur span { margin: 0 20px; }
@-webkit-keyframes lauf { to { -webkit-transform: translateX(-50%); transform: translateX(-50%); } }
@keyframes lauf { to { -webkit-transform: translateX(-50%); transform: translateX(-50%); } }

/* Bento */
.bento { display: grid; grid-gap: 16px; gap: 16px; }
@media (min-width: 760px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 760px) { .bento .breit { grid-column: 1 / -1; } }
@media (min-width: 1080px) { .bento { grid-template-columns: repeat(4, 1fr); } .bento .gross { grid-column: span 2; grid-row: span 2; } }
.kachel.breit { display: grid; grid-gap: 4px 28px; gap: 4px 28px; }
@media (min-width: 900px) { .kachel.breit { grid-template-columns: auto 1fr; -webkit-box-align: center; align-items: center; } .kachel.breit .kachel__icon { grid-row: span 2; margin-bottom: 0; } }
.kachel { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 28px; position: relative; overflow: hidden; }
.kachel h3 { font-size: 1.5rem; letter-spacing: -0.03em; margin-bottom: 10px; }
.kachel p { color: var(--muted); }
.kachel__icon { width: 46px; height: 46px; border-radius: 14px; background: var(--bg); display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; margin-bottom: 22px; }
.kachel__icon svg { width: 24px; height: 24px; }
.kachel--lime { background: var(--lime); border-color: var(--lime); }
.kachel--lime p { color: #2d3500; }
.kachel--lime .kachel__icon { background: rgba(15,15,14,.08); }
.kachel--dunkel { background: var(--dark); color: var(--on-dark); border-color: var(--dark); }
.kachel--dunkel p { color: var(--muted-d); }
.kachel--dunkel .kachel__icon { background: rgba(241,239,232,.08); }
.handy { width: 236px; margin: 30px auto 0; background: var(--ink); border-radius: 36px; padding: 10px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); }
.handy__schirm { background: #f8f2e7; border-radius: 28px; overflow: hidden; height: 330px; position: relative; color: #2b2219; }
.handy__kerbe { width: 80px; height: 20px; background: var(--ink); border-radius: 0 0 14px 14px; margin: 0 auto; }
.handy__inhalt { padding: 16px 16px 0; }
.handy__inhalt b { display: block; font-family: Georgia, serif; font-weight: 400; font-size: 28px; line-height: 1; margin: 6px 0 12px; }
.handy__status { display: -webkit-inline-box; display: inline-flex; -webkit-box-align: center; align-items: center; font-size: 12px; font-weight: 700; background: #fff; border-radius: 99px; padding: 6px 11px; border: 1px solid rgba(0,0,0,.08); }
.handy__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #c0392b; margin-right: 7px; }
.handy__status.ist-offen::before { background: #2ecc71; box-shadow: 0 0 0 3px rgba(46,204,113,.3); }
.handy__zeile { display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; font-size: 12px; padding: 9px 0; border-bottom: 1px dashed rgba(0,0,0,.15); }
.handy__knopf { position: absolute; left: 14px; right: 14px; bottom: 14px; background: #3554c9; color: #fff; text-align: center; border-radius: 99px; padding: 11px; font-size: 13px; font-weight: 700; }

/* Vorlagen */
.filter { display: -webkit-box; display: flex; flex-wrap: wrap; margin: -5px -5px 32px; }
.filter button { font: inherit; font-weight: 600; font-size: .9375rem; margin: 5px; padding: 10px 18px; border-radius: 99px; border: 1.5px solid var(--line-d); background: transparent; color: var(--on-dark); cursor: pointer; transition: background-color .2s, color .2s; }
.filter button[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.vorlagen { display: grid; grid-gap: 20px; gap: 20px; }
@media (min-width: 700px) { .vorlagen { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .vorlagen { grid-template-columns: repeat(4, 1fr); } }
.vorlage { text-decoration: none; display: block; border-radius: 18px; background: #1b1b19; border: 1px solid var(--line-d); overflow: hidden; transition: transform .3s, border-color .3s; }
.vorlage:hover { -webkit-transform: translateY(-6px); transform: translateY(-6px); border-color: var(--lime); }
.vorlage[hidden] { display: none; }
.vorlage__leiste { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; padding: 10px 12px; background: #262624; }
.vorlage__leiste i { width: 9px; height: 9px; border-radius: 50%; background: #4a4a46; margin-right: 6px; }
.vorlage__leiste span { margin-left: 8px; font-size: .75rem; color: var(--muted-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #1b1b19; border-radius: 6px; padding: 3px 10px; -webkit-box-flex: 1; flex: 1; }
.vorlage__bild { position: relative; height: 230px; overflow: hidden; background: #333; }
.vorlage__bild img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform .6s; }
.vorlage:hover .vorlage__bild img { -webkit-transform: scale(1.05); transform: scale(1.05); }
.vorlage__probe { position: absolute; left: 14px; right: 14px; bottom: 14px; color: #fff; font-size: 1.6rem; line-height: 1; text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.vorlage__text { padding: 18px 18px 20px; }
.vorlage__kopf { display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; margin-bottom: 8px; }
.vorlage__branche { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lime); }
.vorlage__farben { display: -webkit-box; display: flex; }
.vorlage__farben i { width: 16px; height: 16px; border-radius: 50%; margin-left: -4px; border: 2px solid #1b1b19; }
.vorlage h3 { font-size: 1.4rem; letter-spacing: -0.03em; margin-bottom: 6px; }
.vorlage p { color: var(--muted-d); font-size: .9375rem; }
.vorlage__los { display: inline-block; margin-top: 14px; font-weight: 700; font-size: .9375rem; }
.vorlagen-fuss { margin-top: 40px; color: var(--muted-d); max-width: 760px; }

/* Preise */
.preise { display: grid; grid-gap: 20px; gap: 20px; }
@media (min-width: 960px) { .preise { grid-template-columns: 1.15fr 1fr; } }
.preis { border-radius: 28px; padding: 34px 28px; border: 1px solid var(--line); background: #fff; display: -webkit-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; }
@media (min-width: 768px) { .preis { padding: 44px 42px; } }
.preis--dunkel { background: var(--dark); color: var(--on-dark); border-color: var(--dark); }
.preis__kopf { display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: start; align-items: flex-start; flex-wrap: wrap; }
.preis__name { font-family: var(--font-d); font-weight: 700; font-size: 1.9rem; letter-spacing: -0.03em; }
.preis__marke { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: var(--lime); color: var(--ink); border-radius: 99px; padding: 6px 12px; margin-top: 6px; }
.preis__betrag { font-family: var(--font-d); font-weight: 800; font-size: 3.6rem; font-size: clamp(3.6rem, 2.4rem + 4vw, 5.6rem); line-height: .95; letter-spacing: -0.05em; margin: 22px 0 6px; }
.preis__betrag small { font-size: .32em; letter-spacing: -0.01em; font-weight: 600; color: var(--muted); }
.preis--dunkel .preis__betrag small { color: var(--muted-d); }
.preis__unter { color: var(--muted); }
.preis--dunkel .preis__unter { color: var(--muted-d); }
.stufen { display: grid; grid-gap: 10px; gap: 10px; margin: 26px 0 8px; }
@media (min-width: 560px) { .stufen { grid-template-columns: 1fr 1fr; } }
.stufe { border: 1.5px solid var(--line-2); border-radius: 16px; padding: 16px 18px; }
.stufe b { font-family: var(--font-d); font-size: 1.6rem; letter-spacing: -0.03em; display: block; }
.stufe span { display: block; font-weight: 700; margin-bottom: 4px; }
.stufe p { color: var(--muted); font-size: .9375rem; }
.haken { margin-top: 24px; }
.haken li { position: relative; padding: 9px 0 9px 34px; border-top: 1px solid var(--line); }
.preis--dunkel .haken li { border-top-color: var(--line-d); }
.haken li::before { content: ""; position: absolute; left: 0; top: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230f0f0e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat; }
.preis .knopf { margin-top: 30px; -ms-flex-item-align: start; align-self: flex-start; }
.preis__optional { font-size: .875rem; color: var(--muted-d); margin-top: 14px; }
.preise-fuss { display: grid; grid-gap: 16px; gap: 16px; margin-top: 20px; }
@media (min-width: 900px) { .preise-fuss { grid-template-columns: repeat(3, 1fr); } }
.preise-fuss div { border: 1px dashed var(--line-2); border-radius: 18px; padding: 20px 22px; }
.preise-fuss b { display: block; margin-bottom: 4px; }
.preise-fuss p { color: var(--muted); font-size: .9375rem; }

/* Ablauf */
.ablauf { display: grid; grid-gap: 16px; gap: 16px; counter-reset: s; }
@media (min-width: 760px) { .ablauf { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .ablauf { grid-template-columns: repeat(4, 1fr); } }
.schritt { border-top: 2px solid var(--ink); padding-top: 22px; }
.schritt::before { counter-increment: s; content: counter(s); display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--lime); border: 2px solid var(--ink); font-family: var(--font-d); font-weight: 800; font-size: 1.4rem; margin-bottom: 24px; }
.schritt h3 { font-size: 1.6rem; letter-spacing: -0.03em; margin-bottom: 10px; }
.schritt p { color: var(--muted); }
.schritt--extra::before { content: "✓"; background: var(--ink); color: var(--lime); }

/* Über uns */
.wir { display: grid; grid-gap: 48px; gap: 48px; -webkit-box-align: center; align-items: center; }
@media (min-width: 1000px) { .wir { grid-template-columns: 1fr 1.1fr; grid-gap: 80px; gap: 80px; } }
.wir__punkte { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 16px; gap: 16px; }
.person { text-align: center; }
.person__kreis { width: 100%; padding-top: 100%; border-radius: 50%; position: relative; background: var(--lime); }
.person:nth-child(2) .person__kreis { background: var(--on-dark); margin-top: 0; }
@media (min-width: 560px) { .person:nth-child(2) { margin-top: 70px; } }
.person__kreis span { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-family: var(--font-d); font-weight: 800; font-size: 5rem; font-size: clamp(4rem, 2rem + 8vw, 9rem); color: var(--ink); letter-spacing: -0.06em; }
.person h3 { font-size: 1.8rem; margin-top: 18px; letter-spacing: -0.03em; }
.person p { color: var(--muted-d); font-size: .9375rem; }
.wir__text p { color: var(--muted-d); font-size: 1.125rem; }
.wir__text p + p { margin-top: 16px; }
.wir__text .wir__zitat { color: var(--on-dark); font-family: var(--font-d); font-weight: 600; font-size: 1.8rem; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); line-height: 1.08; letter-spacing: -0.03em; margin: 30px 0 0; padding-left: 22px; border-left: 4px solid var(--lime); }
.marken { display: -webkit-box; display: flex; flex-wrap: wrap; margin: 26px -5px 0; }
.marken span { margin: 5px; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line-d); font-size: .875rem; }

/* FAQ */
.faq { display: grid; grid-gap: 40px; gap: 40px; }
@media (min-width: 1000px) { .faq { grid-template-columns: 1fr 1.6fr; } }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq details:first-child { border-top: 1px solid var(--line-2); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 46px 22px 0; position: relative; font-family: var(--font-d); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.02em; line-height: 1.2; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: var(--lime); display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; font-family: var(--font-t); font-size: 1.3rem; transition: transform .25s; }
.faq details[open] summary::after { -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); }
.faq details p { color: var(--muted); padding: 0 0 24px; max-width: 680px; }

/* Kontakt */
.ende { text-align: center; padding: 96px 0; }
@media (min-width: 768px) { .ende { padding: 140px 0; } }
.ende h2 { font-size: 3rem; font-size: clamp(3rem, 1.2rem + 8vw, 8.4rem); line-height: .9; letter-spacing: -0.055em; max-width: 1100px; margin: 0 auto; }
.ende h2 span { color: var(--lime); }
.ende p { color: var(--muted-d); font-size: 1.1875rem; max-width: 560px; margin: 26px auto 34px; }
.ende .knopfreihe { -webkit-box-pack: center; justify-content: center; }
.ende__daten { display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-pack: center; justify-content: center; margin-top: 40px; color: var(--muted-d); font-size: .9375rem; }
.ende__daten span { margin: 4px 14px; }

/* Fuß */
.fuss { border-top: 1px solid var(--line-d); padding: 34px 0 40px; font-size: .9375rem; color: var(--muted-d); }
.fuss .weite { display: grid; grid-gap: 18px; gap: 18px; -webkit-box-align: center; align-items: center; }
@media (min-width: 900px) { .fuss .weite { grid-template-columns: auto 1fr auto; } .fuss__mitte { text-align: center; } }
.fuss a { margin-right: 18px; }
.fuss .logo { color: var(--on-dark); margin-right: 0; }

/* Einblenden */
[data-reveal] { opacity: 0; -webkit-transform: translateY(22px); transform: translateY(22px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), -webkit-transform .8s cubic-bezier(.2, .7, .2, 1); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }
[data-reveal].ist-da { opacity: 1; -webkit-transform: none; transform: none; }
.no-js [data-reveal] { opacity: 1; -webkit-transform: none; transform: none; }

/* Rechtliches */
.recht { padding: 60px 0 100px; max-width: 760px; }
.recht h1 { font-size: 3rem; margin-bottom: 30px; }
.recht h2 { font-size: 1.5rem; margin: 34px 0 10px; letter-spacing: -0.02em; }
.recht p { color: var(--muted); margin-bottom: 10px; }
.recht .platz { background: var(--lime); padding: 0 4px; color: var(--ink); }

/* ===== Farbschema: Anthrazit, Elfenbein, Champagner ===== */
:root { --bg: #121211; --bg-2: #181816; --card: #1d1c1a; --ink: #ede8df; --muted: #a29c91; --line: rgba(237, 232, 223, .09); --line-2: rgba(237, 232, 223, .2);
  --lime: #c9b48f; --lime-2: #b8a27a; --on-lime: #141311; --dark: #0d0d0c; --on-dark: #ede8df; --muted-d: #a29c91; --line-d: rgba(237, 232, 223, .1);
  --font-d: 'Instrument', 'Times New Roman', Georgia, serif; }
h1, h2 { font-weight: 400; letter-spacing: -0.02em; line-height: .98; }
h1 em, h2 em { font-style: italic; color: var(--lime); }
h3 { font-family: var(--font-t); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.held h1 { font-size: 3.5rem; font-size: clamp(3.5rem, 1.5rem + 6.4vw, 7.2rem); letter-spacing: -0.03em; line-height: .94; }
.titel { font-size: 2.9rem; font-size: clamp(2.9rem, 1.5rem + 5.4vw, 6.2rem); }

/* Logo: Rahmen als Zeichen, Name in Serifen */
.logo { font-family: var(--font-d); font-weight: 400; font-size: 1.75rem; letter-spacing: -0.01em; }
.logo__zeichen { width: 22px; height: 22px; border: 1.5px solid var(--lime); margin-right: 10px; position: relative; -ms-flex-negative: 0; flex-shrink: 0; }
.logo__zeichen::after { content: ""; position: absolute; top: 4px; right: 4px; bottom: 4px; left: 4px; border: 1.5px solid currentColor; opacity: .55; }
.logo__zusatz { font-family: var(--font-t); font-size: .6875rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--line-2); line-height: 1.4; }

.kopf { background: rgba(18, 18, 17, .86); }
.kopf.ist-unten { border-bottom-color: var(--line); }
.nav a::after { background: var(--lime); height: 1px; }
.menue a { font-weight: 400; font-size: 1.9rem; letter-spacing: -0.01em; }
.knopf { color: var(--on-lime); letter-spacing: .01em; font-weight: 600; }
.knopf--lime { color: var(--on-lime); }
.knopf--rand { color: inherit; border-width: 1px; border-color: var(--line-2); }
.knopf--rand:hover { border-color: var(--ink); }
.augen { color: var(--muted); letter-spacing: .2em; font-weight: 600; }
.augen::before { width: 26px; height: 1px; border-radius: 0; background: var(--lime); box-shadow: none; margin-right: 12px; }
.held__vertrauen svg { color: var(--lime); }

/* Vorher und Nachher */
.vn { background: var(--card); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .8), 0 0 0 1px var(--line); }
.vn__etikett--neu { background: var(--dark); color: var(--lime); }
.vn__griff span { color: var(--on-lime); }
.vn__griff::before { width: 2px; left: -1px; }

/* Laufband ruhig */
.laufband { background: var(--bg); color: var(--muted); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; }
.laufband__spur { font-family: var(--font-d); font-weight: 400; font-style: italic; font-size: 2rem; letter-spacing: 0; }
.laufband__spur span:nth-child(even) { color: var(--lime); }

/* Kacheln */
.kachel { background: var(--card); border-color: var(--line); }
.kachel__icon { background: rgba(201, 180, 143, .1); color: var(--lime); }
.kachel--lime { background: linear-gradient(160deg, #232119 0%, #1a1916 60%); color: var(--ink); border-color: rgba(201, 180, 143, .35); }
.kachel--lime p { color: var(--muted); }
.kachel--lime .kachel__icon { background: rgba(201, 180, 143, .14); }
.kachel--dunkel { background: var(--dark); border-color: var(--line-d); }
.handy, .handy__kerbe { background: #0b0b0a; }
.handy { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(237, 232, 223, .12); }

/* Vorlagen */
.filter button { border-width: 1px; }
.filter button[aria-pressed="true"] { color: var(--on-lime); }
.vorlage { background: #171715; }
.vorlage:hover { border-color: rgba(201, 180, 143, .6); }
.vorlage__leiste { background: #201f1c; }
.vorlage__leiste span { background: #171715; }
.vorlage__farben i { border-color: #171715; }
.vorlage__branche { letter-spacing: .16em; }
.vorlage h3 { font-family: var(--font-d); font-weight: 400; font-size: 1.7rem; letter-spacing: -0.01em; }

/* Preise */
.preis { background: var(--card); border-color: var(--line); }
.preis--dunkel { background: linear-gradient(160deg, #24221c 0%, #171614 70%); border-color: rgba(201, 180, 143, .35); }
.preis__name { font-weight: 400; font-size: 2.3rem; letter-spacing: -0.01em; }
.preis__marke { color: var(--on-lime); letter-spacing: .14em; }
.preis__betrag { font-weight: 400; letter-spacing: -0.03em; }
.stufe { border: 1px solid var(--line-2); }
.stufe b { font-weight: 400; font-size: 2rem; letter-spacing: -0.01em; }
.preise-fuss div { border: 1px solid var(--line); background: rgba(237, 232, 223, .02); }

/* Ablauf */
.schritt { border-top: 1px solid var(--line-2); }
.schritt::before { background: transparent; border: 1px solid var(--lime); color: var(--lime); font-weight: 400; font-size: 1.5rem; }
.schritt--extra::before { background: var(--lime); color: var(--on-lime); }
.schritt h3 { font-size: 1.35rem; }

/* Über uns */
.person__kreis { background: var(--card); border: 1px solid rgba(201, 180, 143, .5); }
.person:nth-child(2) .person__kreis { background: var(--card); border-color: var(--line-2); }
.person__kreis span { color: var(--lime); font-weight: 400; font-style: italic; letter-spacing: 0; }
.person:nth-child(2) .person__kreis span { color: var(--ink); }
.person h3 { font-family: var(--font-d); font-weight: 400; font-size: 2rem; }
.wir__text .wir__zitat { font-weight: 400; font-style: italic; letter-spacing: -0.01em; border-left: 1px solid var(--lime); }
.marken span { color: var(--muted); }

/* Fragen */
.faq summary { font-family: var(--font-t); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; }
.faq summary::after { background: transparent; border: 1px solid var(--line-2); color: var(--lime); font-weight: 300; }
.faq details[open] summary::after { border-color: var(--lime); }

/* Kontakt und Rest */
.ende h2 { letter-spacing: -0.03em; }
.ende h2 span { color: var(--lime); font-style: italic; }
.fuss .logo { color: var(--on-dark); }
.recht .platz { color: var(--on-lime); }
.recht h1 { font-weight: 400; }