/* FaNetwork-Theming für atelier-cms (Deployment DOMAIN_ID=900).
   Eigener Namespace fn-* – unabhängig vom MA-Designsystem. */
:root {
  --fn-wine: #800000;
  --fn-wine-dark: #660000;
  --fn-dark: #1e293b;
  --fn-soft: #475569;
  --fn-muted: #64748b;
  --fn-bg: #f8fafc;
  --fn-line: #e2e8f0;
  --fn-red-50: #fef2f2;
  --fn-red-100: #fee2e2;
  --fn-red-200: #fecaca;
}
.fn-wrap { max-width: 1440px; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }
@media (min-width: 640px) { .fn-wrap { padding-left: 2rem; padding-right: 2rem; } }

/* ---------- TopBar ---------- */
.fn-topbar { background: var(--fn-bg); border-bottom: 1px solid var(--fn-line); font-size: 0.75rem; color: var(--fn-soft); }
.fn-topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.fn-topbar-claim { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; letter-spacing: 0.02em; }
.fn-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--fn-wine); display: inline-block; }
.fn-topbar-links { display: flex; align-items: center; gap: 1.5rem; }
.fn-topbar-links a { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 500; color: inherit; text-decoration: none; }
.fn-topbar-links a:hover { color: var(--fn-wine); }
.fn-sep { color: #cbd5e1; }
@media (max-width: 767px) { .fn-topbar-in { flex-direction: column; } }

/* ---------- Header ---------- */
.global-section-header { margin: 0; }
.global-section-header .fn-shell { position: fixed; inset: 0 0 auto; z-index: 50; background: rgba(247,249,251,0.95); backdrop-filter: blur(8px); box-shadow: 0 1px 8px rgba(30,41,59,0.04); }
.global-section-header + main { padding-top: 7rem; }
.fn-header { position: static; background: rgba(255,255,255,0.95); border-bottom: 1px solid #f1f5f9; }
.fn-header-bar { height: 5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.fn-logo img { height: 2.25rem; width: auto; }
.fn-nav { display: none; align-items: center; gap: 2rem; }
@media (min-width: 1280px) { .fn-nav { display: flex; } }
.fn-nav a { font-size: 0.875rem; font-weight: 500; color: #334155; text-decoration: none; }
.fn-nav a:hover { color: var(--fn-wine); }
.fn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; background: var(--fn-wine); color: #fff !important; text-decoration: none !important; font-weight: 700; border-radius: 0.5rem; }
.fn-btn:hover { background: var(--fn-wine-dark); color: #fff !important; text-decoration: none !important; }
.fn-btn-md { font-size: 0.875rem; padding: 0.625rem 1.5rem; }
.fn-btn-lg { font-size: 1rem; padding: 1rem 1.75rem; }
.fn-btn-ghost { background: #fff; color: var(--fn-dark) !important; border: 1px solid #cbd5e1; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.fn-btn-ghost:hover { background: var(--fn-bg); color: var(--fn-dark) !important; }

/* ---------- Hero ---------- */
.fn-hero { background: #fff; border-bottom: 1px solid #f1f5f9; padding: 5rem 0 6rem; }
.fn-hero-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .fn-hero-grid { grid-template-columns: 7fr 5fr; gap: 4rem; } }
.fn-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.875rem; border-radius: 9999px; background: var(--fn-red-50); color: var(--fn-wine); border: 1px solid var(--fn-red-200); font-size: 0.75rem; font-weight: 600; }
.fn-pulse { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--fn-wine); animation: fnpulse 2s infinite; }
@keyframes fnpulse { 50% { opacity: 0.4; } }
.fn-h1 { font-size: 2.25rem; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; color: var(--fn-dark); margin: 1.25rem 0 0; }
@media (min-width: 1024px) { .fn-h1 { font-size: 3rem; } }
.fn-lead { font-size: 1.125rem; line-height: 1.75; color: var(--fn-soft); margin-top: 1.25rem; }
.fn-cta-row { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.fn-trust { margin-top: 2rem; padding-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; font-size: 0.75rem; font-weight: 500; color: var(--fn-soft); list-style: none; padding-left: 0; }
.fn-trust li { display: inline-flex; align-items: center; gap: 0.375rem; }
.fn-check { color: var(--fn-wine); font-weight: 700; }
.fn-guar { background: rgba(255,255,255,0.9); border: 1px solid rgba(226,232,240,0.8); border-radius: 1rem; padding: 1.5rem; box-shadow: 0 10px 30px rgba(30,41,59,0.08); display: flex; flex-direction: column; gap: 1rem; }
.fn-guar-card { display: flex; gap: 0.875rem; align-items: flex-start; background: var(--fn-bg); border: 1px solid rgba(226,232,240,0.6); border-radius: 0.75rem; padding: 1rem; }
.fn-guar-ic { width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; background: var(--fn-red-100); color: var(--fn-wine); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 20px; }
.fn-guar-card h3 { font-size: 0.875rem; font-weight: 700; color: var(--fn-dark); margin: 0; }
.fn-guar-card p { font-size: 0.75rem; color: var(--fn-soft); margin: 0.25rem 0 0; line-height: 1.6; }

/* ---------- Sections ---------- */
.fn-sec { padding: 5rem 0; }
.fn-sec-gray { background: var(--fn-bg); }
.fn-sec-head { max-width: 48rem; margin: 0 auto 4rem; text-align: center; }
.fn-kicker { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--fn-wine); }
.fn-h2 { font-size: 1.875rem; font-weight: 800; color: var(--fn-dark); margin-top: 0.5rem; }
.fn-sub { color: var(--fn-soft); margin-top: 0.5rem; }
.fn-grid4 { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .fn-grid4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .fn-grid4 { grid-template-columns: repeat(4, 1fr); } }
.fn-card { background: #fff; border: 1px solid rgba(226,232,240,0.8); border-radius: 0.75rem; padding: 1.75rem; box-shadow: 0 1px 2px rgba(0,0,0,0.04); display: flex; flex-direction: column; }
.fn-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.fn-card-ic { width: 3rem; height: 3rem; border-radius: 0.5rem; background: var(--fn-red-50); color: var(--fn-wine); display: flex; align-items: center; justify-content: center; font-size: 28px; }
.fn-card h3 { font-size: 1.125rem; font-weight: 700; color: var(--fn-dark); margin: 1rem 0 0; }
.fn-card-intro { font-size: 0.75rem; font-style: italic; color: var(--fn-muted); margin: 0.5rem 0 1rem; }
.fn-card ul { list-style: none; margin: 0; padding: 1rem 0 0; display: grid; gap: 0.75rem; font-size: 0.875rem; color: var(--fn-soft); }
.fn-card ul li { display: flex; gap: 0.625rem; }
.fn-card ul li::before { content: "•"; color: var(--fn-wine); font-weight: 700; }
.fn-card-link { margin-top: 1rem; padding-top: 1.5rem; border-top: 1px solid #f1f5f9; }
.fn-card-link a { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 700; color: var(--fn-wine); text-decoration: none; }
.fn-card-link a:hover { text-decoration: underline; }

/* ---------- Referenzen ---------- */
.fn-grid2 { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .fn-grid2 { grid-template-columns: repeat(2, 1fr); } }
.fn-ref { background: #fff; border: 1px solid var(--fn-line); border-radius: 0.75rem; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.04); display: flex; flex-direction: column; }
.fn-ref:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.fn-ref-img { height: 14rem; background: #f1f5f9; border-bottom: 1px solid #f1f5f9; position: relative; overflow: hidden; }
.fn-ref-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.fn-ref-flag { position: absolute; bottom: 0.75rem; left: 0.75rem; background: rgba(255,255,255,0.9); padding: 0.25rem 0.625rem; border-radius: 0.25rem; font-size: 11px; font-weight: 600; color: var(--fn-dark); }
.fn-ref-body { padding: 1.75rem; display: flex; flex-direction: column; flex: 1; }
.fn-ref-body h3 { font-size: 1.5rem; font-weight: 700; color: var(--fn-dark); margin: 0; letter-spacing: -0.01em; }
.fn-ref-date { font-size: 0.875rem; color: #94a3b8; margin-top: 0.5rem; }
.fn-ref-body > p { font-size: 0.875rem; color: var(--fn-soft); line-height: 1.7; margin-top: 0.5rem; }
.fn-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; list-style: none; padding: 0; }
.fn-tags li { padding: 0.25rem 0.875rem; border-radius: 9999px; background: var(--fn-bg); border: 1px solid rgba(226,232,240,0.6); font-size: 0.75rem; color: #334155; }

/* ---------- Partner / Insights / CTA / Footer ---------- */
.fn-grid3 { display: grid; gap: 2rem; }
@media (min-width: 768px) { .fn-grid3 { grid-template-columns: repeat(3, 1fr); } }
.fn-partner { background: #fff; border: 1px solid var(--fn-line); border-radius: 0.75rem; padding: 2rem; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.fn-partner h3 { font-size: 1.125rem; font-weight: 700; color: var(--fn-dark); margin: 1rem 0 0; }
.fn-partner > p { font-size: 0.875rem; color: var(--fn-soft); line-height: 1.7; margin-top: 0.5rem; }
.fn-foot { font-size: 0.75rem; font-weight: 600; color: #94a3b8; margin-top: 1rem; }
.fn-center { text-align: center; margin-top: 3rem; }
.fn-ins { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .fn-ins { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fn-ins { grid-template-columns: repeat(4, 1fr); } }
.fn-ins-card { background: #fff; border: 1px solid rgba(226,232,240,0.8); border-radius: 0.75rem; padding: 1.75rem; box-shadow: 0 1px 2px rgba(0,0,0,0.04); display: flex; flex-direction: column; }
.fn-ins-cat { display: inline-block; background: var(--fn-red-50); color: #7f1d1d; border: 1px solid var(--fn-red-100); padding: 0.25rem 0.625rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 600; }
.fn-ins-card h3 { font-size: 1.125rem; font-weight: 700; color: var(--fn-dark); line-height: 1.4; margin: 1rem 0 0; }
.fn-ins-card > p { font-size: 0.875rem; color: var(--fn-soft); line-height: 1.7; margin-top: 0.5rem; }
.fn-read { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #f1f5f9; font-size: 0.75rem; color: var(--fn-muted); }
.fn-cta-box { max-width: 64rem; margin: 0 auto; background: #fff; border: 1px solid var(--fn-line); border-radius: 1rem; padding: 2.5rem; box-shadow: 0 10px 30px rgba(30,41,59,0.08); text-align: center; }
.fn-cta-row { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #f1f5f9; display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: center; }
.fn-contact { background: var(--fn-bg); border: 1px solid rgba(226,232,240,0.8); border-radius: 0.75rem; padding: 1rem; font-size: 0.75rem; text-align: left; font-style: normal; }
.fn-contact strong { font-size: 0.875rem; color: var(--fn-dark); }
.fn-contact a { color: var(--fn-wine); font-weight: 600; }
.fn-footer { background: #fff; border-top: 1px solid var(--fn-line); padding: 4rem 0; color: var(--fn-dark); }
.fn-footer-grid { display: grid; gap: 3rem; }
@media (min-width: 768px) { .fn-footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fn-footer-grid { grid-template-columns: repeat(4, 1fr); } }
.fn-footer h4 { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 1rem; }
.fn-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; font-size: 0.875rem; color: var(--fn-soft); }
.fn-footer a { color: inherit; text-decoration: none; }
.fn-footer a:hover { color: var(--fn-wine); }
.fn-copy { max-width: 1440px; margin: 3rem auto 0; padding: 1.5rem 2rem 0; border-top: 1px solid #f1f5f9; text-align: center; font-size: 0.75rem; color: #94a3b8; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; }