/* ============================================================
   FLACKERKISTE — Subpage styles
   Erweiterungen zu flackerkiste.css für Unterseiten
   (Branchen-Details, Vorteile, Einnahmequelle, Kontakt, Recht…)
   ============================================================ */

/* ---------- Subpage Hero (kompakter als Landing-Hero) ---------- */
.subhero {
  padding: clamp(80px, 9vw, 140px) var(--pad-x) clamp(60px, 7vw, 100px);
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}
.subhero__crumb {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--accent);
  text-transform: uppercase;
}
.subhero__crumb a { color: var(--fg-mute); }
.subhero__crumb a:hover { color: var(--fg); }
.subhero__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(48px, 8vw, 120px);
  line-height: 0.94;
  letter-spacing: -0.04em;
  margin: 0;
  text-transform: lowercase;
}
.subhero__title em {
  font-family: var(--editorial);
  font-weight: 400;
  font-style: italic;
  color: var(--accent);
}
.subhero__lead {
  max-width: 720px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--fg-dim);
  margin: 0;
}

/* ---------- Themen-Grid (für Branchenseiten: 4-6 Themenbereiche) ---------- */
.themen {
  padding: clamp(64px, 8vw, 120px) var(--pad-x);
  max-width: var(--max);
  margin: 0 auto;
}
.themen__head {
  display: flex; justify-content: space-between; align-items: end;
  gap: 32px; flex-wrap: wrap;
  margin-bottom: 48px;
}
.themen__label {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--accent);
  text-transform: uppercase;
}
.themen__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 6px 0 0;
  text-transform: lowercase;
}
.themen__title em { color: var(--accent); font-family: var(--editorial); font-weight: 400; }
.themen__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.thema {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px;
  display: flex; flex-direction: column;
  gap: 14px;
  transition: border-color .25s, background .25s, transform .25s;
}
.thema:hover {
  border-color: var(--accent);
  background: var(--bg-3);
  transform: translateY(-2px);
}
.thema__num {
  font-family: var(--editorial);
  font-style: italic;
  color: var(--accent);
  font-size: 28px;
  line-height: 1;
}
.thema__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  margin: 0;
}
.thema__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.thema__list li {
  font-size: 14px;
  color: var(--fg-dim);
  line-height: 1.5;
  padding-left: 18px;
  position: relative;
}
.thema__list li::before {
  content: '→';
  color: var(--accent);
  position: absolute;
  left: 0;
  font-family: var(--display);
  font-size: 13px;
}

/* ---------- Praxis-Grid (Praxisbeispiele) ---------- */
.praxis {
  padding: clamp(64px, 8vw, 120px) var(--pad-x);
  max-width: var(--max);
  margin: 0 auto;
  border-top: 1px solid var(--line);
}
.praxis__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.praxis__block {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px;
  display: flex; flex-direction: column;
  gap: 12px;
}
.praxis__block-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: var(--accent);
  margin: 0 0 4px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line-2);
}
.praxis__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 6px;
}
.praxis__list li {
  font-size: 13px;
  color: var(--fg-dim);
  line-height: 1.5;
}
.praxis__list li strong {
  color: var(--fg);
  font-weight: 500;
  font-family: var(--display);
  text-transform: lowercase;
}

/* ---------- Long-form Content (Vorteile, Datenschutz, Impressum) ---------- */
.prose {
  padding: clamp(60px, 7vw, 100px) var(--pad-x);
  max-width: 880px;
  margin: 0 auto;
}
.prose > section + section {
  margin-top: 64px;
  padding-top: 64px;
  border-top: 1px solid var(--line);
}
.prose h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  text-transform: lowercase;
  color: var(--fg);
}
.prose h2 em { color: var(--accent); font-family: var(--editorial); font-weight: 400; }
.prose h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  margin: 32px 0 12px;
  color: var(--fg);
}
.prose h4 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 24px 0 8px;
}
.prose p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg-dim);
  margin: 0 0 14px;
}
.prose p strong { color: var(--fg); font-weight: 500; }
.prose ul, .prose ol {
  margin: 0 0 20px;
  padding-left: 0;
  list-style: none;
}
.prose ul li, .prose ol li {
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-dim);
  padding-left: 22px;
  position: relative;
  margin-bottom: 6px;
}
.prose ul li::before {
  content: '+';
  color: var(--accent);
  position: absolute;
  left: 4px;
  font-family: var(--display);
  font-weight: 600;
}
.prose ol { counter-reset: list; }
.prose ol li { counter-increment: list; }
.prose ol li::before {
  content: counter(list, decimal-leading-zero);
  color: var(--accent);
  position: absolute;
  left: 0;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.prose a {
  color: var(--accent);
  border-bottom: 1px solid var(--line-2);
  transition: border-color .15s, color .15s;
}
.prose a:hover { border-color: var(--accent); }

.prose__lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg);
  margin: 0 0 32px;
}

/* Definition-Liste (für Impressum) */
.prose dl {
  margin: 12px 0 24px;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 24px;
}
.prose dl dt {
  font-family: var(--display);
  font-size: 13px;
  color: var(--fg-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.prose dl dd {
  margin: 0;
  font-size: 15px;
  color: var(--fg);
}
@media (max-width: 540px) {
  .prose dl { grid-template-columns: 1fr; gap: 2px 0; }
  .prose dl dd { margin-bottom: 12px; }
}

/* ---------- Branchen-Vorschau-Grid (für Übersicht) ---------- */
.branchen-list {
  padding: clamp(64px, 8vw, 120px) var(--pad-x);
  max-width: var(--max);
  margin: 0 auto;
}
.branchen-list__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}
.branchen-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px;
  display: flex; flex-direction: column;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color .25s, background .25s, transform .25s;
  position: relative;
}
.branchen-card:hover {
  border-color: var(--accent);
  background: var(--bg-3);
  transform: translateY(-3px);
}
.branchen-card__num {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--fg-mute);
  text-transform: uppercase;
}
.branchen-card__hook {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: var(--accent);
  margin: 0;
}
.branchen-card__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-dim);
}
.branchen-card__more {
  margin-top: auto;
  font-family: var(--display);
  font-size: 13px;
  color: var(--fg);
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap .2s, color .2s;
}
.branchen-card:hover .branchen-card__more { gap: 10px; color: var(--accent); }

/* ---------- CTA-Block (wiederverwendbar) ---------- */
.subcta {
  padding: clamp(80px, 10vw, 140px) var(--pad-x);
  background:
    radial-gradient(circle at 50% 0%, rgba(229,111,64,0.16), transparent 50%),
    var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.subcta__inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex; flex-direction: column;
  gap: 20px;
  align-items: center;
}
.subcta__label {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--accent);
  text-transform: uppercase;
}
.subcta__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: lowercase;
  margin: 0;
  color: var(--fg);
}
.subcta__title em {
  font-family: var(--editorial);
  font-weight: 400;
  font-style: italic;
  color: var(--accent);
}
.subcta__lead {
  margin: 0;
  font-size: 17px;
  color: var(--fg-dim);
  max-width: 540px;
}
.subcta__buttons {
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
  margin-top: 8px;
}

/* ---------- Topbar: aktiver Link-State + Submenu-Pfeil ---------- */
.nav a.is-active { color: var(--fg); }
.nav a.is-active::after { right: 0; }

/* ---------- Kontaktformular ---------- */
.kontakt {
  padding: clamp(60px, 7vw, 100px) var(--pad-x) clamp(80px, 10vw, 140px);
  max-width: 1100px;
  margin: 0 auto;
}
.kontakt__layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
}
@media (max-width: 880px) {
  .kontakt__layout { grid-template-columns: 1fr; gap: 32px; }
}
.kontakt__aside {
  display: flex; flex-direction: column; gap: 24px;
}
.kontakt__aside-block {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
}
.kontakt__aside h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}
.kontakt__aside p,
.kontakt__aside a {
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-dim);
  display: block;
}
.kontakt__aside a:hover { color: var(--accent); }
.kontakt__aside strong { color: var(--fg); font-weight: 500; }

.kontakt-form {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.kontakt-form__row {
  display: flex; flex-direction: column; gap: 6px;
}
.kontakt-form__row--full { grid-column: 1 / -1; }
.kontakt-form__row label {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.kontakt-form__row input,
.kontakt-form__row textarea {
  background: var(--bg);
  border: 1px solid var(--line-2);
  color: var(--fg);
  font-family: var(--body);
  font-size: 15px;
  padding: 14px 16px;
  border-radius: 8px;
  outline: none;
  transition: border-color .15s;
  width: 100%;
}
.kontakt-form__row input:focus,
.kontakt-form__row textarea:focus { border-color: var(--accent); }
.kontakt-form__row input::placeholder,
.kontakt-form__row textarea::placeholder { color: var(--fg-mute); }
.kontakt-form__row textarea { resize: vertical; min-height: 160px; }
.kontakt-form__check {
  grid-column: 1 / -1;
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14px;
  color: var(--fg-dim);
  line-height: 1.5;
}
.kontakt-form__check input { margin-top: 3px; accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; }
.kontakt-form__check a { color: var(--accent); }
.kontakt-form__check a:hover { border-bottom: 1px solid var(--accent); }
.kontakt-form__submit-row {
  grid-column: 1 / -1;
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
.kontakt-form__submit {
  background: var(--accent);
  color: var(--bg);
  border: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 16px;
  padding: 16px 28px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  transition: background .15s, transform .15s, padding-right .25s;
}
.kontakt-form__submit:hover { background: var(--accent-soft); padding-right: 36px; }
.kontakt-form__submit:disabled { opacity: .6; cursor: wait; }
.kontakt-form__status {
  font-family: var(--display);
  font-size: 13px;
  color: var(--fg-dim);
}
.kontakt-form__status.is-ok { color: #4ade80; }
.kontakt-form__status.is-err { color: #f56565; }
/* Honeypot — visually hidden for humans */
.kontakt-form__honey {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}
@media (max-width: 540px) {
  .kontakt-form { grid-template-columns: 1fr; padding: 24px; }
}

/* ---------- 404 ---------- */
.fourofour {
  min-height: 70vh;
  display: grid; place-items: center;
  padding: clamp(80px, 12vw, 160px) var(--pad-x);
  text-align: center;
}
.fourofour__inner {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  max-width: 560px;
}
.fourofour__big {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(140px, 24vw, 320px);
  line-height: 0.86;
  letter-spacing: -0.05em;
  color: var(--fg);
  animation: cta-flicker 4s infinite;
}
.fourofour__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: -0.02em;
  text-transform: lowercase;
  margin: 0;
}
.fourofour__title em { color: var(--accent); font-family: var(--editorial); font-weight: 400; }
.fourofour__lead {
  font-size: 16px;
  color: var(--fg-dim);
  margin: 0;
  max-width: 460px;
}

/* ---------- Long lists for prose pages ---------- */
.prose .lists-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 48px;
  margin: 16px 0 0;
}
.prose .lists-2col h4 { margin-top: 0; }
@media (max-width: 720px) {
  .prose .lists-2col { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================================
   SUBPAGES — Mobile-Optimierungen
   ============================================================ */

@media (max-width: 720px) {
  /* Subhero kompakter */
  .subhero {
    padding: clamp(60px, 8vw, 100px) var(--pad-x) clamp(40px, 6vw, 70px);
    gap: 18px;
  }
  .subhero__title {
    font-size: clamp(36px, 11vw, 64px);
    line-height: 0.98;
  }
  .subhero__lead {
    font-size: 16px;
    line-height: 1.6;
  }
  .subhero__crumb { font-size: 11px; letter-spacing: 0.16em; }

  /* Themen-Grid Stacking */
  .themen, .praxis { padding: clamp(48px, 8vw, 96px) var(--pad-x); }
  .themen__head { margin-bottom: 32px; gap: 16px; }
  .themen__title { font-size: clamp(28px, 8vw, 48px); }
  .themen__grid, .praxis__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .thema, .praxis__block { padding: 22px; }
  .thema__title { font-size: 20px; }
  .thema__list li, .praxis__list li { font-size: 14px; }

  /* Branchen-List Stacking */
  .branchen-list { padding: clamp(48px, 8vw, 96px) var(--pad-x); }
  .branchen-list__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .branchen-card { padding: 24px; gap: 12px; }
  .branchen-card__hook { font-size: 20px; }

  /* CTA-Block kompakter */
  .subcta { padding: clamp(60px, 12vw, 120px) var(--pad-x); }
  .subcta__title { font-size: clamp(34px, 9vw, 60px); }
  .subcta__lead { font-size: 16px; }
  .subcta__buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .subcta__buttons .btn-primary {
    text-align: center;
    justify-content: center;
    min-height: 52px;
    padding: 16px 22px;
  }
  .subcta__buttons .btn-link {
    align-self: center;
    min-height: 44px;
    padding: 8px 0;
  }

  /* Prose responsive Headings */
  .prose { padding: clamp(40px, 7vw, 80px) var(--pad-x); }
  .prose > section + section {
    margin-top: 40px;
    padding-top: 40px;
  }
  .prose h2 { font-size: clamp(24px, 6.5vw, 36px); }
  .prose h3 { font-size: 18px; }
  .prose p, .prose ul li, .prose ol li { font-size: 15px; }
  .prose__lead { font-size: 16px; }
}

@media (max-width: 540px) {
  .subhero__title { font-size: clamp(32px, 11vw, 48px); }
  .themen, .praxis { padding: 48px var(--pad-x); }
  .thema, .praxis__block { padding: 18px; }
  .praxis__list li { font-size: 13px; }
  .branchen-card { padding: 20px; }
  .branchen-card__hook { font-size: 18px; }
  .branchen-card__desc { font-size: 13px; }
}

/* --- Kontakt-Formular Mobile-Refinement --- */
@media (max-width: 720px) {
  .kontakt { padding: clamp(40px, 7vw, 80px) var(--pad-x) clamp(60px, 8vw, 100px); }
  .kontakt__aside-block { padding: 20px; }
  .kontakt__aside h3 { font-size: 13px; }
  .kontakt-form { padding: 24px; gap: 14px; }
  .kontakt-form__row input,
  .kontakt-form__row textarea {
    font-size: 16px; /* iOS zoomt nicht rein wenn >= 16px */
    padding: 14px 14px;
    min-height: 44px;
  }
  .kontakt-form__submit {
    width: 100%;
    justify-content: center;
    min-height: 52px;
  }
  .kontakt-form__submit-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .kontakt-form { padding: 18px; }
}

/* --- 404 Mobile --- */
@media (max-width: 720px) {
  .fourofour { min-height: 60vh; padding: clamp(60px, 12vw, 120px) var(--pad-x); }
  .fourofour__big { font-size: clamp(110px, 28vw, 200px); }
  .fourofour__title { font-size: clamp(22px, 6vw, 32px); }
  .fourofour__lead { font-size: 15px; }
}

/* ============================================================
   Kontakt-Section auf Startseite (eigener Section-Header)
   ============================================================ */

.kontakt__head {
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
}
.kontakt__head-label {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.kontakt__head-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  margin: 12px 0 18px;
  text-transform: lowercase;
  color: var(--fg);
}
.kontakt__head-title em {
  color: var(--accent);
  font-family: var(--editorial);
  font-weight: 400;
}
.kontakt__head-lead {
  font-size: 17px;
  color: var(--fg-dim);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.55;
}

/* Auf Landing (#kontakt) extra Trennung vom vorherigen CTA-Block */
#kontakt.kontakt {
  border-top: 1px solid var(--line);
  padding-top: clamp(80px, 10vw, 140px);
}

@media (max-width: 720px) {
  .kontakt__head { margin-bottom: 32px; }
  .kontakt__head-title { font-size: clamp(32px, 8.5vw, 56px); }
  .kontakt__head-lead { font-size: 16px; }
}