/* teebox.at */

:root{
  /* Farben */
  --paper:#FCF8F1;
  --porcelain:#FCF8F1;
  --porcelain-2:#F3F6EC;
  --white:#FFFFFF;

  --ink:#2A2A24;
  --ink-70:rgba(42,42,36,.7);
  --ink-66:rgba(42,42,36,.66);
  --ink-62:rgba(42,42,36,.62);
  --ink-60:rgba(42,42,36,.6);
  --ink-45:rgba(42,42,36,.45);
  --ink-14:rgba(42,42,36,.14);
  --ink-10:rgba(42,42,36,.1);

  --deep:#45623C;      /* primary green — buttons, footer, topbar */
  --deep-2:#3A5433;    /* hover / darker green */
  --green-text:#F3F7EC;
  --amber:#7FA06A;     /* light green accent — eyebrow, links */
  --gold:#7FA06A;
  --jade:#45623C;
  --ruby:#A9707B;
  --nav-active:#EDF2E4;

  --blob-peach:#F6E2CC;
  --blob-sage:#EBF1DE;
  --blob-rose:#F7E1E5;
  --blob-sand:#FAEBD6;

  --display:'Kaisei Decol', Georgia, serif;
  --body:'Instrument Sans', system-ui, sans-serif;
  --serif:'Literata', Georgia, serif;
  --mono: ui-monospace, Menlo, monospace;

  --radius:10px;
  --radius-lg:14px;

  --space-section: clamp(40px, 6vw, 76px);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1160px; margin:0 auto; padding:0 44px;}
::selection{background:var(--blob-sand); color:var(--ink);}
a:focus-visible, button:focus-visible{
  outline:2px solid var(--deep);
  outline-offset:2px;
}

/* ---------- HEADER ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(252,248,241,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--ink-10);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:20px; padding-bottom:20px;
}
.logo{
  font-family:var(--display);
  font-weight:400;
  font-size:1.6rem;
  letter-spacing:-0.01em;
  display:flex; align-items:center; gap:11px;
}
.logo-mark{
  position:relative; width:32px; height:32px; flex-shrink:0;
  background:url(logo-mark.svg) center/contain no-repeat;
}
.logo-dot{display:none;}
nav ul{list-style:none; display:flex; gap:22px;}
nav a{
  font:500 14.5px/1 var(--body); color:var(--ink);
  padding:8px 0; border-bottom:1.5px solid transparent;
  transition:border-color .18s ease, color .18s ease;
}
nav a:hover{color:var(--deep); border-bottom-color:var(--ink-14);}
nav a.active{border-bottom-color:var(--deep);}

.menu-toggle{
  display:none;
  width:40px; height:40px;
  align-items:center; justify-content:center;
  background:none; border:1.5px solid var(--ink-14); border-radius:999px;
  cursor:pointer; flex-shrink:0;
}
.menu-toggle svg{width:18px; height:18px;}
.menu-toggle svg line{stroke:var(--ink); stroke-width:1.6; stroke-linecap:round;}
.menu-toggle .icon-close{display:none;}
header.menu-open .menu-toggle .icon-open{display:none;}
header.menu-open .menu-toggle .icon-close{display:block;}

@media (max-width:920px){
  .menu-toggle{display:inline-flex;}
  nav{
    position:absolute; left:0; right:0; top:100%;
    background:var(--white);
    border-bottom:1px solid var(--ink-10);
    box-shadow:0 20px 30px -20px rgba(42,42,36,.25);
    max-height:0; overflow:hidden;
    transition:max-height .3s ease;
  }
  header.menu-open nav{max-height:320px;}
  nav ul{display:flex; flex-direction:column; gap:0; padding:8px 32px 20px;}
  nav ul li{border-top:1px solid var(--ink-10);}
  nav ul li:first-child{border-top:none;}
  nav a{display:block; padding:16px 4px; border-radius:0; font-size:1rem;}
  nav a.active, nav a:hover{background:none; color:var(--deep);}
}

/* ---------- BREADCRUMB ---------- */
.breadcrumb{
  font-family:var(--mono); font-size:.75rem; color:var(--ink-60);
  padding:26px 0 0; display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
.breadcrumb a:hover{color:var(--deep);}
.breadcrumb span.sep{opacity:.5;}
.breadcrumb span.current{color:var(--ink);}

/* ---------- PAGE HEADER (subpages) ---------- */
.page-header{padding:36px 0 48px; max-width:70ch;}
.eyebrow{
  font:700 12px/1 var(--body); letter-spacing:.08em; text-transform:uppercase;
  color:var(--amber); display:flex; align-items:center; gap:8px; margin-bottom:16px;
}
.page-header h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.1rem, 4vw, 3rem);
  line-height:1.1; letter-spacing:-0.015em; color:var(--ink);
}
.page-header p.lede{margin-top:16px; font:400 1.08rem/1.65 var(--serif); color:var(--ink-70); max-width:56ch;}

/* ---------- HOME HERO ---------- */
/* Asymmetrisch: Text links, ein einzelnes Bild rechts, das bis an den Rand laeuft. */
.hero{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:56px;
  align-items:center; padding:40px 0 var(--space-section);
}
.hero-kicker{
  font:500 13px/1 var(--mono); color:var(--ink-60); letter-spacing:.02em; margin-bottom:22px;
}
.hero h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.4rem, 5vw, 3.7rem); line-height:1.06; letter-spacing:-0.02em;
  color:var(--ink); max-width:14ch;
}
.hero .lede{
  margin-top:22px; max-width:46ch;
  font:400 1.08rem/1.7 var(--serif); color:var(--ink-70);
}
.hero-links{display:flex; align-items:center; gap:22px; margin-top:30px; flex-wrap:wrap;}
.hero-figure{margin:0 -44px 0 0;}
.hero-figure img{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:58% 50%;
  border-radius:var(--radius) 0 0 var(--radius);
}
.hero-figure figcaption{
  margin-top:10px; padding-right:44px;
  font:italic 400 .88rem/1.5 var(--serif); color:var(--ink-60);
}

.btn-primary{
  padding:13px 22px; border-radius:6px; background:var(--deep); color:var(--green-text);
  font:600 15px/1 var(--body);
  display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer;
  transition:background .2s ease;
}
.btn-primary:hover{background:var(--deep-2);}
.btn-ghost{
  padding:12px 21px; border-radius:6px; background:transparent; color:var(--ink);
  font:600 15px/1 var(--body); border:1px solid var(--ink-14);
  transition:border-color .2s ease;
}
.btn-ghost:hover{border-color:var(--ink-45);}
.hero-actions{display:flex; gap:12px; margin-top:26px; flex-wrap:wrap;}
.link-arrow{
  font:500 15px/1.4 var(--body); color:var(--ink-70);
  border-bottom:1px solid var(--ink-14); padding-bottom:2px;
}
.link-arrow:hover{color:var(--deep); border-bottom-color:var(--deep);}

/* ---------- SECTION HEAD ---------- */
.section-head{text-align:center; margin-bottom:26px; max-width:520px; margin-inline:auto;}
.section-head.split{
  display:flex; justify-content:space-between; align-items:baseline;
  text-align:left; max-width:none; margin-bottom:22px; gap:16px; flex-wrap:wrap;
}
.section-head h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.8rem, 3vw, 2.3rem); color:var(--ink); letter-spacing:-0.005em;
}
.section-head p{margin-top:8px; max-width:58ch; font:400 15.5px/1.65 var(--serif); color:var(--ink-62);}
.section-head .more{font:600 14px/1 var(--body); color:var(--deep); white-space:nowrap;}
.section-head .more:hover{text-decoration:underline; text-underline-offset:3px;}

/* ---------- SORTEN (Startseite) ---------- */
/* Wie die Etiketten auf einer Reihe Teedosen: Farbstreifen, Name, Notiz, Temperatur. */
.sorten{padding:var(--space-section) 0; border-top:1px solid var(--ink-10);}
.sorten-list{
  list-style:none; display:grid; grid-template-columns:1fr 1fr; column-gap:48px;
  border-top:1px solid var(--ink-14);
}
.sorten-list a{
  display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; column-gap:16px;
  padding:18px 0 18px 18px; border-bottom:1px solid var(--ink-14);
  position:relative; transition:background .18s ease;
}
.sorten-list a::before{
  content:""; position:absolute; left:0; top:16px; bottom:16px; width:5px;
  border-radius:2px; background:var(--c);
}
.sorten-list a:hover{background:var(--porcelain-2);}
.sorten-name{font-family:var(--display); font-size:1.3rem; line-height:1.2; color:var(--ink);}
.sorten-note{font:italic 400 .92rem/1.4 var(--serif); color:var(--ink-60);}
.sorten-temp{font:500 .82rem/1 var(--mono); color:var(--ink-70); white-space:nowrap; padding-right:4px;}

/* Kleine Karten (Journal, 404) */
.sorten-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.sorten-card{
  background:var(--white); border-radius:var(--radius);
  padding:20px 20px 18px; border:1px solid var(--ink-10);
  display:flex; flex-direction:column;
  transition:border-color .18s ease;
}
.sorten-card:hover{border-color:var(--ink-45);}
.sorten-dot{width:28px; height:6px; margin:0 0 14px; border-radius:2px; border:none !important;}
.sorten-card h3{font-family:var(--display); font-weight:400; font-size:20px; line-height:1.2; color:var(--ink);}
.sorten-card span{display:block; margin-top:6px; font-size:13.5px; color:var(--ink-60);}

/* ---------- ANBAUGEBIETE (home chips) ---------- */
.regions-home{padding:var(--space-section) 0 0; border-top:1px solid var(--ink-10);}
.chip-list{display:flex; flex-wrap:wrap; gap:8px;}
.chip-region{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 14px 9px 11px; border-radius:6px;
  background:var(--white); border:1px solid var(--ink-10);
  font:500 14.5px/1 var(--body);
  transition:border-color .18s ease;
}
.chip-region:hover{border-color:var(--ink-45);}
.chip-region .dot{width:10px; height:10px; border-radius:50%; margin-right:0; flex-shrink:0;}

/* ---------- REDAKTION (blog grid) ---------- */
.redaktion{padding:var(--space-section) 0;}
.redaktion-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.redaktion-card{display:block;}
.redaktion-thumb{
  height:170px; border-radius:var(--radius-lg); overflow:hidden;
  display:flex; align-items:flex-end; padding:16px; position:relative;
}
.redaktion-thumb.sage{background-color:#E4EFD9; background-image:url('assets/artikel-pflanzendrinks.jpg'); background-size:cover; background-position:center;}
.redaktion-thumb.rose{background-color:#F7E1E5; background-image:url('assets/artikel-kamillentee.jpg'); background-size:cover; background-position:center;}
.redaktion-thumb.sand{background-color:#FAEBD6; background-image:url('assets/artikel-pfefferminztee.jpg'); background-size:cover; background-position:center;}
.redaktion-kicker{
  font:500 12.5px/1 var(--mono); color:var(--ink-60);
  margin-top:14px;
}
.redaktion-card h3{
  margin-top:7px; font-family:var(--display); font-weight:400; font-size:22px; line-height:1.25; color:var(--ink);
}
.redaktion-card p{margin-top:7px; font:400 14.5px/1.6 var(--serif); color:var(--ink-62);}
.redaktion-card:hover h3{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px;}

/* Aufmacher: erster Beitrag gross links, die anderen beiden gestapelt rechts. */
.redaktion-grid.featured{grid-template-columns:1.6fr 1fr; gap:22px 36px;}
.redaktion-grid.featured .redaktion-card:first-child{grid-row:span 2;}
.redaktion-grid.featured .redaktion-card:first-child .redaktion-thumb{height:340px;}
.redaktion-grid.featured .redaktion-card:first-child h3{font-size:30px; line-height:1.15;}
.redaktion-grid.featured .redaktion-card:first-child p{font-size:16px; max-width:52ch;}
.redaktion-grid.featured .redaktion-card:not(:first-child) .redaktion-thumb{height:120px;}

/* ---------- BREW GUIDE ---------- */
/* Heller Gegenpol zur Illustration links unten - haelt die Diagonale im Gleichgewicht.
   Rein tonal, kein zweites Bild: rechts oben steht die Tabellenkopfzeile. */
.brew::after{
  content:""; position:absolute; top:0; right:0; width:54%; height:70%;
  pointer-events:none; z-index:0;
  background:radial-gradient(90% 95% at 100% 0%, rgba(250,235,214,.22) 0%, rgba(250,235,214,.09) 44%, transparent 78%);
}
.brew > *{position:relative; z-index:1;}
.brew{
  position:relative; overflow:hidden;
  background:var(--deep); border-radius:var(--radius-lg); padding:56px; color:var(--green-text);
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:48px;
}
/* Das Aquarell liegt auf cremefarbenem Papier - damit es im dunkelgruenen Panel
   nicht wie aufgeklebt wirkt, blutet es in die Panelecke aus und wird nach
   oben/rechts weggeblendet. */
.brew-intro{position:static;}
.brew-img{
  position:absolute; left:0; bottom:0; margin:0;
  width:340px; height:220px; overflow:hidden; pointer-events:none;
  /* Zwei lineare Masken auf zwei verschachtelten Elementen statt mask-composite:
     geschachtelt ergibt das die Schnittmenge, mask-composite wird nicht ueberall
     zuverlaessig unterstuetzt und addiert sonst zu einer harten Kante. */
  -webkit-mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.85) 45%, transparent 100%);
  mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.85) 45%, transparent 100%);
}
.brew-img img{
  /* Nur Tasse und Untertasse zeigen - der Dampf oben wuerde sonst im Text landen. */
  width:100%; height:100%; object-fit:cover; object-position:42% 88%;
  display:block; opacity:.9;
  -webkit-mask-image:linear-gradient(to right, #000 0%, rgba(0,0,0,.85) 52%, transparent 100%);
  mask-image:linear-gradient(to right, #000 0%, rgba(0,0,0,.85) 52%, transparent 100%);
}
.brew h2{font-family:var(--display); font-weight:400; font-size:clamp(1.6rem,2.6vw,2.1rem); margin-bottom:16px;}
.brew p{color:rgba(243,247,236,.78); font:400 1rem/1.65 var(--serif); max-width:40ch;}
.brew-note{margin-top:14px; font:italic 400 .92rem/1.5 var(--serif); color:var(--ink-60);}
.tea-rules{margin-top:36px;}
.tea-rules h3{font-family:var(--display); font-weight:400; font-size:1.35rem; margin-bottom:16px;}
.tea-rules ol{list-style:none; counter-reset:rule; display:grid; grid-template-columns:repeat(5,1fr); gap:14px;}
.tea-rules li{counter-increment:rule; background:var(--white); border:1px solid var(--ink-14); border-radius:var(--radius); padding:18px; font:400 .9rem/1.55 var(--serif); color:var(--ink-70);}
.tea-rules li::before{content:counter(rule); display:block; font-family:var(--display); font-size:1.5rem; color:var(--amber); margin-bottom:6px;}
.tea-rules li strong{display:block; color:var(--ink); font-family:var(--body); margin-bottom:4px;}
@media (max-width:920px){ .tea-rules ol{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .tea-rules ol{grid-template-columns:1fr;} }
.brew-table{width:100%; border-collapse:collapse; margin-top:6px;}
.brew-table th{
  text-align:left; font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.05em;
  color:rgba(243,247,236,.86); padding:0 0 12px; font-weight:500; border-bottom:1px solid rgba(255,255,255,.14);
}
.brew-table td{padding:15px 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:.94rem;}
.brew-table tr:last-child td{border-bottom:none;}
.dot{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:10px;}
.brew-table td.temp{font-family:var(--mono); color:var(--blob-sand); font-size:.86rem;}
.brew-table td.time{font-family:var(--mono); color:#CFE6DA; font-size:.86rem;}
@media (max-width:920px){
  .brew{grid-template-columns:1fr; padding:36px 26px;}
  /* Einspaltig wuerde das Bild unter der Tabelle liegen - hier traegt die Tabelle allein. */
  .brew-img{display:none;}
}

/* ---------- ARTICLE TEMPLATE ---------- */
.article-layout{display:grid; grid-template-columns:1fr 300px; gap:56px; padding-bottom:80px;}
.article-meta{
  display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin-bottom:18px;
  font-family:var(--mono); font-size:.78rem; color:var(--amber);
}
.article-meta .tag{background:var(--porcelain-2); padding:5px 10px; border-radius:4px; color:var(--ink);}
.article-cover{height:300px; width:100%; object-fit:cover; display:block;
  border-radius:var(--radius-lg); margin:28px 0 36px; background:var(--sage, #E4EFD9);}
.prose{font:400 1.06rem/1.75 var(--serif); color:var(--ink);}
.prose p{margin-bottom:18px;}
.prose h2{font-family:var(--display); font-weight:400; font-size:1.45rem; color:var(--ink); margin:32px 0 14px;}
.prose ul{margin:0 0 18px 22px;}
.prose li{margin-bottom:8px;}
.prose strong{color:var(--ink);}
.prose ol{margin:0 0 18px 22px;}
.prose a{color:var(--deep); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;}
/* Datentabellen in Wissensseiten (Koffein, Blattgrade, Kraeuter) */
.data-table{width:100%; border-collapse:collapse; margin:4px 0 24px; font:400 .92rem/1.5 var(--body);}
.data-table th{text-align:left; font-family:var(--mono); font-size:.72rem; font-weight:400; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-60); padding:8px 12px 8px 0; border-bottom:1px solid var(--ink-14);}
.data-table td{padding:9px 12px 9px 0; border-bottom:1px solid var(--ink-10); vertical-align:top;}
.data-table td:first-child{font-weight:700; white-space:nowrap;}
.data-table td.group{padding-top:18px; font-family:var(--mono); font-size:.72rem; font-weight:400; text-transform:uppercase; letter-spacing:.04em; color:var(--amber);}
@media (max-width:600px){ .data-table td:first-child{white-space:normal;} }
/* Gesundheitshinweis oben auf Heiltee-Seiten */
.notice{background:var(--porcelain-2); border-left:3px solid var(--amber); border-radius:0 var(--radius) var(--radius) 0; padding:16px 20px; margin-bottom:24px; font:400 .95rem/1.6 var(--body);}
.pullquote{
  border-left:3px solid var(--amber); padding-left:22px; margin:28px 0;
  font-family:var(--display); font-size:1.2rem; color:var(--ink);
}
.sidebar-card{
  background:var(--white); border:1px solid var(--ink-14);
  border-radius:var(--radius); padding:24px; margin-bottom:22px;
}
.sidebar-card h4{
  font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-60); margin-bottom:14px;
}
.fact-row{display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--ink-10); font-size:.88rem;}
.fact-row:last-child{border-bottom:none;}
.fact-row span:first-child{color:var(--ink-62); flex-shrink:0;}
.fact-row span:last-child{font-weight:700; color:var(--ink); text-align:right;}
.related-link{display:block; padding:10px 0; font-size:.88rem; border-bottom:1px solid var(--ink-10);}
.related-link:last-child{border-bottom:none;}
.related-link:hover{color:var(--deep);}

/* ---------- TOPIC TEMPLATE (Teeart / Anbaugebiet) ---------- */
.topic-hero{
  border-radius:var(--radius-lg); padding:56px 48px; margin-top:8px; margin-bottom:56px;
  color:#fff; position:relative; overflow:hidden;
}
.topic-hero .eyebrow{color:rgba(255,255,255,.85);}
.topic-hero h1{font-family:var(--display); font-weight:400; font-size:clamp(2.1rem,4vw,3rem); letter-spacing:-0.01em;}
.topic-hero p{margin-top:14px; max-width:56ch; font:400 1.06rem/1.6 var(--serif); opacity:.92;}
.topic-facts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--ink-10); border-radius:var(--radius); overflow:hidden; margin-bottom:56px;
}
.topic-fact{background:var(--white); padding:22px; text-align:center;}
.topic-fact .num{font-family:var(--display); font-weight:400; font-size:1.6rem; color:var(--ink); display:block;}
.topic-fact .label{font-family:var(--mono); font-size:.7rem; color:var(--ink-60); text-transform:uppercase; letter-spacing:.04em;}
.topic-body{display:grid; grid-template-columns:1fr 300px; gap:56px; padding-bottom:72px;}

/* ---------- WORLD MAP (Anbaugebiete hub) ---------- */
.map-wrap{position:relative; background:var(--deep); border-radius:var(--radius-lg); padding:30px; overflow:hidden;}
.map-wrap svg{width:100%; height:auto; display:block;}
.map-land{fill:rgba(255,255,255,.22); stroke:rgba(255,255,255,.10); stroke-width:0.4;}
.map-grat{stroke:rgba(255,255,255,.08); stroke-width:.5; fill:none;}
.map-grat .eq{stroke:rgba(255,255,255,.16);}
/* Der Klimaguertel, in dem Tee waechst. Die Flaeche wird ueber einen
   Verlauf im SVG eingefaerbt, damit die Kanten ausfransen - als hartes
   Rechteck sah der Streifen im Ozean nach Fehler statt nach Absicht aus. */
/* Land und Gradnetz liegen ueber dem Guertel-Rect und wuerden dessen Hover
   abfangen - sie sind ohnehin nicht interaktiv. Nur die Pins bleiben es. */
.map-land, .map-grat, .map-belt-edge, .map-belt-label{pointer-events:none;}

/* Beim Ueberfahren hebt sich der Guertel samt Grenzen und Beschriftung. */
.map-belt{opacity:.42; transition:opacity .28s ease;}
.map-belt:hover{opacity:1;}
.map-belt:hover ~ .map-belt-edge{stroke:rgba(255,255,255,.5);}
.map-belt:hover ~ .map-belt-label{fill:rgba(255,255,255,.9);}

/* Gestrichelt wie Wendekreise auf einer gedruckten Karte - damit ist die
   Grenze des Guertels ablesbar, ohne als harte Kante zu wirken. */
.map-belt-edge{stroke:rgba(255,255,255,.2); stroke-width:.7; stroke-dasharray:5 6;
  transition:stroke .28s ease;}
.map-belt-label{
  font-family:var(--mono); font-size:9px; letter-spacing:.12em;
  fill:rgba(255,255,255,.45); transition:fill .28s ease;
}
.map-pin{cursor:pointer;}
/* Der UA-Fokusring umschliesst die ganze Gruppe inklusive Label - zu grob.
   Stattdessen den Kreis selbst markieren, nur bei Tastaturfokus. */
.map-pin:focus{outline:none;}
.map-pin:focus-visible circle.core{stroke:#fff; stroke-width:2.5;}
.map-pin circle.halo{fill:var(--blob-sand); opacity:.3; transform-origin:center; transform-box:fill-box; animation:pulse 2.6s ease-in-out infinite;}
.map-pin circle.core{r:6; fill:var(--blob-sand); stroke:var(--deep); stroke-width:1.4;}
.map-pin:hover circle.core, .map-pin.active circle.core, .map-pin:focus-visible circle.core{fill:#fff;}
.map-pin.active circle.halo{opacity:.4;}
@keyframes pulse{0%,100%{transform:scale(1); opacity:.28;} 50%{transform:scale(1.7); opacity:0;}}
/* Ableseleiste oben links im Kartenfeld - ersetzt die Beschriftung am Punkt,
   die sich im dichten asiatischen Cluster zwangslaeufig ueberlagert hat. */
.map-readout{
  position:absolute; top:30px; left:30px; z-index:1; pointer-events:none;
  display:flex; align-items:center; gap:10px;
  padding:9px 16px; border-radius:100px;
  background:rgba(20,28,22,.55); backdrop-filter:blur(3px);
  font-family:var(--mono); font-size:.82rem; color:#fff;
  opacity:0; transition:opacity .2s ease;
}
.map-readout:not(:empty){opacity:1;}
.map-readout .dot{width:11px; height:11px; border-radius:50%; flex-shrink:0;}
.map-readout strong{font-weight:600;}
.map-readout .sub{color:rgba(255,255,255,.62);}
@media (max-width:720px){
  .map-readout{top:20px; left:20px; font-size:.74rem; padding:7px 13px; gap:8px;}
  .map-readout .sub{display:none;}
}

.map-caption{font-family:var(--mono); font-size:.82rem; color:rgba(255,255,255,.55); margin-top:16px; text-align:center;}

.region-panel{
  margin-top:26px; background:var(--white); border-radius:var(--radius); border:1px solid var(--ink-14);
  padding:30px; display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:center;
}
.region-panel .swatch{width:56px; height:56px; border-radius:16px; flex-shrink:0;}
.region-panel h3{font-family:var(--display); font-weight:400; font-size:1.3rem; color:var(--ink); margin-bottom:6px;}
.region-panel p{font-size:.92rem; color:var(--ink-62); max-width:60ch;}
.region-panel .region-cta{
  font-family:var(--mono); font-size:.78rem; font-weight:500; color:var(--deep);
  border:1px solid var(--deep); padding:10px 18px; border-radius:6px; white-space:nowrap;
  transition:background .2s ease, color .2s ease;
}
.region-panel .region-cta:hover{background:var(--deep); color:#fff;}
.region-panel-empty{color:var(--ink-60); font-family:var(--mono); font-size:.85rem;}

.region-list{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:20px;}
.region-chip{
  padding:14px 16px; border-radius:14px; background:var(--white); border:1px solid var(--ink-14);
  font-size:.88rem; font-weight:600; display:flex; align-items:center; gap:10px;
  transition:border-color .2s ease, transform .2s ease;
}
.region-chip:hover, .region-chip:focus-visible{border-color:var(--deep); transform:translateY(-2px);}
.region-chip .dot{width:16px; height:16px; border-radius:50%; margin-right:0; flex-shrink:0;}
button.region-chip{font-family:inherit; color:inherit; cursor:pointer; text-align:left;}
.map-crosslink{margin-top:22px; font-family:var(--mono); font-size:.82rem; color:var(--ink-60); text-align:center;}
.map-crosslink a{color:var(--deep); text-decoration:underline; text-underline-offset:3px;}

/* ---------- FOOTER ---------- */
footer{background:var(--deep); color:var(--green-text); padding:60px 0 30px; margin-top:36px;}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:28px; padding-bottom:40px;}
.footer-grid h4{font-family:var(--body); font-weight:700; font-size:.88rem; margin-bottom:12px;}
.footer-grid ul{list-style:none;}
.footer-grid li{margin-bottom:9px; font-size:.88rem; opacity:.72;}
.footer-grid li a:hover{opacity:1; text-decoration:underline;}
.footer-about{max-width:34ch; font-size:.9rem; line-height:1.55; margin-bottom:10px;}
.footer-about a{text-decoration:underline; text-underline-offset:3px;}
.footer-bottom a:hover{text-decoration:underline;}
.footer-logo{font-family:var(--display); font-weight:400; font-size:1.5rem; margin-bottom:10px;}
.footer-bottom{
  display:flex; justify-content:space-between; padding-top:22px; border-top:1px solid rgba(255,255,255,.14);
  font-size:.8rem; opacity:.72; flex-wrap:wrap; gap:12px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:920px){
  .wrap{padding:0 20px;}
  .nav-row{padding-top:14px; padding-bottom:14px;}
  .hero-actions{flex-direction:column; align-items:stretch;}
  .hero{grid-template-columns:1fr; gap:32px; padding-top:32px;}
  .hero-figure{margin:0 -20px;}
  .hero-figure img{border-radius:0; aspect-ratio:16/9;}
  .hero-figure figcaption{padding:0 20px;}
  .sorten-list{grid-template-columns:1fr;}
  .redaktion-grid, .redaktion-grid.featured{grid-template-columns:1fr;}
  .redaktion-grid.featured .redaktion-card:first-child{grid-row:auto;}
  .redaktion-grid.featured .redaktion-card:first-child .redaktion-thumb{height:200px;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:32px;}
  .article-layout, .topic-body{grid-template-columns:1fr;}
  .topic-facts{grid-template-columns:repeat(2,1fr);}
  .region-list{grid-template-columns:repeat(2,1fr);}
  .region-panel{grid-template-columns:1fr; text-align:left;}
  .section-head.split{flex-direction:column; align-items:flex-start;}
  .topic-hero{padding:40px 28px;}
}
/* Im mobilen Kartenausschnitt waere das Label auf der Karte nur ~4px gross;
   dort traegt die Bildunterschrift die Information. */
.belt-note{display:none;}

@media (max-width:720px){
  .map-belt-label{display:none;}
  .belt-note{display:inline;}
  /* Karte ist hier zugeschnitten und kleiner - Pins entsprechend groesser. */
  .map-pin circle.core{r:15;}
  .map-pin circle.halo{r:20;}
}
@media (max-width:640px){
  .sorten-grid{grid-template-columns:1fr;}
  .sorten-list a{grid-template-columns:1fr auto; row-gap:4px;}
  .sorten-note{grid-column:1; grid-row:2;}
  .sorten-temp{grid-column:2; grid-row:1;}
  .footer-grid{grid-template-columns:1fr;}
  .region-list{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;}
  .map-pin circle.halo{animation:none;}
}

/* ---------- TOPIC-HERO: Lesbarkeit auf schmalen Schirmen ---------- */
@media (max-width:720px){
  .topic-hero{background-position:72% center;}
  .topic-hero::before{
    content:""; position:absolute; inset:0; background:rgba(20,28,22,.46);
    pointer-events:none;
  }
  .topic-hero > *{position:relative; z-index:1;}
}

/* ---------- RECHTLICHES / PLATZHALTER ---------- */
.prose.legal{font-size:1rem;}
.prose.legal h2{font-size:1.2rem; margin-top:28px;}
/* Platzhalter, die vor dem Livegang ersetzt werden muessen - bewusst auffaellig. */
/* Anschrift und E-Mail als Pfad-SVG (tools/make_address_svg.py); Masse aus den Literata-Metriken. */
.address-img{display:block; max-width:100%; height:auto;}
.mail-img{display:inline; height:1.485em; width:auto; vertical-align:-0.308em;}
.todo{background:#FFE58A; color:#5A4500; padding:0 4px; border-radius:3px; font-family:var(--mono); font-size:.88em;}

/* ---------- SINNE (Startseite) ---------- */
/* Keine Icon-Kacheln: eine Verkostungsanleitung, Sinn fuer Sinn, wie eine Notiz. */
.senses{padding:var(--space-section) 0; border-top:1px solid var(--ink-10);}
.senses-list{list-style:none; counter-reset:sinn; border-top:1px solid var(--ink-14);}
.senses-list li{
  counter-increment:sinn;
  display:grid; grid-template-columns:168px minmax(0,1fr); gap:36px; align-items:center;
  padding:20px 0; border-bottom:1px solid var(--ink-14);
}
/* Aquarell-Vignette: das Papier der Bilder ist etwas gelber als --paper,
   multiply + weiche Rundmaske lassen es in den Seitenhintergrund auslaufen. */
.sense-img{
  margin:0; aspect-ratio:1; rotate:-3deg;
  transition:rotate .45s ease, scale .45s ease;
  -webkit-mask-image:radial-gradient(closest-side, #000 62%, transparent 100%);
  mask-image:radial-gradient(closest-side, #000 62%, transparent 100%);
}
.senses-list li:nth-child(even) .sense-img{rotate:3deg;}
.sense-img img{width:100%; height:100%; display:block; mix-blend-mode:multiply;}
.senses-list li:hover .sense-img{rotate:0deg; scale:1.06;}
.senses-list h3{
  display:flex; align-items:center; gap:12px; margin-bottom:8px;
  font-family:var(--display); font-weight:400; font-size:1.45rem; line-height:1.2; color:var(--ink);
}
.senses-list h3::before{
  content:counter(sinn, decimal-leading-zero);
  font:400 1.9rem/1 var(--display); color:var(--amber); min-width:40px;
  transition:color .45s ease;
}
.senses-list li:hover h3::before{color:var(--deep);}
.sense-icon{display:inline-flex; color:var(--deep);}
.senses + .sorten{border-top:none; padding-top:0;}
.sense-icon svg{width:22px; height:22px;}
.senses-list p{font:400 1.02rem/1.7 var(--serif); color:var(--ink-70); max-width:62ch;}
@media (prefers-reduced-motion: reduce){
  .sense-img, .senses-list h3::before{transition:none;}
  .senses-list li:hover .sense-img{scale:1;}
}
@media (max-width:720px){
  .senses-list li{grid-template-columns:88px minmax(0,1fr); gap:16px; align-items:start; padding:18px 0;}
  .senses-list h3{font-size:1.25rem;}
  .senses-list h3::before{font-size:1.4rem; min-width:30px;}
}

/* ---------- SPIEL-HINWEIS (Startseite, unter „Tee mit allen Sinnen“) ---------- */
.spiel-teaser{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:36px; align-items:center;
  margin-top:40px; padding:24px; border-radius:var(--radius-lg); background:var(--porcelain-2);
}
/* wie die Sinnes-Vignetten: das Papier des Aquarells läuft in den Hintergrund aus */
.spiel-teaser-img{
  margin:0; aspect-ratio:12/5;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(transparent, #000 14%, #000 86%, transparent);
  mask-composite:intersect;
}
.spiel-teaser-img img{width:100%; height:100%; object-fit:cover; display:block; mix-blend-mode:multiply;}
.spiel-teaser-kicker{margin:0 0 6px; font:600 12px/1.4 var(--body); text-transform:uppercase; letter-spacing:.08em; color:var(--amber);}
.spiel-teaser h3{margin:0 0 10px; font-family:var(--display); font-weight:400; font-size:1.45rem; line-height:1.2; color:var(--ink);}
.spiel-teaser-body > p:not(.spiel-teaser-kicker){margin:0 0 18px; font:400 1.02rem/1.7 var(--serif); color:var(--ink-70);}
@media (max-width:720px){
  .spiel-teaser{grid-template-columns:1fr; gap:16px; padding:18px;}
}

/* ---------- SAISONEN ---------- */
/* season.js setzt <html data-season="...">. Sommer = Grundfarben wie oben in :root.
   Ohne :root, damit die Tokens auch auf einzelnen Containern greifen (saison-vorschau.html). */
[data-season="sommer"]{
  --deep:#45623C; --deep-2:#3A5433; --jade:#45623C; --green-text:#F3F7EC;
  --paper:#FCF8F1; --porcelain:#FCF8F1; --porcelain-2:#F3F6EC;
  --amber:#7FA06A; --gold:#7FA06A; --nav-active:#EDF2E4;
  --blob-peach:#F6E2CC; --blob-sage:#EBF1DE; --blob-rose:#F7E1E5; --blob-sand:#FAEBD6;
}
[data-season="fruehling"]{
  --deep:#3F6B3F; --deep-2:#335A33; --jade:#3F6B3F; --green-text:#F2F8EC;
  --paper:#FBF9F1; --porcelain:#FBF9F1; --porcelain-2:#F0F6E8;
  --amber:#6B9550; --gold:#6B9550; --nav-active:#EAF3E0;
  --blob-peach:#F8E6D6; --blob-sage:#E6F1DA; --blob-rose:#F8E1E8; --blob-sand:#F5F0D6;
}
[data-season="herbst"]{
  --deep:#7A4A2B; --deep-2:#653C22; --jade:#7A4A2B; --green-text:#FBF1E6;
  --paper:#FCF6EE; --porcelain:#FCF6EE; --porcelain-2:#F6EFE3;
  --amber:#A8733A; --gold:#A8733A; --nav-active:#F3EADB;
  --blob-peach:#F6DEC6; --blob-sage:#ECEBD6; --blob-rose:#F3DCD6; --blob-sand:#F8E5CB;
}
[data-season="winter"]{
  --deep:#2F5356; --deep-2:#264548; --jade:#2F5356; --green-text:#EEF4F3;
  --paper:#F9F9F6; --porcelain:#F9F9F6; --porcelain-2:#EDF2F0;
  --amber:#9A5A62; --gold:#9A5A62; --nav-active:#E7EEEB;
  --blob-peach:#F2E5DF; --blob-sage:#E2ECE8; --blob-rose:#F1DEE3; --blob-sand:#EDEAE2;
}
[data-season]{background:var(--paper);}

.season-tip{
  display:inline-flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  margin:-6px 0 24px; padding:8px 14px; border-radius:999px;
  background:var(--porcelain-2); color:var(--ink-70);
  font:400 13.5px/1.4 var(--body);
}
.season-tip strong{font-weight:600; color:var(--ink);}
.season-tip .season-ornament{width:16px; height:16px; color:var(--deep); align-self:center;}
.season-ornament{display:inline-flex; flex:none; color:var(--amber);}
.season-ornament svg{width:100%; height:100%;}
.logo .season-ornament{width:22px; height:22px; margin-left:-3px;}
.season-tip a{color:var(--deep); border-bottom:1px solid currentColor; white-space:nowrap;}
@media (max-width:600px){ .season-tip{border-radius:var(--radius);} }