/* EIGENKERN Testversion — Stile fuer videos / partner / ueber-uns / kontakt / testen (22.10.2026).
   Nur das, was die gemeinsamen Bausteine in eigenkern.css nicht abdecken. */

/* Aktiver Eintrag in der Kopfzeile */
.kopf nav a.aktiv{opacity:1;color:var(--orange-hell)}
.kopf nav .knopf.aktiv{box-shadow:0 0 0 2px rgba(249,115,22,.5)}

/* Anker unter der Kopfzeile und dem Testband landen lassen */
[id]{scroll-margin-top:96px}

/* Textabsaetze in Abschnitten */
.absatz{font-size:17px;max-width:720px;margin:0 0 18px;opacity:.85}
.abschnitt-dunkel .absatz{color:rgba(255,255,255,.82);opacity:1}
.abschnitt-dunkel .hinweis{color:rgba(255,255,255,.6)}
.abschnitt-dunkel .zeile{color:var(--orange-hell)}

/* Zwei Spalten: Text links, Bild/Karte rechts */
.zweispalt{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.zweispalt .unter{margin-bottom:18px}

/* Bild-Platzhalter (bis die Bilder da sind): 16:9, dunkel-orange */
.bildplatz{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;
  background:radial-gradient(70% 90% at 80% 20%,rgba(249,115,22,.42),transparent 70%),linear-gradient(160deg,#161C24 0%,#0E1116 100%);
  border:1px solid var(--stahl-linie);display:flex;align-items:flex-end;padding:18px}
.bildplatz span{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-zart)}

/* Stimmungsfilm im Seitenkopf (videos.html) */
.stimmung{position:relative;margin-top:48px;border-radius:18px;overflow:hidden;border:1px solid var(--stahl-linie);
  background:#000;aspect-ratio:16/9;max-width:980px}
.stimmung video{width:100%;height:100%;object-fit:cover;display:block}
.stimmung-zeile{position:absolute;left:14px;bottom:12px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.8);background:rgba(14,17,22,.6);border:1px solid rgba(255,255,255,.18);border-radius:5px;padding:5px 11px}

/* Filmkarten der Reihe „Eigenkern“ (Platzhalter, 16:9) */
.filmraster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.film{background:var(--platte);border:1px solid var(--linie);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.film-bild{position:relative;aspect-ratio:16/9;display:flex;align-items:flex-start;justify-content:space-between;padding:14px;
  background:radial-gradient(60% 80% at 85% 25%,rgba(249,115,22,.4),transparent 70%),linear-gradient(160deg,#161C24,#0E1116)}
.film-bild::after{content:"";position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;
  border:2px solid rgba(249,115,22,.55);
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23f97316' d='M8 5v14l11-7z'/></svg>") 55% 50%/26px no-repeat}
.film-nr,.film-status{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;border-radius:5px;padding:5px 10px}
.film-nr{color:var(--orange-zart);border:1px solid rgba(249,115,22,.4)}
.film-status{color:rgba(255,255,255,.75);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.film-text{padding:16px 18px 20px}
.film-text small{display:block;color:var(--orange);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;margin-bottom:6px}
.film-text h3{font:600 17px/1.3 var(--fliess);margin:0 0 8px;text-transform:none;letter-spacing:0}
.film-text p{margin:0;font-size:14.5px;color:var(--leise)}
.gruppe{font:400 24px/1.1 var(--titel);text-transform:uppercase;letter-spacing:.03em;margin:44px 0 18px}
.gruppe:first-of-type{margin-top:0}

/* Partner: Hauptpartner-Block und Aufgabenteilung */
.partner-haupt{display:grid;grid-template-columns:1fr 1.3fr;gap:32px;align-items:center;
  background:var(--platte);border:1px solid var(--linie);border-radius:18px;padding:32px}
.wortmarke{font:400 clamp(30px,4vw,46px)/1 var(--titel);text-transform:uppercase;letter-spacing:.02em;color:var(--stahl)}
.wortmarke .o{color:var(--orange)}
.wortmarke small{display:block;font:600 13px/1.4 var(--fliess);letter-spacing:.06em;text-transform:uppercase;color:var(--leise);margin-top:10px}
.partner-haupt p{margin:0 0 12px;font-size:15.5px;opacity:.85}
.partner-haupt .weiter{font-weight:600;text-decoration:none;color:var(--text)}
.partner-haupt .weiter::after{content:""}
.liste{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.liste li{position:relative;padding-left:26px;font-size:15px}
.liste li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:12px;border-radius:50%;background:var(--orange)}
.liste.nein li::before{background:none;border:2px solid var(--leise);box-sizing:border-box}
.karte .liste{margin-top:12px}
.karte .liste li{opacity:.85}

/* Kontakt: Kontaktwege und mailto-Formular */
.kontaktweg strong{display:block;font-size:17px;margin-bottom:4px}
.kontaktweg a.direkt{display:inline-block;margin-top:10px;font-weight:600;color:var(--orange);text-decoration:none;word-break:break-all}
.mailformular{display:grid;gap:16px;max-width:680px}
.feld{position:relative}
.feld label{position:absolute;left:15px;top:17px;font-weight:600;font-size:16px;color:var(--leise);pointer-events:none;transform-origin:left top;
  transition:transform .2s ease,color .2s ease}
.feld input,.feld textarea{width:100%;max-width:100%;font:16px/1.5 var(--fliess);color:var(--text);background:var(--platte);
  border:1px solid #cfc9da;border-radius:8px;padding:24px 14px 8px;box-sizing:border-box;min-height:56px;transition:border-color .2s ease,box-shadow .2s ease}
.feld input::placeholder,.feld textarea::placeholder{color:transparent;transition:color .2s ease .1s}
.feld input:focus,.feld textarea:focus{outline:0;border-color:var(--orange);box-shadow:0 0 0 3px rgba(249,115,22,.2)}
.feld input:focus::placeholder,.feld textarea:focus::placeholder{color:#9a97a3}
.feld input:focus+label,.feld input:not(:placeholder-shown)+label,.feld textarea:focus+label,.feld textarea:not(:placeholder-shown)+label{
  transform:translateY(-10px) scale(.74);color:var(--orange)}
.feld textarea{min-height:140px;resize:vertical;display:block}
.feld textarea+label{top:16px}
.ruhig .feld label,.ruhig .feld input::placeholder,.ruhig .feld textarea::placeholder{transition:none}
.mailformular .knopfzeile{margin-top:4px}
button.knopf{border:0;cursor:pointer;font-family:inherit}
button.knopf:active,.knopf:active{transform:scale(.97)}
button.knopf.gedrueckt{transform:scale(.97);background:var(--orange-hell)}

/* Werte-Karten (ueber-uns) */
.wert{text-align:left}
.wert .satz{font:400 26px/1.1 var(--titel);text-transform:uppercase;color:var(--orange);margin:0 0 10px;display:block}

@media (max-width:980px){
  .filmraster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zweispalt,.partner-haupt{grid-template-columns:1fr}
}
@media (max-width:640px){
  .filmraster{grid-template-columns:1fr}
  .partner-haupt{padding:22px}
  .stimmung{border-radius:12px}
}


/* ===== BEWEGUNG DIESER SEITEN (23.10.2026) — nur unter html.bewegt, nie bei html.ruhig ===== */
/* Seitwaerts eingeschobene Elemente duerfen keine Querscroll-Breite erzeugen */
.bewegt main{overflow-x:clip}
/* Schritt-Karten (weisser Grund aus eigenkern.css) in dunklen Abschnitten lesbar */
.abschnitt-dunkel .schritt{color:var(--text)}
.abschnitt-dunkel .schritt p{color:var(--leise)}
/* Knoepfe: sanfter Druck */
.knopf{transition:transform .15s ease,background .2s ease,border-color .2s ease}
/* Karten-Ikone faerbt sich */
.karte .ikone{transition:stroke .25s ease,transform .25s ease}
.karte:hover .ikone{stroke:var(--orange-hell);transform:translateY(-2px)}
/* Fragen klappen weich auf */
.frage summary::after{transition:transform .25s ease}
.frage summary::-webkit-details-marker{display:none}
.frage[open] p{animation:frage-auf .32s ease both}
@keyframes frage-auf{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ruhig .frage[open] p{animation:none}

/* --- videos.html: Filmkarten erscheinen gestaffelt, Vorschaubild zoomt (nur mit Maus) --- */
.bewegt:not(.ruhig) .film{opacity:0;transform:translateY(26px);transition:opacity .6s ease var(--v,0s),transform .7s cubic-bezier(.2,.7,.2,1) var(--v,0s)}
.bewegt:not(.ruhig) .film.da{opacity:1;transform:none}
.film-bild,.video .bild{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.film-bild::after{transition:transform .3s ease,border-color .3s ease}
@media (hover:hover) and (pointer:fine){
  .film:hover .film-bild,.video:hover .bild{transform:scale(1.05)}
  .film:hover .film-bild::after{transform:scale(1.08);border-color:var(--orange)}
}
.stimmung{will-change:transform}
.stimmung video{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.bewegt:not(.ruhig) .stimmung.auf-zoom video{transform:scale(1.06)}
.bewegt:not(.ruhig) .stimmung.auf-zoom.da video{transform:none}

/* --- partner.html: zwei Haelften schieben sich beim Scrollen zusammen (--p von 0 bis 1 aus dem Skript) --- */
.partner-haupt{position:relative;--p:1}
.bewegt:not(.ruhig) .partner-haupt{--p:0}
.bewegt:not(.ruhig) .partner-haupt>:first-child{transform:translateX(calc((1 - var(--p)) * -48px));opacity:calc(.2 + var(--p) * .8)}
.bewegt:not(.ruhig) .partner-haupt>:last-child{transform:translateX(calc((1 - var(--p)) * 48px));opacity:calc(.2 + var(--p) * .8)}
.partner-haupt>*{transition:transform .25s ease-out,opacity .25s ease-out}
.partner-haupt>:last-child{position:relative}
.partner-haupt>:last-child::before{content:"";position:absolute;left:-17px;top:0;bottom:0;width:2px;background:var(--orange);
  transform:scaleY(var(--p));transform-origin:top;opacity:calc(var(--p) * var(--p))}
@media (max-width:980px){
  .partner-haupt{row-gap:52px}
  .partner-haupt>:last-child::before{left:0;right:0;top:-27px;bottom:auto;width:auto;height:2px;transform:scaleX(var(--p));transform-origin:left}
  .bewegt:not(.ruhig) .partner-haupt>:first-child{transform:translateX(calc((1 - var(--p)) * -24px))}
  .bewegt:not(.ruhig) .partner-haupt>:last-child{transform:translateX(calc((1 - var(--p)) * 24px))}
}
.ruhig .partner-haupt>*{transition:none}

/* --- ueber-uns.html: Linie zeichnet sich mit dem Scrollen entlang der Schritte --- */
.schritte.zeitleiste{position:relative;--p:1}
.bewegt:not(.ruhig) .schritte.zeitleiste{--p:0}
.schritte.zeitleiste::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--orange);z-index:1;
  transform:scaleX(var(--p));transform-origin:left}
.schritte.zeitleiste .schritt::before{transition:color .3s ease}
@media (max-width:600px){
  .schritte.zeitleiste::before{top:0;bottom:0;right:auto;width:3px;height:auto;transform:scaleY(var(--p));transform-origin:top}
}
.bildplatz{will-change:transform}

/* --- testen.html: Checkliste, Haekchen zeichnen sich beim Scrollen --- */
.pruefliste .schritt{padding-right:64px}
.pruefliste .haken{position:absolute;right:20px;top:22px;width:30px;height:30px;stroke:var(--orange);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.pruefliste .haken circle{stroke-dasharray:64;stroke-dashoffset:0}
.pruefliste .haken path{stroke-dasharray:16;stroke-dashoffset:0}
.bewegt:not(.ruhig) .pruefliste .haken circle{stroke-dashoffset:64;transition:stroke-dashoffset .7s ease var(--v,0s)}
.bewegt:not(.ruhig) .pruefliste .haken path{stroke-dashoffset:16;transition:stroke-dashoffset .45s ease calc(var(--v,0s) + .5s)}
.bewegt:not(.ruhig) .pruefliste .schritt.abgehakt .haken circle,.bewegt:not(.ruhig) .pruefliste .schritt.abgehakt .haken path{stroke-dashoffset:0}
.bewegt:not(.ruhig) .pruefliste .schritt h3{transition:color .4s ease calc(var(--v,0s) + .7s)}
.bewegt:not(.ruhig) .pruefliste .schritt.abgehakt h3{color:var(--orange)}
@media (max-width:600px){.pruefliste .schritt{padding-right:60px}.pruefliste .haken{right:16px;top:20px}}