/* EggCademy — Wissensrubrik rund um den Zyklus.
   Alle Farben stammen aus den Paletten von site.css (dort die --academy-*-
   Tokens). Mobile-first wie site.css: Die Basis traegt den Telefonwert,
   `min-width` fuegt hinzu (Schwellen 541 / 641 / 901). */

.academy-page {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.academy-page > * {
  width: 100%;
}

/* site.css setzt auf jede <section>, die auf eine <section> folgt, Haarlinie,
   Innen- und Aussenabstand (fuer die Textseiten). Die Academy gliedert mit
   Karten und dem Abstand von .academy-page; mit der Regel lagen Uebersicht,
   „Demnaechst" und Fazit ungleich weit auseinander, und im Artikel stand eine
   Linie ueber „Was dahintersteckt". :where() haelt die Spezifitaet bei der von
   site.css, damit die eigenen Abstaende der Bausteine weiter greifen. */
:where(.academy-page) section + section {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ---------- Zurück-Navigation auf Einzelseiten ---------- */

.academy-back-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 0.25rem;
}

.academy-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.45rem 1rem 0.45rem 0.75rem;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.academy-back-link:hover {
  color: var(--accent);
  border-color: var(--accent-35);
  transform: translateX(-3px);
}

.academy-back-link:focus-visible {
  outline: 3px solid var(--accent-45);
  outline-offset: 3px;
}

.academy-back-arrow {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
}

.academy-app-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.45rem 1.05rem;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--accent-35);
  color: var(--accent);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
}

.academy-app-link:hover {
  background: var(--accent-10);
  border-color: var(--accent);
  transform: translateX(3px);
}

.academy-app-link:focus-visible {
  outline: 3px solid var(--accent-45);
  outline-offset: 3px;
}

/* ---------- Seitenkopf / Hero mit Professor-Advisor ---------- */

.academy-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 1.25rem;
  padding: 1.4rem 1.1rem;
  background:
    radial-gradient(circle at 88% 12%, var(--accent-22), transparent 38%),
    var(--card);
  border: 1px solid var(--card-border);
  border-radius: 1.4rem;
  box-shadow: var(--shadow-sm);
}

.academy-hero-text {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.academy-kicker {
  margin: 0 0 0.35rem;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1.3;
  text-transform: uppercase;
}

.academy-hero h1 {
  margin: 0;
  color: var(--text-strong);
  font-size: clamp(2rem, 9vw, 3.2rem);
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.academy-hero h1 em,
.academy-article h1 em,
.academy-featured h3 em {
  color: var(--accent);
  font-style: normal;
}

.academy-hero-lead {
  max-width: 42rem;
  margin: 0.85rem 0 0;
  color: var(--text-muted);
  font-size: clamp(0.98rem, 3.5vw, 1.12rem);
  line-height: 1.55;
}

.academy-hero-advisor {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.academy-hero-advisor img {
  display: block;
  width: clamp(130px, 32vw, 190px);
  height: auto;
  aspect-ratio: 1;
  filter: drop-shadow(var(--shadow-mascot));
}

.academy-disclaimer {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.academy-disclaimer svg {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  color: var(--accent);
}

.academy-disclaimer--fuss {
  margin-top: 0.25rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--hairline);
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

/* ---------- Übersicht: Featured-Lektion (große Karte) ---------- */

.academy-overview {
  padding: 1.35rem 1.15rem;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 1.4rem;
}

.academy-overview h2 {
  margin: 0 0 1rem;
  color: var(--text-strong);
  font-size: clamp(1.25rem, 5vw, 1.55rem);
  letter-spacing: -0.02em;
}

.academy-featured {
  border-radius: 1.25rem;
  background: var(--card);
  border: 1px solid var(--accent-35);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.academy-featured:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.academy-featured-link {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.academy-featured-link:focus-visible {
  outline: 3px solid var(--accent-45);
  outline-offset: 3px;
}

.academy-featured-bild {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--accent-08);
}

.academy-featured-bild picture,
.academy-featured-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.academy-featured-link:hover .academy-featured-bild img {
  transform: scale(1.03);
}

.academy-featured-text {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.15rem;
}

.academy-lesson-nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--accent-15);
  color: var(--accent);
  margin-right: 0.35rem;
}

.academy-featured-text .academy-card-topic {
  display: flex;
  align-items: center;
  margin: 0 0 0.4rem;
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.academy-featured-text h3 {
  margin: 0 0 0.5rem;
  color: var(--text-strong);
  font-size: clamp(1.2rem, 4vw, 1.45rem);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.academy-featured-text .academy-card-desc {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.94rem;
  line-height: 1.5;
}

.academy-meta {
  margin: 0.75rem 0 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.academy-featured-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.1rem;
  align-self: flex-start;
  padding: 0.5rem 1.15rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--academy-cta-text);
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: var(--shadow-xs);
  transition: transform 0.18s ease, filter 0.18s ease;
}

.academy-featured-link:hover .academy-featured-cta {
  transform: translateX(4px);
  filter: brightness(1.08);
}

/* ---------- Demnächst in der Academy (Lernpfad) ----------
   Noch nicht erschienene Lektionen stehen bewusst inaktiv da (Andreas,
   2026-10-16): gestrichelter Rahmen ohne Fläche und Schatten, Symbol, Thema
   und Titel gedämpft statt im Akzent. Sie sind keine Links und sollen auch
   nicht wie welche aussehen. Dasselbe gilt für den Hinweis „Nächste Lektion“
   am Artikelende (.academy-next), solange die Lektion noch fehlt. */

.academy-soon {
  padding: 1.35rem 1.15rem;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 1.4rem;
}

.academy-soon h2 {
  margin: 0 0 0.3rem;
  color: var(--text-strong);
  font-size: clamp(1.2rem, 4vw, 1.45rem);
  letter-spacing: -0.02em;
}

.academy-soon-lead {
  margin: 0 0 1.1rem;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.academy-path {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.academy-path-item {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.05rem;
  border: 1px dashed var(--card-border);
  border-radius: 1.1rem;
}

.academy-path-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.75rem;
  background: var(--panel);
  border: 1px solid var(--hairline);
  color: var(--text-muted);
  flex-shrink: 0;
}

.academy-path-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.academy-path-item .academy-lesson-nr {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--text-muted);
  background: var(--panel);
  border: 1px solid var(--hairline);
}

.academy-path-item h3 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-muted);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.academy-path-topic {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.15rem;
}

/* ---------- Artikel-Einzelseite ---------- */

.academy-article {
  padding: 1.25rem 1rem;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 1.4rem;
  box-shadow: var(--shadow-sm);
}

.academy-sources {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--hairline);
}

.academy-sources h2,
.academy-sources h3 {
  margin: 0 0 0.75rem;
  color: var(--heading);
  font-size: 0.98rem;
}

.academy-source-list {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.academy-source-list a {
  display: block;
  padding: 0.75rem 0.8rem;
  color: var(--text-strong);
  font-size: 0.84rem;
  line-height: 1.45;
  text-decoration: none;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 0.8rem;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.academy-source-list a:hover {
  background: var(--panel-hover);
  border-color: var(--accent-28);
}

.academy-source-list a:focus-visible {
  outline: 3px solid var(--accent-45);
  outline-offset: 3px;
}

.academy-source-purpose {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.academy-sources-disclaimer {
  margin: 0.9rem 0 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

/* ---------- Teaser: Nächste Lektion am Artikelende ---------- */

.academy-next {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding: 1rem 1.15rem;
  border: 1px dashed var(--card-border);
  border-radius: 1.2rem;
  margin-top: 1.25rem;
}

.academy-next .academy-path-icon {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.85rem;
}

.academy-next .academy-path-icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.academy-next-kicker {
  margin: 0 0 0.15rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.academy-next-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-muted);
  line-height: 1.3;
}

/* ---------- Verweis auf den Periodenrechner (Lektion „Die Periode“) ----------
   Seit 2026-10-15 eine eigene Box am Ende des Artikels — unter den beiden
   Textkarten („Kann das wehtun?“/„Wie lange dauert das?“), vor den Quellen —
   statt eines Links im „Gut zu wissen“-Kasten (Andreas). Links der
   Perioden-Advisor, rechts Frage, Satz und Knopf; der Knopf öffnet den Rechner in einem neuen
   Tab. Den Abstand nach oben bringen die Textkarten mit (.academy-twocol-v4),
   den nach unten die Quellen (.academy-sources). Telefon: Advisor über dem Text. */
.academy-rechner-teaser {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 1.35rem 1.25rem 1.4rem;
  border: 1px solid var(--accent-35);
  border-radius: 1.3rem;
  background:
    radial-gradient(70% 90% at 0% 50%, var(--accent-15), transparent 70%),
    var(--card);
  box-shadow: var(--shadow-sm);
}

/* Der Perioden-Advisor mit Kristallkugel (Tropfen, Kalender, Wärmflasche),
   je Theme der Seite: EggClipse im dunklen, EggSposure im hellen Modus
   (Muster wie .imprint-logo-dark/-light in site.css). Am 2026-10-15 kurz
   das DER-TAG-Motiv aus dem Onboarding, davor ein kleines Zyklusband. */
.academy-rechner-advisor {
  align-self: center;
  width: min(100%, 13rem);
  margin-inline: auto;
}

.academy-rechner-advisor img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(var(--academy-karte-schatten));
}

.academy-rechner-advisor-hell { display: none; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .academy-rechner-advisor-dunkel { display: none; }
  :root:not([data-theme]) .academy-rechner-advisor-hell { display: block; }
}

:root[data-theme="dark"] .academy-rechner-advisor-dunkel { display: block; }
:root[data-theme="dark"] .academy-rechner-advisor-hell { display: none; }
:root[data-theme="light"] .academy-rechner-advisor-dunkel { display: none; }
:root[data-theme="light"] .academy-rechner-advisor-hell { display: block; }

.academy-rechner-kicker {
  margin: 0 0 0.25rem;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.academy-rechner-titel {
  margin: 0 0 0.45rem;
  color: var(--text-strong);
  font-size: clamp(1.2rem, 3.6vw, 1.45rem);
  font-weight: 800;
  line-height: 1.25;
  hyphens: manual;
}

.academy-rechner-beschreibung {
  margin: 0 0 1rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.academy-rechner-cta {
  text-decoration: none;
}

.academy-rechner-cta svg {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
}

@media (min-width: 641px) {
  .academy-rechner-teaser {
    grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr);
    align-items: center;
    gap: 1.75rem;
    padding: 1.6rem 1.75rem;
  }
}

/* ---------- Abschluss / Outro ---------- */

.academy-outro {
  padding: 1.25rem 1.15rem;
  text-align: center;
  background: var(--accent-08);
  border: 1px solid var(--accent-22);
  border-radius: 1.3rem;
}

.academy-outro p {
  margin: 0;
  color: var(--text-muted);
}

.academy-outro strong {
  color: var(--text-strong);
}

.academy-outro-wish {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-muted);
}

.academy-outro-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.45rem;
  padding: 0.35rem 0.85rem;
  min-height: 44px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.academy-outro-btn:hover {
  border-color: var(--accent);
  transform: translateX(2px);
}

.academy-outro-btn:focus-visible {
  outline: 3px solid var(--accent-45);
  outline-offset: 3px;
}

/* ---------- Responsive Anpassungen ---------- */

@media (min-width: 641px) {
  .academy-hero {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 1.85rem 1.75rem;
    gap: 1.75rem;
  }

  .academy-hero-advisor img {
    width: clamp(170px, 22vw, 220px);
  }

  .academy-overview,
  .academy-soon,
  .academy-article {
    padding: 1.75rem;
  }

  .academy-featured-link {
    display: grid;
    grid-template-columns: 240px 1fr;
    align-items: center;
    gap: 1.5rem;
  }

  .academy-featured-bild {
    aspect-ratio: 1;
    height: 100%;
  }

  .academy-featured-text {
    padding: 1.35rem 1.4rem 1.35rem 0;
  }

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

/* ---------- Layout V4: Perioden-Artikel (abgestimmter Vorlagen-Entwurf) ---------- */

.academy-hero-v4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
  margin-bottom: 2.75rem;
}

.academy-headline {
  margin: 0 0 0.5rem;
}

.academy-headline h1 {
  font-size: clamp(2.35rem, 5.1vw, 4.15rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
  margin: 0;
  color: var(--text-strong);
}

.academy-headline h1 em {
  font-style: normal;
  color: var(--accent);
}

.academy-hero-lead-col p:not(.academy-headline-sub) {
  font-size: clamp(1rem, 1.65vw, 1.12rem);
  line-height: 1.68;
  color: var(--text);
  margin: 0 0 1.05rem;
}

.academy-hero-lead-col p:last-child {
  margin-bottom: 0;
}

.academy-guest {
  font-weight: 750;
  color: var(--text-strong);
}

.academy-hero-media {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}

.academy-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 1.75rem;
  border: 1px solid var(--card-border);
  box-shadow: var(--academy-bild-schatten);
}

.academy-hero-media::after {
  content: '';
  position: absolute;
  inset: auto 16px -13px 16px;
  height: 45px;
  z-index: -1;
  /* Im hellen Thema transparent (Token), vorher per display: none. */
  background: var(--academy-bild-glanz);
  filter: blur(32px);
}

/* Erklärung (Was dahintersteckt) */

.academy-science-v4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
  margin: 1.25rem 0 2rem;
}

.academy-science-image {
  order: 2;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}

.academy-science-text {
  order: 1;
}

.academy-science-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 1.5rem;
  border: 1px solid var(--card-border);
  box-shadow: var(--academy-bild-schatten);
}

.academy-science-image figcaption {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.78rem;
  margin-top: 0.65rem;
}

.academy-section-heading {
  color: var(--accent);
  font-size: clamp(1.15rem, 1.95vw, 1.45rem);
  font-weight: 850;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  line-height: 1.35;
  margin: 0 0 1.15rem;
}

.academy-science-text p {
  font-size: clamp(0.98rem, 1.5vw, 1.08rem);
  line-height: 1.68;
  color: var(--text);
  margin: 0 0 1.1rem;
}

.academy-science-text p:last-child {
  margin-bottom: 0;
}

.academy-primary {
  color: var(--accent);
}

/* Egg-Tracker-Wissenshinweis (Callout mit App-Tageskarte) */

.academy-tracker-callout {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: 1rem;
  min-height: 140px;
  margin: 1rem 0 2.25rem;
  padding: 1.25rem 1.35rem;
  border-left: 4px solid var(--accent);
  background: var(--academy-callout-bg);
  border-radius: 0 1.25rem 1.25rem 0;
  border-top: 1px solid var(--card-border);
  border-right: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.academy-tracker-callout-content {
  flex: 1 1 auto;
  min-width: 0;
}

.academy-tracker-callout-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--accent);
  font-size: 0.8rem;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  margin-bottom: 0.55rem;
  font-weight: 800;
  line-height: 1.2;
}

.academy-tracker-callout-icon {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  color: var(--accent);
}

.academy-tracker-callout-title {
  color: var(--text-strong);
  font-size: clamp(1.18rem, 2.1vw, 1.48rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.28;
  margin: 0 0 0.55rem;
}

.academy-tracker-callout-text {
  font-size: clamp(0.95rem, 1.4vw, 1.04rem);
  font-weight: 450;
  line-height: 1.55;
  color: var(--academy-callout-text);
  margin: 0;
  max-width: 44rem;
}

.academy-day-card {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  margin-top: 0.25rem;
}

.academy-day-card img {
  display: block;
  width: auto;
  height: 80px;
  object-fit: contain;
  /* Eigenes Token statt --shadow-mascot: Dessen helle Fassung hat einen
     Spread, den drop-shadow() nicht kennt — der Schatten fiel dort weg. */
  filter: drop-shadow(var(--academy-karte-schatten));
}

/* Weitere Abschnitte: Kann das wehtun? / Wie lange dauert das? */

.academy-twocol-v4 {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 1.25rem;
  margin: 0 0 2.25rem;
}

.academy-text-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 1.55rem 1.65rem;
  border: 1px solid var(--card-border);
  border-radius: 1.25rem;
  background: var(--card);
}

.academy-text-panel h2 {
  font-size: clamp(1.22rem, 2.3vw, 1.55rem);
  letter-spacing: -0.02em;
  color: var(--accent);
  margin: 0 0 0.85rem;
  line-height: 1.25;
}

.academy-text-panel p {
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.65;
  margin: 0 0 0.95rem;
}

.academy-text-panel p:last-child {
  margin-bottom: 0;
}

/* Ab 541 px steht die Tageskarte neben dem Hinweistext. */

@media (min-width: 541px) {
  .academy-tracker-callout {
    flex-direction: row;
    align-items: center;
  }

  .academy-day-card {
    align-self: auto;
    margin-top: 0;
  }

  .academy-day-card img {
    height: clamp(84px, 14vw, 112px);
  }
}

/* Zweispaltig ab 901 px. Bis zum 2026-10-13 ab 801 px — 801 gehoert nicht zu
   den Schwellen von site.css, und die Lesebreite (--measure) laesst dort fuer
   zwei Spalten mit 3rem Abstand zu wenig Platz. */

@media (min-width: 901px) {
  .academy-hero-v4 {
    grid-template-columns: 1.07fr 0.93fr;
    grid-template-rows: auto 1fr;
    gap: 0 3rem;
    margin-bottom: 4rem;
  }

  .academy-headline {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 1.85rem;
  }

  .academy-hero-lead-col {
    grid-column: 1;
    grid-row: 2;
  }

  .academy-hero-media {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    max-width: none;
    margin: 0;
  }

  .academy-science-v4 {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 3.25rem;
    margin: 1.5rem 0 3rem;
  }

  .academy-science-image {
    order: 0;
    max-width: none;
    margin: 0;
  }

  .academy-science-text {
    order: 0;
  }

  .academy-tracker-callout {
    gap: 1.5rem;
    margin: 1.5rem 0 2.75rem;
    padding: 1.45rem 1.85rem;
  }

  .academy-twocol-v4 {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2.75rem;
  }
}

/* ---------- Periodenrechner (/period-calculator/ in allen Sprachbäumen, seit 2026-10-14) ----------
   Eine Werkzeugfläche mit drei Eingaben und dem Zyklusband, darunter nur
   eine kurze Erklärung, der App-Hinweis und die Abgrenzung. Die Fläche liegt
   auf --panel, weil der Artikel selbst schon auf --card steht. Auf dem
   Telefon reicht sie bis an die Kanten der Artikelkarte: Zwei verschachtelte
   Innenabstände kosteten dort rund 50 px, und die braucht das Band für fünf
   Karten je Zeile. Farben des Bands: --zband-* in site.css. Nur Tokens,
   mobile-first. */

.zyklustag-rechner {
  margin: 1.25rem -1rem 1.75rem;
  padding: 1.1rem 0.75rem 1.2rem;
  background:
    radial-gradient(circle at 92% 8%, var(--accent-22), transparent 42%),
    var(--panel);
  border-block: 1px solid var(--panel-border);
}

/* Drei Eingaben: Datum über die volle Breite, die beiden Zähler darunter
   nebeneinander; ab 761 px alle drei in einer Zeile. */
.zyklustag-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 0.85rem 0.75rem;
}

.zyklustag-form .form-group {
  margin-bottom: 0;
}

.zyklustag-feld-datum {
  grid-column: 1 / -1;
}

.zyklustag-form input {
  min-height: 2.9rem;
}

.zyklustag-stepper {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
  background: var(--input-bg);
  border: 1px solid var(--card-border);
  border-radius: 0.75rem;
  overflow: hidden;
}

.zyklustag-stepper input {
  min-width: 0;
  padding-inline: 0.15rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-weight: 800;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.zyklustag-stepper input::-webkit-inner-spin-button,
.zyklustag-stepper input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

/* Der Rahmen gehört dem Zähler, nicht dem Feld: Der Fokusring liegt deshalb
   innen, sonst schneidet overflow: hidden ihn ab. */
.zyklustag-stepper input:focus-visible {
  outline-offset: -2px;
}

.zyklustag-schritt {
  min-height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--accent);
  font: inherit;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.zyklustag-schritt:hover {
  background: var(--accent-08);
}

.zyklustag-schritt:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.zyklustag-schritt[aria-disabled="true"] {
  background: transparent;
  color: var(--text-faint);
  cursor: default;
}

.zyklustag-ohne-js {
  margin: 0;
  color: var(--text-muted);
}

.zyklustag-fehler {
  margin: 1rem 0 0;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--invalid-border);
  border-radius: 0 0.6rem 0.6rem 0;
  background: var(--accent-08);
  color: var(--text);
}

/* Ergebnis: allein die nächste Periode, als schlichte Zeile in der
   Periodenfarbe des Bands (Andreas, 2026-10-15: den heutigen Tag kennt
   jeder, das Band hebt ihn hervor; die Antwort soll „nicht übertrieben“
   dastehen). Gleiche Breite wie das Band darunter. Ohne Schätzung steht
   nur der Hinweis. */
.zyklustag-ergebnis {
  max-width: calc(7 * 60px + 6 * 0.8rem + 1.2rem);
  margin: 1.2rem auto 0;
}

.zyklustag-antwort {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.2rem 0.7rem;
  margin: 0;
  padding: 0.7rem 1rem;
  background: var(--zband-periode-karte);
  border: 1.5px solid var(--zband-periode-karte-rand);
  border-radius: 0.9rem;
  box-shadow: var(--zband-karte-schatten);
  text-align: center;
}

.zyklustag-antwort-label {
  color: var(--zband-periode-ziffer);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zyklustag-antwort-wert {
  color: var(--text-strong);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.zyklustag-antwort-unter {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.zyklustag-ergebnis-hinweis {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.5;
  text-align: center;
}

/* ----- Das Zyklusband -----
   Karten im Raster, der Weg als SVG dahinter (assets/js/zyklustag.js setzt
   Spaltenzahl, Platz jeder Karte und die Welle). Die Polster oben und an den
   Seiten sind für die „Heute“-Marke über der Karte und die Bögen an den
   Zeilenenden. Eine Zykluswoche je Reihe (sieben Spalten, auf dem Telefon
   fünf; siehe WOCHE im Skript). Die Breite ist so gedeckelt, dass sieben
   Karten höchstens 60 px messen: 7 × 60 px + 6 Spaltenabstände + Polster.
   Ohne Deckel wuchsen die Karten mit der Fläche, und das Band erschlug den
   Desktop; auch 72 px lenkten noch zu sehr von den Eingaben ab (Andreas,
   2026-10-15). */
.zband {
  position: relative;
  max-width: calc(7 * 60px + 6 * 0.8rem + 1.2rem);
  margin: 1.1rem auto 0;
  padding: 1.1rem 0.6rem 0.5rem;
}

/* Ohne Datum steht das Band blass im Hintergrund - es zeigt, was kommt, ohne
   von den Eingaben abzulenken (Andreas, 2026-10-15). Mit dem Datum blendet es
   voll ein; prefers-reduced-motion schaltet den Übergang über den Reset in site.css ab. */
.zband,
.zband-legende,
.zband-hinweis {
  transition: opacity 0.35s ease, filter 0.35s ease;
}

.zband.zband-leer,
.zband-legende.zband-leer,
.zband-hinweis.zband-leer {
  opacity: 0.38;
  filter: saturate(0.55);
}

.zband-weg-svg {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.zband-raster {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--zband-spalten, 5), minmax(0, 1fr));
  gap: clamp(1.1rem, 3.4vw, 1.4rem) clamp(0.3rem, 1.6vw, 0.8rem);
}

.zband-spur,
.zband-spur-rand {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.zband-spur-rand {
  stroke: var(--zband-weg-rand);
}

.zband-spur {
  stroke: var(--zband-weg);
}

/* Phasenstrecken enden gerade zwischen zwei Karten, nicht rund. */
.zband-spur-lauf {
  stroke-linecap: butt;
}

.zband-spur-rand.zband-spur-periode {
  stroke: var(--zband-periode-rand);
}

.zband-spur.zband-spur-periode {
  stroke: var(--zband-periode-weg);
}

.zband-spur-rand.zband-spur-fruchtbar {
  stroke: var(--zband-fruchtbar-rand);
}

.zband-spur.zband-spur-fruchtbar {
  stroke: var(--zband-fruchtbar-weg);
}

.zband-spur-erwartet {
  opacity: var(--zband-erwartet-deckkraft);
}

/* Tageskarte: Maße in Container-Einheiten der Karte, damit sie von 50 px
   (Telefon) bis 100 px (Desktop) dieselbe Komposition behält. */
.zband-karte {
  position: relative;
  container-type: inline-size;
  align-self: start;
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 6;
  background: var(--zband-karte);
  border: 1.5px solid var(--zband-karte-rand);
  border-radius: 0.7rem;
  box-shadow: var(--zband-karte-schatten);
  transform: translateY(calc(var(--zband-welle, 0) * 1%));
}

.zband-datum {
  position: absolute;
  top: 8%;
  left: 0;
  right: 0;
  color: var(--zband-datum);
  font-size: clamp(0.5rem, 15cqi, 0.74rem);
  font-weight: 650;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.zband-zahl {
  display: grid;
  place-items: center;
  width: clamp(1.55rem, 56cqi, 2.6rem);
  aspect-ratio: 1;
  margin-top: 18%;
  border: 2px solid var(--zband-ring);
  border-radius: 50%;
  color: var(--zband-zahl);
  font-size: clamp(0.8rem, 25cqi, 1.35rem);
  font-weight: 800;
  line-height: 1;
}

.zband-unter {
  position: absolute;
  bottom: 4%;
  left: 0;
  right: 0;
  color: var(--zband-periode-ziffer);
  font-size: clamp(0.42rem, 11cqi, 0.6rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.zband-periode,
.zband-erwartet {
  background: var(--zband-periode-karte);
  border-color: var(--zband-periode-karte-rand);
}

.zband-periode .zband-zahl,
.zband-erwartet .zband-zahl {
  border-color: var(--zband-periode-ring);
  color: var(--zband-periode-ziffer);
}

.zband-erwartet {
  background: var(--zband-erwartet-karte);
  border-style: dashed;
  opacity: var(--zband-erwartet-deckkraft);
}

/* Die erste Karte der nächsten Periode ist die Antwort und wird im Band
   ausdrücklich hervorgehoben (Andreas, 2026-10-15): voller Rand statt
   gestrichelt, nicht ausgeblendet, mit Schein und der Marke „Periode“ (wie
   die Heute-Marke, in Periodenfarbe). */
.zband-naechste {
  background: var(--zband-periode-karte);
  border: 2px solid var(--zband-periode-karte-rand);
  box-shadow: var(--zband-karte-schatten), 0 0 14px var(--zband-periode-rand);
  opacity: 1;
}

.zband-naechste .zband-zahl {
  border-color: var(--zband-periode-karte-rand);
  color: var(--zband-periode-ziffer);
}

/* Doppelte Klasse: .zband-marke (weiter unten) setzt den Akzent. */
.zband-marke.zband-marke-periode {
  background: var(--zband-periode-ziffer);
  color: var(--zband-karte);
}

/* Fruchtbare Tage und Eisprung (seit 2026-10-15, Regel und Absicherung wie in
   der App, DR-08). Der Eisprung hebt sich mit kräftigem Rand und Schein ab;
   die Heute-Karte (unten) gewinnt, wenn beides auf einen Tag fällt. */
.zband-fruchtbar {
  background: var(--zband-fruchtbar-karte);
  border-color: var(--zband-fruchtbar-karte-rand);
}

.zband-fruchtbar .zband-zahl {
  border-color: var(--zband-fruchtbar-ring);
  color: var(--zband-fruchtbar-ziffer);
}

.zband-eisprung {
  background: var(--zband-eisprung-karte);
  border: 2px solid var(--zband-eisprung-karte-rand);
  box-shadow: var(--zband-karte-schatten), var(--zband-eisprung-glanz);
}

.zband-eisprung .zband-zahl {
  border-color: var(--zband-eisprung-karte-rand);
  color: var(--zband-eisprung-ziffer);
}

.zband-heute {
  background: var(--zband-heute-karte);
  border: 2px solid var(--accent);
  box-shadow: var(--zband-karte-schatten), var(--zband-heute-glanz);
}

.zband-heute .zband-zahl {
  border-color: var(--accent);
}

.zband-marke {
  position: absolute;
  top: 0;
  left: 50%;
  padding: 0.2em 0.55em;
  border-radius: 999px;
  background: var(--accent);
  color: var(--academy-cta-text);
  font-size: clamp(0.55rem, 14cqi, 0.72rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate(-50%, -78%);
}

.zband-legende {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.1rem;
  margin: 0.9rem 0 0;
  padding: 0;
  color: var(--text-muted);
  font-size: 0.84rem;
  list-style: none;
}

.zband-legende li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.zband-legende-muster {
  width: 0.95rem;
  height: 1.1rem;
  border: 1.5px solid var(--zband-karte-rand);
  border-radius: 0.3rem;
}

.zband-legende-periode {
  background: var(--zband-periode-karte);
  border-color: var(--zband-periode-karte-rand);
}

.zband-legende-erwartet {
  background: var(--zband-erwartet-karte);
  border-color: var(--zband-periode-karte-rand);
  border-style: dashed;
  opacity: var(--zband-erwartet-deckkraft);
}

.zband-legende-fruchtbar {
  background: var(--zband-fruchtbar-karte);
  border-color: var(--zband-fruchtbar-karte-rand);
}

.zband-legende-eisprung {
  background: var(--zband-eisprung-karte);
  border: 2px solid var(--zband-eisprung-karte-rand);
}

/* Pflichtsatz zum Fruchtbarkeitsfenster (fertileRuleOrientation der App,
   DR-08) direkt unter Band und Legende - dort, wo das Fenster zu sehen ist
   (Andreas, 2026-10-15). */
.zband-hinweis {
  max-width: 34rem;
  margin: 0.6rem auto 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.45;
  text-align: center;
}

.zband-legende-heute {
  background: var(--zband-heute-karte);
  border: 2px solid var(--accent);
}

.zyklustag-datenschutz {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 1.1rem 0 0;
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.zyklustag-datenschutz svg {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: 0.12rem;
  color: var(--accent);
}

/* „So rechnet der Rechner“ mit dem Perioden-Advisor links daneben (Andreas,
   2026-10-16: im Seitenkopf wirkte er angeklebt; neben der Erklärung, wie
   geschätzt wird, passt der Wahrsager). Je Theme der Seite; auf dem Telefon
   klein über dem Text. Die Quellen folgen darunter in voller Breite. */
.zyklustag-regeln-block {
  display: grid;
  align-items: center;
  gap: 0.75rem 1.75rem;
  margin-bottom: 1.4rem;
}

.zyklustag-regeln-advisor {
  width: min(9rem, 45%);
  margin-inline: auto;
}

.zyklustag-regeln-advisor img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(var(--academy-karte-schatten));
}

.zyklustag-regeln-advisor-hell { display: none; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .zyklustag-regeln-advisor-dunkel { display: none; }
  :root:not([data-theme]) .zyklustag-regeln-advisor-hell { display: block; }
}

:root[data-theme="dark"] .zyklustag-regeln-advisor-dunkel { display: block; }
:root[data-theme="dark"] .zyklustag-regeln-advisor-hell { display: none; }
:root[data-theme="light"] .zyklustag-regeln-advisor-dunkel { display: none; }
:root[data-theme="light"] .zyklustag-regeln-advisor-hell { display: block; }

@media (min-width: 641px) {
  .zyklustag-regeln-block {
    grid-template-columns: clamp(8rem, 17vw, 11.5rem) minmax(0, 1fr);
  }

  .zyklustag-regeln-advisor {
    width: 100%;
    margin: 0;
  }
}

.zyklustag-regeln {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.6;
}

.zyklustag-regeln li + li {
  margin-top: 0.4rem;
}

@media (min-width: 541px) {
  .zyklustag-rechner {
    margin: 1.5rem 0 2.25rem;
    padding: 1.6rem 1.75rem;
    border: 1px solid var(--panel-border);
    border-radius: 1.4rem;
  }

}

@media (min-width: 761px) {
  .zyklustag-form {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
  }

  .zyklustag-feld-datum {
    grid-column: auto;
  }
}

/* ----- Werbung für die App (unter dem Rechner, seit 2026-10-14) -----
   Eine eigene Karte statt des ruhigen „Gut zu wissen“-Kastens: Wer gerade
   seinen Zyklus gesehen hat, bekommt hier die App, die das jeden Tag tut.
   Links Überschrift, Unterzeile, Text (Andreas, 2026-10-15) und ein Knopf
   auf die Startseite mit den Store-Links; rechts ein vollständiges Telefon
   mit der Zyklusübersicht (je Theme der Seite) auf einem Lichthof. Zwei frühere Fassungen zeigten nur einen Ausschnitt der App
   (unten abgeschnittenes Telefon, dann ein schwebendes Fenster) — beides
   wirkte abgeschnitten. Gehäuse aus den --umfrage-geraet-*-Tokens wie die
   Telefone der Umfragen und Release Notes, Proportionen wie .app-phone der
   Startseite. */
.zyklustag-werbung {
  position: relative;
  display: grid;
  gap: 1.75rem;
  margin: 0 0 2rem;
  padding: 1.6rem 1.25rem 1.75rem;
  overflow: hidden;
  border: 1px solid var(--accent-35);
  border-radius: 1.4rem;
  background:
    radial-gradient(60% 80% at 80% 55%, var(--accent-22), transparent 70%),
    radial-gradient(60% 60% at 0% 0%, var(--accent-12), transparent 70%),
    var(--academy-callout-bg);
  box-shadow: var(--shadow-sm);
}

.zyklustag-werbung-kicker {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.zyklustag-werbung-marke {
  color: var(--heading);
}

.zyklustag-werbung-marke span {
  color: var(--accent);
}

/* Keine Silbentrennung: site.css trennt Komposita (für schmale Spalten), und
   ein getrenntes Wort zerbricht jede Pointe. balance verteilt Zeilen
   gleichmäßig. */
.zyklustag-werbung h2,
.zyklustag-werbung-unterzeile {
  hyphens: manual;
  text-wrap: balance;
}

.zyklustag-werbung h2 {
  margin: 0.45rem 0 0.3rem;
  color: var(--heading);
  font-size: clamp(1.8rem, 5.6vw, 2.7rem);
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.zyklustag-werbung-unterzeile {
  max-width: 30rem;
  margin: 0 0 1rem;
  color: var(--accent);
  font-size: clamp(1.15rem, 3.4vw, 1.5rem);
  font-weight: 750;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.zyklustag-werbung-lead {
  max-width: 32rem;
  margin: 0 0 1.5rem;
  color: var(--text);
  font-size: clamp(1rem, 2.6vw, 1.08rem);
  line-height: 1.6;
}

.zyklustag-werbung-cta {
  text-decoration: none;
}

/* Bildspalte: das Telefon allein, mittig. Bis 2026-10-15 stand der
   EggCademy-Professor daneben — ohne Mehrwert (Andreas), der Platz gehört
   jetzt dem Telefon. */
.zyklustag-werbung-bild {
  display: flex;
  justify-content: center;
  align-items: center;
}

.zyklustag-werbung-telefon {
  width: min(62%, 16rem);
  padding: 0.4rem;
  border-radius: 14% / 6.6%;
  background: linear-gradient(160deg, var(--umfrage-geraet-hell) 0%, var(--umfrage-geraet) 40%, var(--umfrage-geraet-dunkel) 100%);
  box-shadow:
    0 0 0 1.5px var(--umfrage-geraet-kante),
    inset 0 0 0 2px var(--umfrage-geraet-glanz),
    0 30px 60px -28px var(--umfrage-geraet-schatten),
    0 0 70px -12px var(--accent-35);
  transform: rotate(-3deg);
}

.zyklustag-werbung-glas {
  overflow: hidden;
  border-radius: 11% / 5.2%;
  background: #000;
}

.zyklustag-werbung-screen {
  display: block;
  width: 100%;
  height: auto;
}

/* Die Aufnahme folgt dem Theme der Seite: dunkel EggClipse, hell
   EggSposure. Muster wie .imprint-logo-dark/-light in site.css. */
.zyklustag-werbung-screen-hell { display: none; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .zyklustag-werbung-screen-dunkel { display: none; }
  :root:not([data-theme]) .zyklustag-werbung-screen-hell { display: block; }
}

:root[data-theme="dark"] .zyklustag-werbung-screen-dunkel { display: block; }
:root[data-theme="dark"] .zyklustag-werbung-screen-hell { display: none; }
:root[data-theme="light"] .zyklustag-werbung-screen-dunkel { display: none; }
:root[data-theme="light"] .zyklustag-werbung-screen-hell { display: block; }

@media (min-width: 761px) {
  .zyklustag-werbung {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 2rem;
    padding: 2.5rem 2.75rem;
  }

  .zyklustag-werbung-telefon {
    width: min(78%, 16.5rem);
  }
}