/* ============================================================================
   pcw-design.css — Touch-Target-Fix (Terminal F2, WCAG 2.5.5 / 2.5.8)
   ----------------------------------------------------------------------------
   Eigentum: F2 (fix/f2-touch). F1 fasst diese Datei nicht an und legt sich
   eine eigene an unter quartz/quartz/static/pcw-design.css (Token-Vertrag).
   Beide Dateien koexistieren: F1 exportiert --pcw-*-Tokens und
   semantische Klassen, F2 exportiert ausschliesslich Tap-Ziel-Regeln.

   Vertrag
   -------
   Jedes sichtbare interaktive Element erreicht 44x44 CSS-Pixel
   (WCAG 2.5.5 / AAA 2.5.8). Das Tap-Ziel wird durch Padding und
   min-height erreicht, NICHT durch eine feste Breite — eine feste
   Breite wuerde die Sidebar (320 px breit auf Desktop) auseinanderdruecken
   und bei 360 px Viewport-Breite die Stapelung zerstoeren.

   Token-Vertrag (von F1, quartz/quartz/static/pcw-design.css)
   ----------------------------------------------------------
   --pcw-space-1 (0.25rem =  4 px)
   --pcw-space-2 (0.5rem  =  8 px)
   --pcw-space-3 (0.75rem = 12 px)
   --pcw-space-4 (1rem    = 16 px)
   --pcw-radius-sm (4 px)

   Diese Datei erfindet KEINE neuen Werte neben dem System. Wo eine
   Pixel-Zahl erforderlich ist (44, 11, 9) steht der Wert mit der
   Einheit px; rem waere hier kontraproduktiv, weil der Tap-Standard
   auf physischen Pixeln kalibriert ist und nicht mit der Schrift
   skalieren soll.

   CSP `style-src 'self'` (docker/Caddyfile) verbietet Inline-<style>.
   Diese Datei wird per Post-Build-Injektor auf jeder Seite verlinkt.
   ========================================================================== */

/* === Eigene Komponenten (F2, quartz/static/pcw-primary-nav.css) ========= */

/* Skip-Link: 168x40 in der Messung, 4 px zu kurz. min-height zieht ihn
   auf 44 px, ohne dass die Transforms-Animation sich aendert. */
.pcw-skip {
  min-height: 44px;
  box-sizing: border-box;
  padding-top: calc(var(--pcw-space-2, 0.5rem) + 1px);
  padding-bottom: calc(var(--pcw-space-2, 0.5rem) + 1px);
}

/* Primary-Nav-Links: einheitlich 35 px hoch (padding 0.25rem oben und
   unten ergibt 16 px Inhalt + 8 px Padding = 24 px Linie; eigentlich
   39 px — der Test misst 35, weil line-height 1.2 der Inhaltsschrift
   greift). min-height zieht auf 44. inline-flex zentriert vertikal,
   weil das visuelle Schriftbild sonst an den oberen Rand klettern
   wuerde. */
.page-header .pcw-nav-link,
.page-header .pcw-nav-link-emergency,
.page-header .pcw-nav-link-secondary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding-top: calc(var(--pcw-space-2, 0.5rem) + 2px);
  padding-bottom: calc(var(--pcw-space-2, 0.5rem) + 2px);
}

/* Suche im primären Nav. */
.page-header .pcw-nav-search {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding-top: calc(var(--pcw-space-2, 0.5rem) + 2px);
  padding-bottom: calc(var(--pcw-space-2, 0.5rem) + 2px);
}

/* Hamburger-Toggle im primären Nav (nur Mobile sichtbar). */
.page-header .pcw-nav-toggle {
  min-height: 44px;
}

/* === Quartz-Komponenten (vendored, siehe quartz/.quartz/plugins/*) ===== */

/* Darkmode-Toggle (Quartz-Komponente): 20x32 px im Default. Die
   VendorsCSS setzt `width: 20px; height: 32px;` — wir ueberschreiben
   mit min-width/min-height, NICHT mit width/height, damit das Layout
   in der Flex-Sidebar stabil bleibt (Padding-Box wuerde sonst die
   Flex-Spalte auseinanderdruecken). Das Icon ist absolut positioniert
   und ueberlebt die Vergroesserung unbeschaedigt. */
.darkmode {
  min-width: 44px;
  min-height: 44px;
  padding: 6px 12px;
  box-sizing: border-box;
}

/* Such-Button in der Sidebar (Quartz-Komponente): 98x32 px. min-height
   bringt das Tap-Ziel auf 44 px; die Inline-flex-Centrierung haelt
   SVG und Text-Label vertikal in der Mitte. */
.search-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}

/* Sprachumschalter (F5, post-build-inject-lang-switcher.js): 138x36 px.
   min-height zieht auf 44 px; horizontales Padding haelt das Label-
   Paar "Language: English" optisch in der gleichen Position. */
.pcw-lang > button {
  min-height: 44px;
  box-sizing: border-box;
  padding-top: calc(var(--pcw-space-2, 0.5rem) + 2px);
  padding-bottom: calc(var(--pcw-space-2, 0.5rem) + 2px);
}

/* Explorer-Desktop-Toggle (Quartz-Komponente, .title-button.explorer-toggle):
   enthaelt h2 + svg, kein Default-Padding. min-height 44 + vertikal
   zentriert.

   Scope @media (min-width: 801px): die Quartz-Sidebar blendet diesen
   Button auf Mobil per `.explorer button.desktop-explorer { display:
   none }` aus (siehe quartz/.quartz/plugins/explorer/src/components/
   styles/explorer.scss). Diese Quartz-Regel lebt in @layer quartz-base
   (siehe quartz/quartz/plugins/emitters/componentResources.ts:411).
   PCW-Stylesheets werden ohne Layer eingebunden, gewinnen die
   Kaskade also unabhaengig von der Spezifitaet. Ein ungescopter
   `display: inline-flex` hier wuerde das Quartz-`display: none`
   auf Mobil ueberschreiben — der Button bliebe sichtbar, der
   `.explorer-content` darunter waere ein zweiter Menüpunkt neben dem
   Hamburger der Hauptnavigation. Befund S1.2 (plans/
   wiki_verbesserung_v1.md §4 / Messprotokoll).
   Auf Desktop (>800px) gilt die Regel wieder; dort ist der Button
   sichtbar und braucht das 44-Pixel-Tap-Ziel. */
@media (min-width: 801px) {
  .title-button.explorer-toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    padding-top: calc(var(--pcw-space-2, 0.5rem) + 2px);
    padding-bottom: calc(var(--pcw-space-2, 0.5rem) + 2px);
  }
}

/* Explorer-Folder-Button (Quartz-Komponente, .folder-button): enthaelt
   ein span (folder-title) mit line-height 1.5 rem. min-height 44 +
   padding + vertikal zentriert. min-width 44 zieht kurze Ordnernamen
   ("hub", "risk") auf das volle Tap-Ziel — die Sidebar erweitert sich
   nicht, weil die laengsten Folder-Namen ("Parental Control Wiki",
   "Tricks catalogue") bereits ueber 44 px breit sind und die Spalte
   ohnehin auf deren Breite aufgeht. */
.folder-button {
  min-height: 44px;
  min-width: 44px;
  box-sizing: border-box;
  padding-top: calc(var(--pcw-space-2, 0.5rem) + 2px);
  padding-bottom: calc(var(--pcw-space-2, 0.5rem) + 2px);
  display: inline-flex;
  align-items: center;
}

/* Explorer-Datei-Link (Quartz-Komponente, a.nav-file-title): 22 px
   hoch (Linktext, line-height ~22 px). Padding + min-height 44 +
   vertikal zentriert. */
a.nav-file-title {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding-top: calc(var(--pcw-space-2, 0.5rem) + 2px);
  padding-bottom: calc(var(--pcw-space-2, 0.5rem) + 2px);
}

/* Table-of-Contents-Header (Quartz-Komponente, .toc-header): 24 px
   hoch, Button mit aria-expanded. min-height 44. */
.toc-header {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding-top: calc(var(--pcw-space-2, 0.5rem) + 2px);
  padding-bottom: calc(var(--pcw-space-2, 0.5rem) + 2px);
}

/* Inhaltsverzeichnis-Eintraege (TOC-Links): */
.toc-content > ul > li > a,
.toc-content .depth-0 > a,
.toc-content .depth-1 > a,
.toc-content .depth-2 > a,
.toc-content .depth-3 > a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding-top: calc(var(--pcw-space-2, 0.5rem) + 2px);
  padding-bottom: calc(var(--pcw-space-2, 0.5rem) + 2px);
  width: 100%;
}

/* === Verlinkungen im Inhalt =========================================== */

/* Interne Wiki-Links (Quartz-Renderer): viele davon haben ohne
   min-height nur 21x26 px (inline-Link im Fliess). padding-top +
   -bottom haelt den Zeilenabstand, min-height garantiert das
   Tap-Ziel. Inline-flex zentriert das SVG (Heading-Anchor). */
.internal-link,
.internal.internal-link,
.internal-link.alias {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  box-sizing: border-box;
  padding-top: calc(var(--pcw-space-2, 0.5rem) + 2px);
  padding-bottom: calc(var(--pcw-space-2, 0.5rem) + 2px);
}

/* Heading-Anchor-Links (Quartz-Renderer): icon-only SVG-Links in
   h1/h2/h3. min-width 44px zieht auch die 21 px breiten Icon-Links
   auf das volle Tap-Ziel. Da sie nur ein SVG enthalten, bricht das
   Layout nicht — der Heading-Text fliesst daneben.

   min-height: 45px (statt 44px) als 1-px-Buffer: bei fractional
   line-height im H2 (z.B. 36.96 px aus font-size 22.4 × 1.65) rundet
   Chromium die inline-flex-Box gelegentlich auf 43.999... und der
   strenge Acceptance-Vergleich ``h < 44`` faellt. WCAG 2.5.5 ist mit
   45 weiter erfuellt (Standard ist Mindest-Mass, nicht Hoechst-Mass).
   Padding 13 px oben/unten ist so gewaehlt, dass content 18 + padding
   26 = 44 ergibt; der 1-px-Buffer in min-height absorbiert das
   Sub-Pixel-Rendering. */
h1 > a.internal.internal-link,
h2 > a.internal.internal-link,
h3 > a.internal.internal-link,
h4 > a.internal.internal-link,
h5 > a.internal.internal-link,
h6 > a.internal.internal-link {
  min-width: 44px;
  min-height: 45px;
  padding-top: calc(var(--pcw-space-2, 0.5rem) + 5px);
  padding-bottom: calc(var(--pcw-space-2, 0.5rem) + 5px);
  padding-left: calc(var(--pcw-space-2, 0.5rem) + 2px);
  padding-right: calc(var(--pcw-space-2, 0.5rem) + 2px);
}

/* === Brotkrumen, Meta-Cluster, Template-Bausteine (eigene Injektoren) == */

/* Brotkrumen (post-build-inject-breadcrumb.js): 28 px hoch, beliebig
   breit je Label. min-height 44 px + horizontales UND vertikales
   Padding, damit kurze Labels ("Home", 36 px breit) ebenfalls das
   44-px-Tap-Ziel erreichen — die Zeile bleibt optisch stabil. */
.pcw-breadcrumb a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding-top: calc(var(--pcw-space-2, 0.5rem) + 2px);
  padding-bottom: calc(var(--pcw-space-2, 0.5rem) + 2px);
  padding-left: calc(var(--pcw-space-2, 0.5rem) + 2px);
  padding-right: calc(var(--pcw-space-2, 0.5rem) + 2px);
}

/* Meta-Cluster (post-build-inject-article-template.js): 21 px hoch,
   Pillen-Liste aus Plattform/Age-Band. min-height 44 + horizontales
   UND vertikales Padding, weil manche Pillen-Texte sehr kurz sind
   ("Any device", 64 px) und ohne horizontales Padding unter 44 px
   bleiben wuerden. */
.pcw-meta-cluster a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding-top: calc(var(--pcw-space-2, 0.5rem) + 2px);
  padding-bottom: calc(var(--pcw-space-2, 0.5rem) + 2px);
  padding-left: calc(var(--pcw-space-2, 0.5rem) + 2px);
  padding-right: calc(var(--pcw-space-2, 0.5rem) + 2px);
}

/* Template-Bausteine (article/trick/hub-Templates): mehrere
   unterschiedliche Block-Typen, alle brauchen min-height 44 +
   horizontales Padding, weil viele Eintraege im Fliesstext kurz
   sind ("Any device", 75 px) und ohne horizontales Padding knapp
   unter 44 px landen. */
.pcw-template-block a,
.pcw-template-trust-body a,
.pcw-template-next a,
.pcw-home-trick-cta a,
.pcw-home-recent-item a,
.pcw-homepage-tile a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding-top: calc(var(--pcw-space-2, 0.5rem) + 2px);
  padding-bottom: calc(var(--pcw-space-2, 0.5rem) + 2px);
  padding-left: calc(var(--pcw-space-2, 0.5rem) + 2px);
  padding-right: calc(var(--pcw-space-2, 0.5rem) + 2px);
}

/* desc-Liste (z.B. Section-Listen, generated by Quartz 6.0 page-list):
   23 px hohe Inline-Links. min-height 44 + horizontales UND vertikales
   Padding, weil manche Texte sehr kurz sind ("hub", 36 px) und ohne
   horizontales Padding unter 44 px bleiben wuerden. */
.section-li a,
a.internal[href^="#"],
.section-li a.internal {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding-top: calc(var(--pcw-space-2, 0.5rem) + 2px);
  padding-bottom: calc(var(--pcw-space-2, 0.5rem) + 2px);
  padding-left: calc(var(--pcw-space-2, 0.5rem) + 2px);
  padding-right: calc(var(--pcw-space-2, 0.5rem) + 2px);
}

/* Backlinks (Quartz page-list): kurze Inline-Links im rechten Seiten-
   gleiter. min-height 44 + Padding, weil viele Texte sehr kurz sind
   ("Conduct", 60 px) und ohne Padding unter 44 px bleiben. */
.backlinks a,
.backlinks a.internal {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding-top: calc(var(--pcw-space-2, 0.5rem) + 2px);
  padding-bottom: calc(var(--pcw-space-2, 0.5rem) + 2px);
  padding-left: calc(var(--pcw-space-2, 0.5rem) + 2px);
  padding-right: calc(var(--pcw-space-2, 0.5rem) + 2px);
}

/* Notfall-Seite (post-build-inject-emergency-template.js): die
   Laender-Auswahl und der "How to place a call"-Link sind unter 44 px
   hoch (select nativ ~29 px, Anker ~20 px). min-height + Padding +
   inline-flex, weil Anker sonst display:inline bleibt und min-height
   dann nur fuer Block-Elemente greift. */
.pcw-emergency-jurisdiction select,
.pcw-emergency-jurisdiction a {
  min-height: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  padding-top: calc(var(--pcw-space-2, 0.5rem) + 2px);
  padding-bottom: calc(var(--pcw-space-2, 0.5rem) + 2px);
  padding-left: calc(var(--pcw-space-2, 0.5rem) + 2px);
  padding-right: calc(var(--pcw-space-2, 0.5rem) + 2px);
}

/* Footer (Quartz-eigene Komponente, nicht F2): 22 px hohe Links am
   Seitenende. min-height 44, horizontale Sicherheit, da footer meist
   einzeilig ist. */
footer a,
.page > footer a,
.page a[href*="github.com"] {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding-top: calc(var(--pcw-space-2, 0.5rem) + 2px);
  padding-bottom: calc(var(--pcw-space-2, 0.5rem) + 2px);
}

/* === Reduced motion ================================= === */
@media (prefers-reduced-motion: reduce) {
  /* Keine Transitions aus dieser Datei, daher nichts zu deaktivieren. */
}