/* GGWS „Lichtpunkte“: Das G aus Lichtpunkten wandelt sich beim Scrollen in die Leistungen, die Linie kommt aus dem Lot, läuft bis zum Seitenende und färbt sich dabei um.
   Inhalt, Menü und Formular kommen ohne Skript aus. /js/seite.js ergänzt das Gummiband und schließt das Menü nach einem Sprung, ohne Skript schließt man es von Hand. Ohne Unterstützung oder bei reduzierter Bewegung steht die Seite fertig und ruhig da. */

/* Kopfzeile */
.kopfzeile { position: fixed; inset: 0 0 auto; z-index: 30; height: var(--leiste); display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; padding: 0 var(--rand); background: rgb(0 0 0 / .96); border-bottom: 1px solid var(--kante); }
.kopf-logo { position: relative; z-index: 1; display: block; width: var(--logo); }
.kopfzeile nav { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; }
.kopf-signet { display: none; }
.kopf-knick { display: none; }

/* Erster Bildschirm */
.held { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; justify-items: center; overflow: clip; isolation: isolate; background: #000000 url(/licht/start.jpg) center / cover no-repeat; }
.held video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.held::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 46% at 50% 54%, rgb(0 0 0 / .72), rgb(0 0 0 / .28) 70%, transparent), linear-gradient(to bottom, transparent 70%, #000000); }
.held-mitte { align-self: center; display: grid; justify-items: center; gap: 24px; width: min(100%, 76rem); padding: 120px var(--rand) 32px; text-align: center; }
.held h1 { font-size: clamp(2.75rem, 7vw, 6rem); line-height: 1.02; letter-spacing: -.035em; }
.held-mitte p { max-width: 38rem; font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.45; color: var(--hell); }
.held-fuss { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 var(--rand) 24px; }
@media (prefers-reduced-motion: reduce) { .held video { visibility: hidden; } }
body:has(#anhalten:checked) .held video { visibility: hidden; }

/* Leistungen: Bühne und Textblöcke */
.fahrt { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 64px); padding-inline: var(--rand); view-timeline: --fahrt block; }
.buehne { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; pointer-events: none; }
.buehne-rahmen { position: relative; width: min(100%, 86svh); aspect-ratio: 1; mask-image: radial-gradient(closest-side, #000 62%, transparent); }
.buehne img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.b0 { opacity: 1; }
.spur { display: grid; }
.block { min-height: 100svh; display: grid; align-content: center; justify-items: start; gap: 20px; padding-block: 48px; }
.block-titel h2 { font-size: clamp(2.5rem, 5.4vw, 5rem); line-height: 1.04; letter-spacing: -.03em; }
.block h3 { font-size: clamp(2.25rem, 4.4vw, 4rem); line-height: 1.06; letter-spacing: -.03em; }
.block p { max-width: 32rem; font-size: clamp(1.125rem, 1.5vw, 1.3125rem); line-height: 1.5; color: var(--hell); }
.marken { display: flex; flex-wrap: wrap; gap: 8px; }
.marken li { padding: 4px 12px; border: 1px solid var(--kante); border-radius: 999px; color: var(--leise); font-size: .9375rem; }
@supports not (animation-timeline: view()) {
  .buehne { display: none; }
  .spur { grid-column: 2; }
  .block { min-height: 0; padding-block: 64px; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .buehne img { animation: bild linear both; animation-fill-mode: none; animation-timeline: --fahrt; }
    .block > * { animation: lese linear both; animation-timeline: view(); animation-range: cover 12% cover 88%; }
    .b0 { opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .buehne { display: none; }
    .spur { grid-column: 2; }
    .block { min-height: 0; padding-block: 64px; }
  }
}
@keyframes bild { from, to { opacity: 1; } }
@keyframes lese { 0%, 100% { opacity: .08; } 22%, 78% { opacity: 1; } }

/* Jedes Bühnenbild gilt nur in seinem Stück des Scrollwegs. Erzeugt für 5 Formen mit je 9 Zwischenbildern. */
.buehne .b0 { animation-range: contain 0.00% contain 7.00%; animation-fill-mode: backwards; }
.buehne .b1 { animation-range: contain 7.00% contain 8.22%; }
.buehne .b2 { animation-range: contain 8.22% contain 9.44%; }
.buehne .b3 { animation-range: contain 9.44% contain 10.67%; }
.buehne .b4 { animation-range: contain 10.67% contain 11.89%; }
.buehne .b5 { animation-range: contain 11.89% contain 13.11%; }
.buehne .b6 { animation-range: contain 13.11% contain 14.33%; }
.buehne .b7 { animation-range: contain 14.33% contain 15.56%; }
.buehne .b8 { animation-range: contain 15.56% contain 16.78%; }
.buehne .b9 { animation-range: contain 16.78% contain 18.00%; }
.buehne .b10 { animation-range: contain 18.00% contain 32.00%; }
.buehne .b11 { animation-range: contain 32.00% contain 33.22%; }
.buehne .b12 { animation-range: contain 33.22% contain 34.44%; }
.buehne .b13 { animation-range: contain 34.44% contain 35.67%; }
.buehne .b14 { animation-range: contain 35.67% contain 36.89%; }
.buehne .b15 { animation-range: contain 36.89% contain 38.11%; }
.buehne .b16 { animation-range: contain 38.11% contain 39.33%; }
.buehne .b17 { animation-range: contain 39.33% contain 40.56%; }
.buehne .b18 { animation-range: contain 40.56% contain 41.78%; }
.buehne .b19 { animation-range: contain 41.78% contain 43.00%; }
.buehne .b20 { animation-range: contain 43.00% contain 57.00%; }
.buehne .b21 { animation-range: contain 57.00% contain 58.22%; }
.buehne .b22 { animation-range: contain 58.22% contain 59.44%; }
.buehne .b23 { animation-range: contain 59.44% contain 60.67%; }
.buehne .b24 { animation-range: contain 60.67% contain 61.89%; }
.buehne .b25 { animation-range: contain 61.89% contain 63.11%; }
.buehne .b26 { animation-range: contain 63.11% contain 64.33%; }
.buehne .b27 { animation-range: contain 64.33% contain 65.56%; }
.buehne .b28 { animation-range: contain 65.56% contain 66.78%; }
.buehne .b29 { animation-range: contain 66.78% contain 68.00%; }
.buehne .b30 { animation-range: contain 68.00% contain 82.00%; }
.buehne .b31 { animation-range: contain 82.00% contain 83.22%; }
.buehne .b32 { animation-range: contain 83.22% contain 84.44%; }
.buehne .b33 { animation-range: contain 84.44% contain 85.67%; }
.buehne .b34 { animation-range: contain 85.67% contain 86.89%; }
.buehne .b35 { animation-range: contain 86.89% contain 88.11%; }
.buehne .b36 { animation-range: contain 88.11% contain 89.33%; }
.buehne .b37 { animation-range: contain 89.33% contain 90.56%; }
.buehne .b38 { animation-range: contain 90.56% contain 91.78%; }
.buehne .b39 { animation-range: contain 91.78% contain 93.00%; }
.buehne .b40 { animation-range: contain 93.00% contain 100.00%; animation-fill-mode: forwards; }

/* Die Linie: je Abschnitt eine Zeichnung, x = 0 liegt unter dem Lot. Sichtbar wird sie bis zur Lesehöhe von 62 %, im letzten Abschnitt holt sie bis zum Seitenende auf. */
.linie { position: absolute; inset: 0 0 0 var(--lx); z-index: 1; pointer-events: none; view-timeline: --strecke block; view-timeline-inset: 62svh 38svh; }
.held .linie, .kopf-klein .linie { top: var(--lot-unten); }
.linie-weg, .linie-spitze { position: absolute; inset: 0; }
.linie svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.linie path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.nur-schmal { display: none; }
.l-hof { stroke: var(--rot); stroke-width: 16px; opacity: .05; }
.l-glut { stroke: var(--rot); stroke-width: 6px; opacity: .14; }
.l-kern { stroke: var(--rot); stroke-width: 1.5px; opacity: .8; }
.l-punkte { stroke: #FFFFFF; stroke-width: 1.6px; stroke-dasharray: 0 11 0 23 0 7; opacity: .7; }
.k-hof { stroke: var(--rot); stroke-width: 22px; opacity: .28; }
.k-kern { stroke: var(--rot); stroke-width: 3px; }
.k-punkte { stroke: #FFFFFF; stroke-width: 2.4px; stroke-dasharray: 0 9 0 17; animation: gleiten 1400ms linear infinite; }
.linie-spitze { opacity: 0; mask-image: linear-gradient(to bottom, transparent, #000 78%, transparent); mask-size: 100% 240px; mask-repeat: no-repeat; }
@keyframes gleiten { to { stroke-dashoffset: -26; } }
@media (prefers-reduced-motion: reduce) { .k-punkte { animation: none; } }
body:has(#anhalten:checked) .k-punkte { animation: none; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .linie-weg { animation: enthuellen linear both; animation-timeline: --strecke; }
    .linie-spitze { animation: spitze linear; animation-fill-mode: none; animation-timeline: --strecke; }
    .linie-ruhig .linie-weg { animation: none; }
    .linie-ruhig .linie-spitze { display: none; }
    /* Die Lesehöhe erreicht das Seitenende nie. Der letzte Abschnitt beginnt dort und ist fertig, wenn sein Ende unten im Bild steht, also wenn der Fuß hereinkommt. */
    .kontakt .linie { view-timeline-inset: 0; }
    .kontakt .linie-weg, .kontakt .linie-spitze { animation-range: cover 38svh cover calc(100% - 100svh); }
    /* Auf sehr hohen Fenstern reicht der Scrollweg dafür nicht, dort steht das Ende fertig da. */
    @media (min-height: 1200px) {
      .zwei .linie-weg, .kontakt .linie-weg { animation: none; }
      .zwei .linie-spitze, .kontakt .linie-spitze { display: none; }
    }
    /* Georgs Farbweg vom 07.11.2026, nur auf der Startseite. Das Lot im Logo bleibt rot. */
    body:has(.held) :is(.l-hof, .l-glut, .l-kern, .k-hof, .k-kern), body:has(.held) .kopf-knick path { animation: umfaerben linear both; animation-timeline: scroll(root); }
    body:has(.held) .raum-linie { animation: gleiten-punkte 1400ms linear infinite, umfaerben-flaeche linear both; animation-timeline: auto, scroll(root); }
    body:has(.held) .kopfzeile::before, body:has(.held) .raum-nav a::before { animation: umfaerben-flaeche linear both; animation-timeline: scroll(root); }
    @media (min-width: 56.01em) {
      body:has(.held):not(:has(#raum:popover-open)) .kopfzeile::before { content: ""; animation: umfaerben-flaeche linear both, ansatz-weg linear both; animation-timeline: scroll(root), scroll(root); animation-range: normal, 0 100svh; }
    }
    body:has(.held) .kopf-fortschritt { animation: fortschritt linear both, umfaerben-flaeche linear both; animation-timeline: scroll(root), scroll(root); }
    .kopf-fortschritt { animation: fortschritt linear both; animation-timeline: scroll(root); }
  }
}
@keyframes umfaerben { 0%, 8% { stroke: var(--rot); } 40% { stroke: var(--warm); } 72% { stroke: #EAF1FF; } 100% { stroke: var(--blau); } }
@keyframes umfaerben-flaeche { 0%, 8% { background-color: var(--rot); } 40% { background-color: var(--warm); } 72% { background-color: #EAF1FF; } 100% { background-color: var(--blau); } }
@keyframes ansatz-weg { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fortschritt { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes enthuellen { from { clip-path: inset(-20px -40px 100% -40px); } to { clip-path: inset(-20px -40px -20px -40px); } }
@keyframes spitze { from { opacity: 1; mask-position: 0 -240px; } to { opacity: 1; mask-position: 0 100%; } }
.held-mitte, .held-fuss, .spur, .abschnitt > :not(.linie) { position: relative; z-index: 2; }

/* Abschnitte */
.abschnitt { position: relative; padding: clamp(80px, 11vw, 160px) var(--rand); }
.abschnitt:not(.recht) h2 { font-size: clamp(2.5rem, 5.4vw, 5rem); line-height: 1.04; letter-spacing: -.03em; }
.kacheln { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.kachel { display: grid; align-content: start; gap: 12px; padding: 24px; border: 1px solid var(--kante); border-radius: 32px; background: #0E0E13; transition: border-color 160ms ease-out; }
.kachel:hover { border-color: var(--rand-pille); }
@media (prefers-reduced-motion: reduce) { .kachel { transition: none; } }
.kachel img { display: block; width: 100%; height: auto; aspect-ratio: 1; mix-blend-mode: screen; mask-image: radial-gradient(closest-side, #000 62%, transparent); }
.kachel span { color: var(--leise); font-variant-numeric: tabular-nums; }
.kachel h3 { font-size: clamp(1.5rem, 2vw, 1.875rem); line-height: 1.15; letter-spacing: -.02em; }
.kachel p { font-size: 1.0625rem; line-height: 1.5; color: var(--hell); }
.zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px clamp(32px, 6vw, 96px); padding-top: 0; }
.abschnitt.zwei h2 { font-size: clamp(1.75rem, 3vw, 2.75rem); letter-spacing: -.025em; }
.zwei p { margin-top: 20px; font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.5; color: var(--hell); max-width: 36rem; }

/* Menü: Raum unter der Leiste, die Linie läuft vom Lot hindurch und zweigt zum Ziel ab */
.kopf-rechts { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; }
.kopf-anfrage { background: #FFFFFF; border-color: #FFFFFF; color: #000000; }
.kopf-anfrage:hover, .kopf-anfrage:active { background: var(--warm); border-color: var(--warm); }
.menue-knopf { gap: 10px; min-width: 124px; cursor: pointer; }
.menue-striche { position: relative; flex: none; width: 18px; height: 10px; }
.menue-striche i { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: #FFFFFF; transition: transform 200ms ease-out; }
.menue-striche i:first-child { top: 0; }
.menue-striche i:last-child { bottom: 0; background: var(--rot); }
.wenn-auf { display: none; }
body:has(#raum:popover-open) .wenn-zu { display: none; }
body:has(#raum:popover-open) .wenn-auf { display: inline; }
body:has(#raum:popover-open) .menue-striche i:first-child { transform: translateY(4px) rotate(45deg); }
body:has(#raum:popover-open) .menue-striche i:last-child { transform: translateY(-4px) rotate(-45deg); }
/* Der Raum deckt die Seite. Popover ist nicht modal, ohne diese Regel liefe Tab in die verdeckten Links. */
body:has(#raum:popover-open) :is(main, .fuss, .sprung, .kopf-klein) { visibility: hidden; }
.kopf-fortschritt { position: absolute; inset: auto 0 -1px; height: 2px; background-color: var(--rot); transform: scaleX(0); transform-origin: left; pointer-events: none; }
@supports selector(:popover-open) { .kopfzeile .kopf-pillen { display: none; } }
@supports not selector(:popover-open) { .menue-knopf, .raum { display: none; } }

.raum { --ast: clamp(32px, 4vw, 64px); position: fixed; inset: var(--leiste) 0 0; width: 100%; height: auto; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--grund); color: var(--tinte); }
.raum::backdrop { background: transparent; }
.raum-linie { position: fixed; inset: var(--leiste) auto 0 var(--lx); z-index: 1; width: 1.5px; background-color: var(--rot); background-image: radial-gradient(circle, #FFFFFF 1px, transparent 1.4px); background-size: 100% 26px; transform-origin: top; pointer-events: none; }
.raum-linie::before { content: ""; position: absolute; inset: 0 -5px; background-color: inherit; opacity: .14; border-radius: 6px; }
.raum-bilder { position: fixed; top: calc(var(--leiste) + 3svh); right: var(--rand); width: min(46vw, calc(100svh - var(--leiste) - 6svh)); aspect-ratio: 1; pointer-events: none; mask-image: radial-gradient(closest-side, #000 62%, transparent); }
.raum-bilder img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 280ms ease-out; }
.raum-bilder .r-ruhe { opacity: 1; }
.raum:has(.raum-nav a:not(.z-leistungen):is(:hover, :focus-visible)) .r-ruhe { opacity: 0; }
.raum:has(.z-website:is(:hover, :focus-visible)) .r-website,
.raum:has(.z-buchung:is(:hover, :focus-visible)) .r-buchung,
.raum:has(.z-software:is(:hover, :focus-visible)) .r-software,
.raum:has(.z-wartung:is(:hover, :focus-visible)) .r-wartung,
.raum:has(.z-ablauf:is(:hover, :focus-visible)) .r-ablauf,
.raum:has(.z-kontakt:is(:hover, :focus-visible)) .r-kontakt { opacity: 1; }
.raum-innen { position: relative; z-index: 2; min-height: 100%; display: grid; grid-template-rows: 1fr auto; gap: 32px; padding: clamp(16px, 4svh, 48px) var(--rand) 0 calc(var(--lx) + var(--ast)); }
.raum-nav { align-self: center; display: grid; justify-items: start; }
.raum-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; transition: color 160ms ease-out; }
.raum-nav:has(a:hover) a:not(:hover) { color: var(--leise); }
.raum-nav a::before { content: ""; position: absolute; top: 50%; left: calc(-1 * var(--ast)); width: calc(var(--ast) - 10px); height: 1.5px; background-color: var(--rot); background-image: radial-gradient(circle, #FFFFFF .9px, transparent 1.2px); background-size: 14px 100%; transform: scaleX(0); transform-origin: left; transition: transform 200ms ease-out; }
.raum-nav a::after { content: ""; position: absolute; top: calc(50% - 2.25px); left: -12px; width: 6px; height: 6px; border-radius: 50%; background: #FFFFFF; opacity: 0; transition: opacity 160ms ease-out; }
.raum-nav a:is(:hover, :focus-visible)::before { transform: scaleX(1); }
.raum-nav a:is(:hover, :focus-visible)::after { opacity: 1; }
.z-gross { font-size: clamp(2.25rem, 5vw, 4.5rem); font-weight: 300; line-height: 1.1; letter-spacing: -.03em; }
.raum-unter { --ast-unter: 24px; display: grid; justify-items: start; padding: 4px 0 16px var(--ast-unter); }
.raum-unter a { font-size: clamp(1.125rem, 1.6vw, 1.375rem); color: var(--hell); }
.raum-unter a::before { left: calc(-1 * var(--ast) - var(--ast-unter)); width: calc(var(--ast) + var(--ast-unter) - 10px); }
.raum-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-block: 16px; border-top: 1px solid var(--kante); }
.raum-fuss .wege { margin-top: 0; }
.raum-recht { display: flex; gap: 20px; color: var(--leise); font-size: .9375rem; }
.raum-recht a { display: inline-block; padding-block: 12px; color: var(--tinte); }
/* Die Leiste deckt den Ansatz der Linie am Lot. Das Stück in der Leiste schließt die Lücke, solange die Linie darunter noch am Lot steht. */
.kopfzeile::before { position: absolute; top: var(--lot-unten); bottom: 0; left: var(--lx); width: 1.5px; background-color: var(--rot); }
@media (min-width: 56.01em) {
  body:has(#raum:popover-open) .kopfzeile::before, body:not(:has(.held)) .kopfzeile::before { content: ""; }
}
@media (prefers-reduced-motion: no-preference) {
  .raum:popover-open { transition: opacity 200ms ease-out; }
  .raum-linie { transition: transform 620ms cubic-bezier(.22, 1, .36, 1); animation: gleiten-punkte 1400ms linear infinite; }
  .raum-nav > * { transition: opacity 340ms ease-out, transform 340ms ease-out, color 160ms ease-out; }
  .raum-nav > :nth-child(2) { transition-delay: 60ms, 60ms, 0ms; }
  .raum-nav > :nth-child(3) { transition-delay: 120ms, 120ms, 0ms; }
  .raum-nav > :nth-child(4) { transition-delay: 180ms, 180ms, 0ms; }
  .raum-fuss { transition: opacity 340ms ease-out 240ms; }
  @starting-style {
    .raum:popover-open { opacity: 0; }
    .raum:popover-open .raum-linie { transform: scaleY(0); }
    .raum:popover-open .raum-nav > * { opacity: 0; transform: translateY(12px); }
    .raum:popover-open .raum-fuss { opacity: 0; }
  }
}
@keyframes gleiten-punkte { to { background-position: 0 26px; } }
body:has(#anhalten:checked) :is(.raum-linie, .raum-nav > *, .raum-fuss, .raum:popover-open) { transition: none; }
/* Nur die gleitenden Punkte halten an, die Farbe folgt weiter dem Scrollen. */
body:has(#anhalten:checked) .raum-linie { animation-play-state: paused, running; }
@media (prefers-reduced-motion: reduce) { .menue-striche i, .raum-bilder img, .raum-nav a, .raum-nav a::before, .raum-nav a::after { transition: none; } }

/* Gummiband: Griff und Zeichenfläche, das Verhalten steht in /js/seite.js */
html.gummi-an { touch-action: pan-y pinch-zoom; }
html.gummi-nah, html.gummi-nah * { cursor: grab; }
html.gummi-zieht, html.gummi-zieht * { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.gummi { position: fixed; inset: 0; z-index: 20; width: 100%; height: 100%; overflow: visible; fill: none; pointer-events: none; }
.gummi path { fill: none; stroke-linecap: round; }

/* Kontakt */
.kontakt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px clamp(32px, 6vw, 96px); align-items: start; background: radial-gradient(60% 55% at 15% 50%, rgb(150 92 38 / .22), transparent 70%); }
.wege { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.wege .pille { gap: 8px; overflow-wrap: anywhere; }
.wege small { color: var(--leise); font-size: .8125rem; font-weight: 400; }
.wege .pille:hover small, .wege .pille:active small, .wege .pille:focus-visible small { color: var(--tinte); }
.kontakt-formular { padding: clamp(20px, 3vw, 36px); border: 1px solid var(--kante); border-radius: 32px; background: var(--flaeche); }

/* Fuß */
.fuss { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 24px var(--rand); border-top: 1px solid var(--kante); color: var(--leise); font-size: .9375rem; }
.fuss > :not(.linie) { position: relative; z-index: 2; }
.fuss nav { display: flex; gap: 20px; }
.fuss a { display: inline-block; padding-block: 8px; color: var(--tinte); }

/* Rechtstexte und Fehlerseiten: die Linie läuft gerade aus dem Lot, der Text steht rechts daneben */
.kopf-klein { position: relative; min-height: 148px; display: flex; align-items: flex-end; padding-left: calc(var(--lx) + 48px); padding-bottom: 8px; }
.recht { padding: 48px var(--rand) 96px calc(var(--lx) + 48px); }

@media (min-width: 56.01em) and (max-width: 75em) { .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Hier reichen die zentrierten Knöpfe sonst bis an die Linie. */
@media (min-width: 56.01em) and (max-width: 68em) { .held-fuss { padding-left: calc(var(--lx) + 16px); } }

/* Schmal, in em, damit eine große Browserschrift ebenfalls hierher führt. Die Linie läuft am Rand und kreuzt keinen Text. */
@media (max-width: 56em) {
  :root { --rand: 20px; --lx: 10px; --leiste: 60px; }
  .nur-breit { display: none; }
  .nur-schmal { display: block; }
  .held .linie { top: 0; }
  .kopf-klein .linie { top: 0; }
  .kopf-knick { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
  .kopf-knick path { fill: none; stroke: var(--rot); stroke-linecap: round; }
  .kopfzeile { gap: 8px; }
  .kopf-logo { width: 40px; flex: none; }
  .kopf-logo .firmen-logo { display: none; }
  .kopf-signet { display: block; width: 40px; height: 40px; }
  .kopf-rechts, .kopfzeile nav { flex-wrap: nowrap; gap: 4px; }
  .kopf-rechts .pille { padding: 8px 12px; font-size: .8125rem; }
  .menue-knopf { min-width: 112px; gap: 8px; }
  .raum { --ast: 22px; }
  .raum-bilder { top: auto; right: -14vw; bottom: 4svh; width: min(110vw, 64svh); opacity: .26; }
  .raum-nav { align-self: start; }
  .raum-unter { --ast-unter: 16px; }
  .raum-fuss { position: sticky; bottom: 0; background: var(--grund); }
  .raum-fuss .wege { width: 100%; }
  .held { min-height: 100svh; padding-top: var(--leiste); background-image: none; }
  .held-mitte { padding-top: 48px; }
  .held video { inset: auto; top: 50%; left: 50%; width: max(235vw, 100%); height: auto; object-fit: fill; transform: translate(-50%, -50%); mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent); }
  body:has(#anhalten:checked) .held { background-image: url(/licht/start.jpg); background-size: 235vw auto; }
  .fahrt { grid-template-columns: minmax(0, 1fr); }
  .buehne, .spur { grid-area: 1 / 1; }
  .buehne { place-items: start center; padding-top: calc(var(--leiste) + 2svh); }
  .buehne-rahmen { width: min(100%, 42svh); }
  .block { position: relative; align-content: end; padding-block: 48px 56px; }
  .block > *, .block-titel h2 { animation: none !important; }
  /* Ein Sprung auf #leistungen setzt den Abschnitt oben an, die Überschrift muss dann im Fenster stehen. */
  .block-titel { align-content: end; padding-bottom: 20svh; }
  .block h3 { font-size: clamp(2rem, 9vw, 2.75rem); }
  .block p { font-size: 1.0625rem; }
  .kacheln { grid-template-columns: minmax(0, 1fr); }
  .kachel img { width: min(100%, 260px); justify-self: center; }
  .zwei, .kontakt { grid-template-columns: minmax(0, 1fr); }
  .kopf-klein { display: block; min-height: 0; padding: var(--leiste) 0 0; }
  .kopf-klein .anhalten { margin: 8px 0 0 var(--rand); }
  .recht { padding: 32px var(--rand) 64px; }
}
@media (max-width: 56em) and (prefers-reduced-motion: reduce) { .held { background-image: url(/licht/start.jpg); background-size: 235vw auto; } }
/* Sehr kleine Handys: Symbol und Text teilen sich den Platz, der Text geht vor. */
@media (max-width: 56em) and (max-height: 700px) { .buehne-rahmen { opacity: .35; } }
/* Kleines oder quer gehaltenes Handy: Fest unten verdeckte der Fuß des Raums die Menüpunkte. */
@media (max-height: 700px) { .raum-fuss { position: static; } }