/*!
 * Modern look for tennis MAGAZIN. Loaded after style.css (see load_child_theme_styles() in functions.php).
 * Visual layer only: markup, content and ad slots are untouched.
 *
 * Direction (design-taste-frontend): one flat ground, one ink, brand blue as the only accent, one typeface,
 * type set larger, tone steps instead of rules/shadows/boxes, square photographs.
 */

/* ---- Fonts (self-hosted, no request to Google) ---- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/archivo_latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/archivo_latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Barlow Condensed (self-hosted): headlines only, the sports-page voice next to Archivo text */
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/barlowcondensed_600_latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/barlowcondensed_600_latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/barlowcondensed_700_latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/barlowcondensed_700_latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Tokens ---- */
:root {
  --bg: #f3f5f8;
  --surface: #e6ebf2;
  --paper: #ffffff;
  --ink: #11161d;
  --ink-soft: #46515f;
  --blue: #004884;
  --blue-hover: #00366a;
  --blue-light: #1f73bd;
  --blue-light-hover: #195e9b;
  --night: #0c1c30;
  --night-ink: #f3f5f8;
  --smash: #b1352b;
  --smash-hover: #8f2820;
  --ball: #c6e01a; /* tennis-ball optic yellow: only on dark (night) surfaces or with night ink on top, never as text on light */

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Barlow Condensed", "Archivo Narrow", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;

  --step-small: 14px;
  --step-body: clamp(16px, 14.5px + 0.4vw, 18px);
  --step-lead: clamp(20px, 17.6px + 0.7vw, 26px);
  --step-title: clamp(26px, 22.5px + 0.75vw, 33px); /* headlines are condensed, so a size up */
  --step-head: clamp(32px, 20.8px + 3.2vw, 64px);

  --gutter: 24px;
  --section-gap: clamp(56px, 7vw, 112px);
}

/* Smash category and its posts (body.has-smash): the accent swaps from brand blue to Smash red,
   so every blue accent (active nav item, category labels, links, pagination) follows */
body.has-smash {
  --blue: var(--smash);
  --blue-hover: var(--smash-hover);
  --blue-light: var(--smash);
  --blue-light-hover: var(--smash-hover);
}

/* ---- Ground and frame ---- */
html {
  background: var(--bg);
}

body,
body.custom-background {
  background: var(--bg) !important;
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* the parent theme's ".author { margin-bottom }" also hits <body class="author">, which left a light strip under the footer */
body.author {
  margin-bottom: 0;
}

#page .container--main,
.container--main.sky,
.container,
.site-header,
.header,
.wrapper {
  background: transparent !important;
}

.container--main {
  box-shadow: none !important; /* taste-skill-ignore */
}

/* ---- Type ---- */
body,
button,
input,
select,
textarea,
.nav,
.nav a,
.article__content,
.article__content p,
.article__meta-links,
.small-link,
.article__category,
.widget,
.widget__title,
.issue_headline,
.issue_excerpt,
.wp-caption-text,
.footer-menu a,
.footer-copyright {
  font-family: var(--font) !important;
}

h1, h2, h3, h4, h5, h6,
.hN,
.heading,
.article__title,
.article__title h3,
.article--thumb__title h3 {
  font-family: var(--font) !important;
  text-transform: none !important;
  letter-spacing: -0.01em;
  color: var(--ink);
}

p {
  color: var(--ink);
}

a {
  color: var(--blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a:hover,
a:focus {
  color: var(--blue-hover);
}

::selection {
  background: var(--ball);
  color: var(--night);
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

/* ---- Rules, shadows and boxes become space ---- */
hr,
hr.separator,
.separator,
.separator--subsection {
  border: 0 !important;
  background: none !important;
  height: 0 !important;
  margin: 0 0 var(--gutter) !important;
  box-shadow: none !important; /* taste-skill-ignore */
}

.nav-top-separator {
  display: none !important;
}

img,
.image-wrap img,
.article--grid__thumb img {
  box-shadow: none !important; /* taste-skill-ignore */
  border-radius: 0 !important;
}

/* ---- Top bar ---- */
.navigation--top {
  background: var(--bg) !important;
}

.navigation--top .nav__item,
.navigation--top .nav--top li,
.navigation--top .header-bar > li {
  background: transparent !important;
}

.navigation--top .nav__item a,
.navigation--top .menu-link {
  color: var(--ink-soft) !important;
  font-size: var(--step-small) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.navigation--top .nav__item a:hover,
.navigation--top .menu-link:hover {
  color: var(--blue) !important;
}

.navigation--top .pixcode--icon,
.navigation--top .social-icon-link,
.navigation--top .social-icon-link .square {
  color: var(--ink-soft) !important;
  background: transparent !important;
}

.navigation--top .social-icon-link:hover .square {
  color: var(--blue) !important;
  background: transparent !important;
}

.navigation--top .search-query {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 0 !important;
  font-size: var(--step-small) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.navigation--top .search-query::placeholder {
  color: var(--ink-soft);
}

.navigation--top .search-submit {
  background: var(--surface) !important;
  color: var(--ink) !important;
}

/* ---- Main navigation ---- */
.navigation--main,
.nav--main__wrapper,
.nav-sticky-wrapper,
.nav--main__wrapper.sticky {
  background: var(--bg) !important;
}

.navigation.navigation--main .nav--main,
.nav--main {
  background: transparent !important;
}

.navigation.navigation--main .nav--main > li,
.nav--main > li {
  background: transparent !important;
  border: 0 !important;
}

.navigation.navigation--main .nav--main > li > a,
.nav--main > li a {
  color: var(--ink) !important;
  font-family: var(--font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.navigation.navigation--main .nav--main > li:hover > a,
.navigation.navigation--main .nav--main > li.current-menu-item > a,
.navigation.navigation--main .nav--main > li.current-menu-parent > a,
.navigation.navigation--main .nav--main > li.current-menu-ancestor > a {
  color: var(--blue) !important;
  text-decoration: none !important;
}

/* the single action: Smash */
.navigation.navigation--main .nav--main > li:last-of-type {
  background: var(--smash) !important;
}

.navigation.navigation--main .nav--main > li:last-of-type > a,
.navigation.navigation--main .nav--main > li:last-of-type:hover > a {
  color: #fff !important;
  text-decoration: none !important;
}

.nav--main > li:last-of-type:hover,
.navigation.navigation--main .nav--main > li:last-of-type:hover {
  background: var(--smash-hover) !important;
}

/* the home item loses its sprite icon (it vanished on hover and moved the row) */
.navigation.navigation--main .nav--main .nav__item.depth-0:first-child .main-menu-link,
.navigation.navigation--main .nav--main .nav__item.depth-0:first-child .main-menu-link:hover,
.navigation.navigation--main .nav--main .nav__item.depth-0:first-child .main-menu-link:focus {
  text-indent: 0 !important;
  background: none !important;
}

@media only screen and (min-width: 900px) {
  .navigation.navigation--main .nav--main {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    margin: 0 !important;
  }

  .navigation.navigation--main .nav--main > li {
    float: none !important;
    display: flex;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    transition: background-color 0.15s linear;
  }

  .navigation.navigation--main .nav--main > li > a {
    position: relative;
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 12px !important;
    line-height: 1;
    white-space: nowrap;
  }

  /* hover/current bar is painted, never laid out, so nothing moves */
  .navigation.navigation--main .nav--main > li > a::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 8px;
    height: 3px;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.2s ease;
  }

  .navigation.navigation--main .nav--main > li:hover > a::after,
  .navigation.navigation--main .nav--main > li > a:focus-visible::after,
  .navigation.navigation--main .nav--main > li.current-menu-item > a::after,
  .navigation.navigation--main .nav--main > li.current-menu-parent > a::after,
  .navigation.navigation--main .nav--main > li.current-menu-ancestor > a::after {
    transform: scaleX(1);
  }

  .navigation.navigation--main .nav--main > li:last-of-type > a::after {
    display: none;
  }

  /* air between the navigation and the page */
  .wrapper > .container-wrapper > .container--main {
    padding-top: 40px;
  }
}

.nav--stacked.nav--sub-menu,
.navigation--main .sub-menu {
  background: var(--paper) !important;
  box-shadow: 0 12px 32px rgba(12, 28, 48, 0.16) !important; /* taste-skill-ignore */
  border: 0 !important;
}

.navigation--main .sub-menu li a {
  color: var(--ink) !important;
  font-weight: 400 !important;
}

.navigation--main .sub-menu li a:hover {
  background: var(--surface) !important;
  color: var(--blue) !important;
}

/* ---- Headings that were blocks ---- */
.heading.heading--main,
.heading--main {
  background: none !important;
  padding: 0 !important;
  margin: var(--section-gap) 0 32px !important;
  display: block;
}

.heading.heading--main h2,
.heading.heading--main h1,
.heading--main h2.hN,
.heading--main h1.hN,
.container--main.sky .heading--main h1.hN {
  color: var(--ink) !important;
  font-size: var(--step-head) !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  letter-spacing: -0.03em !important;
}

/* ---- Featured area (hero) ---- */
@media only screen and (min-width: 641px) {
  .featured-area {
    display: flex;
    align-items: stretch;
  }

  .featured-area__article,
  .featured-area__aside {
    float: none;
    margin-bottom: 0;
  }

  .featured-area__aside .block-list {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
  }

  .featured-area__aside .block-list > li {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .featured-area__aside .block-list > li > article {
    width: 100%;
    margin: 0 !important;
  }

  .featured-area__aside .article__title,
  .featured-area__aside .article--thumb__title {
    height: auto !important;
    min-height: 0 !important;
  }
}

/* one hero picture ratio on every page, whatever the ratio of the image itself */
.featured-area__article .image-wrap {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  padding-top: 0 !important;
  overflow: hidden;
}

.featured-area__article .image-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important; /* the parent theme sets height: auto !important on .image-wrap img */
  object-fit: cover;
}

.featured-area__article.article--big .article__title {
  padding: 96px var(--gutter) var(--gutter) !important;
  background: linear-gradient(0deg, rgba(8, 14, 24, 0.82), rgba(8, 14, 24, 0)) !important; /* taste-skill-ignore */
}

.featured-area__article.article--big .article__title h3,
.featured-area__article .article__title h3.hN {
  color: #fff !important;
  font-size: clamp(34px, 20px + 2vw, 50px) !important;
  line-height: 1.05 !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  text-transform: none !important;
}

.featured-area__aside,
.featured-area__aside .block-list > li {
  background: transparent !important; /* the template prints the category accent as an inline background-color */
}

/* ---- Article lists ---- */
.article__category,
.article__category a,
.small-link {
  color: var(--blue) !important;
  font-size: var(--step-small) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.article--thumb__title h3,
.article--thumb__title h3.hN,
.article__title h3.hN {
  font-size: var(--step-title) !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}

.featured-area__aside .article--thumb__title h3,
.featured-area__aside .article--thumb__title h3.hN {
  font-size: 21px !important;
  line-height: 1.15 !important;
}

.article--thumb__title a:hover h3,
.article--grid__title:hover h3,
a:hover > .article__title h3 {
  color: var(--blue) !important;
}

.article__content,
.article__content p,
.article--grid__body {
  font-size: var(--step-body) !important;
  line-height: 1.5 !important;
  color: var(--ink) !important;
}

.article__meta-links,
.article__meta-links li,
.article__meta-links a,
.xpost_date {
  color: var(--ink-soft) !important;
  font-size: var(--step-small) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.article--grid__title h3,
.article--grid__title h3.hN {
  font-size: var(--step-lead) !important;
  line-height: 1.12 !important;
  font-weight: 600 !important;
}

/* ---- Magazine issue teasers: cover + short pitch + one clear action ---- */
.recent-mag-grid {
  margin-top: 48px;
}

.issue_teaser.hp_teaser {
  display: grid;
  grid-template-columns: minmax(120px, 36%) minmax(0, 1fr);
  align-items: start;
  gap: 28px;
  min-height: 0;
  padding: 28px !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-top: 4px solid var(--blue) !important;
}

.recent-mag.sport-mag .issue_teaser.hp_teaser {
  border-top-color: var(--blue-light) !important;
}

.issue_teaser.hp_teaser .first_col {
  flex: none;
  min-width: 0;
  margin: 0 !important;
}

.issue_teaser.hp_teaser .issue_image {
  display: block;
  float: none;
  position: relative;
  width: 100% !important;
  margin: 0 !important;
  aspect-ratio: 768 / 1000;
  overflow: hidden;
  background: var(--surface);
}

.issue_teaser.hp_teaser .issue_image:after {
  display: none;
}

.issue_teaser.hp_teaser .issue_image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.issue_teaser.hp_teaser .issue_image:hover img {
  transform: scale(1.03);
}

.issue_teaser.hp_teaser .second_col {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto auto;
  align-content: stretch;
  align-self: stretch;
  margin: 0 !important;
  min-width: 0;
  background: none !important;
}

.issue_teaser.hp_teaser .issue_headline {
  margin: 0 0 14px;
}

.issue_teaser.hp_teaser .issue_headline a,
.issue_teaser.hp_teaser .issue_headline a:hover {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  color: var(--ink) !important;
  font-size: var(--step-lead) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
  transition: color 0.15s ease;
}

.issue_teaser.hp_teaser .issue_headline a:hover {
  color: var(--blue) !important;
}

.issue_teaser.hp_teaser .issue_excerpt {
  align-self: start;
  margin: 0 0 20px;
  background: none !important;
  color: var(--ink-soft) !important;
  font-size: 16px !important;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.issue_teaser.hp_teaser .issue_teaser_links {
  position: static;
  margin: 0 0 14px;
  padding: 0;
}

.issue_teaser.hp_teaser .issue_teaser_links li {
  display: block;
  margin: 0;
}

.issue_teaser.hp_teaser .issue_teaser_links li a {
  display: inline-block;
  background: var(--blue) !important;
  color: #fff !important;
  padding: 12px 20px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.2;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  border: 0 !important;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.recent-mag.sport-mag .issue_teaser.hp_teaser .issue_teaser_links li a {
  background: var(--blue-light) !important;
}

.issue_teaser.hp_teaser .issue_teaser_links li a:hover {
  background: var(--blue-hover) !important;
}

.recent-mag.sport-mag .issue_teaser.hp_teaser .issue_teaser_links li a:hover {
  background: var(--blue-light-hover) !important;
}

.issue_teaser.hp_teaser .issue_teaser_links li a:active {
  transform: translateY(1px);
}

.issue_teaser.hp_teaser .issue_teaser_more_links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.issue_teaser.hp_teaser .issue_teaser_more_links li {
  margin: 0;
  background: none !important;
}

.issue_teaser.hp_teaser .issue_teaser_more_links li:after,
.issue_teaser.hp_teaser .issue_teaser_more_links li:before {
  content: none !important;
}

.issue_teaser.hp_teaser .single-mag-link,
.issue_teaser.hp_teaser .issue_teaser_more_links a {
  display: inline-block;
  padding: 6px 0;
  white-space: nowrap;
  background: none !important;
  color: var(--ink) !important;
  font-size: 16px !important;
  font-weight: 600;
  text-transform: none !important;
  text-decoration: none !important;
  border-bottom: 2px solid var(--surface);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.issue_teaser.hp_teaser .single-mag-link:hover,
.issue_teaser.hp_teaser .issue_teaser_more_links a:hover {
  color: var(--blue) !important;
  border-bottom-color: var(--blue);
}

@media only screen and (max-width: 640px) {
  .issue_teaser.hp_teaser {
    grid-template-columns: minmax(96px, 34%) minmax(0, 1fr);
    gap: 16px;
    padding: 16px !important;
  }

  .issue_teaser.hp_teaser .second_col {
    grid-template-rows: auto auto auto auto;
  }

  .issue_teaser.hp_teaser .issue_excerpt {
    -webkit-line-clamp: 2;
    margin-bottom: 14px;
  }

  .issue_teaser.hp_teaser .issue_teaser_links {
    margin-bottom: 10px;
  }
}

/* ---- Buttons ---- */
.btn,
button.btn,
input[type="submit"],
.button,
a.button {
  background: var(--blue) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important; /* taste-skill-ignore */
  font-family: var(--font) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.btn:hover,
input[type="submit"]:hover,
.button:hover {
  background: var(--blue-hover) !important;
}

/* ---- Pagination ---- */
.pagination a,
.pagination span,
.page-numbers {
  color: var(--ink) !important;
  border: 0 !important;
  font-size: 16px !important;
}

.pagination .current,
.page-numbers.current {
  background: var(--blue) !important;
  color: #fff !important;
}

/* ---- Sidebar widgets ---- */
.widget__title,
.widget__title h2,
.widget__title h3,
.widget--sidebar__title,
.widget--sidebar__title h2,
.widget--footer__title h3 {
  background: none !important;
  color: var(--ink) !important;
  font-size: var(--step-title) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  padding: 0 !important;
  text-transform: none !important;
}

/* ---- Footer ---- */
.footer-wrapper,
.site__footer,
.footer__sidebar,
.footer__copyright,
.site__stats {
  background: var(--night) !important;
  color: var(--night-ink) !important;
}

.site__footer a,
.site__footer .footer-menu a,
.footer-copyright a {
  color: var(--night-ink) !important;
  font-size: 16px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.site__footer a:hover {
  text-decoration: underline;
}

.site__footer .widget__title,
.site__footer .widget--footer__title h3,
.site__footer .hN {
  color: var(--night-ink) !important;
}

.site__footer p,
.site__footer .textwidget {
  color: var(--night-ink) !important;
  font-size: 16px !important;
}

.back-to-top a {
  background: var(--night) !important;
  color: var(--night-ink) !important;
}

/* ---- Layout: hero gets air, article lists become a card grid ---- */
.featured-area {
  margin-bottom: 0;
}

.classic {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px 32px;
}

/*
 * Native ad slots sit between the articles as grid items. Empty, they would be a blank cell, so they leave the
 * grid (but are not display: none, the ad network loads them lazily and needs a box); filled, they are a cell.
 */
.classic > [id^="traffective-ad-"]:not(:has(*)),
.classic > #inflow_div:not(:has(*)) {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.classic > div {
  margin: 0 !important;
  width: auto !important;
  display: flex;
  flex-direction: column;
}

.classic > div:first-child,
.classic > div:has([class*="Native"]) {
  grid-column: 1 / -1;
}

.classic .article--thumb.media,
.classic .article--thumb {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
}

.classic .media__img--rev,
.classic .media__body {
  float: none !important;
  display: block;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.classic .media__img--rev {
  margin-bottom: 16px !important;
}

.classic .media__img--rev .image-wrap {
  display: block;
  background: var(--surface);
}

.classic .article__category {
  margin-bottom: 6px;
}

.classic .article__title {
  margin-bottom: 10px !important;
  height: auto !important;
}

.classic .article__content,
.classic .article__content p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 12px !important;
  font-size: 16px !important;
}

.classic .article__meta-links {
  margin: 0 !important;
}

/* the lead story runs the full width: wide picture, big headline under it */
.classic > div:first-child .media__img--rev {
  margin-bottom: 20px !important;
}

.classic > div:first-child .article--thumb__title h3,
.classic > div:first-child .article--thumb__title h3.hN {
  font-size: clamp(36px, 24px + 2.2vw, 54px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.025em !important;
}

.classic > div:first-child .article__content,
.classic > div:first-child .article__content p {
  font-size: var(--step-lead) !important;
  line-height: 1.35 !important;
  -webkit-line-clamp: 3;
}

/* one picture ratio for the whole list */
.classic .media__img--rev .image-wrap {
  position: relative;
  aspect-ratio: 3 / 2;
  padding-top: 0 !important;
  overflow: hidden;
}

.classic > div:first-child .media__img--rev .image-wrap {
  aspect-ratio: 2 / 1;
}

.classic .media__img--rev .image-wrap img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100% !important; /* the parent theme sets height: auto !important on .image-wrap img */
  object-fit: cover;
}

@media only screen and (max-width: 640px) {
  .classic {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

}

.recent-mag-grid.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-left: 0;
}

.recent-mag-grid.grid > .recent-mag {
  width: auto;
  padding: 0;
  margin: 0;
}

.recent-mag-grid .issue_teaser.hp_teaser {
  height: 100%;
  margin: 0 !important;
}

.issue_teaser.hp_teaser .issue_teaser_more_links li:after,
.issue_teaser.hp_teaser .issue_teaser_more_links li:before {
  content: none !important;
}

@media only screen and (max-width: 768px) {
  .recent-mag-grid.grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Card grid (Interviews, Praxistipps, Reisen ...) ---- */
.posts-grid-cards.grid {
  margin-bottom: 0;
}

.article--grid {
  margin-bottom: 40px !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important; /* taste-skill-ignore */
  text-align: left !important;
}

.article--grid:after,
.article--grid__thumb:before,
.article--grid__meta:before,
.article--grid__title:after {
  content: none !important;
  display: none !important;
}

.article--grid__header a {
  text-decoration: none;
}

.article--grid__thumb {
  margin: 0 0 16px !important;
}

.article--grid__thumb .image-wrap {
  position: relative;
  aspect-ratio: 3 / 2;
  padding-top: 0 !important;
  overflow: hidden;
  background: var(--surface);
}

.article--grid__thumb .image-wrap img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100% !important; /* the parent theme sets height: auto !important on .image-wrap img */
  object-fit: cover;
}

.article--grid__title,
.article--grid__title h3,
.article--grid__title h3.hN {
  background: none !important;
  text-align: left !important;
  padding: 0 !important;
  margin: 0 0 10px !important;
  color: var(--ink) !important;
}

.article--grid__header:hover .article--grid__title h3 {
  background: none !important;
  color: var(--blue) !important;
}

.article--grid__body,
.article--grid__body .article__content {
  padding: 0 !important;
  text-align: left !important;
}

.article--grid__meta {
  padding: 0 !important;
  margin: 12px 0 0 !important;
}

.article--grid__meta .split {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
}

.article__meta-links {
  margin-left: 0 !important;
}

.article__meta-links li {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* ---- Footer: one full-width night band ---- */
.footer-wrapper {
  width: auto !important;
  margin: 0 !important;
  background: var(--night) !important;
  margin-top: var(--section-gap) !important;
}

.footer-wrapper .emsBCwp,
.site__footer .container {
  background: none !important;
}

.site__stats {
  display: none;
}

.site__footer {
  max-width: 1406px;
  margin: 0 auto !important;
  padding: 56px 0 24px;
}

.site__footer .widget__title span,
.site__footer .widget__title h3 span {
  color: inherit !important;
}

.site__footer .btn-list a,
.site__footer .pixcode--icon.square {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--night-ink) !important;
  border: 0 !important;
}

.site__footer .btn-list a:hover,
.site__footer .pixcode--icon.square:hover {
  background: var(--blue) !important;
}

.footer__copyright,
.footer__copyright .flexbox {
  border: 0 !important;
}

.issue_teaser.hp_teaser .issue_excerpt {
  max-height: none !important;
  height: auto !important;
}

.posts-grid-cards article,
.article--grid,
.article--grid__meta,
.article--grid__body {
  border: 0 !important;
  box-shadow: none !important; /* taste-skill-ignore */
}

.article--grid {
  display: flex;
  flex-direction: column;
  height: calc(100% - 40px);
}

.article--grid__meta {
  margin-top: auto !important;
  padding-top: 12px !important;
}

.article--grid__body .article__content,
.article--grid__body .article__content p {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 !important;
  font-size: 16px !important;
}

.site__footer .container {
  margin: 0 !important;
  max-width: none;
}

/* ---- One typeface everywhere (icon fonts are left alone) ---- */
:where(p, a, li, blockquote, strong, em, b, i, td, th, label, figcaption, dd, dt, h1, h2, h3, h4, h5, h6, input, button, textarea, select, div, span, small, cite):not([class*="icon"]):not([class*="fa-"]):not(.pixcode) {
  font-family: var(--font) !important;
}

/* ---- Titles that sit on a photograph stay light ---- */
.image-wrap .article__title,
.image-wrap .article__title h3,
.image-wrap .article__title h3.hN,
.heroslider .article__title,
.heroslider .article__title h3,
.heroslider .article__title h3.hN,
.heroslider .article__title a,
.heroslider h3.hN {
  color: #fff !important;
}

.heroslider .article__title,
.image-wrap > .article__title {
  background: linear-gradient(0deg, rgba(8, 14, 24, 0.82), rgba(8, 14, 24, 0)) !important; /* taste-skill-ignore */
}

.heroslider .article__title h3,
.heroslider h3.hN {
  font-size: clamp(24px, 17.6px + 1.4vw, 36px) !important;
  line-height: 1.08 !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

/* quoted "Lesen Sie auch" boxes */
.advice-quote,
blockquote,
.advice-quote a {
  font-family: var(--font) !important;
}

.advice-quote,
blockquote.advice-quote {
  background: var(--surface) !important;
  border: 0 !important;
  padding: 20px 24px !important;
  color: var(--ink) !important;
}

/* category slider (RoyalSlider) */
.pixslider .article__title,
.pixslider .article__title h2,
.pixslider .article__title h2.hN,
.pixslider .article__title a,
.image-wrap .article__title h2,
.image-wrap .article__title h2.hN {
  color: #fff !important;
}

.pixslider .article__title {
  background: linear-gradient(0deg, rgba(8, 14, 24, 0.82), rgba(8, 14, 24, 0)) !important; /* taste-skill-ignore */
  padding: 96px var(--gutter) var(--gutter) !important;
}

.pixslider .article__title h2.hN {
  font-size: clamp(24px, 17.6px + 1.4vw, 36px) !important;
  line-height: 1.08 !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

.category__featured-posts {
  margin-bottom: 0;
}

.archive__side-title,
.archive__side-title.beta {
  display: inline-block;
  background: none !important;
  color: var(--ink-soft) !important;
  font-size: var(--step-lead) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-left: 16px;
}

/* ---- Breadcrumbs: plain text, no arrow ribbons ---- */
ul.breadcrumbs {
  overflow: visible;
  margin: 0 0 24px;
}

ul.breadcrumbs li > span,
ul.breadcrumbs li > a,
ul.breadcrumbs li > h1,
body.has-smash ul.breadcrumbs li span,
body.has-smash ul.breadcrumbs li a,
ul.breadcrumbs li:last-child span,
ul.breadcrumbs li:last-child a,
ul.breadcrumbs li:last-child h1 {
  background: none !important;
  padding: 0 !important;
  color: var(--blue) !important;
  font-size: var(--step-small) !important;
  font-weight: 600;
  line-height: 1.4 !important;
}

ul.breadcrumbs li:last-child span,
ul.breadcrumbs li:last-child a,
ul.breadcrumbs li:last-child h1 {
  color: var(--ink-soft) !important;
  font-weight: 400;
}

ul.breadcrumbs li > span:before,
ul.breadcrumbs li > span:after,
ul.breadcrumbs li > a:before,
ul.breadcrumbs li > h1:before,
ul.breadcrumbs li > h1:after {
  content: none !important;
  display: none !important;
}

ul.breadcrumbs li > a:after {
  content: "/" !important;
  position: static;
  display: inline-block;
  width: auto;
  height: auto;
  margin: 0 10px;
  border: 0 !important;
  color: var(--ink-soft);
  font-weight: 400;
}

ul.breadcrumbs li:last-child > a:after {
  content: none !important;
}

/* ---- Pagination ---- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  text-align: center !important;
  margin: 56px auto 0 !important;
  padding: 0 !important;
}

.pagination a,
.pagination span {
  padding: 8px 14px !important;
  margin: 0 !important;
}

.pagination li a:hover,
.pagination li a:focus-visible {
  background: var(--blue) !important;
  color: #fff !important;
}

/* ---- Footer alignment and title ---- */
.site__footer {
  max-width: none !important;
  margin: 0 !important;
  padding: 56px 17px 24px !important;
}

.widget--footer__title h3,
.widget--footer__title h3 * {
  color: var(--night-ink) !important;
}

@media only screen and (min-width: 900px) {
  .navigation.navigation--main .nav--main > li.nav__item:first-child > a,
  .navigation.navigation--main .nav--main .nav__item.depth-0:first-child .main-menu-link {
    padding-left: 0 !important;
    padding-right: 12px !important;
    width: auto !important;
  }

  .navigation.navigation--main .nav--main > li.nav__item:first-child > a::after {
    left: 0;
  }
}

/* nav spans exactly the content width: first item flush left, Smash flush right */
@media only screen and (min-width: 900px) {
  .navigation.navigation--main .nav--main {
    justify-content: space-between;
  }

  .navigation.navigation--main .nav--main > li > a,
  .navigation.navigation--main .nav--main > li.nav__item:first-child > a {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .navigation.navigation--main .nav--main > li > a::after {
    left: 0;
    right: 0;
  }

  .navigation.navigation--main .nav--main > li:last-of-type > a {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

@media only screen and (min-width: 900px) {
  .navigation.navigation--main #menu-seiten-1 li:first-child a.menu-link.main-menu-link,
  .navigation.navigation--main .nav--main > li.nav__item:first-child > a.menu-link {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ---- Section headings: first one starts under the menu, one under a hero gets air ---- */
.heading.heading--main:first-child,
.grid__item > .heading.heading--main:first-child,
.container--main > [id^="traffective-ad-Mobile_Pos"]:first-child:not(:has(*)) + .heading.heading--main {
  margin-top: 0 !important;
}

.featured-area + .grid > .grid__item:first-child > .heading.heading--main:first-child {
  margin-top: var(--section-gap) !important;
}

.content-module {
  margin-bottom: var(--section-gap);
}

.sidebar > .widget:first-child,
.sidebar > .widget:first-child .widget__title {
  margin-top: 0;
}

.widget--main {
  margin-bottom: 40px;
}

/* the theme's clearfix pseudo-elements would act as flex items and keep Smash off the right edge */
@media only screen and (min-width: 900px) {
  .navigation.navigation--main .nav--main::before,
  .navigation.navigation--main .nav--main::after {
    display: none !important;
    content: none !important;
  }
}

/* an empty ad slot must not push the first sidebar widget down */
.sidebar .widget_jtsv_wp_widget_ads:has(> .ad_list > li > [style*="display: none"]) {
  margin: 0 !important;
  padding: 0 !important;
}

.sidebar .widget_jtsv_wp_widget_ads:has(> .ad_list > li > [style*="display: none"]) {
  display: block;
  height: 0;
  overflow: hidden;
}

/*
 * The sidebar only shows when it holds something: a filled ad slot (the ad network puts a creative into the
 * slot and removes display: none from it) or a widget that is not an ad. Without that it is hidden and the
 * content uses the full width, so the layout follows the ads by itself.
 */
.sidebar:not(:has(.widget:not(.widget_jtsv_wp_widget_ads))):not(:has(.ad_list > li > :not([style*="display: none"]) :is(iframe, ins, img, video, canvas, svg, a))) {
  display: none;
}

.grid:has(> .sidebar):not(:has(> .sidebar .widget:not(.widget_jtsv_wp_widget_ads))):not(:has(> .sidebar .ad_list > li > :not([style*="display: none"]) :is(iframe, ins, img, video, canvas, svg, a))) > .grid__item:not(.sidebar) {
  width: 100%;
}

/* article text keeps a readable line length without the sidebar */
.grid:has(> .sidebar):not(:has(> .sidebar .widget:not(.widget_jtsv_wp_widget_ads))):not(:has(> .sidebar .ad_list > li > :not([style*="display: none"]) :is(iframe, ins, img, video, canvas, svg, a))) > .post-article {
  max-width: 840px;
}

/* single Heft: gutter between the cover column and the article (the article must not carry .sidebar, the rules above would hide it) */
@media only screen and (min-width: 900px) {
  .heft-article {
    padding-left: 3.42857rem;
  }
}

/* the cover and the first line of the article start on the same level */
body.single .post-article.heft-article {
  padding-top: 0;
}

body.single .heft-article .article__category--single {
  margin-top: 0;
}

/* single Heft sidebar: cover, headline and the order/read links as flat tone steps (order and subscribe in brand blue) */
.single-heft-sidebar .widget {
  margin-bottom: 0;
}

.single-heft-sidebar .widget br {
  display: none;
}

.single-heft-sidebar .single-heft-featured-image {
  display: block;
  max-width: 320px;
  margin-bottom: 28px;
}

.single-heft-sidebar .single-heft-featured-image img {
  display: block;
  width: 100%;
  height: auto;
}

.single-heft-sidebar .widget__title {
  margin: 0 0 16px;
}

.single-heft-sidebar .widget__title h2 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
}

.single-heft-sidebar .widget ul {
  display: grid;
  gap: 4px;
  max-width: 320px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.single-heft-sidebar .widget li {
  display: block;
  float: none;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

.single-heft-sidebar .widget li a {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 12px 16px;
  background: var(--surface);
  color: var(--ink);
  font-size: var(--step-small);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.single-heft-sidebar .widget li a:hover,
.single-heft-sidebar .widget li a:focus-visible {
  background: var(--blue-hover);
  color: #fff;
}

.single-heft-sidebar .widget li:first-child a,
.single-heft-sidebar .widget li:last-child a {
  background: var(--blue);
  color: #fff;
}

.single-heft-sidebar .widget li:first-child a:hover,
.single-heft-sidebar .widget li:last-child a:hover {
  background: var(--blue-hover);
}

/* Heft archive: an even grid of covers (the floats left holes whenever a title wrapped), the title as plain text under the
   cover, the order/read links as flat tone steps like the single Heft sidebar */
.issue-archive-page {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 48px 24px;
  margin-bottom: var(--section-gap);
}

.issue-archive-page::before,
.issue-archive-page::after {
  content: none;
}

.issue-archive-page .issue-archive-page-item {
  /* two rows shared with the other cards of the row (cover + title, then the links), so the links line up
     however many lines a title takes */
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 14px;
  float: none;
  width: auto;
  margin: 0;
}

.issue-archive-page .issue-archive-page-item figure {
  display: block;
  margin: 0;
}

.issue-archive-page .issue-archive-page-image {
  background-color: var(--surface);
}

.issue-archive-page .issue-archive-page-caption {
  min-height: 0;
  padding: 14px 0 0;
  background: none;
  color: var(--ink);
  font-size: var(--step-small);
  font-weight: 600;
  line-height: 1.35;
}

.issue-archive-page figure a:hover .issue-archive-page-caption,
.issue-archive-page figure a:focus-visible .issue-archive-page-caption {
  background: none;
  color: var(--blue);
}

.issue-archive-page .issue-archive-page-infos {
  align-self: start;
  min-height: 0;
  margin-top: 0;
}

.issue-archive-page .issue-archive-page-buttons {
  display: grid;
  gap: 4px;
  width: auto;
  margin: 0;
  padding: 0;
}

.issue-archive-page .issue-archive-page-buttons li {
  display: block;
  width: auto;
  border: 0;
  background: var(--surface);
  color: var(--ink);
}

.issue-archive-page .issue-archive-page-buttons li:first-child:not(:last-child) {
  background: var(--blue);
}

.issue-archive-page .issue-archive-page-buttons li:hover,
.issue-archive-page .issue-archive-page-buttons li:focus-within {
  background: var(--blue-hover);
}

.issue-archive-page .issue-archive-page-buttons a {
  display: block;
  padding: 12px 16px;
  color: inherit;
  font-size: var(--step-small);
  font-weight: 600;
  text-align: left;
  text-transform: none;
}

.issue-archive-page .issue-archive-page-buttons li:first-child:not(:last-child) a,
.issue-archive-page .issue-archive-page-buttons li:hover a,
.issue-archive-page .issue-archive-page-buttons li:focus-within a {
  color: #fff;
}

@media only screen and (max-width: 767px) {
  .issue-archive-page {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 16px;
  }
}

/* ---- Small screens ---- */
.block-list > li,
.block-list--alt > li {
  border: 0 !important;
}

@media only screen and (max-width: 768px) {
  .recent-mag-grid .issue_teaser.hp_teaser,
  .issue_teaser.hp_teaser {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible;
  }
}

@media only screen and (max-width: 899px) {
  .recent-mag,
  .recent-mag.sport-mag {
    height: auto !important;
    margin-bottom: 0 !important;
  }

  .recent-mag-grid {
    margin-bottom: 0;
  }
}

/* ==== Round 2: homepage fixes ==== */

/* card grid: real grid, boxed title overlapping the picture, meta in normal flow */
.posts-grid-cards.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 24px;
  margin-left: 0;
  margin-bottom: 0;
}

.posts-grid-cards.grid:empty,
.posts-grid-cards.grid > :empty {
  display: none;
}

.posts-grid-cards.grid > .grid__item {
  width: auto;
  float: none;
  padding: 0;
  margin: 0;
}

.posts-grid-cards .article--grid {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0 !important;
}

.article--grid__header {
  display: block;
}

.article--grid__thumb {
  position: relative;
  margin: 0 !important;
}

.article--grid__title,
.article--grid__title.flush--top {
  position: relative;
  z-index: 2;
  margin: -40px 24px 0 0 !important;
  padding: 18px 20px !important;
  background: var(--night) !important;
  transition: background-color 0.2s ease;
}

.article--grid__title h3,
.article--grid__title h3.hN {
  margin: 0 !important;
  color: #fff !important;
  font-size: var(--step-title) !important;
  line-height: 1.12 !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
}

.article--grid__header:hover .article--grid__title {
  background: var(--blue) !important;
}

.article--grid__header:hover .article--grid__title h3 {
  color: #fff !important;
}

.article--grid__body {
  padding: 16px 0 0 !important;
}

.article--grid__meta {
  margin: auto 0 0 !important;
  padding: 14px 0 0 !important;
}

@media only screen and (max-width: 899px) {
  .posts-grid-cards.grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 560px) {
  .posts-grid-cards.grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* footer: a box that lines up with the page content, not full bleed */
.footer-wrapper {
  width: auto !important;
  max-width: 1406px;
  margin: var(--section-gap) auto 0 !important;
  background: none !important;
}

.site__footer {
  max-width: 1096px !important;
  margin: 0 !important;
  padding: 48px 0 24px !important;
  background: var(--night) !important;
}

.site__stats {
  display: block;
  background: none !important;
}

.site__stats .container {
  text-align: right;
}

.back-to-top a,
.back-to-top a:hover {
  background: none !important;
  color: var(--ink) !important;
  font-size: var(--step-small) !important;
  text-transform: none !important;
}

/* parent pins the meta row to the card bottom (position:absolute); keep it in the flow */
.flexbox .posts-grid-cards article .article__meta,
.posts-grid-cards article .article__meta,
.posts-grid-cards article .article--grid__meta {
  position: static !important;
  width: auto !important;
  margin: auto 0 0 !important;
}

.flexbox .posts-grid-cards article .article--grid__body,
.posts-grid-cards article .article--grid__body {
  padding-bottom: 0 !important;
}

.article--grid__thumb {
  z-index: auto !important;
}

.article--grid__title,
.article--grid__title.flush--top {
  z-index: 30 !important;
}

/* card title boxes: calmer size, same minimum height per row */
.article--grid__title h3,
.article--grid__title h3.hN {
  font-size: 20px !important;
}

.article--grid__title,
.article--grid__title.flush--top {
  min-height: 104px;
}

/* footer spacing */
.footer-wrapper {
  margin-top: 24px !important;
}

.site__footer {
  padding-top: 32px !important;
}

.site__stats,
.site__stats .container,
.site__stats .emsBCwp {
  border: 0 !important;
  box-shadow: none; /* taste-skill-ignore */
}

/* ==== Round 3 ==== */

/* card titles: back to plain text under the picture (no box) */
.article--grid__title,
.article--grid__title.flush--top {
  margin: 16px 0 0 !important;
  padding: 0 !important;
  min-height: 0;
  background: none !important;
}

.article--grid__title h3,
.article--grid__title h3.hN {
  color: var(--ink) !important;
  font-size: var(--step-lead) !important;
  line-height: 1.12 !important;
}

.article--grid__header:hover .article--grid__title {
  background: none !important;
}

.article--grid__header:hover .article--grid__title h3 {
  color: var(--blue) !important;
}

.article--grid__body {
  padding-top: 10px !important;
}

/* section headings (News, Interviews, Praxistipps, Tennis-Reisen ...): a flat box again, set bigger */
.heading.heading--main,
.heading--main {
  display: inline-block !important;
  background: var(--night) !important;
  padding: 10px 22px 12px !important;
  margin: var(--section-gap) 0 32px !important;
}

.heading.heading--main:first-child,
.grid__item > .heading.heading--main:first-child {
  margin-top: 0 !important;
}

.heading.heading--main h2,
.heading.heading--main h1,
.heading--main h2.hN,
.heading--main h1.hN,
.container--main.sky .heading--main h1.hN {
  display: inline-block;
  color: #fff !important;
  font-size: var(--step-title) !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
}

/* links inside the dark heading box (author name): the global blue hover would vanish on the dark background */
.heading--main a,
.heading--main a:hover,
.heading--main a:focus {
  color: #fff !important;
}

.heading--main a:hover,
.heading--main a:focus {
  text-decoration: underline;
}

.archive__side-title,
.archive__side-title.beta {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: var(--step-body) !important;
  margin-left: 14px;
}

/* footer: the band runs full width, its content lines up with the page content */
.footer-wrapper {
  width: auto !important;
  max-width: none !important;
  margin: 24px 0 0 !important;
  background: var(--night) !important;
}

.site__footer {
  max-width: 1406px !important;
  margin: 0 auto !important;
  padding: 40px 17px 24px !important;
  background: none !important;
}

.site__footer .footer__sidebar .container,
.site__footer .footer__copyright .container {
  max-width: 1096px;
  margin: 0 !important;
}

.site__stats .container {
  max-width: 1096px;
}

.site__footer {
  padding: 40px 0 24px !important;
}

.site__stats .emsBCwp,
.site__stats .container-wrapper,
.back-to-top {
  background: none !important;
}

/* long German compounds wrap with a hyphen instead of breaking mid-word */
.article--grid__title h3,
.article--thumb__title h3,
.article__title h3,
.issue_headline a {
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

.heading.heading--main {
  display: inline-flex !important;
  align-items: baseline;
}

.heading.heading--main .archive__side-title {
  margin-bottom: 0;
  line-height: 1.1;
}

/* ==== Round 4: category and date sit together, above the headline ==== */

/* 3-up cards: picture, then category + date, then headline, then text */
.posts-grid-cards .article--grid__header,
.posts-grid-cards .article--grid__header > a {
  display: contents;
}

.posts-grid-cards .article--grid__thumb {
  order: 1;
}

.posts-grid-cards .article--grid__meta,
.flexbox .posts-grid-cards article .article--grid__meta {
  order: 2;
  margin: 14px 0 0 !important;
  padding: 0 !important;
}

.posts-grid-cards .article--grid__title,
.posts-grid-cards .article--grid__title.flush--top {
  order: 3;
  margin: 6px 0 0 !important;
}

.posts-grid-cards .article--grid__body {
  order: 4;
}

.article--grid__meta .split {
  justify-content: flex-start;
  gap: 14px;
}

.article--grid__meta .article__category,
.article--grid__meta .split__title {
  margin: 0;
}

/* list rows (News, category pages) and the hero side list: category and date on one line */
.classic .article--thumb .media__body,
.featured-area__aside .article--thumb .media__body {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  align-items: baseline;
  align-content: start;
}

.classic .article--thumb .media__body > .article__category,
.featured-area__aside .article--thumb .media__body > .article__category {
  grid-column: 1;
  grid-row: 1;
  margin: 0 0 6px;
}

.classic .article--thumb .media__body > .article__meta-links,
.featured-area__aside .article--thumb .media__body > .article__meta-links {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  gap: 12px;
  margin: 0 0 6px !important;
  padding: 0;
}

.classic .article--thumb .media__body > .article__title,
.featured-area__aside .article--thumb .media__body > .article__title {
  grid-column: 1 / -1;
  grid-row: 2;
}

.classic .article--thumb .media__body > .article--grid__body,
.classic .article--thumb .media__body > .article__content {
  grid-column: 1 / -1;
  grid-row: 3;
}

/* author bylines ("Eine Kolumne von ...") are long: keep them on their own line under the headline */
.article--thumb .media__body > .article__meta-links:has(a[rel="author"]) {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  margin: 8px 0 0 !important;
}

/* card headlines a touch smaller so long compounds fit the column */
.article--grid__title h3,
.article--grid__title h3.hN {
  font-size: clamp(20px, 17px + 0.35vw, 22px) !important;
}

/* ==== Newsletter form (plugin jm-newsletter) ==== */
.jm-newsletter,
.jm-newsletter {
  container-type: inline-size;
  padding: 28px !important;
  background: var(--night) !important;
  color: var(--night-ink);
}

.jm-newsletter__form {
  display: grid;
  gap: 24px;
  margin: 0;
}

.jm-newsletter__form .jm-newsletter__title {
  margin: 0 0 12px;
  color: var(--night-ink) !important;
  font-size: var(--step-title) !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.015em;
  text-transform: none !important;
}

.jm-newsletter__form .jm-newsletter__lead,
.jm-newsletter p {
  margin: 0;
  font-weight: 400 !important;
  color: var(--night-ink) !important;
  font-size: 16px;
  line-height: 1.5;
}

.jm-newsletter__form .jm-newsletter__label {
  position: absolute;
  width: 1px;
  height: 1px; /* taste-skill-ignore: visually hidden label */
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.jm-newsletter__form .jm-newsletter__row {
  display: grid;
  gap: 12px;
}

.jm-newsletter__form .jm-newsletter__input {
  width: 100%;
  height: 54px;
  margin: 0;
  padding: 0 16px;
  border: 0 !important;
  border-radius: 0;
  background: #fff !important;
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  box-shadow: none; /* taste-skill-ignore */
}

.jm-newsletter__form .jm-newsletter__input::placeholder {
  color: var(--ink-soft);
}

.jm-newsletter__form .jm-newsletter__input:focus-visible,
.jm-newsletter__form .jm-newsletter__consent input:focus-visible,
.jm-newsletter__form .jm-newsletter__button:focus-visible {
  outline: 3px solid #9cc6f2;
  outline-offset: 2px;
}

.jm-newsletter__form .jm-newsletter__button {
  height: 54px;
  margin: 0;
  padding: 0 24px;
  border: 0 !important;
  border-radius: 0;
  background: #fff !important;
  color: var(--night) !important;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.jm-newsletter__form .jm-newsletter__button:hover {
  background: var(--surface) !important;
}

.jm-newsletter__form .jm-newsletter__button:active {
  transform: translateY(1px);
}

.jm-newsletter__form .jm-newsletter__button:disabled {
  opacity: 0.6;
  cursor: default;
}

.jm-newsletter__form .jm-newsletter__consent {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin: 16px 0 0;
  color: var(--night-ink);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 400;
  cursor: pointer;
}

.jm-newsletter__form .jm-newsletter__consent input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: #fff;
}

.jm-newsletter__form .jm-newsletter__consent a {
  color: var(--night-ink) !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.jm-newsletter__form .jm-newsletter__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px; /* taste-skill-ignore: honeypot */
  overflow: hidden;
}

.jm-newsletter__form .jm-newsletter__status {
  min-height: 24px;
  margin: 14px 0 0;
  font-size: 16px;
  font-weight: 600;
}

.jm-newsletter__form .jm-newsletter__status[data-type="error"] {
  color: #ffb4a8 !important;
}

.jm-newsletter__form .jm-newsletter__status[data-type="success"] {
  color: #b8f0c8 !important;
}

.jm-newsletter__form.is-done .jm-newsletter__row,
.jm-newsletter__form.is-done .jm-newsletter__consent {
  display: none;
}

/* wide placement (a section between content blocks): text left, form right */
@container (min-width: 760px) {
  .jm-newsletter__form {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 48px;
    align-items: center;
  }

  .jm-newsletter__form .jm-newsletter__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* ==== Newsletter block (home between sections, end of an article) ==== */
.jm-newsletter-block {
  margin: var(--section-gap) 0;
  scroll-margin-top: 88px;
}

/* the sticky bar (small logo + menu) is 110px high on desktop; keep the block clear of it with some air */
@media only screen and (min-width: 900px) {
  .jm-newsletter-block {
    scroll-margin-top: 140px;
  }
}

.jm-newsletter-block .jm-newsletter {
  margin: 0;
}

.jm-newsletter__status:empty {
  display: none;
}

/* ==== Slider (hotel guide, hotel pages) ==== */
.swiper-container {
  background: var(--surface);
}

.swiper-container .swiper-slide a {
  height: clamp(240px, 36vw, 440px);
  text-decoration: none;
}

/* Image slides (hotel gallery): mixed portrait/landscape photos must not stretch the slider */
.swiper-container .swiper-slide > img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.swiper-container .swiper-slide a > div {
  right: auto;
  bottom: 0;
  left: 0;
  max-width: min(100%, 680px);
  padding: 20px 28px;
  background: var(--night);
  color: #fff;
  font: 600 var(--step-title) / 1.15 var(--font);
  letter-spacing: -0.01em;
  text-transform: none;
}

.swiper-container .swiper-slide a > div,
.swiper-container .swiper-slide a > div p,
.swiper-container .swiper-slide a > div smaller,
.swiper-container .swiper-slide a > div .stars {
  color: #fff !important;
}

.swiper-container .swiper-slide p smaller {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
}

.swiper-container .swiper-slide .stars {
  display: block;
  margin-top: 8px;
  font-size: 16px;
  letter-spacing: 0;
}

.swiper-container .swiper-button-prev,
.swiper-container .swiper-button-next {
  top: auto;
  bottom: 0;
  left: auto;
  width: 56px;
  height: 56px;
  margin: 0;
  display: grid;
  place-items: center;
  background: var(--paper) !important;
  background-image: none !important;
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  text-shadow: none; /* taste-skill-ignore: resets the parent theme shadow */
  transition: background-color 0.15s ease, color 0.15s ease;
}

.swiper-container .swiper-button-next {
  right: 0;
}

.swiper-container .swiper-button-prev {
  right: 56px;
}

.swiper-container .swiper-button-prev:hover,
.swiper-container .swiper-button-next:hover {
  background: var(--blue) !important;
  color: #fff;
}

.swiper-container .swiper-button-prev:active,
.swiper-container .swiper-button-next:active {
  transform: translateY(1px);
}

@media only screen and (max-width: 640px) {
  .swiper-container .swiper-slide a > div {
    max-width: calc(100% - 112px);
    padding: 14px 18px;
  }
}

/* ---- Footer: first row is one line: text, social links, media partner badge on the far right ---- */
.footer__sidebar .footer__widget-area:first-of-type {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 40px;
  margin-left: 0;
  margin-bottom: 40px;
}

.footer__sidebar .footer__widget-area:first-of-type > .grid__item {
  float: none;
  width: auto;
  padding-left: 0;
}

.footer__sidebar .footer__widget-area:first-of-type > .grid__item:first-child {
  flex: 0 1 340px;
}

.footer__sidebar .footer__widget-area:first-of-type .widget {
  margin-bottom: 0;
}

.footer__sidebar .footer__widget-area:first-of-type > .footer__partner {
  margin-left: auto;
}

.footer-partner {
  display: block;
}

.footer-partner img {
  display: block;
  width: 118px;
  height: auto;
}

/* the social links widget only carries an empty title */
.widget_wpgrade_social_links .widget__title {
  display: none;
}

/* ==== Info text under a category (Smash) and closing text blocks of pages (Praxis, Reisen): a card instead of loose text ==== */
.archive-meta--note,
.content-module--note {
  margin: 56px 0 0;
  padding: clamp(24px, 4vw, 40px);
  background: var(--paper);
  border-top: 4px solid var(--smash);
}

.archive-meta--note p,
.content-module--note p {
  margin: 0 0 1em;
}

.archive-meta--note p:last-child,
.content-module--note p:last-child {
  margin-bottom: 0;
}

.archive-meta--note a,
.content-module--note a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.content-module--note {
  margin-top: 56px;
  border-top-color: var(--blue);
}

.content-module--note > :first-child {
  margin-top: 0;
}

/* ---- Sticky bar: the header logo scrolls away, so a small one sits centred above the menu ---- */
.sticky-logo {
  display: none;
}

@media only screen and (min-width: 900px) {
  .nav--main__wrapper.sticky .nav-sticky-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* style.css pins this to 1356px; on narrower screens it overflowed and pushed the centre to the right */
    width: auto;
    max-width: 1356px;
  }

  .nav--main__wrapper.sticky .sticky-logo {
    display: flex;
    justify-content: center;
    /* same width as the menu (.nav--main is capped at 1048px while sticky), left-aligned like it */
    box-sizing: border-box;
    width: 100%;
    max-width: 1048px;
    padding: 10px 0 4px;
    line-height: 0;
  }

  .nav--main__wrapper.sticky .sticky-logo img {
    display: block;
    width: auto;
    height: 40px;
  }
}

/* ---- Social links: inline SVG icons ---- */
.social-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  transition: color 0.15s linear, background-color 0.15s linear;
}

.social-icon-link .social-svg {
  display: block;
  width: 20px;
  height: 20px;
}

/* header bar: quiet icons, blue on hover */
.navigation--top .social-icon-link {
  width: 32px;
  height: 32px;
  color: var(--ink-soft) !important;
  background: transparent !important;
}

.navigation--top .social-icon-link:hover,
.navigation--top .social-icon-link:focus-visible {
  color: var(--blue) !important;
}

/* footer: round tone-step buttons that fill with blue on hover */
.site__footer .btn-list.social-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.site__footer .btn-list.social-list .social-icon-link {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--night-ink) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  text-decoration: none !important;
}

.site__footer .btn-list.social-list .social-icon-link:hover,
.site__footer .btn-list.social-list .social-icon-link:focus-visible {
  background: var(--blue-light) !important;
  color: #fff !important;
}

/* header icons: the links are inline-blocks in the theme, so the glyph sat at the top of the bar */
.navigation--top .header-bar--top .social-icon-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  line-height: 0 !important;
  vertical-align: top;
}

/* ==== Article pages ==== */
/* one reading column (45-75 characters a line), the picture runs wider than the text.
   Order: category, headline, byline, picture, lead, text. */
body.single {
  --column: 720px;
}

body.single .article_title--before {
  padding-bottom: 0;
}

body.single .article_title--before > *,
body.single .post-article > *:not(.jm-newsletter-block):not(.post-nav):not(.swiper-container):not(#comments):not(.comments-area):not(.hotelfuehrer-infobox):not(script):not(style) {
  max-width: var(--column);
  margin-left: auto;
  margin-right: auto;
}

body.single .post-article {
  max-width: none !important;
}

/* headline block */
body.single .article__category--single {
  margin: 8px auto 14px;
}

body.single .article__category--single a {
  margin-right: 14px;
}

body.single .article__title--single {
  margin-top: 0;
  margin-bottom: 18px;
  font-size: clamp(38px, 26px + 2.8vw, 62px) !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* pages without a byline (hotel guide): the headline needs air before the picture */
body.single .article__title--single:last-child {
  margin-bottom: clamp(24px, 3vw, 40px);
}

body.single .article__title__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
  margin-bottom: 32px;
  color: var(--ink-soft);
  font-size: var(--step-small);
}

body.single .article__title__meta .article__author-name,
body.single .article__title__meta .article__author-name a {
  font-size: var(--step-small);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

body.single .article__title__meta .article__author-name a:hover {
  color: var(--blue);
}

body.single .article__title__meta .article__author-name {
  display: flex;
  line-height: 1.4;
}

/* round avatar with a site-colored ring. The photo sits inside and is scaled up a little so
   the edge pixels of the (cropped) upload, which can be semi-transparent, stay outside the ring */
.avatar-ring {
  display: block;
  box-sizing: border-box;
  flex: none;
  overflow: hidden;
  border: 2px solid var(--blue);
  border-radius: 50%;
}

.avatar-ring img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  border: 0;
  object-fit: cover;
  transform: scale(1.04);
}

body.single .article__title__meta .article__author-name a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

body.single .article__title__meta .article__author-avatar {
  width: 40px;
  height: 40px;
  border-width: 2px;
}

body.single .article__title__meta .article__time {
  font-size: var(--step-small);
  line-height: 1.4;
  color: var(--ink-soft);
}

/* picture and caption */
body.single .article__featured-image .image-wrap {
  margin-bottom: 0;
}

body.single .article__featured-caption {
  margin: 10px 0 0 !important;
  background: none !important;
  padding: 0 !important;
}

body.single .article__featured-caption .wp-caption-text {
  margin: 0 !important;
  padding: 0 !important;
  font-size: var(--step-small) !important;
  line-height: 1.4 !important;
  font-style: normal !important;
  color: var(--ink-soft);
}

/* photo credit: a badge in the bottom right corner of the picture */
.img-credit-wrap {
  position: relative;
  display: block;
}

.img-credit {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 30;
  max-width: calc(100% - 16px);
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(12, 28, 48, 0.72);
  color: var(--night-ink);
  font-family: var(--font);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

body.single .article__featured-caption .wp-caption-text:empty {
  display: none;
}

/* body text */
body.single .post-article {
  padding-top: clamp(32px, 4vw, 56px);
}

body.single .post-article > p,
body.single .post-article > ul,
body.single .post-article > ol {
  font-size: var(--step-body);
  line-height: 1.7;
  color: var(--ink);
}

body.single .post-article > p {
  margin-top: 0;
  margin-bottom: 1.3em;
}

/* the bold first paragraph is the lead */
body.single .post-article > p:first-of-type:has(> :is(strong, b):only-child) {
  font-size: var(--step-lead);
  line-height: 1.4;
  margin-bottom: 1.4em;
}

body.single .post-article > p:first-of-type > :is(strong, b):only-child {
  font-weight: 600;
}

body.single .post-article > h2,
body.single .post-article > h3,
body.single .post-article > h4 {
  font-weight: 700 !important;
  line-height: 1.2;
  margin-top: 2.2em;
  margin-bottom: 0.6em;
}

body.single .post-article > h2 {
  font-size: clamp(28px, 22px + 1.3vw, 38px) !important;
}

body.single .post-article > h3 {
  font-size: clamp(23px, 19px + 0.9vw, 29px) !important;
}

body.single .post-article > ul,
body.single .post-article > ol {
  margin-top: 0;
  margin-bottom: 1.5em;
  padding-left: 1.3em;
}

body.single .post-article > ul > li,
body.single .post-article > ol > li {
  margin-bottom: 0.6em;
  padding-left: 0.2em;
}

body.single .post-article > p a,
body.single .post-article > ul a,
body.single .post-article > ol a {
  text-decoration: underline;
}

body.single .post-article > blockquote:not(.advice-quote) {
  margin-top: 2em;
  margin-bottom: 2em;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--step-lead);
  line-height: 1.35;
  font-weight: 600;
  color: var(--blue);
}

body.single .post-article > .advice-quote {
  margin-top: 2em;
  margin-bottom: 2em;
  float: none;
  width: auto;
}

body.single .post-article > .wp-caption,
body.single .post-article > figure {
  width: auto !important;
  max-width: var(--column);
  margin-top: 2em;
  margin-bottom: 2em;
}

body.single .post-article .wp-caption img,
body.single .post-article figure img {
  display: block;
  width: 100%;
  height: auto;
}

body.single .post-article .wp-caption-text {
  margin: 10px 0 0;
  padding: 0;
  font-size: var(--step-small);
  line-height: 1.4;
  font-style: normal;
  color: var(--ink-soft);
  background: none;
}

body.single .post-article > .wp-caption {
  background: none;
  border: 0;
  padding: 0;
}

/* tags: quiet chips under the text */
body.single .article--single__meta {
  margin-top: 2.5em;
  margin-bottom: 0;
  border: 0 !important;
  padding: 0;
}

body.single .article--single__meta .btn-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}

body.single .article--single__meta .btn-list > * {
  margin: 0;
}

body.single .article--single__meta .btn--secondary {
  background: none !important;
  color: var(--ink-soft) !important;
  padding: 0 6px 0 0 !important;
  font-size: var(--step-small) !important;
  font-weight: 600 !important;
}

body.single .article--single__meta .btn--tertiary {
  background: var(--surface) !important;
  color: var(--ink) !important;
  padding: 9px 16px !important;
  min-height: 40px;
  font-size: var(--step-small) !important;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
}

body.single .article--single__meta .btn--tertiary:hover,
body.single .article--single__meta .btn--tertiary:focus-visible {
  background: var(--blue) !important;
  color: #fff !important;
}

/* the heavy rule that closed the article */
body.single .post-article > hr,
body.single .post-article > .separator {
  display: none;
}

/* previous / next article */
body.single .post-nav {
  margin-top: var(--section-gap);
}

/* small screens */
@media only screen and (max-width: 768px) {
  body.single .article__title__meta {
    margin-bottom: 24px;
  }

  body.single .post-article > p:first-of-type:has(> :is(strong, b):only-child) {
    font-size: 20px;
  }
}

/* ==== Ranking plugin: shown when no ranking data is available ==== */
.jtsv-ranking-empty {
  margin: 32px 0;
  padding: 28px var(--gutter);
  background: var(--surface);
  border-left: 4px solid var(--blue);
}

.jtsv-ranking-empty strong {
  display: block;
  font-size: var(--step-lead);
  line-height: 1.2;
  color: var(--ink);
}

.jtsv-ranking-empty p {
  margin: 8px 0 0;
  color: var(--ink-soft);
}

/* ==== Back to top: dark link on the light band, up arrow, room above ==== */
.site__stats {
  padding-top: 40px;
}

.site__stats .container {
  text-align: right;
}

.back-to-top,
.back-to-top a {
  position: static !important;
}

.back-to-top a,
.back-to-top a:hover {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 !important;
  line-height: 1.5;
  font-weight: 600;
  color: var(--ink) !important;
  transition: color 0.15s;
}

.back-to-top a:before {
  content: "";
  position: static;
  order: 2;
  width: 8px;
  height: 8px;
  border: solid currentColor;
  border-width: 2px 2px 0 0;
  transform: translateY(2px) rotate(-45deg);
  transition: transform 0.15s;
}

.back-to-top a:after {
  content: none;
}

.back-to-top a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.back-to-top a:hover:before {
  border-color: var(--blue) !important;
  transform: translateY(-1px) rotate(-45deg);
}

.back-to-top a:focus-visible {
  outline: 3px solid var(--blue-light);
  outline-offset: 4px;
}

/* ==== Author box (author archive) ==== */
aside.author {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 24px clamp(20px, 3vw, 32px);
  margin: 0 0 clamp(32px, 4vw, 48px);
  padding: clamp(20px, 3vw, 32px);
  background: var(--paper);
  border-top: 4px solid var(--blue);
}

/* the parent theme's clearfix pseudo-elements would become extra grid items */
aside.author::before,
aside.author::after {
  content: none;
}

aside.author .author__avatar {
  float: none;
  margin: 0;
}

aside.author .author__avatar .avatar-ring {
  width: 96px;
  height: 96px;
  border-width: 3px;
}

aside.author .author__text {
  overflow: visible;
  min-width: 0;
}

aside.author:not(:has(.author__avatar)) {
  grid-template-columns: 1fr;
}

aside.author .author__title {
  margin: 0 0 12px;
  text-align: left;
}

aside.author .author__title .hN {
  font-family: var(--font);
  font-size: var(--step-title);
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
}

aside.author .author__title a {
  color: var(--ink);
  text-decoration: none;
}

aside.author .author__title a:hover {
  color: var(--blue);
}

aside.author .author__bio {
  max-width: 68ch;
  margin: 0;
  font-size: var(--step-small);
  line-height: 1.6;
  color: var(--ink-soft);
}

aside.author .author__social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

aside.author .author__social-links__list-item {
  margin: 0;
}

aside.author .author__social-link {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--blue);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--blue);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

aside.author .author__social-link:hover {
  background: var(--blue);
  color: #fff;
}

aside.author .author__social-link:focus-visible {
  outline: 3px solid var(--blue-light);
  outline-offset: 2px;
}

@media only screen and (max-width: 600px) {
  aside.author {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  aside.author .author__avatar .avatar-ring {
    width: 88px;
    height: 88px;
  }
}

/* ---- Tennis-ball accent ----
   The ball yellow marks the dark surfaces (section headings, footer, newsletter) and the hover state of the
   dark article titles. Light surfaces keep brand blue, because yellow text on them fails contrast. */
.heading.heading--main,
.heading--main {
  border-left: 6px solid var(--ball) !important;
}

.article--grid__header:hover .article--grid__title {
  background: var(--ball) !important;
}

.article--grid__header:hover .article--grid__title h3 {
  color: var(--night) !important;
}

.site__footer .widget__title,
.site__footer .widget--footer__title h3,
.site__footer .widget--footer__title h3 *,
.site__footer .hN {
  color: var(--ball) !important;
}

.site__footer a:hover,
.site__footer a:focus-visible,
.footer-copyright a:hover {
  color: var(--ball) !important;
}

.site__footer .btn-list a:hover,
.site__footer .pixcode--icon.square:hover,
.site__footer .btn-list.social-list .social-icon-link:hover,
.site__footer .btn-list.social-list .social-icon-link:focus-visible {
  background: var(--ball) !important;
  color: var(--night) !important;
}

.jm-newsletter__form .jm-newsletter__button {
  background: var(--ball) !important;
}

.jm-newsletter__form .jm-newsletter__button:hover {
  background: #e6f86a !important;
}

.jm-newsletter__form .jm-newsletter__input:focus-visible,
.jm-newsletter__form .jm-newsletter__consent input:focus-visible,
.jm-newsletter__form .jm-newsletter__button:focus-visible {
  outline-color: var(--ball);
}

/* ---- Court lines ----
   Thin white/ink lines borrowed from the court: a baseline with a T-end after each section heading,
   and corner marks on the hero picture. Decoration only. */
.heading.heading--main,
.heading--main {
  display: flex !important;
  align-items: center;
  gap: 16px;
  padding: 0 !important;
  background: none !important;
  border-left: 0 !important;
}

.heading.heading--main > .hN,
.heading--main > .hN {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  padding: 10px 22px 12px !important;
  background: var(--night) !important;
  border-left: 6px solid var(--ball);
}

.heading.heading--main::after,
.heading--main::after {
  content: "";
  flex: 1;
  height: 16px;
  background:
    linear-gradient(rgba(12, 28, 48, 0.22), rgba(12, 28, 48, 0.22)) left center / 100% 2px no-repeat,
    linear-gradient(rgba(12, 28, 48, 0.22), rgba(12, 28, 48, 0.22)) right center / 2px 100% no-repeat;
}

/* two L-shaped corner marks drawn by one pseudo-element (the parent theme owns .image-wrap:after as the preloader) */
.featured-area__article .image-wrap::before {
  content: "";
  position: absolute;
  inset: 16px;
  z-index: 25; /* the theme lifts the lazy-loaded image to z-index 20 */
  pointer-events: none;
  --mark: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85));
  background:
    var(--mark) left top / 28px 3px no-repeat,
    var(--mark) left top / 3px 28px no-repeat,
    var(--mark) right bottom / 28px 3px no-repeat,
    var(--mark) right bottom / 3px 28px no-repeat;
}

/* bouncing ball with a dashed flight path along the top of the footer: the rally dies out on the baseline.
   The drawing keeps its natural size and is cropped from the left on narrow screens, so the ball stays readable. */
.footer-rally {
  position: relative;
  height: 56px;
  max-width: 1048px;
  margin: 0 24px;
  overflow: hidden;
}

.footer-rally svg {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  max-width: none;
}

@media only screen and (max-width: 560px) {
  .footer-rally svg {
    left: -150px;
  }
}

/* the first footer widget is titled "tennis Magazin": the white logo replaces that text */
.site__footer .widget_text .widget--footer__title h3 {
  width: 150px;
  height: 56px;
  background: url(images/tennis_logo_weiss2x.png) left center / contain no-repeat !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* the footer blocks sit on the band's night ground */
.footer__sidebar,
.footer__copyright,
.site__stats {
  background: transparent !important;
}

/* ---- Headline type ----
   Condensed bold for every headline, Archivo stays for text, navigation and meta lines.
   Condensed letters are narrower at the same size, so the largest headlines get a bump. */
:is(h1, h2, h3, h4, h5, h6,
.hN,
.heading,
.article__title,
.article__title h3,
.article--thumb__title h3,
.issue_headline,
.issue_headline a,
.jm-newsletter__form .jm-newsletter__title,
aside.author .author__title,
aside.author .author__title .hN,
.archive__side-title):not([class*="icon"]):not([class*="fa-"]):not(.pixcode) {
  /* the :not() chain matches the specificity of the one-typeface rule above */
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

/* section heading boxes read like a scoreboard label */
.heading.heading--main > .hN,
.heading--main > .hN {
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

/* numbers line up: dates, page numbers, issue numbers */
time,
.article__meta,
.article__title__meta,
.pagination,
.pagination a,
.pagination span,
.issue_headline,
.jtsv-ranking-empty {
  font-variant-numeric: tabular-nums;
}

/* sizes tuned for the condensed headlines */
.heading.heading--main > .hN,
.heading--main > .hN {
  font-size: clamp(24px, 21px + 0.65vw, 30px) !important;
}

.issue_teaser.hp_teaser .issue_headline a,
.issue_teaser.hp_teaser .issue_headline a:hover {
  font-size: clamp(28px, 24px + 0.8vw, 32px) !important;
  line-height: 1.1 !important;
}

/* ---- Ranking: scoreboard ----
   [ranking] is the full table, [ranking_top] the compact night card for the home page or a sidebar. */
.jtsv-ranking {
  margin: 0 0 var(--section-gap);
  font-variant-numeric: tabular-nums;
}

.jtsv-ranking h3 {
  margin: 56px 0 16px;
}

.jtsv-ranking .jtsv-ranking__table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  border: 0 !important;
}

.jtsv-ranking .jtsv-ranking__table th,
.jtsv-ranking .jtsv-ranking__table td {
  padding: 8px 12px;
  border: 0 !important;
  vertical-align: middle;
  text-align: left;
}

.jtsv-ranking .jtsv-ranking__table thead th {
  background: var(--night) !important;
  color: var(--night-ink);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.jtsv-ranking .jtsv-ranking__table tbody td {
  background: var(--paper) !important;
  border-bottom: 1px solid var(--surface) !important;
  color: var(--ink);
}

.jtsv-ranking .jtsv-ranking__table tbody tr:hover td {
  background: var(--surface) !important;
}

.jtsv-ranking__rank {
  width: 72px;
}

.jtsv-ranking__rank span {
  display: inline-block;
  min-width: 40px;
  padding: 6px 8px 4px;
  background: var(--night);
  color: var(--night-ink);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.jtsv-ranking__row.is-top .jtsv-ranking__rank span {
  background: var(--ball);
  color: var(--night);
}

.jtsv-ranking .jtsv-ranking__table tbody .is-ger td {
  background: #f1f8c8 !important;
}

.jtsv-ranking .jtsv-ranking__table tbody .is-ger td:first-child {
  box-shadow: inset 4px 0 0 var(--ball);
}

.jtsv-ranking__move {
  width: 96px;
  font-weight: 600;
  white-space: nowrap;
}

.jtsv-ranking__change i {
  margin-right: 5px;
  font-size: 10px;
  font-style: normal;
  vertical-align: 1px;
}

.jtsv-ranking__change.is-up {
  color: #1b7a3a;
}

.jtsv-ranking__change.is-down {
  color: var(--smash);
}

.jtsv-ranking__name {
  font-size: 16px;
  font-weight: 600;
}

.jtsv-ranking__name .flag-icon {
  margin-right: 10px;
}

.jtsv-ranking .jtsv-ranking__name a {
  color: var(--ink);
  text-decoration: none;
}

.jtsv-ranking .jtsv-ranking__name a:hover {
  color: var(--blue);
  text-decoration: underline;
}

.jtsv-ranking .jtsv-ranking__table .jtsv-ranking__points,
.jtsv-ranking .jtsv-ranking__table .jtsv-ranking__age,
.jtsv-ranking .jtsv-ranking__table .jtsv-ranking__tourn {
  text-align: right;
}

.jtsv-ranking .jtsv-ranking__table td.jtsv-ranking__points {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
}

.jtsv-ranking .jtsv-ranking__table td.jtsv-ranking__age,
.jtsv-ranking .jtsv-ranking__table td.jtsv-ranking__tourn {
  color: var(--ink-soft);
}

.jtsv-ranking .rankingversion {
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: var(--step-small);
  text-align: right;
}

@media only screen and (max-width: 640px) {
  .jtsv-ranking .jtsv-ranking__table .jtsv-ranking__age,
  .jtsv-ranking .jtsv-ranking__table .jtsv-ranking__tourn {
    display: none;
  }

  .jtsv-ranking .jtsv-ranking__table th,
  .jtsv-ranking .jtsv-ranking__table td {
    padding: 8px 6px;
  }

  .jtsv-ranking .jtsv-ranking__table th.jtsv-ranking__move {
    font-size: 0; /* "Veränderung" is too long for a phone, the arrows explain themselves */
  }

  .jtsv-ranking__rank {
    width: 48px;
  }

  .jtsv-ranking__rank span {
    min-width: 34px;
    font-size: 19px;
  }

  .jtsv-ranking__move {
    width: 52px;
  }

  .jtsv-ranking .jtsv-ranking__table thead th {
    letter-spacing: 0.04em;
  }
}

/* compact card */
.jtsv-ranking--top {
  margin: 0;
  background: var(--night);
  color: var(--night-ink);
}

.jtsv-ranking__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
  border-left: 6px solid var(--ball);
}

.jtsv-ranking__title {
  color: var(--night-ink);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
}

.jtsv-ranking__stand {
  color: rgba(243, 245, 248, 0.64);
  font-size: 13px;
  white-space: nowrap;
}

.jtsv-ranking--top .jtsv-ranking__table tbody td {
  padding: 7px 8px;
  background: transparent !important;
  border-bottom: 1px solid rgba(243, 245, 248, 0.1) !important;
  color: var(--night-ink);
}

.jtsv-ranking--top .jtsv-ranking__table tbody tr:hover td {
  background: rgba(243, 245, 248, 0.06) !important;
}

.jtsv-ranking--top .jtsv-ranking__table tbody td:first-child {
  padding-left: 16px;
}

.jtsv-ranking--top .jtsv-ranking__table tbody td:last-child {
  padding-right: 16px;
}

.jtsv-ranking--top .jtsv-ranking__rank {
  width: 56px;
}

.jtsv-ranking--top .jtsv-ranking__rank span {
  min-width: 34px;
  padding: 5px 6px 3px;
  background: rgba(243, 245, 248, 0.12);
  font-size: 19px;
}

.jtsv-ranking--top .jtsv-ranking__row.is-top .jtsv-ranking__rank span {
  background: var(--ball);
}

.jtsv-ranking--top .jtsv-ranking__table tbody .is-ger td {
  background: rgba(198, 224, 26, 0.14) !important;
}

.jtsv-ranking--top .jtsv-ranking__name a {
  color: var(--night-ink);
}

.jtsv-ranking--top .jtsv-ranking__name a:hover {
  color: var(--ball);
}

.jtsv-ranking--top .jtsv-ranking__change.is-up {
  color: #7be08e;
}

.jtsv-ranking--top .jtsv-ranking__change.is-down {
  color: #ff8a80;
}

.jtsv-ranking--top .jtsv-ranking__name {
  font-size: 15px;
  white-space: nowrap;
}

.jtsv-ranking--top .jtsv-ranking__points .jtsv-ranking__change {
  margin-right: 10px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
}

.jtsv-ranking--top .jtsv-ranking__table td.jtsv-ranking__points {
  white-space: nowrap;
}

.jtsv-ranking__more {
  display: block;
  padding: 14px 16px;
  background: var(--ball);
  color: var(--night) !important;
  font-weight: 600;
  text-decoration: none !important;
}

.jtsv-ranking__more:hover {
  background: #e6f86a;
}

.jtsv-ranking__more::after {
  content: " →";
}


/* ---- Motion ----
   A ball-bounce easing (a small overshoot) on hover and press, a slow zoom on photographs, a bouncing
   "back to top" arrow and a reading progress bar with a rolling ball. All of it is off for people who ask
   for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  :root {
    --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .article--grid__title {
    transition: background-color 0.2s ease, transform 0.35s var(--bounce);
  }

  .article--grid__header:hover .article--grid__title {
    transform: translateY(-6px);
  }

  .article--grid__thumb .image-wrap,
  .featured-area__article .image-wrap,
  .classic .media__img--rev .image-wrap {
    overflow: hidden;
  }

  .article--grid__thumb .image-wrap img,
  .featured-area__article .image-wrap img,
  .classic .media__img--rev .image-wrap img {
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .article--grid__header:hover .image-wrap img,
  .featured-area__article .image-wrap:hover img,
  .classic .media__img--rev .image-wrap:hover img {
    transform: scale(1.04);
  }

  .btn,
  button.btn,
  input[type="submit"],
  .button,
  a.button,
  .jm-newsletter__form .jm-newsletter__button,
  .issue_teaser.hp_teaser .issue_teaser_links li a {
    transition: background-color 0.15s ease, transform 0.25s var(--bounce);
  }

  .btn:active,
  button.btn:active,
  input[type="submit"]:active,
  .button:active,
  a.button:active,
  .jm-newsletter__form .jm-newsletter__button:active,
  .issue_teaser.hp_teaser .issue_teaser_links li a:active {
    transform: scale(0.96);
  }

  .back-to-top a:hover:before {
    animation: arrow-bounce 0.7s ease-out;
  }

  @keyframes arrow-bounce {
    0%, 100% { transform: translateY(-1px) rotate(-45deg); }
    25% { transform: translateY(-7px) rotate(-45deg); }
    50% { transform: translateY(-1px) rotate(-45deg); }
    70% { transform: translateY(-4px) rotate(-45deg); }
  }
}

/* reading progress (single posts): js/reading-progress.js adds the element */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  width: 100%;
  height: 4px;
  pointer-events: none;
}

.reading-progress__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: var(--ball);
  box-shadow: 0 1px 0 rgba(12, 28, 48, 0.3);
  transform: scaleX(0);
  transform-origin: left center;
}

.reading-progress__ball {
  position: absolute;
  top: 3px;
  left: 0;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14.5' fill='%23c6e01a' stroke='%230c1c30' stroke-width='1.5'/%3E%3Cpath d='M4.5 6.5C10 10 10 22 4.5 25.5M27.5 6.5C22 10 22 22 27.5 25.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.reading-progress.is-active .reading-progress__ball {
  opacity: 1;
}


/* ---- No dotted lines ----
   The parent theme draws dotted outlines and borders (focused links, top-bar separators, table rows, comments);
   here they are gone or solid hairlines. Keyboard focus keeps its blue ring (a:focus-visible above). */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
  outline: 0;
}

.nav--top > li + li > a:before {
  content: none !important;
  border: 0 !important;
}

table tr,
.table--bordered tr {
  border-top: 1px solid var(--surface);
}

.jtsv-ranking .jtsv-ranking__table tr {
  border: 0 !important;
}

.comments-area-title,
li.comment + li.comment,
li.pingback + li.comment,
li.comment + li.pingback,
li.pingback + li.pingback,
.separator--dotted {
  border-style: solid;
  border-color: var(--surface);
}

/* ---- Previous / next article: a tennis ball between the two links ---- */
.post-nav .divider--pointer {
  width: 20px;
  height: 20px;
  margin: -10px 0 0 2px; /* -10px centres the ball; +12px because the links pad 24px right and 48px left, so the visible gap sits right of centre */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14.5' fill='%23c6e01a' stroke='%230c1c30' stroke-width='1.5'/%3E%3Cpath d='M4.5 6.5C10 10 10 22 4.5 25.5M27.5 6.5C22 10 22 22 27.5 25.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  .post-nav .divider--pointer {
    transition: transform 0.6s var(--bounce);
  }

  .post-nav:hover .divider--pointer {
    transform: rotate(360deg);
  }
}


/* ---- Visual language: cut corners and ball markers ---- */
/* hero picture: the top right corner is cut on the diagonal, like a court corner seen in perspective */
.featured-area__article .image-wrap {
  clip-path: polygon(0 0, calc(100% - 56px) 0, 100% 56px, 100% 100%, 0 100%);
}

/* dark boxes (section headings, card titles) get one slanted edge, like a scoreboard tab */
.heading.heading--main > .hN,
.heading--main > .hN {
  padding-right: 36px !important;
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
}

.article--grid__title {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

/* category labels start with a small ball */
.article__category::before,
.profile-tax a::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 7px;
  vertical-align: -1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14.5' fill='%23c6e01a' stroke='%230c1c30' stroke-width='2'/%3E%3Cpath d='M4.5 6.5C10 10 10 22 4.5 25.5M27.5 6.5C22 10 22 22 27.5 25.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* article lists use the ball as bullet */
body.single .post-article > ul {
  list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14.5' fill='%23c6e01a' stroke='%230c1c30' stroke-width='2'/%3E%3Cpath d='M4.5 6.5C10 10 10 22 4.5 25.5M27.5 6.5C22 10 22 22 27.5 25.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* ---- Turnierkalender ([turnierkalender], see lib/turnierkalender.php) ----
   Night cards, the left stripe carries the court surface (hard blue, sand, grass). */
.turnierkalender {
  margin: 0 0 var(--section-gap);
}

.turnierkalender .heading.heading--main {
  margin-top: 0 !important;
}

.turnierkalender__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.turnierkalender__item {
  --surface-color: #1f73bd;
  margin: 0;
  padding: 0;
}

.turnierkalender__item.is-indoor { --surface-color: #4a63b0; }
.turnierkalender__item.is-sand { --surface-color: #c8553d; }
.turnierkalender__item.is-grass { --surface-color: #3f9650; }

.turnierkalender__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  padding: 18px 20px 18px 26px;
  background: var(--night);
  border-left: 6px solid var(--surface-color);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  color: var(--night-ink) !important;
  text-decoration: none !important;
}

.turnierkalender__tour {
  color: rgba(243, 245, 248, 0.68);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.turnierkalender__date {
  margin-top: 6px;
  color: rgba(243, 245, 248, 0.82);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.turnierkalender__date b {
  color: var(--ball);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.turnierkalender__name {
  margin-top: 10px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.05;
}

.turnierkalender__place {
  margin-bottom: 14px;
  color: rgba(243, 245, 248, 0.68);
  font-size: 14px;
}

.turnierkalender__when {
  align-self: flex-start;
  margin-top: auto; /* the badges line up along the bottom whatever the name needs */
  padding: 4px 10px 3px;
  border: 1px solid rgba(243, 245, 248, 0.32);
  color: var(--night-ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.turnierkalender__item.is-live .turnierkalender__when {
  background: var(--ball);
  border-color: var(--ball);
  color: var(--night);
}

a.turnierkalender__card:hover .turnierkalender__name {
  color: var(--ball);
}

a.turnierkalender__card:focus-visible {
  outline: 3px solid var(--ball);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  a.turnierkalender__card {
    transition: transform 0.35s var(--bounce);
  }

  a.turnierkalender__card:hover {
    transform: translateY(-4px);
  }
}

/* spans and <b> are caught by the one-typeface rule, so the calendar names its own display type with the same weight */
:is(.turnierkalender__date, .turnierkalender__date b, .turnierkalender__name):not([class*="icon"]):not([class*="fa-"]):not(.pixcode) {
  font-family: var(--font-display) !important;
}

.turnierkalender__name {
  font-size: 30px;
}

/* ==== Profile pages (single-profile.php) ====
   Same reading column as an article. Head: photo with a cut corner next to name, ranking scoreboard and facts. */
body.single-profile {
  --column: 760px;
}

.profile-single .profile-head {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  gap: 24px clamp(24px, 4vw, 40px);
  align-items: start;
  margin: 0 0 clamp(32px, 4vw, 48px);
  padding: 0;
}

/* the parent theme's clearfix pseudo-elements would become extra grid items */
.profile-single .profile-head::before,
.profile-single .profile-head::after {
  content: none;
}

.profile-single .profile-head > .article__featured-image {
  float: none;
  width: auto;
  margin: 0;
  padding: 0 !important;
}

.profile-single .profile-single-page-image .image-wrap {
  background: var(--surface);
  clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%);
}

.profile-single .profile-single-page-image .wp-caption {
  background: none;
}

/* the small lazy-load source can have another ratio than the box: crop it, keep the face */
.profile-single .profile-single-page-image .image-wrap img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center top;
}

/* photo credit: a badge in the bottom left corner of the picture, same look as .img-credit */
.profile-photo-credit {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 30;
  max-width: calc(100% - 16px);
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(12, 28, 48, 0.72);
  color: var(--night-ink);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.profile-single .profile-heading-wrapper {
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0 !important;
}

/* category (Damen / Herren) */
.profile-single .profile-tax {
  margin: 0 0 10px;
}

.profile-single .profile-tax a {
  padding: 0;
  background: none;
  border-radius: 0;
  color: var(--blue);
  font-size: var(--step-small);
  font-weight: 600;
  text-decoration: none;
}

.profile-single .profile-tax a:hover {
  color: var(--blue-hover);
}

.profile-single h1 {
  margin: 0 0 20px;
  color: var(--ink);
  font-size: clamp(40px, 30px + 3vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* ranking: a scoreboard tab, the number in ball yellow */
.profile-single .profile-ranking {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
  padding: 10px 40px 10px 18px;
  background: var(--night);
  border-left: 6px solid var(--ball);
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  font-family: var(--font-display);
}

.profile-single .profile-ranking a {
  color: var(--night-ink);
  text-decoration: none;
}

.profile-single .profile-ranking .profile-ranking-text {
  font-size: 13px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

.profile-single .profile-ranking .profile-ranking-text span {
  color: var(--night-ink);
}

.profile-single .profile-ranking .profile-ranking-number {
  padding: 0;
  color: var(--ball);
  font-size: 56px;
  line-height: 1;
  font-weight: 700;
}

.profile-single .profile-ranking .profile-ranking-change {
  font-size: 22px;
  font-weight: 700;
}

.profile-single .profile-ranking .profile-ranking-change.profile-ranking-change-up {
  color: #6fe0a0;
}

.profile-single .profile-ranking .profile-ranking-change.profile-ranking-change-down {
  color: #ff8a80;
}

/* facts: label and value rows */
.profile-single .profile-attributes {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  margin: 0;
}

.profile-single .profile-attributes dt,
.profile-single .profile-attributes dd {
  margin: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--surface);
}

.profile-single .profile-attributes dt {
  padding-right: 24px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.7;
  text-transform: uppercase;
}

.profile-single .profile-attributes dd {
  color: var(--ink);
  font-size: var(--step-small);
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.profile-single .profile-attributes dd a {
  color: var(--blue);
  text-decoration: none;
}

.profile-single .profile-attributes dd a:hover {
  text-decoration: underline;
}

/* text blocks */
.profile-single .profile-content {
  padding: 0;
}

.profile-single .profile-content-block-wrapper {
  float: none;
  width: auto;
  padding: 0;
}

.profile-single .profile-content-block-wrapper h2 {
  margin: clamp(32px, 4vw, 48px) 0 14px;
  font-size: var(--step-title);
  line-height: 1.1;
}

.profile-single .profile-content-block-wrapper:first-child h2 {
  margin-top: 0;
}

.profile-single .profile-content-content {
  font-size: var(--step-body);
  line-height: 1.7;
  color: var(--ink);
}

.profile-single .profile-content-content p {
  margin: 0 0 1.3em;
  padding: 0;
}

/* the editors set the sub-headings (Biografie, Erfolge ...) as a bold paragraph */
.profile-single .profile-content-content p:has(> :is(strong, b):only-child) {
  margin: 1.6em 0 0.5em;
  font-family: var(--font-display);
  font-size: var(--step-title);
  line-height: 1.1;
}

.profile-single .profile-content-content p:first-child:has(> :is(strong, b):only-child) {
  margin-top: 0;
}

.profile-single .profile-content-content ul {
  margin: 0 0 1.3em 1.2em;
  padding: 0;
  list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14.5' fill='%23c6e01a' stroke='%230c1c30' stroke-width='2'/%3E%3Cpath d='M4.5 6.5C10 10 10 22 4.5 25.5M27.5 6.5C22 10 22 22 27.5 25.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.profile-single .profile-content-content li {
  margin: 0 0 0.4em;
  padding-left: 6px;
}

.profile-single blockquote {
  margin: 1.5em 0;
  padding: 4px 0 4px 20px;
  border-left: 4px solid var(--blue);
  color: var(--ink);
  font-size: var(--step-lead);
  line-height: 1.4;
}

/* career and award tables: a year column and one row per entry, section rows as scoreboard labels */
.profile-single .profile-content-block-wrapper table {
  width: 100%;
  margin: 0 0 1.3em;
  border-collapse: collapse;
  border: 0;
  font-variant-numeric: tabular-nums;
}

.profile-single .profile-content-block-wrapper table tr,
.profile-single .profile-content-block-wrapper table tr:first-child,
.profile-single .profile-content-block-wrapper table tr:last-child {
  border: 0;
  border-bottom: 1px solid var(--surface);
  background: none !important;
}

.profile-single .profile-content-block-wrapper table td,
.profile-single .profile-content-block-wrapper table th {
  padding: 10px 12px 10px 0;
  border: 0;
  background: none;
  font-size: var(--step-small);
  line-height: 1.5;
  text-align: left;
  vertical-align: top;
}

.profile-single .profile-content-block-wrapper table tr td:first-child {
  width: 88px;
  background: none;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}

.profile-single .profile-content-block-wrapper table tr td strong {
  display: block;
  color: var(--ink);
  font-size: var(--step-body);
  font-weight: 600;
}

.profile-single .profile-content-block-wrapper table th {
  padding: 8px 14px;
  background: var(--night);
  color: var(--night-ink);
  font-family: var(--font-display);
  font-size: 15px !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* related posts */
.profile-single .heading.heading--main {
  margin-top: clamp(40px, 5vw, 64px) !important;
}

.profile-single .profile-related {
  margin-top: 0;
  padding: 0 !important;
}

/* "Mehr Beiträge über ...": a centred button under the list, flat like the other buttons */
.profile-single .article--single__meta {
  margin-top: 0;
  text-align: center;
}

.profile-single .single-related-more {
  display: inline-block;
  width: auto;
  margin: 8px auto 0;
  padding: 14px 28px;
  border: 0;
  border-radius: 0;
  background: var(--blue);
  color: #fff;
  font-size: var(--step-small);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.profile-single .single-related-more:hover,
.profile-single .single-related-more:focus-visible {
  background: var(--blue-hover);
  color: #fff;
}

@media only screen and (max-width: 640px) {
  .profile-single .profile-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-single .profile-head > .article__featured-image {
    max-width: 240px;
  }

  .profile-single .profile-content-block-wrapper table tr td:first-child {
    width: 64px;
    font-size: 18px;
  }
}

/* mobile markup: the photo sits inside the heading block */
.profile-single .image-wrap-mobile {
  float: none;
  width: 100%;
  max-width: 240px;
  margin: 0 0 20px;
}

.profile-single .image-wrap-mobile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: center top;
}

.profile-single .image-wrap-mobile .profile-photo-credit {
  position: static;
  display: block;
  margin-top: 6px;
  padding: 0;
  background: none;
  color: var(--ink-soft);
}


/* ---- 404 ("Aus!", see 404.php) ----
   A night band like the footer: the 404 with a tennis ball as the zero, search and way home on the left,
   the ball landing behind the baseline on the right (images/404-aus.svg). Below it the latest posts. */
.error-404__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(32px, 5vw, 72px) clamp(24px, 5vw, 72px);
  background: var(--night);
  color: var(--night-ink);
  clip-path: polygon(0 0, calc(100% - 56px) 0, 100% 56px, 100% 100%, 0 100%);
}

.error-404__code {
  display: flex;
  align-items: center;
  gap: 0.04em;
  margin: 0 0 12px;
  color: var(--ball);
  font-family: var(--font-display);
  font-size: clamp(96px, 14vw, 176px);
  font-weight: 700;
  line-height: 0.9;
}

.error-404__ball {
  flex: none;
  width: 0.74em;
  height: 0.74em;
  margin-top: 0.04em;
  transform-origin: 50% 100%;
}

.error-404__title {
  margin: 0 0 16px;
  color: var(--night-ink);
  font-size: var(--step-head) !important;
  line-height: 1;
}

.error-404__lead {
  max-width: 34em;
  margin: 0 0 32px;
  color: rgba(243, 245, 248, 0.82);
  font-size: var(--step-lead);
  line-height: 1.4;
}

.error-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
}

.error-404 .error-404__home {
  display: inline-flex;
  align-items: center;
  padding: 0 28px;
  min-height: 52px;
  background: var(--ball) !important;
  color: var(--night) !important;
  font-size: var(--step-small) !important;
  text-decoration: none;
}

.error-404 .error-404__home:hover,
.error-404 .error-404__home:focus-visible {
  background: #e6f86a !important;
}

.error-404__search {
  display: flex;
  flex: 1 1 320px;
  min-width: 0;
  max-width: 460px;
}

.error-404__search input[type="search"] {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.1);
  color: var(--night-ink);
  font-family: var(--font);
  font-size: var(--step-small);
}

.error-404__search input[type="search"]::placeholder {
  color: rgba(243, 245, 248, 0.65);
}

.error-404__search button {
  min-height: 52px;
  padding: 0 22px;
  border: 0;
  border-radius: 0;
  background: var(--blue-light);
  color: #fff;
  cursor: pointer;
  font-family: var(--font);
  font-size: var(--step-small);
  font-weight: 600;
}

.error-404__search button:hover {
  background: var(--blue-light-hover);
}

.error-404__home:focus-visible,
.error-404__search input:focus-visible,
.error-404__search button:focus-visible,
.error-404__posts a:focus-visible {
  outline: 3px solid var(--ball);
  outline-offset: 2px;
}

.error-404__court {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  justify-self: center;
}

.error-404 .heading.heading--main {
  margin-top: var(--section-gap) !important;
}

.error-404__posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 0 var(--gutter);
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.error-404__posts li {
  padding: 18px 0;
  border-bottom: 1px solid var(--surface);
}

.error-404__posts .article__category {
  display: block;
  margin-bottom: 4px;
}

.error-404__posts a {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-title);
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
}

.error-404__posts a:hover {
  color: var(--blue);
}

@media only screen and (max-width: 799px) {
  .error-404__hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .error-404__court {
    max-width: 320px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes error-404-bounce {
    0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); }
    50% { transform: translateY(-14%); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); }
  }

  .error-404__ball {
    animation: error-404-bounce 1.6s infinite;
  }
}


/* ---- Search results (see search.php) ----
   A night band like the 404 with the term, the hit count and a search field to refine it; the hits below are
   rows (small picture left, text right) because a search is scanned, not browsed. */
.search-hero {
  margin-bottom: clamp(32px, 4vw, 56px);
  padding: clamp(28px, 4vw, 56px) clamp(24px, 5vw, 72px);
  background: var(--night);
  color: var(--night-ink);
  clip-path: polygon(0 0, calc(100% - 56px) 0, 100% 56px, 100% 100%, 0 100%);
}

.search-hero__eyebrow {
  margin: 0 0 8px;
  color: var(--ball);
  font-size: var(--step-small);
  font-weight: 600;
}

.search-hero .search-hero__title {
  margin: 0 0 12px;
  color: var(--night-ink) !important;
  font-size: var(--step-head) !important;
  line-height: 1 !important;
}

.search-hero__count {
  margin: 0 0 28px;
  color: rgba(243, 245, 248, 0.82);
  font-size: var(--step-lead);
  line-height: 1.3;
}

.search-hero__count strong {
  color: var(--night-ink);
}

.search-hero__term {
  overflow-wrap: anywhere;
  color: var(--night-ink);
}

.search-hero__form {
  display: flex;
  max-width: 560px;
  margin: 0;
}

.search-hero__form input[type="search"] {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.1);
  color: var(--night-ink);
  font-family: var(--font);
  font-size: var(--step-body);
}

.search-hero__form input[type="search"]::placeholder {
  color: rgba(243, 245, 248, 0.65);
}

.search-hero__form button {
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 0;
  background: var(--ball);
  color: var(--night);
  cursor: pointer;
  font-family: var(--font);
  font-size: var(--step-small);
  font-weight: 600;
}

.search-hero__form button:hover {
  background: #e6f86a;
}

.search-hero__form input:focus-visible,
.search-hero__form button:focus-visible {
  outline: 3px solid var(--ball);
  outline-offset: 2px;
}

/* the hits: one row per article, no lead story */
.search-results .classic {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.search-results .classic > div {
  padding: 28px 0;
  border-bottom: 1px solid var(--surface) !important;
}

.search-results .classic > div:first-child {
  padding-top: 0;
}

.search-results .classic .article--thumb.media {
  display: grid !important;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 0 var(--gutter);
  align-items: start;
}

.search-results .classic .media__img--rev {
  margin-bottom: 0 !important;
}

.search-results .classic > div:first-child .media__img--rev .image-wrap,
.search-results .classic .media__img--rev .image-wrap {
  aspect-ratio: 3 / 2;
}

.search-results .classic .article__category {
  margin-bottom: 4px;
}

.search-results .classic .article--thumb__title h3,
.search-results .classic .article--thumb__title h3.hN,
.search-results .classic > div:first-child .article--thumb__title h3,
.search-results .classic > div:first-child .article--thumb__title h3.hN {
  font-size: var(--step-title) !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
}

.search-results .classic .article__content,
.search-results .classic .article__content p,
.search-results .classic > div:first-child .article__content,
.search-results .classic > div:first-child .article__content p {
  -webkit-line-clamp: 2;
  max-width: 44em;
  font-size: var(--step-body) !important;
  line-height: 1.45 !important;
}

.search-results .classic .separator {
  display: none;
}

.search-results .classic .article:not(:has(.image-wrap)) {
  grid-template-columns: minmax(0, 1fr);
}

.search-empty__lead {
  max-width: 34em;
  margin: 0;
  font-size: var(--step-lead);
  line-height: 1.4;
}

.search-empty .heading.heading--main {
  margin-top: var(--section-gap) !important;
}

@media only screen and (max-width: 640px) {
  .search-hero {
    clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 0 100%);
  }

  .search-results .classic .article--thumb.media {
    grid-template-columns: minmax(0, 1fr);
  }

  .search-results .classic .media__img--rev {
    margin-bottom: 14px !important;
  }
}

/* ---- Image placeholder ----
   The parent theme paints every .image-wrap #ccc and puts a spinning ring (:after, a base64 PNG) on it until
   .document-ready. Same tone as the other surfaces instead, with a soft sweep. The loaded image (z-index 20)
   covers the sweep, so it stays on until the photo is really there rather than being cut off after 300ms. */
.image-wrap {
  background-color: var(--surface);
  isolation: isolate; /* so the sweep (z-index -1) sits above the background but below the photo and the titles */
}

.image-wrap::after,
.document-ready .image-wrap::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  border-radius: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: none;
  z-index: -1;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .image-wrap::after,
  .document-ready .image-wrap::after {
    animation: image-placeholder-sweep 1.6s ease-in-out infinite;
  }

  @keyframes image-placeholder-sweep {
    to {
      transform: translateX(100%);
    }
  }
}

/* privacy settings link sits right-aligned on its own line below the footer menu */
.site__footer .footer-privacy {
  text-align: right;
  margin-top: 8px;
}

/* no right padding on the last footer menu link so it lines up with the privacy link */
.site__footer .footer-menu .nav--block > li:last-child > a {
  padding-right: 0 !important;
}