/* Startseite lorien.group, Fassung 23.10.2026. Baut auf lorien.css auf.

   Eine Geschichte in neun Szenen: Vorstellung, Schnitt, Realität, Liste,
   Haltung, Antwort, was ich tue, wer ich bin, nächster Schritt.

   Grundsatz: natives Scrollen. Kein Scroll-Motor, keine geglättete Maus,
   keine Bühne, die minutenlang stehen bleibt. Die Filme kleben per
   position: sticky als Hintergrund in ihrer Szene, der Text läuft normal
   darüber und bewegt sich mit dem Finger. Animiert werden nur opacity und
   transform, einmal pro Satz. Ohne Skript und bei reduzierter Bewegung
   steht alles sofort da. */

.start { background: var(--obsidian); color: var(--on-invert); }
.start::before { display: none; }                 /* Betonrauschen: hier liegt das Filmkorn */
html.ruhig { scroll-behavior: auto; }

.kante { position: absolute; top: 0; left: 0; width: 1px; height: 64px; pointer-events: none; }

.rand {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-left: max(clamp(1.1rem, 4vw, 1.5rem), env(safe-area-inset-left));
  padding-right: max(clamp(1.1rem, 4vw, 1.5rem), env(safe-area-inset-right));
}
.kupfer { color: var(--copper); }

/* ---------- Kopfzeile ueber dem Film ---------- */
.start .nav {
  background: linear-gradient(color-mix(in srgb, var(--obsidian) 80%, transparent), color-mix(in srgb, var(--obsidian) 0%, transparent));
  border-bottom: 2px solid transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: background-color .3s linear, border-color .3s linear;
}
.start .nav.nav--fest { background: color-mix(in srgb, var(--obsidian) 95%, transparent); border-bottom-color: var(--linie-dunkel); }
.start .nav__logo, .start .nav__link { color: var(--on-invert); }
.start .nav__tel { color: var(--on-invert-muted); }
.start .nav__tel:hover { color: var(--on-invert); }

/* ---------- Text erscheint, einmal ---------- */
html.js:not(.ruhig) [data-zeige] {
  opacity: 0; transform: translate3d(0, 1.4rem, 0);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
html.js:not(.ruhig) [data-zeige].da { opacity: 1; transform: none; }
/* Der Schnitt ist hart: kein Gleiten, nur da */
/* 23.10.2026: der Schnitt steht sofort da, auf jedem Geraet voll weiss (Sinan: «Schriftzug zu dunkel») */
html.js:not(.ruhig) [data-zeige="hart"] { opacity: 1; transform: none; transition: none; }

/* ---------- Szenen mit Film ---------- */
.szene { position: relative; isolation: isolate; background: var(--obsidian); }
.szene__bild { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.szene--film .szene__bild { position: sticky; top: 0; height: 100vh; height: 100lvh; }
.szene--film .szene__text { position: relative; z-index: 1; margin-top: -100vh; margin-top: -100lvh; }
.szene__poster, .szene__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.szene__video { opacity: 0; transition: opacity .8s linear; }
.szene__video.laeuft { opacity: 1; }
html.ruhig .szene__video, html:not(.js) .szene__video { display: none; }

.schleier { position: absolute; inset: 0; pointer-events: none; }
.schleier--auf  { background:
  linear-gradient(90deg, color-mix(in srgb, var(--obsidian) 72%, transparent) 0%, color-mix(in srgb, var(--obsidian) 20%, transparent) 60%, color-mix(in srgb, var(--obsidian) 0%, transparent) 100%),
  linear-gradient(0deg, color-mix(in srgb, var(--obsidian) 88%, transparent) 0%, color-mix(in srgb, var(--obsidian) 0%, transparent) 45%); }
.schleier--hart { background: color-mix(in srgb, var(--obsidian) 50%, transparent); }
.schleier--unten { background: linear-gradient(0deg, color-mix(in srgb, var(--obsidian) 86%, transparent) 0%, color-mix(in srgb, var(--obsidian) 30%, transparent) 55%, color-mix(in srgb, var(--obsidian) 20%, transparent) 100%); }

/* ---------- 1 Die Vorstellung ---------- */
.szene--auf { min-height: 100vh; min-height: 100svh; display: flex; }
.szene--auf .szene__text {
  position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between;
  gap: 2.5rem; padding-top: calc(var(--nav-h) + clamp(2rem, 9vh, 6rem)); padding-bottom: clamp(2.2rem, 7vh, 4.5rem);
}
.auf__gross {
  max-width: none; font-family: var(--schrift-titel); font-weight: 300; text-transform: uppercase;
  font-size: clamp(2.9rem, min(11vw, 13vh), 9.5rem); line-height: .92; letter-spacing: -.035em;
}
.auf__gross span { display: block; }
.auf__unter { margin-top: clamp(1rem, 3vh, 1.8rem); font-size: clamp(1.2rem, 2.2vw, 1.7rem); font-weight: 300;
              color: color-mix(in srgb, var(--on-invert) 88%, transparent); }
.auf__fuss { display: grid; gap: 1.6rem; justify-items: start; }
.auf__titel { font-size: clamp(1.45rem, 3.2vw, 2.6rem); line-height: 1.02; letter-spacing: -.03em;
              max-width: 18em; margin: 0; color: var(--weiss); }
/* Laden: die drei Woerter steigen nacheinander auf, danach steht alles still */
html.js:not(.ruhig) .auf__gross span { animation: auf 1.1s var(--ease-out) both; }
html.js:not(.ruhig) .auf__gross span:nth-child(2) { animation-delay: .18s; }
html.js:not(.ruhig) .auf__gross span:nth-child(3) { animation-delay: .36s; }
html.js:not(.ruhig) .auf__unter { animation: blende 1.2s linear .8s both; }
@keyframes auf { from { opacity: 0; transform: translate3d(0, .5em, 0); } to { opacity: 1; transform: none; } }
@keyframes blende { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Knoepfe auf dieser Seite: lesbar statt Kleinstschrift ---------- */
.start .btn { font-size: .85rem; letter-spacing: .12em; padding: 1.05rem 2rem; min-height: 52px; }
.start .btn--primary:hover { background: var(--on-invert); color: var(--obsidian); }

/* ---------- 2 Der Schnitt ---------- */
.schwarz { min-height: 75vh; min-height: 75svh; display: grid; align-items: center; background: var(--obsidian); }
.schwarz__satz {
  color: var(--on-invert);
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-inline: max(clamp(1.1rem, 4vw, 1.5rem), env(safe-area-inset-left));
  font-family: var(--schrift-titel); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.6rem, 10vw, 9rem); line-height: .9; letter-spacing: -.045em;
}

/* ---------- 3 Die Realitaet ---------- */
.schlag { min-height: 70vh; min-height: 70svh; display: flex; flex-direction: column; justify-content: center; gap: 1rem;
          padding-block: 2rem; }
.schlag:first-child { padding-top: calc(var(--nav-h) + 2rem); }
.schlag__wort { max-width: none; font-family: var(--schrift-titel); font-weight: 700; text-transform: uppercase;
                font-size: clamp(3rem, 13vw, 11rem); line-height: .88; letter-spacing: -.055em; color: var(--weiss);
                hyphens: manual; overflow-wrap: normal; }
.schlag__satz { font-size: clamp(1.2rem, 2.4vw, 1.75rem); line-height: 1.4; max-width: 26ch;
                color: color-mix(in srgb, var(--on-invert) 92%, transparent); }
.schlag--ende { min-height: 90vh; min-height: 90svh; }
.schlag__schluss { max-width: 13em; font-family: var(--schrift-titel); font-weight: 700; text-transform: uppercase;
                   font-size: clamp(2.2rem, 7vw, 6.2rem); line-height: .94; letter-spacing: -.045em; }

/* ---------- 4 Die Liste ---------- */
.liste { background: var(--stone); color: var(--anthracite); padding-block: clamp(4.5rem, 12vw, 9rem); }
.liste__titel { font-size: clamp(2.2rem, 6.4vw, 5.6rem); line-height: .94; max-width: 11em; margin-bottom: clamp(2.2rem, 5vw, 3.5rem); }
.liste__zeilen { list-style: none; border-top: 2px solid var(--anthracite); }
.liste__zeilen li { border-bottom: 1px solid var(--concrete); }
.liste__zeilen a {
  display: block; padding-block: clamp(.8rem, 1.8vw, 1.15rem); min-height: 44px;
  font-family: var(--schrift-titel); font-weight: 500; letter-spacing: -.02em;
  font-size: clamp(1.3rem, 3vw, 2.3rem); line-height: 1.12;
  transition: color var(--duration-fast) var(--ease-smooth), padding-left var(--duration-fast) var(--ease-out);
}
.liste__zeilen a:hover, .liste__zeilen a:focus-visible { color: var(--accent-text); padding-left: .5rem; }
.liste__zeilen li:last-child a { color: var(--carbon); }

/* ---------- 5 Die Haltung ---------- */
.stille { background: var(--obsidian); }
.stille__block { min-height: 70vh; min-height: 70svh; display: flex; flex-direction: column; justify-content: center; }
.stille__satz { max-width: none; font-family: var(--schrift-titel); font-weight: 700; text-transform: uppercase;
                font-size: clamp(2.2rem, 7vw, 6.2rem); line-height: .94; letter-spacing: -.045em; }
.stille__allein { margin-top: 1.2rem; font-family: var(--schrift-titel); font-weight: 300; text-transform: uppercase;
                  font-size: clamp(1.6rem, 4vw, 3.4rem); letter-spacing: .32em; color: var(--on-invert-muted); }
.stille__block--frage { min-height: 90vh; min-height: 90svh; flex-direction: row; align-items: center;
                        justify-content: space-between; gap: clamp(1.5rem, 5vw, 4rem); }
.stille__frage { font-size: clamp(2.6rem, 9vw, 8.4rem); line-height: .9; letter-spacing: -.05em; margin: 0; max-width: 8em; }
.stille__signet { flex: none; width: clamp(72px, 16vw, 220px); height: auto; color: var(--copper); }
@media (max-width: 599px) {
  .stille__block--frage { flex-direction: column-reverse; align-items: flex-start; justify-content: center; }
}

/* ---------- 6 Die Antwort ---------- */
.antwort { min-height: 75vh; min-height: 75svh; display: flex; flex-direction: column; justify-content: flex-end;
           padding-bottom: clamp(3rem, 12vh, 8rem); }
.antwort:first-child { padding-top: var(--nav-h); }
.antwort__satz { max-width: 15em; font-family: var(--schrift-titel); font-weight: 700; text-transform: uppercase;
                 font-size: clamp(1.9rem, 5.4vw, 4.6rem); line-height: .96; letter-spacing: -.04em; color: var(--weiss); }
.antwort--gipfel { min-height: 100vh; min-height: 100svh; justify-content: center; padding-bottom: 0; }
.gipfel { margin: 0; max-width: none; font-size: clamp(2.8rem, 10.5vw, 10rem); line-height: .88; letter-spacing: -.055em; color: var(--weiss); }
.gipfel span { display: block; }

/* ---------- 7 Was ich tue ---------- */
.weg { background: var(--stone); color: var(--anthracite); padding-block: clamp(4.5rem, 12vw, 9rem);
       border-top: 4px solid var(--copper); }
.weg__titel { font-size: clamp(2.1rem, 5.6vw, 5rem); line-height: .96; max-width: 12em; margin-bottom: clamp(2.4rem, 6vw, 4rem); }
.weg__liste { list-style: none; border-top: 2px solid var(--anthracite); }
.weg__liste li { border-bottom: 1px solid var(--concrete); }
.weg__zeile { display: grid; gap: .5rem 3rem; padding-block: clamp(1.4rem, 3vw, 2.2rem); }
@media (min-width: 760px) { .weg__zeile { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: baseline; } }
.weg__name { margin: 0; font-size: clamp(1.7rem, 3.6vw, 3rem); line-height: 1; transition: color var(--duration-fast) var(--ease-smooth); }
.weg__txt { font-size: clamp(1.08rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--carbon); max-width: 34em; }
.weg__zeile:hover .weg__name, .weg__zeile:focus-visible .weg__name { color: var(--accent-text); }

/* ---------- 8 Wer daneben sitzt ---------- */
.person { background: var(--obsidian); padding-block: clamp(4.5rem, 12vw, 9rem); border-top: 4px solid var(--copper); }
.person__raster { display: grid; gap: clamp(2rem, 6vw, 4.5rem); }
@media (min-width: 860px) { .person__raster { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: end; } }
.person__bild { position: relative; isolation: isolate; max-width: 380px; border-bottom: 4px solid var(--copper); }
.person__bild::after { content: ''; position: absolute; inset: 0; background: var(--copper); mix-blend-mode: color; opacity: .16; pointer-events: none; }
.person__bild img { width: 100%; aspect-ratio: 612 / 688; object-fit: cover; object-position: 50% 14%;
                    filter: grayscale(1) contrast(1.14) brightness(.94); }
.person__name { font-size: clamp(2.4rem, 7vw, 5.4rem); line-height: .92; letter-spacing: -.045em; color: var(--weiss);
                margin-bottom: .9rem; max-width: none; }
.person__rolle { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--on-invert-muted); }
.person__lead { margin-top: clamp(1.6rem, 4vw, 2.4rem); font-family: var(--schrift-titel); font-weight: 500;
                font-size: clamp(1.45rem, 2.8vw, 2.3rem); line-height: 1.15; letter-spacing: -.02em; max-width: 20em; }
.person__fakten { list-style: none; margin-top: clamp(1.6rem, 4vw, 2.4rem); border-top: 1px solid var(--line-invert); }
.person__fakten li { padding-block: .9rem; border-bottom: 1px solid var(--line-invert);
                     font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: color-mix(in srgb, var(--weiss) 84%, transparent); max-width: none; }
.person__mehr { display: inline-flex; align-items: center; min-height: 44px; margin-top: 1.4rem;
                font-size: 1.05rem; box-shadow: inset 0 -2px 0 var(--copper); }
.person__mehr:hover { box-shadow: inset 0 -4px 0 var(--copper); }

/* ---------- 9 Der naechste Schritt ---------- */
.kontakt { position: relative; z-index: 2; background: var(--obsidian); color: var(--on-invert);
           padding-block: clamp(4.5rem, 12vw, 9rem); border-top: 1px solid var(--linie-dunkel); }
.kontakt__gross { max-width: none; font-size: clamp(2.7rem, 10vw, 10rem); line-height: .86; letter-spacing: -.06em; margin-bottom: 0; }
.kontakt__raster { display: grid; gap: clamp(2.5rem, 6vw, 5rem); margin-top: clamp(2.5rem, 7vw, 5rem); }
@media (min-width: 960px) { .kontakt__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.kontakt__lead { font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.4; color: color-mix(in srgb, var(--on-invert) 90%, transparent); max-width: 20em; }
.kontakt__direkt { display: grid; gap: .3rem; margin-top: 1.6rem; }
.kontakt__direkt a { display: inline-flex; align-items: center; min-height: 44px; width: fit-content; }
.kontakt__mail { font-family: var(--schrift-titel); font-weight: 700; font-size: clamp(1.4rem, 2.8vw, 2.2rem);
                 letter-spacing: -.02em; box-shadow: inset 0 -2px 0 var(--copper); }
.kontakt__mail:hover { box-shadow: inset 0 -5px 0 var(--copper); }
.kontakt__tel { font-size: 1.2rem; font-variant-numeric: tabular-nums; }

/* Formular auf dunklem Grund, Labels lesbar statt Versalien in Kleinstschrift */
.kontakt .field label { font-family: var(--schrift-text); font-size: 1rem; font-weight: 500; letter-spacing: 0;
                        text-transform: none; color: color-mix(in srgb, var(--on-invert) 88%, transparent); }
.kontakt .field input, .kontakt .field select, .kontakt .field textarea {
  background: var(--feld-dunkel); color: var(--on-invert); border-color: var(--feld-dunkel-rand);
}
.kontakt .field input:focus, .kontakt .field select:focus, .kontakt .field textarea:focus { background: var(--feld-dunkel-fokus); border-color: var(--copper); }
.kontakt .field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--on-invert) 50%), linear-gradient(135deg, var(--on-invert) 50%, transparent 50%);
  background-position: right 1.1rem center, right .75rem center; background-size: 7px 7px, 7px 7px; background-repeat: no-repeat;
}
.field[hidden] { display: none !important; }
.anfrage__raster { display: grid; gap: 0 1.2rem; }
@media (min-width: 560px) { .anfrage__raster { grid-template-columns: 1fr 1fr; } }
.anfrage__mehr { margin-bottom: var(--r); border-top: 1px solid var(--linie-dunkel-stark); padding-top: .6rem; }
.anfrage__mehr summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: .7rem; list-style: none;
                         font-size: 1rem; color: color-mix(in srgb, var(--on-invert) 82%, transparent); }
.anfrage__mehr summary::-webkit-details-marker { display: none; }
.anfrage__mehr summary::before { content: '+'; display: inline-grid; place-items: center; width: 24px; height: 24px;
                                 border: 1px solid var(--copper); color: var(--copper); line-height: 1;
                                 transition: transform .3s var(--ease-out); }
.anfrage__mehr[open] summary::before { transform: rotate(45deg); }
.anfrage__mehr[open] summary { margin-bottom: 1rem; color: var(--on-invert); }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.kontakt .formnote { margin-top: 1.2rem; font-size: .95rem; color: var(--on-invert-muted); }
.kontakt .formnote a { color: var(--on-invert); box-shadow: inset 0 -1px 0 var(--copper); }
.kontakt .formstatus { color: var(--on-invert); }
.kontakt .formstatus[data-state="ok"] { border-left-color: var(--copper); }
.kontakt .formstatus a { box-shadow: inset 0 -1px 0 var(--copper); }
.erfolg { margin-top: 2.4rem; border-left: 4px solid var(--copper); padding: .4rem 0 .4rem 1.2rem; }
.erfolg svg { margin-bottom: 1rem; }
.erfolg__zeile { font-family: var(--schrift-titel); font-weight: 700; text-transform: uppercase;
                 font-size: clamp(1.8rem, 4vw, 3rem); line-height: .95; letter-spacing: -.04em; }

.start .footer { border-top: 1px solid var(--linie-dunkel); }
@media (min-width: 760px) { .footer__grid--drei { grid-template-columns: 2fr 1fr 1fr; } }

/* ---------- Filme anhalten: ein Knopf, nur solange ein Film laeuft ---------- */
.filmknopf {
  position: fixed; z-index: 58; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  background: color-mix(in srgb, var(--obsidian) 70%, transparent); border: 1px solid color-mix(in srgb, var(--on-invert) 35%, transparent);
  color: var(--on-invert);
}
.filmknopf[hidden] { display: none; }
.filmknopf span { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.filmknopf[aria-pressed="true"] span { width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 13px;
                                       border-color: transparent transparent transparent currentColor; margin-left: 3px; }
.filmknopf:hover { border-color: var(--copper); }

/* ---------- Filmkorn, still: keine Dauerbewegung ueber der ganzen Seite ---------- */
.korn { position: fixed; inset: 0; z-index: 55; pointer-events: none;
        background: url('/assets/film/korn.webp') repeat; background-size: 160px 160px; opacity: .07; }
html.ruhig .korn { opacity: .05; }

@media print {
  .szene__bild, .korn, .filmknopf, .nav { display: none !important; }
  .start, .szene, .stille, .schwarz, .person, .kontakt { background: #fff !important; color: #000 !important; }
}