/* =====================================================================
   Oeffentliche Kategorie-Landingpages
   Nutzt bewusst dieselben Marken-Tokens, Container, Header, Footer,
   Buttons und Anzeigenkarten wie die oeffentliche Nabori-Startseite.
   Nur der redaktionelle Seiteninhalt ist kategoriespezifisch.
   ===================================================================== */

body.seo-cat-page{
  margin:0;
  color:var(--ink);
  background:radial-gradient(circle at 8% 26%, rgba(244,122,55,.045), transparent 28%),
    linear-gradient(180deg,var(--canvas) 0%,var(--canvas) 100%);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased}
.seo-cat-page main{ min-height:70vh}
.seo-wrap{
  width:100%;
  max-width:var(--lp-max,1280px);
  margin-inline:auto;
  padding-inline:var(--lp-pad,clamp(20px,3.3vw,40px))}

/* Hero: gleiche Ruhe, Typografie und Abstaende wie die Startseite. */
.seo-hero{
  position:relative;
  overflow:hidden;
  padding:144px 0 80px;
  border-bottom:1px solid rgb(var(--shade) / .055)}
.seo-hero::before{
  content:"";
  position:absolute;
  width:560px;
  height:560px;
  right:-220px;
  top:-240px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(244,122,55,.095),transparent 68%);
  pointer-events:none}
.seo-breadcrumb{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:32px;
  color:var(--muted);
  font-size: 12px;
  font-weight:650; line-height:1.4}
.seo-breadcrumb a{ transition:color .15s ease}
.seo-breadcrumb a:hover{ color:var(--primary-text)}

.seo-hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(320px,.72fr);
  gap:48px;
  align-items:center}
.seo-category-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  margin-bottom:20px}
.seo-category-icon img{
  width:42px!important;
  height: 44px !important;
  object-fit:contain;
  filter:none!important;
  opacity:.78}
.seo-kicker,.seo-section-eyebrow,.seo-section-head>p{
  margin:0 0 8px;
  color:var(--primary-text);
  font-size: 12px;
  font-weight:800;
  letter-spacing:.095em;
  text-transform:uppercase; line-height:1.4}
.seo-hero h1{
  max-width:810px;
  margin:0;
  font-family:var(--font-display);
  font-size: var(--fs-display);
  line-height:1.02;
  letter-spacing:-.048em;
  font-weight:750;
  text-wrap:balance}
.seo-lead{
  max-width:700px;
  margin:20px 0 0;
  color:var(--muted);
  font-size: 16px;
  line-height:1.7}
.seo-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.seo-btn{
  min-height: 44px;
  padding:0 20px;
  border:1px solid transparent;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size: 13px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease}
.seo-btn:hover{ transform:translateY(-1px)}
.seo-btn-primary{
  color:var(--inverse);
  background:var(--primary-strong);
  box-shadow:0 4px 12px rgba(237,112,43,.19)}
.seo-btn-primary:hover{ background:var(--primary-action); box-shadow:0 7px 18px rgba(237,112,43,.23)}
.seo-btn-secondary{
  color:var(--ink);
  background:rgb(var(--glass) / .8);
  border-color:var(--border);
  box-shadow:none}
.seo-btn-secondary:hover{ background:var(--surface); border-color:var(--border-strong)}
.seo-trust-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 20px;
  margin-top:24px;
  color:var(--muted);
  font-size: 12px;
  font-weight:650; line-height:1.4}
.seo-trust-row span{ display:inline-flex; align-items:center; gap:4px}
.seo-trust-row span:not(:last-child)::after{
  content:"";
  width:3px;
  height:3px;
  margin-left:12px;
  border-radius:50%;
  background:var(--border)}
.seo-trust-row b{ color:var(--ink); font-size: 12px; line-height:1.4}

.seo-hero-card{
  padding:24px;
  background:rgb(var(--glass) / .9);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow-card)}
.seo-card-label{
  color:var(--primary-text);
  font-size: 12px;
  font-weight:800;
  letter-spacing:.095em;
  text-transform:uppercase; line-height:1.4}
.seo-hero-card h2{
  margin:8px 0 24px;
  font-family:var(--font-display);
  font-size: 22px;
  line-height:1.18;
  letter-spacing:-.03em}
.seo-hero-card ol{ list-style:none; margin:0; padding:0; display:grid}
.seo-hero-card li{
  display:grid;
  grid-template-columns:32px 1fr;
  gap:12px;
  padding:16px 0;
  border-top:1px solid var(--border)}
.seo-hero-card li>span{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--primary-text);
  background:var(--primary-soft);
  font-size: 12px;
  font-weight:800; line-height:1.4}
.seo-hero-card b{ display:block; margin-bottom:4px; font-size: 12px; line-height:1.4}
.seo-hero-card small{ display:block; color:var(--muted); font-size: 12px; line-height:1.52}

/* Inhalt: dieselbe Karten-/Spacing-Sprache wie Nabori. */
.seo-section{ padding:64px 0}
.seo-section-tint{
  background:rgb(var(--glass) / .42);
  border-block:1px solid rgb(var(--shade) / .055)}
.seo-section-head{ margin-bottom:24px}
.seo-section-head h2,.seo-local-grid h2,.seo-faq-intro h2,.seo-final-inner h2{
  margin:0;
  font-family:var(--font-display);
  font-size: 36px;
  line-height:1.1;
  letter-spacing:-.035em;
  font-weight:750;
  text-wrap:balance}
.seo-section-head-row{ display:flex; justify-content:space-between; align-items:end; gap:20px}
.seo-topic-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.seo-topic-card{
  min-height:200px;
  padding:20px;
  display:flex;
  flex-direction:column;
  background:rgb(var(--glass) / .94);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(32,28,24,.015)}
.seo-topic-num{ margin-bottom:auto; color:var(--primary-text); font-size: 12px; font-weight:800; line-height:1.4}
.seo-topic-card h3{ margin:24px 0 8px; font-family:var(--font-display); font-size: 16px; letter-spacing:-.02em; line-height:1.5}
.seo-topic-card p{ margin:0; color:var(--muted); font-size: 12px; line-height:1.6}
.seo-local-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:start}
.seo-local-grid>div:last-child{ padding-top:20px}
.seo-local-grid>div:last-child p{ margin:0 0 16px; color:var(--muted); font-size: 16px; line-height:1.72}
.seo-text-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  color:var(--primary-text);
  font-size: 12px;
  font-weight:700;
  text-decoration:none; line-height:1.4}
.seo-text-link span{ transition:transform .16s ease}
.seo-text-link:hover span{ transform:translateX(3px)}

/* Anzeigen verwenden exakt dieselbe .lp-card-Komponente wie die Startseite. */
.seo-public-listings{ margin-top:4px}
.seo-empty{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:24px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px}
.seo-empty b{ font-size: 14px; line-height:1.45}
.seo-empty p{ margin:4px 0 0; color:var(--muted); font-size: 12px; line-height:1.55}

.seo-faq-grid{ display:grid; grid-template-columns:.72fr 1.28fr; gap:80px}
.seo-faq-intro>p:last-child{ color:var(--muted); font-size: 13px; line-height:1.65}
.seo-faq-list{ border-top:1px solid var(--border)}
.seo-faq-list details{ border-bottom:1px solid var(--border)}
.seo-faq-list summary{
  list-style:none;
  cursor:pointer;
  padding:20px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-size: 13px;
  font-weight:750; line-height:1.4}
.seo-faq-list summary::-webkit-details-marker{ display:none}
.seo-faq-list summary span{ color:var(--muted); font-size: 18px; font-weight:400; transition:.2s ease; line-height:1.5}
.seo-faq-list details[open] summary span{ transform:rotate(45deg)}
.seo-faq-list details p{ margin:-4px 48px 20px 0; color:var(--muted); font-size: 12px; line-height:1.7}

.seo-related-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
.seo-related-card{
  min-height:74px;
  padding:12px 16px;
  display:grid;
  grid-template-columns:32px 1fr auto;
  align-items:center;
  gap:12px;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  text-decoration:none;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.seo-related-card:hover{ transform:translateY(-2px); border-color:var(--border-strong); box-shadow:var(--shadow-hover)}
.seo-related-card>span{ display:grid; place-items:center}
.seo-related-card img{ filter:none!important; opacity:.72}
.seo-related-card b{ font-size: 12px; line-height:1.4}
.seo-related-card i{ color:var(--primary-text); font-style:normal}

.seo-final-cta{ padding:0 0 64px}
.seo-final-inner{
  position:relative;
  overflow:hidden;
  padding:32px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  background:linear-gradient(135deg,var(--canvas) 0%,var(--brand-soft) 100%);
  border:1px solid rgba(244,122,55,.16);
  border-radius:16px}
.seo-final-inner::after{
  content:"";
  position:absolute;
  width:250px;
  height:250px;
  right:-90px;
  top:-140px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(244,122,55,.11),transparent 68%)}
.seo-final-inner>div,.seo-final-inner>a{ position:relative; z-index:1}
.seo-final-inner p{ margin:0 0 8px; color:var(--primary-text); font-size: 12px; font-weight:700; line-height:1.4}
.seo-final-inner h2{ max-width:720px; font-size: 28px; line-height:1.2}

@media(max-width:960px){
  .seo-hero{ padding-top:128px}
  .seo-hero-grid{ grid-template-columns:1fr; gap:32px}
  .seo-hero-card{ max-width:680px}
  .seo-topic-grid{ grid-template-columns:repeat(2,minmax(0,1fr))}
  .seo-local-grid,.seo-faq-grid{ grid-template-columns:1fr; gap:24px}
  .seo-local-grid>div:last-child{ padding-top:0}
  .seo-related-grid{ grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:767px){
  .seo-wrap{ padding-inline:12px}
  .seo-hero{ padding:96px 0 40px}
  .seo-breadcrumb{ margin-bottom:24px; font-size: 12px; line-height:1.4}
  .seo-category-icon{ width:40px; height: 44px; margin-bottom:12px}
  .seo-category-icon img{ width:36px!important; height: 44px !important}
  .seo-hero h1{ font-size: var(--fs-display); line-height:1.04; letter-spacing:-.04em}
  .seo-lead{ margin-top:16px; font-size: 14px; line-height:1.62}
  .seo-actions{ margin-top:20px; display:grid; grid-template-columns:1fr; gap:8px}
  .seo-btn{ width:100%; min-height: 44px}
  .seo-trust-row{ margin-top:20px; gap:8px 12px; font-size: 12px; line-height:1.4}
  .seo-trust-row span:not(:last-child)::after{ margin-left:8px}
  .seo-hero-card{ padding:20px; border-radius:16px}
  .seo-hero-card h2{ font-size: 18px; line-height:1.5}
  .seo-section{ padding:48px 0}
  .seo-section-head{ margin-bottom:20px}
  .seo-section-head h2,.seo-local-grid h2,.seo-faq-intro h2{ font-size: 28px; line-height:1.2}
  .seo-section-head-row{ align-items:flex-start}
  .seo-section-head-row>.seo-text-link{ display:none}
  .seo-topic-grid{ grid-template-columns:1fr; gap:8px}
  .seo-topic-card{ min-height:150px; padding:20px}
  .seo-topic-card h3{ margin-top:16px}
  .seo-local-grid>div:last-child p{ font-size: 14px; line-height:1.45}
  .seo-empty{ align-items:flex-start; flex-direction:column; padding:20px}
  .seo-faq-list summary{ padding:16px 0; font-size: 12px; line-height:1.4}
  .seo-faq-list details p{ margin-right:12px; font-size: 12px; line-height:1.4}
  .seo-related-grid{ grid-template-columns:1fr; gap:8px}
  .seo-related-card{ min-height:62px; border-radius:16px}
  .seo-final-cta{ padding-bottom:40px}
  .seo-final-inner{ padding:24px 20px; border-radius:16px; flex-direction:column; align-items:flex-start}
  .seo-final-inner h2{ font-size: 22px; line-height:1.25}
  .seo-final-inner .seo-btn{ width:100%}
}

/* V440: dieselbe Nabori-Controlsprache wie in der eingeloggten App. */
.seo-btn{
  min-height: 44px;
  border-radius:16px !important;
  padding-top:0;
  padding-bottom:0;
  display:inline-flex;
  align-items:center;
  justify-content:center}

/* =====================================================================
   V443 — SEO-Seiten folgen demselben nabori Forms-/Boxensystem.
   Diese Datei wird NACH style.css geladen; deshalb stehen die Overrides
   bewusst auch hier am Ende.
   ===================================================================== */
.seo-btn{
  height: 44px !important;
  min-height: 44px !important;
  border-radius:12px !important;
  padding:0 16px !important}
.seo-hero-card,
.seo-topic-card,
.seo-empty,
.seo-related-card{
  border-radius:16px !important}

/* V462: SEO landing controls follow the global nabori control hierarchy. */
.seo-btn,
.seo-btn-primary{
  min-height: 48px !important;
  height: 48px !important;
  padding:0 20px !important;
  border-radius:16px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important}
@media (max-width:899px){
  .seo-btn,
  .seo-btn-primary{
    min-height:48px !important;
    height:48px !important}
}

/* V465: text actions use minimum heights so labels never get squeezed. */
.seo-btn,
.seo-btn-primary{
  height:auto !important;
  min-height: 48px !important;
  padding:8px 20px !important;
  line-height:1.2 !important}
@media (max-width:899px){
  .seo-btn,
  .seo-btn-primary{
    height:auto !important;
    min-height:48px !important;
    padding:8px 16px !important}
}