/* SchmiedeX Seite. Breakpoints nur 490, 768, 1040. Keine Layoutfarben ausserhalb des Stilblatts. */

.sprung {
  position: absolute; left: var(--a16); top: -5rem; z-index: 30;
  padding: var(--a12) var(--a16); border-radius: 4px;
  background: #fff; color: #000; font-weight: 700;
}
.sprung:focus { top: var(--a16); }

/* Kopf scrollt mit weg: kein feststehender Streifen, kein Unschaerfefilter auf bewegten Flaechen */
.kopf {
  position: absolute; inset: 0 0 auto 0; z-index: 6;
  display: flex; align-items: center; justify-content: space-between; gap: var(--a16);
  min-height: var(--kopf-h);
  padding: max(var(--a16), env(safe-area-inset-top)) var(--rand) 0;
}
.marke {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  font-family: var(--schrift-auftritt); font-weight: 800; font-stretch: 125%; font-size: 1.375rem;
  letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
}
.marke-x { color: var(--rot); }
.bewegung {
  min-height: 2.75rem; padding: var(--a8) var(--a16);
  white-space: nowrap; flex-shrink: 0;
  border: 2px solid var(--linie); border-radius: 999px;
  background: transparent; color: var(--text-2);
  font: inherit; font-size: var(--t-1); cursor: pointer;
}
.bewegung:hover { border-color: var(--chrom-hell); color: var(--text); }
.bewegung[aria-checked="true"] { border-color: var(--chrom-mitte); color: var(--text); }
.bewegung[hidden] { display: none; }

/* Kopfbereich */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--a32);
  padding: var(--a128) var(--rand) var(--a32);
  background: radial-gradient(120% 90% at 70% 30%, #0b0b0f 0%, #000 62%);
}
.hero-buehne { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity .9s ease;
}
.mit-3d .hero-canvas { opacity: 1; }
.hero-glut {
  position: absolute; left: var(--cx, 70%); top: var(--cy, 40%);
  width: min(95vw, 72rem); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 120 36 / .6), rgb(200 24 24 / .24) 46%, transparent 74%);
  opacity: var(--glut-o, 0);
}
.hero-ring {
  position: absolute; left: var(--cx, 70%); top: var(--cy, 40%);
  width: min(62vw, 42rem); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  border: 2px solid transparent; opacity: 0; scale: .15;
}
.hero.schlag .hero-ring { animation: ring 1.15s cubic-bezier(.12, .7, .2, 1) both; }
@keyframes ring {
  0%   { opacity: .9; scale: .15; border-color: rgb(255 214 168 / .95); }
  100% { opacity: 0;  scale: 1.9; border-color: rgb(255 120 40 / 0); }
}
@media (prefers-reduced-motion: reduce) { .hero.schlag .hero-ring { animation: none; } }

/* Ersatzbild: nur ohne JavaScript, ohne WebGL oder bei Datensparen */
.hero-ersatz {
  display: none; position: absolute; z-index: 0;
  right: 6vw; top: 14%; width: min(44vw, 38rem);
}
.kein-3d .hero-ersatz { display: block; }
.hero-ersatz svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 3rem rgb(224 26 34 / .35)); }

.hero-text { position: relative; z-index: 2; max-width: 44rem; }
.hero-text::before {
  content: ""; position: absolute; inset: -3rem -3rem -2rem -3rem; z-index: -1;
  background: radial-gradient(closest-side at 38% 58%, rgb(0 0 0 / .92), rgb(0 0 0 / .8) 58%, transparent);
}
.hero h1 { font-size: clamp(1.75rem, .95rem + 2.7vw, 3.6rem); line-height: 1.06; letter-spacing: -.02em; overflow-wrap: break-word; }
.hero-lead { margin-top: var(--a24); max-width: min(var(--lesebreite), 34rem); font-size: var(--t-2); color: var(--text-2); }
.hero-aktion { margin-top: var(--a32); }
.hero-fuss { position: relative; z-index: 2; color: var(--text-3); font-size: var(--t-1); }

/* Fuss */
.fuss {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--a8) var(--a32);
  padding: var(--a24) var(--rand) var(--a32);
  border-top: 1px solid var(--flaeche-2); color: var(--text-3);
}
.fuss a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--text-2); }
.fuss a:hover { color: var(--rot-text); }

@media (max-width: 1039px) {
  .hero { padding-top: calc(var(--kopf-h) + min(72vw, 26rem)); }
}
@media (max-width: 767px) {
  .hero-ersatz { right: 50%; translate: 50% 0; top: 11%; width: 62vw; }
}
@media (min-width: 768px) and (max-width: 1039px) {
  .hero-ersatz { top: 10%; width: 46vw; }
}
@media (max-width: 489px) {
  .marke { font-size: 1.125rem; letter-spacing: .03em; }
  .bewegung { padding: var(--a8) var(--a12); }
}
@media (max-width: 359px) {
  :root { --kopf-h: 7.5rem; }
  .kopf { flex-wrap: wrap; align-content: center; row-gap: var(--a4); }
}

/* Textseiten (Impressum, Datenschutz, Lizenzen) */
.kopf-text { position: relative; }
.seitentext { max-width: 52rem; padding: var(--a48) var(--rand) var(--a64); }
.seitentext h1 { font-size: clamp(1.6rem, 1rem + 2.6vw, 2.5rem); line-height: 1.1; overflow-wrap: anywhere; }
.seitentext h2 { font-size: clamp(1.0625rem, .9rem + 1vw, 1.5rem); font-weight: 700; line-height: 1.25; margin-top: var(--a48); hyphens: auto; overflow-wrap: anywhere; }
.seitentext h1 + p, .seitentext h2 + p, .seitentext h2 + address { margin-top: var(--a12); }
.seitentext p + p, .seitentext p + ul, .seitentext ul + p { margin-top: var(--a16); }
.seitentext p, .seitentext li, .seitentext address { max-width: var(--lesebreite); color: var(--text-2); }
.seitentext address { font-style: normal; }
.seitentext ul { padding-left: 1.25rem; margin: var(--a16) 0 0; }
.seitentext li + li { margin-top: var(--a4); }
.seitentext a { color: var(--text); }
.lizenztext {
  max-width: 100%; overflow-x: auto; margin: var(--a12) 0 0; padding: var(--a16);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px;
  color: var(--text-2); font: .9375rem/1.55 var(--schrift-text); white-space: pre-wrap;
}
.platzhalter { background: var(--rot-tief); color: #fff; padding: 0 var(--a4); }

/* ---------------------------------------------------------- Etappe 2: Abschnitte */
/* Das Fenster schiebt die Seite zurueck (wie bei Physio Wurzler): .welt kippt leicht weg, der Hintergrund verschwimmt. */
.welt { transition: transform .42s cubic-bezier(.22, 1, .36, 1), filter .42s ease; transform-origin: 50% var(--blickhoehe, 50vh); }
html.weicht .welt { transform: scale(.965); filter: saturate(.7) brightness(.75); }
html.gesperrt { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .welt { transition: none; } html.weicht .welt { transform: none; } }

main > section:not(.hero) { padding: var(--a128) var(--rand) 0; }
main h2 { font-size: clamp(2rem, 1.1rem + 3vw, 3.75rem); line-height: 1.04; letter-spacing: -.02em; max-width: 22ch; }
.abschnitt-lead { margin-top: var(--a24); max-width: var(--lesebreite); font-size: var(--t-2); color: var(--text-2); }

/* Leistungen: die vier Arme. Auf breiten Schirmen steht das X rechts und gluet am aktiven Arm. */
.arme-liste { display: grid; gap: var(--a48); margin-top: var(--a64); }
.arm { position: relative; padding-left: var(--a24); border-left: 3px solid var(--flaeche-2); transition: border-color .4s ease; }
.arm.ist-aktiv { border-left-color: var(--rot); }
.arm h3 { font-size: clamp(1.75rem, 1.1rem + 2vw, 2.75rem); line-height: 1.1; margin-top: var(--a16); }
.arm p { margin-top: var(--a16); max-width: var(--lesebreite); color: var(--text-2); font-size: var(--t-2); }
.arm ul { list-style: none; margin: var(--a24) 0 0; padding: 0; display: grid; gap: var(--a8); }
.arm li { position: relative; padding-left: 1.5em; color: var(--text); }
.arm li::before { content: ""; position: absolute; left: 0; top: .72em; width: .8em; height: 3px; border-radius: 2px; background: var(--rot); }
.arm-zeichen { display: block; width: 4.5rem; height: auto; overflow: visible; }
.x-grund { fill: var(--flaeche-2); stroke: var(--linie); stroke-width: .012; stroke-linejoin: round; }
.x-arm { fill: var(--rot); }
.arme-buehne { display: none; }
@media (prefers-reduced-motion: reduce) { .arm { transition: none; } }

@media (min-width: 1040px) {
  .arme { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--a64); }
  .arme-kopf { grid-column: 1 / -1; }
  .arme-liste { grid-column: 1; grid-row: 2; gap: 0; margin-top: var(--a32); }
  .arm { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; padding-block: var(--a48); }
  .arme-buehne { display: block; grid-column: 2; grid-row: 2; position: sticky; top: 0; height: 100vh; align-self: start; }
  .arme-canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .8s ease; }
  .mit-arme .arme-canvas { opacity: 1; }
}

/* Punzen: gemessene Zusagen als eingeschlagene Stempel */
.punzen-liste { list-style: none; margin: var(--a64) 0 0; padding: 0; display: grid; gap: var(--a48) var(--a32); grid-template-columns: 1fr; }
.punze { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; column-gap: var(--a24); align-items: start; }
.punze-marke {
  grid-row: 1 / 3; display: grid; place-items: center; width: 6.5rem; aspect-ratio: 1; border-radius: 50%;
  font-family: var(--schrift-auftritt); font-weight: 800; font-stretch: 125%; font-size: 2.1rem; line-height: 1; letter-spacing: -.02em;
  color: var(--text); text-shadow: 0 -1px 0 #000, 0 1px 0 rgb(255 255 255 / .18);
  background: radial-gradient(circle at 35% 28%, #2e2e37, #121216 72%);
  box-shadow: inset 0 3px 8px rgb(0 0 0 / .85), inset 0 -1px 0 rgb(255 255 255 / .12), 0 0 0 5px var(--grund), 0 0 0 7px var(--linie);
}
.punze-klein { font-size: 1.3rem; letter-spacing: -.01em; }
.punze strong { font-family: var(--schrift-auftritt); font-weight: 700; font-size: var(--t-3); line-height: 1.2; align-self: end; }
.punze > span:last-child { margin-top: var(--a8); color: var(--text-2); max-width: 34ch; }
@media (min-width: 768px) { .punzen-liste { grid-template-columns: 1fr 1fr; } }

/* Werkstatt: Referenzen */
.werkstatt-liste { list-style: none; margin: var(--a64) 0 0; padding: 0; display: grid; gap: var(--a24); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.stueck {
  position: relative; padding: var(--a32); border-radius: 20px;
  background: linear-gradient(160deg, var(--flaeche-2), var(--flaeche) 70%);
  border: 1px solid var(--flaeche-2);
  transition: border-color .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}
.stueck-art { color: var(--text-2); font-size: var(--t-1); }
.stueck h3 { font-size: var(--t-3); line-height: 1.2; margin-top: var(--a8); }
.stueck h3 a { text-decoration: none; }
.stueck h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.stueck h3 a:focus-visible { outline: none; box-shadow: none; }
.stueck:has(a:focus-visible) { outline: 3px solid var(--chrom-hell); outline-offset: 3px; }
.stueck > p:last-child { margin-top: var(--a12); color: var(--text-2); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .stueck:has(a):hover { border-color: var(--rot); transform: translateY(-4px); }
}

/* Ablauf: echte Reihenfolge, deshalb mit Nummern */
.ablauf-liste { list-style: none; counter-reset: schritt; margin: var(--a64) 0 0; padding: 0; display: grid; gap: var(--a32); grid-template-columns: 1fr; }
.ablauf-liste li { counter-increment: schritt; position: relative; padding-top: var(--a64); border-top: 2px solid var(--flaeche-2); }
.ablauf-liste li::before {
  content: counter(schritt); position: absolute; top: var(--a16); left: 0;
  font-family: var(--schrift-auftritt); font-weight: 800; font-stretch: 125%; font-size: 1.75rem; line-height: 1; color: var(--rot-text);
}
.ablauf-liste h3 { font-size: var(--t-3); line-height: 1.2; }
.ablauf-liste p { margin-top: var(--a12); color: var(--text-2); }
@media (min-width: 768px) { .ablauf-liste { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .ablauf-liste { grid-template-columns: repeat(4, 1fr); } }

/* Fragen */
.fragen details { max-width: 52rem; border-bottom: 1px solid var(--flaeche-2); }
.fragen details:first-of-type { margin-top: var(--a48); border-top: 1px solid var(--flaeche-2); }
.fragen summary { display: flex; align-items: center; justify-content: space-between; gap: var(--a16); min-height: 3.5rem; padding-block: var(--a16); cursor: pointer; list-style: none; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; flex: none; font: 400 1.75rem/1 var(--schrift-text); color: var(--rot-text); transition: transform .3s ease; }
.fragen details[open] summary::after { transform: rotate(45deg); }
.fragen summary h3 { font-family: var(--schrift-text); font-weight: 700; font-size: var(--t-2); letter-spacing: 0; line-height: 1.35; }
.fragen details p { padding-bottom: var(--a24); max-width: var(--lesebreite); color: var(--text-2); }
@media (prefers-reduced-motion: reduce) { .fragen summary::after { transition: none; } }

/* Kontakt */
.kontakt { padding-bottom: var(--a128); }
.kontakt-wege { margin-top: var(--a32); display: flex; flex-wrap: wrap; gap: var(--a16); }
.knopf-zweit { background: transparent; color: var(--text); text-decoration: none; }
.knopf-zweit:hover { background: var(--rot-tief); color: #fff; }

/* Ueber mich: echter Mensch, echtes Foto, Zeitleiste mit belegten Jahren */
.ueber { display: grid; gap: var(--a48); align-items: center; }
.ueber-bild { position: relative; max-width: 26rem; }
.ueber-bild img { display: block; width: 100%; height: auto; border-radius: 24px; filter: saturate(.85) contrast(1.05); box-shadow: 0 30px 60px -20px rgb(0 0 0 / .9), 0 0 0 1px var(--flaeche-2); }
.ueber-bild::after { content: ""; position: absolute; inset: 0; border-radius: 24px; background: linear-gradient(200deg, transparent 55%, rgb(165 13 21 / .38)); pointer-events: none; }
.ueber-text > p:not(.abschnitt-lead) { margin-top: var(--a16); max-width: var(--lesebreite); color: var(--text-2); font-size: var(--t-2); }
.zeitleiste { list-style: none; margin: var(--a32) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: var(--a16); }
.zeitleiste li { border-top: 3px solid var(--rot); padding-top: var(--a12); }
.zeitleiste strong { display: block; font-family: var(--schrift-auftritt); font-weight: 800; font-stretch: 125%; font-size: var(--t-3); line-height: 1.1; }
.zeitleiste li > span { display: block; margin-top: var(--a4); color: var(--text-2); }
@media (min-width: 1040px) { .ueber { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: var(--a64); } }

/* Werkstatt: echtes Bildschirmfoto oben, randlos in der Karte */
.stueck { overflow: hidden; }
.stueck-bild {
  display: block; width: calc(100% + 2 * var(--a32)); max-width: none; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top;
  margin: calc(-1 * var(--a32)) calc(-1 * var(--a32)) var(--a24); border-bottom: 1px solid var(--flaeche-2);
}

/* Die Marke gross: im Kopfbereich wie auf dem Logo, am Ende als Unterschrift ueber die ganze Breite */
.hero-marke {
  font-family: var(--schrift-auftritt); font-weight: 800; font-stretch: 125%; text-transform: uppercase;
  /* Breite der Marke ist rund 8 Schriftgroessen: so passt sie auf jede Breite in eine Zeile */
  font-size: min(5rem, calc((100vw - 2 * var(--rand)) / 8.3)); line-height: .95; letter-spacing: .01em; white-space: nowrap;
  margin-bottom: var(--a24);
}
.x-gross { color: var(--rot-gross); }
.fuss { position: relative; }
.fuss-marke {
  flex-basis: 100%; margin: 0 0 var(--a24); text-align: center; white-space: nowrap;
  font-family: var(--schrift-auftritt); font-weight: 800; font-stretch: 125%; text-transform: uppercase;
  font-size: 10.4vw; line-height: .9; letter-spacing: -.01em;
}

/* Ab Rechnerbreite steht die Kernaussage in genau zwei Zeilen. Die Schrift richtet sich nach der Breite des Textblocks,
   damit "in Thueringen geschmiedet." in die zweite Zeile passt und nichts an das 3D X stoesst. */
.umbruch-breit { display: none; }
@media (min-width: 1040px) {
  .umbruch-breit { display: inline; }
  .hero-text { max-width: min(58rem, 44vw); }
  .hero h1 { font-size: min(3.6rem, calc(min(58rem, 44vw) / 14.2)); white-space: nowrap; }
  /* Auch der Schriftzug bleibt im Textblock. Mit voller Breite lief er bei 1040 Pixeln rund 140 Pixel in das 3D X (gemessen 09.11.2026). */
  .hero-marke { font-size: min(5rem, calc(min(58rem, 44vw) / 8.3)); }
}

/* Hell und dunkel im Wechsel (Dirk 09.11.2026). Helle Abschnitte tauschen nur die Farbwerte, alle Bausteine lesen dieselben Variablen.
   Gemessen fuer AAA: Text 12:1, blassester Text 8,9:1, Chrom dunkel mindestens 7,3:1, X der Marke 7,9:1. */
.hell {
  --grund: #eef0f3; --flaeche: #ffffff; --flaeche-2: #d9dce2; --linie: #6b6f78;
  --text: #0d0d10; --text-2: #2a2c33; --text-3: #3f424a;
  --rot-text: #a3101a; --rot-marke: #8f0b12; --rot-gross: #b3121b;
  background: var(--grund); color: var(--text);
  padding-bottom: var(--a128) !important;
}
.hell .chrom { background: linear-gradient(172deg, #0d0d10 0%, #2c2f36 30%, #4a4e57 50%, #1c1e23 66%, #3a3d45 100%); -webkit-background-clip: text; background-clip: text; }
.hell :focus-visible { outline-color: #0d0d10; box-shadow: 0 0 0 6px #fff; }
.hell .knopf { background: #0d0d10; color: #fff; border-color: #0d0d10; }
.hell .knopf:hover { background: var(--rot-tief); border-color: var(--rot-tief); }
.hell .stueck { background: var(--flaeche); border-color: var(--flaeche-2); box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 24px 44px -26px rgb(0 0 0 / .35); }
.hell .stueck:has(a:focus-visible) { outline-color: #0d0d10; }
.hell .punze-marke { box-shadow: inset 0 3px 8px rgb(0 0 0 / .85), inset 0 -1px 0 rgb(255 255 255 / .12), 0 0 0 5px var(--grund), 0 0 0 7px #2a2c33; color: #f5f6f8; }

/* Fragen: die Antwort gleitet auf und zu (js/seite.js), ohne Bewegung sofort */
.fragen .antwort { overflow: hidden; }