/*
Theme Name: Teepapst
Theme URI: https://teepapst.com
Author: Teepapst GmbH
Description: Block-Theme für teepapst.com. Wissens- und Expertenplattform rund um japanischen Tee und Matcha. Corporate Design nach Teepapst Brand Style Guide 07/2026. Verkauf erfolgt ausschließlich über aiyatea.com.
Version: 0.5.6
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: proprietär
Text Domain: teepapst
Tags: block-theme, full-site-editing, editorial, blog
*/

/* ---------- Grundlagen ---------- */
:root {
  /* Stops gegenüber dem Original-Muster aufgehellt (#8A6A2A/#C9A24A -> #BC9142/#D9B667),
     damit Dark-Grey-Text/Gold-Text auf dem Verlauf WCAG AA (4.5:1) einhält. */
  --tp-gold: linear-gradient(100deg, #BC9142 0%, #D9B667 22%, #F2DFA0 48%, #D9B667 74%, #BC9142 100%);
  --tp-logo-header: 56px;
  --tp-logo-footer: 96px;
  --tp-logo-partner: 28px;
  --tp-logo-selected: 200px;
}

/* Ein einziger Breakpoint (1024px) für Logo-Größe UND Nav-Kollaps: zwei
   verschiedene Umbruchpunkte hätten den Header beim Verkleinern zweimal
   sichtbar springen lassen statt einmal sauber umzuschalten. */
@media (max-width: 1024px) {
  :root {
    --tp-logo-header: 44px;
    --tp-logo-footer: 80px;
    --tp-logo-selected: 150px;
  }
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Längerer Fließtext im Blocksatz (mit Silbentrennung gegen große Wortlücken),
   Überschriften bleiben immer linksbündig. Einzeilige Texte (Eyebrows, Preise)
   sind von Blocksatz optisch nicht betroffen, da er nur auf umbrochene Zeilen wirkt. */
p { text-align: justify; hyphens: auto; }
h1, h2, h3, h4, h5, h6 { text-align: left; }

/* Sektionen in <main> regeln ihren Abstand zueinander vollständig über ihr eigenes
   Padding. Der WP-Standardabstand zwischen Top-Level-Blöcken (margin-block-start)
   würde sonst an jeder Sektionsgrenze eine zusätzliche, unbeabsichtigte Lücke
   erzeugen -- sichtbar als dünne helle Naht zwischen zwei Farbflächen. */
main.wp-block-group > .wp-block-group { margin-top: 0; }

/* Sichtbarer Fokus für Tastaturnutzung (WCAG 2.4.7).
   Der zusätzliche box-shadow-Saum sichert die Randkontur des Grün-Rings auch auf
   hellen Flächen ab, wo Grün allein unter 3:1 (WCAG 1.4.11) liegt. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #A7C116;
  outline-offset: 3px;
  box-shadow: 0 0 0 1px rgba(46, 45, 44, .55);
}

/* ---------- Label / Eyebrow ---------- */
.tp-eyebrow {
  font-family: var(--wp--preset--font-family--label);
  font-size: var(--wp--preset--font-size--xs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 500;
  color: var(--wp--preset--color--light-grey);
  display: block;
}
.tp-eyebrow.is-gold {
  background: var(--tp-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Gold-Hairline ---------- */
.tp-rule { height: 1px; border: 0; background: var(--tp-gold); opacity: .85; }

.tp-frame { position: relative; }
.tp-frame::after {
  content: ""; position: absolute; inset: 12px;
  border: 1px solid rgba(242, 223, 160, .55);
  pointer-events: none;
}

/* ---------- Karten ---------- */
.tp-card {
  border: 1px solid var(--wp--preset--color--hairline);
  background: var(--wp--preset--color--white);
  transition: transform .35s ease, box-shadow .35s ease;
  height: 100%;
}
.tp-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -28px rgba(0,0,0,.35); }

/* Blog-Kacheln: Titel bekommt eine feste Mindesthöhe (2 Zeilen), damit der
   Exzerpt-Text darunter in jeder Kachel einer Reihe auf gleicher Höhe
   beginnt, unabhängig davon, ob der Titel ein- oder zweizeilig ist. */
.tp-blog-title { min-height: 2.3em; margin-bottom: 0; }

/* Teelexikon-Kacheln (7 Welten / 3 Welten des Aufguss-Tees) */
.tp-tea-tile .wp-block-image { margin: 0; }
.tp-tea-tile img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.tp-tea-tile--wide img { aspect-ratio: 3 / 1; }
.tp-tea-tile-body { padding: var(--wp--preset--spacing--30); }
.tp-tea-tile-body h3 { margin: 0; }
.tp-tea-tile a { text-decoration: none; color: inherit; }

/* Qualitätsstufen-Marker */
.tp-tier { border-top: 3px solid transparent; }
.tp-tier--ceremonial { border-top-color: #EDBE1C; }
.tp-tier--kotobuki   { border-top-color: #ABB6B8; }
.tp-tier--cooking    { border-top-color: #B36B25; }

/* ---------- Bilder ---------- */
.wp-block-image img { display: block; }
figure.wp-block-image.is-style-tp-hairline img { border: 1px solid var(--wp--preset--color--hairline); }

/* ---------- Buttons ---------- */
.wp-block-button.is-style-tp-gold .wp-block-button__link {
  background: var(--tp-gold);
  color: #2E2D2C;
  border: 0;
}
.wp-block-button.is-style-tp-ghost .wp-block-button__link {
  background: transparent;
  color: currentColor;
  border: 1px solid currentColor;
}

/* ---------- Header ---------- */
.tp-header { position: sticky; top: 0; z-index: 90; backdrop-filter: saturate(150%) blur(8px); }
.tp-header .wp-block-navigation { font-family: var(--wp--preset--font-family--label); text-transform: uppercase; letter-spacing: .14em; font-size: .8125rem; }

/* Der backdrop-filter auf .tp-header erzeugt (wie transform/will-change) einen eigenen
   Containing Block für position:fixed-Nachfahren. Dadurch berechnet sich height:100%
   des mobilen Menü-Overlays gegen die ~124px hohe Kopfzeile statt gegen den Viewport
   und schneidet fast alle Links ab. Fix: Höhe über vh/dvh statt % erzwingen. */
.tp-header .wp-block-navigation__responsive-container.is-menu-open {
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Markenname "aiya" bleibt immer kleingeschrieben, auch im großgeschriebenen Menü. */
.tp-header a[href="/aiya/"] { text-transform: none; }

/* Masterclass / Zum Shop im Header: schmäler und flacher als der globale
   Button-Standard, plus gleiche Breite für beide (unabhängig von der
   Textlänge), damit sie im Header optisch als Paar wirken. */
.tp-header-buttons .wp-block-button__link {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  width: 9.5rem;
  text-align: center;
  white-space: nowrap;
}

/* ---------- Header: Logo / Nav / Sprachauswahl ----------
   Ein Breakpoint (1024px) für alles: Logo-Größe (siehe :root oben), Nav-
   Kollaps und Umschaltung der Flex-Reihenfolge, damit der Header beim
   Verkleinern genau einmal umschaltet statt mehrfach zu springen. */
.tp-header-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 1rem;
  min-height: var(--tp-logo-header);
}

/* Reihenfolge der drei direkten Kinder: Logo, Navigation (inkl. Buttons,
   siehe unten), Sprachauswahl. Auf Desktop entspricht das der bisherigen
   optischen Reihenfolge (Logo links). */
.tp-header-row > .tp-logo { order: -1; }
.tp-header-row > .wp-block-navigation { order: 0; }
.tp-header-row > .tp-lang-switch { order: 1; }

/* Masterclass/Zum-Shop-Buttons leben jetzt IM Navigation-Block (wp_navigation
   Beitrag), damit sie beim Kollaps automatisch mit ins Overlay wandern statt
   als eigene, immer sichtbare Elemente eine Sonderbehandlung zu brauchen.
   Im geöffneten Mobil-Overlay bekommen sie etwas Abstand zu den Links darüber. */
.wp-block-navigation__responsive-container.is-menu-open .tp-header-buttons {
  margin-top: var(--wp--preset--spacing--40);
}

/* ---------- Sprachauswahl ---------- */
.tp-lang-switch {
  display: flex;
  align-items: center;
  gap: 0.4em;
  flex-shrink: 0;
  font-family: var(--wp--preset--font-family--label);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tp-lang-current { font-weight: 600; color: var(--wp--preset--color--dark-grey); }
.tp-lang-sep { color: var(--wp--preset--color--hairline); }
.tp-lang-disabled {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--wp--preset--color--light-grey);
  cursor: not-allowed;
}

/* ---------- Bis 1024px: Menü-Icon links, Logo viewport-zentriert, Sprachauswahl rechts ---------- */
@media (max-width: 1024px) {
  /* WP-Kernregel verschiebt den Umschaltpunkt Inline-Nav/Overlay standardmäßig
     auf 600px (wp-includes/blocks/navigation/style.css). Unsere Nav-Texte
     (u.a. "Teepapst Selected", "aiya – THE TEA") plus Buttons plus neue
     Sprachauswahl brauchen mehr Platz -- der Umschaltpunkt wird hier auf
     1024px angehoben, ohne den Mechanismus selbst zu ersetzen. */
  .tp-header .wp-block-navigation__responsive-container:not(.is-menu-open):not(.hidden-by-default) {
    display: none !important;
  }
  .tp-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex !important;
  }

  .tp-header-row > .tp-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .tp-header-row > .wp-block-navigation { order: -1; }
  .tp-header-row > .tp-lang-switch { order: 1; }
}

/* Hero-Zeilenumbruch: "Alles über Matcha." soll ab Tablet-Breite immer als
   eigene Zeile stehen (nicht nur ohne internen Umbruch), der Rest des Satzes
   folgt in Zeile zwei. Auf sehr schmalen Screens darf der Browser wieder frei
   umbrechen, damit der Text nicht aus der Spalte läuft. */
@media (min-width: 782px) {
  .tp-nowrap { display: block; }
}

/* ---------- Logos ----------
   Die Bilddateien liegen bereits in exakter Anzeigegröße (2x fürs Retina-Display),
   und width/height stehen als Attribute im Markup. Die Darstellung stimmt daher
   auch dann, wenn keine einzige CSS-Regel greift. Die Regeln unten sind nur eine
   zusätzliche Absicherung gegen fremde Stylesheets.
   Anpassen: die drei Höhen in :root oben. */
figure.tp-logo img,
figure.tp-logo a img,
.tp-header figure img { height: var(--tp-logo-header); width: auto; max-width: none; }

figure.tp-logo--footer img { height: var(--tp-logo-footer); width: auto; max-width: none; }

figure.tp-partner img { height: var(--tp-logo-partner); width: auto; max-width: none; opacity: .9; }

/* Label und Logo sollen als eine Einheit lesbar sein, nicht mit dem
   generischen Block-Gap (1.5rem) auseinandergerissen -- aber auch nicht
   berühren. */
.tp-eyebrow + .tp-partner { margin-top: 0.4rem; }

/* ---------- Footer-Navigation ---------- */
.tp-footer-list { list-style: none; padding-left: 0; }

figure.tp-logo-selected img { height: var(--tp-logo-selected); width: auto; max-width: 100%; }

/* Brand Guide: kein Recolouring. Auf dunklem Grund nur die weißen Assets verwenden. */

/* ---------- Dunkle Sektionen ---------- */
.tp-dark, .tp-dark p, .tp-dark h1, .tp-dark h2, .tp-dark h3, .tp-dark h4, .tp-dark a { color: var(--wp--preset--color--white); }
.tp-dark .tp-eyebrow { color: rgba(255,255,255,.65); }

/* ---------- Der Teepapst: Portrait-Spalte ---------- */
/* Die Spalten sollen die volle, vom Fließtext vorgegebene Höhe teilen (statt
   oben auszurichten und das Bild in Originalgröße stehen zu lassen); das
   Portrait wächst dann in dieser Höhe und wird zugeschnitten (object-fit),
   Eyebrow + Social-Icons bleiben in natürlicher Größe darunter, linksbündig. */
.tp-thomas-columns { align-items: stretch; }
.tp-portrait-col { display: flex; flex-direction: column; align-items: flex-start; }
/* flex-basis:0 statt auto: das Bild soll NICHT über sein eigenes
   Seitenverhältnis zur Höhe der Spalte beitragen (das erzeugt sonst einen
   Zirkelbezug -- die Spalte würde sich am Bild orientieren statt umgekehrt).
   Ohne Beitrag zur natürlichen Höhe richtet sich die Spaltenhöhe rein nach
   dem Fließtext daneben, das Bild füllt danach per flex-grow den Rest. */
.tp-portrait-fill { flex: 1 1 0; min-height: 0; margin: 0; width: 100%; }
.tp-portrait-fill img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }

/* Unter 782px stapelt WP-Core die Spalten (kein Flex-Row-Kontext mehr), wodurch
   .tp-portrait-col keine von der Textspalte übernommene Höhe mehr hat. Das
   Portrait würde sich dann per height:100% gegen 0 auflösen und unsichtbar
   werden. Fix: Höhen-Trick abschalten, Bild in natürlicher Größe zeigen. */
@media (max-width: 781px) {
  .tp-portrait-fill { flex: none; min-height: auto; }
  .tp-portrait-fill img { height: auto; aspect-ratio: auto; }
}

/* aiya-Seite: die beiden 50%-Buttons ("aiyatea.com öffnen" / "Für
   Geschäftskunden") werden auf Handy-Breite so schmal, dass der Text in
   mehrere Zeilen umbricht. Unter 600px daher volle Breite und untereinander. */
@media (max-width: 599px) {
  .wp-block-buttons .wp-block-button.wp-block-button__width-50 { width: 100%; }
}

/* Teelexikon-Kacheln: WP-Core stapelt Spalten unter 782px auf 100% Breite
   (eine Kachel pro Zeile). Auf Handy-Breite sollen es weiterhin 2 pro Zeile
   sein -- kompakter und die Bilder bleiben groß genug, um erkennbar zu sein. */
@media (max-width: 781px) {
  .wp-block-columns:has(.tp-tea-tile) { flex-wrap: wrap; }
  .wp-block-columns:has(.tp-tea-tile) > .wp-block-column {
    flex-basis: calc(50% - 12px) !important;
    flex-grow: 0 !important;
  }
}

/* CTA-Banner: dieser eine Satz soll ab Tablet-Breite einzeilig bleiben.
   WPs generierte Regel setzt hier nur margin:auto mit !important, max-width
   bleibt ohne !important -- ein breiteres max-width lässt sich daher ohne
   eigenes !important sauber überschreiben. */
.tp-cta-line { max-width: 1000px; }
@media (min-width: 782px) {
  .tp-cta-line { white-space: nowrap; }
}

/* ---------- Video ---------- */
.tp-video { aspect-ratio: 16 / 9; }
.tp-video iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Beitrags-Typografie ---------- */
/* Editorial-Grid: Fließtext bündig mit der Überschrift am linken Rand.
   Absichtlich KEIN eigenes max-width auf Absätzen: WP zentriert Kinder eines
   "is-layout-constrained"-Containers per margin:auto auf --content-size
   (760px) -- das trifft exakt dieselbe 760px-Box, in der auch Überschrift
   und Trennlinie stehen, und richtet beide links bündig aneinander aus.
   Ein schmaleres max-width (z.B. 68ch) zentriert stattdessen eine engere Box
   INNERHALB dieser 760px und verschiebt den Absatz sichtbar nach rechts --
   das war der frühere Bug. 760px ist als Lesebreite bereits gut gewählt,
   daher hier keine zusätzliche Einschränkung. */
.tp-prose h2 { margin-top: 2.75rem; }
.tp-prose h3 { margin-top: 2rem; }

/* ---------- Produktdaten-Tabellen ---------- */
.wp-block-table td:first-child, .wp-block-table th:first-child { white-space: nowrap; width: 1%; padding-right: 1.5rem; }

/* ---------- Kontaktformular ---------- */
.tp-form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tp-form-row { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.tp-form-row .tp-form-field { flex: 1 1 220px; }
.tp-form-field { margin: 0 0 1.5rem; }
.tp-form-field label { display: block; font-family: var(--wp--preset--font-family--label); font-size: var(--wp--preset--font-size--xs); text-transform: uppercase; letter-spacing: .14em; color: var(--wp--preset--color--light-grey); margin-bottom: .5rem; }
.tp-form-field input[type=text], .tp-form-field input[type=email], .tp-form-field textarea {
  width: 100%; box-sizing: border-box; padding: .85rem 1rem; font-family: var(--wp--preset--font-family--text);
  font-size: var(--wp--preset--font-size--m); color: var(--wp--preset--color--dark-grey);
  background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--light-grey); border-radius: 0;
}
/* Hairline (#E3E0DA) liegt bei ~1.3:1 gegen Weiß -- unter dem WCAG-Minimum
   von 3:1 für UI-Komponentengrenzen (1.4.11). Light-Grey löst das auf, ohne
   die Fläche sichtbar zu verdunkeln. */
.tp-form-field input:focus-visible, .tp-form-field textarea:focus-visible { border-color: var(--wp--preset--color--dark-grey); }
.tp-form-field--checkbox label { display: flex; align-items: flex-start; gap: .6rem; font-family: var(--wp--preset--font-family--text); font-size: var(--wp--preset--font-size--s); text-transform: none; letter-spacing: normal; color: var(--wp--preset--color--dark-grey); }
.tp-form-field--checkbox input { margin-top: .3rem; flex-shrink: 0; }
.tp-form-notice { padding: 1rem 1.25rem; margin-bottom: 1.5rem; border: 1px solid var(--wp--preset--color--light-grey); }
.tp-form-notice--success { border-color: var(--wp--preset--color--green); }
.tp-form-notice--error { border-color: var(--wp--preset--color--cooking); }
.tp-form-notice[hidden] { display: none; }

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}