/* 132 – Pointillismus · Malerei aus reinen Farbtupfen. Text steht auf ungemalter Leinwand. */
:root {
  --linen: #efe7d6;
  --linen-2: #e6dcc6;
  --ink: #1e2447;
  --mute: #4a4a5e;
  --verm: #b8361f;
  --ultra: #1d2f8f;
  --wood: #6b4426;
  --display: 'Gilda Display', 'Didot', 'Bodoni 72', Georgia, 'Times New Roman', serif;
  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --pad: clamp(16px, 3.4vw, 48px);
  --weave: repeating-linear-gradient(0deg, rgba(110, 90, 55, .055) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(110, 90, 55, .05) 0 1px, transparent 1px 3px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background-color: var(--linen); background-image: var(--weave); color: var(--ink); font: 400 17px/1.65 var(--serif); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: 0; }
p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--verm); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 90; background: var(--ink); color: var(--linen); padding: 10px 16px; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { max-width: 1320px; margin-inline: auto; padding-inline: var(--pad); }
.kicker { font: italic 400 15px/1.4 var(--serif); color: var(--verm); margin-bottom: 14px; }

/* ---------- Malfläche ---------- */
.paint { position: relative; display: block; background-color: var(--linen); background-image: var(--weave); }
.paint__cv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.paint__fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.25) contrast(1.05); }
.paint.is-painted .paint__fallback { display: none; }
.paint__area { display: none; }
.field { position: relative; z-index: 1; }
.paint:not(.is-painted) .field { background: var(--linen); box-shadow: 0 0 36px 30px var(--linen); }

/* Holzrahmen mit Schattenfuge – die Leinwandkante bleibt sichtbar */
.frame {
  padding: 13px; border-radius: 1px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 222, 170, .07) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, rgba(40, 20, 6, .16) 0 2px, transparent 2px 13px),
    linear-gradient(180deg, #8c5c35, #6b4426 46%, #573620);
  box-shadow: inset 0 0 0 1px rgba(30, 15, 5, .5), inset 2px 2px 0 rgba(255, 228, 186, .25), 0 26px 50px -26px rgba(40, 25, 10, .55);
}
.gap { padding: 7px; background: #24180f; box-shadow: inset 0 3px 8px rgba(0, 0, 0, .7); }
.gap > .paint { box-shadow: 0 0 0 1px rgba(60, 40, 20, .35), 2px 3px 6px rgba(0, 0, 0, .45); }

/* ---------- Kopf ---------- */
.top__in { max-width: 1440px; margin-inline: auto; padding: 16px var(--pad); display: flex; align-items: center; gap: 28px; }
.logo { flex: none; display: block; }
.logo img { width: 70px; height: auto; aspect-ratio: 1510 / 1300; }
.menu { display: none; }
.nav { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 32px; }
.nav__list { display: flex; align-items: center; }
.nav__list li + li::before { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 6px; border-radius: 50%; vertical-align: middle; background: var(--d, #ec7424); box-shadow: 4px -3px 0 -1px var(--e, #2f62d4); }
.nav__list li:nth-child(3) { --d: #3fb866; --e: #d4497e; }
.nav__list li:nth-child(4) { --d: #f4b22c; --e: #7a4bb4; }
.nav__list a { display: inline-block; padding: 10px 10px; text-decoration: none; font: 400 18px/1.2 var(--display); letter-spacing: .02em; }
.nav__list a:hover { color: var(--verm); }
.nav__end { display: flex; align-items: center; gap: 18px; }
.tel { text-decoration: none; font-size: 16px; white-space: nowrap; }
.tel:hover { color: var(--verm); }
.lang { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; text-decoration: none; font: 400 14px/1 var(--display); letter-spacing: .06em; border: 1px solid rgba(30, 36, 71, .45); }
.lang:hover { background: var(--ink); color: var(--linen); }

/* ---------- Hero ---------- */
.hero { padding: 0 var(--pad); max-width: 1500px; margin-inline: auto; }
.hero__paint { height: clamp(580px, calc(100vh - 150px), 800px); display: flex; align-items: center; }
.hero__field { width: min(590px, 46%); margin-left: clamp(40px, 6%, 96px); padding: 8px 0; }
h1 { font-size: clamp(46px, 5.4vw, 80px); line-height: 1.02; color: var(--ultra); text-wrap: balance; }
.lead { margin-top: 22px; font-size: 17.5px; line-height: 1.62; color: var(--ink); max-width: 52ch; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn {
  display: inline-flex; align-items: center; min-height: 50px; padding: 0 24px; border-radius: 999px; text-decoration: none;
  font: 400 17px/1.1 var(--display); letter-spacing: .03em; transition: background .25s, color .25s, box-shadow .25s;
}
.btn--ink { background: var(--ink); color: var(--linen); box-shadow: 4px 4px 0 -1px #ec7424; }
.btn--ink:hover { background: var(--ultra); box-shadow: 4px 4px 0 -1px #ec7424, -4px -3px 0 -1px #f3dc3a; }
.btn--line { border: 1px solid var(--ink); }
.btn--line:hover { background: rgba(30, 36, 71, .07); }
.avail { margin-top: 22px; font: italic 400 15px/1.4 var(--serif); color: var(--mute); }

/* ---------- Sektionen ---------- */
.sec { position: relative; }
h2 { font-size: clamp(34px, 3.6vw, 54px); line-height: 1.06; color: var(--ultra); text-wrap: balance; }
h3 { font-size: 23px; line-height: 1.2; color: var(--ink); }
.intro { margin-top: 20px; max-width: 60ch; color: var(--mute); font-size: 17.5px; }
.sec__head { max-width: 760px; }

/* Schwerpunkt: Bucht am Abend, Text auf ungemalter Fläche */
.focus { margin-top: clamp(40px, 6vw, 90px); }
.focus { padding: 60px 0 40px; }
.focus__wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: stretch; }
.study { position: relative; min-height: 560px; margin-right: calc(var(--pad) * -1); background: none; }
.paint.study:not(.is-painted) { background: radial-gradient(70% 60% at 60% 50%, rgba(47, 98, 212, .35), transparent 70%); }
.cases { margin-top: 44px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 44px; }
.cases li { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: baseline; }
.no { font: 400 18px/1 var(--display); color: var(--verm); }
.cases h3 { font-size: 22px; }
.cases p, .studies p, .steps__list p { margin-top: 8px; color: var(--mute); font-size: 16px; line-height: 1.6; hyphens: auto; }

/* Beispielroute */
.route { padding: 110px 0 130px; }
.route .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px 64px; align-items: center; }
.route__title { font-size: clamp(30px, 3vw, 42px); }
.route__text { margin-top: 18px; color: var(--mute); }
.route__paint { aspect-ratio: 3.2 / 1; background: none; }
.route__codes { position: absolute; inset: 0; }
.route__codes li { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, 26px); font: 400 16px/1 var(--display); letter-spacing: .12em; }
.route__fig figcaption { margin-top: 44px; font: italic 400 15px/1.5 var(--serif); color: var(--mute); text-align: center; }
.stats { grid-column: 1 / -1; margin-top: 70px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; text-align: center; }
.stats li { position: relative; display: grid; justify-items: center; align-content: start; }
.stats__sun { width: 236px; height: 236px; border-radius: 50%; background: none; display: grid; place-items: center; }
.paint.stats__sun:not(.is-painted) { background: radial-gradient(circle, #f8e27a, #f4b22c 55%, rgba(236,116,36,.6) 70%, transparent 71%); }
.stats b { position: relative; z-index: 1; padding: 4px 2px; font: 400 clamp(44px, 4.2vw, 60px)/1 var(--display); color: var(--ink); white-space: nowrap; }
.stats li:nth-child(3) b { font-size: clamp(32px, 2.8vw, 40px); }
.paint.stats__sun:not(.is-painted) b { background: none; box-shadow: none; }
.stats__l { margin-top: 18px; max-width: 22ch; color: var(--mute); }

/* Leistungen: kleine Studien */
.svc { padding: 40px 0 130px; }
.studies { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 44px; }
.mini.mini { padding: 0; }
.mini { padding: 8px; }
.studies .mini { padding: 8px; background: repeating-linear-gradient(90deg, rgba(40, 20, 6, .16) 0 2px, transparent 2px 11px), linear-gradient(180deg, #8c5c35, #5f3c22); box-shadow: inset 0 0 0 1px rgba(30, 15, 5, .5), 0 16px 30px -18px rgba(40, 25, 10, .6); }
.mini__gap { padding: 4px; background: #24180f; }
.mini__paint { aspect-ratio: 4 / 3; }
.studies h3 { margin-top: 24px; }

/* Ablauf */
.steps { padding: 40px 0 130px; }
.sec__head--row { display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; max-width: none; }
.sec__head--row .kicker { margin: 0; }
.steps__list { margin-top: 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.steps__no { width: 120px; height: 150px; background: none; }
.steps__no > span { position: absolute; inset: 0; display: grid; place-items: end start; font: 400 150px/1 var(--display); color: #2f62d4; }
.steps__no.is-painted > span { visibility: hidden; }
.steps__list h3 { margin-top: 14px; }

/* Über uns */
.about { padding: 30px 0 140px; }
.about__wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.frame--portrait { max-width: 520px; }
.about__paint { aspect-ratio: 1; }
.feats { margin-top: 30px; display: grid; gap: 12px; }
.feats li { position: relative; padding-left: 34px; font-size: 17px; }
.feats li::before { content: ''; position: absolute; left: 4px; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: var(--a, #ec7424); box-shadow: 9px 3px 0 -2px var(--b, #2f62d4), 3px 9px 0 -3px var(--c, #f3dc3a); }
.feats li:nth-child(2) { --a: #3fb866; --b: #d63a27; --c: #a6cf3c; }
.feats li:nth-child(3) { --a: #7a4bb4; --b: #f3dc3a; --c: #d4497e; }
.feats li:nth-child(4) { --a: #2aa1d8; --b: #f4b22c; --c: #1d2f8f; }

/* Kontakt: Flusslandschaft */
.contact { padding: 40px 0 110px; }
.contact__wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: stretch; }
.contact .study { margin: 0 0 0 calc(var(--pad) * -1); }
.paint.contact .study:not(.is-painted), .contact .paint.study:not(.is-painted) { background: radial-gradient(70% 60% at 40% 50%, rgba(63, 184, 102, .35), transparent 70%); }
.contact__txt { padding: 40px 0; }
.cdata { margin-top: 34px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; }
.cdata dt { font: italic 400 15px/1.4 var(--serif); color: var(--verm); margin-bottom: 4px; }
.cdata dd { font-size: 17px; overflow-wrap: anywhere; }
.cdata a { text-decoration-color: rgba(30, 36, 71, .35); text-underline-offset: 3px; }
.cdata a:hover { color: var(--verm); }
.cdata__s { color: var(--mute); font-size: 15.5px; }
.contact__field .btn { margin-top: 34px; }

/* ---------- Fuß ---------- */
.foot { padding: 0 0 60px; }
.foot__strip { height: 46px; margin: 0 var(--pad) 46px; background: none; }
.paint.foot__strip:not(.is-painted) { background: linear-gradient(90deg, #2f62d4, #7fd0e6 30%, #f3dc3a 55%, #ec7424 75%, #7a4bb4) 0 50% / 100% 4px no-repeat; }
.foot__in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px 40px; align-items: center; }
.logo--foot img { width: 86px; }
.foot__addr { font-size: 15.5px; color: var(--mute); }
.foot__brand { font: 400 19px/1.3 var(--display); color: var(--ink); }
.foot__addr a { text-decoration: none; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 6px 22px; font: 400 17px/1.2 var(--display); }
.foot__nav a { text-decoration: none; padding: 6px 0; }
.foot__nav a:hover { color: var(--verm); }
.foot__copy { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid rgba(30, 36, 71, .15); font-size: 14px; color: var(--mute); }

/* ---------- Rechtsseiten ---------- */
.legal__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px; align-items: center; padding-top: 40px; padding-bottom: 50px; }
.legal__study.study { min-height: 340px; margin: 0; }
.back { display: inline-block; margin-bottom: 22px; font: italic 400 16px/1.4 var(--serif); text-decoration: none; color: var(--verm); }
.back:hover { text-decoration: underline; }
.legal h1 { font-size: clamp(38px, 4.6vw, 64px); line-height: 1.05; hyphens: manual; overflow-wrap: break-word; }
.legal-body { max-width: 70ch; padding-bottom: 110px; font-size: 17px; line-height: 1.72; }
.legal-body h2 { font-size: 28px; margin: 48px 0 12px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body ul { margin: 0 0 16px; }
.legal-body li { position: relative; padding-left: 26px; margin-bottom: 8px; }
.legal-body li::before { content: ''; position: absolute; left: 4px; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: #ec7424; box-shadow: 7px 3px 0 -2px #2f62d4; }
.legal-body a { color: var(--ultra); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-note { padding: 14px 18px; background: rgba(243, 220, 58, .22); border-left: 3px solid #f4b22c; font-style: italic; }
.legal-address { padding: 16px 20px; border: 1px solid rgba(30, 36, 71, .2); background: rgba(255, 255, 255, .35); }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .nav { gap: 18px; }
  .nav__list a { font-size: 17px; padding-inline: 6px; }
  .tel { display: none; }
  .hero__field { width: min(560px, 58%); }
  .focus__wrap, .contact__wrap { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 32px; }
  .contact__wrap { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .studies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route .wrap { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Mobil ---------- */
@media (max-width: 760px) {
  body { font-size: 16.5px; }
  .top__in { padding-block: 12px; }
  .logo img { width: 58px; }
  .menu {
    display: inline-flex; align-items: center; gap: 10px; margin-left: auto; min-height: 44px; padding: 0 16px; cursor: pointer;
    background: none; border: 1px solid rgba(30, 36, 71, .45); border-radius: 999px; font: 400 16px/1 var(--display); letter-spacing: .03em;
  }
  .menu__ico { position: relative; width: 16px; height: 16px; }
  .menu__ico i { position: absolute; width: 7px; height: 7px; border-radius: 50%; }
  .menu__ico i:nth-child(1) { left: 0; top: 1px; background: #ec7424; } .menu__ico i:nth-child(2) { right: 0; top: 4px; background: #2f62d4; } .menu__ico i:nth-child(3) { left: 4px; bottom: 0; background: #3fb866; }
  .top { position: relative; z-index: 20; }
  .nav { position: absolute; top: 100%; left: var(--pad); right: var(--pad); display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 22px 22px; background-color: var(--linen); background-image: var(--weave); border: 1px solid rgba(30, 36, 71, .18); box-shadow: 0 20px 40px -20px rgba(30, 36, 71, .4); }
  .js .top.open .nav { display: flex; }
  html:not(.js) .nav { display: flex; position: static; border: 0; box-shadow: none; background: none; }
  html:not(.js) .top__in { flex-wrap: wrap; }
  .nav__list { flex-direction: column; align-items: stretch; }
  .nav__list li + li::before { display: none; }
  .nav__list a { display: block; padding: 14px 0; font-size: 21px; border-bottom: 1px dotted rgba(30, 36, 71, .3); }
  .nav__end { justify-content: space-between; padding-top: 16px; }
  .tel { display: inline; }

  .hero { padding-inline: 10px; }
  .frame { padding: 8px; }
  .gap { padding: 4px; }
  .hero__paint { height: auto; display: block; padding-top: 290px; }
  .paint__area { display: block; position: absolute; top: 0; left: 0; right: 0; height: 330px; }
  .hero__field { width: auto; margin: 0; padding: 30px 18px 30px; }
  .paint:not(.is-painted) .paint__fallback { height: 290px; }
  .paint:not(.is-painted) .hero__field { box-shadow: none; }
  h1 { font-size: clamp(40px, 11vw, 48px); }
  .lead { font-size: 16.5px; }
  .ctas { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }

  h2 { font-size: clamp(31px, 8.4vw, 38px); }
  .intro { font-size: 16.5px; }
  .focus__wrap, .contact__wrap { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .study { min-height: 300px; margin: 0 calc(var(--pad) * -1); }
  .contact .study { margin: 0 calc(var(--pad) * -1); order: -1; }
  .contact__txt { padding: 10px 0 0; }
  .cases, .cdata, .studies, .steps__list, .stats, .about__wrap { grid-template-columns: minmax(0, 1fr); }
  .cases { gap: 22px; margin-top: 34px; }
  .cases li { grid-template-columns: 36px minmax(0, 1fr); }
  .route { padding: 70px 0 90px; }
  .route__codes li { font-size: 12px; letter-spacing: .04em; transform: translate(-50%, 16px); }
  .route__paint { aspect-ratio: 2.4 / 1; }
  .stats { margin-top: 40px; gap: 34px; }
  .svc, .steps, .about { padding-bottom: 90px; }
  .studies { gap: 30px; margin-top: 36px; }
  .studies li { display: grid; grid-template-columns: 124px minmax(0, 1fr); column-gap: 18px; align-items: start; }
  .studies .mini { grid-row: span 2; padding: 5px; }
  .mini__gap { padding: 3px; }
  .studies h3 { margin-top: 0; font-size: 21px; }
  .studies p { margin-top: 4px; }
  .steps__list { gap: 30px; }
  .steps__list li { display: grid; grid-template-columns: 90px minmax(0, 1fr); column-gap: 16px; }
  .steps__no { width: 90px; height: 112px; grid-row: span 2; }
  .steps__no > span { font-size: 112px; }
  .steps__list h3 { margin-top: 30px; }
  .foot__in { grid-template-columns: minmax(0, 1fr); }
  .foot__copy { padding-bottom: 60px; }
  .legal__head { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; padding-bottom: 36px; }
  .legal__study.study { order: -1; min-height: 190px; margin: 0 calc(var(--pad) * -1) 10px; }
  .legal-body { font-size: 16.5px; }
}