/*
Theme Name: Walterlernt Blog
Theme URI: https://walterlernt.ch
Author: Arto Steiner
Author URI: https://walterlernt.ch
Description: Block Theme für den Walterlernt-Blog. Designt zur Kursplattform walterlernt.ch. Walterlernt Brand-Tokens (Petrol-Palette, Inter Tight / Inter), vier Topic-Cluster.
Version: 0.1.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: walterlernt-blog
Tags: blog, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, threaded-comments
*/

/* Custom CSS overrides for things theme.json can't express */

/* === Link underlines: strategisch entfernen === */
/* Default: alle Links unterstrichen (für Lesbarkeit im Body) */
/* Aber: Navigation, Buttons, Karten-Titel und Karten-CTAs OHNE Unterstrich */

/* Header-Navigation und CTA */
header a,
header a:hover {
  text-decoration: none;
}
header a:hover {
  color: var(--wp--preset--color--main);
}

/* Hero CTA-Button (Beitrag lesen) */
.wl-hero a {
  text-decoration: none;
}

/* Footer-Links (Kategorien, Blog-Liste, Walter-Welt, Bottom-Bar) */
footer a,
footer a:hover {
  text-decoration: none;
}
footer a:hover {
  color: white;
}

/* Themen-Karten: Titel und CTA-Links */
.wl-cluster-card a {
  text-decoration: none;
}
.wl-cluster-card a:hover {
  text-decoration: underline;
}

/* Post-Karten (Aktuelle Beiträge, Walter empfiehlt) */
.wl-post-card a {
  text-decoration: none;
}
.wl-post-card a:hover {
  text-decoration: underline;
}

/* Leerer Featured-Image-Wrap auf Single-Post: komplett verbergen */
/* (Whitespace innen → :empty match nicht, deshalb :not(:has(*))) */
main > .wp-block-group:not(:has(*)) {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Karten haben kein Padding (sonst kommt das Bild nicht flush an den Rand) */
.wl-post-card {
  padding: 0 !important;
}

/* Karten-Bildbereich: immer gleiche Höhe, Bild flush an Kartenrand, Verlauf-Fallback ohne Bild */
.wl-post-card .wp-block-post-featured-image,
.wl-post-card figure.wp-block-post-featured-image {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 220px;
  background: linear-gradient(135deg,
    var(--wp--preset--color--main-minus-1) 0%,
    var(--wp--preset--color--main) 100%);
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  overflow: hidden;
}
.wl-post-card .wp-block-post-featured-image:has(img),
.wl-post-card figure.wp-block-post-featured-image:has(img) {
  background: none;
  min-height: 0;
}
.wl-post-card .wp-block-post-featured-image a {
  display: block;
  height: 100%;
  min-height: inherit;
  line-height: 0;
}
.wl-post-card .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

/* Karten-Kategorien: nur die erste anzeigen (Primärkategorie).
   Auf Single-Posts greift der PHP-Filter; in Grids/Archiven dieses CSS. */
.wl-post-card .wp-block-post-terms a ~ a {
  display: none;
}
.wl-post-card .wp-block-post-terms .wp-block-post-terms__separator {
  display: none;
}

/* Sektion-Headers wie "Alle ansehen →" und "Komplettes Archiv →" */
.wp-block-group > .wp-block-paragraph a,
.wp-block-group > .wp-block-group .wp-block-paragraph a {
  text-decoration: none;
}

/* Newsletter-Strip Button */
.wl-newsletter-form a,
.wl-newsletter-form button {
  text-decoration: none;
}

/* Hero ohne Featured-Image: dezenter Walter-Icon-Hintergrund rechts */
.wl-hero {
  position: relative;
  overflow: hidden;
}
.wl-hero::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 360px;
  height: 360px;
  background-image: url('assets/walter-blog-icon.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;
  opacity: 0.08;
  pointer-events: none;
}
.wl-hero > * {
  position: relative;
  z-index: 1;
}


/* Course CTA Box – auto-inserted at end of each post by functions.php
   Walter-Watermark: kein linker Balken; Mascot dezent unten rechts */
.wl-course-cta {
  position: relative;
  background: var(--wp--preset--color--main-minus-2);
  border-radius: 8px;
  padding: 36px;
  margin: 48px 0;
  overflow: hidden;
}
.wl-course-cta::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -28px;
  width: 200px;
  height: 200px;
  background-image: url('assets/walter-blog-icon.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
}
.wl-course-cta > * {
  position: relative;
  z-index: 1;
}
.wl-course-cta__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.6px;
  color: var(--wp--preset--color--main);
  text-transform: uppercase;
  margin: 0 0 12px 0;
}
.wl-course-cta__title {
  font-family: "Inter Tight", "Inter", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--wp--preset--color--headings);
  margin: 0 0 12px 0;
}
.wl-course-cta__lead {
  font-size: 15px;
  line-height: 1.55;
  color: var(--wp--preset--color--body);
  margin: 0 0 16px 0;
}
.wl-course-cta__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
}
.wl-course-cta__bullets li {
  font-size: 15px;
  line-height: 1.5;
  color: var(--wp--preset--color--body);
  padding-left: 24px;
  position: relative;
  margin-bottom: 8px;
}
.wl-course-cta__bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--wp--preset--color--main);
  font-weight: 700;
}
.wl-course-cta__cta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
}
.wl-course-cta__btn {
  background: var(--wp--preset--color--main);
  color: white !important;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 15px;
}
.wl-course-cta__btn:hover {
  background: var(--wp--preset--color--main-1);
}
.wl-course-cta__note {
  font-size: 13px;
  color: var(--wp--preset--color--body-2);
}

/* Blockquote styling — Indent + Italic, kein Akzent-Balken */
.wp-block-quote {
  padding-left: 28px;
  font-style: italic;
  position: relative;
}
.wp-block-quote::before {
  content: "„";
  position: absolute;
  left: -2px;
  top: -14px;
  font-size: 56px;
  line-height: 1;
  color: var(--wp--preset--color--main-minus-1);
  font-style: normal;
  font-family: "Inter Tight", serif;
}

.wp-block-quote cite {
  font-style: normal;
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--wp--preset--color--body-2);
}

/* Two-tone CTA button (text + arrow box) */
.wl-cta-split {
  display: inline-flex;
  align-items: stretch;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
}
.wl-cta-split .wl-cta-text {
  background: var(--wp--preset--color--main-1);
  color: white;
  padding: 14px 24px;
  font-weight: 600;
}
.wl-cta-split .wl-cta-arrow {
  background: var(--wp--preset--color--main-2);
  color: white;
  padding: 14px 18px;
  font-weight: 600;
}

/* Hero featured post (Startseite) */
.wl-hero {
  background: var(--wp--preset--color--main);
  color: white;
  padding: 104px var(--wp--preset--spacing--page-padding);
}

.wl-hero .wl-hero-tagline {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.6px;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
}

.wl-hero h1,
.wl-hero h1 a,
.wl-hero .wp-block-post-title,
.wl-hero .wp-block-post-title a {
  color: #ffffff !important;
}
/* Hero-Sektionen kein blockGap-Spacing zur Header-Region */
.wp-site-blocks > main {
  margin-top: 0 !important;
}
.wp-site-blocks > main > *:first-child,
.wp-site-blocks > main > .wp-block-query:first-child,
.wp-site-blocks > main > .wp-block-query:first-child > .wp-block-post-template > *,
.wp-site-blocks > main > .wp-block-query:first-child > .wp-block-post-template li {
  margin-top: 0 !important;
}

.wl-hero .wl-hero-excerpt {
  color: var(--wp--preset--color--text-on-dark);
  max-width: 760px;
  font-size: 18px;
  line-height: 1.55;
}

/* Cluster cards (Themen section) */
.wl-cluster-card {
  background: var(--wp--preset--color--light-1);
  border: 1px solid var(--wp--preset--color--light-2);
  border-radius: 6px;
  padding: 32px 28px;
}

/* Highlights section background */
.wl-highlights {
  background: #FBF5EA;
}

/* Post card shadow */
.wl-post-card {
  background: white;
  border-radius: 6px;
  box-shadow:
    0 4px 8px -2px rgba(16,24,40,0.04),
    0 14px 20px -6px rgba(16,24,40,0.08);
  overflow: hidden;
}

/* Reading column for single posts */
.wl-article {
  max-width: 760px;
  margin: 0 auto;
}

/* === Author Bio Box – Polaroid-Variante ===
   Avatar bekommt einen weissen "Polaroid"-Rahmen mit leichter Schräglage.
   Links rechts daneben werden Pill-Buttons. */
.wl-author-bio {
  align-items: flex-start;
}
.wl-bio-polaroid {
  background: #ffffff;
  padding: 8px 8px 24px 8px;
  border: 1px solid var(--wp--preset--color--light-2);
  transform: rotate(-2.5deg);
  flex-shrink: 0;
  margin-top: 4px;
  box-shadow: 0 2px 6px rgba(16,24,40,0.06);
  line-height: 0;
}
.wl-bio-polaroid img,
.wl-bio-polaroid .avatar {
  display: block;
  width: 96px !important;
  height: 96px !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.wl-bio-content {
  flex: 1;
}
.wl-bio-content .wp-block-post-author-name a,
.wl-bio-content .wp-block-post-author-name {
  text-decoration: none;
}
.wl-bio-role {
  margin: 4px 0 0 !important;
}
.wl-bio-links {
  margin-top: 16px !important;
}
.wl-bio-pill {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--wp--preset--color--main);
  background: #ffffff;
  border: 1px solid var(--wp--preset--color--main-minus-1);
  padding: 7px 16px;
  border-radius: 999px;
  text-decoration: none;
  line-height: 1.3;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.wl-bio-pill:hover {
  background: var(--wp--preset--color--main);
  color: #ffffff !important;
  text-decoration: none;
}

/* === Footer column alignment ===
   Default ul has padding-left ~40px (browser default), which shoves all
   list items right of the column headings. Reset the whole stack and force
   columns to top-align. */
footer .wp-block-columns {
  align-items: flex-start;
}
footer .wp-block-column {
  margin: 0;
}
footer .wp-block-column h5 {
  margin: 0 0 18px 0;
  padding: 0;
}
footer .wp-block-column ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
footer .wp-block-column ul li {
  margin: 0 0 10px 0;
  padding: 0;
}
/* Logo column: pull logo up slightly so its visual centre lines up with the h5 row in cols 2–4 */
footer .wp-block-column:first-child .wl-footer-logo {
  margin-top: -6px;
}

/* Footer logo white text version */
.wl-footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: white;
  font-size: 22px;
}
.wl-footer-logo span {
  font-weight: 400;
}
.wl-footer-logo strong {
  font-weight: 700;
  margin-right: 4px;
}
.wl-footer-logo img {
  width: 50px;
  height: auto;
}

/* Cross-link “Zu den Kursen ↗” */
.wl-courses-link {
  color: var(--wp--preset--color--main);
  font-weight: 600;
}

/* ==========================================================================
   Mobile responsive overrides (<= 781px)
   Block-Theme nutzt für viele Layouts flex-nowrap und fixe Paddings;
   das hier zieht alles auf Handy-tauglich zurück.
   ========================================================================== */
@media (max-width: 781px) {

  /* Safety net: nichts darf horizontal überlaufen */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* === Header: Padding runter, Inhalte wrappen lassen === */
  header.wp-block-group {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Top row (Logo + Suche + Kurse + Newsletter): wrap statt nowrap */
  header > .wp-block-group.is-content-justification-space-between {
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: space-between !important;
  }

  /* Rechte Cluster (Suche + Kurse + Newsletter): unter Logo wrappen,
     intern auch wrap, damit es nicht über die Kante schiebt */
  header > .wp-block-group.is-content-justification-space-between > .wp-block-group {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 10px 14px !important;
    width: 100%;
  }

  /* Suche: volle Breite */
  .wl-header-search {
    width: 100% !important;
    max-width: 100% !important;
  }
  .wl-header-search .wp-block-search__inside-wrapper {
    width: 100%;
  }
  .wl-header-search .wp-block-search__input {
    width: 100% !important;
    flex: 1;
  }

  /* Logo: kleiner */
  header .wl-logo a,
  header .wl-logo img,
  header .custom-logo-link img {
    max-height: 44px !important;
    width: auto !important;
    height: auto;
  }

  /* === Kategorie-Nav: horizontaler Scroll-Strip === */
  .wl-cat-nav {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    justify-content: flex-start !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 22px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Fade-Hint am rechten Rand: kein extra Element, nur Mask */
    mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
  }
  .wl-cat-nav::-webkit-scrollbar { display: none; }
  .wl-cat-nav > * {
    flex-shrink: 0 !important;
    white-space: nowrap;
  }
  .wl-cat-nav p {
    font-size: 14px !important;
  }

  /* === Hero: weniger Padding, kleinere Headline === */
  .wl-hero {
    padding: 56px 20px !important;
  }
  .wl-hero h1,
  .wl-hero .wp-block-post-title {
    font-size: 30px !important;
    line-height: 1.18 !important;
  }
  .wl-hero .wl-hero-tagline,
  .wl-hero p:first-child {
    font-size: 12px !important;
  }
  .wl-hero .wl-hero-excerpt,
  .wl-hero p {
    font-size: 16px !important;
    line-height: 1.5;
  }
  .wl-hero::after {
    width: 220px;
    height: 220px;
    right: -50px;
    bottom: -50px;
    opacity: 0.06;
  }

  /* === Main / Single-Post Container === */
  main,
  .wp-site-blocks > main {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Hero soll trotzdem full-bleed bleiben (überschreibt main-padding) */
  main > .wl-hero,
  main > .wp-block-group.wl-hero {
    margin-left: -16px;
    margin-right: -16px;
  }
  .wl-article,
  .wp-block-post-content {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* === Bilder, Figuren, Tabellen sicher in den Viewport zwingen === */
  img,
  figure,
  .wp-block-image,
  .wp-block-image img {
    max-width: 100% !important;
    height: auto !important;
  }
  /* Aligned-Wide / Aligned-Full sollen NICHT über den Rand schiessen */
  .alignwide, .alignfull {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Tabellen: horizontaler Scroll-Wrapper */
  .wp-block-table,
  figure.wp-block-table {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table {
    font-size: 14px;
  }
  /* Pre / Code: nicht überlaufen */
  pre, code, .wp-block-code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  pre {
    font-size: 13px;
  }

  /* === Course-CTA-Box: weniger Padding, Button + Note stacken === */
  .wl-course-cta {
    padding: 24px 20px !important;
    margin: 32px 0 !important;
  }
  .wl-course-cta__title {
    font-size: 20px !important;
    line-height: 1.3;
  }
  .wl-course-cta__lead,
  .wl-course-cta__bullets li {
    font-size: 14px !important;
  }
  .wl-course-cta__cta {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .wl-course-cta__btn {
    display: block;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
  }
  .wl-course-cta__note {
    text-align: center;
  }
  .wl-course-cta::after {
    width: 140px;
    height: 140px;
    right: -32px;
    bottom: -32px;
  }

  /* === Author-Bio: vertikal stacken, mittig === */
  .wl-author-bio {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    gap: 18px !important;
  }
  .wl-bio-polaroid {
    transform: rotate(-2deg);
    margin-top: 0;
  }
  .wl-bio-content {
    width: 100%;
  }
  .wl-bio-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* === Cluster-Cards: Padding runter === */
  .wl-cluster-card {
    padding: 24px 20px !important;
  }

  /* === WPForms Newsletter: Input über Button stacken === */
  .wpforms-container .wpforms-form {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .wpforms-container input[type="email"],
  .wpforms-container input[type="text"] {
    border-radius: 4px !important;
    border-right: 1px solid var(--wp--preset--color--light-3) !important;
  }
  .wpforms-container .wpforms-submit-container {
    grid-column: 1 !important;
  }
  .wpforms-container button.wpforms-submit,
  .wpforms-container input[type="submit"].wpforms-submit {
    border-radius: 4px !important;
    width: 100% !important;
  }

  /* === Body-Typografie === */
  body {
    font-size: 16px;
    line-height: 1.6;
  }
  p, li {
    font-size: 16px;
    line-height: 1.6;
  }

  /* === Headings: kompakter === */
  h1 { font-size: 30px !important; line-height: 1.2 !important; }
  h2 { font-size: 24px !important; line-height: 1.25 !important; }
  h3 { font-size: 20px !important; line-height: 1.3 !important; }
  h4 { font-size: 18px !important; line-height: 1.35 !important; }

  /* === Footer: Padding runter, Spalten gestapelt (WP-Default greift, aber sicherheitshalber) === */
  footer.wp-block-group,
  footer {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  footer .wp-block-columns {
    gap: 28px !important;
    flex-wrap: wrap !important;
  }
  footer .wp-block-column {
    flex-basis: 100% !important;
  }
  footer .wp-block-column:first-child .wl-footer-logo {
    margin-top: 0; /* Override desktop -6px */
  }

  /* === Sicherheitsnetz: alle wp-block-group mit fixem Padding zähmen === */
  .wp-block-group.has-background:not(.wl-hero):not(.wl-course-cta) {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* === Long URLs in Body sollen brechen statt überlaufen === */
  .wp-block-post-content a {
    word-break: break-word;
    overflow-wrap: break-word;
  }
}

/* Zusätzliche Feinjustierung für sehr kleine Phones (<= 380px) */
@media (max-width: 380px) {
  .wl-hero {
    padding: 48px 18px !important;
  }
  .wl-hero h1,
  .wl-hero .wp-block-post-title {
    font-size: 26px !important;
  }
  h1 { font-size: 26px !important; }
  h2 { font-size: 22px !important; }
  .wl-course-cta {
    padding: 20px 16px !important;
  }
  .wl-cat-nav {
    gap: 18px !important;
  }
  header.wp-block-group {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* === WPForms Newsletter — Walterlernt-Stil ===
   Grid-Layout (deterministischer als Flex bei WPForms-Modern-Render). */
.wpforms-container {
  margin: 0;
  max-width: 480px;
}
.wpforms-container .wpforms-form {
  display: grid !important;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto;
  gap: 0;
  margin: 0 !important;
  align-items: stretch;
}
.wpforms-container .wpforms-field-container,
.wpforms-container .wpforms-field-wrap {
  display: contents;
}
.wpforms-container .wpforms-field {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  grid-column: 1;
}
.wpforms-container .wpforms-field-label,
.wpforms-container .wpforms-field-sublabel,
.wpforms-container .wpforms-required-label,
.wpforms-container .wpforms-field-description {
  display: none !important;
}
.wpforms-container input[type="email"],
.wpforms-container input[type="text"] {
  padding: 14px 18px !important;
  border: 1px solid var(--wp--preset--color--light-3) !important;
  border-right: none !important;
  border-radius: 4px 0 0 4px !important;
  width: 100% !important;
  font-size: 16px !important;
  background: white !important;
  color: var(--wp--preset--color--body) !important;
  box-sizing: border-box;
  height: 48px;
  line-height: 1.4;
  box-shadow: none !important;
}
.wpforms-container input[type="email"]:focus,
.wpforms-container input[type="text"]:focus {
  outline: none !important;
  border-color: var(--wp--preset--color--main) !important;
}
.wpforms-container .wpforms-submit-container {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  display: flex;
  grid-column: 2;
}
.wpforms-container button.wpforms-submit,
.wpforms-container input[type="submit"].wpforms-submit {
  padding: 14px 24px !important;
  background: var(--wp--preset--color--main) !important;
  color: white !important;
  border: none !important;
  border-radius: 0 4px 4px 0 !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  cursor: pointer;
  white-space: nowrap;
  height: 48px;
  line-height: 1;
  box-shadow: none !important;
}
.wpforms-container button.wpforms-submit:hover,
.wpforms-container input[type="submit"].wpforms-submit:hover {
  background: var(--wp--preset--color--main-1) !important;
}
.wpforms-container .wpforms-confirmation-container-full {
  background: var(--wp--preset--color--main-minus-2) !important;
  border: none !important;
  color: var(--wp--preset--color--body) !important;
  padding: 16px 22px !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  margin: 0;
}

/* === Header Suche === */
.wl-header-search .wp-block-search__inside-wrapper {
  border: 1px solid var(--wp--preset--color--light-3);
  border-radius: 4px;
  background: white;
  overflow: hidden;
}
.wl-header-search .wp-block-search__input {
  border: none;
  font-size: 14px;
  padding: 8px 12px;
  background: transparent;
  color: var(--wp--preset--color--body);
  outline: none;
}
.wl-header-search .wp-block-search__input::placeholder {
  color: var(--wp--preset--color--body-2);
}
.wl-header-search .wp-block-search__button {
  background: var(--wp--preset--color--main-minus-2);
  color: var(--wp--preset--color--main);
  border: none;
  padding: 6px 10px;
  margin: 4px;
  border-radius: 3px;
  cursor: pointer;
}
.wl-header-search .wp-block-search__button:hover {
  background: var(--wp--preset--color--main);
  color: white;
}
.wl-header-search .wp-block-search__button svg {
  fill: currentColor;
  width: 18px;
  height: 18px;
}

/* === Print stylesheet — papier-freundlich ===
   Beim Drucken brauchen wir keine UI-Chrome wie Navigation, Buttons,
   Newsletter-Formulare oder Kommentare. Nur den eigentlichen Inhalt
   plus minimal Meta (Titel, Autor, Datum). */
@media print {
  /* Komplett ausblenden */
  header,
  footer,
  .wl-newsletter-form,
  form,
  .wp-block-comments,
  .wl-comments,
  .wp-block-post-comments-form,
  .wp-block-buttons,
  .wp-block-button,
  .wl-bio-pill,
  .wl-bio-links,
  .wl-cta-split,
  .wl-courses-link,
  /* Walter empfiehlt / Highlights / Aktuelle Beiträge etc. auf der Startseite */
  .wl-highlights,
  /* Related Posts auf Single */
  main > .wp-block-group.has-light-1-background-color:last-of-type,
  /* Hero-Watermark Walter-Icon */
  .wl-hero::after,
  .wl-course-cta::after {
    display: none !important;
  }

  /* Course-CTA-Box im Print: Hintergrund weg, nur Rahmen,
     damit der Kursbezug erhalten bleibt aber kein Tintenfresser */
  .wl-course-cta {
    background: none !important;
    border: 1px solid #aaa !important;
    padding: 16px !important;
    margin: 24px 0 !important;
    page-break-inside: avoid;
  }
  .wl-course-cta__btn {
    background: none !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    padding: 4px 10px !important;
    text-decoration: none !important;
  }
  .wl-course-cta__btn::after {
    content: " (" attr(href) ")";
    font-size: 11px;
    color: #555;
  }

  /* Author-Bio im Print kompakt */
  .wl-author-bio {
    background: none !important;
    border-top: 1px solid #ccc;
    padding: 12px 0 !important;
  }
  .wl-bio-polaroid {
    transform: none !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    padding: 4px !important;
  }

  /* Body-Typografie für Papier optimieren */
  body {
    font-size: 11pt;
    line-height: 1.45;
    color: #000;
    background: #fff;
  }
  main {
    max-width: 100% !important;
  }
  h1, h2, h3, h4, h5, h6 {
    color: #000;
    page-break-after: avoid;
  }
  /* Links: URL nach dem Text in Klammern anzeigen, ausser für Anker und kursinterne Pfade */
  a[href^="http"]:not(.wl-course-cta__btn)::after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: #555;
    word-break: break-all;
  }
  /* Bilder nicht über die Seitenkante */
  img {
    max-width: 100% !important;
    height: auto !important;
    page-break-inside: avoid;
  }
  /* Listen und Absätze nicht über Seitenumbruch reissen */
  p, li, blockquote {
    page-break-inside: avoid;
  }
  /* Seitenränder */
  @page {
    margin: 2cm 1.8cm;
  }
}


/* === Mobile patch Round 2 — Header padding override + Kommentar-Sektion === */
@media (max-width: 781px) {
  /* Header-Override mit höherer Specificity, damit Sicherheitsnetz-Rule (has-background) nicht greift */
  body header.wp-block-group,
  header.wp-block-group.has-background {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  body footer.wp-block-group {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Kommentar-Sektion: Layout zähmen */
  .wp-block-comments,
  .wp-block-comment-template,
  .wp-block-comment-template li,
  .wp-block-comment-content {
    max-width: 100% !important;
    width: auto !important;
  }
  .wp-block-comments .wp-block-group.is-nowrap,
  .wp-block-comments .wp-block-group.is-layout-flex.is-nowrap {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .wp-block-comments .wp-block-comment-author-name,
  .wp-block-comments .wp-block-comment-date {
    font-size: 14px;
  }
  .wp-block-comments .wp-block-comment-content,
  .wp-block-comments .wp-block-comment-content p {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100% !important;
  }
  .wp-block-post-comments-form input[type="text"],
  .wp-block-post-comments-form input[type="email"],
  .wp-block-post-comments-form input[type="url"],
  .wp-block-post-comments-form textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .wl-comments,
  .wp-block-comments {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* === Mobile patch Round 3 — Specificity bumps für Header + aggressivere Kommentar-Fix === */
@media (max-width: 781px) {
  /* Header: 5+1 Specificity um Safety-Net (4 Klassen) zu schlagen */
  header.wp-block-group.has-background.has-white-background-color:not(.wl-hero):not(.wl-course-cta) {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Footer mit 5 Klassen */
  footer.wp-block-group.has-background:not(.wl-hero):not(.wl-course-cta):not(.wl-cat-nav) {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Kommentare: ALLE Children auf 100% max — egal welcher Layout-Container */
  .wp-block-comments,
  .wp-block-comments *,
  .wp-block-comment-template,
  .wp-block-comment-template *,
  .wp-block-comment-template li,
  .wp-block-comment-template li * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Constrained layout-container in Kommentaren: kein eigenes width-Constraint */
  .wp-block-comments .is-layout-constrained,
  .wp-block-comments .wp-container-core-group,
  .wp-block-comments .wp-block-group {
    width: auto !important;
    min-width: 0 !important;
  }
  /* CSS-Variable für content-size auf 100% setzen innerhalb Kommentaren */
  .wp-block-comments {
    --wp--style--global--content-size: 100% !important;
    --wp--style--global--wide-size: 100% !important;
  }
}