/* Fuß-Schaubild 3D auf /philosophie/. Nur auf dieser Seite eingebunden.
   Das Standbild der Startansicht steht sofort, die 3D-Szene (Leinwand) übernimmt deckungsgleich, sobald sie bereit ist (.is-3d). */
.f3-karte{position:relative;padding:3.5rem 1.25rem 1.5rem;border-radius:var(--r-xl);background:radial-gradient(ellipse 70% 55% at 50% 45%,#fff 0%,transparent 70%),linear-gradient(160deg,#f5f8fb,#e3ebf1);box-shadow:0 24px 60px rgba(0,24,40,.10)}
.f3-buehne{position:relative;width:100%;max-width:520px;margin:0 auto;aspect-ratio:4/3}
/* Die beiden ruhigen Farbflächen aus dem Original-Schaubild, hinter dem Fuß */
.f3-buehne::before,.f3-buehne::after{content:"";position:absolute;border-radius:50%;aspect-ratio:1;pointer-events:none}
.f3-buehne::before{left:12%;top:6%;width:56%;background:rgba(209,37,126,.09)}
.f3-buehne::after{left:57.5%;top:45%;width:35%;background:rgba(128,160,180,.16)}
.f3-bild,.f3-leinwand{position:absolute;left:0;top:0;z-index:1;width:100%;height:100%;display:block}
.f3-bild{transition:opacity .2s linear .2s}
.f3-leinwand{opacity:0;pointer-events:none;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:opacity .2s linear}
.f3.is-3d .f3-leinwand{opacity:1;pointer-events:auto}
.f3.is-3d .f3-bild{opacity:0}
.f3.is-punkt .f3-leinwand{cursor:pointer}
.f3.is-zieht .f3-leinwand{cursor:grabbing}

/* Namensschild oben in der Karte */
.f3-schild{position:absolute;top:1rem;left:50%;z-index:5;margin:0;padding:.5rem 1.1rem;border-radius:var(--r-full);background:var(--navy);color:#fff;font-size:.875rem;font-weight:700;line-height:1.2;white-space:nowrap;box-shadow:0 6px 18px rgba(0,36,64,.22);pointer-events:none;opacity:0;transform:translate(-50%,-6px);transition:opacity .2s var(--ease-out),transform .2s var(--ease-out)}
.f3-schild.is-an{opacity:1;transform:translate(-50%,0)}
.f3-schild small{display:block;margin-top:.15rem;font-size:.75rem;font-weight:400;text-align:center}
/* Lange Angaben brechen im Schild um, statt über die Karte hinauszulaufen */
.f3-schild{white-space:normal;width:max-content;max-width:calc(100% - 2rem);text-align:center;border-radius:var(--r-lg,14px)}

/* Button unter dem Modell: Druckansicht ein und aus. Feste Breite, damit beim Textwechsel nichts springt. */
.f3-schalter{margin:.75rem 0 0;min-height:2.75rem;text-align:center}
.f3-schalter-taste{min-height:2.75rem;min-width:14rem;padding:0 1.25rem;border:2px solid var(--navy);border-radius:var(--r-full);background:#fff;font:inherit;font-size:.875rem;font-weight:700;color:var(--navy);white-space:nowrap;cursor:pointer;transition:background-color .2s var(--ease-out),color .2s var(--ease-out)}
.f3-schalter-taste:hover,.f3-schalter-taste[aria-pressed="true"]{background:var(--navy);color:#fff}
.f3-schalter-taste:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

/* Zeile unter der Karte: Hinweis, bei Tastaturbedienung (oder ohne 3D) an gleicher Stelle die fünf Buttons */
.f3-unten{position:relative;margin-top:.75rem}
.f3-tasten{position:absolute;left:0;top:0;width:100%;margin:0;padding:0;list-style:none;display:flex;justify-content:center;gap:.25rem;opacity:0;pointer-events:none}
.f3-tasten:focus-within,.f3.is-ohne3d .f3-tasten{opacity:1;pointer-events:auto}
/* Je Ansicht eine Liste: Stellen am Fuß oder Druckstellen unter dem Fuß */
.f3.is-druck .f3-tasten--fuss,.f3:not(.is-druck) .f3-tasten--druck{display:none}
/* Die Stellen passen nicht in eine Zeile: Buttons in ihrer natürlichen Breite, mittig, mit Umbruch in weitere Zeilen.
   Sichtbar (Tastatur oder ohne 3D) nimmt die Liste ihren Platz ein, statt über dem Folgenden zu liegen. */
.f3-tasten{flex-wrap:wrap;gap:0 .25rem}
.f3-tasten:focus-within,.f3.is-ohne3d .f3-tasten{position:static}
.f3-taste{min-height:2.75rem;padding:0 .7rem;border:0;border-radius:var(--r-full);background:transparent;font:inherit;font-size:.8125rem;font-weight:600;color:var(--navy);white-space:nowrap;cursor:pointer}
.f3-taste:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
/* Kleingedruckter Hinweis unter dem Schaubild */
.f3-kleingedruckt{margin:.5rem 0 0;font-size:.75rem;line-height:1.5;color:var(--text-m);text-align:center}
.f3-text{color:var(--text-m)}
.f3-text--erst{margin-top:1rem}
@media(max-width:480px){.f3-karte{padding:3.25rem .75rem 1.25rem}.f3-taste{padding:0 .4rem}}
@media(prefers-reduced-motion:reduce){.f3-schild{transition:opacity .2s linear;transform:translate(-50%,0)}}
/* Handy: sieben Stellen in zwei Zeilen (4 + 3), kein Button allein in der letzten Zeile */
@media(max-width:480px){.f3-tasten{gap:0 .125rem}.f3-taste{font-size:.75rem;padding:0 .3rem}}
/* Produkte-Seite: Umschalter „Ohne Einlage / Mit Einlage“ unter dem Modell. Ohne 3D gibt es nichts umzuschalten. */
.f3-wahl{margin:.75rem 0 0;text-align:center}
.f3.is-ohne3d .f3-wahl{display:none}
/* Hinweis in der Karte, bis jemand die Grafik selbst anfasst */
.f3-tipp{position:absolute;left:50%;bottom:0;z-index:2;margin:0;padding:.3rem .85rem;border-radius:var(--r-full);background:rgba(255,255,255,.88);font-size:.8125rem;font-weight:600;line-height:1.3;color:var(--navy);white-space:nowrap;transform:translateX(-50%);pointer-events:none;transition:opacity .3s linear}
.f3.is-benutzt .f3-tipp{opacity:0}
/* Vorführung: gezeichneter Mauszeiger, am Handy ein Fingerpunkt. Die Spitze liegt auf dem Nullpunkt des Elements. */
.f3-zeiger{position:absolute;left:0;top:0;z-index:6;width:0;height:0;pointer-events:none;opacity:0;transition:opacity .3s linear}
.f3-zeiger.is-an{opacity:1}
.f3-zeiger svg{position:absolute;left:-5px;top:-4px;width:30px;height:30px;overflow:visible;filter:drop-shadow(0 2px 3px rgba(0,36,64,.35));transform-origin:5px 4px;transition:transform .15s var(--ease-out)}
.f3-zeiger path{fill:var(--navy);stroke:#fff;stroke-width:1.6;stroke-linejoin:round}
.f3-zeiger.is-drueckt svg{transform:scale(.84)}
.f3-zeiger i{position:absolute;left:-18px;top:-18px;width:36px;height:36px;border:2px solid #d1257e;border-radius:50%;opacity:0}
.f3-zeiger.is-klick i{animation:f3-klick .55s ease-out}
@keyframes f3-klick{from{opacity:.9;transform:scale(.25)}to{opacity:0;transform:scale(1.25)}}
.f3-zeiger--finger svg{display:none}
.f3-zeiger--finger::before{content:"";position:absolute;left:-18px;top:-18px;width:36px;height:36px;border:2px solid #fff;border-radius:50%;background:rgba(0,54,92,.3);box-shadow:0 2px 8px rgba(0,36,64,.3);transition:transform .15s var(--ease-out)}
.f3-zeiger--finger.is-drueckt::before{transform:scale(.8)}
/* Ton der Schmerzlaute an oder aus, unter dem Hauptbutton der Karte */
.f3-ton{margin:.25rem 0 0;text-align:center}
.f3-ton-taste{min-height:2.75rem;min-width:6.5rem;padding:0 1rem;border:0;border-radius:var(--r-full);background:transparent;font:inherit;font-size:.8125rem;font-weight:600;color:var(--navy);white-space:nowrap;cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
.f3-ton-taste:hover{background:rgba(0,54,92,.06)}
.f3-ton-taste:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}