/* ==========================================================================
   UF Basis - magazine components (theme support 'uf-magazin')
   ==========================================================================

   Structure and a neutral base look for the markup rendered by inc/magazin.php
   (plus the literal HTML the shortcode migration writes: uf-raster, uf-favoriten,
   and the FAQ convention uf-faq). No brand colours: every colour is a --uf-*
   token. The child maps its brand onto these tokens and styles the classes in
   assets/marke.css, which loads later and wins on equal specificity.

   ORDER
     basis.css (priority 1) -> magazin.css (priority 2) -> child marke.css
   Selectors stay at one class wherever possible so the brand layer can
   override them without the important flag, which this file never uses.

   RULES CARRIED OVER FROM PAST FAILURES
     - flex containers with mixed content always have a gap;
     - a property set here that the brand layer wants gone must be overridden
       explicitly there (specificity decides per property, not per rule);
     - basis.css sets list-style:none on "nav ol" - the table of contents
       therefore sets its numbering explicitly;
     - disclosure icons are drawn, not typed: generated text such as "+"
       would become part of the accessible name of <summary>.

   TOKENS (defaults below, all overridable on :root)
     --uf-surface         soft panel background (TOC, notes, card placeholder)
     --uf-accent          accent line of the tip note
     --uf-cta-bg          background of .uf-button--primaer (buy buttons)
     --uf-cta-bg-hover    hover background of the same
     --uf-cta-fg          text colour on --uf-cta-bg
     --uf-note-tip / --uf-note-info / --uf-note-warn   left rule of the notes
     --uf-video-bg        placeholder of the video facade
     --uf-gap             gap of the card grid
     --uf-card-ratio      picture ratio of cards
   ========================================================================== */

:root{
  --uf-surface: #f6f8fb;
  --uf-accent: var(--uf-link);
  --uf-cta-bg: var(--uf-link);
  --uf-cta-bg-hover: var(--uf-link-hover);
  --uf-cta-fg: #fff;
  --uf-note-tip: var(--uf-accent);
  --uf-note-info: var(--uf-line-ui);
  --uf-note-warn: #b45309;
  --uf-video-bg: var(--uf-ink);
  --uf-gap: 1.25rem;
  --uf-card-ratio: 3 / 2;
}

/* --------------------------------------------------------------------------
   1. Anchors
   Headings with an id are jump targets (table of contents, old in-page links).
   There is no sticky header; the margin only keeps the heading off the edge.
   -------------------------------------------------------------------------- */

:where(h2, h3)[id]{ scroll-margin-top: 1rem; }

/* --------------------------------------------------------------------------
   2. Table of contents
   <nav class="uf-toc"><details class="uf-toc__details" open>
     <summary class="uf-toc__titel"> <ol class="uf-toc__liste"> ...
   Open on wide screens, closed on narrow ones (inline script + magazin.js).
   -------------------------------------------------------------------------- */

.uf-toc{ margin: 1.5rem 0 2rem; }

.uf-toc__details{
  border: 1px solid var(--uf-line);
  border-radius: var(--uf-radius);
  background: var(--uf-surface);
}

.uf-toc__details > summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: var(--uf-touch);
  padding: .5rem 1rem;
  border-radius: var(--uf-radius);
  font-weight: 700;
  color: var(--uf-ink);
  cursor: pointer;
  list-style: none;
}
.uf-toc__details > summary::-webkit-details-marker{ display: none; }
.uf-toc__details > summary::after{
  content: "";
  flex: 0 0 auto;
  width: .5rem;
  height: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform .15s ease;
}
.uf-toc__details[open] > summary::after{ transform: translateY(25%) rotate(-135deg); }

.uf-toc__liste{
  margin: 0;
  padding: 0 1rem 1rem 2.5rem;
  list-style: decimal;
}
.uf-toc__eintrag{ margin: 0 0 .375rem; padding-left: .25rem; }
.uf-toc__eintrag:last-child{ margin-bottom: 0; }
.uf-toc__eintrag::marker{ color: var(--uf-mut); font-variant-numeric: tabular-nums; }
.uf-toc__link{
  text-decoration: none;
  overflow-wrap: break-word;
  hyphens: auto;
}
.uf-toc__link:hover,
.uf-toc__link:focus-visible{ text-decoration: underline; }
.uf-toc__unterliste{
  margin: .375rem 0 0;
  padding-left: 1.25rem;
  list-style: circle;
}

/* --------------------------------------------------------------------------
   3. Notes  [uf_hinweis typ="tipp|info|achtung"]
   -------------------------------------------------------------------------- */

.uf-hinweis{
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--uf-line);
  border-left: 4px solid var(--uf-note-info);
  border-radius: var(--uf-radius);
  background: var(--uf-surface);
}
.uf-hinweis--tipp{ border-left-color: var(--uf-note-tip); }
.uf-hinweis--achtung{ border-left-color: var(--uf-note-warn); }
.uf-hinweis__titel{ margin: 0 0 .375rem; font-weight: 700; color: var(--uf-ink); }
.uf-hinweis > :last-child{ margin-bottom: 0; }

/* --------------------------------------------------------------------------
   4. Buttons  [uf_button stil="primaer|sekundaer"]
   Also used by the product module for its call-to-action links.
   -------------------------------------------------------------------------- */

.uf-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  max-width: 100%;
  min-height: var(--uf-touch);
  padding: .625rem 1.25rem;
  border: 2px solid transparent;
  border-radius: var(--uf-radius);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.uf-button--primaer{
  background: var(--uf-cta-bg);
  color: var(--uf-cta-fg);
}
.uf-button--primaer:hover,
.uf-button--primaer:focus-visible{
  background: var(--uf-cta-bg-hover);
  color: var(--uf-cta-fg);
}
.uf-button--sekundaer{
  background: transparent;
  color: var(--uf-link);
  border-color: currentColor;
}
.uf-button--sekundaer:hover,
.uf-button--sekundaer:focus-visible{
  background: var(--uf-surface);
  color: var(--uf-link-hover);
}

/* A button on a line of its own gets this paragraph (see the_content, priority 10).
   Link, "Anzeige" label and further buttons wrap as a row; the gap replaces the
   collapsed spaces between them. */
.uf-button-zeile{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
}

/* Label behind sponsored links and the notice at the end of the article. */
.uf-anzeige{
  font-size: .75rem;
  line-height: 1.2;
  color: var(--uf-mut);
  white-space: nowrap;
}
.uf-affiliate-hinweis{
  margin: 2rem 0 0;
  font-size: .875rem;
  color: var(--uf-mut);
}

/* --------------------------------------------------------------------------
   5. Video facade  [uf_video] and replaced YouTube iframes
   <div class="uf-video" data-id> <div class="uf-video__rahmen"> [img]
     <button class="uf-video__start"> ... </div> <p class="uf-video__hinweis">
   The frame keeps its 16:9 box before and after the click - no layout shift.
   -------------------------------------------------------------------------- */

.uf-video{ margin: 1.5rem 0; }

.uf-video__rahmen{
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--uf-radius);
  background: var(--uf-video-bg) linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,0) 60%);
}

.uf-video__bild{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.uf-video__start{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 1rem 1.25rem;
  border: 0;
  border-radius: 0;
  background: rgba(0,0,0,.35);
  color: #fff;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.uf-video__start:hover,
.uf-video__start:focus-visible{
  background: rgba(0,0,0,.5);
  color: #fff;
}
.uf-video__start:focus-visible{
  outline: 3px solid #fff;
  outline-offset: -6px;
  box-shadow: none;
}

.uf-video__icon{
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 3rem;
  border-radius: .875rem;
  background: rgba(0,0,0,.72);
  transition: transform .15s ease;
}
.uf-video__icon::before{
  content: "";
  margin-left: .25rem;
  border-style: solid;
  border-width: .625rem 0 .625rem 1.0625rem;
  border-color: transparent transparent transparent #fff;
}
.uf-video__start:hover .uf-video__icon,
.uf-video__start:focus-visible .uf-video__icon{ transform: scale(1.06); }

.uf-video__aktion{ font-size: 1rem; }
.uf-video__titel{
  max-width: 36rem;
  font-size: .875rem;
  font-weight: 400;
  overflow-wrap: break-word;
}

.uf-video__iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.uf-video__hinweis{
  margin: .5rem 0 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--uf-mut);
}

/* --------------------------------------------------------------------------
   6. FAQ  <section class="uf-faq"> <details class="uf-faq__eintrag">
   -------------------------------------------------------------------------- */

.uf-faq{ margin: 2.5rem 0; }
.uf-faq > h2{ margin-bottom: 1rem; }

.uf-faq__eintrag{ border-bottom: 1px solid var(--uf-line); }
.uf-faq__eintrag:first-of-type{ border-top: 1px solid var(--uf-line); }

.uf-faq__eintrag > summary{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--uf-touch);
  padding: .75rem 0;
  font-weight: 700;
  color: var(--uf-ink);
  cursor: pointer;
  list-style: none;
  overflow-wrap: break-word;
}
.uf-faq__eintrag > summary::-webkit-details-marker{ display: none; }
/* Plus / minus drawn with two gradients (see header). */
.uf-faq__eintrag > summary::after{
  content: "";
  flex: 0 0 auto;
  width: .875rem;
  height: .875rem;
  margin-top: .35rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  color: var(--uf-mut);
}
.uf-faq__eintrag[open] > summary::after{
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
}

.uf-faq__antwort{ padding: 0 0 1rem; }
.uf-faq__antwort > :last-child{ margin-bottom: 0; }

/* --------------------------------------------------------------------------
   7. Breadcrumb and meta line (base rules in basis.css)
   -------------------------------------------------------------------------- */

.uf-krume{ overflow-wrap: anywhere; }
.uf-krume .breadcrumb_last{ color: var(--uf-mut); }

.uf-meta__link{ color: inherit; }
.uf-meta__trenner{ color: var(--uf-line-ui); }

/* --------------------------------------------------------------------------
   8. Author box (base rules in basis.css)
   -------------------------------------------------------------------------- */

.uf-autor__bild{
  width: 72px;
  height: 72px;
  object-fit: cover;
}
.uf-autor__inhalt{ flex: 1 1 auto; min-width: 0; }
.uf-autor__label{
  margin: 0;
  font-size: .8125rem;
  color: var(--uf-mut);
}
.uf-autor__text{ margin: .25rem 0 .5rem; }
.uf-autor__text > :last-child{ margin-bottom: 0; }
.uf-autor__mehr{ margin: 0; font-size: .9375rem; }

/* --------------------------------------------------------------------------
   9. Cards and related posts
   <ul class="uf-karten"><li class="uf-karte"><a class="uf-karte__link">
     <img class="uf-karte__bild"> <span class="uf-karte__titel"> <span class="uf-karte__text">
   -------------------------------------------------------------------------- */

.uf-verwandt{ margin: 3rem 0 0; }
.uf-verwandt__titel{ margin: 0 0 1rem; font-size: 1.375rem; }

.uf-karten{
  display: grid;
  gap: var(--uf-gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.uf-karte{ margin: 0; min-width: 0; }

.uf-karte__link{
  display: flex;
  flex-direction: column;
  gap: .5rem;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--uf-line);
  border-radius: var(--uf-radius);
  background: var(--uf-bg);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.uf-karte__link:hover,
.uf-karte__link:focus-visible{
  border-color: var(--uf-line-ui);
  box-shadow: 0 2px 10px rgba(16,24,40,.08);
  color: inherit;
}

.uf-karte__bild{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--uf-card-ratio);
  object-fit: cover;
  background: var(--uf-surface);
}
/* Post without any picture: a quiet neutral area keeps the grid even. */
.uf-karte__bild--leer{
  background: linear-gradient(135deg, var(--uf-surface) 0%, var(--uf-line) 100%);
}

.uf-karte__titel{
  display: block;
  margin: .25rem 1rem 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--uf-ink);
  overflow-wrap: break-word;
  hyphens: auto;
}
.uf-karte__titel:last-child{ margin-bottom: 1rem; }
.uf-karte__link:hover .uf-karte__titel{
  text-decoration: underline;
  text-decoration-color: var(--uf-link-rule);
}

.uf-karte__text{
  display: block;
  margin: 0 1rem 1rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--uf-mut);
}

/* --------------------------------------------------------------------------
   10. Layout blocks written by the shortcode migration
   <div class="uf-raster uf-raster--2"><div class="uf-raster__spalte">
   <section class="uf-favoriten"><p class="uf-favoriten__titel">
   -------------------------------------------------------------------------- */

.uf-raster{
  display: grid;
  gap: 1.5rem;
  margin: 1.5rem 0;
}
/* A content column may shrink below its content (tables scroll inside). */
.uf-raster__spalte{ min-width: 0; }
.uf-raster__spalte > :last-child{ margin-bottom: 0; }
@media (min-width: 640px){
  .uf-raster--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uf-raster--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.uf-favoriten{
  margin: 2rem 0;
  padding: 1.25rem;
  border: 1px solid var(--uf-line);
  border-radius: var(--uf-radius);
}
.uf-favoriten__titel{
  margin: 0 0 .75rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--uf-ink);
}
.uf-favoriten > :last-child{ margin-bottom: 0; }

/* --------------------------------------------------------------------------
   11. Narrow screens and print
   -------------------------------------------------------------------------- */

@media (max-width: 480px){
  .uf-toc__liste{ padding: 0 .75rem .875rem 2.125rem; }
  .uf-hinweis{ padding: .875rem 1rem; }
  .uf-video__icon{ width: 3.5rem; height: 2.5rem; }
  /* A 16:9 frame at 320px is about 160px high - too little for icon, action
     and a two-line title. The title leaves the picture but stays in the
     button's accessible name. */
  .uf-video__titel{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media print{
  .uf-video__rahmen{ display: none; }
}