/* Pentao (Arbeitstitel) · Richtung A „Lackschwarz und Gold“ aus Claude Design (https://claude.ai/artifact/5sukWNC7aZEZYvoQbM1cWr).
   Eigenes Stylesheet nur für /pentao/ (build.mjs hasht es nach assets/pentao.<hash>.css). Bewusst ein dunkles Thema: Lack, Gold-Haarlinien,
   Instrument Serif für Überschriften, NP Studio Sans (Mona Sans) für Text, chinesische Zeichen aus der Systemschrift. */

@font-face {
  font-family: "NP Studio Sans";
  src: url("/assets/fonts/np-studio-sans.87473886ad1b.woff2") format("woff2");
  font-weight: 400 700; font-stretch: 100% 116%; font-style: normal; font-display: optional;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/instrument-serif-regular.60c06664b5a9.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: optional;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/instrument-serif-italic.6ee678c33f38.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: optional;
}

:root {
  color-scheme: dark;
  --pt-ink: #0C0B0A; --pt-hub: #100E0C; --pt-disc: #13110E; --pt-field: #0F0D0B;
  --pt-panel: #15120F; --pt-panel-hi: #181512; --pt-panel-lo: #110F0D; --pt-wait: #14110E;
  --pt-text: #F1EADB; --pt-text-2: #CFC5B2; --pt-text-3: #BFB5A3; --pt-text-4: #B7AD9A;
  --pt-muted: #9C9282; --pt-muted-2: #8E8576; --pt-label: #E7DECB; --pt-nav: #D8CFBD;
  --pt-gold: #D9BC7E; --pt-gold-2: #C9A55C; --pt-gold-hi: #E6CC92; --pt-gold-pale: #EFE3C4; --pt-on-gold: #15110A;
  --pt-line: rgba(201, 165, 92, .22); --pt-line-soft: rgba(201, 165, 92, .16); --pt-line-mid: rgba(201, 165, 92, .32); --pt-line-strong: rgba(201, 165, 92, .45);
  --pt-seal: #B73A24; --pt-seal-ink: #F6E7C8;
  --pt-holz: #6FBF8E; --pt-feuer: #E8735A; --pt-erde: #D9A94E; --pt-metall: #B9C2CC; --pt-wasser: #7FA2E6; --pt-siegel: #E9DCC0; --pt-leer: #5E574C;
  --pt-ok: rgba(111, 191, 142, .14); --pt-err: rgba(232, 115, 90, .16);
  --pt-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --pt-sans: "NP Studio Sans", "Helvetica Neue", Arial, sans-serif;
  --pt-han: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", "Noto Serif SC", "SimSun", serif;
  --pt-gutter: clamp(18px, 4vw, 48px);
  --pt-ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; background: var(--pt-ink); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0; min-width: 0; font-family: var(--pt-sans); font-size: 16px; line-height: 1.6; color: var(--pt-text);
  background: radial-gradient(1100px 760px at 80% 4%, rgba(201, 165, 92, .13), rgba(12, 11, 10, 0) 62%), var(--pt-ink);
  background-repeat: no-repeat; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
a { color: var(--pt-gold); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: #EFD9A6; }
:focus-visible { outline: 2px solid var(--pt-gold); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }
button { font: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; }
[lang|="zh"] { font-family: var(--pt-han); }
.pt-han { font-family: var(--pt-han); }

.pt-skip { position: absolute; left: 16px; top: -60px; z-index: 60; padding: 10px 16px; border-radius: 999px; background: var(--pt-gold); color: var(--pt-on-gold); font-weight: 600; text-decoration: none; }
.pt-skip:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }
.pt-shell { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--pt-gutter); }

/* Elementfarben für Zeichen, Punkte und Legende */
.pt-el--holz { color: var(--pt-holz); } .pt-el--feuer { color: var(--pt-feuer); } .pt-el--erde { color: var(--pt-erde); }
.pt-el--metall { color: var(--pt-metall); } .pt-el--wasser { color: var(--pt-wasser); } .pt-el--siegel { color: var(--pt-siegel); } .pt-el--leer { color: var(--pt-leer); }

/* ---------- Kopfzeile ---------- */
.pt-header { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding-block: 22px; }
.pt-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--pt-text); text-decoration: none; }
.pt-brand:hover { color: var(--pt-text); }
.pt-brand__seal { width: 38px; height: 38px; flex: none; display: block; }
.pt-brand__seal-bg { fill: var(--pt-seal); }
.pt-brand__seal-mark { fill: none; stroke: var(--pt-seal-ink); stroke-width: 5.2; stroke-linecap: round; stroke-linejoin: round; }
.pt-brand__name { font-family: var(--pt-serif); font-size: 30px; line-height: 1; letter-spacing: .01em; }
.pt-nav { display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; background: rgba(26, 23, 20, .72); box-shadow: inset 0 0 0 1px var(--pt-line); }
.pt-nav__link { padding: 10px 16px; border-radius: 999px; color: var(--pt-nav); text-decoration: none; font-size: 15px; line-height: 1.2; white-space: nowrap; }
.pt-nav__link:hover { color: var(--pt-text); background: rgba(201, 165, 92, .08); }
.pt-nav__link--lang { padding-inline: 12px; font-size: 13px; font-weight: 600; letter-spacing: .08em; }

/* ---------- Knöpfe ---------- */
.pt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px;
  font-family: var(--pt-sans); font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: filter .2s var(--pt-ease), transform .2s var(--pt-ease), box-shadow .2s var(--pt-ease);
}
.pt-btn--gold { background: linear-gradient(180deg, var(--pt-gold-hi), var(--pt-gold-2)); color: var(--pt-on-gold); box-shadow: 0 10px 30px rgba(201, 165, 92, .22); }
.pt-btn--gold:hover { color: var(--pt-on-gold); filter: brightness(1.06); }
.pt-btn--gold:active { transform: translateY(1px); }
.pt-btn--line { background: transparent; color: var(--pt-text); font-weight: 500; box-shadow: inset 0 0 0 1px var(--pt-line-strong); }
.pt-btn--line:hover { color: var(--pt-text); box-shadow: inset 0 0 0 1px rgba(217, 188, 126, .8); }
.pt-btn--small { min-height: 40px; padding: 0 18px; font-size: 15px; box-shadow: none; }
.pt-btn--large { min-height: 52px; padding: 0 26px; }
.pt-btn--block { width: 100%; }
.pt-btn[disabled] { cursor: progress; filter: saturate(.6) brightness(.9); }
.pt-btn[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--pt-gold); background: rgba(217, 188, 126, .12); }

/* ---------- Typografie ---------- */
.pt-eyebrow { font-size: 13px; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase; color: var(--pt-gold-2); font-weight: 600; }
.pt-h1 { font-family: var(--pt-serif); font-weight: 400; font-size: clamp(46px, 6.4vw + 12px, 92px); line-height: .98; letter-spacing: -.015em; text-wrap: balance; }
.pt-h2 { font-family: var(--pt-serif); font-weight: 400; font-size: clamp(38px, 4.4vw + 10px, 68px); line-height: 1.02; letter-spacing: -.01em; text-wrap: balance; }
.pt-h1 em, .pt-h2 em { font-style: italic; color: var(--pt-gold); }
.pt-lede { font-size: clamp(17px, 1vw + 12px, 19px); line-height: 1.6; color: var(--pt-text-2); max-width: 44em; text-wrap: pretty; }
.pt-label { font-size: 12px; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; color: var(--pt-gold-2); font-weight: 600; }

/* ---------- Held mit Jahreskreis ---------- */
.pt-hero { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(32px, 5vw, 72px); padding-block: clamp(20px, 4vw, 64px) clamp(56px, 8vw, 112px); }
.pt-hero__copy { flex: 1.08 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.pt-hero__lead { max-width: 33em; font-size: clamp(17px, .6vw + 13px, 20px); line-height: 1.6; color: var(--pt-text-2); text-wrap: pretty; }
.pt-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pt-hero__micro { font-size: 14px; color: var(--pt-muted); }
.pt-hero__figure { flex: 1 1 420px; min-width: 0; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.pt-hero__caption { max-width: 30em; text-align: center; font-size: 15px; line-height: 1.55; color: var(--pt-text-4); text-wrap: balance; }
.pt-hero__caption strong { color: var(--pt-text); font-weight: 600; }

.pt-dial { position: relative; width: min(100%, 560px); aspect-ratio: 1 / 1; }
.pt-dial__glow { position: absolute; inset: 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(217, 188, 126, .16), rgba(217, 188, 126, .05) 62%, rgba(12, 11, 10, 0)); filter: blur(6px); }
.pt-dial__svg { position: relative; display: block; width: 100%; height: auto; }
.pt-dial__disc { fill: var(--pt-disc); fill-opacity: .9; }
.pt-dial__wedge { fill: var(--pt-gold); fill-opacity: .26; }
.pt-dial__line { fill: none; stroke: var(--pt-gold-2); stroke-opacity: .75; stroke-width: 1; }
.pt-dial__line--soft { stroke-opacity: .45; stroke-width: .8; }
.pt-dial__line--mid { stroke-opacity: .6; stroke-width: .8; }
.pt-dial__line--faint { stroke-opacity: .35; stroke-width: .7; }
.pt-dial__tick { fill: none; stroke: var(--pt-gold-2); stroke-opacity: .55; }
.pt-dial__tick--fine { stroke-opacity: .45; }
.pt-dial__tick--strong { stroke-opacity: .85; }
.pt-dial__terms { fill: var(--pt-gold); font-size: 9.6px; font-family: var(--pt-han); }
.pt-dial__branches { fill: var(--pt-gold-pale); font-size: 16px; font-weight: 700; font-family: var(--pt-han); }
.pt-dial__trigrams { fill: var(--pt-gold-2); fill-opacity: .85; }
.pt-dial__halo { fill: #E8C77A; fill-opacity: .22; }
.pt-dial__dot { fill: #F0D592; }
.pt-dial__hub { fill: var(--pt-hub); }
.pt-dial__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; pointer-events: none; text-align: center; }
.pt-dial__han { font-family: var(--pt-han); font-weight: 700; font-size: clamp(20px, 2.6vw + 6px, 40px); line-height: 1; color: var(--pt-text); }
.pt-dial__name { max-width: 9em; font-size: clamp(10px, .5vw + 7px, 13px); line-height: 1.3; color: var(--pt-text-2); }
.pt-dial__deg { font-size: clamp(9px, .4vw + 7px, 12px); line-height: 1.3; color: var(--pt-muted); font-variant-numeric: tabular-nums; }

/* ---------- Abschnitte ---------- */
.pt-section { padding-block: clamp(56px, 8vw, 120px); border-top: 1px solid var(--pt-line-soft); }
.pt-section__inner { display: flex; flex-direction: column; gap: 40px; }
.pt-section__head { display: flex; flex-direction: column; gap: 14px; max-width: 54em; }

/* ---------- Rechner ---------- */
.pt-calc { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.pt-form { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pt-calc .pt-form {
  flex: 1 1 300px; max-width: 400px; padding: 26px; border-radius: 26px;
  background: linear-gradient(180deg, #171411, #120F0D); box-shadow: inset 0 0 0 1px var(--pt-line), 0 30px 60px rgba(0, 0, 0, .35);
}
.pt-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pt-field label, .pt-chips legend { font-size: 14px; font-weight: 600; color: var(--pt-label); }
.pt-input {
  width: 100%; min-width: 0; min-height: 50px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--pt-field); color: var(--pt-text);
  box-shadow: inset 0 0 0 1px var(--pt-line-mid); font: 500 16px var(--pt-sans); color-scheme: dark; -webkit-appearance: none; appearance: none;
}
.pt-input:hover { box-shadow: inset 0 0 0 1px var(--pt-line-strong); }
.pt-input:focus-visible { outline: 2px solid var(--pt-gold); outline-offset: 2px; }
.pt-input[disabled] { opacity: .45; cursor: not-allowed; }
.pt-input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--pt-feuer); }
.pt-input::placeholder { color: #6F675A; }
.pt-input--large { min-height: 54px; padding-inline: 16px; font-size: 17px; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(201, 165, 92, .4); }
.pt-select {
  padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--pt-gold) 50%), linear-gradient(135deg, var(--pt-gold) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat;
}
.pt-input::-webkit-date-and-time-value { text-align: left; }
.pt-check { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; color: var(--pt-nav); cursor: pointer; }
.pt-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--pt-gold-2); flex: none; }
.pt-hint { font-size: 13px; line-height: 1.5; color: var(--pt-muted); }
.pt-error { font-size: 14px; line-height: 1.5; color: #F2A08C; }

.pt-result { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 18px; scroll-margin-top: 16px; }
.pt-result__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.pt-result__title { font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--pt-text); }
.pt-chip-tag { padding: 5px 12px; border-radius: 999px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--pt-gold); box-shadow: inset 0 0 0 1px rgba(217, 188, 126, .45); }
.pt-pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 16px); }
.pt-pillar {
  display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; padding: 18px 6px 16px; border-radius: 22px; text-align: center;
  background: linear-gradient(180deg, var(--pt-panel-hi), var(--pt-panel-lo)); box-shadow: inset 0 0 0 1px var(--pt-line);
}
.pt-pillar--day { box-shadow: inset 0 0 0 1px rgba(217, 188, 126, .8), 0 24px 60px rgba(201, 165, 92, .16); }
.pt-pillar--unknown { box-shadow: inset 0 0 0 1px rgba(201, 165, 92, .14); }
.pt-pillar__name { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--pt-muted); font-weight: 600; }
.pt-pillar__han { font-family: var(--pt-han); font-weight: 700; font-size: clamp(34px, 3.2vw + 10px, 58px); line-height: 1.05; }
.pt-pillar__meta { display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 100%; line-height: 1.3; font-size: 14px; color: var(--pt-label); }
.pt-pillar__sub { font-size: 12px; color: var(--pt-muted); overflow-wrap: anywhere; }
.pt-pillar__rule { width: 46%; height: 1px; background: rgba(201, 165, 92, .35); }
.pt-pillar__you { padding: 4px 12px; border-radius: 999px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--pt-on-gold); background: var(--pt-gold); }

.pt-result__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.pt-card { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 26px; border-radius: 24px; background: var(--pt-panel); box-shadow: inset 0 0 0 1px rgba(201, 165, 92, .2); }
.pt-master__head { display: flex; gap: 18px; align-items: center; }
.pt-master__han { font-family: var(--pt-han); font-weight: 700; font-size: 68px; line-height: 1; flex: none; }
.pt-master__names { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pt-master__title { font-size: 18px; font-weight: 600; color: var(--pt-text); }
.pt-master__bild { font-family: var(--pt-serif); font-style: italic; font-size: 24px; line-height: 1.2; color: var(--pt-gold); }
.pt-master__text { font-size: 15px; line-height: 1.65; color: var(--pt-text-2); }
.pt-summary { display: flex; flex-direction: column; gap: 10px; margin: 0; padding-top: 16px; border-top: 1px solid rgba(201, 165, 92, .18); }
.pt-summary div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; }
.pt-summary dt { color: var(--pt-muted); flex: none; }
.pt-summary dd { margin: 0; color: var(--pt-text); font-weight: 600; text-align: right; }
.pt-elements { gap: 14px; }
.pt-pentagon { display: block; width: 100%; max-width: 300px; height: auto; align-self: center; }
.pt-pentagon__orbit { fill: none; stroke: var(--pt-gold-2); stroke-opacity: .3; stroke-width: 1; stroke-dasharray: 2 5; }
.pt-pentagon__star { fill: none; stroke: var(--pt-gold-2); stroke-opacity: .14; stroke-width: 1; }
.pt-node__ring { fill: none; stroke: var(--pt-gold); stroke-width: 1.5; stroke-opacity: 0; }
.pt-node--master .pt-node__ring { stroke-opacity: 1; }
.pt-node__dot { fill-opacity: .95; }
.pt-node--holz .pt-node__dot { fill: var(--pt-holz); } .pt-node--feuer .pt-node__dot { fill: var(--pt-feuer); } .pt-node--erde .pt-node__dot { fill: var(--pt-erde); }
.pt-node--metall .pt-node__dot { fill: var(--pt-metall); } .pt-node--wasser .pt-node__dot { fill: var(--pt-wasser); }
.pt-node--empty .pt-node__dot { fill-opacity: .14; }
.pt-node__han { font-family: var(--pt-han); font-size: 16px; font-weight: 700; fill: #120F0C; }
.pt-node--empty .pt-node__han { fill: var(--pt-muted-2); }
.pt-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
.pt-legend__item { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; }
.pt-legend__dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.pt-legend__item > span:last-child { color: var(--pt-nav); }
.pt-footnote { font-size: 13px; line-height: 1.55; color: var(--pt-muted-2); }

/* ---------- Was anders ist ---------- */
.pt-features { list-style: none; margin: 0; padding: 1px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 1px; background: var(--pt-line); border-radius: 28px; overflow: hidden; }
.pt-feature { display: flex; flex-direction: column; gap: 12px; padding: 32px; background: var(--pt-field); }
.pt-feature__glyph { font-family: var(--pt-han); font-weight: 700; font-size: 30px; line-height: 1; }
.pt-feature__title { font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--pt-text); }
.pt-feature__text { font-size: 16px; line-height: 1.6; color: var(--pt-text-3); text-wrap: pretty; }

/* ---------- Warteliste ---------- */
.pt-section--wait { padding-block: clamp(40px, 6vw, 96px); }
.pt-wait {
  display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 64px); padding: clamp(26px, 5vw, 64px); border-radius: 36px;
  background: radial-gradient(700px 420px at 0% 0%, rgba(201, 165, 92, .15), rgba(0, 0, 0, 0) 70%), var(--pt-wait);
  box-shadow: inset 0 0 0 1px rgba(201, 165, 92, .3), 0 40px 80px rgba(0, 0, 0, .4);
}
.pt-wait__copy { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.pt-wait__doi { font-size: 15px; line-height: 1.6; color: #A99F8D; }
.pt-form--wait { flex: 1 1 380px; }
.pt-chips { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pt-chips legend { padding: 0; margin-bottom: 10px; }
.pt-chips legend span { font-weight: 400; color: var(--pt-muted); }
.pt-chips__row { display: flex; flex-wrap: wrap; gap: 10px; }
.pt-chip { position: relative; display: inline-flex; cursor: pointer; }
.pt-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pt-chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 500;
  color: var(--pt-label); background: rgba(26, 23, 20, .85); box-shadow: inset 0 0 0 1px rgba(201, 165, 92, .35); transition: background .2s var(--pt-ease), color .2s var(--pt-ease);
}
.pt-chip:hover span { box-shadow: inset 0 0 0 1px rgba(217, 188, 126, .7); }
.pt-chip input:checked + span { background: var(--pt-gold); color: var(--pt-on-gold); box-shadow: none; }
.pt-chip input:checked + span::before { content: ""; width: 10px; height: 6px; margin-right: 8px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(-45deg); }
.pt-chip input:focus-visible + span { outline: 2px solid var(--pt-gold); outline-offset: 3px; }
.pt-hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pt-form--wait { position: relative; }
.pt-status { padding: 14px 16px; border-radius: 14px; font-size: 15px; line-height: 1.5; color: var(--pt-text); background: var(--pt-panel); }
.pt-status:focus { outline: none; }
.pt-status:focus-visible { outline: 2px solid var(--pt-gold); }
.pt-status--ok { background: var(--pt-ok); box-shadow: inset 0 0 0 1px rgba(111, 191, 142, .35); }
.pt-status--error { background: var(--pt-err); box-shadow: inset 0 0 0 1px rgba(232, 115, 90, .35); }
.pt-fine { font-size: 13px; line-height: 1.55; color: var(--pt-muted); }

/* ---------- Fragen ---------- */
.pt-section--faq { padding-block: clamp(40px, 6vw, 96px) clamp(56px, 8vw, 120px); border-top: 0; }
.pt-faq { display: flex; flex-direction: column; max-width: 860px; border-bottom: 1px solid var(--pt-line); }
.pt-faq__item { border-top: 1px solid var(--pt-line); }
.pt-faq__item summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 20px 0; cursor: pointer; list-style: none;
  font-size: 19px; font-weight: 600; line-height: 1.4; color: var(--pt-text);
}
.pt-faq__item summary::-webkit-details-marker { display: none; }
.pt-faq__icon { position: relative; width: 14px; height: 14px; flex: none; align-self: center; }
.pt-faq__icon::before, .pt-faq__icon::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; border-radius: 1px; background: var(--pt-gold-2); transition: transform .25s var(--pt-ease); }
.pt-faq__icon::after { transform: rotate(90deg); }
.pt-faq__item[open] .pt-faq__icon::after { transform: rotate(0deg); }
.pt-faq__item p { max-width: 62ch; padding-bottom: 22px; font-size: 16px; line-height: 1.65; color: var(--pt-text-3); text-wrap: pretty; }

/* ---------- Fußzeile ---------- */
.pt-footer { border-top: 1px solid var(--pt-line-soft); }
.pt-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding-block: 32px calc(32px + env(safe-area-inset-bottom, 0px)); font-size: 14px; color: var(--pt-muted-2); }
.pt-footer__brand { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.pt-footer__name { font-family: var(--pt-serif); font-size: 22px; line-height: 1; color: var(--pt-label); }
.pt-footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.pt-footer__consent { padding: 0; border: 0; background: none; color: var(--pt-gold); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pt-footer__copy { flex-basis: 100%; font-size: 13px; color: #776F62; }

/* ---------- Einwilligung (Cockpit-Skript steuert data-consent*) ---------- */
.pt-consent { position: fixed; z-index: 54; left: var(--pt-gutter); bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); width: min(440px, calc(100vw - 2 * var(--pt-gutter))); }
.pt-consent__card {
  display: flex; flex-direction: column; padding: 22px 22px 18px; border-radius: 24px; color: var(--pt-text);
  background: rgba(21, 18, 15, .97); box-shadow: inset 0 0 0 1px rgba(201, 165, 92, .35), 0 30px 60px rgba(0, 0, 0, .55);
  max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 40px);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 40px);
}
.pt-consent__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: -4px; padding: 4px; }
.pt-consent__title { margin: 6px 0 8px; font-size: 18px; font-weight: 600; line-height: 1.3; }
.pt-consent__title:focus { outline: none; }
.pt-consent__title:focus-visible { outline: 2px solid var(--pt-gold); outline-offset: 4px; }
.pt-consent__text { font-size: 14px; line-height: 1.55; color: var(--pt-text-2); }
.pt-consent__state { margin-top: 10px; font-size: 14px; font-weight: 600; }
.pt-consent__more { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-top: 12px; font-size: 14px; }
.pt-consent__off { padding: 0; border: 0; background: none; color: var(--pt-text-2); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pt-consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; flex-shrink: 0; }
.pt-consent__actions .pt-btn { width: 100%; }

/* ---------- Rechtliches ---------- */
.pt-legal { padding-block: clamp(24px, 4vw, 56px) clamp(56px, 8vw, 112px); }
.pt-legal__head { display: flex; flex-direction: column; gap: 16px; max-width: 46em; padding-bottom: 32px; border-bottom: 1px solid var(--pt-line-soft); }
.pt-h1--legal { font-size: clamp(42px, 4.4vw + 16px, 80px); }
.pt-legal__meta { font-size: 15px; color: var(--pt-muted); }
.pt-legal__binding { font-size: 15px; line-height: 1.55; color: var(--pt-text-2); }
.pt-legal__body { max-width: 72ch; padding-top: 32px; display: flex; flex-direction: column; gap: 16px; font-size: 16px; line-height: 1.7; color: var(--pt-text-2); }
.pt-legal__body h2 { margin-top: 24px; font-family: var(--pt-serif); font-weight: 400; font-size: clamp(28px, 1.6vw + 18px, 36px); line-height: 1.15; color: var(--pt-text); scroll-margin-top: 24px; }
.pt-legal__body p, .pt-legal__body ul { scroll-margin-top: 24px; }
.pt-legal__body strong { color: var(--pt-text); font-weight: 600; }
.pt-legal__body ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px; }
.pt-legal__body li::marker { color: var(--pt-gold-2); }
.pt-legal__body a { overflow-wrap: anywhere; }
.pt-legal__notice { padding: 20px 22px; border-radius: 20px; background: var(--pt-panel); box-shadow: inset 0 0 0 1px var(--pt-line); color: var(--pt-text); }

/* ---------- Bestätigen und Abmelden ---------- */
.pt-token { padding-block: clamp(32px, 8vw, 120px) clamp(64px, 10vw, 160px); }
.pt-token__card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 640px; margin-inline: auto; padding: clamp(26px, 5vw, 56px); border-radius: 32px;
  background: radial-gradient(520px 320px at 0% 0%, rgba(201, 165, 92, .14), rgba(0, 0, 0, 0) 70%), var(--pt-wait); box-shadow: inset 0 0 0 1px rgba(201, 165, 92, .3), 0 40px 80px rgba(0, 0, 0, .4);
}
.pt-h1--token { font-size: clamp(40px, 3.6vw + 18px, 72px); }
.pt-token__card .pt-status { align-self: stretch; }
.pt-token__back { font-size: 15px; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 760px) {
  .pt-nav__link--section { display: none; }
}
@media (max-width: 400px) {
  .pt-nav__link--lang { display: none; }
  .pt-brand { gap: 10px; }
  .pt-brand__name { font-size: 26px; }
  .pt-nav { padding: 4px; }
  .pt-calc .pt-form, .pt-card, .pt-feature { padding: 22px; }
  .pt-hero__actions .pt-btn { width: 100%; }
}
@media (max-width: 520px) {
  .pt-consent { left: 12px; right: 12px; width: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); }
  .pt-consent__card { padding: 18px 18px 16px; }
  .pt-faq__item summary { font-size: 17px; }
}
@media (max-width: 480px) {
  .pt-pillar { padding-inline: 4px; }
  .pt-pillar__name { letter-spacing: .12em; }
  .pt-pillar__sub { font-size: 11px; }
}
@media (max-width: 359px) {
  .pt-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (forced-colors: active) {
  .pt-btn, .pt-chip span, .pt-input, .pt-card, .pt-pillar { border: 1px solid CanvasText; }
  .pt-chip input:checked + span { outline: 2px solid Highlight; }
}