/* starksoft Ratgeber-/Landingpage-Design (Nachtschicht) — genutzt von den SEO-Themenseiten */
@font-face { font-family:'Archivo';
             src:url('../../messe/fonts/Archivo.woff2') format('woff2-variations'), url('../../messe/fonts/Archivo.ttf') format('truetype-variations');
             font-weight:100 900; font-stretch:62% 125%; font-display:swap; }
@font-face { font-family:'Space Grotesk';
             src:url('../../messe/fonts/SpaceGrotesk.woff2') format('woff2-variations'), url('../../messe/fonts/SpaceGrotesk.ttf') format('truetype-variations');
             font-weight:300 700; font-display:swap; }
:root {
  --ink:#14181F; --ink-2:#3A424E; --ink-3:#5A6472;
  --bg-dark:#14181F; --bg-dark-2:#171C24; --line:#E2E5EA;
  --red:#C40C20; --red-bright:#E30521; --red-soft:#FDF4F5;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
body { font-family:'Archivo',system-ui,sans-serif; color:var(--ink); font-size:17px; line-height:1.65; background:#fff; }
::selection { background:var(--red-bright); color:#fff; }
a { color:inherit; }
a:focus-visible { outline:3px solid var(--red-bright); outline-offset:3px; border-radius:4px; }
.wrap { max-width:860px; margin:0 auto; padding:0 24px; }

.topbar { background:rgba(20,24,31,0.92); backdrop-filter:blur(10px); position:sticky; top:0; z-index:50; }
.topbar .wrap { max-width:1120px; display:flex; align-items:center; justify-content:space-between; height:60px; }
.topbar img { height:28px; display:block; }
.btn { display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
       font-family:'Space Grotesk'; font-weight:500; font-size:15px; letter-spacing:0.02em;
       text-decoration:none; border-radius:999px; padding:11px 24px;
       transition:background-color .2s, border-color .2s; border:1px solid transparent; }
.btn-red { background:var(--red-bright); color:#fff; }
.btn-red:hover { background:#F41B36; }
.btn-ghost { border-color:rgba(255,255,255,0.25); color:#E7EBF0; }
.btn-ghost:hover { border-color:rgba(255,255,255,0.5); }

.hero { background:linear-gradient(160deg,var(--bg-dark-2) 0%, var(--bg-dark) 60%, #10141A 100%); color:#fff;
        padding:72px 0 64px; position:relative; overflow:hidden; }
.hero::before { content:""; position:absolute; inset:0;
                background-image:radial-gradient(#232B36 1.6px, transparent 1.6px); background-size:34px 34px; }
.hero .wrap { position:relative; }
.kicker { display:flex; align-items:center; gap:12px; font-family:'Space Grotesk'; font-weight:500;
          font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:#AEB6C2; }
.kicker::before { content:""; width:30px; height:4px; background:var(--red-bright); border-radius:2px; }
h1 { font-weight:740; font-stretch:104%; font-size:clamp(30px, 4.4vw, 46px); line-height:1.14;
     letter-spacing:-0.012em; margin:20px 0 18px; text-wrap:balance; }
.hero-sub { color:#B9C1CC; font-size:18px; line-height:1.7; max-width:38em; }
.hero-ctas { display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.hero-fact { display:flex; flex-wrap:wrap; gap:26px; margin-top:36px; font-family:'Space Grotesk';
             font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:#8A94A2; }
.hero-fact b { color:#fff; font-size:15px; }

main section { padding:56px 0 8px; }
h2 { font-weight:730; font-stretch:104%; font-size:clamp(23px, 3vw, 30px); line-height:1.22;
     letter-spacing:-0.008em; margin-bottom:16px; text-wrap:balance; }
h3 { font-weight:720; font-stretch:103%; font-size:19px; margin:26px 0 8px; }
p { margin-bottom:14px; color:#2A313B; }
p.lead { font-size:19px; color:var(--ink); }
ul { margin:0 0 16px 22px; }
li { margin-bottom:8px; color:#2A313B; }
.note { background:var(--red-soft); border:1px solid rgba(196,12,32,0.3); border-radius:12px;
        padding:18px 22px; margin:22px 0; }
.note b { color:var(--red); }
.facts { width:100%; border-collapse:collapse; margin:18px 0 22px; font-size:16px; }
.facts th { font-family:'Space Grotesk'; font-weight:600; font-size:12.5px; letter-spacing:0.08em;
            text-transform:uppercase; color:var(--ink-3); text-align:left;
            border-bottom:2px solid var(--ink); padding:10px 12px 10px 0; }
.facts td { border-bottom:1px solid var(--line); padding:12px 12px 12px 0; vertical-align:top; }

.faq { background:#F6F7F9; padding:64px 0 72px; margin-top:56px; }
.faq-item { background:#fff; border:1px solid var(--line); border-radius:12px; margin-bottom:12px; }
.faq-item summary { cursor:pointer; font-weight:720; font-stretch:103%; font-size:17.5px;
                    padding:18px 22px; list-style:none; display:flex; justify-content:space-between; gap:16px; }
.faq-item summary::after { content:"+"; color:var(--red-bright); font-weight:700; font-size:22px; line-height:1; }
.faq-item[open] summary::after { content:"–"; }
.faq-item div { padding:0 22px 18px; color:#2A313B; }

.cta { background:linear-gradient(160deg,var(--bg-dark-2) 0%, var(--bg-dark) 60%, #10141A 100%);
       color:#fff; padding:64px 0; }
.cta h2 { color:#fff; }
.cta p { color:#B9C1CC; max-width:36em; }
.cta .btns { display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }
.cta-messe { margin-top:30px; font-family:'Space Grotesk'; font-size:14px; letter-spacing:0.06em; color:#8A94A2; }
.cta-messe a { color:#FFD9DE; }

.more { padding:48px 0 64px; }
.more h2 { font-size:20px; }
.more ul { list-style:none; margin:14px 0 0; display:flex; flex-wrap:wrap; gap:10px; }
.more a { font-family:'Space Grotesk'; font-size:14px; letter-spacing:0.04em; text-decoration:none;
          border:1px solid var(--line); border-radius:999px; padding:9px 18px; display:inline-block;
          transition:border-color .2s; }
.more a:hover { border-color:var(--ink); }

footer { background:#10141A; padding:26px 0 34px; }
footer .wrap { max-width:1120px; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; }
footer p, footer a { font-family:'Space Grotesk'; font-size:13px; color:#8A94A2; }
footer a { text-decoration:none; }
footer a:hover { color:#fff; text-decoration:underline; text-underline-offset:3px; }
footer nav { display:flex; gap:20px; }