/* ==========================================================================
   surakarta.eu – Seiten-Layer (Landing & Legal – Lead-Markup)
   Klassen-Vertrag für app/views/pages/**:
     Hero:        .sk-hero, .sk-hero-inner, .sk-hero-badge, .sk-hero-title,
                  .sk-hero-sub, .sk-hero-actions, .sk-hero-art (Board-Deko)
     Features:    .sk-section, .sk-section-head, .sk-section-title,
                  .sk-section-sub, .sk-feature-grid, .sk-feature,
                  .sk-feature-icon, .sk-feature-title, .sk-feature-text
     Stufen:      .sk-levels, .sk-level, .sk-level-stars, .sk-level-name,
                  .sk-level-desc
     Teaser:      .sk-teaser, .sk-teaser-text, .sk-teaser-actions
     Prosa:       .sk-prose (Legal-Seiten), .sk-prose h2/h3, .sk-prose table
   ========================================================================== */

/* ---------- Hero ---------- */
.sk-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-xl);
  background:
    radial-gradient(720px 380px at 82% 8%, var(--sk-accent2-soft), transparent 62%),
    radial-gradient(620px 420px at 12% 90%, var(--sk-accent-soft), transparent 60%),
    var(--sk-surface);
  padding: clamp(var(--sk-space-6), 6vw, var(--sk-space-9));
}

.sk-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.sk-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sk-space-2);
  padding: var(--sk-space-1) var(--sk-space-3);
  border-radius: var(--sk-radius-pill);
  background: var(--sk-accent-soft);
  border: 1px solid color-mix(in srgb, var(--sk-accent) 40%, transparent);
  color: var(--sk-accent-text);
  font-size: var(--sk-font-xs);
  font-weight: 700;
  margin-bottom: var(--sk-space-4);
}

.sk-hero-title {
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  font-weight: 850;
  letter-spacing: -0.025em;
  line-height: 1.06;
  color: var(--sk-text-strong);
  margin-bottom: var(--sk-space-4);
  text-wrap: balance;
}

.sk-hero-title .sk-hero-accent {
  color: var(--sk-accent-text);
}

.sk-hero-sub {
  font-size: var(--sk-font-lg);
  color: var(--sk-muted);
  max-width: 56ch;
  margin-bottom: var(--sk-space-6);
}

.sk-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-space-3);
}

/* Deko-Minibrett rechts im Hero (nur Desktop) */
.sk-hero-art {
  position: absolute;
  right: clamp(-40px, -2vw, 0px);
  top: 50%;
  transform: translateY(-50%) rotate(-6deg);
  width: clamp(280px, 30vw, 430px);
  opacity: 0.9;
  pointer-events: none;
  display: block;
}
@media (max-width: 980px) {
  .sk-hero-art {
    display: none;
  }
}

/* ---------- Sektionen ---------- */
.sk-section {
  padding-block: var(--sk-space-7);
}

.sk-section-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--sk-space-6);
}

.sk-section-title {
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sk-text-strong);
  margin-bottom: var(--sk-space-2);
}

.sk-section-sub {
  color: var(--sk-muted);
  font-size: var(--sk-font-lg);
}

/* ---------- Feature-Grid ---------- */
.sk-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sk-space-4);
}
@media (max-width: 980px) {
  .sk-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .sk-feature-grid {
    grid-template-columns: 1fr;
  }
}

.sk-feature {
  background: var(--sk-surface);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-lg);
  padding: var(--sk-space-5);
  display: grid;
  gap: var(--sk-space-3);
  align-content: start;
  transition: transform var(--sk-dur-base) var(--sk-ease-out),
    border-color var(--sk-dur-base) var(--sk-ease-out),
    box-shadow var(--sk-dur-base) var(--sk-ease-out);
}
.sk-feature:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--sk-accent) 40%, var(--sk-border));
  box-shadow: var(--sk-shadow-md);
}

.sk-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--sk-radius-md);
  display: grid;
  place-items: center;
  background: var(--sk-accent-soft);
  color: var(--sk-accent);
}
.sk-feature:nth-child(3n + 2) .sk-feature-icon,
.sk-feature:nth-child(3n + 5) .sk-feature-icon {
  background: var(--sk-accent2-soft);
  color: var(--sk-accent2);
}
.sk-feature-icon svg {
  width: 24px;
  height: 24px;
}

.sk-feature-title {
  font-size: var(--sk-font-lg);
  font-weight: 700;
  color: var(--sk-text-strong);
}

.sk-feature-text {
  color: var(--sk-muted);
  font-size: var(--sk-font-sm);
}

/* ---------- Stufen-Listen (Bots) ---------- */
.sk-levels {
  display: grid;
  gap: var(--sk-space-3);
  counter-reset: sk-level;
}

.sk-level {
  display: flex;
  align-items: center;
  gap: var(--sk-space-4);
  padding: var(--sk-space-4) var(--sk-space-5);
  background: var(--sk-surface);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-lg);
  counter-increment: sk-level;
  transition: border-color var(--sk-dur-fast) var(--sk-ease-out),
    background-color var(--sk-dur-fast) var(--sk-ease-out);
}
.sk-level:hover {
  border-color: color-mix(in srgb, var(--sk-accent) 40%, var(--sk-border));
  background: color-mix(in srgb, var(--sk-accent-soft) 40%, var(--sk-surface));
}

.sk-level-num {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--sk-radius-md);
  display: grid;
  place-items: center;
  font-weight: 800;
  color: var(--sk-accent-text);
  background: var(--sk-accent-soft);
  font-variant-numeric: tabular-nums;
}
.sk-level-num::before {
  content: counter(sk-level);
}

.sk-level-body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.sk-level-name {
  font-weight: 700;
  color: var(--sk-text-strong);
}

.sk-level-desc {
  color: var(--sk-muted);
  font-size: var(--sk-font-sm);
}

.sk-level-stars {
  color: var(--sk-warn);
  font-size: var(--sk-font-sm);
  letter-spacing: 0.15em;
  white-space: nowrap;
  flex: none;
}
.sk-level-stars[aria-label] {
  cursor: default;
}

/* ---------- Teaser ---------- */
.sk-teaser {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sk-space-5);
  flex-wrap: wrap;
  padding: var(--sk-space-6);
  background: linear-gradient(120deg, var(--sk-accent-soft), var(--sk-surface) 45%, var(--sk-accent2-soft));
  border: 1px solid color-mix(in srgb, var(--sk-accent) 35%, var(--sk-border));
  border-radius: var(--sk-radius-xl);
}
.sk-teaser-title {
  font-size: var(--sk-font-2xl);
  font-weight: 800;
  color: var(--sk-text-strong);
  margin-bottom: var(--sk-space-1);
}
.sk-teaser-text {
  color: var(--sk-muted);
  max-width: 52ch;
}
.sk-teaser-actions {
  display: flex;
  gap: var(--sk-space-2);
  flex-wrap: wrap;
}

/* ---------- Prosa (Regeln, Legal, AGB) ---------- */
.sk-prose {
  max-width: 78ch;
  margin-inline: auto;
  font-size: var(--sk-font-md);
  line-height: var(--sk-lh-body);
  color: var(--sk-text);
}

.sk-prose h2 {
  font-size: var(--sk-font-2xl);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--sk-text-strong);
  margin: var(--sk-space-7) 0 var(--sk-space-3);
}
.sk-prose h2:first-child {
  margin-top: 0;
}
.sk-prose h3 {
  font-size: var(--sk-font-xl);
  font-weight: 700;
  color: var(--sk-text-strong);
  margin: var(--sk-space-5) 0 var(--sk-space-2);
}
.sk-prose p {
  margin-bottom: var(--sk-space-4);
}
.sk-prose ul,
.sk-prose ol {
  margin: 0 0 var(--sk-space-4);
  padding-left: 1.5em;
  display: grid;
  gap: var(--sk-space-2);
}
.sk-prose ul {
  list-style: disc;
}
.sk-prose ol {
  list-style: decimal;
}
.sk-prose li::marker {
  color: var(--sk-accent-text);
}
.sk-prose strong {
  color: var(--sk-text-strong);
}
.sk-prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sk-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sk-space-4) 0 var(--sk-space-5);
  font-size: var(--sk-font-sm);
}
.sk-prose th,
.sk-prose td {
  border: 1px solid var(--sk-border);
  padding: var(--sk-space-2) var(--sk-space-3);
  text-align: left;
}
.sk-prose th {
  background: var(--sk-bg-soft);
  color: var(--sk-text-strong);
  font-weight: 700;
}
.sk-prose blockquote {
  border-left: 3px solid var(--sk-accent);
  padding: var(--sk-space-2) var(--sk-space-4);
  margin: var(--sk-space-4) 0;
  background: var(--sk-accent-soft);
  border-radius: 0 var(--sk-radius-md) var(--sk-radius-md) 0;
  color: var(--sk-muted);
}
.sk-prose hr {
  border: none;
  border-top: 1px solid var(--sk-border);
  margin: var(--sk-space-6) 0;
}
.sk-prose code {
  font-family: var(--sk-font-mono);
  font-size: 0.9em;
  background: var(--sk-surface-2);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-sm);
  padding: 1px 6px;
}

/* Seite mit schmaler Prosa-Spalte (Legal) */
.sk-page-head {
  max-width: 78ch;
  margin: 0 auto var(--sk-space-6);
  text-align: center;
}
.sk-page-head .sk-h1 {
  margin-bottom: var(--sk-space-2);
}
.sk-page-head .sk-lead {
  margin-inline: auto;
}

/* Karte um Prosa-Inhalte */
.sk-prose-card {
  background: var(--sk-surface);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-xl);
  padding: clamp(var(--sk-space-5), 5vw, var(--sk-space-8));
  box-shadow: var(--sk-shadow-sm);
}