/* teeziehzeit.de — eigene Gestaltung nach dem Stitch-Entwurf (Projekt 10157431439956009723, 2026-10-17).
   Ruhig, hell, Grüntöne in Bändern, große Rundungen, Pillen-Knöpfe, zentrierte Abschnittsköpfe.
   Liegt über site.css. Schriften aus dem System (Merriweather/Source Sans nur, wenn lokal installiert) —
   keine Schriften von Dritten (LG München I, 3 O 17493/20). */
:root {
    --accent: #376124;
    --accent-2: #b8673e;
    --ink: #161e14;
    --muted: #4a5245;
    --bg: #f7faf3;
    --surface: #ffffff;
    --line: #d6ddcf;
    --band: #e8f1e1;
    --soft: #edf5e6;
    --radius: 16px;
    --shadow: none;
    --serif: Merriweather, Georgia, "Times New Roman", serif;
    --sans: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

.theme-teeziehzeit { font-family: var(--sans); font-size: 1.02rem; }

/* Kopf: Wortmarke mit Teeschale (Ring) statt Raute */
.theme-teeziehzeit .site-header { background: rgb(255 255 255 / .96); border-bottom-color: var(--line); }
.theme-teeziehzeit .brand { font-weight: 700; color: var(--accent); }
.theme-teeziehzeit .brand::before { width: .95rem; height: .95rem; border-radius: 50%; transform: none; background: var(--soft); box-shadow: inset 0 0 0 3px var(--accent); }
.theme-teeziehzeit .main-nav a { font-weight: 600; }
.theme-teeziehzeit .main-nav a:hover, .theme-teeziehzeit .main-nav a.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Bänder über die ganze Breite, ohne zusätzliches Markup */
.theme-teeziehzeit .hero,
.theme-teeziehzeit .section:nth-of-type(odd) { background: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); }
.theme-teeziehzeit .hero { background: var(--bg); box-shadow: 0 0 0 100vmax var(--bg); padding: 3.5rem 0 3rem; }
.theme-teeziehzeit .section { padding: 3.5rem 0; }

/* Hero */
.theme-teeziehzeit .hero h1 { font-weight: 400; font-size: clamp(2.1rem, 5vw, 3.2rem); line-height: 1.15; letter-spacing: -.01em; }
.theme-teeziehzeit .hero .label { display: inline-flex; align-items: center; gap: .4rem; color: var(--accent); background: var(--soft); border: 1px solid #c9dcbb; border-radius: 999px; padding: .25rem .75rem; letter-spacing: .06em; }
.theme-teeziehzeit .hero .label::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent); }
.theme-teeziehzeit .hero-lead { color: var(--muted); }
.theme-teeziehzeit .hero-figure { background: var(--surface); padding: .6rem; border: 1px solid var(--line); border-radius: 22px; }
.theme-teeziehzeit .hero-figure img { border: 0; border-radius: 16px; }
.theme-teeziehzeit .hero-figure figcaption { padding: 0 .3rem .1rem; }

/* Knöpfe und Textlinks: Pillen, normale Schreibung */
.theme-teeziehzeit .button { border-radius: 999px; text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 600; padding: .75rem 1.5rem; background: var(--accent); color: #fff; }
/* Kaufknopf bleibt orange (Grundgerüst, --cta) — nur als Pille, damit er zum Theme passt. */
.theme-teeziehzeit .cta { border-radius: 999px; }
.theme-teeziehzeit .button-dark,
.theme-teeziehzeit .pick .button { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
.theme-teeziehzeit .button-dark:hover,
.theme-teeziehzeit .pick .button:hover { background: var(--accent); color: #fff; filter: none; }
.theme-teeziehzeit .text-link,
.theme-teeziehzeit .path-more,
.theme-teeziehzeit .card-more { text-transform: none; letter-spacing: 0; font-size: .92rem; font-weight: 600; border-bottom: 0; color: var(--accent); }

/* Zentrierte Abschnittsköpfe mit kleinem Blatt-Punkt */
.theme-teeziehzeit .section > .label,
.theme-teeziehzeit .section > .section-title { text-align: center; }
.theme-teeziehzeit .section > .label { color: var(--accent); letter-spacing: .08em; }
.theme-teeziehzeit .section > .label::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .45rem; vertical-align: .05em; border-radius: 50% 0; background: var(--accent); }
.theme-teeziehzeit .section-title { font-weight: 400; font-size: clamp(1.6rem, 3.4vw, 2.1rem); margin-bottom: 2rem; }

/* Karten */
.theme-teeziehzeit .card,
.theme-teeziehzeit .path,
.theme-teeziehzeit .pick,
.theme-teeziehzeit .criterion { border-radius: var(--radius); border-color: var(--line); padding: 1.6rem; }
.theme-teeziehzeit .card:hover,
.theme-teeziehzeit .path:hover { border-color: var(--accent); }
.theme-teeziehzeit .card-image { margin: -1.6rem -1.6rem .8rem; }
.theme-teeziehzeit .card-kicker,
.theme-teeziehzeit .pick-badge { align-self: flex-start; color: var(--accent); background: var(--soft); border-radius: 999px; padding: .15rem .6rem; font-size: .68rem; }
.theme-teeziehzeit .card-title,
.theme-teeziehzeit .path-title,
.theme-teeziehzeit .pick-name,
.theme-teeziehzeit .criterion strong { font-weight: 400; display: block; }

/* Wege: Nummer als runde Marke */
.theme-teeziehzeit .path-no { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 0; border-radius: 12px; background: var(--soft); color: var(--accent); font-size: .85rem; }

/* Empfehlungen: „Anzeige“ als Pille */
.theme-teeziehzeit .product-label { background: var(--soft); border-color: #c9dcbb; color: var(--accent); font-weight: 700; }
.theme-teeziehzeit .fineprint { font-style: normal; }

/* So arbeiten wir: Ziffer im Kreis */
.theme-teeziehzeit .criterion-no { display: flex; align-items: center; width: fit-content; margin-bottom: .8rem; min-width: 2rem; height: 2rem; padding: 0 .55rem; border-radius: 999px; background: var(--soft); letter-spacing: .02em; }
.theme-teeziehzeit .disclosure { border-radius: var(--radius); background: var(--surface); border-color: var(--line); padding: 1.1rem 1.3rem; }

/* Artikel */
.theme-teeziehzeit .article h1,
.theme-teeziehzeit .article h2 { font-weight: 400; }
.theme-teeziehzeit .body blockquote { border-left-color: var(--accent-2); background: #f7efe8; }
.theme-teeziehzeit .product { border-radius: var(--radius); }
.theme-teeziehzeit .product-badge { border-radius: 999px; }
.theme-teeziehzeit .table-wrap { border-radius: var(--radius); }
.theme-teeziehzeit .toc { border-radius: var(--radius); background: var(--soft); }

/* Fuß */
.theme-teeziehzeit .site-footer { background: var(--band); border-top-color: var(--line); }
.theme-teeziehzeit .footer-brand { color: var(--accent); font-family: var(--serif); }

@media (max-width: 560px) {
    .theme-teeziehzeit .section { padding: 2.5rem 0; }
    .theme-teeziehzeit .hero { padding: 2rem 0 2.5rem; }
}

/* Raster mittig wie die Abschnittsköpfe — auch wenn es nur zwei Karten gibt */
.theme-teeziehzeit .cards,
.theme-teeziehzeit .paths,
.theme-teeziehzeit .picks,
.theme-teeziehzeit .criteria { grid-template-columns: repeat(auto-fit, minmax(240px, 340px)); justify-content: center; }

/* v7: Vergleichsseiten im Teeziehzeit-Stil */
.theme-teeziehzeit .compare-card,
.theme-teeziehzeit .pick-card,
.theme-teeziehzeit .aside-box { border-radius: var(--radius); }
.theme-teeziehzeit .pick-card-badge,
.theme-teeziehzeit .product-badge { background: var(--accent); }
.theme-teeziehzeit .picks-top-title { text-align: left; font-weight: 400; }
.theme-teeziehzeit .compare-list { max-width: 980px; margin: 0 auto; }