/* ==========================================================
   Leichter Neo-Brutalismus
   Liegt als Schicht über styles.css und den Seiten-Styles.
   Wird als letztes Stylesheet im <head> geladen; zum
   Abschalten nur den <link> auf brutal.css entfernen.
   ========================================================== */

:root {
  --ink: #111111;
  --yellow: #ffd23f;
  --b-border: 2px solid var(--ink);
  --b-shadow: 5px 5px 0 var(--ink);
  --b-shadow-hover: 7px 7px 0 var(--ink);
  --b-radius: 8px;
}

body {
  background-color: #fff;
  background-image: radial-gradient(rgba(17, 17, 17, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* ---------- Kopf ---------- */
header {
  background: #fff;
  backdrop-filter: none;
  border-bottom: var(--b-border);
}
header.scrolled {
  box-shadow: 0 4px 0 var(--ink);
}

/* ---------- Überschriften-Akzente ---------- */
.highlight {
  isolation: isolate;
}
.highlight::after {
  z-index: -1;
  bottom: 0.02em;
  height: 0.38em;
  background: var(--yellow);
  opacity: 1;
}

.section-label {
  padding: 0.3rem 0.7rem;
  background: var(--ink);
  color: #fff;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

/* ---------- Überschriften: Schwarz statt Dunkelblau ---------- */
h1, h2, h3,
.section-title {
  color: var(--ink);
  letter-spacing: -0.02em;
}
h1, h2, .section-title {
  font-weight: 850;
}
.hero-content h1 {
  font-size: clamp(2rem, 3.7vw, 3rem) !important;
  line-height: 1.05;
}
nav ul li a {
  color: var(--ink);
}
nav ul li a:hover {
  color: var(--coral);
}

/* Dunkle und orange Flächen */
.about .section-title,
.about h2,
.about h3,
footer h1, footer h2, footer h3, footer h4 {
  color: #fff;
}
.talks-cta,
.talks-cta h2,
.talks-cta .section-title,
.talks-cta p,
.about-cta,
.about-cta h2,
.about-cta .section-title,
.about-cta p {
  color: var(--ink) !important;
}
.talks-cta,
.about-cta {
  border-top: var(--b-border);
  border-bottom: var(--b-border);
}
.talks-cta .btn-primary,
.about-cta .btn-primary {
  background: #fff !important;
}

/* ---------- Buttons ---------- */
.btn,
.nav-cta {
  border: var(--b-border) !important;
  border-radius: 6px !important;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
}
.btn:hover,
.nav-cta:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}
.btn:active,
.nav-cta:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--ink);
}
.btn-primary,
.nav-cta {
  background: var(--coral) !important;
  color: var(--ink) !important;
}
.btn-primary:hover,
.nav-cta:hover {
  background: var(--coral) !important;
  box-shadow: 6px 6px 0 var(--ink) !important;
}
.btn-secondary {
  background: #fff;
  color: var(--ink);
}
.btn-secondary:hover {
  background: var(--yellow);
  color: var(--ink);
}

/* ---------- Karten ---------- */
.service-card,
.blog-card,
.contact-method-card,
.proof-card,
.topic-card,
.format-card,
.stat-card,
.value-card,
.author-card,
.testimonial-card,
.organizers-right,
.services-approach {
  background: #fff;
  border: var(--b-border) !important;
  border-radius: var(--b-radius) !important;
  box-shadow: var(--b-shadow) !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.services-approach {
  padding: 2rem;
}
a.blog-card:hover,
a.contact-method-card:hover,
.service-card:hover,
.topic-card:hover,
.format-card:hover {
  transform: translate(-3px, -3px) !important;
  box-shadow: var(--b-shadow-hover) !important;
}
.blog-card-image {
  border-bottom: var(--b-border);
}
.organizers-right {
  background: var(--yellow) !important;
}

/* ---------- Tabs, Filter, Tags ---------- */
.service-tab,
.blog-filter {
  border: var(--b-border) !important;
  border-radius: 6px !important;
  background: #fff;
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.service-tab.active,
.blog-filter.active {
  background: var(--coral) !important;
  color: var(--ink) !important;
}

.blog-tag,
.topic-label,
.interest-tag,
.article-category {
  background: var(--yellow) !important;
  color: var(--ink) !important;
  border: 1.5px solid var(--ink);
  border-radius: 4px !important;
  padding: 0.2rem 0.55rem !important;
}

/* ---------- Kennzahlen-Leiste ---------- */
.clients-bar {
  background: var(--yellow);
  border-top: var(--b-border);
  border-bottom: var(--b-border);
}
.clients-bar .stat-number-inline {
  color: var(--ink);
}
.clients-bar .stat-label-inline {
  color: var(--ink);
}

/* ---------- Bilder ---------- */
img.photo-comic {
  max-width: 320px !important;
  border: var(--b-border);
  border-radius: var(--b-radius);
  box-shadow: 10px 10px 0 var(--ink);
}
.lalabase-teaser img,
.lalabase-hero-image img {
  border: var(--b-border);
  border-radius: var(--b-radius) !important;
  box-shadow: 8px 8px 0 var(--ink) !important;
}
.author-avatar {
  border: var(--b-border);
}
.about-image img {
  border: 2px solid #fff;
  border-radius: var(--b-radius) !important;
  box-shadow: 8px 8px 0 var(--ink);
}
.about-image .blob {
  display: none;
}

/* ---------- Neue Startseiten-Blöcke ---------- */
.about-light-stats .stat-card:nth-child(1),
.about-light-stats .stat-card:nth-child(4) {
  background: var(--yellow) !important;
}
.about-light-stats .stat-number {
  color: var(--ink);
}
.services-approach-wide {
  background: var(--yellow) !important;
}
.services-approach-wide p,
.services-approach-wide li {
  color: var(--ink);
}
.service-number {
  display: inline-block;
  align-self: flex-start;
  padding: 0.15rem 0.5rem;
  background: var(--ink);
  color: #fff;
}

/* ---------- Abschnitte mit grauem Grund ---------- */
.about,
.blog,
.talks-proof,
.talks-formats,
.about-stats {
  border-top: var(--b-border);
  border-bottom: var(--b-border);
}

/* ---------- Fuß ---------- */
footer {
  border-top: 4px solid var(--ink);
}
.back-to-top {
  border: var(--b-border);
  border-radius: 6px;
  box-shadow: 3px 3px 0 var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .btn, .nav-cta, .service-card, .blog-card, .topic-card, .format-card, .contact-method-card {
    transition: none;
  }
}

/* Karten-Überschriften ebenfalls schwarz */
.service-card h3,
.services-approach h3,
.blog-card-body h3,
.topic-card h3,
.format-card h3,
.value-card h3 {
  color: var(--ink) !important;
}
.services-approach-wide li,
.services-approach-wide p {
  color: var(--ink) !important;
}
.services-note a {
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}