/* sebastian-knorr.com — Dachseite, Fassung vom 21.10.2026
   Muster 6 „Kämme im Morgennebel“ (Dachmarke/Website-Entwuerfe/), ausgebaut von Claude Design,
   ins statische HTML überführt von Claude. Familie A „Weites Licht“ (BILDSPRACHE.md §3).
   Ein Bild trägt die Hero (G1), Tiefe durch Dunst (G2), ein kursiver Bruch je Seite (G4),
   Rostrot als einziger kräftiger Ton (G5), Sachleiste unter der Hero (G6).
   Schriften lokal, kein Aufruf an fremde Server. */

@font-face { font-family: "EB Garamond"; src: url("/fonts/eb-garamond-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/fonts/eb-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/fonts/eb-garamond-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --grund: #F2F0EA;      /* Nebelweiß */
  --text: #1F2621;
  --leise: #4A554D;
  --linie: rgba(31, 38, 33, .15);
  --salbei: #9AA59A;
  --foehre: #465348;
  --rost: #B4441F;       /* der eine kräftige Ton */
  --serif: "EB Garamond", Georgia, serif;
  --grotesk: "Inter", system-ui, sans-serif;
  --rand: clamp(16px, 5vw, 72px);
  --abstand: clamp(48px, 6vw, 88px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--grund); color: var(--text); font-family: var(--grotesk); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--text); }
a:hover { color: var(--foehre); }
img { max-width: 100%; display: block; }
::selection { background: var(--rost); color: var(--grund); }
:focus-visible { outline: 2px solid var(--foehre); outline-offset: 3px; }
.huelle { max-width: 1280px; margin: 0 auto; padding: 0 var(--rand); }

/* ---------- Kopf ---------- */
.kopf { position: absolute; inset: 0 0 auto 0; z-index: 5; padding: clamp(18px, 2.4vw, 26px) 0; }
.kopf .huelle { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.marke { font-family: var(--serif); font-size: clamp(21px, 1.8vw, 23px); letter-spacing: .005em; text-decoration: none; white-space: nowrap; }
.kopf nav { display: flex; align-items: baseline; gap: 30px; font-size: 14px; }
.kopf nav a { text-decoration: none; color: var(--text); white-space: nowrap; transition: color .3s; }
.kopf nav a:hover { color: var(--text); }
.kopf nav a.ruf { color: var(--text); border-bottom: 1px solid var(--rost); padding-bottom: 2px; }
@media (max-width: 760px) { .start .kopf nav a:not(.ruf) { display: none; } }

/* ---------- Hero ---------- */
.hero { position: relative; height: 100svh; min-height: 620px; max-height: 1100px; overflow: hidden; isolation: isolate; }
.hero-bild { position: absolute; inset: 0; z-index: -1; background: #C9CEC6; }
.hero-bild img, .hero-bild canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-bild img { object-fit: cover; object-position: center bottom; }
.hero-bild canvas { opacity: 0; }
.hero-bild canvas.da { opacity: 1; }
.schleier { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(58% 52% at 20% 44%, rgba(242, 240, 234, .84), rgba(242, 240, 234, .62) 42%, rgba(242, 240, 234, 0) 76%); }
@media (max-width: 760px) { .schleier { background: linear-gradient(rgba(242, 240, 234, .66), rgba(242, 240, 234, .5) 52%, rgba(242, 240, 234, 0) 72%); } }
.hero-text { position: relative; padding-top: clamp(112px, 16vh, 170px); }
.kicker { display: flex; align-items: center; gap: clamp(10px, 1.2vw, 14px); margin-bottom: 26px; font-size: clamp(11px, calc(10px + .2vw), 12px); letter-spacing: clamp(1.3px, .2vw, 2.4px); text-transform: uppercase; color: var(--text); font-weight: 500; }
.kicker::before { content: ""; flex: none; width: 34px; height: 1px; background: currentColor; opacity: .6; }
h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, min(7.4vw, 12vh), 7.6rem); line-height: .95; letter-spacing: -.022em; max-width: 16ch; text-wrap: balance; }
h1 em, h2 em { font-style: italic; letter-spacing: -.01em; }
/* Ein heller Lichthof löst den Text vom Bild, ohne Kasten */
.kicker, .vorspann, .start .kopf .marke, .start .kopf nav a { text-shadow: 0 0 2px rgba(242, 240, 234, .9), 0 0 14px rgba(242, 240, 234, .85), 0 0 30px rgba(242, 240, 234, .6); }
.vorspann { max-width: 31em; margin-top: clamp(20px, 2.4vw, 28px); font-size: clamp(16px, 1.45vw, 19px); line-height: 1.55; text-wrap: pretty; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(26px, 2.8vw, 34px); }
.knopf { display: inline-flex; align-items: center; min-height: 50px; padding: 14px clamp(20px, 2vw, 24px); font: inherit; font-size: 15px; text-decoration: none; border: 1px solid rgba(31, 38, 33, .18); background: rgba(242, 240, 234, .88); color: var(--text); border-radius: 0; cursor: pointer; transition: border-color .25s, filter .25s; }
.knopf:hover { border-color: var(--text); color: var(--text); }
.knopf.voll { background: var(--rost); border-color: var(--rost); color: var(--grund); font-weight: 500; }
.knopf.voll:hover { filter: brightness(1.08); color: var(--grund); }

/* ---------- Beweisleiste, G6 ---------- */
.leiste { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.leiste ul { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--linie); max-width: 1280px; margin: 0 auto; }
.leiste li { padding: 24px var(--rand); background: var(--grund); }
.leiste b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.4vw, 32px); line-height: 1.1; margin-bottom: 8px; color: var(--foehre); }
.leiste span { display: block; font-size: 13.5px; line-height: 1.45; color: var(--leise); }
@media (max-width: 1000px) { .leiste ul { grid-template-columns: 1fr 1fr; } .leiste li { padding: 22px 20px; } }
@media (max-width: 520px) { .leiste ul { grid-template-columns: 1fr; } .leiste li { padding: 20px var(--rand); } }

/* ---------- Abschnitte ---------- */
.abschnitt { padding-bottom: var(--abstand); }
.abschnitt.erster { padding-top: var(--abstand); }
.abschnitt.band { background: rgba(154, 165, 154, .16); padding-bottom: clamp(44px, 5vw, 72px); margin-bottom: var(--abstand); }
.abschnitt.band .rahmen { border-top: 0; }
.abschnitt .rahmen { border-top: 1px solid var(--linie); padding-top: clamp(44px, 5vw, 72px); }
.marke-abschnitt { display: flex; gap: 12px; margin-bottom: 22px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--leise); }
.marke-abschnitt b { font-weight: 500; color: var(--foehre); }
h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.1rem, 4.6vw, 3.9rem); line-height: 1.04; letter-spacing: -.018em; max-width: 17ch; text-wrap: balance; }
h3 { font-family: var(--serif); font-weight: 400; }
.lead { margin-top: 28px; max-width: 30em; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; color: var(--leise); text-wrap: pretty; }
.zwei { display: grid; grid-template-columns: 5fr 7fr; gap: 48px clamp(40px, 6vw, 96px); align-items: start; }
@media (max-width: 820px) { .zwei { grid-template-columns: 1fr; } }
.weiter { display: inline-block; margin-top: 18px; font-size: 15px; text-decoration: none; border-bottom: 1px solid var(--rost); padding-bottom: 1px; }

/* Was ich mache */
.felder { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 1px; margin-top: 58px; border-top: 1px solid var(--linie); background: var(--linie); }
.feld { padding: 30px 34px 30px 34px; background: var(--grund); }
.feld:first-child { padding-left: 0; }
.feld .art { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--leise); }
.feld h3 { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; margin: 12px 0 14px; }
.feld.gross h3 { font-size: clamp(32px, 3.2vw, 44px); }
.feld p:not(.art) { font-size: 16px; color: var(--leise); text-wrap: pretty; }
.feld p + p:not(.art) { margin-top: .8em; }
.feld strong { font-weight: 500; color: var(--text); }
.feld .fragen { list-style: none; margin: .9em 0 1em; padding: 2px 0 2px 18px; border-left: 2px solid var(--salbei); }
.feld .fragen li { font-family: var(--serif); font-size: clamp(19px, 1.5vw, 21px); line-height: 1.3; color: var(--foehre); }
.feld .fragen li + li { margin-top: .45em; }
.feld .merkmale { list-style: none; margin: .9em 0; padding: 0; border-top: 1px solid var(--linie); }
.feld .merkmale li { position: relative; padding: .55em 0 .55em 18px; border-bottom: 1px solid var(--linie); font-size: 15px; line-height: 1.45; color: var(--text); text-wrap: pretty; }
.feld .merkmale li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 7px; height: 1px; background: var(--rost); }
@media (max-width: 820px) { .felder { grid-template-columns: 1fr; } .feld, .feld:first-child { padding: 30px 0; } }

.h2-schmal { max-width: 14ch; }

/* Ablauf */
.ablauf-knopf { margin-top: 28px; }
.schritte { list-style: none; border-bottom: 1px solid var(--linie); }
.schritte li { display: grid; grid-template-columns: clamp(40px, 4vw, 60px) minmax(0, 1fr); padding: 26px 0; border-top: 1px solid var(--linie); }
.schritte .nr { font-family: var(--serif); font-size: 28px; line-height: 1.1; color: var(--foehre); }
.schritte h3 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; }
.schritte p { margin-top: 6px; font-size: 16px; color: var(--leise); }

/* Person */
.person { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 72px); align-items: start; }
.person figure img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.person h2 { max-width: none; }
.person .text { max-width: 36em; }
.person .text p { margin-top: 18px; color: var(--leise); text-wrap: pretty; }
@media (max-width: 700px) { .person { grid-template-columns: 1fr; } .person figure { max-width: 140px; } }

/* Anfrage */
.post { display: inline-block; margin-top: 32px; font-family: var(--serif); font-size: clamp(22px, 2vw, 27px); line-height: 1.3; text-decoration: none; border-bottom: 1px solid var(--rost); padding-bottom: 2px; overflow-wrap: anywhere; }
.eigen { margin-top: 26px; max-width: 30em; padding-left: 16px; border-left: 2px solid var(--rost); font-size: 15.5px; line-height: 1.55; color: var(--text); text-wrap: pretty; }
.eigen b { font-weight: 500; }
.hinweis { margin-top: 24px; font-size: 14px; line-height: 1.5; color: var(--leise); }
.hinweis a, .klein a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.formular { display: grid; gap: 30px; }
.formular .reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 20px; }
@media (max-width: 560px) { .formular .reihe { grid-template-columns: 1fr; } }
.feldname { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 8px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--leise); }
.feldname small { font-size: 13px; letter-spacing: 0; text-transform: none; }
.formular label { display: block; }
.formular input[type=text], .formular input[type=email], .formular textarea { width: 100%; min-height: 48px; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--text); background: transparent; border: 1px solid var(--salbei); border-radius: 0; outline: none; transition: border-color .2s, box-shadow .2s; }
.formular textarea { min-height: 160px; line-height: 1.55; resize: vertical; }
.formular input:focus, .formular textarea:focus { border-color: var(--foehre); box-shadow: 0 0 0 1px var(--foehre); }
::placeholder { color: var(--leise); opacity: 1; }
.formular fieldset { border: 0; min-width: 0; }
.formular legend { padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; display: inline-flex; cursor: pointer; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.chips span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; font-size: 15px; border: 1px solid var(--salbei); transition: background .2s, border-color .2s, color .2s; }
.chips label:hover span { border-color: var(--foehre); }
.chips input:checked + span { background: var(--foehre); border-color: var(--foehre); color: var(--grund); }
.chips input:focus-visible + span { box-shadow: 0 0 0 2px var(--grund), 0 0 0 4px var(--foehre); }
.formular .knopf { min-height: 52px; padding: 14px 28px; }
.klein { margin-top: 14px; max-width: 46ch; font-size: 13px; line-height: 1.5; color: var(--leise); }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Fuß ---------- */
.fuss { border-top: 1px solid var(--linie); }
.fuss .huelle { padding-top: 32px; padding-bottom: 44px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 16px 32px; font-size: 14px; color: var(--leise); }
.fuss .anschrift { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.fuss .anschrift b { font-family: var(--serif); font-weight: 400; font-size: 19px; color: var(--text); }
.fuss nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.fuss nav a { color: var(--leise); text-decoration: none; }
.fuss nav a:hover { color: var(--text); }

/* ---------- Unterseiten: Impressum, Datenschutz, 404 ---------- */
.unterseite .kopf { position: static; border-bottom: 1px solid var(--linie); }
.unterseite main { max-width: 44em; padding: clamp(56px, 8vw, 96px) 0 var(--abstand); }
.unterseite main h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.05; }
.unterseite main h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.2; max-width: none; margin-top: 40px; }
.unterseite main p { margin-top: 12px; color: var(--leise); }
.unterseite main p a { overflow-wrap: anywhere; }
.unterseite .stand { margin-top: 40px; font-size: 14px; }

/* Danke */
.danke .hero-text { padding-top: clamp(150px, 24vh, 250px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}