/* =========================================
   HEADER LAYOUT
   ========================================= */

:root {
  --tat-container: 1200px;
  --tat-gutter: 16px;
  --tat-grey-pill: #ececec;
  --tat-grey-pill-border: #d7d7d7;
  --tat-text: #111;
  --tat-border-light: #e6e6e6;
}

.tat-container {
  box-sizing: border-box;
  max-width: var(--tat-container);
  margin: 0 auto;
  padding-inline: var(--tat-gutter);
}

.tat-topstrip {
  background: #fff;
  margin-top: -2px;
}

.tat-topstrip .topstrip-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-inline: var(--tat-gutter);
}

.topstrip-left,
.topstrip-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tat-follow-btn-left,
.tat-quick,
.tat-submit {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font: 500 14px/1 Roboto, system-ui, Arial, sans-serif;
  text-decoration: none;
  cursor: pointer;
}

.tat-follow-btn-left,
.tat-quick {
  gap: 10px;
  height: 32px;
  padding: 0 12px;
  background: var(--tat-grey-pill);
  border: 1px solid var(--tat-grey-pill-border);
  color: var(--tat-text);
}

.tat-follow-btn-left .tat-follow-ico,
.tat-quick-ico {
  display: block;
  width: auto;
  height: 22px;
}

.tat-submit {
  justify-content: center;
  height: 32px;
  padding: 0 16px;
  background: #000;
  border: 1px solid var(--tat-text);
  color: #fff;
}

.tat-submit:is(:link, :visited, :hover, :active) {
  color: #fff;
}

.tat-follow-btn-left:hover,
.tat-quick:hover,
.tat-submit:hover {
  filter: brightness(0.96);
}

@media (max-width: 360px) {
  .tat-follow-btn-left,
  .tat-quick {
    gap: 8px;
  }

  .tat-follow-btn-left .tat-follow-ico,
  .tat-quick-ico {
    height: 18px;
  }
}

/* =========================================
   BRAND + LOGO + SEARCH
   ========================================= */

.tat-brand {
  margin-top: -10px;
}

.tat-brand .brand-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 8px var(--tat-gutter) 6px;
}

.tat-brand .brand-left {
  justify-self: start;
}

.tat-brand .brand-center {
  justify-self: center;
  text-align: center;
}

.tat-brand .brand-right {
  justify-self: end;
}

.brand-left .brand-date {
  font: 400 14px/1.2 Roboto, system-ui, Arial, sans-serif;
}

.brand-left .brand-issue {
  font: 400 12px/1.2 Roboto, system-ui, Arial, sans-serif;
  color: #555;
}

.tat-logo img {
  display: block;
  width: auto;
  height: 58px;
  transform: translateY(-15px);
}

@media (max-width: 768px) {
  .tat-logo img {
    height: 46px;
  }
}

.tat-brand .brand-left,
.tat-brand .brand-right {
  transform: translateY(7px);
}

.tat-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

.tat-search-btn img {
  display: block;
  width: 20px;
  height: 20px;
}

/* =========================================
   NAVIGATION + SHARED LINK EFFECTS
   ========================================= */

.tat-nav {
  margin-top: -10px;
  background: #fff;
  border: 0;
}

.tat-nav .tat-mainnav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 6px 0 8px;
}

.tat-header a,
.tat-drawer a,
.tat-nav .tat-mainnav a,
.ticker-link {
  color: var(--tat-text);
  text-decoration: none;
}

.tat-header a:visited,
.tat-drawer a:visited,
.ticker-link:visited {
  color: var(--tat-text);
}

.tat-drawer-body a,
.tat-nav .tat-mainnav a,
.tat-quick span,
.ticker-link {
  position: relative;
}

.tat-drawer-body a::after,
.tat-nav .tat-mainnav a::after,
.tat-quick span::after,
.ticker-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--tat-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.18s ease-out;
}

.tat-drawer-body a:hover::after,
.tat-nav .tat-mainnav a:hover::after,
.tat-nav .tat-mainnav a:focus-visible::after,
.tat-quick:hover span::after,
.ticker-link:hover::after {
  transform: scaleX(1);
}

.tat-nav .tat-mainnav a {
  font: 400 15px/1.2 Roboto, system-ui, Arial, sans-serif;
  padding-bottom: 2px;
}

.tat-nav .tat-mainnav li:last-child {
  display: flex;
  align-items: center;
}

.tat-nav .tat-mainnav li:last-child::before {
  content: "|";
  display: inline-block;
  margin: 0 10px;
  color: var(--tat-text);
}

/* =========================================
   SUBMIT DRAWER
   ========================================= */

#tat-mini-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
  background: rgb(0 0 0 / 45%);
}

#tat-mini-overlay.is-on {
  display: block;
}

.tat-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}

.tat-drawer.open {
  pointer-events: auto;
}

.tat-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(390px, 100%);
  height: 100%;
  background: #fff;
  box-shadow: -12px 0 30px rgb(0 0 0 / 25%);
  transform: translateX(100%);
  transition: transform 0.28s ease-out;
}

.tat-drawer.open .tat-drawer-panel {
  transform: translateX(0);
}

.tat-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid var(--tat-border-light);
}

.tat-drawer-title {
  font: 700 18px/1 Roboto, system-ui, Arial, sans-serif;
}

.tat-drawer-close {
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--tat-text);
  cursor: pointer;
  font: 700 22px/1 Roboto, system-ui, Arial, sans-serif;
}

.tat-drawer-close:hover {
  opacity: 0.7;
}

.tat-drawer-body {
  padding: 20px 22px 24px;
}

.tat-drawer-body h3 {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: 4px;
  background: #f3f3f3;
  font: 700 15px/1.2 Roboto, system-ui, Arial, sans-serif;
}

.tat-drawer-body ul {
  list-style: none;
  margin: 0 0 0 10px;
  padding-left: 0;
}

.tat-drawer-body li {
  margin: 10px 0;
  line-height: 1.5;
}

@media (max-width: 520px) {
  .tat-drawer-body ul {
    margin-left: 8px;
  }
}

.tat-drawer,
.tat-drawer * {
  font-family: Roboto, system-ui, Arial, sans-serif;
}

/* =========================================
   FOLLOW NOW MODAL
   ========================================= */

.tat-follow-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgb(0 0 0 / 55%);
}

.tat-follow-modal.is-open {
  display: flex;
}

.tat-follow-sheet {
  position: relative;
  display: grid;
  grid-template-columns: 220px minmax(360px, 1fr);
  width: min(960px, calc(100% - 48px));
  padding: 24px 28px;
  overflow: hidden;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 10px 40px rgb(0 0 0 / 25%);
}

.tat-follow-sheet::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 14px;
  background: #d4a100;
}

.tat-follow-close {
  display: none;
}

.tat-fn-left {
  padding-left: 22px;
}

.tat-fn-left .tat-fn-left-title {
  margin: 0 0 12px;
  font: 300 12px/1 Roboto, system-ui, Arial, sans-serif;
  text-transform: uppercase;
}

.tat-fn-grid {
  display: grid;
  grid-template-columns: repeat(2, 58px);
  gap: 12px;
}

.tat-fn-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  background: #fff;
  border: 1px solid #d4a100;
  border-radius: 10px;
  cursor: pointer;
}

.tat-fn-icon {
  width: 40px;
  height: 40px;
}

.tat-fn-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 28px;
}

.tat-fn-hl {
  margin: 0 0 12px;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: 34px;
  font-weight: 300;
  line-height: 1.15;
}

.tat-fn-sub {
  margin: 6px 0;
  font: 300 14px/1.25 Roboto, system-ui, Arial, sans-serif;
}

.tat-fn-ul {
  margin: 0;
  padding-left: 18px;
  font: 400 14px/1.55 Roboto, system-ui, Arial, sans-serif;
}

/* =========================================
   TICKER
   ========================================= */

.tat-ticker-bar {
  margin-top: 2px;
  background: #fff;
  border: 0;
}

.tat-ticker {
  color: var(--tat-text);
  font: 400 12px/1 Roboto, system-ui, Arial, sans-serif;
}

#news-ticker {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tat-ticker .ticker-label {
  padding: 0 10px 0 0;
  border-right: 1px solid #e1e1e1;
  letter-spacing: 0.4px;
  line-height: 20px;
  font: 700 12px/1 Roboto, system-ui, Arial, sans-serif;
}

.ticker-scroll-wrap {
  position: relative;
  flex: 1;
  height: 36px;
  overflow: hidden;
}

.ticker-list {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.ticker-item {
  display: flex;
  align-items: center;
  height: 40px;
  white-space: nowrap;
}

.ticker-controls {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 3px 0 2px auto;
}

.ticker-controls button {
  width: 20px;
  height: 14px;
  padding: 0;
  border: 1px solid #ddd;
  border-radius: 3px;
  background: #fff;
  line-height: 1;
  cursor: pointer;
}

.ticker-controls .arrow-icon {
  display: block;
  font-size: 10px;
  line-height: 12px;
}

/* =========================================
   CONTAINER-LOCKED DIVIDERS
   ========================================= */

.tat-nav::before,
.tat-nav::after,
.tat-ticker-bar::before,
.tat-ticker-bar::after,
.tat-nav .tat-container::before,
.tat-nav .tat-container::after,
.tat-ticker-bar .tat-container::before,
.tat-ticker-bar .tat-container::after {
  content: none;
  height: 0;
  border: 0;
  box-shadow: none;
}

.tat-divider {
  width: 100%;
  pointer-events: none;
}

.tat-divider--double {
  height: 4px;
  background:
    linear-gradient(var(--tat-text), var(--tat-text)) 0 0 / 100% 1px no-repeat,
    linear-gradient(var(--tat-text), var(--tat-text)) 0 100% / 100% 1px no-repeat;
}

.tat-divider--single {
  height: 1px;
  background: var(--tat-text);
}

.tat-nav .tat-divider--double {
  display: block;
  margin: 2px 0;
}

.tat-ticker-bar .tat-divider--single {
  display: block;
  margin-top: 2px;
}

/* =========================================
   GLOBAL HEADER FONTS / CURSORS
   ========================================= */

.tat-header,
.tat-header *,
.tmh-header,
.tmh-header *,
#tmh-menu,
#tmh-menu *,
.tat-follow-modal,
.tat-drawer,
.tat-follow-btn-left,
.tat-quick,
.tat-submit {
  font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

.tat-follow-btn-left,
.tat-quick,
.tat-submit,
.tat-fn-card,
.tat-drawer a,
.tat-header a {
  cursor: pointer !important;
}

/* Utility: Scroll lock */
.tat-no-scroll,
.tat-lock {
  overflow: hidden;
}

/* =========================================
   MOBILE HEADER (tmh-*)
   ========================================= */

/* Standard: Mobile-Header ausblenden auf Desktop */
.tmh-header {
  display: none;
}

/* Scroll-Lock, wenn Mobile-Menü offen ist */
.tmh-lock {
  overflow: hidden;
}

@media (max-width: 900px) {

  /* Desktop-Header auf Mobile ausblenden */
  .tat-header {
    display: none;
  }

  .tmh-header {
    display: block;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    position: relative;
    z-index: 1000;
  }

  .tmh-topbar {
    padding: 6px 10px;
    border-bottom: 1px solid #e5e5e5;
    background: #fff;
  }

  .tmh-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .tmh-topbar-divider {
    flex: 1;
  }

  /* Mobile Pills: Follow / Submit Your Article */
  .tmh-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid #d5d5d5;
    background: #ffffff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    white-space: nowrap;
    cursor: pointer;
  }

  .tmh-pill-icon-wrap {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    overflow: hidden;
  }

  .tmh-pill-icon {
    max-width: 22px;
    max-height: 22px;
    display: block;
  }

  .tmh-pill-label {
    font-size: 13px;
    font-weight: 500;
  }

  /* Zweite Zeile: Burger + Logo + Suche */
  .tmh-mainbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px 8px;
    background: #fff;
  }

  .tmh-burger {
    padding: 4px;
    border: 0;
    background: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .tmh-burger-line {
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: #111;
  }

  .tmh-logo-wrap {
    flex: 1;
    text-align: center;
  }

  .tmh-logo-link {
    display: inline-block;
  }

  .tmh-logo-img {
    height: 32px;
    width: auto;
    display: block;
    margin: 0 auto;
  }

  .tmh-search-btn {
    border: 0;
    background: none;
    padding: 4px;
    cursor: pointer;
  }

  .tmh-search-icon {
    width: 22px;
    height: 22px;
    display: block;
  }

  /* Overlay + Slide-Menü */
  #tmh-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-out;
    z-index: 1190;
  }

  #tmh-menu-overlay.is-active,
  #tmh-menu-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  #tmh-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 80%;
    max-width: 360px;
    background: #fff;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.25);
    transform: translateX(-100%);
    transition: transform 0.25s ease-out;
    z-index: 1200;
  }

  #tmh-menu.is-open {
    transform: translateX(0);
  }

  .tmh-menu-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 16px 18px 24px;
    overflow-y: auto;
  }

  .tmh-menu-main {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    border-bottom: 1px solid #eeeeee;
  }

  .tmh-menu-main-item {
    margin: 0;
  }

  .tmh-menu-main-link {
    display: block;
    padding: 10px 0;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    color: #111;
  }

  .tmh-menu-main-link:hover {
    text-decoration: underline;
  }

  .tmh-menu-section {
    margin-top: 16px;
  }

  .tmh-menu-section-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #777;
    margin-bottom: 6px;
  }

  .tmh-menu-sublist {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .tmh-menu-subitem {
    display: block;
    padding: 8px 0;
    font-size: 14px;
    text-decoration: none;
    color: #111;
  }

  .tmh-menu-subitem:hover {
    text-decoration: underline;
  }

  /* Mobile Submissions-Accordion */
  .tmh-menu-submit {
    margin-top: 16px;
    border-top: 1px solid #eeeeee;
  }

  .tmh-submit-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border: 0;
    background: #f3f3f3;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
  }

  .tmh-submit-title {
    text-align: left;
    font-weight: 600;
  }

  .tmh-submit-chevron {
    width: 16px;
    height: 16px;
    border-right: 2px solid #555;
    border-bottom: 2px solid #555;
    transform: rotate(45deg);
    transition: transform 0.2s ease-out;
    flex-shrink: 0;
  }

  .tmh-menu-submit.is-open .tmh-submit-chevron {
    transform: rotate(-135deg);
  }

  .tmh-submit-body {
    display: none;
    padding-bottom: 6px;
  }

  .tmh-menu-submit.is-open .tmh-submit-body {
    display: block;
  }
}

/* =========================================
   FOLLOW MODAL – MOBILE LAYOUT (final state)
   ========================================= */

@media (max-width: 900px) {

  .tat-follow-sheet {
    display: flex;
    flex-direction: column;
    width: min(480px, calc(100% - 40px));
    padding: 18px 20px 20px;
    box-sizing: border-box;
  }

  .tat-follow-sheet::before {
    width: 8px;
  }

  .tat-fn-left,
  .tat-fn-right {
    padding: 0;
    margin: 0;
  }

  .tat-fn-left {
    margin-bottom: 16px;
  }

  .tat-fn-left .tat-fn-left-title {
    margin: 0 0 10px 0;
    text-align: left;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* Icon-Grid: 4 Icons pro Reihe */
  .tat-fn-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 14px;
    row-gap: 18px;
    justify-items: flex-start;
    margin-left: 0;
  }

  .tat-fn-card {
    min-width: 88px;
    min-height: 88px;
    padding: 6px 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .tat-fn-icon {
    width: 70px;
    height: 70px;
    display: block;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.18));
  }

  .tat-fn-hl {
    margin: 14px 0 8px 0;
    text-align: left;
    font-family: 'Impact', 'Anton', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 20px;
    line-height: 1.3;
  }

  .tat-fn-sub {
    margin: 0 0 6px 0;
    font-size: 14px;
  }

  .tat-fn-ul {
    margin: 0 0 4px 18px;
    font-size: 14px;
  }
}

/* =========================================
   MOBILE TOPSTRIP FEINTUNING
   ========================================= */

@media (max-width: 480px) {
  .tat-topstrip {
    margin-top: -6px;
  }
  .tat-follow-btn-left,
  .tat-quick,
  .tat-submit {
    transform: translateY(-1px);
  }
}

/* Buttons im Topstrip leicht höher auf Desktop */
.tat-topstrip .topstrip-grid {
  padding-top: 0;
  padding-bottom: 0;
}
.tat-follow-btn-left,
.tat-quick,
.tat-submit {
  transform: translateY(-2px);
}


/* =========================================================
   Article Header Bar (inline) — screenshot style
   - 20px spacing above/below
   - background #fafafa, 1px grey border
   - Roboto Regular only, never bold
   - dropdown with centered arrow, no overlay
   ========================================================= */

.tat-article-headerbar,
.tat-article-headerbar *{
  font-family: Roboto, Arial, sans-serif !important;
  font-weight: 400 !important;
}

.tat-article-headerbar{
  margin: 20px 0;                 /* 20px: summary -> header, header -> image */
  background: #fafafa;
  border: 0px solid #d9d9d9;
  border-radius: 0;
}

.tat-ah-row{
  display: flex;
  align-items: center;
  gap: 0;
  padding: 8px 10px;
}

.tat-ah-action{
  position: relative;
  display: flex;
  align-items: center;
}

.tat-ah-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #000;
  font-size: 18px;               /* bigger text */
  line-height: 1.2;
  white-space: nowrap;
}

.tat-ah-ico{
  width: 18px;
  height: 18px;
  display: block;
}

.tat-ah-txt{
  display: inline-block;
  font-size: 18px;
  line-height: 1.2;
}

.tat-ah-sep{
  width: 1px;
  align-self: stretch;
  background: #d0d0d0;
  margin: 0 2px;
}

.tat-ah-hint{
  margin-left: 10px;
  font-size: 14px;
  opacity: .75;
}

/* Dropdown */
.tat-ah-dd{
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 260px;
  background: #fafafa;
  border: 1px solid #d0d0d0;
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  padding: 8px 0;
  z-index: 999;
}

/* Centered arrow (border + fill) */
.tat-ah-dd::before{
  content:"";
  position:absolute;
  top:-10px;
  left:50%;
  transform:translateX(-50%);
  width:0; height:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-bottom:10px solid #d0d0d0; /* border */
}
.tat-ah-dd::after{
  content:"";
  position:absolute;
  top:-9px;
  left:50%;
  transform:translateX(-50%);
  width:0; height:0;
  border-left:9px solid transparent;
  border-right:9px solid transparent;
  border-bottom:9px solid #fafafa;  /* fill */
}

.tat-ah-dd-item{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #000;
  font-size: 18px;
  line-height: 1.2;
  text-align: left;
}

.tat-ah-dd-item:hover{
  background: rgba(0,0,0,0.04);
}

.tat-ah-dd-ico{
  width: 22px;
  height: 22px;
  display: block;
}

.tat-ah-dd-txt{
  font-size: 18px;
  line-height: 1.2;
}

/* MOBILE FIX — dropdown must NOT be clipped by any parent container */
@media (max-width: 520px){

  /* 1) Prevent clipping: dropdown must be able to overflow */
  .tat-article-headerbar,
  .tat-ah-row,
  .tat-ah-wrap,
  .tat-ah-box,
  .tat-ah-box-inner,
  .tat-ah-action{
    overflow: visible !important;
  }

  /* 2) Make sure the dropdown has a reliable positioning context */
  .tat-ah-action{
    position: relative !important;
  }

  /* 3) Viewport-safe dropdown (no centering that pushes it off-screen) */
  .tat-ah-dd{
    left: 0 !important;                 /* align with button/left edge of action */
    right: auto !important;
    transform: none !important;         /* remove translateX(-50%) */
    width: min(360px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;

    max-height: calc(100vh - 180px) !important;
    overflow: auto !important;

    z-index: 99999 !important;
  }

  /* 4) Arrow: align to the left (under the button icon/text area) */
  .tat-ah-dd::before,
  .tat-ah-dd::after{
    left: 26px !important;
    transform: none !important;
  }

  /* 5) Comfortable touch sizes */
  .tat-ah-dd-item{
    padding: 12px 14px !important;
    font-size: 16px !important;
  }
  .tat-ah-dd-ico{
    width: 20px !important;
    height: 20px !important;
  }
}
/* Mobile — dropdown narrower */
@media (max-width: 520px){
  .tat-ah-dd{
    width: 280px !important;                 /* << narrower */
    max-width: calc(100vw - 24px) !important;
  }
}

/* =========================================================
   GLOBAL TYPOGRAPHY RESET & SYSTEM
   ========================================================= */

:root {
  --tat-font-page-title: "Source Serif 4", "Times New Roman", Times, serif;
  --tat-font-article-title: "Source Serif 4", "Times New Roman", Times, serif;
  --tat-font-sidebar-title: "Instrument Serif", "Times New Roman", Times, serif;
  --tat-font-body: "Times New Roman", Times, serif;
  --tat-font-credit: "Times New Roman", Times, serif;
}

/* Basis-Text: p, li, etc = gleiche Größe wie H5 */
body,
span,
li,
figcaption,
small {
  font-family: var(--tat-font-body) !important;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
}

p {
  font-family: var(--tat-font-body) !important;
  font-weight: 400;
  font-size: 1rem;    /* gleiche Größe wie H5 */
  line-height: 1.6;
}

/* H1 = Page Titles (ganz oben auf der Seite) */
h1 {
  font-family: var(--tat-font-page-title) !important;
  font-weight: 600;
  font-size: 2.1rem;
  line-height: 1.25;
}

/* H2 = Artikel-Titel */
h2 {
  font-family: var(--tat-font-article-title) !important;
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.3;
}

/* H3 = Sidebar-Artikel auf der rechten Seite */
h3 {
  font-family: var(--tat-font-sidebar-title) !important;
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.35;
}

/* H4 – falls du irgendwo Zwischen-Titel brauchst */
h4 {
  font-family: var(--tat-font-sidebar-title) !important;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.4;
}

/* H5 = Artikel-Descriptions (gleich wie p) */
h5 {
  font-family: var(--tat-font-body) !important;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
}

/* H6 = Foto- / Video-Credits */
h6,
.tat-credit-h6 {
  font-family: var(--tat-font-credit) !important;
  font-weight: 400;
  font-size: 0.78rem;
  line-height: 1.4;
  letter-spacing: 0.03em;
}

/* Section-Titel (z. B. World, Artists, etc.) */
.tat-sectit,
.sectit {
  font-family: var(--tat-font-page-title) !important;
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

/* Artikel-/Video-/Buch-Titel (Main Titles) */
.tat-title-article,
.tat-title-video,
.tat-title-book {
  font-family: var(--tat-font-article-title) !important;
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

/* Titel in Sidebars (Mini-Headlines rechts) */
.tat-title-sidebar {
  font-family: var(--tat-font-sidebar-title) !important;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

/* Global Description-Klasse */
.tat-desc {
  font-family: var(--tat-font-body) !important;
  font-weight: 400 !important;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

/* Alles innerhalb von .tat-desc wie Fließtext */
.tat-desc h1,
.tat-desc h2,
.tat-desc h3,
.tat-desc h4,
.tat-desc h5,
.tat-desc h6,
.tat-desc p {
  font-family: var(--tat-font-body) !important;
  font-weight: 400 !important;
  font-size: inherit;
  line-height: inherit;
}

/* Artists of the Day – Meta-Texte (speziell lesbarer) */
.tat-aotd-meta h6.tat-aotd-duration,
.tat-aotd-meta h6.tat-aotd-tags {
  font-family: var(--tat-font-body) !important;
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.45;
  margin-top: 0.2rem;
}
/* HEADER / MOBILE HEADER / DRAWER – immer Roboto, egal was global passiert */
.tat-header,
.tat-header *,
.tmh-header,
.tmh-header *,
#tmh-menu,
#tmh-menu *,
.tat-follow-modal,
.tat-drawer,
.tat-follow-btn-left,
.tat-quick,
.tat-submit {
  font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
}
/* =========================================
   Global descriptions (H5) – bigger & grey
   ========================================= */
h5.tat-desc,
.tat-desc {
  font-size: 0.98rem;   /* etwas größer als Standard-Text */
  line-height: 1.5;
  color: #666666;       /* dezentes Grau */
  font-weight: 400;     /* nicht fett, schön ruhig */
}

/* Kleine Texte / Credits bleiben etwas kleiner und dunkler */
.tat-credit-h6 {
  font-size: 0.82rem;
  line-height: 1.4;
  color: #444444;
}

/* =========================================
   NEWS COVER SECTION
   ========================================= */

.tat-news-cover {
  background: #ffffff;
  border-bottom: 0px solid #e5e5e5;
  padding: 32px 0 50px;
}

.tat-news-cover-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* a11y: SEO-H1 optisch ausblenden */
.tat-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* GRID: Cover größer, dann Video, dann Textliste */
.tat-news-cover-grid {
  display: grid;
  grid-template-columns: 3fr 2fr 2fr;
  gap: 28px;
  align-items: start;
}

/* LINKS: GROSSES COVER */
.tat-news-cover-main {
  background: #fafafa;
  border-left: 25px solid #951e22; /* gelbe Vogue-Kante */
  padding: 8px;
  box-sizing: border-box;
}

.tat-news-cover-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.tat-news-cover-figure {
  margin: 0 0 12px;
  background: #000;
}

.tat-news-cover-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.tat-news-cover-meta {
  padding: 0 4px 4px;
}

.tat-news-cover-kicker {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 4px;
}

.tat-news-cover-headline {
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 6px;
}

.tat-news-cover-dek {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

/* MITTE: YOUTUBE SHORT mit Text */
.tat-news-cover-video {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tat-video-frame {
  position: relative;
  width: 100%;
  /* 9:16 Vertical Shorts Ratio */
  padding-top: 177%;
  overflow: hidden;
  background: #000;
}

.tat-video-frame iframe {
  position: absolute;
  top: -15%;
  left: 0;
  width: 100%;
  height: 130%;
  border: 0;
}

.tat-video-meta {
  font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

.tat-video-title {
  font-size: 18px;
  margin: 0 0 4px;
  font-weight: 600;
}

.tat-video-dek {
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
}

/* RECHTS: TEXTLISTE OHNE BILDER */
/* Vertikale Linie links, wie eine Spalte */
.tat-news-cover-list {
  border-left: 1px solid #111;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Trennlinien: von links, NICHT bis ganz rechts */
.tat-news-cover-item {
  position: relative;
  padding-bottom: 10px;
}

.tat-news-cover-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 20%;              /* Linie endet vor dem rechten Rand */
  bottom: 0;
  height: 1px;
  background: #e5e5e5;
}

.tat-news-cover-item:last-child::after {
  display: none;           /* keine Linie nach dem letzten Eintrag */
}

.tat-news-cover-item-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.tat-news-cover-tags {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 4px;
}

.tat-news-tag {
  border: 1px solid #111;
  padding: 3px 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tat-news-location {
  font-size: 12px;
}

/* +2px gegenüber vorher: 16px statt 14px */
.tat-news-cover-item-headline {
  font-size: 16px;
  line-height: 1.4;
  margin: 0;
}

/* Hover-Effekte */
.tat-news-cover-item-link:hover .tat-news-cover-item-headline,
.tat-news-cover-link:hover .tat-news-cover-headline {
  text-decoration: underline;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .tat-news-cover-grid {
    grid-template-columns: 2.5fr 2fr 2fr;
  }
}

@media (max-width: 900px) {
  .tat-news-cover {
    padding: 20px 0 26px;
  }

  .tat-news-cover-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .tat-news-cover-main {
    border-left-width: 10px;
  }

  .tat-news-cover-list {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid #111;
    padding-top: 14px;
  }

  .tat-news-cover-item::after {
    right: 10%; /* Linie auf Mobile etwas länger, aber nicht ganz bis rechts */
  }
}
/* === FIX: News-Cover – vertikale Trennlinie über volle Blockhöhe === */

/* Alle drei Spalten eines Rows sollen gleiche Höhe haben */
.tat-news-cover-grid {
  align-items: stretch;   /* statt start */
}

/* Rechte Spalte streckt sich über die volle Row-Höhe */
.tat-news-cover-list {
  align-self: stretch;
  position: relative;
  border-left: 1px solid #111;  /* vertikale Linie zwischen Mitte & rechts */
  padding-left: 18px;
}

/* Horizontale Trennlinien inside der rechten Spalte:
   starten links, hören vor dem rechten Rand auf – bleibt symmetrisch */
.tat-news-cover-item::after {
  left: 0;
  right: 20%;              /* immer gleiche X-Position, nicht ganz bis rechts */
}
/* =========================================
   GLOBAL SECTION DIVIDER – EXAKTE CONTAINERBREITE
   ========================================= */

.tat-section-divider {
  padding: 40px 0;   /* 30px oben + 30px unten */
}

.tat-section-divider-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;   /* GLEICH WIE tat-news-cover-inner & Footer */
  box-sizing: border-box;
}

/* Linie füllt den gesamten "Content-Bereich" aus */
.tat-section-divider-line {
  width: 100%;
  border-top: 1px solid #000;
}
/* Section-Border unten entfernen, wenn Divider verwendet wird */
.tat-news-cover {
  border-bottom: none;
}
/* Beispiel: weitere Sections ohne eigene untere Border */
.tat-section-has-divider {
  border-bottom: none;
}

/* =========================================
   NEWS COVER – Mobile Layout
   ========================================= */

@media (max-width: 768px) {

  /* Alle drei Blöcke untereinander, volle Breite */
  .tat-news-cover-main,
  .tat-news-cover-video,
  .tat-news-cover-list {
    grid-column: 1 / -1;   /* falls Parent ein Grid ist → über ganze Breite */
    width: 100%;
    max-width: 100%;
    margin-bottom: 1.5rem;
  }

  /* Bild im großen Cover: vollbreit und sauber skaliert */
  .tat-news-cover-figure img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
  }

  /* Innenabstände für Textblöcke etwas luftiger */
  .tat-news-cover-meta,
  .tat-video-meta,
  .tat-news-cover-item {
    padding: 0.75rem 0;
  }

  /* Headlines mobil etwas kompakter */
  .tat-news-cover-headline,
  .tat-video-title,
  .tat-news-cover-item-headline {
    font-size: 1.25rem;
    line-height: 1.25;
  }

  /* Descriptions/Dek-Texte etwas kleiner, gut lesbar */
  .tat-news-cover-dek,
  .tat-video-dek {
    font-size: 1.1rem;
    line-height: 1.5;
  }
}



/* ===========================================
   ART & BUSINESS ROW (arbusi-section)
   =========================================== */

.arbusi-section{
  margin:4rem 0;
  padding:2.5rem 0 3rem;
  background:transparent;
}

.arbusi-header{
  margin-bottom:1.5rem;
}

.arbusi-title{
  font-size:1.4rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

/* 3 Karten nebeneinander */
.arbusi-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:2rem;
}

.arbusi-card{
  display:flex;
  flex-direction:column;
}

.arbusi-card-link{
  text-decoration:none;
  color:inherit;
}

/* Bildblock */
.arbusi-figure{
  background:#dcdcdc;
  overflow:hidden;
  margin:0 0 0.6rem 0;
  width:100%;
  aspect-ratio:4 / 3;
}

.arbusi-figure img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Meta-Tags */
.arbusi-meta{
  display:flex;
  flex-wrap:wrap;
  gap:0.35rem;
  margin-bottom:0.4rem;
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
}

.arbusi-tag{
  padding:0.15rem 0.55rem;
  border:1px solid #000;
}

.arbusi-tag-sub{
  border:none;
  padding:0;
}

/* Headline */
.arbusi-headline{
  font-size:0.98rem;
  line-height:1.4;
}

/* =======================
   Responsive
   ======================= */

/* Tablet: 2 Spalten */
@media (max-width:960px){
  .arbusi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Mobile: 1 Spalte */
@media (max-width:640px){
  .arbusi-section{
    margin:3rem 0;
    padding:2.25rem 0 2.75rem;
  }

  .arbusi-grid{
    grid-template-columns:minmax(0,1fr);
  }

  .arbusi-title{
    font-size:1.25rem;
  }

  .arbusi-headline{
    font-size:0.95rem;
  }
}


/* =====================================================
   THE ARTISTS OF THE DAY – YOUTUBE SHORTS GRID
   ===================================================== */

.tat-aotd-section {
  background: #ffffff;
  border-top: 0px solid ;
  border-bottom: 0px ;
  padding: 3rem 0;
  margin: 3rem 0;
}

.tat-aotd-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* H2 – Section Title: jetzt auf globale Title-Font (Source Serif 4) gestellt */
.tat-aotd-heading {
  font-size: 1.9rem;
  line-height: 1.2;
  margin: 0;
}

.tat-aotd-more {
  font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  color: #000;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 0px solid #000;
}

.tat-aotd-more-icon {
  font-size: 1.1em;
  line-height: 1;
}

/* Grid of 5 cards – responsive */
.tat-aotd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}

/* Single card */
.tat-aotd-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Video wrapper */
.tat-aotd-video {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #000;
  overflow: hidden;
}

.tat-aotd-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Meta below video */
/* WICHTIG: keine eigene Font mehr hier, sonst werden Title/Desc überschrieben */
.tat-aotd-meta {
}

/* Artistname – Video-Titel */
/* WICHTIG: keine eigene font-size, damit tat-typo-article-h2 greifen kann */
.tat-aotd-artist {
  margin: 0 0 0.15rem;
  /* kein font-size hier – kommt jetzt über .tat-typo-article-h2 / .tat-title-video */
}

/* Tags / Description unter dem Namen – sollen Times New Roman sein */
.tat-aotd-tags {
  margin: 0;
  font-size: 0.82rem;
  font-family: var(--tat-font-text); /* Times New Roman global */
}

.tat-aotd-tag,
.tat-aotd-location {
  display: inline-block;
}

.tat-aotd-bullet {
  padding: 0 0.45rem;
}

/* ---------- Responsive tweaks ---------- */

@media (max-width: 900px) {
  .tat-aotd-section {
    padding: 2.5rem 0;
    margin: 2.5rem 0;
  }

  .tat-aotd-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .tat-aotd-heading {
    font-size: 1.7rem;
  }
}

@media (max-width: 600px) {
  .tat-aotd-grid {
    gap: 1.5rem;
  }
}

/* Artists of the Day – artist name link styling */
.tat-aotd-artist-link {
  color: inherit;
  text-decoration: none;
}

.tat-aotd-artist-link:hover {
  text-decoration: underline;
}
/* Artists of the Day – Credit + Dauer unter dem Video rechts */
.tat-aotd-credit {
  margin: 0.35rem 0 0;
  text-align: right;
}

.tat-aotd-duration {
  margin: 0.1rem 0 0;
  text-align: right;
}
/* ============================================
   Artists of the Day – Abstände unter dem Video
   ============================================ */

/* Karte: kein automatischer gap mehr */
.tat-aotd-card {
  gap: 0 !important;
}

/* Video: praktisch kein Abstand nach unten */
.tat-aotd-card .tat-aotd-video {
  margin-bottom: 0.05rem !important;
}

/* Credit-Zeile: direkt unter dem Video „kleben“ */
.tat-aotd-card .tat-aotd-credit {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  text-align: right;
}

/* Duration-Zeile: mini Abstand unter dem Credit */
.tat-aotd-card .tat-aotd-duration {
  margin-top: 0.1rem !important;
  margin-bottom: 0 !important;
  text-align: right;
}

/* Damit der Block mit Name/Tags wieder etwas Luft hat */
.tat-aotd-card .tat-aotd-meta {
  margin-top: 0.6rem !important;
}

/* ============================================================
   NATURE & ART – "Naturandart" SECTION (news/index.php)
   ============================================================ */

.natart-section{
  position:relative;
  margin:4rem 0;
  border:1px solid var(--tat-grey-pill-border,#d7d7d7);
  background-color:#fbf9fa;
  overflow:hidden;
}

/* Background fox photo, starting at far left */
.natart-section::before{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  transform:translateY(-50%);
  width:1800px;
  height:1200px;
  background-image:url("/thearttimes/assets/img/news/benjaminhartman-iceland-fox.webp");
  background-repeat:no-repeat;
  background-position:left center;
  background-size:cover;
  opacity:0.55;
  pointer-events:none;
  z-index:0;
}

/* Layout inside container */
.natart-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1.65fr);
  gap:4rem;
  padding:4rem 0;
  align-items:center;
}

/* LEFT COPY BLOCK */
.natart-copy{
  max-width:540px;
}

.natart-kicker{
  font-size:1.25rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin:0 0 1rem;
  color:#febe02; /* gold */
  font-weight:700;
}

.natart-headline{
  font-size:2.5rem;
  line-height:1.2;
  margin:0 0 1.5rem;
}

.natart-subhead{
  font-size:1.3rem;
  line-height:1.6;
  margin:0 0 1.5rem;
}

.natart-body{
  font-size:1rem;
  line-height:1.7;
  margin:0;
}

/* RIGHT CARDS WRAPPER */
.natart-cards{
  display:flex;
  gap:2.5rem;
  align-items:flex-start;
}

/* CARD */
.natart-card{
  flex:1 1 0;
}

.natart-card-link{
  display:block;
  text-decoration:none;
  color:inherit;
}

/* Image frame with golden border */
.natart-img-frame{
  border:12px solid #febe02;
  background:#000;
  overflow:hidden;
}

.natart-img-frame img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}

/* Meta area under image */
.natart-meta{
  margin-top:1.5rem;
}

.natart-tags{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  margin-bottom:0.75rem;
}

.natart-tag{
  font-size:0.75rem;
  line-height:1;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid #d7d7d7;
  background:#fff;
  text-transform:capitalize;
}

.natart-tag-location{
  opacity:0.9;
}

.natart-title{
  font-size:1.05rem;
  line-height:1.6;
  margin:0;
}

.natart-title a{
  text-decoration:none;
  color:#000;
}

.natart-title a:hover,
.natart-title a:focus{
  text-decoration:underline;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width:1024px){
  .natart-inner{
    grid-template-columns:1fr;
    gap:3rem;
    padding:3rem 1.5rem;
  }

  .natart-copy{
    max-width:none;
  }

  .natart-cards{
    justify-content:flex-start;
  }
}

@media (max-width:768px){
  .natart-section{
    margin:2.5rem 0;
  }

  .natart-inner{
    padding:2.5rem 1.25rem;
  }

  .natart-cards{
    flex-direction:column;
  }

  .natart-headline{
    font-size:2rem;
  }

  .natart-subhead{
    font-size:1.1rem;
  }
}

@media (max-width:480px){
  .natart-img-frame{
    border-width:8px;
  }

  .natart-kicker{
    font-size:1.05rem;
  }
}
/* ==========================================
   NATURE & ART – layout adjustments
   ========================================== */

/* 1) Move the cards further to the left and make the whole area taller */
.natart-inner{
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.9fr); /* less space for text, more for images */
  gap: 3rem;
}

.natart-cards{
  margin-left: -2rem;      /* pull the two images block to the left */
  align-items: flex-start;
}

/* 2) Make the images visually taller/stronger */
.natart-img-frame{
  border-width: 12px;
  aspect-ratio: 4 / 5;     /* taller vertical ratio */
}

.natart-img-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 3) Background fox image: smaller and starting exactly at left edge,
      so the fox is not sitting under the text anymore */
.natart-section::before{
  top: 0;
  left: 0;
  transform: none;
  width: 1400px;           /* smaller than before */
  height: 900px;
  background-position: left bottom;
  background-size: cover;
  opacity: 0.55;           /* you can lower this if the fox is still too strong */
}
/* ==========================================
   NATURE & ART – Bilder größer (Desktop)
   ========================================== */
@media (min-width: 1024px){
  /* Mehr Platz für die Bildspalte, weniger für den Text */
  .natart-inner{
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr);
  }

  /* Kartenblock darf voll atmen */
  .natart-cards{
    margin-left: -2rem;   /* wie vorher, aber mit mehr Breite */
    gap: 3rem;
  }

  /* Jede Karte nutzt den Platz maximal */
  .natart-card{
    flex: 1 1 0;
  }

  /* Bilder: breiter UND höher durch größere Aspect-Ratio + Rahmen */
  .natart-img-frame{
    border-width: 14px;   /* etwas kräftigerer Goldrahmen */
    aspect-ratio: 5 / 6;  /* höher als vorher (vertikaler) */
  }

  .natart-img-frame img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
/* NATURE & ART – Bild links bündig mit den unteren Texten */
.natart-figure{
  margin: 0;          /* Standard-Left-Margin vom <figure> entfernen */
  padding: 0;
  display: block;
}
/* NATURE & ART – Text oben bündig mit Bildanfang */
@media (min-width: 1024px){
  .natart-copy{
    margin-top: -120px; /* bei Bedarf feiner justieren: -30px, -50px usw. */
  }
}
/* ==========================================
   NATURE & ART – Mobile Layout (alles untereinander)
   ========================================== */
@media (max-width: 768px){

  /* Section-Abstand auf Mobile etwas kompakter */
  .natart-section{
    margin: 2.5rem 0;
  }

  /* Grid auflösen: alles untereinander */
  .natart-inner{
    display: block;
    padding: 2.5rem 1.25rem;
  }

  /* Textblock zuerst, normal nach unten – kein negativer Versatz */
  .natart-copy{
    margin-top: 0;
    margin-bottom: 2rem;      /* Abstand zum ersten Bild */
    max-width: none;
  }

  /* Karten vertikal stapeln */
  .natart-cards{
    flex-direction: column;
    gap: 2rem;                /* „guter Abstand“ zwischen den zwei Bildern */
    margin-left: 0;
  }

  .natart-card{
    flex: 0 0 auto;
  }

  /* Bilder mittig, aber nicht zu schmal */
  .natart-img-frame{
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    border-width: 10px;       /* leicht schlanker Rahmen auf Mobile */
  }

  .natart-meta{
    margin-top: 1rem;
  }
}
/* =========================================================
   ARTISTS ARTICLE PROMO – NEWS ABOUT YOU
   ========================================================= */

.tat-artists-article{
  margin: 3rem 0;
}

.tat-artists-article-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:3rem;
  background-color:#7bbcd4;
  padding:48px 60px;
  border-radius:8px;
  box-sizing:border-box;
  min-height:280px; /* deutlich höher, wie im Mockup */
}

/* LEFT: Globe + NEWS ABOUT YOU */
.tat-artists-article-left{
  display:flex;
  align-items:center;
  gap:2rem;
  flex:1 1 50%;
}

.tat-artists-article-left img{
  display:block;
  max-width:260px;
  height:auto;
}

.tat-artists-article-title{
  color:#ffffff;
  letter-spacing:0.04em;
}

.tat-artists-article-title-main{
  display:block;
  font-size:4rem;
  line-height:0.9;
}

.tat-artists-article-title-sub{
  display:block;
  font-size:2.2rem;
  line-height:1.1;
  margin-top:0.4rem;
}

/* RIGHT: Slogan + Icons */
.tat-artists-article-right{
  flex:1 1 50%;
  color:#000;
}

.tat-artists-article-tagline{
  font-size:1.8rem;
  line-height:1.4;
  margin:0 0 2rem;
}

/* Social icons: groß + weiße Rahmen, leicht gerundet */
.tat-artists-article-social{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}

.tat-artists-article-social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:16px;
  border:2px solid #ffffff;  /* weiße Border */
  background-color:transparent;
}

.tat-artists-article-social-link img{
  display:block;
  width:40px;
  height:40px;
}

/* ==============================
   Responsive
   ============================== */

@media (max-width:1024px){
  .tat-artists-article-box{
    padding:40px 32px;
    gap:2.5rem;
  }
  .tat-artists-article-title-main{
    font-size:3.2rem;
  }
  .tat-artists-article-title-sub{
    font-size:1.8rem;
  }
  .tat-artists-article-tagline{
    font-size:1.5rem;
  }
}

@media (max-width:768px){
  .tat-artists-article-box{
    flex-direction:column;
    align-items:flex-start;
    padding:32px 24px;
  }
  .tat-artists-article-left{
    width:100%;
  }
  .tat-artists-article-right{
    width:100%;
  }
}

@media (max-width:520px){
  .tat-artists-article-box{
    padding:24px 18px;
  }
  .tat-artists-article-left{
    flex-direction:column;
    align-items:flex-start;
  }
  .tat-artists-article-title-main{
    font-size:2.6rem;
  }
  .tat-artists-article-title-sub{
    font-size:1.6rem;
  }
  .tat-artists-article-tagline{
    font-size:1.3rem;
  }
}
/* NEWS ABOUT YOU – Globus deutlich größer */
.tat-artists-article-left img{
  max-width: 500px;   /* etwa dreimal so groß wie vorher (260px) */
  height: auto;
}

/* Optional: auf kleineren Screens wieder etwas zähmen */
@media (max-width: 1200px){
  .tat-artists-article-left img{
    max-width: 520px;
  }
}

@media (max-width: 768px){
  .tat-artists-article-left img{
    max-width: 320px;
  }
}
/* NEWS ABOUT YOU – Text direkt auf dem Globus-Bild */

.tat-artists-article-left{
  position: relative;
  display: block;
  flex: 0 0 auto;
  max-width: 780px;        /* großer Globus */
}

/* Bild füllt den Block komplett */
.tat-artists-article-left img{
  display: block;
  width: 100%;
  height: auto;
}

/* Titel-Text auf dem Bild platzieren */
.tat-artists-article-title{
  position: absolute;
  top: 50%;
  right: 8%;              /* Abstand vom rechten Bildrand – nach Geschmack ändern */
  transform: translateY(-50%);
  text-align: left;
  color: #ffffff;
  letter-spacing: 0.04em;
}

.tat-artists-article-title-main{
  display:block;
  font-size:4rem;
  line-height:0.9;
}

.tat-artists-article-title-sub{
  display:block;
  font-size:2.2rem;
  line-height:1.1;
  margin-top:0.4rem;
}

/* Responsiv: auf kleineren Screens etwas kleiner machen,
   damit Text nicht aus dem Bild rutscht */
@media (max-width: 1200px){
  .tat-artists-article-left{
    max-width: 520px;
  }
  .tat-artists-article-title-main{
    font-size:3.2rem;
  }
  .tat-artists-article-title-sub{
    font-size:1.8rem;
  }
}

@media (max-width: 768px){
  .tat-artists-article-left{
    max-width: 100%;
  }
  .tat-artists-article-title{
    right: 6%;
  }
}
/* NEWS ABOUT YOU – Bild links ohne Abstand zur Boxkante */
.tat-artists-article-box{
  padding: 48px 60px 48px 0; /* oben | rechts | unten | links */
}

/* gleiche Logik für die kleineren Breakpoints anpassen */
@media (max-width: 1024px){
  .tat-artists-article-box{
    padding: 40px 32px 40px 0;
  }
}

@media (max-width: 768px){
  .tat-artists-article-box{
    padding: 32px 24px;
  }
}
/* =========================================================
   NEWS ABOUT YOU – FINAL LAYOUT MOBILE & TABLET
   ========================================================= */

/* Basis: Mobile + Tablet (bis 1024px) */
@media (max-width: 1024px){

  /* Box: full width, alles untereinander */
  .tat-artists-article-box{
    display:block !important;
    padding:32px 24px !important;
  }

  /* Bild als Overlay-Container */
  .tat-artists-article-left{
    position:relative;
    max-width:100%;
    margin-bottom:2.5rem;
  }

  .tat-artists-article-left img{
    display:block;
    width:100%;
    height:auto;
  }

  /* NEWS / ABOUT YOU direkt auf dem Bild links oben/rechts */
  .tat-artists-article-title{
    position:absolute;
    top:28%;          /* bei Bedarf 24–30% anpassen */
    right:8%;
    transform:translateY(-50%);
    text-align:left;
    color:#fff;
    letter-spacing:0.04em;
  }

  .tat-artists-article-title-main{
    font-size:3rem;
    line-height:0.9;
  }

  .tat-artists-article-title-sub{
    font-size:1.7rem;
    line-height:1.1;
    margin-top:0.4rem;
  }

  /* Tagline größer */
  .tat-artists-article-tagline{
    font-size:1.6rem;
    line-height:1.5;
    margin:0 0 2.2rem;
  }

  .tat-artists-article-right{
    width:100%;
  }
}


}

@media (min-width: 769px) and (max-width: 1024px){
  .tat-artists-article-social{
    display:flex;
    flex-wrap:nowrap;              /* alles in einer Zeile */
    justify-content:space-between;
    gap:1rem;
  }
  .tat-artists-article-social-link{
    flex:0 0 auto;
  }
}
/* ==========================================
   NEWS ABOUT YOU – Feintuning Tablet/Mobile
   ========================================== */
@media (max-width: 1024px){

  /* 1) NEWS / ABOUT YOU: nach links, mittig auf dem Bild */
  .tat-artists-article-title{
    left: 8%;              /* vom linken Rand der Box */
    right: auto;
    top: 50%;              /* vertikal mittig */
    transform: translateY(-50%);
    text-align: left;
  }

  /* 2) Unterer Text (Slogan) minimal kleiner */
  .tat-artists-article-tagline{
    font-size: 1.5rem;     /* vorher 1.6rem */
  }


}
/* NEWS ABOUT YOU – zentriert & größer auf Tablet/Mobile */
@media (max-width: 1024px){
  .tat-artists-article-title{
    left: 50%;
    right: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }

  /* ca. +5px größer */
  .tat-artists-article-title-main{
    font-size: 3.3rem;   /* vorher 3rem */
  }

  .tat-artists-article-title-sub{
    font-size: 2rem;     /* vorher 1.7rem */
  }
}
/* NEWS ABOUT YOU – Feintuning Position & Icon-Größe */
@media (max-width: 1024px){

  /* 1) Titel 20px weiter nach rechts schieben */
  .tat-artists-article-title{
    left: calc(50% + 20px);     /* 20px nach rechts von der Mitte */
    right: auto;
    top: 50%;
    transform: translate(-50%, -50%);
  } 
}
/* NEWS ABOUT YOU – Icon-Buttons sichtbar kleiner machen */
.tat-artists-article-social-link{
  padding: 6px 8px !important;      /* weniger Innenabstand = Kästchen kleiner */
  transform: scale(0.9);            /* alles (Rand + Icon) ~10% kleiner */
  transform-origin: center;
}

.tat-artists-article-social-link img{
  width: 20px !important;           /* feste Icongröße */
  height: 20px !important;
}

/* NEWS ABOUT YOU – Desktop: Icons in 2 Reihen à 4 */
@media (min-width: 1025px){
  .tat-artists-article-social{
    display: flex;
    flex-wrap: wrap;                 /* Umbrechen erlauben */
    justify-content: center;
    gap: 0.5rem 1.5rem;                /* vertikal | horizontal */
    max-width: 520px;                /* Breite des Icon-Blocks */
    margin: 0 auto;                  /* Block zentrieren */
  }

}

/* ============================================
   TABLET ONLY – SHORT VIDEO COLUMN = 100% HEIGHT
   ============================================ */
@media (min-width: 769px) and (max-width: 1024px) {

  /* Keep the wider cover column on tablet */
  .tat-news-cover-mobile-top {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
  }

  /* Cover column: tall image */
  .tat-news-cover-main-mobile {
    display: flex;
    flex-direction: column;
  }

  .tat-news-cover-figure-mobile {
    flex: 1;
  }

  .tat-news-cover-figure-mobile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* VIDEO COLUMN: make the video fill 100% of the column height */
  .tat-news-cover-video-mobile {
    display: flex;
    flex-direction: column;
  }

  .tat-news-cover-video-mobile .tat-video-frame {
    flex: 1;
    /* override the global aspect-ratio so height can stretch */
    aspect-ratio: auto;
  }

  .tat-news-cover-video-mobile .tat-video-frame iframe {
    width: 100%;
    height: 100%;
  }
}
/* ============================================
   TABLET ONLY – COVER IMAGE BIGGER
   (does NOT affect desktop or mobile)
   ============================================ */

@media (min-width: 769px) and (max-width: 1024px) {

  /* Cover + video: make the cover column visibly wider */
  .tat-news-cover-mobile-top {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
  }

  /* Let the cover image fill its column vertically */
  .tat-news-cover-main-mobile {
    display: flex;
    flex-direction: column;
  }

  .tat-news-cover-figure-mobile {
    flex: 1;
  }

  .tat-news-cover-figure-mobile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}
/* ============================================
   TABLET FIX – COVER WIE DESKTOP (3 SPALTEN)
   ============================================ */

@media (min-width: 769px) and (max-width: 900px) {

  /* gleiche Außenabstände wie Desktop */
  .tat-news-cover {
    padding: 32px 0 50px;
  }

  /* wieder 3 Spalten: Cover – Video – Liste */
  .tat-news-cover-grid {
    grid-template-columns: 3fr 2fr 2fr;
    gap: 28px;
  }

  /* linke rote Kante wieder so dick wie auf Desktop */
  .tat-news-cover-main {
    border-left-width: 25px;
  }

  /* rechte Spalte wieder mit vertikaler Linie links */
  .tat-news-cover-list {
    border-left: 1px solid #111;
    padding-left: 18px;
    border-top: none;
    padding-top: 0;
  }

  /* Trennlinien in der rechten Spalte wie auf Desktop */
  .tat-news-cover-item::after {
    right: 20%;   /* statt 10% aus der Mobile-Regel */
  }
}
/* ============================================
   TABLET – COVER OBEN, ARTIKEL UNTEN 2er-BLOCKE
   ============================================ */

@media (min-width: 769px) and (max-width: 1024px) {

  /* Grid in zwei Bereiche teilen:
     oben: cover + video
     unten: artikel-liste über die ganze Breite */
  .tat-news-cover-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "cover video"
      "list  list";
    column-gap: 28px;
    row-gap: 24px;
    align-items: stretch;
  }

  .tat-news-cover-main {
    grid-area: cover;
  }

  .tat-news-cover-video {
    grid-area: video;
  }

  .tat-news-cover-list {
    grid-area: list;
  }

  /* rechte Liste unten als 2er-Grid */
  .tat-news-cover-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;

    /* alte Desktop-/Mobile-Linien anpassen */
    border-left: none;
    padding-left: 0;
    border-top: 1px solid #111;
    padding-top: 14px;
    margin-top: 8px;
  }

  .tat-news-cover-item {
    border-top: none; /* Linien kommen jetzt vom Container */
    padding-top: 0;
  }

  /* falls du ein ::after für lange Linien hattest, hier ausschalten */
  .tat-news-cover-item::after {
    display: none;
  }

  /* Texte etwas kompakter auf Tablet */
  .tat-news-cover-item-headline {
    font-size: 0.9rem;
    line-height: 1.35;
  }
}
/* ============================================
   COVER – TABLET: LISTE UNTEN ALS 2er-GRID
   ============================================ */

@media (min-width: 769px) and (max-width: 1024px) {

  /* 2 Reihen:
     1: cover | video
     2: list  | list (über ganze Breite) */
  .tat-news-cover-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "cover video"
      "list  list";
    column-gap: 28px;
    row-gap: 24px;
    align-items: flex-start;
  }

  .tat-news-cover-main {
    grid-area: cover;
  }

  .tat-news-cover-video {
    grid-area: video;
  }

  .tat-news-cover-list {
    grid-area: list;
  }

  /* Liste unten: 2 Spalten, Trennlinien nur zwischen den Reihen */
  .tat-news-cover-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;

    /* alte vertikale Linie rechts entfernen */
    border-left: none;
    padding-left: 0;
    border-top: 1px solid #111;
    padding-top: 14px;
    margin-top: 8px;
  }

  .tat-news-cover-item {
    padding-top: 0;
    border-top: none;
  }

  /* ab Artikel 3 (zweite Reihe) Trennlinie oben */
  .tat-news-cover-item:nth-child(n + 3) {
    border-top: 1px solid #e0e0e0;
    padding-top: 8px;
  }

  /* evtl. vorhandene lange Linien deaktivieren */
  .tat-news-cover-item::after {
    display: none;
  }

  .tat-news-cover-item-headline {
    font-size: 0.9rem;
    line-height: 1.35;
  }
}
/* ============================================
   ARTISTS OF THE DAY – TABLET LAYOUT
   ============================================ */
@media (min-width: 769px) and (max-width: 1024px) {

  /* Header: Titel links, Button rechts */
  .tat-aotd-header {
    display: flex;
    align-items: left;
    justify-content: space-between;
    gap: 0px;
    margin-bottom: 50px;
  }

  .tat-aotd-heading {
    margin: 0;
    text-align: left;
  }

  .tat-aotd-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }

  /* Videos: 2er-Blöcke nebeneinander, darunter wieder 2 */
  .tat-aotd-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 15px; /* Abstand zwischen den 2er-Blöcken */
  }

  .tat-aotd-card {
    margin: 0;
    padding: 0;
    border: none;
  }

  /* Zweiter 2er-Block (Cards 3 und 4):
     oben graue Linie + 15px Abstand zum Inhalt */
  .tat-aotd-card:nth-child(n + 3) {
    border-top: 1px solid #d0d0d0;
    padding-top: 15px;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {

  /* Header: Titel wirklich an den linken Rand des Containers,
     Button wirklich an den rechten Rand */
  .tat-aotd-header {
    display: flex;
    align-items: left;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    width: 100%;
    padding: 0; /* ggf. alte Padding-Werte überschreiben */
  }

  .tat-aotd-heading {
    margin: 0;
    text-align: left;
    margin-left: 0;   /* sicherstellen, dass nichts nach innen rutscht */
  }

  .tat-aotd-more {
    display: inline-flex;
    align-items: leftt;
    gap: 6px;
    white-space: nowrap;
    margin-left: auto; /* schiebt den Button an den rechten Rand */
    margin-right: 0;
  }
}


/* ===========================================
   SHOW BUSINESS SECTION (showbus-section)
   Layout like Art & Lifestyle
   =========================================== */

.showbus-section{
  margin:4rem 0;
  padding:2.5rem 0 3.5rem;
  border-top:1px solid #e2e2e2;
  border-bottom:1px solid #e2e2e2;
}

.showbus-header{
  margin-bottom:1.5rem;
}

.showbus-title{
  font-size:1.3rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

/* Main grid – 3 columns on desktop */
.showbus-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.1fr) minmax(0,1.1fr);
  gap:2rem;
}

/* Columns */
.showbus-col{
  display:flex;
  flex-direction:column;
  gap:1.75rem;
}

/* Cards */
.showbus-card{
  display:flex;
  flex-direction:column;
}

.showbus-card-link{
  text-decoration:none;
  color:inherit;
}

/* Figures / images */
.showbus-figure{
  background:#ffffff;
  overflow:hidden;
  min-height:180px;
  margin:0 0 0.6rem 0;
  width:100%;
}

.showbus-figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background-color: #f9f9f9; /* Optional: heller Hintergrund wenn Lücken entstehen */
}


/* Large cover variants */
.showbus-figure--cover{
  min-height:340px;
  aspect-ratio:4/5;
}

/* Small horizontal variants */
.showbus-figure--small{
  min-height:150px;
  aspect-ratio:16/9;
}

/* Meta / tags */
.showbus-meta{
  margin-top:0.4rem;
  display:flex;
  flex-wrap:wrap;
  gap:0.35rem;
  font-size:0.68rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
}

.showbus-meta--bar{
  margin-top:0;
  margin-bottom:0.3rem;
  padding-top:0.4rem;
}

.showbus-tag{
  padding:0.15rem 0.55rem;
  border:1px solid #000;
}

/* Headlines */
.showbus-headline{
  margin-top:0.45rem;
  font-size:0.98rem;
  line-height:1.4;
}

/* Central main story slightly larger */
.showbus-card--center-main .showbus-headline{
  font-size:1.05rem;
}

/* Right block: vertical emphasis */
.showbus-card--right-main .showbus-figure--cover{
  aspect-ratio:3/4;
}

/* =======================
   Responsive Layout
   ======================= */

/* TABLET: left + center above, right as mini grid 2x2 */
@media (min-width:768px) and (max-width:1024px){

  .showbus-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:
      "left center"
      "right right";
    column-gap:24px;
    row-gap:32px;
  }

  .showbus-col-left{ grid-area:left; }
  .showbus-col-center{ grid-area:center; }
  .showbus-col-right{
    grid-area:right;
    margin-top:0.5rem;
    padding-top:1.5rem;
    border-top:1px solid #e2e2e2;

    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px 24px;
    border-left:1px solid #e2e2e2;
  }

  /* Mini-cards on the right as small teaser blocks */
  .showbus-col-right .showbus-card{
    border-right:1px solid #e2e2e2;
    border-bottom:1px solid #e2e2e2;
  }

  .showbus-col-right .showbus-card-link{
    display:grid;
    grid-template-columns:auto minmax(0,1fr); /* image | text */
    grid-template-rows:auto auto;            /* meta, headline */
    column-gap:12px;
    align-items:flex-start;
    padding:10px 12px 12px;
    box-sizing:border-box;
  }

  .showbus-col-right .showbus-figure{
    grid-column:1;
    grid-row:1 / span 2;
    width:80px;
    min-height:70px;
    aspect-ratio:4 / 3;
    overflow:hidden;
    margin:0;
  }

  .showbus-col-right .showbus-figure img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .showbus-col-right .showbus-meta{
    grid-column:2;
    grid-row:1;
  }

  .showbus-col-right .showbus-headline{
    grid-column:2;
    grid-row:2;
    font-size:0.8rem;
    line-height:1.35;
    font-weight:400; /* regular, not bold */
    margin-top:0.35rem;
  }
}

/* MOBILE: everything stacked */
@media (max-width:768px){

  .showbus-grid{
    display:flex;
    flex-direction:column;
    gap:1.75rem;
  }

  .showbus-col-right{
    border-top:1px solid #e2e2e2;
    padding-top:1.75rem;
    margin-top:1.75rem;
  }

  .showbus-figure--cover{
    min-height:260px;
  }

  .showbus-headline{
    font-size:0.95rem;
  }

  .showbus-title{
    font-size:1.2rem;
  }
}

/* Very small screens */
@media (max-width:480px){
  .showbus-section{
    margin:3rem 0;
    padding:2.5rem 0 3rem;
  }

  .showbus-headline{
    font-size:0.9rem;
  }
}
/* SHOW BUSINESS – Hintergrund transparent, keine Rahmen */
.showbus-section{
  background: transparent;
  border-top: none;
  border-bottom: none;
}
/* ===========================================
   BOOKS SECTION – Grid of 25 books
   =========================================== */

.books-section{
  margin:4rem 0;
  padding:3rem 0 4rem;
  background:transparent;
  border-top:none;
  border-bottom:none;
}

.books-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:1.5rem;
  margin-bottom:2rem;
}

.books-header-left{
  max-width:480px;
}

.books-title{
  font-size:1.35rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin:0 0 0.5rem;
}

.books-dek{
  font-size:0.9rem;
  line-height:1.5;
}

.books-header-right{
  margin-left:auto;
}

.books-all-link{
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  text-decoration:none;
  border-bottom:1px solid #000;
  padding-bottom:2px;
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
}

/* Grid for 25 books */
.books-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1.9rem 1.6rem;
}

/* Card base */
.books-card{
  display:flex;
  flex-direction:column;
}

.books-card-link{
  text-decoration:none;
  color:inherit;
}

/* Cover + credit (credit outside bottom-right) */
.books-cover-wrap{
  position:relative;
  display:inline-block;
  max-width:100%;
}

.books-figure{
  margin:0 0 0.6rem 0;
  width:100%;
  aspect-ratio:2 / 3;
  background:#f5f5f5;
  overflow:hidden;
}

.books-figure img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* media credit – bottom right outside frame */
.books-credit{
  position:absolute;
  right:0;
  bottom:-1.1rem;
  font-size:0.6rem;
  font-family:"Times New Roman",serif;
  white-space:nowrap;
}

/* Meta pills */
.books-meta-row{
  margin-top:1.1rem; /* space because credit sits directly under cover */
  display:flex;
  flex-wrap:wrap;
  gap:0.3rem;
  font-size:0.68rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
}

.books-tag{
  padding:0.16rem 0.55rem;
  border:1px solid #000;
}

/* Title + author */
.books-headline{
  margin-top:0.5rem;
  font-size:0.95rem;
  line-height:1.4;
}

.books-author{
  margin-top:0.25rem;
  font-size:0.78rem;
  font-style:italic;
}

/* =======================
   Responsive
   ======================= */

/* <= 1200px – 4 columns */
@media (max-width:1200px){
  .books-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

/* Tablet <= 1024px – 3 columns */
@media (max-width:1024px){
  .books-header{
    flex-direction:column;
    align-items:flex-start;
  }
  .books-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

/* <= 768px – 2 columns */
@media (max-width:768px){
  .books-section{
    margin:3rem 0;
    padding:2.5rem 0 3.5rem;
  }
  .books-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* <= 480px – 1 column */
@media (max-width:480px){
  .books-grid{
    grid-template-columns:minmax(0,1fr);
  }
  .books-title{
    font-size:1.2rem;
  }
  .books-headline{
    font-size:0.92rem;
  }
}
/* Books – Desktop: 6 Bücher nebeneinander */
@media (min-width: 1100px){
  .books-grid{
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1.5rem 1.4rem;  /* etwas kleinere Abstände */
  }
}


/* ===========================================
   BOOKS PAGE – 12 BOOK GRID (booksone-section)
   =========================================== */

.booksone-section{
  margin:4rem 0;
  padding:3rem 0 4rem;
  background:transparent;
  border:5px solid #babab7;
}

.booksone-header{
  margin-bottom:2rem;
}

.booksone-header-left{
  max-width:520px;
}

.booksone-title{
  font-size:1.5rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin:0 0 0.6rem;
}

.booksone-dek{
  font-size:0.9rem;
  line-height:1.5;
}

/* GRID:
   Desktop – 6 columns (2 rows = 12 books)
   Tablet & Mobile – always 2 columns
*/
.booksone-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:1.8rem 1.6rem;
}

/* Card base */
.booksone-card{
  display:flex;
  flex-direction:column;
}

.booksone-card-link{
  text-decoration:none;
  color:inherit;
}

/* Cover + credit (credit bottom-right outside) */
.booksone-cover-wrap{
  position:relative;
  display:inline-block;
  max-width:100%;
}

.booksone-figure{
  margin:0 0 0.6rem 0;
  width:100%;
  aspect-ratio:2 / 3;
  background:#f5f5f5;
  overflow:hidden;
}

.booksone-figure img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* media credit – bottom right outside the frame */
.booksone-credit{
  position:absolute;
  right:0;
  bottom:-1.1rem;
  font-size:0.6rem;
  font-family:"Times New Roman",serif;
  white-space:nowrap;
}

/* Title + author only */
.booksone-headline{
  margin-top:1.1rem; /* clears the credit */
  font-size:0.95rem;
  line-height:1.4;
}

.booksone-author{
  margin-top:0.25rem;
  font-size:0.8rem;
  font-style:italic;
}

/* =======================
   Responsive: always 2 columns
   on tablet + mobile
   ======================= */

@media (max-width:1024px){
  .booksone-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .booksone-section{
    margin:3rem 0;
    padding:2.5rem 1.5rem 3.5rem;
  }
}

/* Optional light tweak for very small screens: keep 2 columns, but tighten gap */
@media (max-width:480px){
  .booksone-grid{
    gap:1.4rem 1.2rem;
  }
  .booksone-title{
    font-size:1.3rem;
  }
}
/* BOOKSONE – Rahmen nur um jedes Buch-Cover */

.booksone-section{
  border: none; /* Section-Rahmen entfernen / überschreiben */
}

.booksone-section .booksone-figure{
  border: 9px solid #babab7;  /* hier kannst du 7px draus machen, wenn du magst */
  box-sizing: border-box;
}
/* BOOKSONE – Desktop bleibt: 6 Spalten (Basisregel unverändert)
   Tablet: 4 Spalten
   Mobile: 3 Spalten
*/

/* Mobile bis 768px – 3 Bücher nebeneinander */
@media (max-width: 768px){
  .booksone-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Tablet 769–1024px – 4 Bücher nebeneinander */
@media (min-width: 769px) and (max-width: 1024px){
  .booksone-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ===== BOOKS LISTING – Grid-Logik ===== */

/* 1) Tablet & darunter: rechte Spalte unter die Hauptspalte ziehen */
@media (max-width: 1024px){
  .tat-books-listing-grid{
    grid-template-columns:1fr;
    column-gap:0;
  }

  .tat-books-listing-sidebar{
    margin-top:2.5rem;
    border-top:1px solid #e2e2e2;
    padding-top:1.5rem;
  }
}

/* 2) Tablet: Sidebar als 2er-Miniatur-Grid anlegen */
@media (min-width: 769px) and (max-width: 1024px){
  .tat-books-listing-sidebar{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:1.75rem 1.5rem;
  }

  .tat-books-sidebar-title{
    grid-column:1 / -1;
    margin-bottom:1rem;
  }
}

/* 3) Mobile: Sidebar-Karten wieder vollbreit und untereinander */
@media (max-width: 768px){
  .tat-books-listing-sidebar{
    display:block;
  }
  .tat-books-sidebar-card a{
    grid-template-columns:1fr;
  }
  .tat-books-sidebar-thumb img{
    height:160px;
  }
}
/* =======================================
   ARTISTS PAGE – BASE
   ======================================= */

body.is-artists {
  background-color: #ffffff;
  overflow-x: hidden;
}

.tat-artists-main {
  padding: 3rem 0 4rem;
}

/* container alignment (uses your global vars) */
.tat-artists-hero-inner,
.tat-artists-listing-inner {
  max-width: var(--tat-container);
  margin: 0 auto;
  padding: 0 var(--tat-gutter);
  box-sizing: border-box;
}

/* Page title inside hero container */
.tat-artists-main-title {
  margin: 0 0 2rem;
  padding: 0;
  font-size: 1.3rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* =======================================
   WORLD – ARNE SECTION
   ======================================= */

body.is-world .arne-section {
  margin: 4rem 0;
  background: #ffffff; /* explizit weiß */
}

body.is-world .arne-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Header */
body.is-world .arne-header {
  margin-bottom: 1.8rem;
}

body.is-world .arne-title {
  margin: 0;
  font-size: 1.3rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.is-world .arne-intro {
  margin: 0.4rem 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* OBERES GRID: 3 Karten nebeneinander */
body.is-world .arne-top-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.8rem;
}

/* Trenner zwischen 3er- und 4er-Block */
body.is-world .arne-divider {
  border: 0;
  border-top: 1px solid #d0d0d0;
  margin: 20px 0; /* 20px nach oben & unten */
}

/* UNTERES GRID: 4 Karten nebeneinander */
body.is-world .arne-bottom-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.8rem;
}

/* Karten-Layout */
body.is-world .arne-card {
  box-sizing: border-box;
}

body.is-world .arne-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Quadratisches Bild */
body.is-world .arne-card-figure {
  margin: 0 0 0.8rem;
  position: relative;
  width: 100%;
  padding-top: 100%;    /* 1:1 Quadrat */
  overflow: hidden;
}

body.is-world .arne-card-figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Textteile */
body.is-world .arne-card-header {
  margin-bottom: 0.4rem;
}

body.is-world .arne-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 0.45rem;
}

body.is-world .arne-card-title {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.45;
}

body.is-world .arne-card-dek {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
}

/* Hover */
body.is-world .arne-card-link:hover .arne-card-title {
  text-decoration: underline;
}

/* ===========================
   TABLET (769–1024px)
   =========================== */
@media (min-width: 769px) && (max-width: 1024px) {
  body.is-world .arne-top-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.is-world .arne-bottom-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ===========================
   MOBILE (≤768px)
   =========================== */
@media (max-width: 768px) {

  body.is-world .arne-inner {
    padding: 0 16px;
  }

  body.is-world .arne-top-grid,
  body.is-world .arne-bottom-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.is-world .arne-card-figure {
    margin-bottom: 0.7rem;
  }

  body.is-world .arne-card-title {
    font-size: 1.05rem;
  }
}
/* WORLD – ARNE: falls versehentlich im Listing-Grid, immer volle Breite */
body.is-world .tat-world-listing-inner > .arne-section {
  grid-column: 1 / -1;   /* spannt über beide Spalten */
  width: 100%;
}

/* Grundlayout der ARNE-Section: mittig im 1200px-Container */
body.is-world .arne-section {
  margin: 4rem 0;
  background: #ffffff;
}

body.is-world .arne-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
/* =======================================
   WORLD – ARNE: Tablet-Layout mit
   vertikalen Trennlinien (mittig fixiert)
   ======================================= */
@media (min-width: 769px) and (max-width: 1024px) {

  /* Beide Reihen: 3er-Grid, damit alle Spalten sauber getrennt werden */
  body.is-world .arne-top-grid,
  body.is-world .arne-bottom-grid {
    display: grid; /* nur zur Sicherheit, falls schon gesetzt ist, bleibt es so */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    position: relative;   /* nötig für die Pseudo-Elemente */
  }

  /* Vertikale Linien – laufen von ganz oben bis ganz unten
     und bleiben mittig im Abstand fixiert */
  body.is-world .arne-top-grid::before,
  body.is-world .arne-top-grid::after,
  body.is-world .arne-bottom-grid::before,
  body.is-world .arne-bottom-grid::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;          /* Linie wächst mit der Höhe aller Kacheln */
    width: 1px;
    background: #d0d0d0;
    pointer-events: none;
  }

  /* Erste Trennlinie bei 1/3 */
  body.is-world .arne-top-grid::before,
  body.is-world .arne-bottom-grid::before {
    left: 33.333%;
    transform: translateX(-50%);
  }

  /* Zweite Trennlinie bei 2/3 */
  body.is-world .arne-top-grid::after,
  body.is-world .arne-bottom-grid::after {
    left: 66.666%;
    transform: translateX(-50%);
  }
}
/* =======================================
   THE BEST OF GLOBAL – VIDEO (WORLD PAGE)
   ======================================= */

.tat-world-video-section {
  background-color: #000;
  color: #fff;
  padding: 3rem 0 3.5rem;
}

.tat-world-video-wrapper {
  /* .tat-container regelt max-width und Seitenabstand */
}

.tat-world-video-header {
  margin-bottom: 2.4rem;
}

.tat-world-video-title {
  font-size: 1.6rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}

.tat-world-video-dek {
  max-width: 620px;
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}

/* ==========================
   OBERER BLOCK – 3 HORIZONTALE VIDEOS
   ========================== */

.tat-world-video-row {
  display: flex;
  width: 100%;
  align-items: stretch;
}

.tat-world-video-row-top .tat-world-video-item {
  flex: 0 0 33.3333%;
  box-sizing: border-box;
  padding: 1rem 1.2rem 1.4rem;
}

/* ==========================
   UNTERER BLOCK – 4 VERTIKALE SHORTS
   ========================== */

.tat-world-video-row-bottom {
  margin-top: 2.5rem;
}

.tat-world-video-row-bottom .tat-world-video-item {
  flex: 0 0 25%;
  box-sizing: border-box;
  padding: 1rem 1.2rem 1.4rem;
}

/* Vertikale Trennlinien (grau) nur zwischen Videos */

.tat-world-video-row-top .tat-world-video-item + .tat-world-video-item,
.tat-world-video-row-bottom .tat-world-video-item + .tat-world-video-item {
  border-left: 1px solid #d0d0d0;
}

/* Horizontale Trennlinie (grau) zwischen oben & unten */

.tat-world-video-separator {
  height: 1px;
  background-color: #d0d0d0;
  margin-top: 2.2rem;
}

/* Video-Player */

.tat-world-video-frame {
  margin: 0;
}

.tat-world-video-player {
  display: block;
  width: 100%;
  background-color: #000;
}

/* oben: horizontale Videos 16:9, flacher */

.tat-world-video-player--horizontal {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  max-height: 260px;
}

/* unten: vertikale Shorts 9:16, doppelt so hoch */

.tat-world-video-player--vertical {
  aspect-ratio: 9 / 16;
  object-fit: cover;
  max-height: 520px;
}

/* Meta-Text */

.tat-world-video-meta {
  margin-top: 0.3rem;
}

.tat-world-video-headline {
  font-size: 1rem;
  line-height: 1.4;
  margin: 0 0 0.25rem;
}

.tat-world-video-info {
  font-size: 0.9rem;
  line-height: 1.4;
  opacity: 0.8;
  margin: 0;
}

/* dezenter Hover */

.tat-world-video-item:hover .tat-world-video-headline {
  text-decoration: underline;
}

/* =======================================
   RESPONSIVE – TABLET & MOBIL
   ======================================= */

/* Tablet: 3 pro Reihe, 4. Short wrappt */

@media (max-width: 900px) {
  .tat-world-video-section {
    padding: 2.5rem 0 3rem;
  }

  .tat-world-video-title {
    font-size: 1.4rem;
  }

  .tat-world-video-row {
    flex-wrap: wrap;
  }

  .tat-world-video-row-top .tat-world-video-item,
  .tat-world-video-row-bottom .tat-world-video-item {
    flex: 0 0 33.3333%;
    padding: 0.9rem 0.9rem 1.2rem;
  }

  .tat-world-video-player--vertical {
    max-height: 460px;
  }
}

/* Mobile: ein Video pro Zeile, Linien werden horizontal */

@media (max-width: 700px) {
  .tat-world-video-row-top .tat-world-video-item,
  .tat-world-video-row-bottom .tat-world-video-item {
    flex: 0 0 100%;
    padding: 0.9rem 0.7rem 1.1rem;
    border-left: none;
  }

  .tat-world-video-row-top .tat-world-video-item + .tat-world-video-item,
  .tat-world-video-row-bottom .tat-world-video-item + .tat-world-video-item {
    border-top: 1px solid #d0d0d0;
  }

  .tat-world-video-header {
    margin-bottom: 1.6rem;
  }

  .tat-world-video-title {
    font-size: 1.25rem;
    letter-spacing: 0.09em;
  }

  .tat-world-video-dek {
    font-size: 0.95rem;
  }
}
/* === OVERRIDE: World-Video – Text 3px größer === */

.tat-world-video-headline {
  font-size: 19px;   /* vorher ca. 16px */
}

.tat-world-video-info {
  font-size: 17px;   /* vorher ca. 14px */
}
/* === OVERRIDE: World-Video – Titles less bold & bigger === */

/* Section-Titel oben */
.tat-world-video-title {
  font-weight: 500;     /* statt sehr bold */
}

/* Titel unter den Videos */
.tat-world-video-headline {
  font-size: 19px;      /* wie gewünscht größer */
  font-weight: 400;     /* normal, nicht fett */
}
/* === OVERRIDE: World-Video – mehr Abstand zwischen Buchstaben === */

/* Großer Section-Titel oben */
.tat-world-video-title {
  letter-spacing: 0.16em;   /* war ca. 0.11em – jetzt lockerer */
}

/* Titel unter den Videos */
.tat-world-video-headline {
  letter-spacing: 0.04em;   /* etwas mehr Abstand zwischen Buchstaben */
  line-height: 1.5;         /* minimal mehr Zeilenabstand, wirkt luftiger */
}

/* Info-Zeile (City, Country) */
.tat-world-video-info {
  letter-spacing: 0.03em;
}
/* === OVERRIDE: World-Video – Trennungslinien dunkelgrau === */

/* Vertikale Linien zwischen den Videos (oben & unten) */
.tat-world-video-row-top .tat-world-video-item + .tat-world-video-item,
.tat-world-video-row-bottom .tat-world-video-item + .tat-world-video-item {
  border-left: 1px solid #666666;
}

/* Horizontale Linie zwischen oberem und unterem Block */
.tat-world-video-separator {
  background-color: #666666;
}

/* Mobile: falls die Linien horizontal statt vertikal laufen */
@media (max-width: 700px) {
  .tat-world-video-row-top .tat-world-video-item + .tat-world-video-item,
  .tat-world-video-row-bottom .tat-world-video-item + .tat-world-video-item {
    border-top: 1px solid #666666;
  }
}
/* === OVERRIDE: World-Video – Videos an Container-Rand kleben (Desktop) === */
@media (min-width: 901px) {
  /* linke Seite: kein Innenabstand bei ersten Videos */
  .tat-world-video-row-top .tat-world-video-item:first-child,
  .tat-world-video-row-bottom .tat-world-video-item:first-child {
    padding-left: 0;
  }

  /* rechte Seite: kein Innenabstand bei letzten Videos */
  .tat-world-video-row-top .tat-world-video-item:last-child,
  .tat-world-video-row-bottom .tat-world-video-item:last-child {
    padding-right: 0;
  }
}
/* =======================================
   THE BEST OF GLOBAL – VIDEO (WORLD PAGE)
   ======================================= */

.tat-world-video-section {
  background-color: #000;
  color: #fff;
  padding: 3rem 0 3.5rem;
}

.tat-world-video-wrapper {
  /* .tat-container regelt max-width & Seitenabstand */
}

.tat-world-video-header {
  margin-bottom: 2.4rem;
}

.tat-world-video-title {
  font-size: 1.6rem;
  letter-spacing: 0.16em;  /* etwas luftiger */
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 0.6rem;
}

.tat-world-video-dek {
  max-width: 620px;
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}

/* ==========================
   REIHEN / LAYOUT
   ========================== */

.tat-world-video-row {
  display: flex;
  width: 100%;
  align-items: stretch;
}

/* OBERER BLOCK: 3 horizontale Videos */
.tat-world-video-row-top .tat-world-video-item {
  flex: 0 0 33.3333%;
  box-sizing: border-box;
  padding: 1rem 1.2rem 1.4rem;
}

/* UNTERER BLOCK: 4 vertikale Shorts */
.tat-world-video-row-bottom {
  margin-top: 2.5rem;
}

.tat-world-video-row-bottom .tat-world-video-item {
  flex: 0 0 25%;
  box-sizing: border-box;
  padding: 1rem 1.2rem 1.4rem;
}

/* Erste & letzte Karte auf Desktop ohne Seiten-Padding,
   damit Videos direkt am Container-Rand kleben */
@media (min-width: 901px) {
  .tat-world-video-row-top .tat-world-video-item:first-child,
  .tat-world-video-row-bottom .tat-world-video-item:first-child {
    padding-left: 0;
  }

  .tat-world-video-row-top .tat-world-video-item:last-child,
  .tat-world-video-row-bottom .tat-world-video-item:last-child {
    padding-right: 0;
  }
}

/* Trennlinien: dunkelgrau */

.tat-world-video-row-top .tat-world-video-item + .tat-world-video-item,
.tat-world-video-row-bottom .tat-world-video-item + .tat-world-video-item {
  border-left: 1px solid #666666;
}

/* Horizontale Linie zwischen Ober- und Unterblock */

.tat-world-video-separator {
  height: 1px;
  background-color: #666666;
  margin-top: 2.2rem;
}

/* ==========================
   PLAYER & FRAMES
   ========================== */

.tat-world-video-frame {
  margin: 0;
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* horizontale Videos (oben) – 16:9, eher flach */
.tat-world-video-frame--horizontal {
  aspect-ratio: 16 / 9;
}

/* vertikale Shorts (unten) – 9:16, deutlich höher */
.tat-world-video-frame--vertical {
  aspect-ratio: 9 / 16;
}

/* YouTube-Embeds füllen den Frame komplett */

.tat-world-video-embed {
  border: 0;
  width: 100%;
  height: 100%;
}

/* ==========================
   META-TEXTE
   ========================== */

.tat-world-video-meta {
  margin-top: 0.4rem;
}

.tat-world-video-headline {
  font-size: 19px;         /* 3px größer als Standard */
  font-weight: 400;        /* nicht zu fett */
  letter-spacing: 0.04em;  /* etwas Luft */
  line-height: 1.5;
  margin: 0 0 0.25rem;
}

.tat-world-video-info {
  font-size: 17px;         /* ebenfalls größer */
  letter-spacing: 0.03em;
  line-height: 1.4;
  opacity: 0.8;
  margin: 0;
}

.tat-world-video-item:hover .tat-world-video-headline {
  text-decoration: underline;
}

/* =======================================
   RESPONSIVE – TABLET & MOBIL
   ======================================= */

/* Tablet: 3 pro Reihe (oben & unten), 4. Short wrappt */

@media (max-width: 900px) {
  .tat-world-video-section {
    padding: 2.5rem 0 3rem;
  }

  .tat-world-video-title {
    font-size: 1.4rem;
  }

  .tat-world-video-row {
    flex-wrap: wrap;
  }

  .tat-world-video-row-top .tat-world-video-item,
  .tat-world-video-row-bottom .tat-world-video-item {
    flex: 0 0 33.3333%;
    padding: 0.9rem 0.9rem 1.2rem;
  }
}

/* Mobile: 1 Video pro Zeile, Linien werden horizontal */

@media (max-width: 700px) {
  .tat-world-video-row-top .tat-world-video-item,
  .tat-world-video-row-bottom .tat-world-video-item {
    flex: 0 0 100%;
    padding: 0.9rem 0.7rem 1.1rem;
    border-left: none;
  }

  .tat-world-video-row-top .tat-world-video-item + .tat-world-video-item,
  .tat-world-video-row-bottom .tat-world-video-item + .tat-world-video-item {
    border-top: 1px solid #666666;
  }

  .tat-world-video-header {
    margin-bottom: 1.6rem;
  }

  .tat-world-video-title {
    font-size: 1.25rem;
    letter-spacing: 0.12em;
  }

  .tat-world-video-dek {
    font-size: 0.95rem;
  }
}
/* === OVERRIDE: World-Video – mittlere Trennlinie 5px === */

.tat-world-video-separator {
  height: 5px;          /* statt 1px */
  background-color: #666666;  /* dunkles Grau */
  margin-top: 2.2rem;   /* kannst du bei Bedarf noch anpassen */
}

/* =======================================
   WORLD – YOUNG PERSPECTIVES SECTION
   ======================================= */

.worldyounger-section {
  background-color: #000;
  color: #fff;
  padding: 3rem 0 3.5rem;
}

.worldyounger-inner {
  /* tat-container regelt max-width und Seitenabstand */
}

.worldyounger-header {
  margin-bottom: 2.2rem;
}

.worldyounger-title {
  font-size: 1.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}

.worldyounger-dek {
  max-width: 640px;
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}

/* ==========================
   GRID – nur Abstand zwischen Karten
   ========================== */

/* Desktop: 4 Karten nebeneinander, NUR Abstand zwischen Karten */
.worldyounger-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 1.6rem;   /* HIER: Abstand NUR zwischen den Videos (horizontal) */
  row-gap: 1.8rem;      /* falls zweite Reihe: Abstand NUR zwischen den Reihen */
  margin: 0;            /* KEIN zusätzlicher Außenabstand über das Grid selbst */
}

/* Karten / Blöcke */

.worldyounger-card {
  position: relative;
  overflow: hidden;
  /* kein padding, damit nichts nach außen geschoben wird */
}

.worldyounger-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Bild im 9:16-Format (YouTube-Shorts-Optik) */

.worldyounger-figure {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  margin: 0;
  overflow: hidden;
}

.worldyounger-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* HALBES OVERLAY UNTEN AUF DEM BILD */

.worldyounger-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 50%;
  padding: 0.9rem 1rem 1rem;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.75) 45%,
    rgba(0, 0, 0, 0.9) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Label: Altersgruppe / Situation */

.worldyounger-label {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 0.25rem;
}

/* Titel */

.worldyounger-card-title {
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.035em;
  line-height: 1.5;
  margin: 0;
}

/* Hover – dezent */

.worldyounger-link:hover .worldyounger-card-title {
  text-decoration: underline;
}

/* =======================================
   RESPONSIVE – TABLET (2 × 2, Abstand nur zwischen Karten)
   ======================================= */

@media (max-width: 900px) {
  .worldyounger-section {
    padding: 2.5rem 0 3rem;
  }

  .worldyounger-title {
    font-size: 1.4rem;
  }

  .worldyounger-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.4rem;  /* Abstand zwischen Karten links/rechts */
    row-gap: 1.8rem;     /* Abstand zwischen oberer & unterer Reihe */
    margin: 0;           /* weiterhin kein Außenabstand über das Grid */
  }

  .worldyounger-overlay {
    padding: 0.8rem 0.9rem 0.9rem;
  }

  .worldyounger-card-title {
    font-size: 1.05rem;
  }
}

/* =======================================
   RESPONSIVE – MOBILE (1 Karte je Zeile)
   Abstand NUR zwischen Karten (vertikal)
   ======================================= */

@media (max-width: 600px) {
  .worldyounger-grid {
    grid-template-columns: 1fr;
    column-gap: 0;       /* nur eine Spalte – keine horizontale Lücke */
    row-gap: 1.6rem;     /* Abstand zwischen den einzelnen Karten (oben/unten) */
    margin: 0;
  }

  .worldyounger-header {
    margin-bottom: 1.6rem;
  }

  .worldyounger-title {
    font-size: 1.25rem;
    letter-spacing: 0.11em;
  }

  .worldyounger-dek {
    font-size: 0.95rem;
  }

  .worldyounger-overlay {
    padding: 0.8rem 0.8rem 0.9rem;
  }

  .worldyounger-card-title {
    font-size: 1rem;
  }
}
/* === OVERRIDE: Young Perspectives – größere Titles === */

/* Großer Section-Titel oben */
.worldyounger-title {
  font-size: 1.9rem;      /* vorher 1.6rem – jetzt sichtbar größer */
}

/* Titles auf den Bildern (Overlay) */
.worldyounger-card-title {
  font-size: 1.35rem;     /* vorher 1.15rem – ca. +3px bis +4px */
}

/* =======================================
   WORLD – OPINION – WORLD VIEW SECTION
   ======================================= */

.opinion-section {
  background-color: #ffffff;
  color: #000000;
  padding: 3rem 0 3.5rem;
}

.opinion-inner {
  /* .tat-container setzt max-width und Seitenabstand */
}

.opinion-header {
  margin-bottom: 2.2rem;
}

.opinion-title {
  font-size: 1.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}

.opinion-dek {
  max-width: 720px;
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}

/* ===== Grid – 3 Karten wie im Screenshot ========================== */

.opinion-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.8rem;
}

/* Karten-Grundaufbau */

.opinion-card {
  display: flex;
  flex-direction: column;
}

.opinion-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* Bild-Platzhalter / Medien */

.opinion-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;              /* wirkt wie die grauen Plätze im Screenshot */
  margin: 0 0 0.9rem 0;
  background-color: #e2e2e2;        /* fallback, falls Bild noch lädt */
  overflow: hidden;
}

.opinion-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Meta-Block */

.opinion-meta {
  flex: 1 1 auto;
}

/* kleine Zeile: Opinion + Datum */

.opinion-meta-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.opinion-label {
  font-weight: 600;
}

.opinion-date {
  opacity: 0.85;
}

/* Headline */

.opinion-headline {
  font-size: 1.25rem;
  line-height: 1.5;
  margin: 0 0 0.35rem;
}

/* kurzer Teaser */

.opinion-teaser {
  font-size: 0.98rem;
  line-height: 1.7;
  margin: 0 0 0.45rem;
}

/* Autorenzeile + Herkunftsort */

.opinion-byline {
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
  opacity: 0.9;
}

.opinion-author {
  font-weight: 500;
}

/* Hover-Effekt nur auf Headline */

.opinion-link:hover .opinion-headline {
  text-decoration: underline;
}
/* =======================================
   WORLD – OPINION – WORLD VIEW SECTION
   ======================================= */

.opinion-section {
  background-color: #ffffff;
  color: #000000;
  padding: 3rem 0 3.5rem;
}

.opinion-inner { }

.opinion-header {
  margin-bottom: 2.2rem;
}

.opinion-title {
  font-size: 1.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}

.opinion-dek {
  max-width: 720px;
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}

/* ===== DESKTOP – 3 Karten nebeneinander ========================== */

.opinion-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.8rem;
}

.opinion-card {
  display: flex;
  flex-direction: column;
}

.opinion-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* Bild / Medien */

.opinion-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0 0 0.9rem 0;
  background-color: #e2e2e2;
  overflow: hidden;
}

.opinion-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Meta-Block */

.opinion-meta {
  flex: 1 1 auto;
}

.opinion-meta-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.opinion-label {
  font-weight: 600;
}

.opinion-date {
  opacity: 0.85;
}

/* Headline + Teaser + Byline */

.opinion-headline {
  font-size: 1.25rem;
  line-height: 1.5;
  margin: 0 0 0.35rem;
}

.opinion-teaser {
  font-size: 0.98rem;
  line-height: 1.7;
  margin: 0 0 0.45rem;
}

.opinion-byline {
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
  opacity: 0.9;
}

.opinion-author {
  font-weight: 500;
}

.opinion-link:hover .opinion-headline {
  text-decoration: underline;
}

/* ===== TABLET – 1 oben, 2 unten nebeneinander ===================== */
/* 701px–900px: genau wie dein Screenshot */

@media (min-width: 701px) and (max-width: 900px) {
  .opinion-section {
    padding: 2.5rem 0 3rem;
  }

  .opinion-title {
    font-size: 1.6rem;
  }

  .opinion-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-rows: auto;
    column-gap: 1.6rem;
    row-gap: 1.6rem;
  }

  /* 1. Karte: vollbreit oben */
  .opinion-grid .opinion-card:nth-child(1) {
    grid-column: 1 / -1;
  }

  /* 2. & 3. Karte: darunter links/rechts */
  .opinion-grid .opinion-card:nth-child(2) {
    grid-column: 1 / 2;
  }

  .opinion-grid .opinion-card:nth-child(3) {
    grid-column: 2 / 3;
  }

  .opinion-headline {
    font-size: 1.15rem;
  }
}

/* ===== MOBILE – alles untereinander =============================== */

@media (max-width: 700px) {
  .opinion-grid {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  /* Grid-Spannen von Tablet wieder zurücksetzen */
  .opinion-grid .opinion-card:nth-child(1),
  .opinion-grid .opinion-card:nth-child(2),
  .opinion-grid .opinion-card:nth-child(3) {
    grid-column: auto;
  }

  .opinion-header {
    margin-bottom: 1.8rem;
  }

  .opinion-title {
    font-size: 1.4rem;
    letter-spacing: 0.11em;
  }

  .opinion-dek {
    font-size: 0.95rem;
  }
}
/* =======================================
   WORLD – WEEKLY BRIEFING SECTION
   ======================================= */

.weeklybrief-section {
  background-color: #ffffff;
  color: #000000;
  padding: 3rem 0 3.5rem;
}

.weeklybrief-inner { }

.weeklybrief-header {
  margin-bottom: 1.8rem;
}

.weeklybrief-title {
  font-size: 1.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}

.weeklybrief-dek {
  max-width: 720px;
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}

/* Label für Woche / Ausgabe */

.weeklybrief-week-label {
  font-size: 0.85rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
  opacity: 0.85;
}

/* ===== DESKTOP – 5 Karten pro Reihe, 2 Reihen ==================== */

.weeklybrief-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.8rem;
}

.weeklybrief-card {
  display: flex;
  flex-direction: column;
}

.weeklybrief-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* Bildbereich – graue Platzhalter-Optik wie im Screenshot */

.weeklybrief-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;       /* gleiches Verhältnis wie die grauen Flächen */
  margin: 0 0 0.8rem 0;
  background-color: #e2e2e2;
  overflow: hidden;
}

.weeklybrief-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Meta-Zeile */

.weeklybrief-meta {
  flex: 1 1 auto;
}

.weeklybrief-meta-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.weeklybrief-kicker {
  font-weight: 600;
}

.weeklybrief-date {
  opacity: 0.85;
}

/* Titel */

.weeklybrief-headline {
  font-size: 1.05rem;
  line-height: 1.5;
  margin: 0;
}

/* Hover-Effekt */

.weeklybrief-link:hover .weeklybrief-headline {
  text-decoration: underline;
}

/* ===== TABLET – Zweier-Blocks übereinander ======================= */
/* 2 Karten pro Reihe, mehrere Reihen */

@media (max-width: 900px) {
  .weeklybrief-section {
    padding: 2.5rem 0 3rem;
  }

  .weeklybrief-title {
    font-size: 1.6rem;
  }

  .weeklybrief-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem;
  }

  .weeklybrief-headline {
    font-size: 1rem;
  }
}

/* ===== MOBILE – einzelne Blöcke untereinander ==================== */

@media (max-width: 700px) {
  .weeklybrief-grid {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  .weeklybrief-header {
    margin-bottom: 1.6rem;
  }

  .weeklybrief-title {
    font-size: 1.4rem;
    letter-spacing: 0.11em;
  }

  .weeklybrief-dek {
    font-size: 0.95rem;
  }
}
/* =======================================
   WORLD – GLOBAL PORTRAIT SECTION
   ======================================= */

.globalportrait-section {
  background-color: #fafafa;
  color: #000000;
  padding: 3rem 0 3.5rem;
}

.globalportrait-inner { }

.globalportrait-header {
  margin-bottom: 2.2rem;
}

.globalportrait-title {
  font-size: 1.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}

.globalportrait-dek {
  max-width: 680px;
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}

/* ===== GRID – 4 Portrait-Karten wie im Screenshot ================ */

.globalportrait-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.8rem;
}

/* Karte */

.globalportrait-card {
  border: 1px solid #d8d8d8;   /* 1px grauer Rand */
  background-color: #ffffff;
  padding: 0 1.3rem 1.5rem;
  display: flex;
  flex-direction: column;
}

/* Media-Bereich: hoher, weißer Block mit Credit unten */

.globalportrait-media {
  position: relative;
  margin: 0 0 0.9rem 0;
  width: 100%;
  aspect-ratio: 3 / 4;          /* hochkant, wie im Screenshot */
  background-color: #ffffff;
  overflow: hidden;
}

.globalportrait-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Credit-Linie am unteren Rand des Bildbereichs */

.globalportrait-credit {
  position: absolute;
  left: 50%;
  bottom: 0.7rem;
  transform: translateX(-50%);
  font-size: 0.8rem;
  line-height: 1.4;
  color: #555555;
}

/* Text unter dem Bild */

.globalportrait-text {
  margin-top: 0.4rem;
}

.globalportrait-name {
  font-size: 1.05rem;
  line-height: 1.4;
  margin: 0 0 0.25rem;
}

.globalportrait-fields,
.globalportrait-location {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

.globalportrait-fields {
  margin-bottom: 0.15rem;
}

/* ===== RESPONSIVE ================================================ */

/* Tablet: 2 Portraits pro Reihe */

@media (max-width: 900px) {
  .globalportrait-section {
    padding: 2.5rem 0 3rem;
  }

  .globalportrait-title {
    font-size: 1.6rem;
  }

  .globalportrait-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem;
  }
}

/* Mobile: 1 Portrait pro Reihe */

@media (max-width: 700px) {
  .globalportrait-grid {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .globalportrait-header {
    margin-bottom: 1.8rem;
  }

  .globalportrait-title {
    font-size: 1.4rem;
    letter-spacing: 0.11em;
  }

  .globalportrait-dek {
    font-size: 0.95rem;
  }
}
/* SECTION: add 1px gray border only top + bottom */
.globalportrait-section {
  background-color: #fafafa;
  color: #000000;
  padding: 3rem 0 3.5rem;
  border-top: 1px solid #d8d8d8;    /* NEW */
  border-bottom: 1px solid #d8d8d8; /* NEW */
}
/* CARD: add top padding same as left/right */
.globalportrait-card {
  border: 1px solid #d8d8d8;
  background-color: #ffffff;
  padding: 1.3rem 1.3rem 1.5rem; /* was: 0 1.3rem 1.5rem */
  display: flex;
  flex-direction: column;
}
/* =======================================
   ARTISTS – WOMAN IN ART SECTION
   ======================================= */

.womaninart-section {
  background-color: #850fcf;
  color: #ffffff;
  padding: 3rem 0 3.5rem;
  border-top: 1px solid #d8d8d8;     /* only top/bottom border */
  border-bottom: 1px solid #d8d8d8;
}

.womaninart-inner { }

.womaninart-header {
  margin-bottom: 2.2rem;
}

.womaninart-title {
  font-size: 1.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}

.womaninart-dek {
  max-width: 680px;
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}

/* GRID */

.womaninart-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.8rem;
}

/* CARD */

.womaninart-card {
  border: 1px solid #d8d8d8;
  background-color: #ffffff;
  padding: 1.3rem 1.3rem 1.5rem;   /* same top + side spacing */
  display: flex;
  flex-direction: column;
}

/* MEDIA */

.womaninart-media {
  position: relative;
  margin: 0 0 0.9rem 0;
  width: 100%;
  aspect-ratio: 3 / 4;
  background-color: #ffffff;
  overflow: visible;              /* NEU: Credit darf unter dem Bild sichtbar sein */
}


.womaninart-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Credit direkt unter dem Foto */
.womaninart-credit {
  position: static;
  transform: none;
  margin-top: 0.35rem;   /* kleiner Abstand unter dem Bild */
  margin-bottom: 10px;   /* NEU: Abstand zum Textblock */
  font-size: 0.8rem;
  line-height: 1.4;
  color: #555555;
  text-align: right;
}



/* TEXT */

.womaninart-text {
  margin-top: 0.4rem;
}

.womaninart-name {
  font-size: 1.05rem;
  line-height: 1.4;
  margin: 0 0 0.25rem;
}

.womaninart-fields,
.womaninart-location {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

.womaninart-fields {
  margin-bottom: 0.15rem;
}

/* RESPONSIVE */

@media (max-width: 900px) {
  .womaninart-section {
    padding: 2.5rem 0 3rem;
  }

  .womaninart-title {
    font-size: 1.6rem;
  }

  .womaninart-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem;
  }
}

@media (max-width: 700px) {
  .womaninart-grid {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .womaninart-header {
    margin-bottom: 1.8rem;
  }

  .womaninart-title {
    font-size: 1.4rem;
    letter-spacing: 0.11em;
  }

  .womaninart-dek {
    font-size: 0.95rem;
  }
}
/* SECTION: black background, NO global white text */
.womaninart-section {
  background-color: #4c027a;      /* black background */
  padding: 3rem 0 3.5rem;
  border-top: 1px solid #d8d8d8;
  border-bottom: 1px solid #d8d8d8;
}

/* Header text on black: keep readable (white) */
.womaninart-title,
.womaninart-dek {
  color: #ffffff;
}

/* CARDS: stay white with BLACK text */
.womaninart-card {
  border: 1px solid #d8d8d8;
  background-color: #ffffff;
  color: #000000;                 /* card text black */
  padding: 1.3rem 1.3rem 1.5rem;
  display: flex;
  flex-direction: column;
}
/* =======================================
   ARTISTS – PHOTOGRAPHER SECTION (CLEAN)
   ======================================= */

.photographer-section {
  background-color: #f9b705;        /* gelber Hintergrund */
  padding: 3rem 0 3.5rem;
  border-top: 1px solid #d8d8d8;    /* nur oben/unten */
  border-bottom: 1px solid #d8d8d8;
}

.photographer-inner { }

.photographer-header {
  margin-bottom: 2.2rem;
}

.photographer-title {
  font-size: 1.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
  color: #000000;
}

.photographer-dek {
  max-width: 680px;
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
  color: #000000;
}

/* GRID – 4 Karten nebeneinander auf Desktop */

.photographer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.8rem;
}

/* CARD – weißer Rahmen mit grauer Border */

.photographer-card {
  box-sizing: border-box;
  border: 1px solid #d8d8d8;
  background-color: #ffffff;
  color: #000000;
  padding: 1.3rem 1.3rem 1.5rem;   /* oben = seitlich */
  display: flex;
  flex-direction: column;
}

/* MEDIA – Bild + Credit untereinander */

.photographer-media {
  margin: 0 0 0.6rem 0;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
}

.photographer-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* PHOTO CREDIT – direkt unter Foto, dann 15px Abstand zum Namen */

.photographer-credit {
  margin-top: 0.35rem;   /* kleiner Abstand unter dem Foto */
  margin-bottom: 15px;   /* Abstand zum Namen */
  font-size: 0.8rem;
  line-height: 1.4;
  color: #555555;
  text-align: right;
}

/* TEXTBLOCK */

.photographer-text {
  margin-top: 0;         /* Abstand kommt vom Credit */
}

.photographer-name {
  font-size: 1.05rem;
  line-height: 1.4;
  margin: 0 0 0.25rem;
}

.photographer-fields,
.photographer-location {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

.photographer-fields {
  margin-bottom: 0.15rem;
}

/* RESPONSIVE: Tablet 2 Spalten, Mobile 1 Spalte */

@media (max-width: 900px) {
  .photographer-section {
    padding: 2.5rem 0 3rem;
  }

  .photographer-title {
    font-size: 1.6rem;
  }

  .photographer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem;
  }
}

@media (max-width: 700px) {
  .photographer-grid {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .photographer-header {
    margin-bottom: 1.8rem;
  }

  .photographer-title {
    font-size: 1.4rem;
    letter-spacing: 0.11em;
  }

  .photographer-dek {
    font-size: 0.95rem;
  }
}
/* =======================================
   ARTISTS – TODAY VIDEO SECTION
   ======================================= */

body.is-artists .taoday-section {
  margin: 4rem 0;
  background-color: #ffffff;
  border-top: 1px solid #d8d8d8;
  border-bottom: 1px solid #d8d8d8;
}

body.is-artists .taoday-inner {
  max-width: var(--tat-container);
  margin: 0 auto;
  padding: 2.5rem var(--tat-gutter) 3rem;
  box-sizing: border-box;
}

/* Header */
body.is-artists .taoday-header {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 2rem;
}

body.is-artists .taoday-title {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.is-artists .taoday-dek {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* GRID – Desktop: 4 Karten pro Reihe */
body.is-artists .taoday-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.8rem;
}

/* Karte / Rahmen */
body.is-artists .taoday-card {
  background-color: #ffffff;
  border: 1px solid #d8d8d8;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Video-Bereich: 10px Abstand oben / links / rechts */
body.is-artists .taoday-media {
  padding: 10px 10px 0;
}

/* Video-Frame – 9:16 Shorts, Video füllt den Rahmen */
body.is-artists .taoday-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #000000;
}

body.is-artists .taoday-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  display: block;
}

/* Credit direkt unter dem Video, kleine graue Schrift */
body.is-artists .taoday-credit {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #777777;
  text-align: right;
}

/* Textbereich im Rahmen */
body.is-artists .taoday-text {
  padding: 0.8rem 10px 1rem;
}

body.is-artists .taoday-name {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  line-height: 1.4;
}

body.is-artists .taoday-artform,
body.is-artists .taoday-location {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

body.is-artists .taoday-location {
  color: #555555;
}

/* Hover-Effekt für den Namen (falls später als Link genutzt) */
body.is-artists .taoday-name a {
  color: inherit;
  text-decoration: none;
}

body.is-artists .taoday-name a:hover {
  text-decoration: underline;
}

/* ===========================
   TABLET (769–1024px)
   → 2 Karten nebeneinander
   =========================== */
@media (min-width: 769px) and (max-width: 1024px) {
  body.is-artists .taoday-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem;
  }
}

/* ===========================
   MOBILE (≤768px)
   → 1 Karte pro Zeile
   =========================== */
@media (max-width: 768px) {
  body.is-artists .taoday-inner {
    padding: 2rem 16px 2.5rem;
  }

  body.is-artists .taoday-grid {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
}
/* ===== TODAY-SECTION – GRID BREAKPOINTS NEU ===== */

/* Alle Tablets (600–1024px): 2 Karten nebeneinander */
@media (min-width: 600px) and (max-width: 1024px) {
  body.is-artists .taoday-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem;
  }

  body.is-artists .taoday-inner {
    padding: 2.2rem var(--tat-gutter) 2.7rem;
  }
}

/* Phones / sehr kleine Screens (≤599px): 1 Karte pro Zeile */
@media (max-width: 599px) {
  body.is-artists .taoday-inner {
    padding: 2rem 16px 2.5rem;
  }

  body.is-artists .taoday-grid {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  body.is-artists .taoday-card {
    padding-left: 0;
    padding-right: 0;
  }
}
/* TODAY-SECTION – Section-Rahmen entfernen */
body.is-artists .taoday-section {
  border-top: none !important;
  border-bottom: none !important;
}
/* =======================================================
   ARTISTS HERO – Layout, Titel, Farben, Linie, Buttons
   ======================================================= */

/* Desktop-Layout (≥1025px) -------------------------------- */
@media (min-width: 1025px) {

  /* Grid: 3 Spalten, kein Abstand zwischen Schwarz und Bild */
  body.is-artists .tat-artists-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 2.1fr) minmax(0, 1.7fr);
    column-gap: 0;
    align-items: stretch;
  }

  /* Titel über alle drei Spalten, etwas kleinerer Abstand zur Slide */
  body.is-artists .tat-artists-main-title {
    grid-column: 1 / -1;
    margin: 0 0 1.4rem;
  }

  /* Spalten explizit zuweisen */
  body.is-artists .tat-artists-hero-left   { grid-column: 1; }
  body.is-artists .tat-artists-hero-center { grid-column: 2; }
  body.is-artists .tat-artists-hero-right  { grid-column: 3; }

  /* Rechte Spalte: keine alte Border, dafür eigene schwarze Linie
     mit Abstand zum Text – die Linie liegt NUR im rechten Block */
  body.is-artists .tat-artists-hero-right {
    border-left: none !important;
    padding-left: 1.75rem;
    position: relative;
  }

  body.is-artists .tat-artists-hero-right::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: #000000;
    pointer-events: none;
  }
}

/* Titel: Gemischte Groß-/Kleinbuchstaben, dezentes Letterspacing */
body.is-artists .tat-artists-main-title {
  text-transform: none;
  letter-spacing: 0.03em;
  font-size: 1.7rem;
}

/* Slider-Block: weiße Texte, Links nicht blau ----------------- */
body.is-artists .tat-artists-hero-left {
  color: #ffffff;
  position: relative; /* Referenz für die Buttons unten */
}

body.is-artists .tat-artists-hero-left a,
body.is-artists .tat-artists-hero-left a:visited {
  color: inherit;
  text-decoration: none;
}

body.is-artists .tat-artists-hero-left a:hover .tat-artists-slide-title {
  text-decoration: underline;
}

/* Sidebar-Links ebenfalls neutral, nur Headline unterstrichen beim Hover */
body.is-artists .tat-artists-hero-right a,
body.is-artists .tat-artists-hero-right a:visited {
  color: inherit;
  text-decoration: none;
}

body.is-artists .tat-artists-hero-right a:hover .tat-artists-sidebar-headline {
  text-decoration: underline;
}

/* Slider-Buttons fix ganz unten im schwarzen Block ------------- */

/* Slider selbst braucht keine eigene Positionierung */
body.is-artists .tat-artists-slider {
  position: static !important;
  padding-bottom: 0 !important;
}

/* Buttons unten, mittig im schwarzen Block */
body.is-artists .tat-artists-slide-controls {
  position: absolute !important;
  left: 50%;
  top: auto !important;
  bottom: 1.5rem;          /* Abstand zum unteren Rand des schwarzen Blocks */
  transform: translateX(-50%);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* =========================================================
   ARTISTS HERO – Trennlinie mit Abstand zur Slide
   ========================================================= */

@media (min-width: 1025px) {
  /* Abstand zwischen Bildspalte und rechter Spalte = 2rem */
  body.is-artists .tat-artists-hero-inner {
    column-gap: 2rem;
  }

  /* rechte Spalte: kein eigenes border-left, sondern Linie in der Mitte des Gaps */
  body.is-artists .tat-artists-hero-right {
    border-left: none !important;  /* alte Linie sicher aus */
    padding-left: 1rem;            /* Abstand Text zur Linie */
    position: relative;
  }

  /* Linie sitzt jetzt GENAU im 2rem-Gap:
     1rem Abstand zur Bildspalte, 1rem Abstand zum Text */
  body.is-artists .tat-artists-hero-right::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1rem;                   /* Mitte des 2rem-Gaps */
    width: 1px;
    background: #000000;
    pointer-events: none;
  }
}
/* =======================================================
   ARTISTS HERO – Layout, Titel, Farben, Linie, Buttons
   ======================================================= */

/* Titel: gemischte Groß-/Kleinbuchstaben, dezentes Letterspacing */
body.is-artists .tat-artists-main-title {
  text-transform: none;
  letter-spacing: 0.03em;
  font-size: 1.7rem;
}

/* Desktop-Layout (≥1025px) -------------------------------- */
@media (min-width: 1025px) {

  /* Grid: 3 Spalten
     - Schwarz (Slider) und Bild kleben aneinander
     - Abstand nur zwischen Bild und rechter Spalte
  */
  body.is-artists .tat-artists-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 2.1fr) minmax(0, 1.7fr);
    column-gap: 0;              /* KEIN Abstand zwischen Schwarz und Bild */
    align-items: stretch;
  }

  /* Titel über alle drei Spalten, etwas dichter an der Slide */
  body.is-artists .tat-artists-main-title {
    grid-column: 1 / -1;
    margin: 0 0 1.4rem;
  }

  /* Spalten explizit zuweisen */
  body.is-artists .tat-artists-hero-left   { grid-column: 1; }
  body.is-artists .tat-artists-hero-center { grid-column: 2; }
  body.is-artists .tat-artists-hero-right  { grid-column: 3; }

  /* RECHTE SPALTE:
     - bekommt Abstand nach links (Gap zum Bild)
     - eigene schwarze Trennlinie nur in diesem Block
  */
  body.is-artists .tat-artists-hero-right {
    position: relative;
    margin-left: 2rem;          /* Abstand zwischen Bild und rechter Spalte */
    padding-left: 1.5rem;       /* Abstand Text zur Linie */
    border-left: none !important;
  }

  body.is-artists .tat-artists-hero-right::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;                    /* Linie am Beginn der rechten Spalte */
    width: 1px;
    background: #000000;
    pointer-events: none;
  }
}

/* Slider-Block: weiße Texte, Links nicht blau ----------------- */
body.is-artists .tat-artists-hero-left {
  color: #ffffff;
  position: relative;           /* Referenz für die Buttons unten */
}

body.is-artists .tat-artists-hero-left a,
body.is-artists .tat-artists-hero-left a:visited {
  color: inherit;
  text-decoration: none;
}

body.is-artists .tat-artists-hero-left a:hover .tat-artists-slide-title {
  text-decoration: underline;
}

/* Sidebar-Links neutral, nur Headline unterstrichen beim Hover */
body.is-artists .tat-artists-hero-right a,
body.is-artists .tat-artists-hero-right a:visited {
  color: inherit;
  text-decoration: none;
}

body.is-artists .tat-artists-hero-right a:hover .tat-artists-sidebar-headline {
  text-decoration: underline;
}

/* Slider-Buttons fix ganz unten im schwarzen Block ------------- */

/* Slider selbst braucht keine eigene Positionierung mehr */
body.is-artists .tat-artists-slider {
  position: static !important;
  padding-bottom: 0 !important;
}

/* Buttons unten, mittig im schwarzen Block */
body.is-artists .tat-artists-slide-controls {
  position: absolute !important;
  left: 50%;
  top: auto !important;
  bottom: 1.5rem;               /* Abstand zum unteren Rand des schwarzen Blocks */
  transform: translateX(-50%);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* =======================================
   PHOTOGRAPHERS IN FOCUS – GRID BREAKPOINT FIX
   ======================================= */

/* Desktop: 4 Karten */
.photographer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.8rem;
}

/* Tablets (groß + klein): 2 Karten nebeneinander
   ca. 600–1024 px Breite */
@media (min-width: 600px) and (max-width: 1024px) {
  .photographer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: eine Karte pro Zeile */
@media (max-width: 599px) {
  .photographer-grid {
    grid-template-columns: 1fr;
  }
}


/* === GLOBAL COMBO SECTION: Slider + News + Opinion ===================== */

.tat-global-section {
  padding: 2.5rem 1rem 3rem;
}

.tat-global-container {
  max-width: 1200px;
  margin: 0 auto;
}

.tat-global-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.65fr) minmax(0, 0.9fr);
  gap: 2rem;
  align-items: flex-start;
}

/* =========================
   SLIDER HERO (LEFT)
   ========================= */

.tat-global-hero {
  margin-bottom: 2rem;
}

/* Desktop: Text links, Bild rechts */
.tat-global-hero-main {
  display: grid;
  grid-template-columns: 2.3fr 2.3fr;
  gap: 0;
  align-items: stretch;
}

/* Schwarzer Slider-Textblock */
.tat-global-slider {
  background: #000;
  color: #fff;
  padding: 2.5rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  min-height: 400px;
  box-sizing: border-box;
}

.tat-global-slides {
  position: relative;
}

.tat-global-slide {
  display: none;
}

.tat-global-slide.is-active {
  display: block;
}

.tat-global-slide-link {
  color: inherit;
  text-decoration: none;
}

.tat-global-kicker {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}

.tat-global-headline {
  font-size: 1.7rem;
  margin-top: 0.3rem;
}

.tat-global-desc {
  font-size: 0.95rem;
  line-height: 1.5;
  margin-top: 0.8rem;
}

/* Footer: Counter + Buttons nebeneinander */
.tat-global-slider-footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  gap: 1rem;
}

.tat-global-counter {
  font-size: 0.9rem;
  display: flex;
  gap: 0.3rem;
}

/* Slider-Buttons */
.tat-global-controls {
  display: flex;
  gap: 0.5rem;
}

.tat-global-btn-prev,
.tat-global-btn-next {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.tat-global-btn-prev:hover,
.tat-global-btn-next:hover {
  background: #fff;
  color: #000;
}

/* =========================
   SLIDER IMAGE BLOCK (RIGHT)
   ========================= */

.tat-global-image {
  display: flex;
  flex-direction: column;
}

.tat-global-figure {
  display: none;
  width: 100%;
  height: 100%;
  min-height: 400px;
  margin: 0;
}

.tat-global-figure.is-active {
  display: block;
}

.tat-global-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================
   NEWS CARD (unter dem Slider)
   ========================= */

.tat-global-card {
  border-top: 1px solid #000;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}

.tat-global-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.tat-global-card-inner {
  display: grid;
  grid-template-columns: minmax(0, 2.3fr) minmax(0, 2.3fr);
  gap: 0;
}

.tat-global-card-media {
  padding: 0;
  margin: 0;
}

.tat-global-card-media img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  max-height: 380px;
  object-fit: cover;
  display: block;
}

.tat-global-card-text {
  display: flex;
  flex-direction: column;
  gap: 0.10rem;
}

.tat-desc,
.tat-news-meta {
  margin-top: 0;
}

/* =========================
   BOOK PROMO (unten links)
   ========================= */

.tat-global-promo {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #000;
}

.tat-global-promo-link {
  display: block;
  text-decoration: none;
}

.tat-global-promo img {
  width: 100%;
  display: block;
}

/* PROMO-Banner mit Overlay */

.tat-global-promo-figure {
  position: relative;
  margin: 0;
  width: 100%;
  height: auto;
  min-height: 420px;
  overflow: hidden;
}

.tat-global-promo-figure img[itemprop="image"] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 420px;
}

.tat-global-promo-overlay {
  position: absolute;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.tat-global-promo-logo {
  width: 190px;
  max-width: 100%;
  height: auto;
  margin-bottom: 1rem;
}

.tat-global-promo-title {
  font-size: 1.7rem;
  line-height: 1.4;
  font-weight: normal;
  margin: 0;
  padding: 0;
  color: #fff;
}

/* =========================
   OPINION RIGHT (rechte Spalte)
   ========================= */

.tat-global-opinion-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tat-global-opinion {
  border-top: 1px solid #999594;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
}

.tat-global-opinion-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.tat-global-opinion-card {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 2rem;
  align-items: center;
}

.tat-global-opinion-media {
  margin: 0;
  padding: 0;
}

.tat-global-opinion-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  margin: 0;
}

.tat-global-opinion-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.tat-title-article {
  margin-top: 0;
  margin-bottom: 0;
}

.tat-opinion-meta {
  margin-top: 0;
  margin-bottom: 0;
}

.tat-desc {
  margin-top: 0;
  margin-bottom: 0;
}

.tat-global-right .tat-title-article {
  font-size: 0.9rem;
  line-height: 1.4;
  font-weight: 500;
}

.tat-global-right .tat-opinion-meta .tat-num {
  font-size: 0.75rem;
  color: #666;
  font-weight: normal;
  margin-top: 0.2rem;
  margin-bottom: 0;
}

/* =========================
   RESPONSIVE LAYOUT
   ========================= */

/* Desktop: linker Bereich mit Trennlinie */
@media (min-width: 1025px) {
  .tat-global-left {
    border-right: 1px solid #000;
    padding-right: 2.5rem;
  }
  .tat-global-right {
    padding-left: 0;
  }
}

/* Tablet (<=1024px): Spalten untereinander, Opinion 2-spaltig */
@media (max-width: 1024px) {
  .tat-global-grid {
    grid-template-columns: 1fr;
  }

  .tat-global-left {
    border-right: none;
    padding-right: 0;
  }
  .tat-global-right {
    padding-left: 0;
  }

  .tat-global-opinion-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
  }

  .tat-global-opinion {
    position: relative;
    padding: 1rem;
    background-color: #fff;
  }

  .tat-global-opinion::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -1rem;
    height: 1px;
    background-color: #ccc;
  }

  .tat-global-opinion::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    right: -1rem;
    width: 1px;
    background-color: #ccc;
  }

  .tat-global-opinion-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .tat-global-opinion-media {
    margin-bottom: 0.5rem;
  }

  .tat-global-opinion-text {
    padding: 0;
  }

  .tat-title-article {
    text-align: left;
    margin-left: 0;
  }
}

/* Mini-Tablet (<=768px): News-Card und Opinion kompakter */
@media (max-width: 768px) {
  .tat-global-card-inner {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .tat-global-opinion-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .tat-global-opinion-card {
    flex-direction: column;
  }

  .tat-global-opinion-media img {
    max-height: 180px;
    width: 100%;
    object-fit: cover;
    display: block;
  }
}

/* Mobile + kleine Tablets (<=820px): Bild oben, schwarzer Block direkt darunter, Text kleiner */
@media (max-width: 820px) {

  .tat-global-hero {
    margin: 0 !important;
    padding: 0 !important;
  }

  .tat-global-hero-main {
    display: flex !important;
    flex-direction: column-reverse !important; /* Bild oben, Text darunter */
    gap: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .tat-global-image,
  .tat-global-figure {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .tat-global-figure {
    min-height: auto !important;
  }

  .tat-global-figure img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  /* Schwarzer Block: direkt am Bild, nur innen etwas Luft */
  .tat-global-slider {
    margin: 0 !important;
    padding: 0.8rem 1rem 1rem 1rem !important;
    min-height: auto !important;
    box-sizing: border-box !important;
    background: #000 !important;
  }

  .tat-global-kicker {
    font-size: 0.7rem !important;
    letter-spacing: 0.1em !important;
  }

  .tat-global-headline {
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
    margin: 0.25rem 0 0.35rem 0 !important;
  }

  .tat-global-desc {
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
    margin: 0.35rem 0 0 0 !important;
  }

  .tat-global-slider-footer {
    padding-top: 0.6rem !important;
    margin-top: 0.4rem !important;
  }

  .tat-global-btn-prev,
  .tat-global-btn-next {
    width: 24px !important;
    height: 24px !important;
    font-size: 0.8rem !important;
  }
}
/* =========================
   OVERFLOW-SCHUTZ GLOBAL
   ========================= */

.tat-global-grid,
.tat-global-left,
.tat-global-right,
.tat-global-hero-main,
.tat-global-card-inner {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* ==========================================
   FIX: Remove scrollbar in Daily News image
   ========================================== */

.tat-global-card-media {
  overflow: hidden;
}

.tat-global-card-media img {
  width: 100%;
  height: auto !important;  /* überschreibt height: 100% */
  max-height: 380px;
  display: block;
}
/* =====================================================
   PROMO BLOCK: "ARTICLE ABOUT YOU"
   ===================================================== */

.tat-promo-yourarticle {
  margin: 3rem 0;
  padding: 2.5rem 0;
  background: #fafafa;             /* Abschnitt-Hintergrund weiß */
}

/* Desktop: 3 Spalten – links blau, Mitte Linie, rechts Video */
.tat-promo-yourarticle-inner {
  display: flex;
  align-items: stretch;
}

/* Spaltenbreiten (links etwas breiter) */
.tat-promo-left {
  flex: 2.1 1 0;
  text-decoration: none;
  color: inherit;
  display: block;
}

.tat-promo-right {
  flex: 1 1 0;
  display: flex;
  align-items: stretch;
}

/* Mittlere Spalte: vertikale Trennlinie, ca. 30px Gesamtabstand */
.tat-promo-divider {
  flex: 0 0 1px;
  margin: 0 15px;
  background: #000;
  align-self: stretch;
}

/* LEFT COLUMN – BLUE BLOCK ------------------------------------ */

.tat-promo-left-inner {
  background: #7bbcd4;
  padding: 0 2rem 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* oben Logo/Text, unten Bild */
  align-items: center;
  text-align: center;
  height: 100%;
}

/* Logo etwas nach unten setzen */
.tat-promo-logo {
  margin-top: 35px;
}

.tat-promo-logo img {
  display: block;
  width: auto;
  height: auto;
}

/* Titel & Subtitle */
.tat-promo-title {
  font-size: 2.2rem;
  line-height: 1.2;
  margin: 0 0 0.75rem;
  color: #ffffff;
}

.tat-promo-subtitle {
  font-size: calc(1.35rem + 14px);
  line-height: 1.4;
  margin: 0 0 1.25rem;
  color: #ffffff;
}

/* Abstand zwischen Text und Bild */
.tat-promo-copy {
  margin-bottom: 0.5rem;
}

/* Artikel-Mockup unten, zentriert */
.tat-promo-mockup {
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.tat-promo-mockup img {
  display: block;
  width: auto;
  max-width: 380px;   /* Bildbreite steuerbar */
  height: auto;
}




/* ==========================================
   FOLLOW NOW – Button (Video & Hero)
   ========================================== */

.tat-promo-video-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.5rem;
  border-radius: 6px;                     /* leicht abgerundet */
  border: 1px solid #f43e67;
  background: #f43e67;
  color: #ffffff;
  text-decoration: none;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0.04em;
  font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
}

.tat-promo-video-cta:hover {
  opacity: 0.85;
}

/* Hero image overlay – Follow-Button korrekt positionieren */
.tat-hero-overlay {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

/* Button im Hero-Overlay – so breit wie der Bildbereich, mit Deckel */
.tat-hero-overlay-cta {
  margin-top: 0.5rem;
  width: 100%;
  max-width: 420px;
}

/* Hover-Effekt links */
.tat-promo-left:hover .tat-promo-title,
.tat-promo-left:hover .tat-promo-subtitle {
  opacity: 0.9;
}

/* =========================
   RESPONSIVE
   ========================= */

/* Tablet + Mobile: Blöcke untereinander */
@media (max-width: 900px) {
  .tat-promo-yourarticle-inner {
    flex-direction: column;
  }

  .tat-promo-divider {
    display: none;
  }

  .tat-promo-left {
    margin-bottom: 2rem;              /* Abstand zwischen blauem Block & Video */
  }

  .tat-promo-left-inner {
    padding: 2rem 1.5rem 1.5rem;
  }

  .tat-promo-title {
    font-size: 1.9rem;
  }

  .tat-promo-subtitle {
    font-size: 1.4rem;
  }

  .tat-promo-video-card {
    max-width: 420px;
    margin: 0 auto;
  }

  .tat-promo-logo img {
    margin: 0 auto 1.25rem;
    width: 75%;
    height: auto;
  }
}
/* =====================================================
   PROMO YOUR ARTICLE – VIDEO AUSBLENDEN
   Tablet + Mobile
   Desktop bleibt UNVERÄNDERT
   ===================================================== */

/* Tablet + Mobile */
@media (max-width: 1024px) {

  .tat-promo-right,
  .tat-promo-video-card,
  .tat-promo-video-frame {
    display: none !important;
  }

  .tat-promo-divider {
    display: none;
  }

}
/* ============================
   YOUR ARTICLE – HERO TEXTBLOCK
   ============================ */

.tat-hero-textblock {
  background-color: #fafafa;
  padding: 3rem 1rem;
}

.tat-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* GRID: Image left, Text right */
.tat-hero-grid {
  display: grid;
  grid-template-columns: 1.6fr 1.4fr;
  gap: 2rem;
  align-items: stretch;
}

/* ============================
   IMAGE + OVERLAY
   ============================ */

.tat-hero-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.tat-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tat-hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(0,0,0,0.55), transparent 60%);
  color: #fff;
}

.tat-hero-overlay-title {
  font-size: 1.7rem;
  line-height: 1.4;
  margin: 0;
  font-family: var(--tat-font-title, 'Playfair Display', serif);
}

/* ============================
   TEXT CARD
   ============================ */

.tat-hero-text-single {
  display: flex;
}

.tat-hero-card.is-full-height {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 1.5rem 1.75rem;
  background: #fafafa;
}

.tat-hero-card-title {
  font-size: 2.4rem;
  margin: 0 0 1rem;
  line-height: 1.2;
  font-family: var(--tat-font-title, 'Playfair Display', serif);
}

.tat-hero-card-desc {
  font-size: 1rem;
  line-height: 1.5;
  color: #666;
  font-family: var(--tat-font-text, 'Times New Roman', serif);
}

/* ============================
   FAQ ACCORDION
   ============================ */

.tat-hero-faq {
  margin-top: 0;
}

.tat-hero-faq .tat-sectit {
  font-size: 1.7rem;
  margin-bottom: 1.75rem;
}

.tat-hero-faq-item {
  border-bottom: 1px solid #e1e1e1;
}

.tat-hero-faq-summary {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  cursor: pointer;
  font-size: 1.2rem;
  color: #666;
}

.tat-hero-faq-summary::-webkit-details-marker {
  display: none;
}

.tat-hero-faq-icon {
  transition: transform 0.2s ease;
}

.tat-hero-faq-item[open] .tat-hero-faq-icon {
  transform: rotate(45deg);
}

.tat-hero-faq-answer .tat-desc {
  font-size: 1rem;
  line-height: 1.6;
  color: #666;
}

/* ============================
   RESPONSIVE
   ============================ */

@media (max-width: 768px) {
  .tat-hero-grid {
    grid-template-columns: 1fr;
  }

  .tat-hero-card-title {
    font-size: 1.8rem;
  }
}

@media (max-width: 480px) {
  .tat-hero-card-title {
    font-size: 1.6rem;
  }

  .tat-hero-overlay-title {
    font-size: 1.3rem;
  }
}
/* =====================================================
   HERO – MOBILE ORDER FIX
   Bild IMMER oben, Text + FAQ darunter
   Desktop bleibt unverändert
   ===================================================== */

@media (max-width: 768px) {

  .tat-hero-grid {
    grid-template-columns: 1fr;
  }

  /* Bild immer zuerst */
  .tat-hero-image-wrap {
    order: 1;
  }

  /* Textblock immer darunter */
  .tat-hero-text-single {
    order: 2;
    margin-top: 2rem;
  }
}


/* =========================================================
   COOKIE PREFERENCE CENTER — FINAL (bottom-left)
   border grey + shadow + bg #fafafa
   ========================================================= */

.tat-cookiepc{
  position:fixed;
  left:18px;
  bottom:18px;
  z-index:999999;
  width:380px;
  max-width:calc(100vw - 36px);
  font-family: Roboto, Arial, sans-serif;
  color:#111;
}

.tat-cookiepc.tat-cookiepc--closed{
  display:none !important;
}

.tat-cookiepc-card{
  background:#fafafa;
  border:1px solid #d7d7d7;
  border-radius:14px;
  box-shadow:0 18px 45px rgba(0,0,0,0.22);
  overflow:hidden;
}

.tat-cookiepc-head{
  display:grid;
  grid-template-columns:28px 1fr 28px;
  align-items:center;
  padding:10px 12px;
  border-bottom:1px solid #e3e3e3;
  background:#fafafa;
}

.tat-cookiepc-title{
  margin:0;
  font-size:14px;
  font-weight:600;
  text-align:center;
}

.tat-cookiepc-close{
  width:28px;height:28px;
  border:0;background:transparent;
  font-size:20px;line-height:1;
  cursor:pointer;color:#111;
}

.tat-cookiepc-head-spacer{ width:28px;height:28px; }

.tat-cookiepc-body{ padding:12px 14px 14px; }

.tat-cookiepc-intro{
  margin:0 0 12px;
  font-size:12px;
  line-height:1.45;
  color:#5a5a5a;
}

.tat-cookiepc-allow{
  width:100%;
  border:0;
  border-radius:999px;
  padding:12px 16px;
  background:#111;
  color:#fff;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  margin:4px 0 12px;
}

.tat-cookiepc-cats{
  border:1px solid #e2e2e2;
  border-radius:12px;
  overflow:hidden;
  background:#fafafa;
}

.tat-cookiepc-cat + .tat-cookiepc-cat{ border-top:1px solid #e7e7e7; }

.tat-cookiepc-sum{
  list-style:none;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 12px;
  cursor:pointer;
}
.tat-cookiepc-sum::-webkit-details-marker{ display:none; }

.tat-cookiepc-pm{
  width:18px;
  text-align:center;
  font-size:18px;
  line-height:1;
  color:#111;
}
.tat-cookiepc-cat .tat-cookiepc-pm::before{ content:"+"; }
.tat-cookiepc-cat[open] .tat-cookiepc-pm::before{ content:"–"; }

.tat-cookiepc-name{
  font-size:12px;
  font-weight:600;
  color:#111;
}

.tat-cookiepc-switchwrap{
  margin-left:auto;
  position:relative;
  width:44px;height:24px;
  display:inline-block;
}
.tat-cookiepc-switchwrap input{
  position:absolute;
  inset:0;
  margin:0;
  opacity:0;
  cursor:pointer;
}
.tat-cookiepc-switch{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:#d1d1d1;
  transition:background 160ms ease;
}
.tat-cookiepc-switch::after{
  content:"";
  position:absolute;
  top:3px; left:3px;
  width:18px; height:18px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,0.25);
  transition:transform 160ms ease;
}

.tat-cookiepc-switchwrap input:checked + .tat-cookiepc-switch{ background:#111; }
.tat-cookiepc-switchwrap input:checked + .tat-cookiepc-switch::after{ transform:translateX(20px); }

.tat-cookiepc-switchwrap input:checked:disabled + .tat-cookiepc-switch{ background:#d1d1d1; }
.tat-cookiepc-switchwrap input:checked:disabled + .tat-cookiepc-switch::after{ transform:translateX(20px); }
.tat-cookiepc-switchwrap input:disabled{ cursor:not-allowed; }

.tat-cookiepc-desc{
  padding:0 12px 12px 40px;
  font-size:12px;
  line-height:1.45;
  color:#5a5a5a;
}

.tat-cookiepc-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  padding:12px 14px 14px;
  border-top:1px solid #e3e3e3;
  background:#fafafa;
}

.tat-cookiepc-btn{
  border:1px solid #d7d7d7;
  background:#fff;
  border-radius:999px;
  padding:10px 14px;
  font-size:13px;
  font-weight:600;
  color:#111;
  cursor:pointer;
}



/* === ABOUT (Trust Hub): Miniheader + 3x4 Blog Grid + Minifooter ========= */

.is-about-blog .tat-minihead{
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,0.10);
}

.is-about-blog .tat-minihead-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 0;
}

.is-about-blog .tat-minihead-home{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}

.is-about-blog .tat-minihead-logo{
  display:block;
  height:auto;
  max-width:320px;
}

.is-about-blog .tat-minihead-nav{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.is-about-blog .tat-minihead-nav a{
  text-decoration:none;
  color:#111;
  font:500 14px/1.2 Roboto, system-ui, Arial;
}

/* Content spacing */
.is-about-blog .tat-about-wrap{
  padding:18px 0 34px !important;
}

.is-about-blog .tat-about-head{
  text-align:center !important;
  margin:0 auto 16px !important;
}

.is-about-blog .tat-about-intro{
  max-width:980px;
  margin:10px auto 0;
  line-height:1.45;
}

/* Grid 3 x 4 */
.is-about-blog .tat-about-grid-inner{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:18px !important;
  padding-top:10px;
}

.is-about-blog .tat-about-card{
  background:#fff;
  border:1px solid rgba(0,0,0,0.12);
  border-radius:12px;
  overflow:hidden;
}

.is-about-blog .tat-about-card-link{
  display:block;
  color:inherit;
  text-decoration:none;
}

.is-about-blog .tat-about-fig{ margin:0; }

.is-about-blog .tat-about-img{
  width:100%;
  height:190px;
  object-fit:cover;
  display:block;
}

.is-about-blog .tat-about-credit{
  display:block;
  padding:6px 10px 8px;
  text-align:right;
}

.is-about-blog .tat-about-title{
  padding:0 10px;
  margin:8px 0 0;
}

.is-about-blog .tat-about-desc{
  padding:0 10px 10px;
  margin:6px 0 0;
  line-height:1.35;
}

.is-about-blog .tat-about-meta{
  padding:0 10px 14px;
  font-size:12px;
  opacity:0.85;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.is-about-blog .tat-about-dot{ opacity:0.6; }

/* Minifooter */
.is-about-blog .tat-minifooter{
  margin-top:26px;
  background:#fff;
  border-top:1px solid rgba(0,0,0,0.10);
  padding:14px 0 18px;
}

.is-about-blog .tat-minifooter-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.is-about-blog .tat-minifooter-links{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
}

.is-about-blog .tat-minifooter-links a{
  color:#111;
  text-decoration:none;
  border-bottom:1px solid rgba(0,0,0,0.30);
  padding-bottom:1px;
  font:500 13px/1.2 Roboto, system-ui, Arial;
}

.is-about-blog .tat-minifooter-support{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.is-about-blog .tat-minifooter-email{
  color:#111;
  text-decoration:none;
  border-bottom:1px solid rgba(0,0,0,0.30);
  padding-bottom:1px;
  font:500 13px/1.2 Roboto, system-ui, Arial;
}

.is-about-blog .tat-minifooter-copy{
  height:32px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.18);
  background:#fff;
  color:#111;
  font:500 13px/1 Roboto, system-ui, Arial;
  cursor:pointer;
}

/* Responsive */
@media (max-width: 1024px){
  .is-about-blog .tat-about-grid-inner{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
  .is-about-blog .tat-about-img{ height:210px; }
  .is-about-blog .tat-minihead-inner{ justify-content:center; flex-direction:column; }
}

@media (max-width: 560px){
  .is-about-blog .tat-about-grid-inner{
    grid-template-columns:1fr !important;
  }
  .is-about-blog .tat-about-img{ height:210px; }
}
/* === ABOUT blog cards: image must fill card width (no inner box) ========= */

.is-about-blog .tat-about-fig{
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* remove any forced aspect box / contain behavior */
.is-about-blog .tat-about-img{
  display: block !important;
  width: 100% !important;        /* full card width */
  height: auto !important;       /* natural height */
  aspect-ratio: auto !important; /* disable 16:9 box */
  object-fit: unset !important;  /* disable contain/cover box fitting */
  background: transparent !important;
}

/* keep top corners clean with the card radius */
.is-about-blog .tat-about-img{
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
/* ABOUT page: headings + intro must start left (not centered) */
body.is-about .tat-about-head{
  width:100%;
  text-align:left;
  align-items:flex-start;
}

body.is-about .tat-about-head .tat-sectit{
  text-align:left;
  margin-left:0;
  margin-right:0;
}

body.is-about .tat-about-head .tat-about-intro{
  text-align:left;
  margin-left:0;
  margin-right:auto;
  max-width:none;
}


/* === Art Times: Home landing (tat-soon) ================================= */

.tat-visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

.tat-soon-wrap{
  padding: 18px 18px 26px;
}

.tat-soon-top-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}

.tat-soon-brand{
  text-align: center;
}

.tat-soon-logo{
  max-width: 520px;
  width: 100%;
  height: auto;
}

.tat-soon-intro{
  max-width: 880px;
  margin: 10px auto 0;
  line-height: 1.5;
}

.tat-soon-social{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center; /* social buttons side-by-side */
  flex-wrap: wrap;
}

.tat-soon-social-link{
  display: inline-flex;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 8px;
  background: #fff;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.tat-soon-social-icon{
  width: 22px;
  height: 22px;
  display: block;
}

/* Countdown */
.tat-soon-countdown-inner{
  max-width: 1200px;
  margin: 14px auto 0;
  display: flex;
  justify-content: center;
}

.tat-soon-timer{
  display: inline-flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 12px;
  background: #fff;
}

.tat-soon-tile{
  width: 98px;
  text-align: center;
  padding: 10px 10px 8px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fafafa;
}

.tat-soon-num{
  font-size: 40px;
  line-height: 1.0;
  letter-spacing: 0.02em;
  font-weight: 700;
}

.tat-soon-lab{
  font-size: 11px;
  letter-spacing: 0.18em;
  margin-top: 6px;
}

/* Section heading */
.tat-soon-head{
  max-width: 1200px;
  margin: 18px auto 0;
  text-align: left;
}

/* 4-column articles */
.tat-soon-news{
  max-width: 1200px;
  margin: 10px auto 0;
}

.tat-soon-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding: 10px 0 0;
}

.tat-soon-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 12px;
  overflow: hidden;
}

.tat-soon-card-link{
  display: block;
  color: inherit;
  text-decoration: none;
}

.tat-soon-fig{
  margin: 0;
  position: relative;
}

.tat-soon-img{
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
}

.tat-soon-credit{
  display: block;
  padding: 6px 10px 8px;
  text-align: right; /* bottom-right outside media frame */
}

.tat-soon-title{
  padding: 0 10px;
  margin: 6px 0 0;
}

.tat-soon-desc{
  padding: 0 10px 14px;
  margin: 6px 0 0;
  line-height: 1.45;
}

/* Support line */
.tat-soon-support{
  max-width: 1200px;
  margin: 18px auto 0;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.10);
}

.tat-soon-support-inner{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 0 0;
}

.tat-soon-email{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.35);
}

.tat-soon-copy{
  appearance: none;
  border: 1px solid rgba(0,0,0,0.25);
  background: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
}

/* Responsive */
@media (max-width: 1024px){
  .tat-soon-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tat-soon-img{ height: 190px; }
}

@media (max-width: 560px){
  .tat-soon-grid{ grid-template-columns: 1fr; }
  .tat-soon-tile{ width: 90px; }
  .tat-soon-num{ font-size: 36px; }
}

/* === Art Times: Countdown styling ONLY on tiles (not full container) ==== */

.tat-soon-countdown-inner{
  background: transparent !important;
  color: inherit !important;
  border: 0 !important;
}

.tat-soon-timer{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.tat-soon-tile{
  background: #222 !important; /* ONLY the squares */
  border: 1px solid rgba(255,255,255,0.22) !important;
}

.tat-soon-num,
.tat-soon-lab{
  color: #f1c809 !important;
  font-family: Roboto, Arial, sans-serif !important;
}
/* === Landing: Countdown slightly bigger (override at end) === */
.tat-soon-timer{
  gap: 16px !important;
}

.tat-soon-tile{
  width: 145px !important;
  padding: 12px 12px 10px !important;
  border-radius: 12px !important;
}

.tat-soon-num{
  font-size: 60px !important;
  line-height: 1 !important;
}

.tat-soon-lab{
  font-size: 12px !important;
  margin-top: 7px !important;
}

/* Mobile: keep readable but not too large */
@media (max-width: 560px){
  .tat-soon-tile{ width: 98px !important; }
  .tat-soon-num{ font-size: 40px !important; }
}
/* === Landing: spacing rules (40px above + 40px below countdown) === */

/* 40px between the upper text (tagline) and countdown */
.tat-soon-tagline{
  margin-bottom: 40px !important;
  padding-bottom: 0 !important;   /* avoids double spacing */
}

/* remove any existing extra top spacing on countdown (you had 100px) */
.tat-soon-countdown{
  margin-top: 0 !important;
  margin-bottom: 40px !important; /* 40px between countdown and the titles below */
}

/* === Landing: "More news about Art Times" button (below 4 columns) === */
.tat-soon-more{
  padding: 18px 0 0;
  display: flex;
  justify-content: center;  /* center horizontally */
  align-items: center;
  text-align: center;
}

.tat-soon-more-link{
  display: inline-flex;     /* keeps label centered inside button */
  justify-content: center;
  align-items: center;

  background: #000;
  color: #f1c809 !important;   /* text always white */
  border: 1px solid #f1c809;
  padding: 12px 18px;
  text-decoration: none;
  line-height: 1;
  border-radius: 0;

  /* no animation */
  transition: none !important;
  animation: none !important;
}

.tat-soon-more-link:hover,
.tat-soon-more-link:focus,
.tat-soon-more-link:active,
.tat-soon-more-link:visited{
  color: #fff !important;
  background: #000;         /* no hover change */
  text-decoration: none;

  transition: none !important;
  animation: none !important;
}

/* =========================================================
   Landing page: top logo under small header
   - 35px space from header
   - 35px space below
   ========================================================= */

.tat-landing-toplogo{
  max-width: 1200px;
  margin: 25px auto 20px;     /* top 35, bottom 35 */
  padding: 0 18px;            /* same side padding as your layout */
  text-align: center;
}

.tat-landing-toplogo img{
  display: inline-block;
  max-width: 520px;
  width: 100%;
  height: auto;
}

/* Tablet */
@media (max-width: 768px){
  .tat-landing-toplogo{
    margin: 35px auto 35px;
    padding: 0 12px;
  }
  .tat-landing-toplogo img{
    max-width: 420px;
  }
}

/* Mobile */
@media (max-width: 480px){
  .tat-landing-toplogo{
    margin: 35px auto 35px;
    padding: 0 10px;
  }
  .tat-landing-toplogo img{
    max-width: 320px;
  }
}
/* =========================================================
   TAT-SOON — FINAL MOBILE FIX (place at VERY END of custom.css)
   Fixes !important desktop overrides on small screens
   ========================================================= */

/* Small tablet / phones */
@media (max-width: 560px){

  .tat-soon-wrap{ padding: 14px 12px 22px; }

  /* Countdown: allow wrap + reduce sizes */
  .tat-soon-countdown-inner{
    margin: 10px auto 0 !important;
    padding: 0 10px !important;
  }

  .tat-soon-timer{
    display: flex !important;
    flex-wrap: wrap !important;           /* IMPORTANT: wrap on narrow screens */
    justify-content: center !important;
    gap: 10px !important;
  }

  .tat-soon-tile{
    width: 98px !important;
    padding: 10px 10px 8px !important;
    border-radius: 12px !important;
  }

  .tat-soon-num{
    font-size: 40px !important;
    line-height: 1 !important;
  }

  .tat-soon-lab{
    font-size: 11px !important;
    margin-top: 6px !important;
  }

  /* Cards: single column + comfortable spacing */
  .tat-soon-grid{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .tat-soon-img{
    height: 190px !important;
  }

  /* Top logo sizing */
  .tat-landing-toplogo img{
    max-width: 320px !important;
  }
}

/* Very small phones */
@media (max-width: 380px){
  .tat-soon-tile{ width: 88px !important; }
  .tat-soon-num{ font-size: 34px !important; }
  .tat-soon-lab{ font-size: 10px !important; letter-spacing: 0.14em !important; }
}

/* =========================================================
   ABOUT-US PAGE (900px + no dividers + mini header/footer visible)
========================================================= */

.tat-aboutus{
  max-width:900px;
  margin:0 auto;
  padding:22px 16px;
}

/* Top mini header */
.tat-aboutus-topmini{
  margin:0 0 10px;
}
.tat-aboutus-breadcrumb{
  font-size:14px;
  line-height:1.35;
  opacity:0.9;
}
.tat-aboutus-bc-sep{
  margin:0 6px;
  opacity:0.75;
}
.tat-aboutus-bc-current{
  opacity:0.85;
}

/* Head */
.tat-aboutus-h1{
  font-size:40px;
  line-height:1.12;
  margin:0 0 8px;
}
.tat-aboutus-h2{
  font-size:30px;
  line-height:1.18;
  margin:0 0 12px;
}
.tat-aboutus-desc{
  margin:0 0 16px;
  max-width:78ch;
}

/* Hero image (900px container, image 100%) */
.tat-aboutus-figure{
  max-width:900px;
  margin:14px auto 22px;
}
.tat-aboutus-figure img{
  width:100%;
  height:auto;
  display:block;
}

/* Blocks: NO divider lines anywhere */
.tat-aboutus-block{
  padding:16px 0;
  border-top:0 !important;
}

/* Miniheader inside blocks */
.tat-aboutus-minihead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin:0 0 10px;
  border-bottom:0 !important;
  padding-bottom:0;
}
.tat-aboutus-minihead-title{
  margin:0;
}
.tat-aboutus-minihead-note{
  font-size:14px;
  line-height:1.35;
  opacity:0.85;
  white-space:nowrap;
}

/* Paragraph */
.tat-aboutus-p{
  margin:0;
  max-width:92ch;
}

/* Minifooter inside blocks */
.tat-aboutus-minifoot{
  margin-top:12px;
  border-top:0 !important;
  padding-top:0;
  font-size:14px;
  line-height:1.35;
  opacity:0.92;
}

/* Bottom mini footer */
.tat-aboutus-bottommini{
  margin-top:18px;
  border-top:0 !important;
  padding-top:0;
}

/* Links */
.tat-aboutus-link{
  color:#000;
  text-decoration:none;
}
.tat-aboutus-link:hover{
  text-decoration:underline;
}

/* Responsive */
@media (max-width:768px){
  .tat-aboutus{ padding:18px 14px; }
  .tat-aboutus-h1{ font-size:34px; }
  .tat-aboutus-h2{ font-size:26px; }
  .tat-aboutus-minihead{ flex-wrap:wrap; }
  .tat-aboutus-minihead-note{ white-space:normal; }
}
@media (max-width:480px){
  .tat-aboutus-h1{ font-size:30px; }
  .tat-aboutus-h2{ font-size:22px; }
}

/* =========================================================
   TIMES TYPOGRAPHY (SCOPED)
   ONLY:
   - Blog articles (About)    => body.is-blog-article
   - Coming soon (home)       => body.is-soon
   - Support pages            => body.is-support
   ========================================================= */

/* Common: use Times on headings + key title utility classes */
body.is-blog-article h1,
body.is-blog-article h2,
body.is-blog-article h3,
body.is-blog-article h4,
body.is-blog-article .tat-sectit,
body.is-blog-article .tat-title-article,
body.is-blog-article .tat-title-video,
body.is-blog-article .tat-title-book,
body.is-blog-article .tat-title-sidebar,

body.is-soon h1,
body.is-soon h2,
body.is-soon h3,
body.is-soon h4,
body.is-soon .tat-sectit,
body.is-soon .tat-title-article,
body.is-soon .tat-title-video,
body.is-soon .tat-title-book,
body.is-soon .tat-title-sidebar,

body.is-support h1,
body.is-support h2,
body.is-support h3,
body.is-support h4,
body.is-support .tat-sectit,
body.is-support .tat-title-article,
body.is-support .tat-title-video,
body.is-support .tat-title-book,
body.is-support .tat-title-sidebar{
  font-family: "Times New Roman", Times, serif !important;
  font-weight: 400 !important;     /* calmer than 600 */
  letter-spacing: -0.01em;
}

/* -------- Support (largest, like screenshot) -------- */
body.is-support h1,
body.is-support .tat-sectit{
  font-size: 56px !important;
  line-height: 1.08 !important;
}

body.is-support h2{
  font-size: 40px !important;
  line-height: 1.15 !important;
}

body.is-support h3{
  font-size: 28px !important;
  line-height: 1.28 !important;
}

body.is-support h4{
  font-size: 20px !important;
  line-height: 1.45 !important;
}

/* -------- Coming Soon (same visual language) -------- */
body.is-soon .tat-soon-wrap h1,
body.is-soon .tat-soon-wrap .tat-sectit{
  font-size: 56px !important;
  line-height: 1.08 !important;
}

body.is-soon .tat-soon-wrap h2{
  font-size: 40px !important;
  line-height: 1.15 !important;
}

body.is-soon .tat-soon-wrap h3{
  font-size: 28px !important;
  line-height: 1.28 !important;
}

body.is-soon .tat-soon-wrap h4{
  font-size: 20px !important;
  line-height: 1.45 !important;
}

/* Keep countdown tiles as you already set them (Roboto with !important) */

/* -------- Blog (About) -------- */
body.is-blog-article .tat-blog-section-name{
  font-family: "Times New Roman", Times, serif !important;
  font-weight: 400 !important;
  font-size: 26px !important;
  line-height: 1.15 !important;
  letter-spacing: 0.08em !important; /* uppercase label feel */
}

body.is-blog-article .tat-blog-title{
  font-family: "Times New Roman", Times, serif !important;
  font-weight: 400 !important;
  font-size: 52px !important;
  line-height: 1.08 !important;
}

body.is-blog-article .tat-blog-summary{
  font-family: "Times New Roman", Times, serif !important;
  font-weight: 400 !important;
  font-size: 22px !important;
  line-height: 1.45 !important;
}

body.is-blog-article .tat-blog-langtitle{
  font-family: "Times New Roman", Times, serif !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
}

body.is-blog-article .tat-blog-body p{
  font-family: "Times New Roman", Times, serif !important;
  font-size: 18px !important;
  line-height: 1.65 !important;
}

/* Responsive (reduce only on small screens) */
@media (max-width: 768px){
  body.is-support h1,
  body.is-support .tat-sectit,
  body.is-soon .tat-soon-wrap h1,
  body.is-soon .tat-soon-wrap .tat-sectit{
    font-size: 44px !important;
  }

  body.is-support h2,
  body.is-soon .tat-soon-wrap h2{
    font-size: 34px !important;
  }

  body.is-blog-article .tat-blog-title{
    font-size: 42px !important;
  }
}

@media (max-width: 480px){
  body.is-support h1,
  body.is-support .tat-sectit,
  body.is-soon .tat-soon-wrap h1,
  body.is-soon .tat-soon-wrap .tat-sectit{
    font-size: 38px !important;
  }

  body.is-blog-article .tat-blog-title{
    font-size: 36px !important;
  }

  body.is-blog-article .tat-blog-body p{
    font-size: 17px !important;
  }
}
/* =========================================================
   BLOG HERO TOP (TITLE/SUMMARY/SHARE ABOVE IMAGE)
   + SELECTION BLOCK
   + HIDE KEYWORDS (keep in code)
   Append at END of assets/css/custom.css
   ========================================================= */

/* Hero top (above image) */
.tat-blog-hero-top{
  margin: 18px 0 14px 0;
}

.tat-blog-hero-top .tat-blog-title{
  margin: 0 0 10px 0;
}

.tat-blog-hero-top .tat-blog-summary{
  margin: 0 0 14px 0;
}

/* Share block (top + end share) */
.tat-blog-share-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tat-blog-share-btn{
  border: 1px solid rgba(0,0,0,0.30);
  background: transparent;
  padding: 8px 12px;
  cursor: pointer;
}

.tat-blog-share-btn:hover,
.tat-blog-share-btn:focus{
  border-color: rgba(0,0,0,0.55);
}

/* Hero image under the hero top */
.tat-blog-figure.tat-blog-hero img{
  display: block;
  width: 100%;
  height: auto;
}

/* Selection block (directly after image) */
.tat-blog-selection{
  margin: 18px 0 24px 0;
  padding: 16px 18px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
  border-radius: 10px;
}

.tat-blog-selection ul{ margin: 10px 0 0 18px; }
.tat-blog-selection li{ margin: 6px 0; }

/* Hide keywords block but keep it in code */
.tat-blog-keywords{
  display: none !important;
}

/* Tablet / Mobile */
@media (max-width: 768px){
  .tat-blog-hero-top{ margin-top: 14px; }
  .tat-blog-hero-top .tat-blog-title{ margin-bottom: 8px; }
  .tat-blog-hero-top .tat-blog-summary{ margin-bottom: 12px; }
  .tat-blog-selection{ padding: 14px 14px; }
}
/* 5px black divider between partnership models */
.tat-partner-divider{
  border: 0;
  height: 5px;
  background: #000;
  margin: 26px 0;
}
/* === Art Times: tat-sectit should be Mixed Case (no ALL CAPS) === */
.tat-sectit{
  text-transform: none !important;
}
/* =========================================================
   SMALL HEADER — tat-sh (SINGLE CLEAN FINAL BLOCK)
   - Single small logo everywhere (no desktop/mobile swap)
   - 1200px container, bottom border
   - Follow left, logo centered, burger right (no border)
   - Dropdowns directly under header (follow left / menu right)
   - Roboto typography (scoped), black links
   - Panel shadow, social icons bigger, full-width hover, compact spacing
   - Responsive: 1024 / 768 / 480
   ========================================================= */

/* ---------- Root ---------- */
.tat-sh{
  position: relative;
  z-index: 1000;
  background: #fff;
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
}
.tat-sh *{ font-family: inherit; font-synthesis: none; }

/* ---------- Bar + container ---------- */
.tat-sh__bar{
  background: #fff;
  border-bottom: 1px solid #d9d9d9;
}
.tat-sh__container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 18px;
}

/* 3 columns */
.tat-sh__bar .tat-sh__container{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 18px;
  position: relative; /* dropdown anchor */
}
.tat-sh__left{ justify-self: start; }
.tat-sh__center{ justify-self: center; }
.tat-sh__right{ justify-self: end; }

/* ---------- Logo (single small logo) ---------- */
.tat-sh__logo{
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.tat-sh__logo img{
  display: block;
  width: 54px;
  max-width: 54px;
  height: auto;
}

/* ---------- Buttons ---------- */
.tat-sh__btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: #111;
  font-weight: 400;
}
.tat-sh__btn:focus{ outline: 2px solid #111; outline-offset: 2px; }

.tat-sh__btn--follow{
  background: #f2f2f2;
  border: 1px solid #dedede;
  min-width: 150px;
}
.tat-sh__plus{
  font-size: 20px;
  transform: translateY(-1px);
}

/* Burger button: no border */
.tat-sh__btn--burger{
  width: 56px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  justify-content: center;
}

/* Burger icon */
.tat-sh__burger{
  width: 30px;
  height: 20px;
  display: inline-block;
  position: relative;
  background: linear-gradient(#111,#111) center/30px 3px no-repeat;
}
.tat-sh__burger::before,
.tat-sh__burger::after{
  content:"";
  position: absolute;
  left: 0;
  width: 30px;
  height: 3px;
  background: #111;
  border-radius: 2px;
}
.tat-sh__burger::before{ top: 0; }
.tat-sh__burger::after{ bottom: 0; }

/* ---------- Dropdown wrapper (directly under header) ---------- */
.tat-sh__dropwrap{
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 1001;
  background: transparent;
  pointer-events: none;
}

/* Keep dropdown aligned to 1200px */
.tat-sh__drops{
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 18px 18px;
  position: relative;
  pointer-events: none;
}
.tat-sh__panel{ pointer-events: auto; }

/* Panels */
.tat-sh__panel--follow{
  position: absolute;
  left: 18px;
  top: 10px;
  width: 320px;
  max-width: calc(100vw - 36px);
}
.tat-sh__panel--menu{
  position: absolute;
  right: 18px;
  top: 10px;
  width: 360px;
  max-width: calc(100vw - 36px);
}

/* Panel box (border + shadow) */
.tat-sh__panelbox{
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
}

/* ---------- Links (always black) ---------- */
.tat-sh__dropwrap a,
.tat-sh__dropwrap a:link,
.tat-sh__dropwrap a:visited,
.tat-sh__dropwrap a:hover,
.tat-sh__dropwrap a:active{
  color: #111;
  text-decoration: none;
}

/* ---------- Lists ---------- */
.tat-sh__list{ list-style: none; margin: 0; padding: 0; }
.tat-sh__muted{ font-size: 14px; opacity: .85; margin-left: 6px; font-weight: 400; }
.tat-sh__spacer{ height: 6px; }

/* ---------- Social dropdown (Follow) ---------- */
.tat-sh__list--social{
  display: grid;
  row-gap: 2px;
  text-align: left;
  font-size: 18px;
  font-weight: 400;
}

.tat-sh__slink{
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 400;
}

/* Full-width hover to panel edges (only follow dropdown) */
#tat-sh-follow .tat-sh__slink{
  margin-left: -18px;
  margin-right: -18px;
  padding: 7px 18px;
  line-height: 1.2;
  border-radius: 0;
}
#tat-sh-follow .tat-sh__slink:hover{
  background: #f8f8f8;
}

/* Bigger social icons */
.tat-sh__sico{
  width: 36px;
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
}
.tat-sh__sico img{
  width: 32px;
  height: 32px;
  display: block;
  border: 0;
  background: transparent;
}

/* ---------- Menu dropdown (Burger) ---------- */
.tat-sh__list--menu{
  display: grid;
  row-gap: 14px;
  font-size: 18px;
  font-weight: 400;
}

.tat-sh__mlink{
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 12px;
  align-items: center;
  font-weight: 400;
}

.tat-sh__ico img{
  width: 28px;
  height: 28px;
  display: block;
  object-fit: contain;
  border: 0;
  background: transparent;
}

.tat-sh__divider{
  height: 1px;
  background: #111;
  opacity: .85;
  margin: 8px 0 10px;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1024px){
  .tat-sh__container{ padding: 12px 14px; }
  .tat-sh__btn{ height: 42px; font-size: 18px; }
  .tat-sh__btn--follow{ min-width: 140px; }

  .tat-sh__drops{ padding: 10px 14px 16px; }
  .tat-sh__panel--follow{ width: 300px; left: 14px; }
  .tat-sh__panel--menu{ width: 340px; right: 14px; }

  #tat-sh-follow .tat-sh__slink{ padding: 7px 18px; }
}

@media (max-width: 768px){
  .tat-sh__container{ padding: 10px 12px; }
  .tat-sh__btn{ height: 40px; font-size: 17px; padding: 0 14px; }
  .tat-sh__btn--burger{ width: 52px; }

  .tat-sh__drops{ padding: 10px 12px 14px; }
  .tat-sh__panel--follow{ width: 280px; left: 12px; }
  .tat-sh__panel--menu{ width: 320px; right: 12px; }

  .tat-sh__logo img{ width: 50px; max-width: 50px; }
  .tat-sh__sico{ width: 34px; min-width: 34px; height: 34px; }
  .tat-sh__sico img{ width: 30px; height: 30px; }
}

@media (max-width: 480px){
  .tat-sh__container{ padding: 10px; }
  .tat-sh__btn{ height: 38px; font-size: 16px; padding: 0 12px; }
  .tat-sh__btn--follow{ min-width: 130px; }
  .tat-sh__btn--burger{ width: 48px; }

  /* Guarantee room for follow + logo + burger */
  .tat-sh__bar .tat-sh__container{
    grid-template-columns: 132px 1fr 56px;
    column-gap: 10px;
  }

  .tat-sh__drops{ padding: 10px 10px 12px; }
  .tat-sh__panel--follow{ width: 270px; left: 10px; }
  .tat-sh__panel--menu{ width: 300px; right: 10px; }

  .tat-sh__logo img{ width: 46px; max-width: 46px; }

  #tat-sh-follow .tat-sh__slink{ padding: 7px 18px; }
}
/* =========================================================
   FIX: single logo-a.webp (you kept class --mobile)
   Ensure it is ALWAYS visible
   ========================================================= */

.tat-sh__logo{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:0 !important;
}

.tat-sh__logo-img--mobile{
  display:block !important;     /* overrides any old display:none */
  width:54px !important;        /* smaller look */
  max-width:54px !important;
  height:auto !important;
}

/* Tablet */
@media (max-width: 768px){
  .tat-sh__logo-img--mobile{
    width:50px !important;
    max-width:50px !important;
  }
}

/* Mobile */
@media (max-width: 480px){
  .tat-sh__logo-img--mobile{
    width:46px !important;
    max-width:46px !important;
  }
}
/* =========================================================
   SMALL HEADER — Final UI polish
   - Use Roboto (loaded in small-header.php)
   - Remove black focus border on click (Follow/Burger)
   ========================================================= */

/* Roboto for the whole small header */
.tat-sh,
.tat-sh *{
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
  font-synthesis: none !important;
  font-weight: 400 !important;
}

/* Remove any click/focus black border / outline for header buttons */
.tat-sh__btn{
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

.tat-sh__btn:focus,
.tat-sh__btn:focus-visible,
.tat-sh__btn:active{
  outline: none !important;
  box-shadow: none !important;
}

/* If your browser adds a focus ring to the inner elements */
.tat-sh__btn *:focus,
.tat-sh__btn *:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* Keep burger clean */
.tat-sh__btn--burger{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Follow stays grey (no border change on click) */
.tat-sh__btn--follow{
  background:#f2f2f2 !important;
  border: 1px solid #dedede !important;
}
.tat-sh__btn--follow:active,
.tat-sh__btn--follow:focus,
.tat-sh__btn--follow:focus-visible{
  border: 1px solid #dedede !important;
  background:#f2f2f2 !important;
}

/* =========================================================
   SUPLOG (Support + Blog detail pages)
   Global page class: .suplog
========================================================= */

/* Page background */
body.suplog{
  background:#fafafa;
}

/* Outer wrapper under small header */
body.suplog .suplog-wrap{
  background:#fafafa;
  padding-top:25px;
  padding-bottom:40px;
}

/* Breadcrumb row (grey zone) */
body.suplog .suplog-breadcrumb-row{
  background:#fafafa;
  width:100%;
  padding:10px 0 12px;
}

body.suplog .suplog-breadcrumb{
  max-width:900px;
  margin:0 auto;
  padding:0 16px;
  font-family:var(--tat-font-text, "Times New Roman", Times, serif);
  font-size:13px;
  line-height:1.35;
  color:#222;
}

body.suplog .suplog-breadcrumb a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid transparent;
}
body.suplog .suplog-breadcrumb a:hover{
  border-bottom-color:#000;
}

/* Main container (1000px, white, square corners) */
body.suplog .suplog-container{
  max-width:900px;
  margin:0 auto;
  padding:0 16px;
}

body.suplog .suplog-content{
  background:#ffffff;
  border:1px solid #d9d9d9;
  border-radius:0;
  padding:34px 40px 40px;
}

/* Headings */
body.suplog .suplog-content h1{
  font-family:var(--tat-font-title, "Times New Roman", Times, serif);
  font-weight:700;
  font-size:34px;
  line-height:1.12;
  margin:0 0 14px;
  color:#111;
}

body.suplog .suplog-content h2{
  font-family:var(--tat-font-title, "Times New Roman", Times, serif);
  font-weight:700;
  font-size:20px;
  line-height:1.25;
  margin:0 0 18px;
  color:#111;
}

body.suplog .suplog-content h3{
  font-family:var(--tat-font-title, "Times New Roman", Times, serif);
  font-weight:700;
  font-size:16px;
  line-height:1.25;
  margin:22px 0 10px;
  color:#111;
}

/* Text */
body.suplog .suplog-content p,
body.suplog .suplog-content li{
  font-family:var(--tat-font-text, "Times New Roman", Times, serif);
  font-size:16px;
  line-height:1.7;
  color:#1a1a1a;
}

/* Article header block */
body.suplog .suplog-article-header{
  margin:18px 0;
  padding:12px 0;
  border-top:1px solid #e6e6e6;
  border-bottom:1px solid #e6e6e6;
}

/* Media */
body.suplog .suplog-media{
  margin:18px 0;
}
body.suplog .suplog-media img{
  display:block;
  width:100%;
  height:auto;
  border-radius:0;
}

body.suplog .tat-credit-h6{
  font-family:var(--tat-font-text, "Times New Roman", Times, serif);
  font-size:12px;
  line-height:1.3;
  margin-top:6px;
  color:#333;
  text-align:right;
}

/* Tags */
body.suplog .suplog-tags{
  margin:26px 0 10px;
  padding-top:16px;
  border-top:1px solid #eaeaea;
}

body.suplog .suplog-tags a{
  display:inline-block;
  margin:0 8px 8px 0;
  padding:6px 10px;
  background:#f3f3f3;
  color:#111;
  text-decoration:none;
  font-size:13px;
}

body.suplog .suplog-tags a:hover{
  background:#eaeaea;
}

/* FAQ (no accordion) */
body.suplog .suplog-faq{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid #eaeaea;
}

body.suplog .suplog-faq-item{
  padding:14px 0;
  border-bottom:1px solid #efefef;
}

body.suplog .suplog-faq-q{
  font-family:var(--tat-font-title, "Times New Roman", Times, serif);
  font-weight:700;
  font-size:15px;
  margin-bottom:6px;
  color:#111;
}

body.suplog .suplog-faq-a{
  font-size:15px;
  line-height:1.65;
  color:#1a1a1a;
}

/* Links */
body.suplog .suplog-content a{
  color:#111;
  text-decoration:none;
  border-bottom:1px solid transparent;
}
body.suplog .suplog-content a:hover{
  border-bottom-color:#000;
}

/* Responsive */
@media (max-width:1024px){
  body.suplog .suplog-content{
    padding:28px;
  }
  body.suplog .suplog-content h1{
    font-size:30px;
  }
}

@media (max-width:768px){
  body.suplog .suplog-content{
    padding:22px 18px;
  }
  body.suplog .suplog-content h1{
    font-size:26px;
  }
  body.suplog .suplog-content h2{
    font-size:18px;
  }
}

@media (max-width:480px){
  body.suplog .suplog-container{
    padding:0 12px;
  }
  body.suplog .suplog-content{
    padding:18px 14px;
  }
  body.suplog .suplog-content p,
  body.suplog .suplog-content li{
    font-size:15px;
  }
}
/* =========================================================
   SUPPORT INDEX (screenshot reconstruction)
   ========================================================= */

.tat-support { padding: 44px 0 70px; }
.tat-support__wrap { max-width: 1200px; margin: 0 auto; padding: 0 18px; }

.tat-support__sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.tat-support__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 0 0 18px;
}

.tat-support__panel,
.tat-support__card {
  border: 1px solid #e6e6e6;
  background: #fff;
}

.tat-support__panel { min-height: 220px; padding: 28px 26px; }
.tat-support__panel--topics { padding: 22px 26px 26px; }

.tat-support__title,
.tat-support__cardTitle {
  margin: 0 0 14px;
  font-family: var(--tat-font-title);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #111;
}

.tat-support__title { font-size: 56px; line-height: 1.02; }
.tat-support__cardTitle { font-size: 56px; line-height: 1.02; padding: 26px 26px 4px; }

.tat-support__lead {
  margin: 0 0 18px;
  max-width: 520px;
  font-size: 16px;
  line-height: 1.55;
  color: #222;
  font-family: var(--tat-font-text);
}

.tat-support__btn {
  display: inline-block;
  padding: 10px 16px;
  background: #111;
  color: #fff;
  text-decoration: none;
  border: 1px solid #111;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--tat-font-text);
}

.tat-support__btn:hover { opacity: 0.92; }

.tat-support__topicsTitle {
  margin: 0 0 14px;
  font-family: var(--tat-font-title);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 0.02em;
  color: #111;
}

.tat-support__topicsGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 40px;
  align-items: start;
  margin-top: 4px;
}

.tat-support__topic {
  display: inline-block;
  text-decoration: none;
  color: #111;
  font-size: 14px;
  line-height: 1.35;
  font-family: var(--tat-font-text);
}

.tat-support__topic:hover { text-decoration: underline; }

.tat-support__bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.tat-support__list { padding: 0 26px 22px; }

.tat-support__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid #e6e6e6;
  text-decoration: none;
  color: #111;
  font-family: var(--tat-font-text);
}

.tat-support__row:first-child { border-top: 0; }

.tat-support__rowText { font-size: 14px; line-height: 1.2; }
.tat-support__chev { font-size: 18px; line-height: 1; color: #777; }

.tat-support__row:hover .tat-support__rowText { text-decoration: underline; }
.tat-support__row:hover .tat-support__chev { color: #111; }

@media (max-width: 1024px) {
  .tat-support__title,
  .tat-support__cardTitle { font-size: 48px; }
  .tat-support__panel { min-height: 210px; }
}

@media (max-width: 768px) {
  .tat-support { padding: 28px 0 54px; }
  .tat-support__top,
  .tat-support__bottom { grid-template-columns: 1fr; }
  .tat-support__title,
  .tat-support__cardTitle { font-size: 44px; }
  .tat-support__topicsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
}

@media (max-width: 480px) {
  .tat-support__panel { padding: 22px 18px; }
  .tat-support__panel--topics { padding: 18px 18px 20px; }
  .tat-support__cardTitle { padding: 22px 18px 4px; }
  .tat-support__list { padding: 0 18px 18px; }
  .tat-support__title,
  .tat-support__cardTitle { font-size: 38px; }
  .tat-support__topicsGrid { grid-template-columns: 1fr; gap: 10px; }
}


/* ============================================================
   MINI FOOTER (tat-mf)
   Paste at END of: /thearttimes/assets/css/custom.css
   Layout: center-out (starts centered, grows left + right)
   Font: Roboto (scoped only to mini-footer)
   ============================================================ */

.tat-mf{
  width:100%;
  margin:0;
  padding:0;
  background:#fff;
  border-top:1px solid #e6e6e6;
}

/* Roboto only inside mini footer (does not affect global typography) */
.tat-mf,
.tat-mf *{
  font-family:Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

.tat-mf__container{
  max-width:1200px;
  margin:0 auto;
  padding:14px 18px;
  box-sizing:border-box;
}

.tat-mf__nav{
  width:100%;
}

.tat-mf__list{
  list-style:none;
  margin:0;
  padding:0;

  display:flex;
  flex-wrap:wrap;
  justify-content:center; /* center-out */
  align-items:center;
  gap:12px 18px;
}

.tat-mf__item{
  margin:0;
  padding:0;
}

.tat-mf__link{
  display:inline-block;
  padding:2px 0;

  color:#111;
  text-decoration:none;
  border-bottom:1px solid transparent;

  font-size:14px;
  line-height:1.2;
  font-weight:400;
}

.tat-mf__link:hover{
  border-bottom-color:#111;
}

.tat-mf__meta{
  margin-top:10px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.tat-mf__copy{
  font-size:12px;
  line-height:1.2;
  font-weight:400;
  color:#666;
}

/* Tablet */
@media (max-width:1024px){
  .tat-mf__container{ padding:14px 16px; }
  .tat-mf__list{ gap:10px 14px; }
}

/* Mini tablet */
@media (max-width:768px){
  .tat-mf__link{ font-size:13px; }
}

/* Mobile */
@media (max-width:480px){
  .tat-mf__container{ padding:12px 14px; }
  .tat-mf__list{ gap:10px 12px; }
  .tat-mf__meta{ margin-top:8px; }
}

/* =========================================================
   Art Times — Search (scoped)
   Applies to: .tat-search-wrap / #tatSearchApp
   Goal: Roboto everywhere on search UI, big black button, shadowed panel
   ========================================================= */

/* Roboto everywhere inside Search UI (works even if body class fails) */
.tat-search-wrap,
.tat-search-wrap *{
  font-family: "Roboto", Arial, sans-serif !important;
}

body.is-search,
body.is-search *{
  font-family: "Roboto", Arial, sans-serif !important;
}

/* Page wrap */
.tat-search-wrap{
  width:100%;
  min-height:100vh;
  background:#fafafa;
  padding:24px 16px 56px;
  box-sizing:border-box;
}

.tat-search-wrap .tat-search{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  box-sizing:border-box;
}

.tat-search-wrap .tat-sectit{
  margin:0 0 14px;
}

/* Panel (search bar container) */
.tat-search-wrap .tat-search-panel{
  background:#ffffff;
  border:1px solid #d8d8d8;
  border-radius:12px;
  padding:16px;
  box-sizing:border-box;
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

.tat-search-wrap .tat-search-panel .tat-title-sidebar{
  margin:0 0 12px;
}

/* Main search row */
.tat-search-wrap .tat-search-row--main{
  margin-bottom:12px;
}

.tat-search-wrap .tat-search-label{
  display:block;
  font-size:12px;
  line-height:1.2;
  margin:0 0 6px;
  color:#111;
}

.tat-search-wrap .tat-search-input{
  width:100%;
  height:52px;
  padding:10px 14px;
  border:1px solid #cfcfcf;
  border-radius:12px;
  background:#ffffff;
  color:#111;
  box-sizing:border-box;
  outline:none;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}

.tat-search-wrap .tat-search-input:focus{
  border-color:#9a9a9a;
}

/* Scope checkboxes */
.tat-search-wrap .tat-search-scopes{
  border:0;
  padding:0;
  margin:10px 0 14px;
}

.tat-search-wrap .tat-search-legend{
  margin:0 0 8px;
  font-size:12px;
  color:#111;
}

.tat-search-wrap .tat-scope{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 14px 10px 0;
  user-select:none;
}

.tat-search-wrap .tat-scope input[type="checkbox"]{
  width:16px;
  height:16px;
  margin:0;
}

/* Filters row */
.tat-search-wrap .tat-search-row--filters{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-end;
}

.tat-search-wrap .tat-search-field{
  flex:1 1 260px;
  min-width:220px;
}

.tat-search-wrap .tat-search-field--small{
  flex:0 0 160px;
  min-width:160px;
}

.tat-search-wrap .tat-search-select{
  width:100%;
  height:52px;
  padding:10px 14px;
  border:1px solid #cfcfcf;
  border-radius:12px;
  background:#ffffff;
  color:#111;
  box-sizing:border-box;
  outline:none;
}

.tat-search-wrap .tat-search-select:focus{
  border-color:#9a9a9a;
}

/* Actions + Buttons */
.tat-search-wrap .tat-search-actions{
  flex:0 0 auto;
  min-width:190px;
}

.tat-search-wrap .tat-search-btn{
  height:52px;
  padding:0 26px;
  border:1px solid #000;
  border-radius:12px;
  background:#000;     /* black button */
  color:#fff;          /* white text */
  cursor:pointer;
  font-size:16px;
  line-height:52px;
  white-space:nowrap;
  font-weight:600;
}

.tat-search-wrap .tat-search-btn:hover{
  background:#111;
}

/* Secondary button (Load more) */
.tat-search-wrap .tat-search-btn--secondary{
  background:#fff;
  color:#111;
  border-color:#cfcfcf;
}

.tat-search-wrap .tat-search-btn--secondary:hover{
  background:#f2f2f2;
}

/* Meta / Total */
.tat-search-wrap .tat-search-meta{
  margin:14px 0 10px;
  padding:0 2px;
}

.tat-search-wrap .tat-search-meta .tat-title-sidebar{
  margin:0 0 6px;
}

/* Results */
.tat-search-wrap .tat-search-results{
  background:transparent;
  margin-top:10px;
}

.tat-search-wrap .tat-search-empty{
  background:#ffffff;
  border:1px solid #d8d8d8;
  border-radius:12px;
  padding:16px;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}

/* Prepared result cards */
.tat-search-wrap .tat-result-item{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:14px;
  align-items:start;
  background:#ffffff;
  border:1px solid #d8d8d8;
  border-radius:12px;
  padding:14px;
  margin:0 0 12px;
  box-sizing:border-box;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}

.tat-search-wrap .tat-result-media{
  width:140px;
  height:96px;
  border-radius:10px;
  overflow:hidden;
  background:#f3f3f3;
}

.tat-search-wrap .tat-result-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.tat-search-wrap .tat-result-body{
  min-width:0;
}

.tat-search-wrap .tat-result-title{
  margin:0 0 6px;
}

.tat-search-wrap .tat-result-desc{
  margin:0 0 10px;
}

.tat-search-wrap .tat-result-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  font-size:12px;
}

.tat-search-wrap .tat-result-pill{
  display:inline-flex;
  align-items:center;
  padding:2px 10px;
  border:1px solid #cfcfcf;
  border-radius:999px;
  background:#ffffff;
}

/* Responsive */
@media (max-width:768px){
  .tat-search-wrap{
    padding:18px 12px 44px;
  }
  .tat-search-wrap .tat-search-field,
  .tat-search-wrap .tat-search-field--small{
    flex:1 1 100%;
    min-width:0;
  }
  .tat-search-wrap .tat-search-actions{
    width:100%;
    min-width:0;
  }
  .tat-search-wrap .tat-search-btn{
    width:100%;
  }
  .tat-search-wrap .tat-result-item{
    grid-template-columns:110px 1fr;
  }
  .tat-search-wrap .tat-result-media{
    width:110px;
    height:84px;
  }
}

@media (max-width:480px){
  .tat-search-wrap .tat-result-item{
    grid-template-columns:1fr;
  }
  .tat-search-wrap .tat-result-media{
    width:100%;
    height:180px;
  }
}
/* =========================================================
   Search: Button double width (override)
   ========================================================= */
.tat-search-wrap .tat-search-actions{
  min-width: 380px;   /* was 190px → jetzt ~doppelt */
}

@media (max-width: 768px){
  .tat-search-wrap .tat-search-actions{
    min-width: 0;
    width: 100%;
  }
  .tat-search-wrap .tat-search-btn{
    width: 100%;
  }
}
/* =========================================================
   Search: Make button ~2x wider (FORCE)
   Paste at the VERY END of custom.css
   ========================================================= */
body.is-search .tat-search-wrap .tat-search-row--filters .tat-search-actions{
  flex: 0 0 380px !important;   /* fixed width block */
  width: 380px !important;
  min-width: 380px !important;
}

body.is-search .tat-search-wrap .tat-search-row--filters .tat-search-actions .tat-search-btn{
  display: block !important;
  width: 100% !important;       /* button fills the 380px block */
  min-width: 380px !important;  /* extra safety */
}

/* keep mobile full width */
@media (max-width: 768px){
  body.is-search .tat-search-wrap .tat-search-row--filters .tat-search-actions{
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  body.is-search .tat-search-wrap .tat-search-row--filters .tat-search-actions .tat-search-btn{
    width: 100% !important;
    min-width: 0 !important;
  }
}
/* =========================================================
   Search: FORCE button to double width (no body-class dependency)
   ========================================================= */
#tatSearchApp .tat-search-row--filters .tat-search-actions{
  flex: 0 0 380px !important;
  width: 380px !important;
  min-width: 380px !important;
}

#tatSearchApp .tat-search-row--filters .tat-search-actions .tat-search-btn{
  display:block !important;
  width:100% !important;
}

/* Mobile stays full width */
@media (max-width:768px){
  #tatSearchApp .tat-search-row--filters .tat-search-actions{
    flex: 1 1 100% !important;
    width:100% !important;
    min-width:0 !important;
  }
  #tatSearchApp .tat-search-row--filters .tat-search-actions .tat-search-btn{
    width:100% !important;
  }
}
/* =========================================================
   Search: Select arrow with equal inner spacing (left = right)
   Scope: Search only
   ========================================================= */

/* Remove native arrow + draw our own arrow with right padding = left padding */
#tatSearchApp .tat-search-select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* keep your existing left padding; mirror it on the right for arrow position */
  padding-left: 14px !important;
  padding-right: 42px !important; /* space for arrow + same visual inset */

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23111' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center; /* EXACT right inset = 14px */
  background-size: 14px 14px;
}

/* Hide old IE/Edge legacy expand arrow (safety) */
#tatSearchApp .tat-search-select::-ms-expand{
  display:none;
}

/* Search: 1px separator between results */
#tatSearchResults .tat-search-item + .tat-search-item{
  border-top: 1px solid #000;
  padding-top: 12px;
  margin-top: 12px;
}

/* =========================
   Art Times — 404 Page
   ========================= */
.tat-404{
  background:#fafafa;
  width:100%;
}

.tat-404__container{
  max-width:1200px;
  margin:0 auto;
  padding:48px 24px;
  display:grid;
  grid-template-columns: 1.05fr 0.95fr; /* text left, image right */
  gap:40px;
  align-items:center;
}

.tat-404__kicker{
  margin:0 0 10px 0;
  font-size:14px;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.tat-404__headline{
  margin:0 0 16px 0;
  font-size:44px;
  line-height:1.05;
}

.tat-404__lead{
  margin:0 0 18px 0;
  font-size:18px;
  line-height:1.6;
}

.tat-404__prompt{
  margin:18px 0 10px 0;
  font-size:16px;
}

.tat-404__nav{
  display:flex;
  flex-wrap:wrap;
  gap:12px 16px;
  margin:0 0 18px 0;
}

.tat-404__link{
  display:inline-block;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,0.12);
  background:#fff;
  text-decoration:none;
  color:#000;
  border-radius:10px;
}

.tat-404__link:hover{
  border-color:rgba(0,0,0,0.32);
}

.tat-404__note{
  margin:0 0 14px 0;
  font-size:16px;
  line-height:1.6;
}

.tat-404__support{
  margin:0 0 18px 0;
  font-size:16px;
  line-height:1.6;
}

.tat-404__mailto{
  color:#000;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.tat-404__actions{
  margin-top:8px;
}

.tat-404__btn{
  appearance:none;
  border:0;
  background:#000;
  color:#fff;
  padding:12px 18px;
  border-radius:12px;
  cursor:pointer;
  font-size:14px;
  letter-spacing:0.02em;
}

.tat-404__btn:hover{
  opacity:0.92;
}

.tat-404__figure{
  margin:0;
}

.tat-404__img{
  width:100%;
  height:auto;
  display:block;
  border-radius:16px;
}

.tat-404 .tat-credit-h6{
  margin-top:8px;
  text-align:right;
}

/* Tablet */
@media (max-width: 1024px){
  .tat-404__container{
    grid-template-columns: 1fr;
    gap:22px;
  }
  .tat-404__headline{
    font-size:38px;
  }
}

/* Mobile */
@media (max-width: 480px){
  .tat-404__container{
    padding:34px 16px;
  }
  .tat-404__headline{
    font-size:32px;
  }
  .tat-404__nav{
    gap:10px;
  }
  .tat-404__link{
    width:100%;
    text-align:left;
  }
}
/* File: /assets/css/custom.css
   Add this block at the END of your existing custom.css
*/

/* SUPPORT FORMS (Advertising / Finish) */
body.tat-support {
  background: #fafafa;
}

.tat-support-logo {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  text-decoration: none;
}

.tat-support-logo img {
  display: block;
  width: 26px;
  height: 26px;
}

.tat-support-wrap {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 84px 16px 64px;
  box-sizing: border-box;
}

.tat-support-card {
  width: 100%;
  max-width: 920px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  padding: 0;
  box-sizing: border-box;
}

.tat-support-board {
  background: #000000;
  padding: 18px 22px;
  border-bottom: 1px solid #d9d9d9;
}

.tat-support-board .tat-sectit {
  color: #ffffff;
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
}

.tat-support-form {
  padding: 22px;
}

.tat-support-fieldset {
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid #d9d9d9;
}

.tat-support-fieldset legend {
  padding: 0 8px;
}

.tat-support-label {
  display: block;
  margin: 10px 0 6px;
  font-size: 13px;
}

.tat-support-input,
.tat-support-textarea,
.tat-support-form select,
.tat-support-form input[type="text"],
.tat-support-form input[type="email"],
.tat-support-form input[type="tel"],
.tat-support-form input[type="url"],
.tat-support-form input[type="file"],
.tat-support-form textarea {
  width: 100%;
  border: 1px solid #d9d9d9;
  padding: 10px 12px;
  border-radius: 0;
  font-size: 14px;
  box-sizing: border-box;
  background: #fff;
}

.tat-support-textarea {
  resize: vertical;
  min-height: 160px;
}

.tat-support-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.tat-checkgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.tat-check {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  border: 1px solid #d9d9d9;
  padding: 10px;
  box-sizing: border-box;
}

.tat-check input {
  margin-top: 2px;
}

.tat-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 12px;
}

.tat-linkrow {
  display: grid;
  grid-template-columns: 40px 220px 1fr;
  gap: 10px;
  align-items: center;
}

.tat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #000;
  padding: 10px 14px;
  background: #000;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
}

.tat-btn:focus {
  outline: 2px solid #000;
  outline-offset: 2px;
}

.tat-btn:hover {
  filter: brightness(0.92);
}

.tat-btn-secondary {
  background: #fff;
  color: #000;
}

.tat-btn-secondary:hover {
  background: #f2f2f2;
}

.tat-btn-remove {
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
}

.tat-support-actions {
  padding: 0 22px 26px;
}

.tat-support-counter {
  margin-top: 8px;
  font-size: 13px;
  color: #333;
}

.tat-consent {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 14px;
}

.tat-support-alert {
  margin: 18px 22px 0;
  border: 1px solid #d9d9d9;
  background: #fff7f7;
  padding: 14px 16px;
}

.tat-support-alert ul {
  margin: 10px 0 0;
  padding-left: 18px;
}

.tat-hidden {
  display: none !important;
}

.tat-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.tat-finish {
  padding: 26px 22px 34px;
  text-align: center;
}

.tat-finish-icon svg {
  fill: #0a8f3a;
}

.tat-muted {
  opacity: 0.78;
}

/* Responsive */
@media (max-width: 900px) {
  .tat-support-row { grid-template-columns: 1fr; }
  .tat-linkrow { grid-template-columns: 40px 1fr; }
  .tat-linkrow select { grid-column: 2; }
  .tat-linkrow input { grid-column: 2; }
  .tat-checkgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .tat-support-wrap { padding-top: 74px; }
  .tat-support-form { padding: 16px; }
  .tat-support-fieldset { padding: 12px; }
  .tat-support-board { padding: 16px; }
  .tat-checkgrid { grid-template-columns: 1fr; }
}
/* Support forms: centered logo, 35px down, 75x75, does NOT follow on scroll */
.tat-support-logo{
  position: absolute !important;     /* scrolls away */
  top: 35px !important;             /* 35px down */
  left: 50% !important;
  transform: translateX(-50%) !important;

  z-index: 5 !important;
  margin: 0 !important;
  padding: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.tat-support-logo img{
  width: 75px !important;
  height: 75px !important;
  display: block !important;
}

/* Reserve space so content never starts behind the logo */
body.tat-support,
body.suplog.tat-support{
  padding-top: 140px !important;   /* 35 + 75 + buffer */
}
body.tat-support,
body.suplog.tat-support{
  padding-top: 60px !important;
}
/* /assets/css/your-article.css */

:root{
  --ya2-radius: 14px;

  --ya2-border: #d9d9d9;
  --ya2-border-soft: #e6e6e6;

  --ya2-bg: #fafafa;
  --ya2-card: #ffffff;
  --ya2-soft: #f6f6f6;

  --ya2-ink: #111111;
  --ya2-title: #535252;

  --ya2-yellow: #ffe435;
  --ya2-yellow-border: #e7d33a;

  /* spacing */
  --ya2-sec-gap: 70px;        /* default between sections */
  --ya2-sec-gap-tight: 30px;  /* special: header -> first section, steps */
  --ya2-increase-gap: 70px;   /* gap between stacked split blocks */
}

/* Base */
body.page-your-article{
  background: var(--ya2-bg);
}
body.page-your-article,
body.page-your-article *{
  font-family:"Roboto", Arial, Helvetica, sans-serif !important;
}

/* Titles: regular weight + consistent title color */
body.page-your-article :is(
  h1,h2,h3,h4,h5,h6,
  .tat-ya2-step-title,
  .tat-ya2-social-name,
  .tat-ya2-faq-q,
  .tat-ya2-bigtext
){
  font-weight: 400 !important;
  color: var(--ya2-title) !important;
}

/* Layout */
body.page-your-article .tat-ya2{ padding:18px 12px 56px; }
body.page-your-article .tat-ya2-wrap{ max-width:1180px; margin:0 auto; }

/* Links */
body.page-your-article a{ color:var(--ya2-ink); text-decoration:none; }
body.page-your-article a:hover{ text-decoration:underline; }

/* Section base */
body.page-your-article .tat-ya2-sec{
  margin-top: var(--ya2-sec-gap);
  padding:16px;
  background: var(--ya2-card);
  border:1px solid var(--ya2-border);
  border-radius: var(--ya2-radius);
}

/* Special 30px gaps */
body.page-your-article .tat-ya2-sec.tat-ya2-hero-text{ margin-top: var(--ya2-sec-gap-tight) !important; }
body.page-your-article #ya2-steps.tat-ya2-sec{ margin-top: var(--ya2-sec-gap-tight) !important; }

/* Intro section must NOT be transparent */
body.page-your-article #ya2-intro.tat-ya2-sec.tat-ya2-hero-text{
  background: var(--ya2-bg) !important;
  border: 0 !important;
  border-radius: var(--ya2-radius) !important;
}

/* Section head */
body.page-your-article .tat-ya2-sec-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:10px;
  border-bottom:1px solid var(--ya2-border-soft);
  margin-bottom:12px;
}
body.page-your-article .tat-ya2-sectit{ margin:0; }

/* Intro title */
body.page-your-article .tat-ya2-hero-h1{
  text-transform:uppercase;
  letter-spacing:0.02em;
  margin:0 auto;
  max-width:880px;
  text-align:left;
}

/* Buttons */
body.page-your-article .tat-ya2-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
body.page-your-article .tat-ya2-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border:1px solid var(--ya2-ink);
  line-height:1;
  color:var(--ya2-ink);
  background: var(--ya2-card);
  border-radius:999px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  font-weight:400 !important;
}
body.page-your-article .tat-ya2-btn:hover{
  text-decoration:none;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}
body.page-your-article .tat-ya2-btn-primary{
  background: var(--ya2-ink);
  color:#fff;
}

/* Photo credit */
body.page-your-article .tat-credit-h6{
  margin:0;
  font-size:0.62rem;
  line-height:1.05;
  font-weight:400 !important;
  opacity:0.9;
  color: var(--ya2-ink) !important;
}

/* 4 steps (not clickable) */
body.page-your-article .tat-ya2-steps{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:14px;
}
body.page-your-article .tat-ya2-step{
  position:relative;
  display:flex;
  flex-direction:column;
  border:1px solid var(--ya2-border-soft);
  background: var(--ya2-card);
  border-radius: var(--ya2-radius);
  overflow:hidden;
  cursor:default;
  user-select:none;
}
body.page-your-article .tat-ya2-step:hover{
  transform:none !important;
  box-shadow:none !important;
  border-color: var(--ya2-border-soft) !important;
}

/* Image crop: cut bottom 30px */
body.page-your-article .tat-ya2-step-media{ overflow:hidden; }
body.page-your-article .tat-ya2-step-media img{
  width:100%;
  height:auto;
  display:block;
  margin:0 0 -30px 0;
}

/* Step title */
body.page-your-article .tat-ya2-step-title{
  display:block;
  padding:10px 14px 22px;
  font-size:1.08rem;
  line-height:1.15;
}

/* Step credit: bottom-right inside card */
body.page-your-article .tat-ya2-step .tat-credit-h6{
  position:absolute;
  right:12px;
  bottom:10px;
  font-size:0.60rem;
  opacity:0.75;
}

/* Social section */
body.page-your-article .tat-ya2-sec.tat-ya2-social{
  background: var(--ya2-yellow);
  border-color: var(--ya2-yellow-border);
}
body.page-your-article .tat-ya2-sec.tat-ya2-social .tat-ya2-sec-head{
  border-bottom-color: rgba(0,0,0,0.18);
}
body.page-your-article .tat-ya2-social-grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:12px;
}
body.page-your-article .tat-ya2-social-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border:1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.92);
  border-radius: var(--ya2-radius);
  text-decoration:none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
body.page-your-article .tat-ya2-social-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.10);
  border-color: rgba(0,0,0,0.35);
  text-decoration:none;
}
body.page-your-article .tat-ya2-social-ic{
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background: var(--ya2-card);
  border:1px solid rgba(0,0,0,0.14);
  flex:0 0 auto;
}
body.page-your-article .tat-ya2-social-ic svg{
  width:22px;
  height:22px;
  fill: var(--ya2-ink);
  display:block;
}
body.page-your-article .tat-ya2-social-name{ font-size:1.05rem; }

/* Split sections */
body.page-your-article .tat-ya2-split-card{
  background:transparent;
  border:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  align-items:center;
}
body.page-your-article .tat-ya2-split-media{
  position:relative;
  overflow:hidden;
  border:1px solid var(--ya2-border-soft);
  background: var(--ya2-soft);
  border-radius: var(--ya2-radius);
}
body.page-your-article .tat-ya2-split-media img{
  display:block;
  width:100%;
  height:auto;
  border-radius: calc(var(--ya2-radius) - 2px);
}
body.page-your-article .tat-ya2-split-media .tat-credit-h6{
  position:absolute;
  right:12px;
  bottom:10px;
  color:#fff !important;
  text-shadow:0 2px 8px rgba(0,0,0,0.55);
  font-size:0.60rem;
}
body.page-your-article .tat-ya2-split-copy{ padding:10px 6px; }

/* Big text (size only; color/weight comes from titles rule) */
body.page-your-article .tat-ya2-bigtext{
  font-size:2.05rem;
  line-height:1.12;
  margin:0;
}
body.page-your-article .tat-ya2-regular{ font-weight:400 !important; }

/* Increase stack gap */
body.page-your-article .tat-ya2-increase-stack{
  display:grid;
  gap: var(--ya2-increase-gap);
}

/* FAQ */
body.page-your-article .tat-ya2-faq{ display:grid; gap:10px; }
body.page-your-article .tat-ya2-faqi{
  border:1px solid var(--ya2-border-soft);
  padding:12px;
  background: var(--ya2-card);
  border-radius: var(--ya2-radius);
}
body.page-your-article .tat-ya2-faqi summary{
  cursor:pointer;
  list-style:none;
}
body.page-your-article .tat-ya2-faqi summary::-webkit-details-marker{ display:none; }
body.page-your-article .tat-ya2-faqi[open]{ border-color: var(--ya2-ink); }
body.page-your-article .tat-ya2-faq-btn{ margin-top:10px; }

/* FAQ question sizing (H2-like) */
body.page-your-article .tat-ya2-faq-q{
  font-size:1.5rem !important;
  line-height:1.15 !important;
}

/* Copy tags */
body.page-your-article .tat-ya2-tags-box{
  width:100%;
  min-height:140px;
  border:1px solid var(--ya2-border);
  background: var(--ya2-bg);
  padding:12px;
  font-size:1.05rem;
  line-height:1.35;
  resize:vertical;
  border-radius: var(--ya2-radius);
}

/* Responsive */
@media (max-width:1024px){
  body.page-your-article .tat-ya2-steps{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  body.page-your-article .tat-ya2-social-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  body.page-your-article .tat-ya2-split-card{ grid-template-columns:1fr; }
  body.page-your-article .tat-ya2-bigtext{ font-size:1.85rem; }
}
@media (max-width:768px){
  body.page-your-article .tat-ya2-steps{ grid-template-columns:1fr; }
  body.page-your-article .tat-ya2-social-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  body.page-your-article .tat-ya2-bigtext{ font-size:1.65rem; }
}
/* BOOK REVIEW — body.book-reviewone (Final Adjustments) */
body.book-reviewone { background:#fafafa; }

body.book-reviewone .br-container{
  --br-container: 1200px;
  max-width: var(--br-container);
  margin: 0 auto;
  padding: 0 18px;
  box-sizing:border-box;
}

/* top strip */
body.book-reviewone .br-strip{ background:#fafafa; padding: 18px 0 10px; }

/* FIX 1: Book Review should look like H3 */
body.book-reviewone .br-strip__title{
  font-family: var(--tat-font-title, "Times New Roman", serif);
  font-size: 20px;   /* H3-size */
  line-height: 1.2;
  margin: 0 0 6px;
  font-weight: 600;
}

body.book-reviewone .br-strip__genre{
  font-family: var(--tat-font-text, "Times New Roman", serif);
  font-size: 14px;
  color:#222;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
body.book-reviewone .br-genre-pill{ color:#777; }
body.book-reviewone .br-genre-sep{ color:#bbb; }

body.book-reviewone .br-main{ padding: 0 0 36px; }

/* card + grid */
body.book-reviewone .br-card{
  background:#fff;
  border:1px solid #ededed;
  border-radius: 2px;
  margin-top: 10px;
}
body.book-reviewone .br-grid{
  display:grid;
  grid-template-columns: 360px 1fr; /* smaller left column */
  gap: 26px;
  padding: 18px;
  align-items:start;
}
body.book-reviewone .br-right{ max-width: 900px; }

/* FIX 2/3: cover smaller (width+height) */
body.book-reviewone .br-cover{ max-width: 320px; }
body.book-reviewone .br-cover__wrap{ position:relative; }
body.book-reviewone .br-cover__img{
  width:100%;
  height:auto;
  display:block;
  border:1px solid #efefef;
  background:#fff;
}

/* zoom button */
body.book-reviewone .br-zoom{
  position:absolute;
  right:10px;
  top:10px;
  width:38px;
  height:38px;
  border:0;
  background: rgba(0,0,0,.72);
  color:#fff;
  border-radius: 10px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
body.book-reviewone .br-zoom svg{ width:20px; height:20px; fill:#fff; display:block; }
body.book-reviewone .br-credit{ margin-top: 6px; }

/* spacing */
body.book-reviewone .br-cta{ margin-top: 18px; }
body.book-reviewone .br-short{ margin-top: 22px; }

/* FIX 4: Buy + Contact titles Roboto */
body.book-reviewone .br-buy{ position:relative; }
body.book-reviewone .br-buy__btn{
  width:100%;
  background:#f0b400;
  color:#fff;
  border:0;
  padding: 14px 16px;
  font-family: Roboto, Arial, sans-serif; /* Roboto */
  font-size: 20px;
  font-weight: 500;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
  border-radius: 6px;
}

body.book-reviewone .br-buy__menu{
  position:absolute;
  left:0;
  right:0;
  top: calc(100% + 8px);
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius: 6px;
  overflow:hidden;
  display:none;
  z-index: 30;
}
body.book-reviewone .br-buy__item{
  display:block;
  padding: 12px 14px;
  text-decoration:none;
  color:#111;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  border-top: 1px solid #f0f0f0;
}
body.book-reviewone .br-buy__item:hover{ background:#fafafa; }
body.book-reviewone .br-buy__item.is-primary{ font-weight:700; }

/* Actions */
body.book-reviewone .br-actions{
  display:grid;
  grid-template-columns: 74px 1fr;
  gap: 12px;
  margin-top: 12px;
}
body.book-reviewone .br-action{
  border:1px solid #e5e5e5;
  padding: 14px 12px;
  cursor:pointer;
  border-radius: 6px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  font-family: Roboto, Arial, sans-serif; /* Roboto */
  font-size: 16px;
  font-weight: 500;
  background:#f3f3f3;
  color:#111;
}
body.book-reviewone .br-action__icon svg{ width:22px; height:22px; fill:currentColor; display:block; }
body.book-reviewone .br-action--share{ background:#fafafa; }

/* contact dropdown */
body.book-reviewone .br-contactmenu{
  margin-top: 10px;
  border:1px solid #e5e5e5;
  border-radius: 6px;
  overflow:hidden;
  display:none;
}
body.book-reviewone .br-contactmenu__item{
  display:block;
  padding: 12px 14px;
  text-decoration:none;
  color:#111;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  border-top: 1px solid #f0f0f0;
}
body.book-reviewone .br-contactmenu__item:hover{ background:#fafafa; }

/* YouTube */
body.book-reviewone .br-left__h{
  font-family: var(--tat-font-title, "Times New Roman", serif);
  font-size: 16px;
  margin: 0 0 10px;
}
body.book-reviewone .br-yt{
  max-width: 320px;
  position:relative;
  padding-top: 177.78%;
  background:#000;
  border-radius: 6px;
  overflow:hidden;
}
body.book-reviewone .br-yt iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* FIX 2: title smaller */
body.book-reviewone .br-h1{
  font-family: var(--tat-font-title, "Times New Roman", serif);
  font-size: 38px;
  line-height: 1.08;
  margin: 0;
  color:#111;
}
body.book-reviewone .br-h2{
  font-family: var(--tat-font-title, "Times New Roman", serif);
  font-size: 18px;
  margin: 10px 0 14px;
  color:#8a8a8a;
  font-weight: 400;
}

/* Tabs */
body.book-reviewone .br-tabs{
  background:#fafafa;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  padding: 10px 12px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
}
body.book-reviewone .br-tabs .br-tab{
  font: 400 18px/1.2 "Roboto", Arial, sans-serif;
  border:0;
  background:transparent;
  cursor:pointer;
  padding: 6px 0;
  color:#111;
}
body.book-reviewone .br-tabs .br-tab.is-active{ border-bottom: 2px solid #111; }
body.book-reviewone .br-tabs .br-tab.is-disabled{ color:#9b9b9b; cursor:not-allowed; border-bottom:0; }
body.book-reviewone .br-tabsep{
  font: 400 18px/1.2 "Roboto", Arial, sans-serif;
  color:#b5b5b5;
  user-select:none;
}

/* Panels */
body.book-reviewone .br-panels{ padding: 16px 0 0; }
body.book-reviewone .br-panel{ display:none; }
body.book-reviewone .br-panel.is-active{ display:block; }

body.book-reviewone .br-lead{
  font-family: var(--tat-font-text, "Times New Roman", serif);
  font-size: 16px;
  line-height: 1.55;
  margin: 10px 0 14px;
  color:#111;
  font-weight: 600;
}
body.book-reviewone .br-sec-h{
  font-family: var(--tat-font-title, "Times New Roman", serif);
  font-size: 18px;
  margin: 18px 0 10px;
  color:#111;
}
body.book-reviewone .br-subh{
  font-family: var(--tat-font-title, "Times New Roman", serif);
  font-size: 16px;
  margin: 14px 0 6px;
  color:#111;
  font-weight: 600;
}
body.book-reviewone .br-p{
  font-family: var(--tat-font-text, "Times New Roman", serif);
  font-size: 16px;
  line-height: 1.55;
  color:#111;
  margin: 0 0 10px;
}

/* review bottom buttons */
body.book-reviewone .br-review-bottom{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 14px;
}
body.book-reviewone .br-botbtn{
  border:1px solid #e5e5e5;
  padding: 12px 14px;
  cursor:pointer;
  border-radius: 10px;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
body.book-reviewone .br-botbtn--email{
  background:#e9e9e9;
  color:#111;
}
body.book-reviewone .br-botbtn--share{
  background:#111;
  color:#fff;
  border-color:#111;
}

/* Info table */
body.book-reviewone .br-info{ border-top: 1px solid #efefef; margin-top: 10px; }
body.book-reviewone .br-info__row{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #efefef;
}
body.book-reviewone .br-info__k{ font-family: var(--tat-font-text, "Times New Roman", serif); color:#555; }
body.book-reviewone .br-info__v{ font-family: var(--tat-font-text, "Times New Roman", serif); color:#111; }

/* Author hero */
body.book-reviewone .br-authorhero{ margin: 0 0 10px; }
body.book-reviewone .br-authorhero img{ width:100%; height:auto; display:block; border:1px solid #efefef; }

/* Test read */
body.book-reviewone .br-test{ display:flex; flex-direction:column; gap: 14px; }
body.book-reviewone .br-test__h{
  font-family: var(--tat-font-title, "Times New Roman", serif);
  font-size: 18px;
  margin: 0 0 8px;
}
body.book-reviewone .br-test__rowbtns{ display:flex; gap:10px; flex-wrap:wrap; }

/* FIX: View/Download half-rounded grey buttons */
body.book-reviewone .br-test__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  background:#e6e6e6;
  color:#111;
  border:1px solid #d9d9d9;
  border-radius: 999px; /* half rounded */
  text-decoration:none;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
}
body.book-reviewone .br-test__btn:hover{ background:#dddddd; }

/* FIX: divider between pdf and audio */
body.book-reviewone .br-test__divider{
  height: 1px;
  background:#111;
  width:100%;
}

/* Related */
body.book-reviewone .br-related{ margin-top: 34px; padding-top: 10px; border-top: 1px solid #efefef; }
body.book-reviewone .br-related__kicker{
  text-align:center;
  font-family: Roboto, Arial, sans-serif;
  font-size: 10px;
  letter-spacing:.28em;
  color:#b07b7b;
  margin: 6px 0 6px;
}
body.book-reviewone .br-related__h{
  text-align:center;
  font-family: var(--tat-font-title, "Times New Roman", serif);
  font-size: 34px;
  margin: 0 0 18px;
}
body.book-reviewone .br-related__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
body.book-reviewone .br-related__card{
  display:block;
  background:#fff;
  border:1px solid #efefef;
}
body.book-reviewone .br-related__card img{
  width:100%;
  height:auto;
  display:block;
}

/* Share modal basic */
body.book-reviewone .br-modal[hidden]{ display:none; }
body.book-reviewone .br-modal{ position:fixed; inset:0; z-index: 9999; }
body.book-reviewone .br-modal__overlay{ position:absolute; inset:0; background: rgba(0,0,0,.35); }
body.book-reviewone .br-modal__dialog{
  position:relative;
  width: min(620px, calc(100% - 24px));
  margin: 10vh auto 0;
  background:#fff;
  border-radius: 10px;
  border: 1px solid #e5e5e5;
  padding: 14px;
}
body.book-reviewone .br-modal__top{
  display:flex; justify-content:space-between; align-items:center;
  padding: 6px 6px 12px; border-bottom:1px solid #efefef;
}
body.book-reviewone .br-modal__title{
  font-family: var(--tat-font-title, "Times New Roman", serif);
  font-size: 18px;
}
body.book-reviewone .br-modal__x{ border:0; background:transparent; font-size: 26px; cursor:pointer; line-height:1; }

/* FIX 3: zoom modal should not be huge */
body.book-reviewone .br-imgmodal[hidden]{ display:none; }
body.book-reviewone .br-imgmodal{ position:fixed; inset:0; z-index: 10000; }
body.book-reviewone .br-imgmodal__overlay{ position:absolute; inset:0; background: rgba(0,0,0,.7); }
body.book-reviewone .br-imgmodal__dialog{
  position:relative;
  width: min(720px, calc(100% - 24px)); /* limit */
  margin: 8vh auto 0;
  background:#111;
  border-radius: 10px;
  padding: 12px;
}
body.book-reviewone .br-imgmodal__x{
  position:absolute; right:10px; top:6px;
  border:0; background:transparent; color:#fff;
  font-size: 34px; cursor:pointer; line-height:1;
}
body.book-reviewone .br-imgmodal__img{
  width:100%;
  height:auto;
  display:block;
  border-radius: 6px;
  max-height: 72vh;   /* prevent huge */
  object-fit: contain;
}
body.book-reviewone .br-imgmodal__credit{ color:#fff; margin-top: 8px; }

/* Responsive */
@media (max-width: 980px){
  body.book-reviewone .br-grid{ grid-template-columns: 1fr; }
  body.book-reviewone .br-cover{ max-width: 320px; }
  body.book-reviewone .br-yt{ max-width: 320px; }
  body.book-reviewone .br-h1{ font-size: 34px; }
  body.book-reviewone .br-related__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  body.book-reviewone .br-actions{ grid-template-columns: 74px 1fr; }
  body.book-reviewone .br-related__grid{ grid-template-columns: 1fr; }
}
/* =========================================================
   Art Times: Write for Art Times Page
   Scope: body.page-write-for-art-times
   ========================================================= */

body.page-write-for-art-times{
  --wfat-radius: 14px;
  --wfat-border: #d9d9d9;
  --wfat-border-soft: #e6e6e6;

  --wfat-bg: #fafafa;
  --wfat-card: #ffffff;
  --wfat-soft: #f6f6f6;

  --wfat-ink: #111111;
  --wfat-title: #535252;

  --wfat-sec-gap: 50px;
  --wfat-stack-gap: 80px;

  --wfat-desc: #7b7b7b;

  background: var(--wfat-bg);
}

body.page-write-for-art-times,
body.page-write-for-art-times *{
  font-family: "Roboto", Arial, Helvetica, sans-serif !important;
}

body.page-write-for-art-times .wfat{
  padding: 18px 12px 56px;
}

body.page-write-for-art-times .wfat-wrap{
  max-width: 1180px;
  margin: 0 auto;
}

/* Sections */
body.page-write-for-art-times .wfat-sec{
  margin-top: var(--wfat-sec-gap);
  padding: 16px;
  background: var(--wfat-card);
  border: 1px solid var(--wfat-border);
  border-radius: var(--wfat-radius);
}

body.page-write-for-art-times .wfat-sec-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--wfat-border-soft);
  margin-bottom: 12px;
}

body.page-write-for-art-times .wfat-sectit{
  margin: 0;
  font-weight: 400 !important;
  color: var(--wfat-title) !important;
  font-size: 1.55rem;
  line-height: 1.15;
}

/* HERO */
body.page-write-for-art-times .wfat-sec.wfat-hero{
  background: #ffffff !important;
  border: 1px solid var(--wfat-border) !important;
  padding: 16px !important;
  margin-top: 18px;
}

body.page-write-for-art-times .wfat-hero-split{
  display:flex;
  gap: 14px;
  align-items: stretch;
}

body.page-write-for-art-times .wfat-hero-copy{
  order: 2;
  flex: 1;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
}

body.page-write-for-art-times .wfat-hero-media{
  order: 1;
  flex: 1;
  min-width: 0;
  display:flex;
  align-items: center;
}

body.page-write-for-art-times .wfat-h1{
  margin: 0;
  max-width: 560px;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 400 !important;
  color: var(--wfat-title) !important;
  font-size: 2.55rem;
  line-height: 1.06;
}

body.page-write-for-art-times .wfat-hero-apply{
  margin-top: 35px;
}

/* Buttons */
body.page-write-for-art-times .wfat-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border: 1px solid var(--wfat-ink);
  line-height: 1;
  border-radius: 999px;
  background: var(--wfat-card);
  color: var(--wfat-ink);
  font-weight: 400 !important;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  white-space: nowrap;
}

body.page-write-for-art-times .wfat-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  text-decoration: none;
}

body.page-write-for-art-times .wfat-btn-primary{
  background: var(--wfat-ink);
  color: #fff;
}

body.page-write-for-art-times .wfat-apply-inline{
  margin-top: 14px;
  display:flex;
  justify-content:center;
}

body.page-write-for-art-times .wfat-btn-wide{
  width: 100%;
  display:flex;
}

/* Media */
body.page-write-for-art-times .wfat-media{
  position: relative;
  overflow: hidden;
  border: 0px solid var(--wfat-border-soft);
  background: var(--wfat-soft);
  border-radius: var(--wfat-radius);
  width: 100%;
}

body.page-write-for-art-times .wfat-media img{
  display:block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--wfat-radius) - 2px);
}

body.page-write-for-art-times .wfat-credit{
  position: absolute;
  right: 12px;
  bottom: 10px;
  margin: 0;
  font-size: 0.60rem;
  line-height: 1.05;
  font-weight: 400 !important;
  color: #fff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.55);
}

body.page-write-for-art-times .wfat-copy{
  padding: 10px 6px;
}

/* Split layout */
body.page-write-for-art-times .wfat-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: center;
}

/* Stack gaps */
body.page-write-for-art-times .wfat-stack{
  display:grid;
  gap: var(--wfat-stack-gap);
}

/* Titles + Descriptions */
body.page-write-for-art-times .wfat-big{
  margin: 0;
  font-size: 2.10rem;
  line-height: 1.12;
  font-weight: 400 !important;
  color: var(--wfat-title) !important;
}

body.page-write-for-art-times .wfat-p{
  margin: 12px 0 0;
  color: var(--wfat-desc);
  font-size: 1.05rem;
  line-height: 1.55;
}

/* Rules */
body.page-write-for-art-times .wfat-rules-wrap{
  margin-top: 14px;
  border: 0px solid var(--wfat-border-soft);
  border-radius: var(--wfat-radius);
  background: #fff;
  padding: 12px;
}

body.page-write-for-art-times .wfat-subhead{
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.35;
  font-weight: 500 !important;
  color: var(--wfat-ink) !important;
}

body.page-write-for-art-times .wfat-rules{
  margin: 10px 0 0;
  padding-left: 18px;
  color: #555;
  font-size: 1.02rem;
  line-height: 1.55;
}

body.page-write-for-art-times .wfat-rules li{
  margin: 8px 0;
}

/* FAQ */
body.page-write-for-art-times .wfat-faq{
  display:grid;
  gap: 10px;
}

body.page-write-for-art-times .wfat-faqi{
  border: 1px solid var(--wfat-border-soft);
  padding: 12px;
  background: var(--wfat-card);
  border-radius: var(--wfat-radius);
}

body.page-write-for-art-times .wfat-faqi summary{
  cursor: pointer;
  list-style: none;
}

body.page-write-for-art-times .wfat-faqi summary::-webkit-details-marker{
  display:none;
}

body.page-write-for-art-times .wfat-faqi[open]{
  border-color: var(--wfat-ink);
}

body.page-write-for-art-times .wfat-faq-q{
  font-size: 1.70rem !important;
  line-height: 1.15 !important;
  font-weight: 400 !important;
  color: var(--wfat-title) !important;
}

body.page-write-for-art-times .wfat-faq-a{
  margin: 10px 0 0;
  color: var(--wfat-desc);
  font-size: 1.05rem;
  line-height: 1.55;
}

body.page-write-for-art-times .wfat-faq-btn{
  margin-top: 10px;
}

/* Tags */
body.page-write-for-art-times .wfat-tags-box{
  width: 100%;
  min-height: 140px;
  border: 1px solid var(--wfat-border);
  background: var(--wfat-bg);
  padding: 12px;
  font-size: 1.05rem;
  line-height: 1.35;
  resize: vertical;
  border-radius: var(--wfat-radius);
  color: #555;
}

/* Mobile */
@media (max-width: 767px){
  body.page-write-for-art-times .wfat-hero-split{
    flex-direction: column;
  }
  body.page-write-for-art-times .wfat-hero-copy{
    order: 1;
  }
  body.page-write-for-art-times .wfat-hero-media{
    order: 2;
  }

  body.page-write-for-art-times .wfat-split{
    grid-template-columns: 1fr;
  }

  body.page-write-for-art-times .wfat-h1{
    font-size: 2.05rem;
    line-height: 1.08;
  }

  body.page-write-for-art-times .wfat-big{
    font-size: 1.65rem;
    line-height: 1.18;
  }
}