/* Fassung 27: gemeinsame Bausteine, Präfix f27- (Durchsicht 23.10.2026). Bewegung nur über transform und opacity,
   Endlosschleifen nur bei prefers-reduced-motion: no-preference. Farben aus seite.css (offizielle CI seit 21.10.2026). */

/* ---------- Kopfzeile, Menü, Logo ---------- */
/* Handy-Menü: Höhe bis zum Bildschirmende, eigenes Scrollen. ki-f27.js setzt --f27-nav-max beim Öffnen. */
@media (max-width:1060px){
  #nav[data-offen="true"]{max-height:var(--f27-nav-max,calc(100dvh - 7rem));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
}
/* Fast deckend, damit beim Scrollen keine verwischten Farbflecken neben dem Logo erscheinen */
.kopf{background:rgba(255,255,255,.96);-webkit-backdrop-filter:none;backdrop-filter:none}
/* Logo: kein Dauerleuchten, keine Unschärfe. Die Schleife fließt beim Laden einmal ein (logo_wort_f27.svg). */
.kopf .logo img{animation:none;filter:none}
.kopf .logo:hover img{filter:none}
.kopf .logo img{transition:transform .45s var(--ease)}
@media (prefers-reduced-motion:no-preference){.kopf .logo:hover img{transform:scale(1.05)}}

/* ---------- Gemeinsamer Abschnittskopf ---------- */
.f27-kopf{display:grid;gap:.85rem;max-width:46rem;margin-bottom:clamp(1.6rem,4vw,2.6rem)}
.f27-kopf .etikett{justify-self:start}
.f27-kopf .lead{margin:0}

/* ---------- Startbereich ---------- */
.f27-held .f26-markenzeile{margin:-.3rem 0 0}
@media (max-width:900px){.f27-held .f26-markenzeile{order:3}.f27-held .held-bild{order:4}.f27-held .lead{order:5}}

/* ---------- Drei Produkte ---------- */
.f27-produkt-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.2vw,1.5rem);align-items:stretch}
@media (max-width:1000px){.f27-produkt-raster{grid-template-columns:minmax(0,1fr);max-width:40rem}}
.f27-produkt{display:grid;grid-template-rows:auto 1fr;min-width:0;border-radius:var(--r-l);background:var(--papier);border:1px solid var(--linie);
  box-shadow:var(--schatten);overflow:hidden;color:var(--text);text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.f27-produkt:hover,.f27-produkt:focus-visible{transform:translateY(-4px);box-shadow:var(--schatten-hoch);border-color:var(--linie-2)}
.f27-produkt-bild{position:relative;aspect-ratio:16/10;overflow:hidden;background:radial-gradient(120% 90% at 85% 0%,#3a1631 0%,#0e0c0f 70%)}
.f27-produkt-bild img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform .9s var(--ease)}
.f27-produkt:hover .f27-produkt-bild img{transform:scale(1.035)}
.f27-produkt-bild.f27-hoch{display:grid;place-items:start center;background:radial-gradient(90% 90% at 50% 100%,#f6e7ef 0%,#fbf5f8 55%,#fff 100%)}
.f27-produkt-bild.f27-hoch img{width:54%;height:auto;margin-top:9%;object-fit:contain;border-radius:1.1rem;box-shadow:0 18px 40px -18px rgba(120,30,80,.5),0 0 0 6px #0e0c0f}
.f27-produkt:hover .f27-produkt-bild.f27-hoch img{transform:translateY(-3%)}
.f27-produkt-text{display:grid;gap:.6rem;padding:1.15rem 1.3rem 1.4rem;align-content:start}
.f27-produkt h3{display:flex;align-items:center;gap:.65rem;margin:0;font:900 1.32rem/1.15 var(--display);letter-spacing:-.02em;color:var(--tinte)}
.f27-produkt h3 img,.f27-produkt h3 svg{width:2.3rem;height:2.3rem;flex:none;border-radius:.75rem;object-fit:contain}
.f27-produkt p{margin:0}
.f27-produkt ul,.f27-stand-karte>ul{margin:.1rem 0 0;padding:0;list-style:none;display:grid;gap:.4rem;font-size:.94rem;line-height:1.45}
.f27-produkt li,.f27-stand-karte>ul>li{display:grid;grid-template-columns:.9rem minmax(0,1fr);gap:.55rem}
.f27-produkt li::before,.f27-stand-karte>ul>li::before{content:"";width:.45rem;height:.45rem;margin-top:.5rem;border-radius:50%;background:var(--verlauf)}
.f27-mehr-link{display:inline-flex;align-items:center;gap:.4rem;margin-top:.35rem;font-weight:700;color:var(--marke)}
.f27-mehr-link svg{width:1rem;height:1rem;transition:transform .3s var(--ease)}
.f27-produkt:hover .f27-mehr-link svg{transform:translateX(4px)}
.f27-reife{justify-self:start;display:inline-flex;align-items:center;gap:.45rem;font:800 .68rem/1 var(--display);letter-spacing:.09em;text-transform:uppercase;
  padding:.45rem .75rem;border-radius:999px;background:var(--flaeche);color:var(--marke)}
.f27-reife::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:currentColor}
.f27-reife.test{background:var(--gut-bg);color:var(--gut)}
.f27-reife.bau{background:var(--warn-bg);color:var(--warn)}

/* Orbit ohne Bildschirmfoto: die Schleife mit kreisenden Bereichen */
@property --f27-d{syntax:"<angle>";inherits:true;initial-value:0deg}
.f27-orbit-mini{display:grid;place-items:center;background:radial-gradient(70% 80% at 50% 50%,#2a1026 0%,#0e0c0f 72%)}
.f27-produkt-bild .f27-orbit-kern{position:absolute;left:50%;top:50%;width:30%;height:auto;object-fit:contain;transform:translate(-50%,-50%)}
.f27-produkt:hover .f27-produkt-bild .f27-orbit-kern{transform:translate(-50%,-50%) scale(1.05)}
.f27-orbit-bahn{position:absolute;left:12%;right:12%;top:19%;bottom:19%;border:1px solid rgba(255,179,207,.3);border-radius:50%;transform:rotate(-7deg)}
.f27-orbit-bahn.zwei{left:24%;right:24%;top:29%;bottom:29%;transform:rotate(11deg);border-color:rgba(242,105,108,.24)}
.f27-orbit-ring{position:absolute;inset:0}
.f27-orbit-ring i{position:absolute;left:50%;top:50%;font:700 .7rem/1 var(--display);font-style:normal;color:#ffe3ef;white-space:nowrap;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,179,207,.38);padding:.36rem .58rem;border-radius:999px;
  transform:rotate(var(--w)) translateX(5.4rem) rotate(calc(-1 * var(--w))) translate(-50%,-50%);transform-origin:0 0;
  transform:translate(calc(cos(var(--w) + var(--f27-d)) * 38cqw - 50%),calc(sin(var(--w) + var(--f27-d)) * 24cqh - 50%))}
.f27-orbit-mini{container-type:size}
@media (prefers-reduced-motion:no-preference){.f27-orbit-ring{animation:f27Kreis 60s linear infinite}}
@keyframes f27Kreis{to{--f27-d:360deg}}

/* ---------- Stand der Woche ---------- */
.f27-stand-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.2vw,1.5rem)}
@media (max-width:1000px){.f27-stand-raster{grid-template-columns:minmax(0,1fr);max-width:40rem}}
.f27-stand-raster.einzeln{grid-template-columns:minmax(0,44rem)}
.f27-stand-karte{display:grid;gap:.8rem;align-content:start;min-width:0;padding:1.25rem 1.3rem 1.35rem;border-radius:var(--r-l);background:var(--papier);
  border:1px solid var(--linie);box-shadow:var(--schatten)}
.f27-stand-kopf{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.f27-stand-kopf img{width:2rem;height:2rem;border-radius:.6rem}
.f27-stand-kopf b{font:900 1.12rem/1.2 var(--display);color:var(--tinte)}
.f27-version{font:700 .76rem/1 var(--display);color:var(--leise);background:var(--grund);border:1px solid var(--linie);padding:.35rem .55rem;border-radius:.5rem}
.f27-stand-karte h3{margin:.2rem 0 0;font:800 .72rem/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--marke)}
.f27-stand-karte p{margin:0}
.f27-stand-karte .f27-quelle{font-size:.78rem;color:var(--leise)}
.f27-stand-karte .f27-mehr-link{margin-top:0}
.f27-stand-fuss{margin-top:1.3rem;font-size:.9rem;color:var(--leise)}
/* Stufen von Idee bis Für alle, die Linie füllt sich beim ersten Sichtbarwerden */
.f27-spur{--anteil:0;position:relative;margin:.15rem 0 .2rem}
.f27-spur::before,.f27-spur>i{content:"";position:absolute;left:.45rem;right:.45rem;top:.4rem;height:3px;border-radius:3px;background:var(--linie)}
.f27-spur>i{background:var(--verlauf);transform-origin:left center;transform:scaleX(var(--anteil))}
.js .f27-spur.f26-auf:not(.f26-da)>i{transform:scaleX(0)}
@media (prefers-reduced-motion:no-preference){.f27-spur>i{transition:transform 1.3s var(--ease) .25s}}
.f27-spur ol{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none}
.f27-spur li{display:grid;justify-items:center;gap:.4rem;font-size:.72rem;color:var(--leise);text-align:center}
.f27-spur li:first-child{justify-items:start;text-align:left}
.f27-spur li:last-child{justify-items:end;text-align:right}
.f27-spur li::before{content:"";width:.85rem;height:.85rem;border-radius:50%;background:var(--papier);border:2px solid var(--linie-2)}
.f27-spur li.erreicht::before{background:var(--marke);border-color:var(--marke)}
.f27-spur li.jetzt::before{background:var(--marke);border-color:var(--marke);box-shadow:0 0 0 4px rgba(221,66,140,.2)}
.f27-spur li.jetzt{color:var(--tinte);font-weight:700}

/* ---------- Ressourcen ---------- */
.f27-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:1rem}
.f27-kachel{display:grid;grid-template-columns:3rem minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:.95rem;row-gap:.25rem;align-items:start;min-width:0;
  padding:1.1rem 1.2rem;border-radius:var(--r-m);background:var(--papier);border:1px solid var(--linie);color:var(--text);text-decoration:none;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.f27-kachel:hover,.f27-kachel:focus-visible{transform:translateY(-3px);box-shadow:var(--schatten-hoch);border-color:var(--linie-2)}
.f27-ico{display:grid;place-items:center;width:3rem;height:3rem;border-radius:.9rem;background:var(--verlauf);color:#fff;box-shadow:0 10px 22px -12px rgba(183,47,103,.7)}
.f27-kachel .f27-ico{grid-row:1/3}
.f27-ico svg{width:1.45rem;height:1.45rem}
.f27-kachel b{font:800 1.05rem/1.25 var(--display);color:var(--tinte)}
.f27-kachel>span:last-child{font-size:.92rem;line-height:1.45}

/* ---------- Mehr erfahren (aufklappbar, nichts gelöscht) ---------- */
.f27-mehr-liste{display:grid;gap:.9rem}
.f27-mehr,.f27-feld{border:1px solid var(--linie);border-radius:var(--r-l);background:var(--papier);box-shadow:var(--schatten);overflow:clip}
.f27-mehr>summary,.f27-feld>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:3rem minmax(0,1fr) auto;gap:1rem;align-items:center;
  padding:1rem 1.25rem;transition:background .25s}
.f27-mehr>summary::-webkit-details-marker,.f27-feld>summary::-webkit-details-marker{display:none}
.f27-mehr>summary:hover,.f27-feld>summary:hover{background:var(--grund)}
.f27-mehr>summary .f27-ico{background:var(--flaeche);color:var(--marke);box-shadow:none}
.f27-mehr>summary b,.f27-feld>summary b{display:block;font:800 1.08rem/1.25 var(--display);color:var(--tinte)}
.f27-mehr>summary small,.f27-feld>summary small{display:block;margin-top:.15rem;color:var(--leise);font-size:.9rem;line-height:1.4}
.f27-pfeil{display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;border:1px solid var(--linie-2);color:var(--marke);transition:transform .35s var(--ease)}
.f27-pfeil svg{width:1rem;height:1rem}
.f27-mehr[open]>summary .f27-pfeil,.f27-feld[open]>summary .f27-pfeil{transform:rotate(180deg)}
.f27-mehr[open]>summary,.f27-feld[open]>summary{border-bottom:1px solid var(--linie)}
.f27-mehr-inhalt .wrap{padding-left:clamp(.9rem,2.4vw,1.6rem);padding-right:clamp(.9rem,2.4vw,1.6rem)}
@media (max-width:560px){.f27-mehr>summary,.f27-feld>summary{grid-template-columns:2.6rem minmax(0,1fr) auto;gap:.75rem;padding:.9rem 1rem}.f27-mehr>summary .f27-ico{width:2.6rem;height:2.6rem}}

/* Für Unternehmen: Leistungsfelder als aufklappbare Punkte */
.f27-felder{display:grid;gap:.8rem}
.f27-feld>summary{grid-template-columns:minmax(0,1fr) auto}
.f27-feld>summary .fi-status{justify-self:start;margin-bottom:.4rem}
.f27-feld-inhalt>section{border-top:0}

/* ---------- Echte Ansichten mit Lupe ---------- */
.f27-galerie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.9rem,2vw,1.3rem);align-items:start}
.f27-bild.breit{grid-column:span 2}
.f27-bild.hoch{grid-row:span 2}
@media (max-width:900px){.f27-galerie{grid-template-columns:minmax(0,1fr)}.f27-bild.breit{grid-column:auto}.f27-bild.hoch{grid-row:auto}}
.f27-bild,.f27-telefon{margin:0;display:grid;gap:.6rem;min-width:0;align-content:start}
.f27-lupe-knopf{display:block;width:100%;padding:0;border:1px solid var(--linie);border-radius:var(--r-m);background:#fbf2f7;overflow:hidden;cursor:zoom-in;
  box-shadow:var(--schatten);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.f27-lupe-knopf:hover,.f27-lupe-knopf:focus-visible{transform:translateY(-3px);box-shadow:var(--schatten-hoch)}
.f27-lupe-knopf img{display:block;width:100%;height:auto}
.f27-bild.hoch .f27-lupe-knopf{max-width:21rem;justify-self:center}
.f27-bild figcaption,.f27-telefon figcaption{display:grid;gap:.15rem;font-size:.92rem;line-height:1.45}
.f27-bild figcaption b,.f27-telefon figcaption b{font:800 1rem/1.3 var(--display);color:var(--tinte)}
.f27-bildhinweis{margin:1.3rem 0 0;font-size:.85rem;color:var(--leise)}
.f27-telefone{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.4vw,1.8rem);align-items:start}
@media (max-width:900px){.f27-telefone{grid-template-columns:minmax(0,1fr);max-width:24rem;margin-inline:auto}}
.f27-telefon .f27-lupe-knopf{border:0;border-radius:1.7rem;padding:.55rem;background:#0e0c0f;box-shadow:0 30px 60px -30px rgba(60,20,50,.6)}
.f27-telefon .f27-lupe-knopf img{border-radius:1.15rem;background:#fff}
.f27-lupe{border:0;padding:0;background:transparent;max-width:min(96vw,1600px);max-height:94vh;overflow:visible}
.f27-lupe::backdrop{background:rgba(14,12,15,.84)}
.f27-lupe img{display:block;max-width:min(96vw,1600px);max-height:90vh;width:auto;height:auto;border-radius:.8rem;box-shadow:0 30px 80px rgba(0,0,0,.5);cursor:zoom-out}
.f27-lupe-zu{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:calc(12px + env(safe-area-inset-right,0px));display:grid;place-items:center;
  width:2.8rem;height:2.8rem;border-radius:50%;border:0;background:#fff;color:#333;font:700 1.5rem/1 var(--display);cursor:pointer}

/* ---------- Reduzierte Bewegung: alles sofort sichtbar ---------- */
@media (prefers-reduced-motion:reduce){
  .f27-produkt,.f27-kachel,.f27-lupe-knopf,.f27-produkt-bild img,.f27-pfeil{transition:none}
  .js .f27-spur.f26-auf:not(.f26-da)>i{transform:scaleX(var(--anteil))}
}

/* Angelieferte App-Bilder vollständig zeigen, ohne Beschnitt. */
.f27-produkt-bild.f27-bildschirm{background:#fbf2f7}
.f27-produkt-bild.f27-bildschirm img{object-fit:contain;object-position:center}