/* =========================================================
   FAMILY NOMADS® — Vorlagen-Designsystem (templates.css)
   ---------------------------------------------------------
   ERGÄNZT styles.css der Startseite — ändert daran NICHTS.
   Definiert ausschließlich die zusätzlichen Bausteine, die
   die Unterseiten-Vorlagen verwenden. Es gelten dieselben
   Marken-Tokens (weiße Fläche, schwarze Typografie, Gelb-/
   Orange-Akzente, großzügige Abstände, Editorial-Stil).

   Gliederung
     0 · Status-Tokens & Utilities
     1 · Seitenkopf (fn-pagehero, Split & Dark) + Chips
     2 · Status-Pills + Ampelsystem
     3 · Listen (fn-list)
     4 · Länderseite: Key-Facts
     5 · E-Book / Produkt: Hero, Kaufbox, Kapitel, Vorschau
     6 · Stimmen (Reviews) + Zitat-Band
     7 · Hubs/Work: Stats, Angebote, Schritte
     8 · Kontakt: Wege, Formularkarte, Felder
     9 · Newsletter: Signup, Vorteile, Ausgaben
    10 · FAQ
    11 · Vorlagen-Übersicht (Showcase-Karten)
    12 · Kleinteile (Sterne, Bibliothek-Ergänzung)
    13 · Responsive
   ========================================================= */

/* =========================================================
   0 · STATUS-TOKENS & UTILITIES
   ========================================================= */
.fn{--fn-ok:#1f8a5b;--fn-ok-wash:#e9f5ee;--fn-ok-line:#bfe3cf;
    --fn-care:#d98a04;--fn-care-wash:#fdf1da;--fn-care-line:#f1d79a;
    --fn-stop:#cf4636;--fn-stop-wash:#fbeae7;--fn-stop-line:#ecc2bc;}

.fn-center{text-align:center;}
.fn-center .fn-head,.fn-maxw-prose{margin-left:auto;margin-right:auto;}
.fn-maxw-prose{max-width:62ch;}
.fn-mt{margin-top:clamp(18px,3vw,28px);}
.fn-eyebrow--center{display:flex;justify-content:center;}

.fn-grid--gap-lg{gap:clamp(28px,4vw,52px);}
.fn-grid--top{align-items:start;}

/* Editorial-Liste mit Marken-Häkchen */
.fn-list{display:grid;gap:11px;margin-top:18px;}
.fn-list li{position:relative;padding-left:30px;color:var(--ink-soft);font-size:1.02rem;line-height:1.5;}
.fn-list li::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:8px;
  border-left:3px solid var(--orange-signal);border-bottom:3px solid var(--orange-signal);
  transform:translateY(-2px) rotate(-45deg);border-radius:1px;}
.fn-section.deep .fn-list li{color:#cfc8bc;}

/* =========================================================
   1 · SEITENKOPF (fn-pagehero)
   Einheitlicher editorialer Kopf. Steht direkt unter dem
   gemeinsamen Header. Varianten: --split (Text + Bild),
   --dark (dunkler Pitch-Kopf).
   ========================================================= */
.fn-pagehero{padding:clamp(34px,5vw,66px) 0 clamp(28px,4vw,46px);}
.fn-pagehero__inner{max-width:64ch;}

.fn-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.82rem;font-weight:600;color:var(--ink-faint);margin-bottom:18px;}
.fn-crumbs a{color:var(--ink-faint);transition:color .15s;}
.fn-crumbs a:hover{color:var(--orange-signal);}
.fn-crumbs .sep{opacity:.55;}
.fn-crumbs .cur{color:var(--ink-soft);}

.fn-pagehero__eyebrow{display:inline-flex;align-items:center;gap:.6em;font-family:var(--font-head);font-weight:800;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-signal);}
.fn-pagehero__eyebrow::before{content:"";width:26px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--yellow),var(--orange-signal));}

.fn-pagehero h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2.4rem,5.6vw,4.2rem);line-height:1.0;letter-spacing:.005em;color:var(--ink);margin:16px 0 0;}
.fn-pagehero__lead{font-size:clamp(1.08rem,1.6vw,1.3rem);color:var(--ink-soft);line-height:1.55;margin-top:18px;max-width:60ch;}
.fn-pagehero__btns{display:flex;flex-wrap:wrap;gap:13px;margin-top:28px;}

/* Sprung-Chips */
.fn-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
.fn-chips a{display:inline-flex;align-items:center;font-family:var(--font-head);font-weight:700;font-size:.82rem;color:var(--ink-soft);background:#fff;border:1px solid var(--line-strong);padding:8px 15px;border-radius:var(--r-pill);transition:border-color .18s,color .18s,transform .18s;}
.fn-chips a:hover{border-color:var(--orange-dark);color:var(--orange-signal);transform:translateY(-2px);}

/* Split-Variante: Text + Bild */
.fn-pagehero--split .fn-pagehero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:center;}
.fn-pagehero__media{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3;}
.fn-pagehero__media .fn-ph{position:absolute;inset:0;}
.fn-pagehero__stamp{position:absolute;left:16px;bottom:16px;z-index:3;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);font-weight:800;font-size:.78rem;color:var(--ink);background:rgba(255,255,255,.92);backdrop-filter:blur(4px);padding:8px 14px;border-radius:var(--r-pill);box-shadow:var(--shadow-sm);}

/* Dunkle Variante (Pitch / Work with us / Ortsunabhängig) */
.fn-pagehero--dark{background:var(--ink);color:#f3efe7;}
.fn-pagehero--dark .fn-crumbs,.fn-pagehero--dark .fn-crumbs a{color:#a59e92;}
.fn-pagehero--dark .fn-crumbs a:hover{color:var(--yellow);}
.fn-pagehero--dark .fn-crumbs .cur{color:#cfc8bc;}
.fn-pagehero--dark h1{color:#fff;}
.fn-pagehero--dark .fn-pagehero__lead{color:#cfc8bc;}
.fn-pagehero--dark .fn-chips a{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#e7e2d8;}
.fn-pagehero--dark .fn-chips a:hover{border-color:var(--yellow);color:var(--yellow);}

/* =========================================================
   2 · STATUS-PILLS + AMPELSYSTEM
   ========================================================= */
.fn-status{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-head);font-weight:800;font-size:.82rem;padding:5px 12px 5px 10px;border-radius:var(--r-pill);border:1px solid var(--line);}
.fn-status .lamp{width:11px;height:11px;border-radius:50%;flex:none;box-shadow:0 0 0 3px rgba(0,0,0,.04);}
.fn-status small{font-weight:600;opacity:.7;font-size:.82em;}
.fn-status--go{background:var(--fn-ok-wash);border-color:var(--fn-ok-line);color:#176844;}
.fn-status--go .lamp{background:var(--fn-ok);}
.fn-status--care{background:var(--fn-care-wash);border-color:var(--fn-care-line);color:#8a5a02;}
.fn-status--care .lamp{background:var(--fn-care);}
.fn-status--stop{background:var(--fn-stop-wash);border-color:var(--fn-stop-line);color:#a4382b;}
.fn-status--stop .lamp{background:var(--fn-stop);}

/* Ampel-Raster (drei Stufen) */
.fn-ampel{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.fn-ampel__item{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 24px 22px;box-shadow:var(--shadow-sm);border-top:5px solid var(--line-strong);}
.fn-ampel__item .top{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.fn-ampel__item .lamp{width:18px;height:18px;border-radius:50%;flex:none;box-shadow:0 0 0 4px rgba(0,0,0,.04);}
.fn-ampel__item h3{font-size:1.1rem;margin:0;}
.fn-ampel__item p{color:var(--ink-soft);font-size:.94rem;line-height:1.55;}
.fn-ampel__item.go{border-top-color:var(--fn-ok);}
.fn-ampel__item.go .lamp{background:var(--fn-ok);}
.fn-ampel__item.care{border-top-color:var(--fn-care);}
.fn-ampel__item.care .lamp{background:var(--fn-care);}
.fn-ampel__item.stop{border-top-color:var(--fn-stop);}
.fn-ampel__item.stop .lamp{background:var(--fn-stop);}

/* =========================================================
   4 · LÄNDERSEITE: KEY-FACTS
   ========================================================= */
.fn-keyfacts{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden;align-self:start;}
.fn-keyfacts__row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 22px;border-bottom:1px dashed var(--line);}
.fn-keyfacts__row:last-child{border-bottom:none;}
.fn-keyfacts__row .k{display:inline-flex;align-items:center;gap:10px;font-size:.92rem;color:var(--ink-soft);font-weight:600;}
.fn-keyfacts__row .k .ic{font-size:1.05rem;}
.fn-keyfacts__row .v{font-family:var(--font-head);font-weight:800;font-size:.96rem;color:var(--ink);text-align:right;}

/* =========================================================
   5 · E-BOOK / PRODUKT
   ========================================================= */
.fn-ebook__hero{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(30px,5vw,60px);align-items:center;}
.fn-ebook__cover{position:relative;}
.fn-ebook__cover .fn-ph{aspect-ratio:3/4;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden;transform:rotate(-2deg);transition:transform .3s;}
.fn-ebook__cover:hover .fn-ph{transform:rotate(0);}
.fn-ebook__badge{position:absolute;z-index:5;top:-12px;left:-10px;background:var(--orange-signal);color:#fff;font-family:var(--font-head);font-weight:800;font-size:.74rem;letter-spacing:.04em;padding:9px 14px;border-radius:var(--r-pill);rotate:-6deg;box-shadow:var(--shadow-md);}
.fn-ebook__body h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2.1rem,4vw,3.3rem);line-height:1.02;letter-spacing:.005em;margin:12px 0 0;}
.fn-ebook__rating{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:.9rem;color:var(--ink-soft);}
.fn-ebook__meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.fn-ebook__meta span{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);font-weight:700;font-size:.8rem;color:var(--ink-soft);background:var(--paper-2);border:1px solid var(--line);padding:7px 13px;border-radius:var(--r-pill);}

/* Kaufbox */
.fn-buybox{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:24px 26px;box-shadow:var(--shadow-md);}
.fn-buybox__brand{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:800;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);}
.fn-buybox__brand .d{width:8px;height:8px;border-radius:50%;background:var(--yellow);flex:none;}
.fn-buybox__price{display:flex;align-items:baseline;gap:12px;margin-top:14px;}
.fn-buybox__price .now{font-family:var(--font-display);font-weight:400;font-size:2.6rem;color:var(--ink);line-height:1;}
.fn-buybox__price .was{font-size:1.1rem;color:var(--ink-faint);text-decoration:line-through;}
.fn-buybox__price .tax{font-size:.8rem;color:var(--ink-faint);margin-left:auto;}
.fn-buybox__list{display:grid;gap:10px;margin:18px 0 20px;}
.fn-buybox__list li{display:flex;gap:11px;font-size:.94rem;color:var(--ink-soft);line-height:1.45;}
.fn-buybox__list .ck{color:var(--fn-ok);font-weight:800;flex:none;}
.fn-buybox__note{margin-top:14px;font-size:.8rem;color:var(--ink-faint);text-align:center;}

/* Affiliate-Ergänzungen (additiv · v1.7.0) ---------------------------------- */
/* Produkt-/Empfehlungs-Raster aus Kaufboxen */
.fn-aff-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;align-items:start;}
.fn-aff-grid .fn-buybox{display:flex;flex-direction:column;}
.fn-aff-note{margin-top:12px;font-size:.78rem;color:var(--ink-faint);}
/* Foto-Seitenkopf (dunkel, mit echtem Foto + Overlay) — additiv v1.7.0 */
.fn-pagehero--photo{position:relative;color:#f3efe7;background:var(--ink);overflow:hidden;}
.fn-pagehero--photo .fn-pagehero__bg{position:absolute;inset:0;z-index:0;}
.fn-pagehero--photo .fn-pagehero__bg img{width:100%;height:100%;object-fit:cover;}
.fn-pagehero--photo::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,16,10,.5),rgba(20,16,10,.84));}
.fn-pagehero--photo .fn-wrap{position:relative;z-index:2;}
.fn-pagehero--photo .fn-crumbs,.fn-pagehero--photo .fn-crumbs a{color:#cfc8bc;}
.fn-pagehero--photo .fn-crumbs a:hover{color:var(--yellow);}
.fn-pagehero--photo .fn-crumbs .cur{color:#eee;}
.fn-pagehero--photo h1{color:#fff;}
.fn-pagehero--photo .fn-pagehero__lead{color:#e7e2d8;}
.fn-pagehero--photo .fn-ebook__meta span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#e7e2d8;}

/* Eingebettetes Genki-Preisrechner-Widget */
.fn-embed{width:100%;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);background:#fff;}
.fn-embed iframe{display:block;width:100%;min-height:560px;border:0;}
.fn-embed__cap{font-size:.82rem;color:var(--ink-faint);margin-top:10px;text-align:center;}

/* Selbstgehostetes Video (kein Grading) — additiv */
.fn-videobox{margin:24px 0 0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);background:#000;}
.fn-videobox video{display:block;width:100%;height:auto;}
.fn-affbanner{display:block;margin:24px auto 0;max-width:728px;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease;}
.fn-affbanner:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.fn-affbanner img{display:block;width:100%;height:auto;}

/* Kapitel */
.fn-chapters{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:chap;}
.fn-chapter{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:22px 22px 20px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;}
.fn-chapter:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.fn-chapter::before{counter-increment:chap;content:counter(chap,decimal-leading-zero);display:block;font-family:var(--font-display);font-weight:400;font-size:1.5rem;color:var(--yellow);margin-bottom:8px;}
.fn-chapter h3{font-size:1.06rem;margin:0;}
.fn-chapter p{font-size:.9rem;color:var(--ink-soft);margin-top:6px;line-height:1.5;}

/* =========================================================
   6 · STIMMEN (REVIEWS) + ZITAT-BAND
   ========================================================= */
.fn-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.fn-qcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:13px;}
.fn-qcard p{color:var(--ink);font-size:.98rem;line-height:1.55;flex:1;text-wrap:pretty;}
.fn-qcard .who{display:flex;align-items:center;gap:12px;}
.fn-qcard .who .av{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:var(--font-head);font-weight:800;font-size:.82rem;color:#23170a;background:linear-gradient(135deg,var(--yellow),var(--orange-dark));}
.fn-qcard .who b{display:block;font-family:var(--font-head);font-size:.92rem;color:var(--ink);}
.fn-qcard .who span span{font-size:.82rem;color:var(--ink-faint);font-weight:500;}

/* Zitat-Band (Pull-Quote) */
.fn-quoteband{position:relative;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(30px,5vw,52px);text-align:center;max-width:880px;margin:0 auto;overflow:hidden;}
.fn-quoteband .mark{position:absolute;top:6px;left:28px;font-family:var(--font-display);font-size:5rem;color:var(--yellow);line-height:1;opacity:.6;}
.fn-quoteband blockquote{position:relative;margin:0;font-family:var(--font-head);font-weight:700;font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.35;color:var(--ink);text-wrap:balance;}
.fn-quoteband cite{display:block;margin-top:16px;font-style:normal;font-size:.88rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--orange-signal);}

/* =========================================================
   7 · STATS · ANGEBOTE · SCHRITTE
   ========================================================= */
.fn-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.fn-statbig{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 22px;box-shadow:var(--shadow-sm);text-align:center;}
.fn-statbig .v{font-family:var(--font-display);font-weight:400;font-size:clamp(1.7rem,3vw,2.4rem);color:var(--ink);line-height:1;}
.fn-statbig .v em{font-style:normal;color:var(--orange-signal);}
.fn-statbig .k{font-size:.86rem;color:var(--ink-soft);margin-top:8px;font-weight:600;}

/* Angebote / Werte / Hinweise */
.fn-offers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.fn-offer{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 26px 24px;box-shadow:var(--shadow-sm);transition:transform .22s,box-shadow .22s,border-color .22s;}
.fn-offer:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--line-strong);}
.fn-offer .ic{width:52px;height:52px;border-radius:14px;background:var(--accent-wash);display:grid;place-items:center;font-size:1.5rem;margin-bottom:14px;}
.fn-offer h3{font-size:1.14rem;}
.fn-offer p{color:var(--ink-soft);font-size:.95rem;margin-top:8px;line-height:1.55;}
.fn-offer b{color:var(--ink);}

/* Schritte (Prozess) — Container kann hell oder dunkel sein */
.fn-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:fnstep;}
.fn-step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 22px 22px;box-shadow:var(--shadow-sm);}
.fn-step::before{counter-increment:fnstep;content:counter(fnstep);display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--yellow),var(--orange-dark));color:#23170a;font-family:var(--font-display);font-weight:400;font-size:1.3rem;margin-bottom:14px;}
.fn-step h3{font-size:1.08rem;margin:0;}
.fn-step p{color:var(--ink-soft);font-size:.92rem;margin-top:6px;line-height:1.5;}
.fn-section.deep .fn-step{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);}
.fn-section.deep .fn-step h3{color:#fff;}
.fn-section.deep .fn-step p{color:#cfc8bc;}

/* =========================================================
   8 · KONTAKT
   ========================================================= */
.fn-contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,52px);align-items:start;}
.fn-contact__methods{display:grid;gap:14px;}
.fn-method{display:grid;grid-template-columns:auto 1fr;gap:15px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px;box-shadow:var(--shadow-sm);}
.fn-method .ic{width:46px;height:46px;border-radius:13px;background:var(--accent-wash);display:grid;place-items:center;font-size:1.3rem;}
.fn-method h3{font-size:1.04rem;margin:0;}
.fn-method p{font-size:.9rem;color:var(--ink-soft);margin-top:4px;line-height:1.5;}
.fn-method a{color:var(--orange-signal);font-weight:700;}
.fn-method a:hover{text-decoration:underline;}

.fn-formcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(24px,3vw,36px);box-shadow:var(--shadow-md);}

/* Formularfelder */
.fn-field{display:grid;gap:7px;margin-bottom:16px;}
.fn-field label{font-family:var(--font-head);font-weight:800;font-size:.82rem;color:var(--ink);}
.fn-field .req{color:var(--orange-signal);}
.fn-field input,.fn-field textarea,.fn-field select{width:100%;padding:14px 16px;border-radius:var(--r-md);border:2px solid var(--line-strong);font-size:1rem;font-family:var(--font-body);background:#fff;color:var(--ink);transition:border-color .18s,box-shadow .18s;}
.fn-field textarea{min-height:150px;resize:vertical;line-height:1.5;}
.fn-field input:focus,.fn-field textarea:focus,.fn-field select:focus{outline:none;border-color:var(--orange-dark);box-shadow:0 0 0 4px rgba(250,135,6,.12);}
.fn-field__row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.fn-check{display:flex;align-items:flex-start;gap:11px;font-size:.86rem;color:var(--ink-soft);margin:4px 0 18px;}
.fn-check input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--orange-dark);}
.fn-check a{color:var(--orange-signal);text-decoration:underline;}

/* =========================================================
   9 · NEWSLETTER
   ========================================================= */
.fn-signup{background:linear-gradient(150deg,var(--yellow-light),#fff 62%);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(32px,5vw,60px);box-shadow:var(--shadow-md);text-align:center;}
.fn-signup h2{font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,4.4vw,3.3rem);line-height:1.02;letter-spacing:.005em;margin-top:10px;}
.fn-signup > p{color:var(--ink-soft);font-size:1.1rem;margin:14px auto 0;max-width:56ch;line-height:1.55;}
.fn-signup .fn-form{max-width:520px;margin:26px auto 0;}

/* Newsletter: Honeypot (versteckt) + Statusmeldung */
.fn-hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden;}
.fn-form__msg{font-size:.92rem;line-height:1.4;margin:2px 0 0;font-weight:600;}
.fn-form__msg:empty{display:none;}
.fn-form__msg.is-ok{color:#1f7a4d;}
.fn-form__msg.is-err{color:#c0392b;}

.fn-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.fn-benefit{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow-sm);}
.fn-benefit .ic{width:50px;height:50px;border-radius:14px;background:var(--accent-wash);display:grid;place-items:center;font-size:1.4rem;margin-bottom:14px;}
.fn-benefit h3{font-size:1.1rem;}
.fn-benefit p{color:var(--ink-soft);font-size:.93rem;margin-top:7px;line-height:1.5;}

.fn-issues{display:grid;gap:14px;}
.fn-issue{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:18px 22px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;}
.fn-issue:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.fn-issue .num{font-family:var(--font-head);font-weight:800;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-signal);white-space:nowrap;}
.fn-issue h3{font-family:var(--font-head);font-weight:800;font-size:1.04rem;margin:0;}
.fn-issue p{font-size:.88rem;color:var(--ink-soft);margin-top:3px;}
.fn-issue .date{font-size:.8rem;color:var(--ink-faint);font-weight:600;white-space:nowrap;}

/* =========================================================
   10 · FAQ (ohne JS, <details>)
   ========================================================= */
.fn-faq{display:grid;gap:12px;max-width:880px;margin:0 auto;}
.fn-faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-sm);overflow:hidden;}
.fn-faq summary{list-style:none;cursor:pointer;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--font-head);font-weight:800;font-size:1.02rem;color:var(--ink);}
.fn-faq summary::-webkit-details-marker{display:none;}
.fn-faq summary .pm{flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent-wash);color:var(--orange-signal);display:grid;place-items:center;font-size:1.2rem;line-height:1;transition:transform .2s;}
.fn-faq details[open] summary .pm{transform:rotate(45deg);}
.fn-faq details > div{padding:0 22px 20px;color:var(--ink-soft);font-size:.96rem;line-height:1.6;}
.fn-faq details > div a{color:var(--orange-signal);text-decoration:underline;}

/* =========================================================
   11 · VORLAGEN-ÜBERSICHT (Showcase-Karten)
   ========================================================= */
.fn-tplgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.fn-tplcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .22s,box-shadow .22s,border-color .22s;}
.fn-tplcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--line-strong);}
.fn-tplcard__thumb{position:relative;aspect-ratio:16/11;background:linear-gradient(150deg,#fffdf8,#f1eadf);border-bottom:1px solid var(--line);display:grid;place-items:center;}
.fn-tplcard__big{font-family:var(--font-display);font-weight:400;font-size:3rem;color:var(--orange-dark);opacity:.85;}
.fn-tplcard__thumb .tag{position:absolute;top:12px;left:12px;font-family:var(--font-head);font-weight:800;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:#23170a;background:linear-gradient(135deg,var(--yellow),var(--orange-dark));padding:6px 11px;border-radius:var(--r-pill);}
.fn-tplcard__body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1;}
.fn-tplcard__body h3{font-size:1.12rem;}
.fn-tplcard__body p{color:var(--ink-soft);font-size:.9rem;flex:1;line-height:1.5;text-wrap:pretty;}
.fn-tplcard__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;}
.fn-tplcard__foot .fn-link .ar{transition:transform .2s;}
.fn-tplcard:hover .fn-tplcard__foot .fn-link .ar{transform:translateX(4px);}
.fn-tplcard__foot .file{font-family:var(--font-head);font-weight:600;font-size:.72rem;color:var(--ink-faint);}

/* =========================================================
   12 · KLEINTEILE
   ========================================================= */
/* Sterne-Bewertung */
.stars{color:var(--orange-dark);letter-spacing:2px;font-size:1rem;}

/* Bibliothek-Ergänzung: „kommt bald"-Karte + Freebie-Preis */
.fn-prod.soon{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;padding:26px;border-style:dashed;background:var(--paper-2);}
.fn-prod.soon .plus{font-family:var(--font-display);font-weight:400;font-size:2.4rem;color:var(--yellow);line-height:1;}
.fn-prod.soon h3{font-size:1.1rem;}
.fn-prod.soon p{color:var(--ink-soft);font-size:.9rem;}
.fn-prod__price.free{color:var(--fn-ok);}

/* Negative Aufzählung (Vor-/Nachteile) */
.fn-buybox__list .ck--neg{color:var(--fn-stop);}

/* Vergleichstabelle (Internet, Kreditkarten, Banking, LLC …) */
.fn-compare{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);}
.fn-compare th,.fn-compare td{padding:15px 18px;text-align:left;font-size:.92rem;border-bottom:1px solid var(--line);vertical-align:middle;}
.fn-compare thead th{background:var(--ink);color:#fff;font-family:var(--font-head);font-weight:800;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;}
.fn-compare tbody tr:last-child td{border-bottom:none;}
.fn-compare tbody tr:hover{background:var(--paper-2);}
.fn-compare td:first-child,.fn-compare th:first-child{font-family:var(--font-head);font-weight:800;color:var(--ink);}
.fn-compare thead th:first-child{color:#fff;}
.fn-compare .yes{color:var(--fn-ok);font-weight:800;}
.fn-compare .no{color:var(--fn-stop);font-weight:800;}
.fn-compare__wrap{overflow-x:auto;}

/* Kategorisierte Tool-/App-Liste (Apps & Tools, Navigation) */
.fn-toollist{display:grid;gap:14px;}
.fn-toolrow{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:16px 20px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;}
.fn-toolrow:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.fn-toolrow__ic{width:48px;height:48px;border-radius:13px;background:var(--accent-wash);display:grid;place-items:center;font-size:1.4rem;flex:none;}
.fn-toolrow h3{font-family:var(--font-head);font-weight:800;font-size:1.04rem;margin:0;}
.fn-toolrow p{font-size:.88rem;color:var(--ink-soft);margin-top:2px;}
.fn-toolrow__tag{font-family:var(--font-head);font-weight:700;font-size:.72rem;color:var(--ink-faint);background:var(--paper-3);padding:6px 12px;border-radius:var(--r-pill);white-space:nowrap;}
.fn-toolrow__tag.free{color:#176844;background:var(--fn-ok-wash);}

/* =========================================================
   14 · BLUEPRINT-DOKU (nur Elementor-Blueprint-Seite)
   Bausteine zur Visualisierung der späteren WordPress-/
   Elementor-Struktur: Container-Bäume, Widget-Tags, Spec-Zeilen.
   ========================================================= */
/* Doku-Sprungnavigation (Inhalt der Blueprint-Seite) */
.fn-docnav{position:sticky;top:84px;align-self:start;display:grid;gap:4px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow-sm);}
.fn-docnav b{font-family:var(--font-head);font-weight:800;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);padding:4px 10px 8px;}
.fn-docnav a{display:flex;gap:10px;align-items:baseline;font-family:var(--font-head);font-weight:700;font-size:.9rem;color:var(--ink-soft);padding:8px 10px;border-radius:var(--r-sm);transition:background .15s,color .15s;}
.fn-docnav a:hover{background:var(--paper-2);color:var(--orange-signal);}
.fn-docnav a .n{font-family:var(--font-display);font-weight:400;color:var(--yellow);font-size:1rem;min-width:1.4em;}
.fn-doc{display:grid;grid-template-columns:248px 1fr;gap:clamp(24px,3vw,48px);align-items:start;}

/* Container-/Struktur-Baum */
.fn-tree{background:var(--ink);color:#e7e2d8;border-radius:var(--r-lg);padding:22px 24px;box-shadow:var(--shadow-md);overflow-x:auto;font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;font-size:.86rem;line-height:1.9;}
.fn-tree .row{white-space:pre;}
.fn-tree .c{color:#ffd36b;font-weight:600;}        /* Container */
.fn-tree .w{color:#8fd0ff;}                          /* Widget */
.fn-tree .d{color:#9ff0c4;}                          /* Dynamic / Loop */
.fn-tree .m{color:#8b8579;}                          /* Meta / Kommentar */
.fn-tree .g{color:#f4a36b;font-weight:600;}          /* Global Block */

/* Inline Widget-/Element-Tags */
.fn-wtags{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px;}
.fn-wtag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);font-weight:700;font-size:.72rem;color:var(--ink-soft);background:#fff;border:1px solid var(--line-strong);padding:5px 11px;border-radius:var(--r-pill);}
.fn-wtag::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--ink-faint);}
.fn-wtag.is-container::before{background:#f0a64a;}
.fn-wtag.is-widget::before{background:#5aa9ec;}
.fn-wtag.is-dynamic::before{background:var(--fn-ok);}
.fn-wtag.is-global::before{background:var(--orange-signal);}

/* Spec-Zeilen (Definition list als Karte) */
.fn-spec{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden;}
.fn-spec__row{display:grid;grid-template-columns:200px 1fr;gap:18px;padding:14px 20px;border-bottom:1px solid var(--line);}
.fn-spec__row:last-child{border-bottom:none;}
.fn-spec__row dt,.fn-spec__row .k{font-family:var(--font-head);font-weight:800;font-size:.86rem;color:var(--ink);margin:0;}
.fn-spec__row dd,.fn-spec__row .v{margin:0;font-size:.92rem;color:var(--ink-soft);line-height:1.5;}
.fn-spec__row code,.fn-codeword{font-family:"SFMono-Regular",Consolas,Menlo,monospace;font-size:.86em;background:var(--paper-3);border:1px solid var(--line);border-radius:6px;padding:1px 7px;color:var(--orange-dark);white-space:nowrap;}

/* Schritt-/Reihenfolge-Liste mit großer Nummer (Umsetzung) */
.fn-order{display:grid;gap:14px;counter-reset:ord;}
.fn-orderrow{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:20px 22px;box-shadow:var(--shadow-sm);}
.fn-orderrow::before{counter-increment:ord;content:counter(ord);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--yellow),var(--orange-dark));color:#23170a;font-family:var(--font-display);font-weight:400;font-size:1.3rem;}
.fn-orderrow h3{font-size:1.06rem;margin:0;}
.fn-orderrow p{font-size:.92rem;color:var(--ink-soft);margin-top:4px;line-height:1.55;}

/* Legende (Farbcodes im Baum) */
.fn-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;}
.fn-legend span{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:700;font-size:.78rem;color:var(--ink-soft);}
.fn-legend span::before{content:"";width:11px;height:11px;border-radius:3px;}
.fn-legend .lc::before{background:#f0a64a;}
.fn-legend .lw::before{background:#5aa9ec;}
.fn-legend .ld::before{background:var(--fn-ok);}
.fn-legend .lg::before{background:var(--orange-signal);}

/* =========================================================
   13 · RESPONSIVE
   ========================================================= */
@media(max-width:980px){
  .fn-pagehero--split .fn-pagehero__grid{grid-template-columns:1fr;}
  .fn-pagehero__media{aspect-ratio:16/9;}
  .fn-ebook__hero{grid-template-columns:1fr;}
  .fn-ebook__cover{max-width:300px;margin:0 auto;}
  .fn-contact{grid-template-columns:1fr;}
  .fn-tplgrid{grid-template-columns:repeat(2,1fr);}
  .fn-steps{grid-template-columns:repeat(2,1fr);}
  .fn-stats{grid-template-columns:repeat(2,1fr);}
  .fn-doc{grid-template-columns:1fr;}
  .fn-docnav{position:static;display:flex;flex-wrap:wrap;}
}
@media(max-width:760px){
  .fn-ampel,.fn-offers,.fn-quotes,.fn-benefits,.fn-chapters{grid-template-columns:1fr;}
  .fn-field__row{grid-template-columns:1fr;}
  .fn-issue{grid-template-columns:auto 1fr;}
  .fn-issue .date{display:none;}
  .fn-buybox__price{flex-wrap:wrap;}
  .fn-buybox__price .tax{margin-left:0;}
  .fn-toolrow{grid-template-columns:auto 1fr;}
  .fn-toolrow__tag{display:none;}
}
@media(max-width:560px){
  .fn-tplgrid,.fn-steps,.fn-stats{grid-template-columns:1fr;}
}