/* Sunfield Bausatz 0611 – flüssige Übergänge, 3D, Verläufe, „Häufig gewählt“.
   Keine Bibliotheken, keine externen Aufrufe, kein Tracking. Nach den Seiten-CSS laden.
   Nur transform/opacity werden bewegt (keine Layout-Sprünge). Reduzierte Bewegung wird respektiert. */
:root{--sf-ease:cubic-bezier(.22,.8,.24,1);--sf-gold:#e0b45f;--sf-creme:#fffdf8;--sf-tief:#17211f;--sf-braun:#6b4e1c;--sf-fokus:#8a6420;--sf-plakette-grund:#17211f;--sf-plakette-text:#f4dfae}

/* 1 Seitenwechsel morphen statt hart neu laden (Chrome/Edge 126+, Safari 18.2+; sonst normaler Wechsel).
   Gemeinsame Teile (Kopf, Titel, Fuß) verändern nur ihre Form, der Rest blendet weich in 3D über. */
@media (prefers-reduced-motion:no-preference){
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:.42s;animation-timing-function:var(--sf-ease)}
::view-transition-old(root){animation:.32s var(--sf-ease) both sf-raus}
::view-transition-new(root){animation:.42s var(--sf-ease) both sf-rein}
}
@media (prefers-reduced-motion:no-preference) and (min-width:761px){
::view-transition-group(*){animation-duration:.55s}
}
@keyframes sf-raus{to{opacity:0;transform:perspective(1200px) rotateX(3deg) translateY(-10px) scale(.985)}}
@keyframes sf-rein{from{opacity:0;transform:perspective(1200px) rotateX(-3deg) translateY(12px) scale(.985)}}
[data-sf-morph=kopf]{view-transition-name:sf-kopf}
[data-sf-morph=titel]{view-transition-name:sf-titel}
[data-sf-morph=fuss]{view-transition-name:sf-fuss}

/* 2 Auftritt beim Scrollen (nur Elemente unterhalb des ersten Bildschirms, nur mit JS) */
@media (prefers-reduced-motion:no-preference){
.sf-auftritt{transition:opacity .7s var(--sf-ease),transform .7s var(--sf-ease)}
.sf-auftritt.sf-weg{opacity:0;transform:perspective(900px) translateY(18px) rotateX(5deg)}
}

/* 3 3D-Kippen zum Zeiger (nur Maus/Trackpad, nicht auf dem Handy) */
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
.sf-kipp{transition:transform .45s var(--sf-ease),box-shadow .45s var(--sf-ease),opacity .7s var(--sf-ease)}
.sf-kipp:hover{transform:translateY(-6px) perspective(900px) rotateX(var(--sf-kx,0deg)) rotateY(var(--sf-ky,0deg))}
}

/* 4 Verläufe ohne harte Kanten */
@property --sf-w{syntax:'<angle>';inherits:false;initial-value:0deg}
.sf-verlauf-rand{position:relative;isolation:isolate}
.sf-verlauf-rand::before{content:"";position:absolute;inset:0;z-index:-1;padding:2px;border-radius:inherit;pointer-events:none;background:conic-gradient(from var(--sf-w),var(--sf-gold),#f4dfae,#9fc5b4,#e9c98a,var(--sf-gold));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.sf-verlauf-text{color:var(--sf-tief);background:linear-gradient(100deg,var(--sf-tief) 20%,var(--sf-braun) 60%,var(--sf-tief) 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sf-flaeche{background:linear-gradient(180deg,transparent,var(--sf-ton,#f4dfae40) 14%,var(--sf-ton,#f4dfae40) 86%,transparent)}
@media (prefers-reduced-motion:no-preference){
.sf-verlauf-rand::before{animation:sf-dreh 9s linear infinite}
.sf-verlauf-text{background-size:200% 100%;animation:sf-glanz 7s ease-in-out infinite alternate}
}
@keyframes sf-dreh{to{--sf-w:360deg}}
@keyframes sf-glanz{to{background-position:100% 0}}

/* 5 Aufklappen (details) weich öffnen – ohne Sprung (Chrome 131+; sonst wie bisher) */
@media (prefers-reduced-motion:no-preference){
@supports selector(::details-content){
details{interpolate-size:allow-keywords}
details::details-content{block-size:0;overflow:clip;transition:block-size .4s var(--sf-ease),content-visibility .4s allow-discrete} /* sf-erlaubt: Nutzer-Klick */
details[open]::details-content{block-size:auto}
}
}

/* 6 Häufig gewählt / Empfehlung: Plakette ohne Layout-Sprung (absolut, aus data-sf-hinweis) */
[data-sf-hinweis]{position:relative}
[data-sf-hinweis]::before{content:attr(data-sf-hinweis);position:absolute;top:0;right:14px;transform:translateY(-50%);z-index:2;padding:4px 10px;border-radius:999px;font:700 12px/1.3 system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:.02em;color:var(--sf-plakette-text);background:var(--sf-plakette-grund);box-shadow:0 6px 14px -8px #17211f99}

/* 7 Fokus immer sichtbar (schwach gewichtet: Seiten-Stile gehen vor) */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--sf-fokus);outline-offset:3px}

/* Bewegung aus: alles sofort sichtbar und ruhig */
@media (prefers-reduced-motion:reduce){
.sf-auftritt.sf-weg{opacity:1;transform:none}
.sf-verlauf-rand::before,.sf-verlauf-text{animation:none}
}
@media print{.sf-auftritt.sf-weg{opacity:1;transform:none}}

/* Morph-Zuordnung */
.kopf,header.kopf,.topbar{view-transition-name:sf-kopf}main h1{view-transition-name:sf-titel}footer.fuss,footer{view-transition-name:sf-fuss}