/* ── SHARED STYLES – ImpressumService ── */
@import url('/assets/fonts/fonts.css');

:root {
  --ink:        #151515;
  --dark:       #1e1e1e;
  --card-dark:  #252525;
  --gold:       #c9a84c;
  --gold-light: #e0c070;
  --gold-dim:   rgba(201,168,76,0.15);
  --cream:      #faf8f4;
  --parchment:  #f2ede3;
  --muted:      #777;
  --border:     #e0d9ce;
  --border-dark:rgba(201,168,76,0.18);
  --white:      #ffffff;
  --shadow-sm:  0 2px 12px rgba(0,0,0,0.07);
  --shadow-md:  0 8px 32px rgba(0,0,0,0.12);
  --shadow-lg:  0 20px 60px rgba(0,0,0,0.18);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:'Roboto', sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
}

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(21,21,21,0.97);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-dark);
  height:62px;
  display:flex; align-items:center;
  padding:0 2rem;
  justify-content:space-between;
}
.nav-logo {
  display:flex; align-items:center;
  text-decoration:none; flex-shrink:0;
}
.nav-logo span { color:rgba(255,255,255,0.8); font-weight:300; }
.nav-logo-img {
  height:48px; width:auto; display:block;
  /* leichter Helligkeit-Boost damit grauer LeseHits-Text auf dunklem Nav sichtbar ist */
  filter:brightness(1.15);
}
@media(max-width:900px){ .nav-logo-img { height:38px; } }
.nav-links { display:flex; align-items:center; gap:0; list-style:none; }
.nav-links a {
  color:rgba(255,255,255,0.65);
  text-decoration:none; font-size:0.78rem;
  letter-spacing:0.09em; text-transform:uppercase;
  padding:0.45rem 0.9rem; font-weight:500;
  transition:color 0.2s;
}
.nav-links a:hover, .nav-links a.active { color:var(--gold); }
.nav-links a.nav-login {
  background:var(--gold); color:var(--ink) !important;
  font-weight:700; margin-left:0.5rem; padding:0.4rem 1rem;
}
.nav-links a.nav-login:hover { background:var(--gold-light); }
.nav-mobile-btn {
  display:none; background:none; border:none;
  color:var(--white); font-size:1.5rem; cursor:pointer;
}

/* ── PAGE WRAPPER ── */
.page-wrap { padding-top:62px; min-height:100vh; }

/* ── HERO DARK ── */
.hero-dark {
  background:var(--ink);
  position:relative; overflow:hidden;
  padding:5rem 2rem 4.5rem;
}
.hero-dark::before {
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 10% 60%, rgba(201,168,76,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 85% 20%, rgba(201,168,76,0.05) 0%, transparent 50%);
}
.hero-dark-inner { max-width:1080px; margin:0 auto; position:relative; z-index:1; }
.eyebrow {
  font-size:0.7rem; font-weight:700; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.2rem;
  display:inline-flex; align-items:center; gap:0.8rem;
}
.eyebrow::before { content:''; display:block; width:28px; height:1px; background:var(--gold); }
h1.hero-title {
  font-family:'Roboto', sans-serif;
  font-weight:900; font-size:clamp(2.2rem,4.5vw,3.5rem);
  color:var(--white); line-height:1.1; margin-bottom:1rem;
}
h1.hero-title em { color:var(--gold); font-style:normal; }
.hero-sub { color:rgba(255,255,255,0.5); font-size:1rem; font-weight:300; max-width:560px; line-height:1.8; }

/* ── SECTION ── */
.section { padding:5rem 2rem; }
.section-inner { max-width:1080px; margin:0 auto; }
.section-dark { background:var(--dark); }
.section-parchment { background:var(--parchment); }

.label {
  font-size:0.68rem; font-weight:700; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--gold); margin-bottom:0.9rem;
  display:flex; align-items:center; gap:0.75rem;
}
.label::after { content:''; flex:0 0 50px; height:1px; background:var(--border); }
.label-light::after { background:var(--border-dark); }

h2.section-title {
  font-weight:900; font-size:clamp(1.8rem,3vw,2.6rem);
  line-height:1.15; margin-bottom:0.75rem;
}
h2.section-title em { color:var(--gold); font-style:normal; }
.section-dark h2.section-title { color:var(--white); }
p.section-lead { color:var(--muted); font-size:0.95rem; line-height:1.8; max-width:580px; font-weight:300; }

/* ── BUTTONS ── */
.btn {
  display:inline-block; text-decoration:none;
  font-family:'Roboto', sans-serif; font-weight:700;
  font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase;
  padding:0.85rem 2rem; border:none; cursor:pointer;
  transition:all 0.22s; border-radius:0;
}
.btn-gold { background:var(--gold); color:var(--ink); }
.btn-gold:hover { background:var(--gold-light); transform:translateY(-1px); }
.btn-dark { background:var(--ink); color:var(--white); }
.btn-dark:hover { background:#333; }
.btn-outline-dark {
  background:transparent; color:var(--ink);
  border:1.5px solid var(--ink);
}
.btn-outline-dark:hover { background:var(--ink); color:var(--white); }
.btn-outline-light {
  background:transparent; color:var(--white);
  border:1.5px solid rgba(255,255,255,0.3);
}
.btn-outline-light:hover { border-color:var(--gold); color:var(--gold); }

/* ── CARDS ── */
.card {
  background:var(--white); border:1px solid var(--border);
  padding:2rem; transition:all 0.28s;
}
.card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.card-dark {
  background:var(--card-dark); border:1px solid var(--border-dark);
  padding:2rem;
}

/* ── FORMS ── */
.form-group { margin-bottom:1.2rem; }
.form-label {
  display:block; font-size:0.72rem; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:0.45rem;
}
.form-input, .form-select, .form-textarea {
  width:100%; padding:0.75rem 1rem;
  border:1.5px solid var(--border); background:var(--white);
  font-family:'Roboto', sans-serif; font-size:0.93rem;
  outline:none; transition:border-color 0.2s; border-radius:0;
  color:var(--ink);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color:var(--gold);
}
.form-textarea { min-height:130px; resize:vertical; }

/* ── FOOTER ── */
footer {
  background:var(--ink);
  border-top:1px solid var(--border-dark);
  padding:3.5rem 2rem 1.5rem;
}
.footer-grid {
  max-width:1080px; margin:0 auto;
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:3rem; padding-bottom:2.5rem;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.footer-brand-name {
  font-weight:700; font-size:0.95rem;
  color:var(--gold); margin-bottom:0.6rem;
}
.footer-brand-text { color:rgba(255,255,255,0.3); font-size:0.82rem; line-height:1.8; font-weight:300; }
.footer-col-title {
  font-size:0.66rem; font-weight:700; letter-spacing:0.2em;
  text-transform:uppercase; color:rgba(255,255,255,0.3);
  margin-bottom:1rem;
}
.footer-links { list-style:none; }
.footer-links li { margin-bottom:0.45rem; }
.footer-links a {
  color:rgba(255,255,255,0.45); font-size:0.84rem;
  text-decoration:none; font-weight:300;
  transition:color 0.2s;
}
.footer-links a:hover { color:var(--gold); }
.footer-bottom {
  max-width:1080px; margin:1.5rem auto 0;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:1rem;
}
.footer-copy { color:rgba(255,255,255,0.2); font-size:0.76rem; }
.footer-legal { display:flex; gap:1.5rem; }
.footer-legal a {
  color:rgba(255,255,255,0.25); font-size:0.76rem;
  text-decoration:none; transition:color 0.2s;
}
.footer-legal a:hover { color:var(--gold); }

/* ── DIVIDER ── */
.divider { height:1px; background:var(--border); margin:2.5rem 0; }
.divider-dark { height:1px; background:var(--border-dark); margin:2.5rem 0; }

/* ── BADGE ── */
.badge {
  display:inline-block; font-size:0.65rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase;
  padding:0.2rem 0.65rem;
}
.badge-gold { background:var(--gold); color:var(--ink); }
.badge-new { background:#c0392b; color:var(--white); }
.badge-read { background:#4a5e4e; color:var(--white); }

/* ── QUOTE BLOCK ── */
.quote-block {
  border-left:3px solid var(--gold);
  padding:1.5rem 1.5rem 1.5rem 2rem;
  background:var(--parchment);
  margin:2.5rem 0;
}
.quote-block p {
  font-size:1.05rem; font-style:italic; font-weight:300;
  color:var(--ink); line-height:1.8;
}
.quote-block cite {
  display:block; margin-top:0.75rem;
  font-size:0.75rem; font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--gold); font-style:normal;
}

/* ── STEP ── */
.step-list { margin-top:2.5rem; }
.step-item {
  display:grid; grid-template-columns:56px 1fr;
  gap:1.5rem; padding:1.8rem 0;
  border-bottom:1px solid var(--border);
  align-items:start;
}
.step-item:last-child { border-bottom:none; }
.step-num {
  font-weight:900; font-size:2rem; color:var(--gold);
  line-height:1; padding-top:0.15rem;
}
.step-title { font-weight:700; font-size:1rem; margin-bottom:0.4rem; }
.step-desc { color:var(--muted); font-size:0.88rem; line-height:1.8; font-weight:300; }

/* ── STATS ROW ── */
.stats-row {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:2rem; padding-top:3rem; margin-top:3rem;
  border-top:1px solid var(--border);
}
.stat-num {
  font-weight:900; font-size:2.5rem; color:var(--gold);
  line-height:1; margin-bottom:0.2rem;
}
.stat-label { font-size:0.78rem; color:var(--muted); font-weight:300; letter-spacing:0.04em; }

/* ── MOBILE NAV OVERLAY ── */
.nav-mobile-btn {
  display:none; background:none; border:none;
  color:var(--white); cursor:pointer; padding:0.25rem;
  flex-direction:column; justify-content:center;
  align-items:center; gap:5px; width:36px; height:36px;
}
.nav-mobile-btn span {
  display:block; width:22px; height:2px;
  background:var(--white); transition:all 0.3s;
  transform-origin:center;
}
.nav-mobile-btn.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-mobile-btn.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-mobile-btn.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.nav-mobile-overlay {
  display:none;
  position:fixed; top:62px; left:0; right:0; bottom:0;
  background:rgba(21,21,21,0.98);
  backdrop-filter:blur(16px);
  z-index:999;
  flex-direction:column;
  padding:2rem 1.5rem;
  overflow-y:auto;
  animation:overlayIn 0.25s ease;
}
@keyframes overlayIn {
  from { opacity:0; transform:translateY(-8px); }
  to   { opacity:1; transform:translateY(0); }
}
.nav-mobile-overlay.open { display:flex; }
.nav-mobile-overlay ul {
  list-style:none; display:flex; flex-direction:column; gap:0;
  flex:1;
}
.nav-mobile-overlay ul li a {
  display:block; color:rgba(255,255,255,0.7);
  text-decoration:none; font-size:1.1rem; font-weight:500;
  letter-spacing:0.06em; padding:1rem 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
  transition:color 0.2s;
}
.nav-mobile-overlay ul li a:hover,
.nav-mobile-overlay ul li a.active { color:var(--gold); }
.nav-mobile-overlay ul li:last-child a {
  background:var(--gold); color:var(--ink) !important;
  font-weight:700; padding:0.9rem 1.5rem;
  border-bottom:none; margin-top:1.5rem;
  text-align:center; letter-spacing:0.1em;
}
.nav-mobile-overlay ul li:last-child a:hover { background:var(--gold-light); }

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .footer-grid { grid-template-columns:1fr 1fr; }
  .stats-row { grid-template-columns:1fr 1fr; }
  .nav-links { display:none !important; }
  .nav-mobile-btn { display:flex; }
}
@media(max-width:600px){
  .hero-dark { padding:3.5rem 1.25rem 3rem; }
  .section { padding:3.5rem 1.25rem; }
}

/* ═══════════════════════════════════════════════════════════════
   SHARED ERGÄNZUNGEN – PHP-Version
   ═══════════════════════════════════════════════════════════════ */

/* ── Layout ────────────────────────────────────────────────────── */
.container     { max-width:1080px; margin:0 auto; padding:0 2rem; }
.section       { padding:5rem 2rem; }
.bg-cream      { background:var(--cream); }
.bg-dark       { background:var(--dark); color:var(--white); }
.bg-parchment  { background:var(--parchment); }
.text-center   { text-align:center; }
.text-muted    { color:var(--muted); }
.gold          { color:var(--gold); }
.green         { color:#2ecc71; }
.red           { color:#e74c3c; }

.section-label {
  font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.75rem;
}
.section-title {
  font-size:2.2rem; font-weight:900; line-height:1.15; margin-bottom:2.5rem;
}
.section-title .gold { color:var(--gold); }

/* ── NAV ergänzt ───────────────────────────────────────────────── */
.nav-mobile-overlay {
  display:none; position:fixed; inset:0; background:var(--ink);
  z-index:999; padding:5rem 2rem 2rem; flex-direction:column;
}
.nav-mobile-overlay.open { display:flex; }
.nav-mobile-overlay ul   { list-style:none; }
.nav-mobile-overlay li a {
  display:block; padding:.9rem 0; color:var(--white); text-decoration:none;
  font-size:1.1rem; font-weight:500; border-bottom:1px solid rgba(255,255,255,.07);
}
@media(max-width:900px){
  .nav-links { display:none; }
  .nav-mobile-btn { display:block; }
}

/* ── Buttons (öffentlich) ──────────────────────────────────────── */
.btn-gold    { background:var(--gold); color:var(--ink); font-weight:700; padding:.7rem 1.6rem; border:none; text-decoration:none; display:inline-block; cursor:pointer; font-size:.82rem; letter-spacing:.06em; transition:background .2s; }
.btn-gold:hover    { background:var(--gold-light); }
.btn-outline { background:transparent; color:var(--white); border:1.5px solid rgba(255,255,255,.35); font-weight:600; padding:.7rem 1.6rem; text-decoration:none; display:inline-block; transition:.2s; font-size:.82rem; }
.btn-outline:hover { border-color:var(--gold); color:var(--gold); }
.btn-dark    { background:var(--ink); color:var(--white); font-weight:700; padding:.85rem 2rem; border:none; cursor:pointer; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; transition:background .2s; }
.btn-dark:hover    { background:#333; }
.btn-lg      { padding:.85rem 2.2rem; font-size:.9rem; }
.btn-full    { display:block; width:100%; text-align:center; }
.btn-sm      { padding:.3rem .8rem; font-size:.75rem; }

/* ── Flash-Banner (öffentliche Seiten) ─────────────────────────── */
.flash-banner        { padding:.9rem 1.5rem; margin:1rem 0; font-size:.87rem; }
.flash-success       { background:#d4edda; color:#155724; border-left:4px solid #28a745; }
.flash-error         { background:#f8d7da; color:#721c24; border-left:4px solid #dc3545; }
.flash-info          { background:#d1ecf1; color:#0c5460; border-left:4px solid #17a2b8; }
.form-error-banner   { background:#f8d7da; color:#721c24; padding:.75rem 1rem; margin-bottom:1.2rem; border-left:4px solid #dc3545; font-size:.85rem; }
.form-success-banner { background:#d4edda; color:#155724; padding:.75rem 1rem; margin-bottom:1.2rem; border-left:4px solid #28a745; font-size:.85rem; }

/* ── Formulare (öffentlich) ────────────────────────────────────── */
.form-group  { margin-bottom:1.1rem; }
.form-label  { display:block; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink); margin-bottom:.4rem; }
.form-input  { width:100%; padding:.75rem 1rem; border:1.5px solid var(--border); background:var(--white); font-size:.9rem; font-family:inherit; outline:none; transition:border .2s; }
.form-input:focus { border-color:var(--gold); }
textarea.form-input { resize:vertical; }
.form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-section-title { font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:2rem 0 1rem; padding-bottom:.5rem; border-bottom:1px solid var(--border); }
.form-check  { display:flex; align-items:flex-start; gap:.75rem; margin-bottom:.9rem; }
.form-check input[type=checkbox] { width:16px; height:16px; margin-top:.15rem; flex-shrink:0; accent-color:var(--gold); }
.form-check label { font-size:.83rem; color:var(--muted); font-weight:300; line-height:1.6; cursor:pointer; }
.form-check label a { color:var(--gold); }
.forgot a    { font-size:.78rem; color:var(--muted); text-align:right; display:block; margin-top:.4rem; text-decoration:none; }
.forgot a:hover { color:var(--gold); }

/* ── Hero ──────────────────────────────────────────────────────── */
.hero-dark   { background:var(--ink); padding:5rem 2rem 4.5rem; position:relative; overflow:hidden; }
.hero-sm     { padding:4rem 2rem 3.5rem; }
.hero-dark h1 { font-size:2.8rem; font-weight:900; color:var(--white); line-height:1.15; margin-bottom:1rem; }
.hero-dark p  { color:rgba(255,255,255,.55); font-size:1rem; font-weight:300; max-width:580px; }
.hero-dark .label { color:var(--gold); }
.hero-dark .section-label { color:var(--gold); }

/* Hero Startseite */
.hero-home   {
  min-height:calc(100vh - 62px); background:var(--ink);
  display:flex; align-items:center; padding:4rem 2rem;
  background-image: linear-gradient(to right,rgba(21,21,21,.92) 50%,rgba(21,21,21,.55) 100%),
    url('/assets/bg/impressumservice_LeseHits.webp');
  background-size:cover; background-position:center top;
}
.hero-grid   { max-width:1080px; margin:0 auto; display:grid; grid-template-columns:1fr 420px; gap:5rem; align-items:center; width:100%; }
.hero-text h1 { font-size:3rem; font-weight:900; color:var(--white); line-height:1.1; }
.hero-text .label { color:var(--gold); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; margin-bottom:.75rem; display:block; }
.hero-sub    { color:rgba(255,255,255,.55); font-size:1rem; font-weight:300; line-height:1.7; margin-top:1rem; max-width:500px; }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; margin-top:2.5rem; }
.hero-visual  { display:flex; justify-content:center; }
.letter-stack { display:flex; flex-direction:column; gap:.9rem; }
.letter-card  { background:rgba(255,255,255,.04); border:1px solid rgba(201,168,76,.2); padding:1rem 1.25rem; display:flex; align-items:center; gap:.9rem; }
.lc-icon     { font-size:1.2rem; }
.lc-sender   { color:rgba(255,255,255,.8); font-size:.87rem; font-weight:500; flex:1; }
.lc-badge    { background:var(--gold); color:var(--ink); font-size:.65rem; font-weight:900; padding:.15rem .5rem; }

/* ── Stats-Sektion ─────────────────────────────────────────────── */
.stats-grid  { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.stat-item   { text-align:center; }
.stat-big    { font-size:2.5rem; font-weight:900; color:var(--gold); }
.stat-desc   { font-size:.82rem; color:rgba(255,255,255,.45); font-weight:300; margin-top:.25rem; }

/* ── How-Cards ─────────────────────────────────────────────────── */
.how-grid    { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--border-dark); }
.how-card    { padding:2.2rem; border-right:1px solid var(--border-dark); border-bottom:1px solid var(--border-dark); position:relative; transition:background .3s; }
.how-card:nth-child(3n) { border-right:none; }
.how-card:nth-child(n+4){ border-bottom:none; }
.how-card:hover { background:var(--gold-dim); }
.how-num     { font-weight:900; font-size:3.5rem; line-height:1; color:rgba(201,168,76,.12); position:absolute; top:1rem; right:1.2rem; }
.how-icon    { font-size:1.7rem; margin-bottom:.9rem; }
.how-title   { font-weight:700; font-size:1rem; margin-bottom:.5rem; }
.how-text    { font-size:.87rem; color:var(--muted); font-weight:300; line-height:1.7; }

/* ── Quote ─────────────────────────────────────────────────────── */
.quote-section { text-align:center; }
.big-quote    { max-width:720px; margin:0 auto; }
.big-quote-text   { font-size:1.35rem; font-weight:300; line-height:1.7; font-style:italic; color:var(--ink); }
.big-quote-author { margin-top:1.5rem; font-size:.82rem; color:var(--gold); font-weight:700; letter-spacing:.08em; text-transform:uppercase; }

/* ── CTA ───────────────────────────────────────────────────────── */
.cta-section  { text-align:center; }
.cta-section h2 { font-size:2.2rem; font-weight:900; color:var(--white); }
.cta-section p  { color:rgba(255,255,255,.5); font-weight:300; max-width:560px; margin:.75rem auto 0; }

/* ── Footer ────────────────────────────────────────────────────── */
.site-footer  { background:var(--ink); color:rgba(255,255,255,.4); padding:4rem 2rem 2rem; }
.footer-inner { max-width:1080px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
.footer-brand-name { font-weight:900; font-size:1rem; color:var(--gold); margin-bottom:.5rem; }
.footer-brand-text { font-size:.82rem; font-weight:300; line-height:1.7; }
.footer-links-title { font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom:1rem; }
.footer-links ul    { list-style:none; }
.footer-links li    { margin-bottom:.5rem; }
.footer-links a     { color:rgba(255,255,255,.4); text-decoration:none; font-size:.83rem; font-weight:300; }
.footer-links a:hover { color:var(--gold); }
.footer-copy  { max-width:1080px; margin:2rem auto 0; border-top:1px solid rgba(255,255,255,.07); padding-top:1.5rem; font-size:.75rem; text-align:center; }

/* ── Login ─────────────────────────────────────────────────────── */
.login-page-split { display:grid; grid-template-columns:1fr 1fr; min-height:calc(100vh - 62px); }
.login-left  { background:var(--ink); display:flex; align-items:center; justify-content:center; padding:4rem 3rem;
  background-image:linear-gradient(rgba(21,21,21,.85),rgba(21,21,21,.9)),
  url('/assets/bg/impressumservice_Hand-Buchstapel.webp');
  background-size:cover; background-position:center; }
.login-left-inner { max-width:320px; }
.login-tagline   { font-size:2rem; font-weight:900; color:var(--white); line-height:1.2; margin-bottom:2rem; }
.login-features  { list-style:none; }
.login-features li { color:rgba(255,255,255,.6); font-weight:300; padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,.07); font-size:.9rem; }
.login-right { display:flex; align-items:center; justify-content:center; padding:4rem 3rem; background:var(--cream); }
.login-box   { width:100%; max-width:380px; }
.login-box h2 { font-weight:900; font-size:1.5rem; margin-bottom:.4rem; }
.login-box p  { color:var(--muted); font-size:.87rem; margin-bottom:2rem; font-weight:300; }
.login-logo {
  font-size:.7rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); margin-bottom:1.5rem;
}
.login-label {
  display:block; font-size:.68rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:#666; margin-bottom:.45rem;
}
.login-input {
  width:100%; box-sizing:border-box;
  padding:.75rem 1rem;
  background:#fff; border:1.5px solid #d0cac0;
  color:#151515; font-size:.95rem; font-family:inherit;
  outline:none; transition:border-color .18s, box-shadow .18s;
}
.login-input::placeholder { color:#b0a898; }
.login-input:focus {
  border-color:#c9a84c;
  box-shadow:0 0 0 3px rgba(201,168,76,.15);
}
.login-input-wrap { position:relative; }
.login-input-wrap .login-input-icon {
  position:absolute; right:.9rem; top:50%; transform:translateY(-50%);
  color:#b0a898; pointer-events:none; display:flex;
}
.login-input-wrap .login-input { padding-right:2.4rem; }
.login-submit { width:100%; padding:.95rem; background:var(--ink); color:var(--white); border:none; font-family:'Roboto',sans-serif; font-weight:700; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:background .22s; margin-top:1.2rem; }
.login-submit:hover { background:var(--gold); color:var(--ink); }
.login-register { text-align:center; margin-top:1.5rem; font-size:.82rem; color:var(--muted); }
.login-register a { color:var(--gold); font-weight:700; text-decoration:none; }
.login-page-simple { display:flex; align-items:center; justify-content:center; min-height:calc(100vh - 62px); background:var(--cream); padding:2rem; }

/* ── Registrierung ─────────────────────────────────────────────── */
.reg-wrap    { display:grid; grid-template-columns:380px 1fr; min-height:calc(100vh - 62px); }
.reg-sidebar { background:var(--ink); padding:3rem 2.5rem; display:flex; flex-direction:column; justify-content:center;
  background-image:linear-gradient(rgba(21,21,21,.88),rgba(21,21,21,.93)),
  url('/assets/bg/impressumservice_schreibt.webp');
  background-size:cover; background-position:center; }
.reg-sidebar-inner { max-width:320px; }
.eyebrow     { font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:.75rem; }
.reg-sidebar h2 { color:var(--white); font-weight:900; font-size:1.5rem; line-height:1.2; }
.plan-selector { margin:1.5rem 0; display:flex; flex-direction:column; gap:.5rem; }
.plan-opt    { display:flex; align-items:center; gap:.9rem; padding:.9rem 1rem; border:1.5px solid rgba(255,255,255,.12); cursor:pointer; transition:border .2s; }
.plan-opt:hover { border-color:rgba(201,168,76,.4); }
.plan-opt.selected, .plan-opt input:checked { border-color:var(--gold); background:rgba(201,168,76,.07); }
.plan-opt input[type=radio] { accent-color:var(--gold); }
.plan-name   { font-weight:700; color:var(--white); font-size:.87rem; }
.plan-price  { font-size:.75rem; color:rgba(255,255,255,.45); margin-top:.15rem; }
.plan-quota  { font-size:.7rem; color:rgba(255,255,255,.3); margin-top:.1rem; }
.plan-info   { flex:1; }
.plan-radio  { width:16px; height:16px; border:2px solid rgba(255,255,255,.3); border-radius:50%; flex-shrink:0; }
.include-list { list-style:none; margin-top:1.5rem; }
.include-list li { font-size:.82rem; color:rgba(255,255,255,.5); padding:.4rem 0; font-weight:300; }
.include-list li::before { content:'✓ '; color:var(--gold); font-weight:700; }
.reg-main    { padding:4rem 3rem; background:var(--cream); overflow-y:auto; }
.reg-main h2 { font-weight:900; font-size:1.5rem; margin-bottom:.4rem; }
.reg-main p  { color:var(--muted); font-size:.87rem; margin-bottom:1.5rem; font-weight:300; }
.reg-submit  { width:100%; padding:1rem; background:var(--ink); color:var(--white); border:none; font-family:'Roboto',sans-serif; font-weight:700; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:background .22s; margin-top:.5rem; }
.reg-submit:hover { background:var(--gold); color:var(--ink); }
.reg-login   { text-align:center; margin-top:1.2rem; font-size:.82rem; color:var(--muted); }
.reg-login a { color:var(--gold); font-weight:700; text-decoration:none; }
.success-box { background:var(--parchment); border:2px solid var(--gold); padding:2.5rem; text-align:center; margin-top:2rem; }
.success-box .icon { font-size:3rem; margin-bottom:1rem; }
.success-box h3 { font-weight:900; font-size:1.3rem; margin-bottom:.5rem; }
.success-box p  { color:var(--muted); font-size:.88rem; font-weight:300; }

/* ── Preise ────────────────────────────────────────────────────── */
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-bottom:2rem; }
.pricing-card { background:var(--white); border:1.5px solid var(--border); padding:2.5rem; position:relative; display:flex; flex-direction:column; }
.pricing-highlight { border-color:var(--gold); box-shadow: 0 8px 32px rgba(201,168,76,.12); }
.pricing-badge { position:absolute; top:-1px; right:1.5rem; background:var(--gold); color:var(--ink); font-size:.68rem; font-weight:900; padding:.2rem .65rem; letter-spacing:.08em; text-transform:uppercase; }
.pricing-title { font-weight:900; font-size:1.15rem; margin-bottom:.25rem; color:var(--ink); }
.pricing-sub   { font-size:.78rem; color:var(--muted); margin-bottom:1.25rem; }
.pricing-price { font-size:2.5rem; font-weight:900; color:var(--ink); margin-bottom:.2rem; line-height:1; }
.pricing-price span { font-size:1rem; font-weight:400; color:var(--muted); }
.pricing-per-month { font-size:.75rem; color:var(--muted); margin-bottom:1.5rem; }
.pricing-features { list-style:none; margin-bottom:2rem; flex:1; }
.pricing-features li { font-size:.85rem; padding:.45rem 0; border-bottom:1px solid var(--border); color:var(--ink); display:flex; align-items:center; gap:.5rem; }
.pricing-features li:last-child { border-bottom:none; }
.pricing-note { text-align:center; font-size:.78rem; color:var(--muted); margin-top:1.5rem; }

/* Pricing-Buttons (eigene Klassen – kein Konflikt mit globalen .btn-outline) */
.pricing-btn {
  display:block; width:100%; text-align:center;
  padding:.75rem 1rem; font-size:.82rem; font-weight:700;
  letter-spacing:.05em; text-decoration:none;
  border:1.5px solid; cursor:pointer;
  transition:background .2s, color .2s, border-color .2s, transform .15s;
  font-family:inherit;
  box-sizing:border-box;
}
.pricing-btn--gold {
  background:var(--gold); color:var(--ink); border-color:var(--gold);
}
.pricing-btn--gold:hover {
  background:#b8922e; border-color:#b8922e; transform:translateY(-1px);
}
.pricing-btn--outline {
  background:transparent; color:var(--ink); border-color:var(--ink);
}
.pricing-btn--outline:hover {
  background:var(--ink); color:var(--white); border-color:var(--ink); transform:translateY(-1px);
}

/* ── Vorteile ───────────────────────────────────────────────────── */
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.feature-card  { padding:2rem; background:var(--white); border:1px solid var(--border); }
.feature-icon  { font-size:2rem; margin-bottom:1rem; }
.feature-card h3 { font-weight:700; margin-bottom:.5rem; }
.feature-card p  { font-size:.87rem; color:var(--muted); font-weight:300; line-height:1.7; }
.faq-list      { display:flex; flex-direction:column; gap:.75rem; max-width:720px; margin:0 auto; }
.faq-item      { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.faq-item summary { padding:1.1rem 1.5rem; font-weight:700; cursor:pointer; color:var(--white); list-style:none; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'＋'; float:right; color:var(--gold); }
.faq-item[open] summary::after { content:'－'; }
.faq-item p    { padding:0 1.5rem 1.25rem; font-size:.87rem; color:rgba(255,255,255,.5); font-weight:300; line-height:1.7; }

/* ── Autoren ───────────────────────────────────────────────────── */
.testimonial-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.testimonial-card { background:var(--white); border:1px solid var(--border); padding:2rem; display:flex; gap:1.5rem; }
.testimonial-avatar { width:52px; height:52px; border-radius:50%; background:var(--ink); color:var(--gold); font-weight:900; font-size:1.1rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.testimonial-quote { font-size:.9rem; color:var(--ink); font-weight:300; line-height:1.75; font-style:italic; margin-bottom:1rem; }
.testimonial-name  { font-weight:700; font-size:.9rem; }
.testimonial-meta  { font-size:.75rem; color:var(--muted); margin-top:.2rem; }

/* ── Kontakt ───────────────────────────────────────────────────── */
.contact-grid  { display:grid; grid-template-columns:1fr 1.5fr; gap:4rem; align-items:start; }
.contact-block { display:flex; gap:1.1rem; align-items:flex-start; margin-bottom:2rem; }
.contact-block-icon { font-size:1.5rem; margin-top:.15rem; }
.contact-block-label { font-size:.72rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); margin-bottom:.3rem; }
.contact-block-value { font-size:.9rem; line-height:1.7; }
.contact-block-value a { color:var(--ink); }

/* ── Impressum / Datenschutz ──────────────────────────────────── */
.prose        { max-width:760px; }
.prose h2     { font-weight:700; font-size:1.1rem; margin:2rem 0 .75rem; padding-bottom:.5rem; border-bottom:1px solid var(--border); }
.prose p, .prose address { font-size:.9rem; color:var(--ink); line-height:1.8; margin-bottom:1rem; font-style:normal; }
.prose a      { color:var(--gold); }

/* ── Plan-Badges (öffentlich) ──────────────────────────────────── */
.plan-badge        { display:inline-block; font-size:.65rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; padding:.2rem .55rem; }
.plan-starter      { background:#f0f0f0; color:#555; }
.plan-professional { background:rgba(201,168,76,.12); color:var(--gold); border:1px solid rgba(201,168,76,.3); }
.plan-publisher    { background:var(--ink); color:var(--gold); }

/* ── Responsive ────────────────────────────────────────────────── */
@media(max-width:900px) {
  .hero-grid       { grid-template-columns:1fr; gap:3rem; }
  .hero-visual     { display:none; }
  .stats-grid      { grid-template-columns:repeat(2,1fr); }
  .how-grid        { grid-template-columns:1fr; }
  .how-card        { border-right:none !important; }
  .features-grid   { grid-template-columns:1fr; }
  .pricing-grid    { grid-template-columns:1fr; }
  .testimonial-grid{ grid-template-columns:1fr; }
  .contact-grid    { grid-template-columns:1fr; gap:2rem; }
  .footer-inner    { grid-template-columns:1fr; gap:2rem; }
  .login-page-split{ grid-template-columns:1fr; }
  .login-left      { display:none; }
  .reg-wrap        { grid-template-columns:1fr; }
  .reg-sidebar     { padding:2rem; }
  .form-grid-2     { grid-template-columns:1fr; }
  .section         { padding:3rem 1.5rem; }
}

/* ── ERGÄNZUNGEN: öffentliche Seiten ────────────────────────────── */

/* Formular */
.form-hint       { font-size:.75rem; color:var(--muted); margin-top:.3rem; display:block; }
.form-full       { grid-column:1 / -1; }
.forgot          { text-align:right; margin-top:.35rem; }
.forgot a        { font-size:.78rem; color:var(--muted); text-decoration:none; }
.forgot a:hover  { color:var(--gold); }

/* Hero */
.hero-text       { } /* layout-Anker, kein eigenes Styling nötig */

/* Footer */
.footer-brand    { }

/* Testimonials */
.testimonial-body { flex:1; }

/* ═══════════════════════════════════════════════════════════════════
   HAMBURGER-MENÜ (MOBILE) – vollständig neu
   ═══════════════════════════════════════════════════════════════════ */

/* Desktop: nav-links normal sichtbar */
.nav-links { display:flex; align-items:center; gap:0; list-style:none; }

/* Hamburger-Button: auf Desktop versteckt */
.nav-mobile-btn {
  display:none;
  background:none; border:none;
  color:var(--white); cursor:pointer;
  padding:.4rem; z-index:1100;
  width:36px; height:36px;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
}
.nav-mobile-btn span {
  display:block; width:22px; height:2px;
  background:var(--white);
  transition:transform .3s, opacity .3s, width .3s;
  transform-origin:center;
}
/* X-Animation wenn .open */
nav.menu-open .nav-mobile-btn span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
nav.menu-open .nav-mobile-btn span:nth-child(2) { opacity:0; width:0; }
nav.menu-open .nav-mobile-btn span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

@media(max-width:900px) {
  .nav-mobile-btn { display:flex; }

  /* Menü: als Overlay von oben einklappen */
  .nav-links {
    display:flex !important; /* immer im DOM, nur versteckt */
    flex-direction:column;
    position:fixed;
    top:62px; left:0; right:0;
    background:rgba(18,18,18,.98);
    backdrop-filter:blur(18px);
    padding:1.5rem 0 2rem;
    gap:0;
    list-style:none;
    z-index:999;
    /* Ausgeblendet: nach oben verschoben + unsichtbar */
    transform:translateY(-110%);
    opacity:0;
    pointer-events:none;
    transition:transform .35s cubic-bezier(.4,0,.2,1), opacity .25s;
    border-bottom:1px solid var(--border-dark);
  }
  nav.menu-open .nav-links {
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .nav-links li { width:100%; }
  .nav-links a {
    display:block;
    padding:1rem 2rem;
    font-size:.85rem;
    letter-spacing:.12em;
    border-bottom:1px solid rgba(255,255,255,.05);
    color:rgba(255,255,255,.7);
  }
  .nav-links a:hover, .nav-links a.active { color:var(--gold); background:rgba(201,168,76,.06); }
  .nav-links a.nav-login {
    margin:1rem 2rem 0;
    display:block;
    text-align:center;
    padding:.75rem 1rem;
    background:var(--gold); color:var(--ink);
  }
  .nav-links a.nav-login:hover { background:var(--gold-light); }
}


/* ═══════════════════════════════════════════════════════════════════
   PARALLAX-SEKTIONEN & HINTERGRUNDBILDER (CC0 via Unsplash/Pexels)
   ═══════════════════════════════════════════════════════════════════

   Alle Bilder: Unsplash-Lizenz (kostenlos, auch kommerziell)
   – photo-1455390582262 = offenes Buch / Schreibtisch
   – photo-1524995997946 = Buchstapel warm
   – photo-1553729459 = Stadtsilhouette Berlin-artig
   – photo-1467579424161 = Briefkasten / Post
   – photo-1516414447565 = Schreibmaschine vintage
   ═══════════════════════════════════════════════════════════════════ */

/* Parallax-Basis: das eigentliche Scrollen macht JS,
   CSS stellt background-attachment:fixed als Fallback bereit */
.parallax-bg {
  position:relative;
  background-attachment:fixed;        /* Fallback für non-JS */
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  overflow:hidden;
}
/* iOS Safari hat kein background-attachment:fixed → abschalten */
@supports (-webkit-touch-callout:none) {
  .parallax-bg { background-attachment:scroll; }
}

/* Bild-Overlay zum Abdunkeln/Abmischen */
.parallax-bg::before {
  content:'';
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
}
.parallax-bg > * { position:relative; z-index:1; }

/* ── Overlay-Varianten ─────────────────────────────────────────── */
.parallax-overlay-dark::before   { background:rgba(15,12,8,.82); }
.parallax-overlay-darker::before { background:rgba(10,8,5,.90); }
.parallax-overlay-gold::before   {
  background:linear-gradient(135deg, rgba(15,12,8,.88) 55%, rgba(201,168,76,.18) 100%);
}
.parallax-overlay-split::before  {
  background:linear-gradient(to right, rgba(15,12,8,.92) 50%, rgba(15,12,8,.65) 100%);
}

/* ── Konkrete Sektions-Bilder ──────────────────────────────────── */

/* Hero Startseite – Schreibtisch mit aufgeschlagenem Buch */
.hero-home.parallax-bg {
  background-image:url('/assets/bg/impressumservice_LeseHits.webp');
}
/* Stats-Streifen – Bibliothek-Bokeh */
.parallax-books {
  background-image:url('/assets/bg/impressumservice-schrankwand.webp');
}
/* Ablauf-Sektion – Briefkasten / Post */
.parallax-mail {
  background-image:url('/assets/bg/impressumservice_schutz.webp');
}
/* Zitat-Sektion – Schreibmaschine vintage warm */
.parallax-typewriter {
  background-image:url('/assets/bg/impressumservice_Hand-Buchstapel.webp');
}
/* CTA-Sektion – Berlin-Stadtsilhouette */
.parallax-city {
  background-image:url('/assets/bg/impressumservice_brandenburger-tor.webp');
}
/* Autoren-Seite – Bücherstapel */
.parallax-stack {
  background-image:url('/assets/bg/impressumservice-buchregal.webp');
}
/* Preise-Seite – Schreibtisch clean */
.parallax-desk {
  background-image:url('/assets/bg/impressumservice_computer-handy-schreibblock.webp');
}
/* Kontakt-Seite – Umschlag */
.parallax-letter {
  background-image:url('/assets/bg/impressumservice_kontakt.webp');
}

/* ── Parallax-spezifisches Padding ─────────────────────────────── */
.parallax-hero  { min-height:calc(100vh - 62px); display:flex; align-items:center; }
.parallax-strip { padding:4.5rem 2rem; }
.parallax-tall  { padding:7rem 2rem; }

/* Helle Text-Overrides für Parallax-Sektionen auf dunklem Hintergrund */
.parallax-bg .section-label    { color:var(--gold); }
.parallax-bg .how-card         { background:rgba(255,255,255,.04); border-color:rgba(201,168,76,.18); }
.parallax-bg .how-title        { color:var(--white); }
.parallax-bg .how-text         { color:rgba(255,255,255,.55); }
.parallax-bg .how-num          { color:rgba(201,168,76,.1); }
.parallax-bg .section-title    { color:var(--white); }
.parallax-bg p.section-lead    { color:rgba(255,255,255,.5); }
.parallax-bg .big-quote-text   { color:var(--white); }

/* Stats auf dunklem Parallax */
.parallax-bg .stat-big  { color:var(--gold); }
.parallax-bg .stat-desc { color:rgba(255,255,255,.45); }

/* ── JS-Parallax: data-parallax-speed Elemente ─────────────────── */
.parallax-layer {
  will-change:transform;
  transition:transform .05s linear;  /* wird von JS überschrieben */
}

/* Reduzierte Bewegung respektieren */
@media(prefers-reduced-motion:reduce) {
  .parallax-bg            { background-attachment:scroll; }
  .parallax-layer         { transform:none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   STARTSEITE – Neue Komponenten
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero-Ergänzungen ──────────────────────────────────────────── */
h1.hero-title {
  font-size:clamp(2rem,4.5vw,3.4rem); font-weight:900;
  color:var(--white); line-height:1.08; margin-bottom:1.1rem;
}
h1.hero-title em { color:var(--gold); font-style:normal; }
.hero-checks {
  list-style:none; margin:1.5rem 0 0;
  display:flex; flex-direction:column; gap:.45rem;
}
.hero-checks li {
  font-size:.87rem; color:rgba(255,255,255,.6); font-weight:300;
}

/* ── Mockup-Inbox ─────────────────────────────────────────────── */
.mockup-inbox {
  background:rgba(14,12,10,.95);
  border:1px solid rgba(201,168,76,.2);
  box-shadow:0 28px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
  width:100%; max-width:390px;
  overflow:hidden;
  border-radius:6px;
}
.mockup-bar {
  background:rgba(201,168,76,.07);
  border-bottom:1px solid rgba(201,168,76,.12);
  padding:.6rem 1rem;
  display:flex; align-items:center; gap:.4rem;
}
.mockup-dot {
  width:10px; height:10px; border-radius:50%;
  flex-shrink:0;
}
.mockup-dot.r { background:#ff5f57; }
.mockup-dot.y { background:#ffbd2e; }
.mockup-dot.g { background:#28c840; }
.mockup-title {
  font-size:.63rem; color:rgba(255,255,255,.3);
  letter-spacing:.1em; text-transform:uppercase;
  margin-left:.4rem; font-weight:500; flex:1;
}
.mockup-bar-pill {
  font-size:.6rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase;
  background:rgba(201,168,76,.18);
  color:#c9a84c;
  padding:.1rem .45rem;
  border-radius:10px;
}
.mockup-letter {
  display:flex; align-items:center; gap:.75rem;
  padding:.8rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.04);
  transition:background .18s;
  cursor:default;
}
.mockup-letter:hover { background:rgba(255,255,255,.025); }
.mockup-letter.new   { background:rgba(201,168,76,.06); }
/* Icon-Wrapper */
.mockup-icon-wrap {
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.mockup-icon-wrap svg { width:14px; height:14px; }
.mockup-icon-mail { background:rgba(201,168,76,.15); color:#c9a84c; }
.mockup-icon-doc  { background:rgba(255,255,255,.07); color:rgba(255,255,255,.5); }
.mockup-icon-fwd  { background:rgba(52,152,219,.12);  color:#5dade2; }
/* Info */
.mockup-info  { flex:1; min-width:0; display:flex; flex-direction:column; gap:.18rem; }
.mockup-row-top { display:flex; justify-content:space-between; align-items:baseline; gap:.4rem; }
.mockup-sender{ font-size:.82rem; font-weight:700; color:rgba(255,255,255,.88); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mockup-date  { font-size:.68rem; color:rgba(255,255,255,.28); flex-shrink:0; }
.mockup-subject { font-size:.73rem; color:rgba(255,255,255,.38); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mockup-subject--fwd { color:#5dade2; font-size:.7rem; }
.mockup-badge {
  background:var(--gold); color:var(--ink);
  font-size:.58rem; font-weight:900; padding:.15rem .5rem;
  letter-spacing:.08em; text-transform:uppercase; flex-shrink:0;
  border-radius:2px;
}
.mockup-footer {
  padding:.6rem 1rem;
  border-top:1px solid rgba(255,255,255,.04);
  display:flex; align-items:center;
}
.mockup-secure {
  font-size:.67rem; color:rgba(255,255,255,.22);
  display:flex; align-items:center; gap:.35rem;
}

/* ── Trust-Bar ─────────────────────────────────────────────────── */
.trust-bar   { padding:3rem 2rem; }
.trust-grid  {
  display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  gap:1rem; align-items:center;
}
.trust-item  { text-align:center; }
.trust-num   {
  font-size:clamp(1.6rem,2.5vw,2.2rem); font-weight:900;
  color:var(--gold); line-height:1; margin-bottom:.3rem;
}
.trust-num span { font-size:.65em; font-weight:400; }
.trust-label { font-size:.72rem; color:rgba(255,255,255,.4); font-weight:300; letter-spacing:.04em; }
.trust-divider { width:1px; height:3rem; background:rgba(201,168,76,.2); margin:0 auto; }

/* ── Ablauf-Steps ─────────────────────────────────────────────── */
.section-head { margin-bottom:3rem; }
.section-head-center { text-align:center; }
.section-head-center .section-lead { margin:0 auto; }
.section-lead { color:var(--muted); font-size:.95rem; font-weight:300; line-height:1.8; max-width:560px; margin-top:.6rem; }

.steps-row {
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  gap:0; align-items:start;
}
.step-card {
  background:var(--white); border:1.5px solid var(--border);
  padding:2.2rem 2rem 2rem; position:relative;
  transition:box-shadow .3s, transform .3s;
}
.step-card:hover { box-shadow:0 12px 40px rgba(0,0,0,.1); transform:translateY(-3px); }
.step-card-num {
  position:absolute; top:1.5rem; right:1.5rem;
  font-size:3.5rem; font-weight:900; line-height:1;
  color:rgba(201,168,76,.1);
}
.step-card-icon { font-size:2rem; margin-bottom:1rem; display:block; }
.step-card-title { font-weight:700; font-size:1.05rem; margin-bottom:.6rem; color:var(--ink); }
.step-card-text  { font-size:.87rem; color:var(--muted); font-weight:300; line-height:1.75; }

.steps-connector {
  display:flex; align-items:center; justify-content:center;
  padding-top:3.5rem;
}
.steps-connector span {
  display:block; width:40px; height:2px;
  background:linear-gradient(to right, var(--gold), rgba(201,168,76,.2));
}

/* ── Features 2-Spalten ───────────────────────────────────────── */
.features-2col {
  display:grid; grid-template-columns:1fr 1fr; gap:1.5rem;
  margin-top:2.5rem;
}
.feat-item {
  display:flex; gap:1.1rem; align-items:flex-start;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(201,168,76,.12);
  padding:1.5rem 1.4rem;
  transition:background .25s;
}
.feat-item:hover { background:rgba(255,255,255,.07); }
.feat-icon { font-size:1.7rem; flex-shrink:0; margin-top:.1rem; }
.feat-item strong { display:block; font-size:.95rem; font-weight:700; color:var(--white); margin-bottom:.35rem; }
.feat-item p { font-size:.84rem; color:rgba(255,255,255,.5); font-weight:300; line-height:1.7; margin:0; }

/* ── Zitat-Showcase ───────────────────────────────────────────── */
.quote-showcase {
  max-width:740px; margin:0 auto; text-align:center;
  position:relative;
}
.quote-mark {
  font-size:8rem; line-height:.6; color:var(--gold);
  font-family:Georgia, serif; font-style:italic;
  opacity:.4; margin-bottom:-.5rem;
  user-select:none;
}
.quote-showcase-text {
  font-size:clamp(1.05rem,1.8vw,1.3rem); font-weight:300;
  line-height:1.75; font-style:italic;
  color:rgba(255,255,255,.88);
  display:block; margin-bottom:2.2rem;
}
.quote-showcase-author {
  display:flex; align-items:center; gap:1rem;
  justify-content:center;
}
.quote-author-avatar {
  width:46px; height:46px; border-radius:50%;
  background:rgba(201,168,76,.15);
  color:var(--gold); font-weight:900; font-size:.95rem;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid rgba(201,168,76,.35);
  flex-shrink:0;
}
.quote-showcase-author strong { display:block; color:var(--white); font-size:.9rem; }
.quote-showcase-author span   { font-size:.78rem; color:rgba(255,255,255,.4); }

/* ── Preise-Preview ───────────────────────────────────────────── */
.plans-preview {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.5rem; margin-top:2.5rem;
}
.plan-preview-card {
  background:var(--white); border:1.5px solid var(--border);
  padding:2.5rem 2rem; position:relative;
}
.plan-preview-featured {
  border-color:var(--gold);
  box-shadow:0 0 0 1px var(--gold), 0 12px 40px rgba(201,168,76,.12);
  transform:translateY(-6px);
}
.ppc-badge {
  position:absolute; top:-1px; right:1.5rem;
  background:var(--gold); color:var(--ink);
  font-size:.65rem; font-weight:900; padding:.2rem .7rem;
  letter-spacing:.08em; text-transform:uppercase;
}
.ppc-name  { font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:.75rem; }
.ppc-price {
  font-size:2.8rem; font-weight:900; color:var(--ink);
  line-height:1; margin-bottom:.3rem;
}
.ppc-price span { font-size:.9rem; font-weight:300; color:var(--muted); }
.ppc-month { font-size:.75rem; color:var(--muted); margin-bottom:1.4rem; }
.ppc-list {
  list-style:none; margin-bottom:2rem;
}
.ppc-list li {
  font-size:.85rem; padding:.4rem 0;
  border-bottom:1px solid var(--border);
  color:var(--ink); font-weight:300;
}
.ppc-list li::before { content:'✓ '; color:var(--gold); font-weight:700; }
/* ppc-btn: nutzt pricing-btn Basisklasse, füllt Karte voll aus */
.ppc-btn { display:block; width:100%; text-align:center; box-sizing:border-box; }
.plans-note {
  text-align:center; margin-top:1.5rem;
  font-size:.8rem; color:var(--muted);
}
.plans-note a { color:var(--gold); text-decoration:none; font-weight:700; }
.plans-note a:hover { text-decoration:underline; }

/* ── CTA-Final ─────────────────────────────────────────────────── */
.cta-final { text-align:center; }
.cta-final-title {
  font-size:clamp(1.8rem,3vw,2.8rem); font-weight:900;
  color:var(--white); line-height:1.15; margin:.75rem 0 1rem;
}
.cta-final-sub  { font-size:1rem; color:rgba(255,255,255,.5); font-weight:300; max-width:560px; margin:0 auto 2.5rem; }
.cta-final-actions { display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap; }
.cta-fine { font-size:.75rem; color:rgba(255,255,255,.25); margin-top:1.5rem; letter-spacing:.04em; }

/* ── Responsive Startseite ────────────────────────────────────── */
@media(max-width:1024px) {
  .hero-grid   { grid-template-columns:1fr; gap:3rem; }
  .hero-visual { display:flex; justify-content:center; }
  .steps-row   { grid-template-columns:1fr; gap:1.2rem; }
  .steps-connector { display:none; }
  .trust-grid  { grid-template-columns:1fr 1fr; gap:2rem; }
  .trust-divider { display:none; }
  .features-2col { grid-template-columns:1fr; }
  .plans-preview { grid-template-columns:1fr; gap:1.2rem; }
  .plan-preview-featured { transform:none; }
}
@media(max-width:600px) {
  .mockup-inbox { max-width:100%; }
  .trust-grid   { grid-template-columns:1fr 1fr; }
  h1.hero-title { font-size:2rem; }
}