/* follow4.life – Stilübersetzung „Filz auf Pappe“ (Entwurf 15.11.2026)
   Nur Grafikstil; Aufbau, Texte, Funktionen unverändert. Wird NACH dem Original-CSS geladen.
   Regeln: Fläche statt Strich · Schichten sichtbar · Knopf nur wo er hält · Handschnitt · lesbar/bedienbar · leicht. */

:root {
  --naht: rgba(18,73,56,.55);          /* Stichfarbe dunkelgrün */
  --naht-hell: rgba(255,248,236,.75);  /* Stich auf dunklem Filz */
  --filz-schatten: 0 1px 0 rgba(255,250,240,.6) inset, 0 2px 2px rgba(60,40,20,.18), 0 8px 14px -6px rgba(60,40,20,.30);
}

/* 1 · Material: echte Filz- und Pappstruktur statt Sprenkelmuster (Multiply-Kacheln, je ca. 40 KB) */
.f4k, .f4k * { background-blend-mode: multiply; }
.fk-papier, .f4k .buehne { background-image: url("/assets/stil/filzcreme-grau.webp"); background-size: 256px; }
.f4k .blatt, .f4k .band, .fk-karte, .f4k .fussnavi { background-image: url("/assets/stil/filzcreme-grau.webp"); background-size: 256px; }
.f4k .kartonbahn { background-color: #D9A874; background-image: url("/assets/stil/karton-grau.webp"); background-size: 320px; }
.f4k .karton-fuss { background: #E2BE92 url("/assets/stil/karton-grau.webp") repeat; background-size: 320px; background-blend-mode: multiply; }
.fk-btn, .f4k .fussnavi a.cta, .fk-play, .fk-nummer, .f4k .ankuendigung, .f4k .siegel, .fk-rahmen, .fk-fleck, .f4k .sonne, .f4k .huegel, .f4k .scheibe { background-image: url("/assets/stil/filz-grau.webp"); background-size: 192px; }

/* 2 · Kanten: Handschnitt mit Bogenkante statt gerissenem Papier; Stichnaht knapp darunter */
.filz-kante { position: absolute; left: 0; right: 0; height: 18px; pointer-events: none; z-index: 1;
  background: inherit; background-blend-mode: multiply;
  -webkit-mask: radial-gradient(circle at 14px 18px, #000 13.5px, transparent 14px) 0 0 / 28px 18px repeat-x;
          mask: radial-gradient(circle at 14px 18px, #000 13.5px, transparent 14px) 0 0 / 28px 18px repeat-x;
  filter: drop-shadow(0 -3px 2px rgba(60,40,20,.12)); }
.filz-kante.oben { top: -17px; }
.filz-kante.unten { bottom: -17px; transform: scaleY(-1); }
.f4k .blatt::before, .f4k .band::before, .f4k .kartonbahn::before, .f4k .band::after {
  content: ""; position: absolute; left: 0; right: 0; top: 7px; border-top: 2px dashed var(--naht); opacity: .45; pointer-events: none; z-index: 1; }
.f4k .band::after { top: auto; bottom: 7px; }
.f4k .kartonbahn::before { border-top-color: rgba(255,244,226,.9); opacity: .7; }

/* 3 · Karten: Filzbogen mit umlaufender Stichnaht, weicher kurzer Schatten statt Kastenschatten */
.fk-karte { box-shadow: var(--filz-schatten); }
.fk-karte::after, .f4k .ankuendigung::after { content: ""; position: absolute; inset: 9px; border: 2px dashed var(--naht); opacity: .5;
  border-radius: 26px 22px 30px 24px / 24px 28px 22px 26px; pointer-events: none; }
.f4k .ankuendigung { box-shadow: var(--filz-schatten); }

/* 4 · Messingknopf: echte Musterklammer (Bild, 48 px, ca. 3 KB) statt Farbverlauf */
.fk-klammer { width: 16px; height: 16px; background: url("/assets/stil/ui-messing.webp") center / contain no-repeat; box-shadow: none; filter: drop-shadow(0 1px 1px rgba(60,40,20,.45)); }

/* 5 · Buttons: gelbes Filzstück auf grünem Filzstück, Naht, Knopf links – Text bleibt echter HTML-Text */
.fk-btn { padding-left: 46px !important; border-radius: 22px 18px 24px 16px / 18px 24px 16px 22px;
  box-shadow: 0 0 0 4px #124938, 0 1px 0 4px rgba(255,250,240,.25), 0 4px 3px 3px rgba(60,40,20,.22), 0 12px 16px -6px rgba(60,40,20,.35);
  margin: 4px; }
.fk-btn::before { content: ""; position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; translate: 0 -50%;
  background: url("/assets/stil/ui-messing.webp") center / contain no-repeat; filter: drop-shadow(0 1px 1px rgba(60,40,20,.45)); }
.fk-btn::after { content: ""; position: absolute; inset: 5px; border: 2px dashed var(--naht); border-radius: inherit; opacity: .75; pointer-events: none; }
.fk-btn:hover { transform: translateY(-1px) rotate(-.5deg);
  box-shadow: 0 0 0 4px #124938, 0 6px 4px 3px rgba(60,40,20,.22), 0 16px 20px -6px rgba(60,40,20,.38); }
.fk-btn:active { transform: translateY(3px); background-color: #E9A00F;
  box-shadow: 0 0 0 4px #124938, 0 1px 1px 3px rgba(60,40,20,.25); }
.fk-btn-leise { background-color: #FFF8EF; background-image: url("/assets/stil/filzcreme-grau.webp");
  box-shadow: 0 0 0 4px #124938, 0 4px 3px 3px rgba(60,40,20,.18), 0 12px 16px -6px rgba(60,40,20,.3); }
.fk-btn-leise:active { background-color: #F3E6D4; }
.fk-btn[disabled], .fk-btn[aria-disabled="true"] { filter: saturate(.6); }

/* 6 · Formularfelder: in den Filz eingelassene Mulde mit dünner Kartonkante, Fokus bleibt deutlich */
.fk-eingabe { background-color: #F4E3D0; background-image: url("/assets/stil/filzsand-grau.webp"); background-size: 256px;
  border: 2px solid #E2C9A8; box-shadow: inset 0 2px 4px rgba(60,40,20,.22), 0 1px 0 rgba(255,250,240,.9); }
.f4k select.fk-eingabe { background-image: url("/assets/stil/ui-chevron.webp"), url("/assets/stil/filzsand-grau.webp");
  background-position: calc(100% - 16px) 52%, 0 0; background-size: 18px 18px, 256px; background-repeat: no-repeat, repeat; background-blend-mode: normal, multiply; }

/* 7 · Icons: Filz-Ausschnitte auf Scheiben (Bilder, je 3–9 KB) statt Linien-Icons */
.f4k .scheibe { background: none !important; box-shadow: none; }
.f4k .scheibe img.filz-icon { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 2px rgba(60,40,20,.22)) drop-shadow(0 6px 6px rgba(60,40,20,.12)); }
img.filz-haken { width: 26px; height: 26px; flex: none; filter: drop-shadow(0 1px 1px rgba(60,40,20,.25)); }
img.filz-pfeil { width: 20px; height: 20px; }

/* 8 · Untere Navigation: Filzleiste mit Stichkante, Icons als Filzscheiben, „Schreibt uns“ als Filzlasche */
.f4k .fussnavi { border-top: 0; box-shadow: 0 -2px 0 rgba(255,250,240,.9), 0 -8px 16px -8px rgba(60,40,20,.35); }
.f4k .fussnavi::before { content: ""; position: absolute; left: 6px; right: 6px; top: 5px; border-top: 2px dashed var(--naht); opacity: .45; }
.f4k .fussnavi a img.navi-filz { width: 38px; height: 38px; display: block; filter: drop-shadow(0 1.5px 1.5px rgba(60,40,20,.3)); }
.f4k .fussnavi a.cta { position: relative; box-shadow: 0 0 0 3px #124938, 0 3px 4px 2px rgba(60,40,20,.25); margin: 3px; }
.f4k .fussnavi a.cta::after { content: ""; position: absolute; inset: 4px; border: 1.5px dashed var(--naht); border-radius: 12px 10px 13px 9px; opacity: .7; pointer-events: none; }
.f4k .fussnavi a.cta img.navi-filz { width: 30px; height: 30px; }
.f4k .fussnavi a:active img.navi-filz { transform: translateY(1px); filter: drop-shadow(0 .5px .5px rgba(60,40,20,.3)); }

/* 9 · Kleine Teile: Play-Knopf, Nummern, FAQ-Plus, Chips, Pillen, Stempel */
.fk-play { background: url("/assets/stil/ui-play.webp") center / contain no-repeat !important; border-radius: 50%; box-shadow: none; filter: drop-shadow(0 3px 3px rgba(60,40,20,.35)); }
.fk-play::before { display: none; }
.fk-nummer { box-shadow: 0 0 0 3px #124938, 0 3px 4px 2px rgba(60,40,20,.22); position: relative; }
.fk-nummer::after { content: ""; position: absolute; inset: 4px; border: 1.5px dashed var(--naht); border-radius: 50%; opacity: .6; }
.f4k details.faq summary::after { background: #F8AF15 url("/assets/stil/filz-grau.webp"); background-blend-mode: multiply; box-shadow: 0 0 0 2.5px #124938, 0 2px 3px 1px rgba(60,40,20,.22); }
.f4k .pille, .fk-video-label { background-image: url("/assets/stil/filzsand-grau.webp"); box-shadow: inset 0 0 0 1.5px rgba(18,73,56,.25), 0 1px 2px rgba(60,40,20,.2); }
.fk-chip { background-image: url("/assets/stil/filzcreme-grau.webp"); box-shadow: 0 0 0 2px #E2C9A8 inset, 0 2px 3px rgba(60,40,20,.15); }
.fk-chip:has(input:checked) { box-shadow: 0 0 0 2.5px #124938 inset, 0 2px 3px rgba(60,40,20,.2); }
.fk-stempel { background: #F6DEDF url("/assets/stil/filz-grau.webp"); background-size: 160px; background-blend-mode: multiply; border-style: dashed; box-shadow: 0 2px 3px rgba(60,40,20,.2); }
.fk-rahmen { box-shadow: var(--filz-schatten); }
.fk-link { text-decoration-style: dashed; text-decoration-thickness: 2.5px; }
.f4k .ablauf::before { border-top-color: rgba(18,73,56,.45); }

/* Vorschau-Hinweis (nur Vorschau, nicht Teil des Entwurfs) */
.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; letter-spacing: .02em; }
.vorschau-meldung { margin: 0; padding: 12px 16px; border-radius: 12px; background: #DDEAE3; color: #124938; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .fk-btn:hover { transform: none; } }
.f4k .zeichen { filter: drop-shadow(0 1px 0 rgba(255,250,240,.7)) drop-shadow(0 1.5px 1.5px rgba(60,40,20,.35)); }