/* ============================================================
   schwanger.at — Eisprung-, Geburts- und Schwangerschaftsrechner
   Vom Template geladen, damit das Widget auch ohne das
   2026-Seitenlayout aussieht. Farben kommen aus den Tokens;
   die Fallback-Werte sind dieselben wie in 1-tokens.css.
   ============================================================ */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/files/layout2026/fonts/fraunces-normal-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/files/layout2026/fonts/fraunces-italic-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/files/layout2026/fonts/caveat-normal-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/files/layout2026/fonts/inter-normal-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/files/layout2026/fonts/inter-normal-latin.woff2') format('woff2');
}

.sw-rechner {
  --sw-white: var(--c-white, #FDFAF6);
  --sw-cream: var(--c-cream, #F8F3ED);
  --sw-cream-dark: var(--c-cream-dark, #E4D9CA);
  --sw-coral: var(--c-coral, #CD8166);
  --sw-coral-pale: var(--c-coral-pale, #F0DDD2);
  --sw-coral-muted: var(--c-coral-muted, #EBC9B6);
  --sw-blush: var(--c-blush, #F7E2E2);
  --sw-cta: var(--c-cta, #C0492A);
  --sw-cta-dark: var(--c-cta-dark, #A23C20);
  --sw-deep: var(--c-deep, #3A2C1F);
  --sw-text-soft: var(--c-text-soft, #6B5847);
  --sw-text-muted: var(--c-text-muted, #A8927E);
  --sw-trust: var(--c-trust, #2F5D7C);
  --sw-trust-soft: var(--c-trust-soft, #E5EEF3);
  --sw-font-display: var(--font-display, 'Fraunces', Georgia, serif);
  --sw-font-body: var(--font-body, 'Inter', system-ui, sans-serif);
  --sw-font-hand: var(--font-hand, 'Caveat', cursive);
  --sw-fs-h1: var(--fs-h1, clamp(30px, 22px + 1.8vw, 46px));
  --sw-fs-h2: var(--fs-h2, clamp(20px, 17px + 0.6vw, 24px));
  --sw-fs-body: var(--fs-body, 16px);
  --sw-fs-teaser: var(--fs-teaser, 14px);
  --sw-fs-meta: var(--fs-meta, 13px);
  --sw-fs-hand: var(--fs-hand, clamp(22px, 3vw, 26px));
  --sw-radius-s: var(--radius-s, 14px);
  --sw-radius-m: var(--radius-m, 16px);
  --sw-radius-l: var(--radius-l, 24px);
  --sw-radius-pill: var(--radius-pill, 24px);
  --sw-border: var(--border-hair, 0.5px solid var(--sw-cream-dark));

  box-sizing: border-box;
  max-width: var(--w-prose, 760px);
  margin: 0 auto 40px;
  padding: 32px 28px 28px;
  background: var(--sw-white);
  border: var(--sw-border);
  border-radius: var(--sw-radius-l);
  color: var(--sw-deep);
  font-family: var(--sw-font-body);
  font-size: var(--sw-fs-body);
  font-weight: 400;
  line-height: 1.7;
  text-align: left;
}

.sw-rechner *,
.sw-rechner *::before,
.sw-rechner *::after {
  box-sizing: border-box;
}

.sw-rechner .sw-rechner__eyebrow {
  display: block;
  margin: 0 0 4px;
  font-family: var(--sw-font-hand);
  font-size: var(--sw-fs-hand);
  font-weight: 600;
  font-style: normal;
  line-height: 1;
  color: var(--sw-coral);
}

.sw-rechner h1.sw-rechner__title,
.sw-rechner h2.sw-rechner__title {
  width: auto;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--sw-font-display);
  font-size: var(--sw-fs-h2);
  font-weight: 400;
  font-style: normal;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-align: left;
  color: var(--sw-deep);
}

.sw-rechner h1.sw-rechner__title {
  font-size: var(--sw-fs-h1);
}

.sw-rechner h1.sw-rechner__title em,
.sw-rechner h2.sw-rechner__title em {
  font-family: var(--sw-font-display);
  font-style: italic;
  font-weight: 400;
  color: inherit;
}

.sw-rechner p.sw-rechner__lead,
.sw-rechner p.sw-rechner__hint,
.sw-rechner p.sw-rechner__more,
.sw-rechner p.sw-rechner__week,
.sw-rechner p.sw-rechner__adjust,
.sw-rechner p.sw-rechner__passed,
.sw-rechner p.sw-rechner__leave {
  width: auto;
  margin: 0;
  padding: 0;
  font-family: var(--sw-font-body);
  font-size: var(--sw-fs-teaser);
  font-weight: 400;
  line-height: 1.65;
  color: var(--sw-text-soft);
}

.sw-rechner p.sw-rechner__lead {
  margin-bottom: 22px;
}

.sw-rechner p.sw-rechner__hint {
  margin-top: 6px;
  font-size: var(--sw-fs-meta);
  color: var(--sw-text-muted);
}

.sw-rechner .sw-rechner__grid {
  display: grid;
  gap: 16px 20px;
}

.sw-rechner .sw-rechner__field {
  min-width: 0;
}

.sw-rechner .sw-rechner__field label,
.sw-rechner fieldset.sw-rechner__choice legend {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  font-family: var(--sw-font-body);
  font-size: var(--sw-fs-teaser);
  font-weight: 600;
  line-height: 1.4;
  color: var(--sw-deep);
}

.sw-rechner input[type="date"],
.sw-rechner input[type="number"],
.sw-rechner select {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  font-family: var(--sw-font-body);
  font-size: var(--sw-fs-body);
  line-height: 1.4;
  color: var(--sw-deep);
  background: var(--sw-cream);
  border: 1px solid var(--sw-cream-dark);
  border-radius: var(--sw-radius-m);
  box-shadow: none;
  appearance: auto;
}

.sw-rechner fieldset.sw-rechner__choice {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.sw-rechner .sw-rechner__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.sw-rechner .sw-rechner__options label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}

.sw-rechner .sw-rechner__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.sw-rechner p.sw-rechner__error {
  margin: 14px 0 0;
  font-family: var(--sw-font-body);
  font-size: var(--sw-fs-teaser);
  font-weight: 600;
  color: var(--sw-cta-dark);
}

.sw-rechner button.sw-rechner__submit {
  margin-top: 20px;
  padding: 12px 24px;
  font-family: var(--sw-font-body);
  font-size: var(--sw-fs-teaser);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  color: var(--sw-white);
  background: var(--sw-cta);
  border: 0;
  border-radius: var(--sw-radius-pill);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.sw-rechner button.sw-rechner__submit:hover {
  background: var(--sw-cta-dark);
  color: var(--sw-white);
}

.sw-rechner .sw-rechner__result {
  margin-top: 28px;
  padding-top: 24px;
  border-top: var(--sw-border);
}

.sw-rechner p.sw-rechner__kicker {
  margin: 0 0 4px;
  font-family: var(--sw-font-body);
  font-size: var(--sw-fs-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sw-text-muted);
}

.sw-rechner p.sw-rechner__due {
  width: auto;
  margin: 0 0 8px;
  padding: 0;
  font-family: var(--sw-font-display);
  font-size: var(--sw-fs-h2);
  font-weight: 400;
  line-height: 1.3;
  color: var(--sw-deep);
}

.sw-rechner p.sw-rechner__week,
.sw-rechner p.sw-rechner__adjust,
.sw-rechner p.sw-rechner__passed {
  margin-bottom: 8px;
}

.sw-rechner .sw-rechner__bars {
  display: grid;
  gap: 14px;
  margin: 20px 0 8px;
}

.sw-rechner .sw-rechner__bar-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font-size: var(--sw-fs-meta);
  font-weight: 600;
  color: var(--sw-deep);
}

.sw-rechner .sw-rechner__bar-top span:last-child {
  font-weight: 400;
  color: var(--sw-text-muted);
}

.sw-rechner .sw-rechner__track {
  height: 8px;
  background: var(--sw-cream);
  border-radius: var(--sw-radius-pill);
  overflow: hidden;
}

.sw-rechner .sw-rechner__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--sw-coral);
  border-radius: inherit;
}

.sw-rechner .sw-rechner__fill--done {
  background: var(--sw-cta);
}

.sw-rechner .sw-rechner__result > .sw-rechner__hint {
  margin: 14px 0 8px;
}

.sw-rechner .sw-rechner__window {
  margin-top: 16px;
  padding: 16px 18px;
  background: var(--sw-cream);
  border-radius: var(--sw-radius-m);
}

.sw-rechner p.sw-rechner__window-range {
  margin: 0;
  font-family: var(--sw-font-display);
  font-size: var(--sw-fs-body);
  font-weight: 400;
  line-height: 1.4;
  color: var(--sw-deep);
}

.sw-rechner p.sw-rechner__leave {
  margin-top: 14px;
}

.sw-rechner h3.sw-rechner__h {
  width: auto;
  margin: 28px 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--sw-font-body);
  font-size: var(--sw-fs-body);
  font-weight: 600;
  line-height: 1.4;
  color: var(--sw-deep);
}

.sw-rechner ol.sw-rechner__timeline {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  counter-reset: none;
}

.sw-rechner ol.sw-rechner__timeline li.sw-rechner__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  margin: 0;
  padding: 14px 0;
  border: 0;
  border-top: var(--sw-border);
  border-radius: 0;
  background: none;
  color: var(--sw-deep);
  line-height: 1.45;
  counter-increment: none;
}

.sw-rechner ol.sw-rechner__timeline li.sw-rechner__item::before {
  content: none;
  display: none;
}

.sw-rechner .sw-rechner__when,
.sw-rechner .sw-rechner__detail {
  grid-column: 1;
  font-size: var(--sw-fs-meta);
  line-height: 1.45;
  color: var(--sw-text-muted);
}

.sw-rechner .sw-rechner__item-title {
  grid-column: 1;
  font-weight: 600;
  color: var(--sw-deep);
}

.sw-rechner .sw-rechner__badge {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  padding: 4px 10px;
  border-radius: var(--sw-radius-pill);
  background: var(--sw-coral-pale);
  font-family: var(--sw-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sw-cta-dark);
}

.sw-rechner li.sw-rechner__item--now {
  margin-inline: -12px;
  padding-inline: 12px;
  background: var(--sw-cream);
  border-radius: var(--sw-radius-m);
}

.sw-rechner li.sw-rechner__item--past .sw-rechner__item-title {
  font-weight: 500;
  color: var(--sw-text-soft);
}

.sw-rechner .sw-rechner__past {
  margin-top: 8px;
}

.sw-rechner .sw-rechner__past summary {
  cursor: pointer;
  font-size: var(--sw-fs-teaser);
  font-weight: 600;
  color: var(--sw-text-soft);
}

.sw-rechner .sw-rechner__note {
  margin: 22px 0 0;
  padding: 14px 16px;
  background: var(--sw-trust-soft);
  border-radius: var(--sw-radius-m);
  font-size: var(--sw-fs-meta);
  line-height: 1.55;
  color: var(--sw-deep);
}

.sw-rechner .sw-rechner__note a {
  color: var(--sw-trust);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  box-shadow: none;
}

.sw-rechner .sw-rechner__note a:hover {
  color: var(--sw-cta);
}

.sw-rechner p.sw-rechner__more {
  margin-top: 18px;
}

.sw-rechner p.sw-rechner__more a {
  color: var(--sw-cta);
  font-weight: 600;
  box-shadow: none;
}

.sw-rechner p.sw-rechner__more a:hover {
  color: var(--sw-cta-dark);
}

.sw-rechner .sw-rechner__calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin: 16px 0 8px;
}

.sw-rechner .sw-rechner__day {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: var(--sw-radius-s);
  background: var(--sw-cream);
  font-size: var(--sw-fs-meta);
  line-height: 1;
  color: var(--sw-text-soft);
}

.sw-rechner .sw-rechner__day--period {
  background: var(--sw-blush);
  color: var(--sw-deep);
}

.sw-rechner .sw-rechner__day--fertile {
  background: var(--sw-coral-muted);
  color: var(--sw-deep);
}

.sw-rechner .sw-rechner__day--ovulation {
  background: var(--sw-cta);
  color: var(--sw-white);
  font-weight: 600;
}

.sw-rechner .sw-rechner__day--today {
  box-shadow: inset 0 0 0 1.5px var(--sw-trust);
}

.sw-rechner .sw-rechner__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 8px;
  padding: 0;
}

.sw-rechner .sw-rechner__legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--sw-fs-meta);
  color: var(--sw-text-soft);
}

.sw-rechner .sw-rechner__swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: var(--sw-blush);
  font-style: normal;
}

.sw-rechner :focus-visible {
  outline: 2px solid var(--sw-trust);
  outline-offset: 2px;
}

.sw-rechner .sw-rechner__swatch--fertile {
  background: var(--sw-coral-muted);
}

.sw-rechner .sw-rechner__swatch--ovulation {
  background: var(--sw-cta);
}

.sw-rechner .is-hidden {
  display: none;
}

@media (min-width: 640px) {
  .sw-rechner .sw-rechner__grid {
    grid-template-columns: 1fr 1fr;
  }

  .sw-rechner .sw-rechner__field--wide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .sw-rechner {
    padding: 24px 18px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sw-rechner button.sw-rechner__submit {
    transition: none;
  }
}