/*
Theme Name: Blocksy Child sudoku-drucken
Template: blocksy
Description: Child-Theme für sudoku-drucken.de — der einzige Ort für Anpassungen auf Theme-Ebene (CSS + functions.php). Dokumentiert in migration/SD5_Admin.md.
Version: 1.0.0
Text Domain: blocksy-child-sudokudrucken
*/

/* ==========================================================================
   Section 6 — Sudoku-specific UI utility classes
   ========================================================================== */

/* Joomla-Original-H1 Style (custom.css §H1): orange-gerahmt, gelber Hintergrund.
   Opt-in per Klasse — NICHT pauschal auf h1, sonst zerstört es Blocksy-Layouts.
   Verwendung: <h1 class="sd-classic-h1">Titel</h1> */

.sd-classic-h1 {
  margin-top: 15px;
  font-family: var(--sd-font-brand);
  border-top:    2px solid var(--sd-gold);
  border-bottom: 2px solid var(--sd-gold);
  background-color: #ffff33;
  display: block;
  font-size: 11pt;
  letter-spacing: 1px;
  padding: 0 12px;
}

/* Footer-Akzent-Linie (Joomla custom.css §Footer): oranger 1px Topborder.
   Opt-in per Klasse für eigene Footer-Blöcke. */

.sd-footer-accent-line {
  border-top: 1px solid var(--sd-color-accent, var(--sd-gold));
  padding-top: 5px;
}

.sd-menu-joomla,
.sd-menu-joomla .mega-menu-wrap,
.sd-menu-joomla.mega-menu-wrap {
  background-color: var(--sd-color-text, #333333) !important;
  font-family: var(--sd-font-brand);
}

.sd-menu-joomla .mega-menu > li.mega-menu-item > a.mega-menu-link,
.sd-menu-joomla .mega-menu > li.mega-menu-item > a.mega-menu-link:focus {
  color: #ffffff !important;
  background-color: transparent !important;
  font-family: var(--sd-font-brand) !important;
  font-weight: normal !important;
  text-transform: none !important;
  font-size: calc(var(--sd-font-size-base) * (13.01 / 14)) !important;
  letter-spacing: 0.3px;
  padding: 8px 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.sd-menu-joomla .mega-menu > li.mega-menu-item:last-child > a.mega-menu-link {
  border-right: none;
}

.sd-menu-joomla .mega-menu > li.mega-menu-item > a.mega-menu-link:hover,
.sd-menu-joomla .mega-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
.sd-menu-joomla .mega-menu > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link {
  color: var(--sd-color-accent, var(--sd-gold)) !important;
  background-color: rgba(240, 186, 55, 0.08) !important;
}

/* Sub-menus (Dropdowns) */
.sd-menu-joomla .mega-menu li.mega-menu-item ul.mega-sub-menu {
  background-color: var(--sd-color-text, #333333) !important;
  border-top: 2px solid var(--sd-color-accent, var(--sd-gold)) !important;
  padding: 6px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.sd-menu-joomla .mega-menu li.mega-menu-item ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link {
  color: #ffffff !important;
  background-color: transparent !important;
  font-family: var(--sd-font-brand) !important;
  font-size: calc(var(--sd-font-size-base) * (12.5 / 14)) !important;
  padding: 7px 16px;
}

.sd-menu-joomla .mega-menu li.mega-menu-item ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover,
.sd-menu-joomla .mega-menu li.mega-menu-item ul.mega-sub-menu li.mega-current-menu-item > a.mega-menu-link {
  color: var(--sd-color-accent, var(--sd-gold)) !important;
  background-color: rgba(240, 186, 55, 0.12) !important;
}

/* Mobile-Toggle Button (Hamburger) */
.sd-menu-joomla .mega-menu-toggle {
  background-color: var(--sd-color-text, #333333) !important;
}

.sd-menu-joomla .mega-menu-toggle .mega-toggle-animated-inner,
.sd-menu-joomla .mega-menu-toggle .mega-toggle-animated-inner::before,
.sd-menu-joomla .mega-menu-toggle .mega-toggle-animated-inner::after {
  background: var(--sd-color-accent, var(--sd-gold)) !important;
}

[data-header*="type-1"] .ct-header [data-row="top"] {
  background-color: var(--sd-color-bg, #ffffff) !important;
  background-image: none !important;
}

[data-header*="type-1"] .ct-header [data-row="middle"] {
  background-color: var(--sd-color-bg, #ffffff) !important;
  background-image: url("img/header_sudoku_v4.png") !important;
  background-image: image-set(
    url("img/header_sudoku_v4.webp") type("image/webp"),
    url("img/header_sudoku_v4.png") type("image/png")
  ) !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  background-size: auto !important;
  min-height: 150px;
}
/* bottom-row (menu) gets its own Joomla-Yellow background in Section 10b */

/* Top-row (HIER WERBEN link): dezenter Trenner zur Mitte hin.
   Joomla hat dort eine schmale Akzentleiste. */
[data-header*="type-1"] .ct-header [data-row="top"] {
  border-bottom: 1px solid var(--sd-color-border, #dddddd) !important;
  color: var(--sd-color-text, #333333) !important;
}

[data-header*="type-1"] .ct-header [data-row="top"] a {
  color: var(--sd-color-text, #333333) !important;
}

[data-header*="type-1"] .ct-header [data-row="top"] a:hover {
  color: var(--sd-color-accent, var(--sd-gold)) !important;
}

.ct-header .site-title,
.ct-header .site-title a {
  font-family: var(--sd-font-brand) !important;
  font-size: calc(var(--sd-font-size-base) * (24 / 14)) !important;
  font-weight: 700 !important;
  line-height: 26px !important;
  letter-spacing: 2px !important;
  color: #000088 !important;
  text-shadow: none !important; /* V63: navy title without the V1 yellow glow */
  text-transform: none !important;
  white-space: nowrap !important;
}

/* Prevent the logo column from being squeezed by Blocksy's flex layout.
   Without this, the long "sudoku-drucken" + slogan wraps awkwardly.
   V63: the gold LEFT BAR brackets title + slogan on the title container. */
.ct-header .site-branding,
.ct-header .site-title-container,
.ct-header [data-id="logo"] {
  flex: 0 0 auto !important;
  min-width: 340px;
}

.ct-header .site-title-container {
  border-left: 6px solid var(--sd-gold) !important; /* V63 gold left bar (tT6) */
  padding-left: 16px !important;
}

/* V63 slogan = yellow highlight box (sS3). Styled identically to the
   ::after fallback (Section 3c) so the native Tagline matches when set. */
.ct-header .site-description {
  font-family: var(--sd-font-brand) !important;
  font-size: calc(var(--sd-font-size-base) * (18 / 14)) !important;
  font-weight: 700 !important;
  line-height: 22px !important;
  letter-spacing: 0 !important;
  color: #222222 !important;
  background-color: #ffff33 !important;
  text-shadow: none !important;
  text-transform: none !important;
  margin-top: 4px;
  padding: 1px 8px !important;
  display: inline-block;
}

.ct-container {
  max-width: 1170px !important;
  margin-inline: auto !important;
}

.entry-content,
.wp-block-post-content,
main article {
  max-width: 980px;
  margin-inline: auto !important;
}

.ct-header [data-device="desktop"] [data-row] {
  max-width: none !important;
  width: 100% !important;
}

/* Fallback slogan — always rendered via ::after on the Blocksy
   `.site-title-container`. If the WP Customizer Tagline is set, the user can
   remove this rule and Blocksy's native `.site-description` will appear. */
.ct-header .site-title-container::after {
  content: "Spiele und drucke Sudoku kostenlos";
  display: inline-block; /* V63: yellow highlight box (sS3) */
  font-family: var(--sd-font-brand);
  font-size: calc(var(--sd-font-size-base) * (18 / 14));
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 0;
  color: #222222;
  background-color: #ffff33;
  text-shadow: none;
  padding: 1px 8px;
  margin-top: 4px;
  white-space: nowrap;
}

[data-prefix="blog"] .entry-card,
[data-prefix="categories"] .entry-card,
[data-prefix="author"] .entry-card,
[data-prefix="search"] .entry-card {
  background-color: var(--sd-color-surface, #ffffff) !important;
  border: 1px solid var(--sd-color-border, #dddddd) !important;
}

main h1,
main h2,
main h3 {
  font-family: var(--sd-font-brand) !important;
  color: #444444 !important;
  border-top:    2px solid #ffa500 !important;
  border-bottom: 2px solid #ffa500 !important;
  background-color: transparent !important;
  margin: 15px 0 8px !important;
  letter-spacing: 0.5px;
  display: block;
  text-align: center !important;
  line-height: 1.5 !important;
}

main h1,
main h2,
main h3 {
  max-width: 980px !important;
  margin-inline: auto !important;
}

main h1 {
  background-color: #ffff33 !important;
  font-size: calc(var(--sd-font-size-base) * (14.67 / 14)) !important;
  font-weight: 800 !important;
  padding: 6px 12px !important;
}

main h2 {
  font-size: calc(var(--sd-font-size-base) * (12 / 14)) !important;
  font-weight: 700 !important;
  padding: 5px 12px !important;
}

.wp-block-woocommerce-coming-soon h1.wp-block-heading {
  align-self: stretch;
  width: 100% !important;
}

.wp-block-woocommerce-coming-soon .wp-block-group > .wp-block-spacer:first-child {
  display: none;
}

main h3 {
  font-size: calc(var(--sd-font-size-base) * (11 / 14)) !important;
  font-weight: 700 !important;
  border-top-width:    1px !important;
  border-bottom-width: 1px !important;
  padding: 4px 12px !important;
}

[data-header*="type-1"] .ct-header [data-row="bottom"] {

  background-color: #fff090 !important;
  border-top: 1px solid var(--sd-gold) !important;
  border-bottom: 1px solid var(--sd-gold) !important;
}

/* Max Mega Menu's own CSS uses double-ID specificity. We match it with two
   attribute-prefix selectors so our overrides take effect (later in cascade). */
[id^="mega-menu-wrap-"] {
  background-color: transparent !important;
}

[id^="mega-menu-wrap-"] ul[id^="mega-menu-"] > li.mega-menu-item > a.mega-menu-link {
  color: #000000 !important;
  background-color: transparent !important;
  font-family: var(--sd-font) !important;
  font-weight: 700 !important;
  font-size: calc(var(--sd-font-size-base) * (13.33 / 14)) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 6px 12px !important;
  border: none !important;
  height: auto !important;
  line-height: 1.5 !important;
}

[id^="mega-menu-wrap-"] ul[id^="mega-menu-"] > li.mega-menu-item > a.mega-menu-link:hover,
[id^="mega-menu-wrap-"] ul[id^="mega-menu-"] > li.mega-menu-item > a.mega-menu-link:focus {
  background-color: rgba(240, 186, 55, 0.5) !important;
  color: #000000 !important;
}

[id^="mega-menu-wrap-"] ul[id^="mega-menu-"] > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
[id^="mega-menu-wrap-"] ul[id^="mega-menu-"] > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
[id^="mega-menu-wrap-"] ul[id^="mega-menu-"] > li.mega-menu-item.current-menu-item > a.mega-menu-link {
  background-color: var(--sd-gold) !important;
  color: #000000 !important;
}

/* Dropdowns: light yellow bg with gold accent border, dark text */
[id^="mega-menu-wrap-"] ul[id^="mega-menu-"] li.mega-menu-item ul.mega-sub-menu {
  background-color: #fffacd !important;
  border-top: 2px solid var(--sd-gold) !important;
  padding: 4px 0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

[id^="mega-menu-wrap-"] ul[id^="mega-menu-"] li.mega-menu-item ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link {
  color: #000000 !important;
  background-color: transparent !important;
  font-family: var(--sd-font) !important;
  font-weight: 700 !important;
  font-size: calc(var(--sd-font-size-base) * (13.01 / 14)) !important;
  padding: 6px 14px !important;
}

[id^="mega-menu-wrap-"] ul[id^="mega-menu-"] li.mega-menu-item ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover {
  background-color: rgba(240, 186, 55, 0.5) !important;
}

/* Top-level items lesbar (dunkel auf gelbem Balken) */
.ct-header [data-row="bottom"] .menu > li.menu-item > .ct-menu-link {
  color: #000000 !important;
  font-family: var(--sd-font) !important;
  font-weight: 700 !important;
}
.ct-header [data-row="bottom"] .menu > li.menu-item > .ct-menu-link:hover,
.ct-header [data-row="bottom"] .menu > li.current-menu-item > .ct-menu-link {
  color: #000000 !important;
  background-color: rgba(240, 186, 55, 0.5) !important;
}

/* Dropdown (sub-menu): hell-gelb mit goldenem Akzent, dunkler Text */
.ct-header .menu .sub-menu,
.ct-header .header-menu-1 .sub-menu {
  background-color: #fffacd !important;
  border-top: 2px solid var(--sd-gold) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  --theme-palette-color-8: #fffacd; /* neutralise Blocksy dark dropdown var */

  --dropdown-horizontal-offset: 0px !important;
}
.ct-header .menu .sub-menu .ct-menu-link {
  color: #000000 !important;
  font-family: var(--sd-font) !important;
  font-weight: 700 !important;
}
.ct-header .menu .sub-menu .menu-item:hover > .ct-menu-link,
.ct-header .menu .sub-menu .menu-item.current-menu-item > .ct-menu-link {
  background-color: rgba(240, 186, 55, 0.5) !important;
  color: #000000 !important;
}

.ct-header [data-row="bottom"] .menu > li.current-menu-ancestor > .ct-menu-link,
.ct-header [data-row="bottom"] .menu > li.current-menu-parent > .ct-menu-link,
.ct-header .menu .sub-menu .menu-item.current-menu-ancestor > .ct-menu-link,
.ct-header .menu .sub-menu .menu-item.current-menu-parent > .ct-menu-link {
  background-color: rgba(240, 186, 55, 0.5) !important;
  color: #000000 !important;
}

/* dropdown toggle arrows dark */
.ct-header [data-row="bottom"] .menu .ct-toggle-dropdown-desktop,
.ct-header [data-row="bottom"] .menu .ct-toggle-dropdown-desktop .ct-icon {
  color: #000000 !important;
  fill: currentColor !important;
}

/* Backdrop: Seite bleibt sichtbar (abgedunkelt), NICHT gelb */
#offcanvas.ct-panel {
  background-color: rgba(0, 0, 0, 0.45) !important;
}

/* Nur das Panel selbst ist gelb */
#offcanvas .ct-panel-inner {
  background-color: var(--sd-highlight) !important;
}
#offcanvas .ct-panel-content,
#offcanvas .ct-panel-content-inner {
  background-color: transparent !important;
}
#offcanvas .ct-toggle-close,
#offcanvas .ct-toggle-close .ct-icon {
  color: #000000 !important;
  fill: currentColor !important;
}

/* Leichter Rahmen um die Menüliste (hebt sich vom gelben Panel ab) */
#offcanvas .mobile-menu {
  border: 1px solid var(--sd-gold);
  border-radius: var(--sd-radius-sm);
  background-color: rgba(255, 255, 255, 0.35);
  overflow: hidden;
}

/* Blocksy-natives Menü: dunkler, lesbarer Text auf Gelb + dezente Trenner */
#offcanvas .mobile-menu .ct-menu-link {
  color: #000000 !important;
  font-family: var(--sd-font) !important;
  font-weight: 700 !important;
}
#offcanvas .mobile-menu li + li {
  border-top: 1px solid rgba(240, 186, 55, 0.6);
}

#offcanvas .mobile-menu .tssd-menu-bug > .ct-menu-link,
#offcanvas .mobile-menu .tssd-menu-fontsize > .tssd-fs,
#offcanvas .mobile-menu .tssd-menu-darkmode > .tssd-dm,
#offcanvas .mobile-menu .tssd-menu-search > .ct-menu-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  text-align: start;
}
/* Der <button> erbt Blocksys Menü-Schriftgröße nicht von selbst (15 statt 20 px). */
#offcanvas .mobile-menu .tssd-menu-fontsize > .tssd-fs,
#offcanvas .mobile-menu .tssd-menu-darkmode > .tssd-dm {
  font-size: var(--theme-font-size);
  padding-inline: 0;
}
#offcanvas .mobile-menu .tssd-menu-bug .screen-reader-text,
#offcanvas .mobile-menu .tssd-menu-fontsize .screen-reader-text,
#offcanvas .mobile-menu .tssd-menu-darkmode .screen-reader-text,
#offcanvas .mobile-menu .tssd-menu-search .screen-reader-text {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}
#offcanvas .mobile-menu .ct-menu-link:hover,
#offcanvas .mobile-menu .current-menu-item > .ct-menu-link,
#offcanvas .mobile-menu .current-menu-item > .ct-sub-menu-parent > .ct-menu-link {
  background-color: rgba(240, 186, 55, 0.5) !important;
  color: #000000 !important;
}
/* Accordion-Pfeile dunkel */
#offcanvas .mobile-menu .ct-toggle-dropdown-mobile,
#offcanvas .mobile-menu .ct-toggle-dropdown-mobile .ct-icon {
  color: #000000 !important;
  fill: currentColor !important;
}

#offcanvas .mobile-menu .ct-toggle-dropdown-mobile,
#offcanvas .ct-toggle-close {
  position: relative;
}
#offcanvas .mobile-menu .ct-toggle-dropdown-mobile::after,
#offcanvas .ct-toggle-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}
/* Untermenüs etwas heller abgesetzt */
#offcanvas .mobile-menu .sub-menu,
#offcanvas .mobile-menu .ct-sub-menu {
  background-color: rgba(255, 250, 205, 0.6) !important;
}

@media (max-width: 1000px) {
  #mega-menu-wrap-max_mega_menu_1 {
    display: none !important;
  }
}

:root {
  --sd-mm-gap: 2px;
  --sd-mm-bar-desc: block;
  --sd-mm-bar-pad-y: 7px;
}

.sd-mm-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-right: var(--sd-mm-gap);
  flex: 0 0 24px;
  object-fit: contain;
}
.sd-mm-title-wrap {
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
  line-height: 1.2;
}
.sd-mm-title {
  font-weight: 700;
}
.sd-mm-desc {
  display: block;
  font-size: var(--sd-fs-xs);
  font-weight: 400;
  font-style: italic;
  color: #555;
  margin-top: 2px;
  white-space: normal;
}

/* Use flex inside the anchor so icon + text align nicely, especially in
   long submenu items where the slogan may wrap to two lines. */
.ct-header .menu .sub-menu .ct-menu-link,
#offcanvas .mobile-menu .sub-menu .ct-menu-link {
  display: flex !important;
  align-items: center;
}

/* Mobile/off-canvas: same look. */
#offcanvas .mobile-menu .sd-mm-desc {
  color: #333;
}

/* Top-level (yellow bar) items: slogan visibility is now controlled by the
   --sd-mm-bar-desc variable (block = show, none = original compact bar). */
.ct-header [data-row="bottom"] .menu > li.menu-item > .ct-menu-link .sd-mm-desc {
  display: var(--sd-mm-bar-desc);
}

.ct-header [data-row="bottom"] .menu > li.menu-item > .ct-menu-link {
  display: flex;
  align-items: center;
  padding-top: var(--sd-mm-bar-pad-y);
  padding-bottom: var(--sd-mm-bar-pad-y);
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: var(--sd-font) !important;
  font-size: calc(var(--sd-font-size-base) * (13.33 / 14)) !important;
  font-weight: 700 !important;
  color: #000000 !important;
}

.ct-header .menu .sub-menu .sd-mm-title {
  font-family: var(--sd-font) !important;
  font-size: calc(var(--sd-font-size-base) * (14 / 14)) !important;
  font-weight: 700 !important;
  color: #000000 !important;
}
.ct-header .menu .sub-menu .sd-mm-desc,
#offcanvas .mobile-menu .sd-mm-desc,
.ct-header [data-row="bottom"] .menu > li.menu-item > .ct-menu-link .sd-mm-desc {
  color: #0000ff !important;
  font-family: var(--sd-font-brand) !important;
  font-size: calc(var(--sd-font-size-base) * (10 / 14)) !important;
  font-weight: 700 !important;
  font-style: normal !important;
}
/* Balken-Slogan sitzt eng unter dem Titel (kein Extra-Abstand wie im Dropdown). */
.ct-header [data-row="bottom"] .menu > li.menu-item > .ct-menu-link .sd-mm-desc {
  margin-top: 0;
  line-height: 1.15;
}

/* (3) gestrichelte Trenner zwischen den Dropdown-Einträgen + etwas mehr Luft */
.ct-header .menu .sub-menu > li.menu-item + li.menu-item {
  border-top: 1px dashed rgba(0, 0, 0, 0.35);
}
.ct-header .menu .sub-menu .ct-menu-link {
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  align-items: center;
}

/* Footer-Container: gelb mit goldener Linie oben */
.ct-footer {
  background-color: #ffff99 !important;
  border-top: 1px solid var(--sd-gold) !important;
}

/* ---------- 1) Oberes Footer-Menue (term 19, Footer (oben)) ---------- */
.ct-footer [data-row="top"] {
  background-color: transparent !important;
}
.ct-footer #menu-footer-oben {
  margin: 0;
  text-align: center;
  list-style: none;
  padding: 0;
}
.ct-footer #menu-footer-oben li.menu-item {
  display: inline-block;
  margin: 0;
  border-radius: var(--sd-radius);
  transition: background-color 0.2s ease-out;
}
.ct-footer #menu-footer-oben li.menu-item > .ct-menu-link {
  font-family: var(--sd-font) !important;
  font-size: calc(var(--sd-font-size-base) * (14 / 14)) !important;
  line-height: 40px !important;
  padding: 0 16px !important;
  color: #000 !important;
  background: transparent !important;
  text-decoration: none !important;

  display: inline-block;
  transition: 0.2s ease-out;
}
.ct-footer #menu-footer-oben li.menu-item:hover {
  background-color: orange;
}
.ct-footer #menu-footer-oben li.menu-item > .ct-menu-link:hover,
.ct-footer #menu-footer-oben li.menu-item > .ct-menu-link:focus {
  background: none !important;
  font-weight: 700 !important;
  color: #000 !important;
  text-decoration: none !important;
}

/* ---------- 2) Unteres Footer-Menue (term 21, max_mega_menu_1) ----------
   Wir muessen Section 10b ueberbieten — dort sind die mega-menu-link-Styles
   global gesetzt. Hoehere Spezifitaet via `.ct-footer` Prefix. */
.ct-footer [data-row="middle"] {
  background-color: transparent !important;
  text-align: center;
}
.ct-footer #mega-menu-wrap-max_mega_menu_1 {
  border-top: 1px solid var(--sd-gold) !important;
  padding-top: 5px !important;
  background: transparent !important;
}
.ct-footer #mega-menu-wrap-max_mega_menu_1 ul#mega-menu-max_mega_menu_1 {
  list-style: none;
  text-align: center;
  margin: 0 auto;
  display: inline-block;

  line-height: 1.05 !important;
}
.ct-footer #mega-menu-wrap-max_mega_menu_1 li.mega-menu-item {
  float: none !important;
  display: inline-block !important;
  margin: 0;
  border: 0 !important;
}
.ct-footer #mega-menu-wrap-max_mega_menu_1 li.mega-menu-item > a.mega-menu-link {

  padding: 0 5px !important;
  font-size: calc(var(--sd-font-size-base) * (10 / 14)) !important;
  line-height: 1.05 !important;
  font-family: var(--sd-font) !important;
  font-weight: 400 !important;
  /* text-shadow: var(--sd-gold) 2px 2px 1px !important; */
  color: var(--sd-gold) !important;
  background: transparent !important;
  text-decoration: none !important;
  border: 0 !important;
  height: auto !important;
}
.ct-footer #mega-menu-wrap-max_mega_menu_1 li.mega-menu-item > a.mega-menu-link:hover,
.ct-footer #mega-menu-wrap-max_mega_menu_1 li.mega-menu-item > a.mega-menu-link:focus,
.ct-footer #mega-menu-wrap-max_mega_menu_1 li.mega-menu-item.mega-current-menu-item > a.mega-menu-link {
  background-color: var(--sd-gold) !important;
  border-radius: var(--sd-radius)!important;
  color: #000 !important;
  text-shadow: none !important;
}
/* Joomla blendet die Druck-Icons im Lower-Footer aus — wir auch. */
.ct-footer #mega-menu-wrap-max_mega_menu_1 li.mega-menu-item > a.mega-menu-link img {
  display: none !important;
}
/* Mobiles Verhalten unveraendert: Section 8 oben blendet max_mega_menu_1 unter
   1000px aus (Beschluss r1). */

.tssd-rails {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  width: 100%;

  max-width: 1170px;
  margin-inline: auto;
}

.tssd-rails > main {
  flex: 1 1 600px;
  min-width: 0;   /* allow the content column to shrink before the rails do */
}

.tssd-rails--bare {
  display: block;
  max-width: none;
}

.tssd-rails--bare > main > *:not([class*="ct-container"]) {
  max-width: 980px;
  margin-inline: auto;
}
.tssd-rail {
  position: sticky;
  top: 20px;
  align-self: flex-start;
}
.tssd-rail--left  { flex: 0 0 170px; }
.tssd-rail--right { flex: 0 0 310px; }
.tssd-rail-widget { margin-bottom: 20px; }
.tssd-rail-widget:last-child { margin-bottom: 0; }
.tssd-rail-widget img { max-width: 100%; height: auto; }
.tssd-rail-widget__title { font-size: calc(var(--sd-font-size-base) * (14 / 14)); margin: 0 0 6px; }

.tssd-rail .tssd-lb-table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  font-size: var(--sd-fs-xs);
}
.tssd-rail .tssd-lb-table th,
.tssd-rail .tssd-lb-table td {
  padding: 4px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tssd-rail .tssd-lb-title { font-size: calc(var(--sd-font-size-base) * (14 / 14)); }

/* Below the frame width the rails are hidden and content goes full-width.
   Frame 1170 (links 170 + Content + rechts 310 + 2×16 gap) → hide under ~1180px. */
@media (max-width: 1180px) {
  .tssd-rails { display: block; }
  .tssd-rail { display: none; }
}

.entries[data-layout="grid"] { align-items: stretch; }
.entries[data-layout="grid"] > .entry-card,
.entries[data-layout="grid"] > article.entry-card {
  height: 100%;
  min-width: 0;          /* darf vor den Rails schrumpfen, kein Overflow */
  display: flex;
  flex-direction: column;
}
.entries[data-layout="grid"] .entry-card .entry-excerpt { flex: 1 1 auto; }
.entries[data-layout="grid"] .entry-card,
.entries[data-layout="grid"] .entry-card * { overflow-wrap: anywhere; }

body.search-results .entries[data-layout="grid"] {
  grid-template-columns: 1fr !important;
}

body.search-results article.entry-card:not(.category-aktuelles) .entry-meta {
  display: none;
}

[class^="thumbnail_"],
[class*=" thumbnail_"] {
  clear: both;
  overflow: hidden;   /* contain the floated img so the block has full height */
  padding: 10px 0;
  /* r4 (ss14): more breathing room below the thumbnail before the next heading */
  margin: 10px 0 30px;
}

main img[src*="pdf-thumbnails"] {
  margin-bottom: 30px !important;
}
/* extra top air before EVERY content heading that follows a thumbnail block.
   r-final: vorher nur die spezifischen #sudoku-NxN-IDs -> die Ueberschrift nach
   dem 49x49-Block ("Sudoku Schwierigkeitsstufen") hatte kein clear und stand nur
   6px unter dem Bild. Jetzt clearen alle Content-Ueberschriften die Floats. */
main .entry-content h2,
main .entry-content h3,
main h2[id^="sudoku-"],
main h3[id^="sudoku-"] {
  clear: both;
  margin-top: 32px !important;
}

body {
  background-color: #ffffc6 !important;
}
/* Content-Wrapper transparent, damit das gelbe Body durchscheint (wie Joomla,
   dessen Content-Bereich transparent ist). Header/Footer behalten ihre eigenen
   Hintergründe (Sections 3/11). */
#main-container > main,
#main-container .ct-container[class*="content"],
.ct-content-block,
main.site-main {
  background-color: transparent !important;
}

.tssd-headerad {
  margin: 2px auto 12px;   /* sitzt im Main-Container direkt über der H1 (ss25-Fix) */
  text-align: center;
  max-width: 980px;
  line-height: 0; /* kill inline-image whitespace gap */
}
.tssd-headerad > * { line-height: normal; }

#main-container { position: relative; }
.tssd-headerbadge {
  position: absolute;
  top: var(--tssd-nb-top, 6px);

  right: min(
    var(--tssd-nb-right, 20px),
    max(0px, calc(100% - var(--tssd-nb-minleft, 54%) - var(--tssd-nb-badgew, 380px)))
  );
  /* Blocksy's header.ct-header sits at z-index:50 in the same (#main-container) stacking
     context; the badge must beat it to be visible, while staying well below the sticky/
     offcanvas panel (999999). The badge sits in the title row, above the menu, so it never
     needs to overlay the mega-menu dropdowns. */
  z-index: 100;
  line-height: 0;
  transform: scale(var(--tssd-nb-scale, 1));
  transform-origin: top right;
  pointer-events: none; /* don't block clicks on the header area behind it */
}
.tssd-headerbadge .tssd-news-badge,
.tssd-headerbadge a { pointer-events: auto; } /* but the badge/link stays clickable */
/* On narrow viewports the header stacks; hide the absolutely-positioned badge to avoid overlap
   (mirrors the plugin's own @media rule). */
@media (max-width: 900px) { .tssd-headerbadge { display: none; } }

main [data-vertical-spacing*='top'] {
  padding-top: max(16px, calc(var(--theme-content-vertical-spacing) - 32px));
}

/* P1: Ein In-Content-Werbeplatz ohne ausgelieferten Slot fällt vollständig zusammen,
   damit tier-unterdrückte (Silver/Gold) User keinen leeren reservierten Kasten sehen.
   Der TS-Ads-Renderer gibt für unterdrückte/leere Slots einen Leerstring zurück, sodass
   `.tsads-slot` dann fehlt — `:not(:has())` blendet die leere Hülle aus. */
.tssd-incontent-ad:not(:has(.tsads-slot)) { display: none !important; }

/* ==========================================================================
   Sections 1–2, 4, 7, 9 — bewusst leer
   ==========================================================================
   1 Layout/Grid · 2 Typography · 3 Header · 4 Footer · 7 WooCommerce ·
   9 Utilities · 10 Plugin-Integration

   Theme-weite Styles liegen im Blocksy-Customizer. Plugin-spezifische Styles
   liegen in den jeweiligen TS-Plugins (ts-sudoku, ts-ads, …). Nur echte
   Theme-Utility-Klassen kommen hier rein (siehe Section 6).
*/

.tssd-home-section {
  margin: 0 0 16px;
  padding: 18px 22px;
  border: 1px solid var(--sd-line);
  border-left: 6px solid var(--sd-gold); /* Akzentbalken in Header-Gelb (Reopen Pt.1) */
  border-radius: var(--sd-radius-lg);
  background: var(--sd-surface-2);            /* Punkte-Box-Gelb (V1 / Frage 1) */
  box-shadow: var(--sd-shadow-sm);
}
/* Reopen Pt.1 — Akzentbalken exakt im Seiten-Header-Gelb (var(--sd-gold)), 6px breit.
   Auf Nicht-Hero gescoped (Hero bleibt rahmenlos) + !important wie vom Betreiber vorgegeben. */
.tssd-home-section:not(.tssd-home-hero) { border-left: 6px solid var(--sd-gold) !important; }
/* Reopen Pt.4 — „Sudoku des Tages" als Spotlight: kräftigeres Gelb (var(--sd-highlight)) wie im
   V1-Mockup (.sec--daily), hebt die erste Box von den blasseren Karten ab. */
.tssd-home-section:has(.tssd-daily-teaser):not(.tssd-home-hero) { background: var(--sd-highlight); }
/* Hero ohne Karten-Rahmen — wirkt als Intro über den Sektionen. */
.tssd-home-section.tssd-home-hero {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 4px 0 6px;
  margin-bottom: 8px;
}
/* CTA-Leiste im Hero (V5-Stil): gelbe Leiste mit zwei Buttons + Trust-Mikrotext. */
.tssd-home-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  background: var(--sd-highlight);
  border: 1px solid var(--sd-gold);
  border-radius: var(--sd-radius-lg);
  padding: 16px 20px;
  box-shadow: var(--sd-shadow-sm);
  margin-top: 14px;
}
.tssd-home-cta .wp-block-buttons { margin: 0; gap: 12px; align-items: center; }
/* Reopen Pt.2 — Button-Abrundung exakt wie im V5-Mockup (.btn = 9px), nicht Blocksys 3px. */
.tssd-home-cta .wp-block-button__link { padding: 12px 22px; font-weight: var(--sd-btn-weight); border-radius: var(--sd-radius)!important; display: inline-flex; align-items: center; }

.tssd-home-cta .tssd-cta--print .wp-block-button__link {
  background: var(--sd-gold); color: var(--sd-gold-ink); border: 1px solid var(--sd-gold-line);
  box-shadow: none;
}
.tssd-home-cta .tssd-cta--print .wp-block-button__link:hover { background: var(--sd-gold-dark); color: var(--sd-gold-ink); }
.tssd-home-cta .tssd-cta--play .wp-block-button__link {
  background: var(--sd-white); color: var(--sd-text); border: 1px solid var(--sd-line);
}
.tssd-home-cta .tssd-cta--play .wp-block-button__link:hover { background: var(--sd-surface-2); }
.tssd-home-cta__micro {
  margin: 0 0 0 auto;
  align-self: center;          /* Reopen Pt.2 — Mikrotext mittig statt nach unten gerutscht */

  font-size: var(--sd-fs-eyebrow); font-weight: 700; color: var(--sd-gold-dark);
  text-transform: uppercase; letter-spacing: .03em;
}
@media (max-width: 560px) {
  .tssd-home-cta { flex-direction: column; align-items: stretch; }
  .tssd-home-cta__micro { margin: 4px 0 0; text-align: center; }
}
.tssd-home-section > *:first-child { margin-top: 0; }
.tssd-home-section > *:last-child { margin-bottom: 0; }
/* Icon-Überschrift: Icon links neben dem Titel, vertikal zentriert. */
.tssd-home-h2 {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Reopen Pt.3 — Überschrift dicht unter die Box-Oberkante. Blocksy setzt die
   Heading-Margin über ein externes Stylesheet mit höherer Spezifität als
   `.tssd-home-h2`; daher hier bewusst hoch-spezifisch (physisch + logisch),
   Zielabstand wie im Mockup (.sec__h: 0 0 6px). */
.entry-content .tssd-home-section h2.tssd-home-h2.wp-block-heading {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
  margin-bottom: 6px !important;
}
.tssd-home-ico { flex: 0 0 auto; width: 32px; height: 32px; }
.tssd-home-section .wp-block-buttons { margin-top: 12px; }

.tssd-variant-printrow .wp-block-buttons { gap: 8px; flex-wrap: wrap; }
.tssd-variant-printrow .wp-block-button { flex: 1 1 0; min-width: 0; }
.tssd-variant-printrow .wp-block-button__link {
  width: 100%; justify-content: center; padding: 10px 12px; white-space: nowrap;
}
@media (max-width: 560px) {
  .tssd-variant-printrow .wp-block-button { flex-basis: calc(50% - 8px); }
}

.tssd-mixed-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.tssd-mixed-row .tssd-oder { margin: 0; color: #6b6f59; font-weight: 600; font-style: italic; }
.tssd-mixed-row .wp-block-buttons { margin-top: 0; }
/* Tagesrätsel-Teaser (dynamisches Datum). */
.tssd-daily-teaser {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.tssd-daily-teaser__date { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--sd-gold-dark); }
.tssd-daily-teaser__label { color: #6b6f59; font-weight: 600; font-size: var(--sd-fs-sm); text-transform: uppercase; letter-spacing: .03em; }
.tssd-daily-teaser__cta { margin: 0; }

.tssd-cta-chip {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: .92em;
  font-weight: 600;
  line-height: inherit;
  vertical-align: baseline;
  color: #0088cc;
  text-decoration: none;
  background: rgba(240, 186, 55, .10);
  border: 1px solid var(--sd-line);
  border-radius: 999px;
  padding: .08em .7em;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.tssd-cta-chip .arr { transition: transform .2s; }
.tssd-cta-chip:hover { background: rgba(240, 186, 55, .16); border-color: var(--sd-gold); color: #005580; }
.tssd-cta-chip:hover .arr { transform: translateX(3px); }

body.search .entries[data-layout="grid"],
body.search .entries,
body.blog .entries[data-layout="grid"],
body.blog .entries {
  grid-template-columns: 1fr !important;
}

body.search-results .entry-card,
body.search .entry-card {
  background: var(--sd-highlight) !important;
  border: 1px solid var(--sd-line) !important;
  border-left: 6px solid var(--sd-gold) !important;
  border-radius: var(--sd-radius-lg)!important;
  box-shadow: var(--sd-shadow-sm);
  padding: 16px 20px;
}

body.search-results .entry-card > .entry-title,
body.search .entry-card > .entry-title {
  margin-inline: 0 !important;
  max-width: none !important;
  align-self: stretch;
}

/* Produkt-Kacheln im Shop/Archiv als gelbe Karten. */
.woocommerce ul.products li.product {
  background: var(--sd-surface-2);
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-lg);
  box-shadow: var(--sd-shadow-sm);
  padding: 14px 16px 18px;
}
.woocommerce ul.products li.product .button {
  border-radius: var(--sd-radius)!important;
}

/* Kopf-Leiste (Ergebnis-Anzahl + Sortierung): dezente, bis zur Container-Kante
   reichende Trennlinie statt kurzer/weißer Linien. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
  margin-bottom: 14px;
}
.woocommerce-products-header,
.woocommerce .woocommerce-notices-wrapper + .woocommerce-result-count {
  border-bottom: 1px solid var(--sd-line);
}

/* Warenkorb-/Kassen-/Konto-Tabellen + Bestell-Boxen in der Karten-Optik. */
.woocommerce table.shop_table,
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--sd-surface-2);
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-lg);
  box-shadow: var(--sd-shadow-sm);
}
.woocommerce table.shop_table,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-navigation {
  padding: 6px 14px;
}

.woocommerce table.shop_table th:first-child,
.woocommerce table.shop_table td:first-child { padding-left: 14px; }
.woocommerce table.shop_table th:last-child,
.woocommerce table.shop_table td:last-child { padding-right: 14px; }

/* Buttons im Shop einheitlich abrunden (wie die übrigen Seiten-CTAs). */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  border-radius: var(--sd-radius)!important;
}

body.blog .entries,
body.archive:not(.search-results) .entries {
  grid-template-columns: 1fr !important; /* eine breite Karte je Artikel (waagerecht) */
}
body.blog .entries .entry-card,
body.archive:not(.search-results) .entries .entry-card {
  background: var(--sd-surface-2) !important;
  border: 1px solid var(--sd-line) !important;
  border-left: 6px solid var(--sd-gold) !important;
  border-radius: var(--sd-radius-lg)!important;
  box-shadow: var(--sd-shadow-sm) !important;
  padding: 16px 20px !important;
  text-align: left !important;
  /* Always fill the column. Without this, a card with short content sizes to its
     own (smaller) max-content instead of stretching — so cards came out unequal
     in width. Forcing 100 % keeps every card the same width, now and in future. */
  width: 100% !important;
  justify-self: stretch !important;
}
/* Auszug/Meta linksbündig + etwas Luft (Text-only, kein Bildplatz). */
body.blog .entries .entry-card .entry-excerpt,
body.archive:not(.search-results) .entries .entry-card .entry-excerpt {
  margin-top: 6px;
}

/* Card title: centered, with a rule above AND below — but inset by the card
   padding like every other box title on the site (not bled to the box edge).
   The author name and the per-card category label are dropped from the meta —
   only the publish date remains (its leading slash separator is suppressed). */
body.blog .entries .entry-card h2.entry-title,
body.archive:not(.search-results) .entries .entry-card h2.entry-title {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  text-align: center !important;
  margin: 6px 0 12px !important;
  padding: 8px 12px !important;
  border-top: 2px solid #ffa500 !important;
  border-bottom: 2px solid #ffa500 !important;
}
body.blog .entries .entry-card .entry-meta .meta-author,
body.archive:not(.search-results) .entries .entry-card .entry-meta .meta-author,
body.blog .entries .entry-card .entry-meta .meta-categories,
body.archive:not(.search-results) .entries .entry-card .entry-meta .meta-categories {
  display: none !important;
}

/* Blog index (/aktuelles/) intro block above the post cards: page H1 + short text. */
.tssd-blog-intro {
  margin: 0 0 18px;
}
.tssd-blog-intro__text {
  max-width: 980px;
  margin: 6px auto 0;
}
.tssd-blog-intro__text p:last-child {
  margin-bottom: 0;
}
body.blog .entries .entry-card .entry-meta .meta-date::before,
body.archive:not(.search-results) .entries .entry-card .entry-meta .meta-date::before {
  content: none !important;
}

/* ---------------------------------------------------------------------------
   "Über mich" — Portrait (small float left, soft rounded, stacks on mobile)
   --------------------------------------------------------------------------- */
.tssd-about-portrait {
  margin: 0 24px 16px 0;
  max-width: 130px;
}
.tssd-about-portrait img {
  border-radius: var(--sd-radius-lg);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  display: block;
  height: auto;
  width: 130px;
}
/* When the side rails are visible the content column is narrower than the
   theme's nominal content width. The theme aligns floated media with an
   outward negative margin sized to that nominal width, which would push the
   portrait out of the column onto the left rail. Pin it back inside the
   column for the rail width range only (below it the rails are hidden and the
   theme's default alignment is correct). */
@media (min-width: 1181px) {
  .entry-content .tssd-about-portrait.alignleft {
    margin-left: 0;
    margin-right: 24px;
  }
}
@media (max-width: 600px) {
  .tssd-about-portrait {
    float: none !important;
    margin: 0 auto 16px;
  }
}

/* ---------------------------------------------------------------------------
   Shop & Warenkorb politur (Reopen)
   --------------------------------------------------------------------------- */

/* Shop-Überschrift auf die volle Content-Breite (wie die Produkt-Liste darunter),
   statt im schmalen Container — und die helle „Box"/Hero-Fläche um den Titel weg. */
.woocommerce-shop .entry-header.ct-container-narrow,
.woocommerce-cart .entry-header.ct-container-narrow,
.woocommerce-checkout .entry-header.ct-container-narrow {
  max-width: var(--container-max-width, 1290px) !important;
}
.woocommerce-shop .hero-section,
.woocommerce-cart .hero-section,
.woocommerce-checkout .hero-section {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;

  min-height: 0 !important;
  padding: 0 !important;
}

.woocommerce-shop .entry-header .page-title,
.woocommerce-cart .entry-header .page-title,
.woocommerce-checkout .entry-header .page-title {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  background: var(--sd-highlight);
  border-left: 6px solid var(--sd-gold);
  border-bottom: 2px solid var(--sd-gold);
  border-radius: var(--sd-radius-sm);
  padding: 8px 14px;
  margin: 0 0 8px;
}

.woocommerce-shop .entry-header,
.woocommerce-cart .entry-header,
.woocommerce-checkout .entry-header {
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;

  margin-top: 30px !important;
  margin-bottom: 14px;
}
/* Den Titel selbst nicht zusätzlich nach oben abstrengen (h1-Default-Margin weg). */
.woocommerce-shop .entry-header .page-title,
.woocommerce-cart .entry-header .page-title,
.woocommerce-checkout .entry-header .page-title { margin-top: 0 !important; }

/* Produkte als waagerechte Karten: Bild links, Text/Preis/Button rechts —
   eine Karte je Zeile (klare Liste statt enger Kachel-Spalten). */
.woocommerce ul.products.columns-1,
.woocommerce ul.products.columns-2,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4,
.woocommerce ul.products.columns-5,
.woocommerce ul.products.columns-6 {
  display: flex !important;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}
.woocommerce ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  display: grid;

  grid-template-columns: 92px 1fr auto;

  grid-template-areas:
    "title    title     title"
    "meta     meta      price"
    "img      benefits  button"
    "img      benefits  vat"
    "img      benefits  more";
  align-items: start;
  column-gap: 16px;
  row-gap: 4px;
  text-align: left;
  /* (4) flachere Karte: weniger Polsterung. */
  padding: 10px 14px;
}
/* Bild-Container (figure) links, kompakt und oben ausgerichtet (2, ss88: „höher"). */
.woocommerce ul.products li.product > figure {
  grid-area: img;
  margin: 0;
  align-self: start;
}
.woocommerce ul.products li.product > figure img,
.woocommerce ul.products li.product a img {

  width: 92px;
  height: auto;
  margin: 0;
  border-radius: var(--sd-radius);
  display: block;
}

.woocommerce ul.products li.product .entry-meta {
  grid-area: meta;
  align-self: start;
  white-space: nowrap;
  margin: 0 0 4px;
  padding: 0;
}
/* (1) Produkt-Titel als volle-Breite-Leiste wie die Seiten-Überschrift.
   !important, weil Blocksy sein dynamisches CSS NACH dem Child-Theme einbindet und
   sonst die Leisten-Füllung/Rahmen des Loop-Titels überschreibt. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  grid-area: title;
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  margin: 0 0 8px;
  padding: 5px 12px;
  font-size: 1.06em;
  background: var(--sd-highlight) !important;
  border-left: 6px solid var(--sd-gold) !important;
  border-bottom: 2px solid var(--sd-gold) !important;
  border-radius: var(--sd-radius-sm);
}
/* Vorteile je Produkt (dynamisch aus der Feature-Matrix) — kompakt, damit die
   Karte niedrig bleibt. */

.woocommerce ul.products li.product .tssd-product-cta {
  grid-area: benefits;
  align-self: start;
}
.woocommerce ul.products li.product .tssd-product-benefits {
  list-style: none;

  margin: 4px 0 0 8px;
  padding: 0;

  font-size: 0.95em;
  line-height: 1.4;
  color: #5a4a00;
}
.woocommerce ul.products li.product .tssd-product-benefits li {
  margin: 0;
  padding-left: 16px;
  position: relative;
}
.woocommerce ul.products li.product .tssd-product-benefits li::before {

  content: "\2713";
  position: absolute;
  left: 0;
  color: #1a7d37;
  font-weight: 700;
}

.woocommerce ul.products li.product .tssd-vat-note {
  grid-area: vat;
  margin: 6px 0 0;

  width: 0;
  min-width: 100%;
}
.woocommerce ul.products li.product .tssd-product-more {
  grid-area: more;
  justify-self: end;
  margin: 8px 0 0;
  font-size: var(--sd-fs-sm) !important;
  text-decoration: none;
}
/* Preis oben in der rechten Spalte, zentriert (2, ss88: „höher und zentrieren"). */
.woocommerce ul.products li.product .price {
  grid-area: price;
  justify-self: center;
  align-self: start;
  text-align: center;
  white-space: nowrap;
  margin: 2px 0 0;
}
/* Aktions-/Warenkorb-Container direkt unter den Preis (2, ss88: „Warenkorb höher") —
   die grid-area sitzt auf dem echten direkten Kind .ct-woo-card-actions. */
.woocommerce ul.products li.product .ct-woo-card-actions {
  grid-area: button;
  justify-self: end;
  align-self: start;
  margin: 8px 0 0;
}
.woocommerce ul.products li.product .ct-woo-card-actions .button { margin: 0; }
@media (max-width: 640px) {
  /* Auf schmalen Screens wieder gestapelt (Kategorie/Preis/Button unter die Vorteile). */
  .woocommerce ul.products li.product {
    grid-template-columns: 80px 1fr;
    grid-template-areas:
      "title    title"
      "meta     meta"
      "img      benefits"
      "price    price"
      "button   button"
      "vat      vat"
      "more     more";
  }
  .woocommerce ul.products li.product > figure img,
  .woocommerce ul.products li.product a img { width: 80px; }
  .woocommerce ul.products li.product .price { justify-self: start; text-align: left; }
  .woocommerce ul.products li.product .ct-woo-card-actions { justify-self: start; }
  .woocommerce ul.products li.product .tssd-product-more { justify-self: start; }
}

.woocommerce-cart .cart-collaterals .cart_totals {

  padding: 16px;
}
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
  white-space: nowrap;
  vertical-align: middle;
}
.woocommerce-cart .cart_totals table.shop_table th { padding-left: 6px; }
.woocommerce-cart .cart_totals table.shop_table td {
  text-align: right;
  padding-right: 6px;
}

@media (max-width: 689.98px) {
  .woocommerce-cart .cart_totals table.shop_table td {
    padding-left: 16px;
    padding-right: 16px;
  }
}
/* Warenkorb-Formular-Tabelle: erste/letzte Zelle vom Kartenrand abrücken. */
.woocommerce-cart table.shop_table th:first-child,
.woocommerce-cart table.shop_table td:first-child { padding-left: 16px; }
.woocommerce-cart table.shop_table th:last-child,
.woocommerce-cart table.shop_table td:last-child { padding-right: 16px; }
/* Gutschein-/Aktionszeile (im selben Tabellen-Footer) ebenfalls einrücken. */
.woocommerce-cart table.shop_table td.actions { padding-left: 16px; padding-right: 16px; }
.woocommerce-cart .woocommerce-cart-form,
.woocommerce-cart .cart-collaterals {
  padding-inline: 4px;
}

.woocommerce-cart table.cart td.product-thumbnail img,
.woocommerce-cart .woocommerce-cart-form__cart-item .product-thumbnail img {
  width: 51px;
  max-width: 51px;
  height: auto;
  border-radius: var(--sd-radius);
}

@media (min-width: 1000px) {
  .woocommerce-cart .woocommerce-cart-form { overflow-x: visible; }
  .woocommerce-cart table.cart { table-layout: fixed; width: 100%; min-width: 0; }
  .woocommerce-cart table.cart th,
  .woocommerce-cart table.cart td { box-sizing: border-box; }
  .woocommerce-cart table.cart th.product-remove,
  .woocommerce-cart table.cart td.product-remove { width: 30px; }
  .woocommerce-cart table.cart th.product-thumbnail,
  .woocommerce-cart table.cart td.product-thumbnail { width: 60px; }
  .woocommerce-cart table.cart th.product-price,
  .woocommerce-cart table.cart td.product-price { width: 80px; }
  .woocommerce-cart table.cart th.product-quantity,
  .woocommerce-cart table.cart td.product-quantity { width: 60px; }
  .woocommerce-cart table.cart th.product-subtotal,
  .woocommerce-cart table.cart td.product-subtotal { width: 106px; }
  /* Kopfzeilen fassen die langen deutschen Einwort-Titel („Einzelpreis",
     „Zwischensumme") in ihrer Spalte, ohne mitten im Wort umzubrechen. `thead tr th`
     erhöht die Spezifität gezielt über die spätere R9-Kopfzeilen-Regel (font-size: calc(var(--sd-font-size-base) * (13.01 / 14))),
     damit die kleinere Schrift ordnungsunabhängig gewinnt. */
  .woocommerce-cart table.cart thead tr th { font-size: calc(var(--sd-font-size-base) * (11 / 14)); padding-inline: 3px; white-space: nowrap; }
  /* Produktname füllt die Restbreite und darf bei Bedarf umbrechen. */
  .woocommerce-cart table.cart td.product-name { overflow-wrap: anywhere; }
  /* Summen-Box (rechts) auf feste Breite (260px) — nur im Spalten-Layout; mobil
     bleibt WooCommerces 100%-Breite. */
  .woocommerce-cart .cart-collaterals .cart_totals { width: 260px; }
}
/* Löschen-Spalte darf nie auf 0 kollabieren (Kern des ss103-Bugs). */
.woocommerce-cart table.cart td.product-remove,
.woocommerce-cart table.cart th.product-remove {
  min-width: 28px;
  text-align: center;
}

@media (max-width: 999.98px) {
  /* Die sichtbare Produktname-Zelle (trägt Blocksys Mobil-Aktionszeile mit Löschen-Icon)
     vom Kartenrand abrücken — überschreibt das globale padding-inline:4px. */
  .woocommerce-cart table.cart td.product-name {
    padding-right: 16px;
  }

  .woocommerce-cart .product-mobile-actions {
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    column-gap: 8px;
  }
  .woocommerce-cart .product-mobile-actions .woocommerce-Price-amount {
    white-space: nowrap;
  }
  .woocommerce-cart .shop_table .product-mobile-actions a.remove {
    margin-inline-start: 0;
    padding-inline-start: 4px;
    flex: 0 0 auto;
  }

  .woocommerce-cart .product-mobile-actions .tssd-mobile-total-eq {
    color: #8a7f5c;
    flex: 0 0 auto;
  }
  .woocommerce-cart .product-mobile-actions .tssd-mobile-subtotal {
    font-weight: 700;
    white-space: nowrap;
    flex: 0 0 auto;
  }
}
/* Zeilenhöhe (vertikales Polster 13px) + Spaltenabstand (horizontales Polster 4px).
   Die 16px zur Kartenkante bleiben erhalten: die first/last-child-Regeln oben sind
   spezifischer und überschreiben padding-inline für die äußeren Zellen. */
.woocommerce-cart table.cart td { padding-block: 13px; padding-inline: 4px; }
/* Schriftgrößen: Produktname 15px, Einzelpreis + Zwischensumme je 16px. */
.woocommerce-cart table.cart td.product-name { font-size: calc(var(--sd-font-size-base) * (14.99 / 14)); }
.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal { font-size: calc(var(--sd-font-size-base) * (16 / 14)); }
/* Löschen-Icon größer (20px). */

.woocommerce-cart table.cart td.product-quantity input.qty { width: 100%; }
.woocommerce-cart table.cart td.product-remove a { font-size: calc(var(--sd-font-size-base) * (20.01 / 14)); }
/* „Weiter zur Kasse"-Button höher (vert. Polster 16px — finaler R9-Zielwert, vorher 15px). */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { padding-block: 16px; }

/* Karten-Rahmen: Gold + 10px-Radius wie im Mockup (überschreibt den geteilten beigen
   shop_table-Rahmen; steht später im File → gleiche Spezifität, gewinnt). */
.woocommerce-cart table.cart,
.woocommerce-cart .cart-collaterals .cart_totals {
  border-color: var(--sd-gold);
  border-radius: var(--sd-radius);
}

/* Kopfzeile: linksbündig, kleiner, gedämpft, dezente Trennlinie (statt fett/zentriert).
   text-align !important: Blocksy zentriert die Warenkorb-Kopfzellen über sein dynamisches
   CSS, das NACH dem Child-Theme lädt — ohne !important gewinnt die Blocksy-Regel. */
.woocommerce-cart table.cart thead th {
  text-align: left !important;
  font-size: var(--sd-fs-sm);
  font-weight: 600;
  color: #6a5a1a;
  background: transparent;
  border-bottom: 1px solid var(--sd-line);
}

/* Zeilentrenner gestrichelt + vertikal mittig ausgerichtet (Mockup-Optik). */
.woocommerce-cart table.cart tbody td {
  border-top: 1px dashed var(--sd-line);
  vertical-align: middle;
}

.woocommerce-cart table.cart td.product-quantity input.qty {
  padding-block: 5px;
  border: 1px solid var(--sd-line) !important;
  border-radius: var(--sd-radius)!important;
  background: #fff;
  text-align: center;
}

/* Zwischensumme: fett + rechtsbündig, kein Umbruch. */
.woocommerce-cart table.cart td.product-subtotal {
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

/* Löschen-Icon in kräftigem Rot ohne Unterstreichung (wie Mockup). */
.woocommerce-cart table.cart td.product-remove a {
  color: #b3261e;
  line-height: 1;
  text-decoration: none;
}

/* Summen-Kopf („Warenkorb-Summe") als dezente Versal-Leiste mit Unterstrich. */
.woocommerce-cart .cart_totals h2 {
  font-size: calc(var(--sd-font-size-base) * (14 / 14));
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6a5a1a;
  border-bottom: 1px solid var(--sd-line);
  padding-bottom: 8px;
  margin: 0 0 10px;
}

/* Kasse-Button: gold gefüllt, weiß, volle Breite, zentriert. */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display: block;
  text-align: center;
  background: #d99a1c;
  color: #fff;
  font-weight: 700;
  border-radius: var(--sd-radius);
}

.woocommerce-cart td.actions {
  display: table-cell;
}
.woocommerce-cart td.actions::after { content: ""; display: table; clear: both; }
.woocommerce-cart td.actions .button {
  width: auto !important; /* Blocksys Mobil-Regel setzt Buttons auf width:100% */

  padding-left: 10px;
  padding-right: 10px;
  white-space: nowrap;
}
/* „Warenkorb aktualisieren" immer an den rechten Kartenrand. */
.woocommerce-cart td.actions button[name="update_cart"],
.woocommerce-cart td.actions input[name="update_cart"] {
  float: right;
  margin: 0 0 0 8px;
}
/* Gutschein-Gruppe: eigener BFC (overflow:hidden) → schrumpft neben dem Update-Float,
   statt darunter zu rutschen. flex-direction:row überschreibt Blocksys column-Zwang. */
.woocommerce-cart td.actions .coupon {
  display: flex;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  overflow: hidden;
}
.woocommerce-cart td.actions .coupon #coupon_code {

  flex: 0 1 150px;
  width: auto;
  min-width: 0;
  margin: 0;
}
.woocommerce-cart td.actions .coupon .button { flex: 0 0 auto; }

/* ≤620px (Handy): Feld + beide Buttons voll breit untereinander stapeln. */
@media (max-width: 620px) {
  .woocommerce-cart td.actions button[name="update_cart"],
  .woocommerce-cart td.actions input[name="update_cart"] {
    float: none;
    width: 100% !important;
    margin: 10px 0 0;
  }
  .woocommerce-cart td.actions .coupon { overflow: visible; }
  .woocommerce-cart td.actions .coupon #coupon_code { flex: 1 1 100%; width: 100%; }
  .woocommerce-cart td.actions .coupon .button { flex: 1 1 100%; white-space: normal; min-width: 0; }
}

.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
  padding-left: 22px;
  padding-right: 22px;
  box-sizing: border-box;
}

.woocommerce-checkout #order_review table.shop_table th:first-child,
.woocommerce-checkout #order_review table.shop_table td:first-child { padding-left: 14px; }
.woocommerce-checkout #order_review table.shop_table th:last-child,
.woocommerce-checkout #order_review table.shop_table td:last-child { padding-right: 14px; }

.woocommerce-checkout .ct-order-review { padding-top: 32px !important; }
.woocommerce-checkout .ct-order-review > #order_review_heading { margin-top: 0 !important; }

.woocommerce-checkout #payment,
.woocommerce-checkout .woocommerce-checkout-review-order {
  padding-bottom: 26px;
}
.woocommerce-checkout #place_order { margin-bottom: 6px; }

/* Persistenter Warenkorb-Button (rechts unten), site-weit sichtbar. Dezent wenn
   leer, deutlich hervorgehoben sobald ein Artikel im Warenkorb liegt. */
.tssd-cart-fab {
  position: fixed;
  right: 18px;
  /* Oben rechts statt unten rechts; mit Abstand nach unten, damit der
     Versions-Badge in der oberen rechten Ecke frei bleibt (nicht überdeckt). */
  top: 96px;
  z-index: 9000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  min-height: 44px; /* touch target: padding + line-height alone gave 41px */
  border-radius: 999px;
  background: var(--sd-surface-2);
  border: 1px solid var(--sd-line);
  box-shadow: 0 4px 14px rgba(60, 50, 0, .18);
  color: #5a4a00;
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  transition: transform .12s ease, box-shadow .12s ease;
}
.tssd-cart-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(60, 50, 0, .26);
}
.tssd-cart-fab .tssd-cart-fab__ico { font-size: 1.25em; }
.tssd-cart-fab .tssd-cart-fab__count {
  display: inline-block;
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #c9c9c9;
  color: #fff;
  font-size: var(--sd-fs-xs);
  text-align: center;
}
/* Gefüllt: kräftiges Orange + größerer, gut sichtbarer Zähler. */
.tssd-cart-fab.is-filled {
  background: #ffb300;
  border-color: #e09a00;
  color: #3a2e00;
}
.tssd-cart-fab.is-filled .tssd-cart-fab__count {
  background: #b3261e;
}
/* Nur sichtbar, sobald ein Artikel im Warenkorb liegt. Das Element bleibt im DOM
   (display:none statt Entfernen), damit das WooCommerce-Cart-Fragment es beim
   Hinzufügen live wieder einblenden kann. */
.tssd-cart-fab.is-empty { display: none; }

:root {
  --sd-hamburger-size: 30px;
  --sd-hamburger-offset: 6px;
  --sd-hamburger-color: #1a1a1a;

  --tssd-nb-minleft: 54%;
  --tssd-nb-badgew: 380px;
}
@media (max-width: 999.98px) {

  .tsadm-vbadge,
  .tssd-headerbadge {
    display: none !important;
  }
  .ct-header-trigger[data-id="trigger"] {
    margin-top: var(--sd-hamburger-offset) !important; /* Blocksy setzt margin:0 → override */

    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 6px;                 /* größere Tap-Fläche (Touch-Ziel) */
    border-radius: var(--sd-radius);
  }
  .ct-header-trigger[data-id="trigger"] .ct-icon {
    width: var(--sd-hamburger-size) !important;
    height: auto !important;      /* Höhe folgt dem viewBox → Balken bleiben proportional */
  }
  .ct-header-trigger[data-id="trigger"] .ct-icon rect {
    fill: var(--sd-hamburger-color) !important;
  }
}

.entry-content .tssd-evenodd-float,
.entry-content .tssd-hyper-float,
.entry-content .tssd-xsudoku-float,
.entry-content .tssd-killer-float,
.entry-content .tssd-jigsaw-float,
.entry-content .tssd-samurai-float,
.entry-content .tssd-super-float {
  float: left;
  width: 200px;
  max-width: 40%;

  margin: 0.4em 2em 0.6em 0;
}
.entry-content .tssd-evenodd-float img,
.entry-content .tssd-hyper-float img,
.entry-content .tssd-xsudoku-float img,
.entry-content .tssd-killer-float img,
.entry-content .tssd-jigsaw-float img,
.entry-content .tssd-samurai-float img,
.entry-content .tssd-super-float img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 783px) {
  .entry-content.is-layout-constrained > .tssd-evenodd-float,
  .entry-content.is-layout-constrained > .tssd-hyper-float,
  .entry-content.is-layout-constrained > .tssd-xsudoku-float,
  .entry-content.is-layout-constrained > .tssd-killer-float,
  .entry-content.is-layout-constrained > .tssd-jigsaw-float,
  .entry-content.is-layout-constrained > .tssd-samurai-float,
  .entry-content.is-layout-constrained > .tssd-super-float {
    /* !important, um Blocksys `margin-inline:auto !important` auf Block-Kindern zu
       schlagen (sonst kollabiert der gefloatete Float wieder auf margin-left:0). */
    margin-left: max(0px, calc((100% - var(--theme-block-width)) / 2)) !important;

    margin-right: 2em !important;
  }
}
@media (max-width: 782px) {
  .entry-content .tssd-evenodd-float,
  .entry-content .tssd-hyper-float,
  .entry-content .tssd-xsudoku-float,
  .entry-content .tssd-killer-float,
  .entry-content .tssd-jigsaw-float,
  .entry-content .tssd-samurai-float,
  .entry-content .tssd-super-float {
    float: none;
    width: min(220px, 60%);
    margin: 0.4em auto 0.8em;
  }
}

/* (2) breadcrumb bar — Blocksy renders .ct-breadcrumbs inside the product
   layout; hide it visually (the schema.org markup stays, so SEO is unaffected). */
.single-product .ct-breadcrumbs {
  display: none !important;
}

/* (4) "Kategorie: …" line under the add-to-cart button. .posted_in is the
   category list from woocommerce_template_single_meta; SKU/tags (if any) stay. */
.single-product .product_meta .posted_in {
  display: none !important;
}

.single-product .woocommerce-product-gallery {
  max-width: 204px;
  margin-inline: 0; /* left-aligned in the summary column */
}
.single-product .woocommerce-product-gallery img {
  transition: none !important;
}
.single-product .woocommerce-product-gallery:hover img,
.single-product .woocommerce-product-gallery__image:hover img,
.single-product .woocommerce-product-gallery img:hover {
  transform: none !important;
  cursor: default;
}

/* (3/reviews) single column, full width — existing reviews first (WooCommerce
   already renders #comments before #review_form_wrapper), then the form. Undo
   any two-column grid/flex the theme applies to the reviews tab. */
.single-product .woocommerce-Tabs-panel--reviews,
.single-product #reviews {
  display: block;
  width: 100%;
  max-width: none;
  grid-template-columns: none !important;
}
.single-product #reviews #comments,
.single-product #reviews #review_form_wrapper {
  width: 100%;
  max-width: none;
  float: none;
  margin-inline: 0;
}
.single-product #reviews #review_form_wrapper {
  margin-top: 2rem; /* clear gap between existing reviews and the new-review form */
}

.entry-content .wp-block-table table:not(.tssd-club-landing__compare),
.entry-content > table:not(.tssd-club-landing__compare) {
  width: 100%;
  border-collapse: collapse;
  font-size: .94rem;
}
.entry-content .wp-block-table table:not(.tssd-club-landing__compare) thead th,
.entry-content > table:not(.tssd-club-landing__compare) thead th {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid var(--sd-line);
  background: var(--sd-surface-2);
  color: var(--sd-muted);
  font-size: var(--sd-fs-xs);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.entry-content .wp-block-table table:not(.tssd-club-landing__compare) tbody td,
.entry-content > table:not(.tssd-club-landing__compare) tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--sd-line-soft);
  vertical-align: middle;
}
.entry-content .wp-block-table table:not(.tssd-club-landing__compare) tbody tr:hover,
.entry-content > table:not(.tssd-club-landing__compare) tbody tr:hover {
  background: var(--sd-surface-2);
}
/* Zahlenspalten rechtsbündig mit tabellarischen Ziffern (wie im Konto). */
.entry-content .wp-block-table table .num,
.entry-content > table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Blocksy zeichnet Gutenberg-Tabellen zusätzlich einen eigenen Rahmen — der
   doppelt sich mit den Linien oben. */
.entry-content .wp-block-table:not(.is-style-stripes) table:not(.tssd-club-landing__compare) td,
.entry-content .wp-block-table:not(.is-style-stripes) table:not(.tssd-club-landing__compare) th {
  border-left: 0;
  border-right: 0;
}

.entry-content .wp-block-button__link {
  border-radius: var(--sd-radius) !important;
  padding: 10px 18px;
  font-weight: var(--sd-btn-weight);
}

.wp-block-button__link:not(.is-style-outline),
.ct-button:not(.ct-button-ghost),
main.site-main .button:not(.is-style-outline),
.woocommerce a.button:not(.is-style-outline),
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-Button.button,
.wp-block-button__link:not(.is-style-outline):hover,
.wp-block-button__link:not(.is-style-outline):focus,
.ct-button:not(.ct-button-ghost):hover,
.ct-button:not(.ct-button-ghost):focus,
main.site-main .button:not(.is-style-outline):hover,
main.site-main .button:not(.is-style-outline):focus,
.woocommerce a.button:hover,
.woocommerce a.button:focus,
.woocommerce button.button:hover,
.woocommerce button.button:focus,
.woocommerce input.button:hover,
.woocommerce input.button:focus {
  color: #2a1f00;
}

.tssd-buchkopf {
  display: grid;
  gap: 18px;
  align-items: center;
  margin: 0 0 20px;
}

@media (min-width: 860px) {
  .tssd-buchkopf { grid-template-columns: 1.35fr 1fr; }
}

.tssd-buchkopf__bild { margin: 0; }

.tssd-buchkopf__bild img {
  display: block;
  width: 100%;
  height: auto;
}

.tssd-buchkopf__text p { margin: 0; }

@media (max-width: 600px) {
  .ct-header .site-branding,
  .ct-header .site-title-container,
  .ct-header [data-id="logo"] {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }

  .ct-header .site-title,
  .ct-header .site-title a {
    font-size: calc(var(--sd-font-size-base) * (19 / 14)) !important;
    line-height: 22px !important;
    letter-spacing: 1px !important;
  }

  .ct-header .site-description,
  .ct-header .site-title-container::after {
    font-size: calc(var(--sd-font-size-base) * (13 / 14)) !important;
    line-height: 17px !important;
    white-space: normal !important;
  }

  .ct-header .site-title-container {
    padding-left: 10px !important;
  }
}

.ct-header [data-row="bottom"] nav[data-id="menu"] > ul.menu {
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}

/* Blocksy gibt Spalte, Punktestreifen und Navigation die feste Zeilenhöhe der
   Kopfzeile. Bei zwei Zeilen muss daraus eine Mindesthöhe werden, sonst ragt die
   zweite Zeile aus dem gelben Balken heraus. */
.ct-header [data-row="bottom"] [data-column="middle"],
.ct-header [data-row="bottom"] [data-column="middle"] > [data-items],
.ct-header [data-row="bottom"] nav[data-id="menu"] {
  height: auto !important;
}

.ct-header [data-row="bottom"] .menu > li.menu-item:not(.tssd-menu-bug):not(.tssd-menu-fontsize):not(.tssd-menu-darkmode):not(.tssd-menu-search) > .ct-menu-link {
  padding-left: 3px;
  padding-right: 3px;
}

span.sd-mm-icon {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Das Kreuz zum Schließen des mobilen Menüs — das zweite und letzte Zeichen aus
   Dashicons (Max Mega Menu führt es als Theme-Option `close_icon` = dash-f158).
   Gleiche Technik wie bei der Lupe darunter. */
.mega-menu-wrap button.mega-close::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M15.6 5.52 14.48 4.4 10 8.88 5.52 4.4 4.4 5.52 8.88 10 4.4 14.48l1.12 1.12L10 11.12l4.48 4.48 1.12-1.12L11.12 10z'/%3E%3C/svg%3E") center / 70% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M15.6 5.52 14.48 4.4 10 8.88 5.52 4.4 4.4 5.52 8.88 10 4.4 14.48l1.12 1.12L10 11.12l4.48 4.48 1.12-1.12L11.12 10z'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* Die Lupe im mobilen Menüband war das erste Zeichen, für das Dashicons
   (59 KB Stilblatt plus Schriftdatei) geladen wurde. Sie wird jetzt als Maske
   gezeichnet: die Form steckt im SVG, die Farbe kommt aus `currentColor` —
   damit gilt weiterhin, was Max Mega Menu für „Symbolfarbe geöffnet/
   geschlossen" einstellt, und im Dunkelmodus gilt die dortige Schriftfarbe.
   `content` wird ausdrücklich geleert, damit kein doppeltes Zeichen entsteht,
   solange die Admin-Leiste Dashicons doch mitbringt. */
.mega-search .search-icon.dashicons::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8.5 2a6.5 6.5 0 0 1 5.13 10.5l4.44 4.43-1.14 1.14-4.43-4.44A6.5 6.5 0 1 1 8.5 2zm0 1.6a4.9 4.9 0 1 0 0 9.8 4.9 4.9 0 0 0 0-9.8z'/%3E%3C/svg%3E") center / 60% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8.5 2a6.5 6.5 0 0 1 5.13 10.5l4.44 4.43-1.14 1.14-4.43-4.44A6.5 6.5 0 1 1 8.5 2zm0 1.6a4.9 4.9 0 1 0 0 9.8 4.9 4.9 0 0 0 0-9.8z'/%3E%3C/svg%3E") center / 60% no-repeat;
}