/* ====================  css/seo-cms.css  ====================
   „SEO für jedes CMS“ (05.10.2026): /seo/ und /seo/<system>/. Steckbrief im Einstieg (Papierblatt wie .beleg),
   Übersicht der Systeme nach Gruppen, Werkzeug-Karten. Bausteine aus welt.css/seiten.css (.liste, .ablauf, .faq,
   .verwandt) bleiben, wie sie sind.

   Die Eingriffstiefe trägt Farbe UND Form: volle Kontrolle Punkt (Blau), weitgehend Ring (Tiefblau),
   begrenzt Quadrat (Bernstein) — Baukästen, bei denen Server und Code beim Anbieter bleiben. */

:root{
  --seo-voll: var(--blau);
  --seo-weit: var(--blau-tief);
  --seo-begrenzt: #d99a1e;
  --seo-dunkel: radial-gradient(115% 92% at 35% 50%, rgba(5,6,12,.95) 0%, rgba(5,6,12,.84) 55%, transparent 86%);
}
[data-tiefe="voll"]{ --seo-farbe: var(--seo-voll) }
[data-tiefe="weit"]{ --seo-farbe: var(--seo-weit) }
[data-tiefe="begrenzt"]{ --seo-farbe: var(--seo-begrenzt) }

.seo-zurueck{ color: inherit; text-decoration: none; border-bottom: 1px solid var(--linie); padding-bottom: 2px }
.seo-zurueck:hover{ color: var(--text); border-bottom-color: var(--papier) }

/* ---------- Steckbrief im Einstieg ----------
   position: relative, damit das Blatt über dem Abdunkler des Texts daneben liegt (.satz::before ragt 6vw herüber). */
.seo-steckbrief{ position: relative }
.seo-zeilen{ margin-top: 6px }
.seo-zeilen > div{
  display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 4px 14px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid rgba(22,22,26,.10);
}
.seo-zeilen > div:last-child{ border-bottom: 0 }
.seo-zeilen dt{ font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(22,22,26,.52) }
.seo-zeilen dd{ font-size: .94rem; line-height: 1.45; color: var(--tinte) }
.seo-tiefe{
  display: inline-block; margin-right: .4em; padding: 2px 8px; border-radius: 2px;
  font-size: .78rem; font-weight: 600; color: #fff; background: var(--seo-farbe, var(--blau));
}
.seo-tiefe[data-tiefe="begrenzt"]{ color: var(--tinte) }
@media (max-width: 420px){ .seo-zeilen > div{ grid-template-columns: minmax(0, 1fr) } }

/* ---------- Werkzeug-Karten (Unterseiten) ---------- */
.seo-karten{
  list-style: none; position: relative;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 56px);
}
.seo-karten::before{
  content: ""; position: absolute; inset: -4vh -5vw; z-index: -1; pointer-events: none; background: var(--seo-dunkel);
}
.seo-karten li{ padding: 22px 0; border-top: 1px solid var(--linie) }
.seo-karten h3{ font-size: 1.04rem; font-weight: 500; color: var(--text); margin-bottom: .45em }
.seo-karten p{ font-size: .95rem; max-width: 58ch }
@media (max-width: 760px){ .seo-karten{ grid-template-columns: minmax(0, 1fr) } }

/* ---------- Übersicht: Systeme nach Gruppen ---------- */
.seo-legende{ list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; position: relative }
.seo-legende li{ display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--text-leise) }
.seo-punkt{
  display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%;
  background: var(--seo-farbe, var(--text-fern));
}
[data-tiefe="weit"] .seo-punkt{ background: transparent; box-shadow: inset 0 0 0 2px var(--seo-farbe) }
[data-tiefe="begrenzt"] .seo-punkt{ border-radius: 1px }
.seo-katalog{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 52px) clamp(24px, 3vw, 44px); position: relative;
}
.seo-katalog::before, .seo-legende::before{
  content: ""; position: absolute; inset: -4vh -5vw; z-index: -1; pointer-events: none; background: var(--seo-dunkel);
}
@media (max-width: 1000px){ .seo-katalog{ grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 640px){ .seo-katalog{ grid-template-columns: minmax(0, 1fr) } }
.seo-gruppe{ border-top: 2px solid var(--blau); padding-top: 18px }
.seo-gruppe:nth-child(2){ border-top-color: var(--blau-tief) }
.seo-gruppe:nth-child(3){ border-top-color: var(--violett) }
.seo-gruppe h3{ font-size: clamp(1.1rem, 1.5vw, 1.35rem); text-transform: uppercase; letter-spacing: -.01em }
.seo-gruppe > p{ margin: .5em 0 .8em; font-size: .92rem; color: var(--text-leise) }
.seo-gruppe ul{ list-style: none }
.seo-gruppe a{
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px;
  padding: 11px 0; border-bottom: 1px solid var(--linie); color: var(--text); text-decoration: none;
}
.seo-gruppe a .seo-punkt{ grid-row: 1; align-self: center }
.seo-gruppe a .b{ grid-column: 2; font-weight: 500; font-size: .98rem; color: var(--text) }
.seo-gruppe a > span:not(.seo-punkt){ grid-column: 2; font-size: .84rem; color: var(--text-leise) }
.seo-gruppe a::after{
  content: "→"; grid-column: 3; grid-row: 1 / span 2; align-self: center;
  color: var(--text-leise); transition: transform .14s ease-out;
}
.seo-gruppe a:hover .b{ color: #fff }
.seo-gruppe a:hover::after{ transform: translateX(3px) }
.seo-gruppe a:focus-visible{ outline: 2px solid var(--papier); outline-offset: 3px }

/* ---------- Garantie (René 05.10.2026) ----------
   Ein Siegel in der Zeile unter den Knöpfen; der Abschnitt selbst bleibt ruhig wie jede Liste. */
.seo-garantie-zeile{ margin-top: 1.2em; font-size: .9rem; color: var(--text-leise); max-width: 60ch }
.seo-siegel{
  display: inline-block; margin-right: .5em; padding: 3px 9px; border-radius: 2px; vertical-align: 1px;
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: #fff;
  background: linear-gradient(96deg, var(--blau), var(--violett));
}
.seo-link{ color: inherit; text-decoration: none; border-bottom: 1px solid var(--linie); padding-bottom: 1px }
.seo-link:hover{ color: var(--text); border-bottom-color: var(--papier) }
.seo-steckbrief .seo-link{ color: var(--blau-tief); border-bottom-color: rgba(48,96,240,.35) }
.seo-garantie h2{ text-wrap: balance }
.seo-garantie-fuss{ position: relative }