/* follow4.life – Stilübersetzung „Bastelpappe“ (Runde 2, 15.11.2026)
Vorgabe: Logo und Video. Ausgeschnittene Pappstücke in verschiedenen Farben, zusammengeklebt.
Keine Filzstruktur, keine Nähte, keine Knöpfe an Website-Elementen, keine Scheiben hinter Icons.
Wird NACH dem Original-CSS geladen; Aufbau, Texte, Funktionen unverändert. */
@font-face { font-family: "follow4 Papp"; src: url("/assets/stil/follow4-papp.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Chewy"; src: url("/assets/stil/Chewy.woff2") format("woff2"); font-display: swap; }
:root {
/* Schatten einer aufgeklebten Pappschicht: kurz, weich, leicht nach unten */
--lage: 0 1px 1px rgba(40,28,14,.22), 0 3px 6px -1px rgba(40,28,14,.22);
--lage-hoch: 0 1px 1px rgba(40,28,14,.20), 0 6px 12px -4px rgba(40,28,14,.30);
--pappe: url("/assets/stil/pappe-grau.webp");
}
/* 1 · Material: ruhige Bastelpappe (Feinkorn aus dem freigegebenen Videobild, ca. 1,8 % Helligkeit) */
.f4k, .f4k * { background-blend-mode: multiply; }
.fk-papier, .f4k .buehne, .f4k .blatt, .f4k .band, .fk-karte, .f4k .fussnavi, .f4k .ankuendigung,
.fk-rahmen, .fk-fleck, .f4k .sonne, .f4k .huegel, .f4k .siegel, .fk-nummer, .fk-eingabe, .fk-chip, .f4k .pille, .fk-video-label {
background-image: var(--pappe); background-size: 256px; }
.f4k .kartonbahn { background-color: #D9A874; background-image: var(--pappe); background-size: 256px; }
.f4k .karton-fuss { background: #E6C59C var(--pappe) repeat; background-size: 256px; background-blend-mode: multiply; }
.f4k .karton-fuss::before { display: none; }
/* 2 · Abschnittskanten: sauber geschnittene, leicht wellige Pappkante (wie die Schneehügel im Video) */
.pappe-kante { position: absolute; left: 0; right: 0; height: 22px; pointer-events: none; z-index: 1;
background: inherit; background-blend-mode: multiply;
-webkit-mask: url("data:image/svg+xml;utf8,") 0 0 / 100% 100% no-repeat;
mask: url("data:image/svg+xml;utf8,") 0 0 / 100% 100% no-repeat;
filter: drop-shadow(0 -2px 2px rgba(40,28,14,.14)); }
.pappe-kante.oben { top: -21px; }
.pappe-kante.unten { bottom: -21px; transform: scaleY(-1); }
/* 3 · Karten: ein Pappstück mit Schichtschatten. Keine Naht, keine Deko-Knöpfe. */
.fk-karte, .f4k .ankuendigung, .fk-rahmen { box-shadow: var(--lage-hoch); }
.fk-klammer { display: none !important; }
/* 4 · Buttons: EIN ausgeschnittenes Pappstück, je Button eigener Schnitt (data-schnitt per pappe.js).
Hover/Fokus: anderes Pappstück (Farbe), sonst nichts. Fokusring dezent, aber da. */
.fk-btn, .f4k .fussnavi a.cta { isolation: isolate; background: none !important; box-shadow: none !important; transform: none !important; transition: none; }
.fk-btn::before, .f4k .fussnavi a.cta::before { content: ""; position: absolute; inset: 0; z-index: -1;
background-color: #F8AF15; background-image: var(--pappe); background-size: 256px; background-blend-mode: multiply;
border-radius: 14px 18px 12px 20px / 16px 12px 19px 14px; box-shadow: var(--lage); transform: rotate(-.6deg); }
.fk-btn[data-schnitt="1"]::before { border-radius: 20px 12px 18px 14px / 12px 18px 14px 20px; transform: rotate(.5deg) scaleX(1.015); }
.fk-btn[data-schnitt="2"]::before { border-radius: 10px 22px 14px 18px / 18px 14px 22px 10px; transform: rotate(-.3deg) skewX(-1deg); }
.fk-btn[data-schnitt="3"]::before { border-radius: 24px 14px 20px 12px / 14px 22px 12px 18px; transform: rotate(.8deg); }
.fk-btn:hover::before, .fk-btn:focus-visible::before, .f4k .fussnavi a.cta:hover::before { background-color: #FBD07A; }
.fk-btn-leise::before { background-color: #FFF6EA; }
.fk-btn-leise:hover::before, .fk-btn-leise:focus-visible::before { background-color: #B9D2C6; }
.fk-btn:focus-visible, .f4k .fussnavi a:focus-visible { outline: 2px solid #124938; outline-offset: 4px; }
.fk-btn:hover, .fk-btn:active { transform: none !important; }
/* Schriftvarianten der Button-Beschriftung (Vorschau: ?schrift=a|b|d) */
html[data-schrift="b"] .fk-btn, html[data-schrift="b"] .f4k .fussnavi a.cta { font-family: "Chewy", var(--font-display); font-weight: 400; letter-spacing: .02em; }
html[data-schrift="d"] .fk-btn, html[data-schrift="d"] .f4k .fussnavi a.cta { font-family: "follow4 Papp", var(--font-display); font-weight: 400; color: #FFFFFF;
text-shadow: 0 1px 0 rgba(20,14,8,.35), 0 1.5px 2px rgba(20,14,8,.25); }
html[data-schrift="d"] .fk-btn::before, html[data-schrift="d"] .f4k .fussnavi a.cta::before { background-color: #124938; }
html[data-schrift="d"] .fk-btn:hover::before, html[data-schrift="d"] .fk-btn:focus-visible::before, html[data-schrift="d"] .f4k .fussnavi a.cta:hover::before { background-color: #8A5A2B; }
html[data-schrift="d"] .fk-btn-leise { color: #124938; text-shadow: none; }
html[data-schrift="d"] .fk-btn-leise::before { background-color: #FFF6EA; }
/* 5 · Formularfelder: ausgeschnittenes Fenster in der Pappe (leicht vertieft), keine Rahmenlinie */
.fk-eingabe { background-color: #F3E4D1; border: 0; box-shadow: inset 0 2px 3px rgba(40,28,14,.22), inset 0 0 0 1px rgba(40,28,14,.06); }
.fk-eingabe:focus { box-shadow: inset 0 2px 3px rgba(40,28,14,.22); }
.f4k select.fk-eingabe { background-image: url("/assets/stil/ui-chevron.webp"), var(--pappe);
background-position: calc(100% - 16px) 52%, 0 0; background-size: 18px 18px, 256px; background-repeat: no-repeat, repeat; background-blend-mode: normal, multiply; }
/* 6 · Icons: nur das ausgeschnittene Pappteil, keine Scheibe dahinter */
.f4k .scheibe { background: none !important; box-shadow: none !important; }
.f4k .scheibe img.pappe-icon { width: 76%; height: 76%; display: block; margin: auto; filter: drop-shadow(0 1px 1px rgba(40,28,14,.25)) drop-shadow(0 3px 4px rgba(40,28,14,.15)); }
img.pappe-haken { width: 22px; height: 22px; flex: none; filter: drop-shadow(0 1px 1px rgba(40,28,14,.25)); }
img.pappe-pfeil { width: 18px; height: 18px; filter: drop-shadow(0 1px 1px rgba(40,28,14,.2)); }
/* 7 · Untere Navigation: Pappstreifen, Icons frei aufgelegt, „Schreibt uns“ als gelbes Pappstück */
.f4k .fussnavi { border-top: 0; box-shadow: 0 -1px 1px rgba(40,28,14,.12), 0 -6px 12px -6px rgba(40,28,14,.3); }
.f4k .fussnavi a img.navi-pappe { width: 30px; height: 30px; display: block; filter: drop-shadow(0 1px 1px rgba(40,28,14,.28)) drop-shadow(0 2px 3px rgba(40,28,14,.12)); }
.f4k .fussnavi a.cta { position: relative; margin: 3px; }
.f4k .fussnavi a.cta img.navi-pappe { width: 26px; height: 26px; }
/* 8 · Kleinteile */
.fk-play { background: url("/assets/stil/ui-play.webp") center / contain no-repeat !important; border-radius: 50%; box-shadow: none; filter: drop-shadow(0 2px 3px rgba(40,28,14,.35)); }
.fk-play::before { display: none; }
.fk-nummer { box-shadow: var(--lage); }
.f4k details.faq summary::after { content: ""; background: #F8AF15 url("/assets/stil/ui-plus.webp") center / 58% no-repeat; box-shadow: var(--lage); }
.f4k details.faq[open] summary::after { content: ""; background-image: url("/assets/stil/ui-chevron.webp"); transform: rotate(180deg); }
.f4k .pille, .fk-video-label { box-shadow: var(--lage); }
.fk-chip { box-shadow: var(--lage); }
.fk-chip:has(input:checked) { background-color: #B9D2C6; box-shadow: var(--lage), 0 0 0 2px #124938 inset; }
.f4k .zeichen { filter: drop-shadow(0 1px 1px rgba(40,28,14,.3)); }
/* Vorschau-Hinweis (nur Vorschau) */
.vorschau-band { position: fixed; top: 0; right: 0; z-index: 99; white-space: nowrap; pointer-events: none; background: #124938; color: #FFF8EF; font: 700 11px/1 "Nunito", system-ui, sans-serif; padding: 5px 10px; border-radius: 0 0 0 10px; opacity: .92; }
.vorschau-meldung { margin: 0; padding: 12px 16px; border-radius: 12px; background: #DDEAE3; color: #124938; font-weight: 700; }
/* d: Icon in der grünen „Schreibt uns“-Lasche als weißes Pappteil wie die Buchstaben */
html[data-schrift="d"] .f4k .fussnavi a.cta img.navi-pappe { filter: brightness(0) invert(1) drop-shadow(0 1px 1px rgba(20,14,8,.35)); }