/* Projekttag · Anmeldeseite im Design «Zukunft»
   ------------------------------------------------------------------
   Nur für login.php. Weltraum-Look wie modernhosting.ch und die übrigen
   Alpasana-Seiten: Sternenhimmel (assets/js/zukunft-login.js), Glas-Karte,
   Rakete, Verlauf Violett -> Cyan -> Mint.

   Grenzen:
   - Bewegung nur mit html.pt-anim (Schleifen) und html.pt-start (einmaliger Auftritt);
     beide setzt das Skript, wenn Bewegung erlaubt ist.
     Ohne JavaScript, bei «Bewegung reduzieren» oder nach «Pause» steht alles still.
   - Keine externen Quellen, Schriften lokal (SIL OFL, ../fonts/OFL-*.txt).
   - Kontraste nach WCAG AA (Text mindestens 4.5:1, Feldrand mindestens 3:1). */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/rajdhani-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/rajdhani-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@property --pt-edge { syntax: '<angle>'; initial-value: 220deg; inherits: true; }

/* ============================== Tokens ============================== */

.pt-login {
  --pt-violet: #a492ff;
  --pt-indigo: #6550db;
  --pt-cyan: #69e1f5;
  --pt-mint: #9af5d4;
  --pt-grad: linear-gradient(105deg, var(--pt-violet), var(--pt-cyan) 65%, var(--pt-mint));
  --pt-ink: #04070e;
  --pt-bg: #070a13;
  --pt-text: #eef3ff;
  --pt-lead: #c3cde0;
  --pt-muted: #a6b2ca;
  --pt-line: rgba(255, 255, 255, .09);
  --pt-field: rgba(4, 7, 14, .55);
  --pt-field-border: #6b7a99;
  --pt-field-hover: #8391ad;
  --pt-focus: #69e1f5;
  --pt-error: #ffb4b4;
  --pt-title: 'Rajdhani', 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --pt-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --pt-c-star: #ffffff;
}

*, *::before, *::after { box-sizing: border-box; }

.pt-login {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--pt-bg);
  color: var(--pt-text);
  font-family: var(--pt-font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ============================== Himmel ============================== */

.pt-sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(214, 226, 255, .7) 50%, transparent 52%),
    radial-gradient(1px 1px at 27% 71%, rgba(214, 226, 255, .55) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 44% 34%, rgba(105, 225, 245, .6) 50%, transparent 52%),
    radial-gradient(1px 1px at 63% 82%, rgba(214, 226, 255, .55) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 78% 22%, rgba(164, 146, 255, .7) 50%, transparent 52%),
    radial-gradient(1px 1px at 91% 58%, rgba(214, 226, 255, .55) 50%, transparent 52%),
    var(--pt-bg);
}
.pt-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pt-nebula { position: absolute; border-radius: 50%; filter: blur(70px); }
.pt-nebula-a {
  width: 60vmax; height: 60vmax; left: -18vmax; top: -22vmax;
  background: radial-gradient(circle, rgba(52, 44, 130, .55), transparent 68%);
}
.pt-nebula-b {
  width: 52vmax; height: 52vmax; right: -20vmax; bottom: -24vmax;
  background: radial-gradient(circle, rgba(71, 206, 235, .12), transparent 66%);
}
/* Horizont eines Planeten am unteren Rand */
.pt-planet {
  position: absolute;
  left: 50%;
  bottom: -86vmin;
  width: 120vmin;
  height: 120vmin;
  margin-left: -60vmin;
  border-radius: 50%;
  border-top: 1px solid rgba(154, 245, 212, .5);
  background: radial-gradient(circle at 50% 0, rgba(105, 225, 245, .16), rgba(26, 36, 72, .85) 4%, #04070e 12%);
}

/* ============================== Seite ============================== */

.pt-page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px 84px;
}
.pt-shell {
  width: 100%;
  max-width: 460px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
.pt-visual { display: none; }

@media (min-width: 980px) {
  .pt-shell { max-width: 1040px; grid-template-columns: minmax(0, 1fr) 440px; gap: 56px; }
  .pt-visual { display: block; }
}

/* ============================== Bühne mit grosser Rakete ============================== */

.pt-scene {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  aspect-ratio: 600 / 590;
}
.pt-rocket {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 40px rgba(105, 225, 245, .18));
}
.pt-clouds { fill: var(--pt-violet); opacity: .1; filter: blur(3px); transform-origin: 300px 520px; }
.pt-particles { fill: var(--pt-cyan); stroke: var(--pt-cyan); stroke-width: 1.5; stroke-linecap: round; opacity: .55; }
.pt-flame-halo { opacity: .35; filter: blur(3px); }
.pt-flame-core { opacity: .8; }
.pt-flame-halo, .pt-flame-core { transform-origin: 300px 350px; }
.pt-trajectory { opacity: .8; }

/* Umlaufbahnen: flach gedrückte Kreise, deren Punkt den Ring abfährt. */
.pt-orbit {
  position: absolute;
  left: 3%;
  right: 3%;
  top: 30%;
  aspect-ratio: 1;
  transform: rotate(-24deg) scaleY(.3);
  pointer-events: none;
}
.pt-orbit-two { left: -8%; right: -8%; top: 22%; transform: rotate(-24deg) scaleY(.26); opacity: .55; }
.pt-orbit-track {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(105, 225, 245, .32);
}
.pt-orbit-two .pt-orbit-track { border-color: rgba(164, 146, 255, .32); border-style: dashed; }
.pt-orbit-dot {
  position: absolute;
  left: 50%;
  top: -5px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--pt-cyan);
  box-shadow: 0 0 16px 2px rgba(105, 225, 245, .8);
  transform: scaleY(3.3);
}

/* ============================== Karte ============================== */

.pt-card {
  position: relative;
  isolation: isolate;
  z-index: 1;
  width: 100%;
  padding: 34px 32px 28px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(18, 27, 45, .94), rgba(10, 15, 27, .96));
  box-shadow: 0 30px 90px rgba(0, 0, 0, .5), 0 0 80px -30px rgba(113, 82, 218, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
}
@supports ((-webkit-backdrop-filter: blur(16px)) or (backdrop-filter: blur(16px))) {
  .pt-card {
    background: linear-gradient(180deg, rgba(18, 27, 45, .86), rgba(10, 15, 27, .9));
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
  }
}
/* Irisierender Rand; der helle Abschnitt folgt dem Zeiger (--pt-edge). */
.pt-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--pt-edge), rgba(255, 255, 255, .1), var(--pt-violet) 8%, var(--pt-cyan) 16%, var(--pt-mint) 21%, rgba(255, 255, 255, .1) 34%, rgba(255, 255, 255, .06) 70%, rgba(164, 146, 255, .35) 88%, rgba(255, 255, 255, .1));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.pt-card::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 28px;
  right: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(105, 225, 245, .75), transparent);
  pointer-events: none;
}
/* Andock-Rahmen: vier Eckwinkel wie bei einer Zielerfassung. */
.pt-card-fx {
  position: absolute;
  inset: -12px;
  z-index: -2;
  pointer-events: none;
  opacity: .8;
  --pt-corner: rgba(105, 225, 245, .7);
  background:
    linear-gradient(var(--pt-corner), var(--pt-corner)) left top / 20px 1px no-repeat,
    linear-gradient(var(--pt-corner), var(--pt-corner)) left top / 1px 20px no-repeat,
    linear-gradient(var(--pt-corner), var(--pt-corner)) right top / 20px 1px no-repeat,
    linear-gradient(var(--pt-corner), var(--pt-corner)) right top / 1px 20px no-repeat,
    linear-gradient(var(--pt-corner), var(--pt-corner)) left bottom / 20px 1px no-repeat,
    linear-gradient(var(--pt-corner), var(--pt-corner)) left bottom / 1px 20px no-repeat,
    linear-gradient(var(--pt-corner), var(--pt-corner)) right bottom / 20px 1px no-repeat,
    linear-gradient(var(--pt-corner), var(--pt-corner)) right bottom / 1px 20px no-repeat;
}
.pt-card-scan {
  position: absolute;
  top: 12px;
  left: 24px;
  right: 24px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--pt-cyan), var(--pt-mint), transparent);
  box-shadow: 0 0 18px var(--pt-cyan);
  opacity: 0;
  pointer-events: none;
}
/* Kleine Rakete an der Ecke der Karte (Handy und Tablet; auf dem Desktop steht die grosse daneben). */
.pt-card-rocket {
  position: absolute;
  top: -34px;
  right: -8px;
  width: 54px;
  height: 100px;
  pointer-events: none;
  filter: drop-shadow(0 0 16px rgba(105, 225, 245, .28));
}
.pt-rocket-mini { display: block; width: 100%; height: 100%; overflow: visible; }
@media (min-width: 980px) {
  .pt-card-rocket { display: none; }
}

/* Tastaturfokus in der Karte: die Eckwinkel leuchten mint auf. */
.pt-card-fx { transition: opacity .2s; }
.pt-card:focus-within .pt-card-fx { --pt-corner: rgba(154, 245, 212, .95); opacity: 1; }

/* ============================== Titel ============================== */

.pt-title {
  margin: 0;
  font-family: var(--pt-title);
  font-weight: 700;
  font-size: clamp(2.3rem, 7vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  text-align: center;
  color: var(--pt-cyan); /* Rückfall ohne background-clip */
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .pt-title {
    background: var(--pt-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}
.pt-sub {
  margin: 4px 0 26px;
  text-align: center;
  font-family: var(--pt-font);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pt-muted);
}
.pt-sub::after {
  content: '';
  display: block;
  width: 120px;
  height: 1px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, var(--pt-violet) 22%, var(--pt-cyan) 55%, var(--pt-mint) 78%, transparent);
}

/* ============================== Meldung ============================== */

.pt-alert {
  margin: 0 0 20px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 138, 138, .5);
  border-left-width: 4px;
  background: rgba(255, 80, 80, .1);
  color: var(--pt-error); /* 11:1 auf der Karte */
  font-size: .9375rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* ============================== Formular ============================== */

.pt-field { margin-bottom: 18px; }
.pt-label {
  display: block;
  margin-bottom: 6px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--pt-lead);
}
.pt-input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--pt-field-border);
  border-radius: 12px;
  background: var(--pt-field);
  color: var(--pt-text);
  font: inherit;
  font-size: 16px; /* verhindert das Hineinzoomen auf iOS */
  transition: border-color .15s, box-shadow .15s;
}
.pt-input::placeholder { color: #8a97b1; opacity: 1; }
.pt-input:hover { border-color: var(--pt-field-hover); }
.pt-input:focus,
.pt-input:focus-visible {
  outline: 2px solid var(--pt-focus);
  outline-offset: 1px;
  border-color: var(--pt-focus);
  box-shadow: 0 0 0 5px rgba(105, 225, 245, .18);
}
.pt-input:-webkit-autofill {
  -webkit-text-fill-color: var(--pt-text);
  -webkit-box-shadow: 0 0 0 1000px #0f1a2e inset;
  caret-color: var(--pt-text);
}
.pt-pw { position: relative; }
.pt-pw .pt-input { padding-right: 52px; }
.pt-pw-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--pt-muted);
  cursor: pointer;
}
.pt-pw-toggle[hidden] { display: none; }
.pt-pw-toggle:hover { color: var(--pt-text); }
.pt-pw-toggle svg { width: 22px; height: 22px; }
.pt-pw-slash { display: none; }
.pt-pw-toggle[aria-pressed="true"] .pt-pw-slash { display: inline; }

.pt-button {
  position: relative;
  display: block;
  width: 100%;
  min-height: 50px;
  margin-top: 6px;
  padding: 12px 20px;
  border: 0;
  border-radius: 12px;
  background: var(--pt-grad);
  color: var(--pt-ink); /* dunkel auf hellem Verlauf, mindestens 9:1 */
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 10px 30px -10px rgba(105, 225, 245, .55);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.pt-button:hover { filter: brightness(1.06); box-shadow: 0 14px 36px -10px rgba(105, 225, 245, .7); transform: translateY(-1px); }
.pt-button:active { transform: translateY(0); }

.pt-input:focus-visible,
.pt-button:focus-visible,
.pt-pw-toggle:focus-visible,
.pt-motion:focus-visible {
  outline: 3px solid var(--pt-focus);
  outline-offset: 3px;
}
.pt-input:focus-visible { outline-offset: 1px; }

/* ============================== Hinweise ============================== */

.pt-notes {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--pt-line);
}
.pt-note {
  margin: 0;
  text-align: center;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--pt-muted); /* 9:1 */
}
.pt-note { text-wrap: pretty; }
.pt-note strong { color: var(--pt-text); font-weight: 600; }
.pt-note + .pt-note { margin-top: 14px; }
.pt-note-help {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(154, 245, 212, .28);
  background: rgba(154, 245, 212, .06);
  color: var(--pt-lead);
}
.pt-note-small {
  padding-top: 14px;
  border-top: 1px solid var(--pt-line);
  font-size: .8125rem;
}

/* ============================== Fuss und Pause-Knopf ============================== */

.pt-foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 10px 16px 14px;
  pointer-events: none;
}
.pt-motion {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(10, 15, 27, .82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--pt-lead);
  font: inherit;
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  max-width: 100%;
}
.pt-motion[hidden] { display: none; }
.pt-motion::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pt-mint);
  box-shadow: 0 0 10px var(--pt-mint);
  flex: none;
}
.pt-motion:hover { color: var(--pt-text); border-color: var(--pt-cyan); }
.pt-motion[aria-pressed="true"]::before { background: var(--pt-muted); box-shadow: none; }

/* ============================== Kleine Bildschirme ============================== */

@media (max-width: 560px) {
  .pt-page { min-height: 0; padding: 44px 14px 20px; align-items: flex-start; }
  .pt-foot { position: relative; z-index: 2; padding: 4px 14px 28px; }
  .pt-card { padding: 28px 20px 22px; border-radius: 18px; }
  .pt-card-fx { inset: -8px; }
  .pt-card-rocket { top: -30px; right: -2px; width: 44px; height: 82px; }
}
@media (max-width: 420px) {
  .pt-card-fx { display: none; }
  .pt-page { padding-left: 12px; padding-right: 12px; }
}

/* ============================== Bewegung (nur wenn erlaubt) ============================== */


@keyframes pt-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes pt-flame { from { transform: scaleY(.9) scaleX(.96); } to { transform: scaleY(1.12) scaleX(1.04); } }
@keyframes pt-clouds { from { transform: scaleX(.96); } to { transform: scaleX(1.05); } }
@keyframes pt-twinkle { from { opacity: .3; } to { opacity: .75; } }
@keyframes pt-spin { to { transform: rotate(360deg); } }
@keyframes pt-scan {
  0% { top: 12px; opacity: 0; }
  12% { opacity: .9; }
  88% { opacity: .5; }
  100% { top: calc(100% - 14px); opacity: 0; }
}
@keyframes pt-start {
  from { opacity: 0; transform: translateY(46px) scale(.94); }
  to { opacity: 1; transform: none; }
}
@keyframes pt-card-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}


html.pt-anim .pt-float { animation: pt-float 6s ease-in-out infinite; }
html.pt-anim :is(.pt-flame-halo, .pt-flame-core) { animation: pt-flame 1.2s ease-in-out infinite alternate; }
html.pt-anim .pt-clouds { animation: pt-clouds 7s ease-in-out infinite alternate; }
html.pt-anim .pt-particles { animation: pt-twinkle 4s ease-in-out infinite alternate; }
html.pt-anim .pt-orbit-track { animation: pt-spin 34s linear infinite; }
html.pt-anim .pt-orbit-two .pt-orbit-track { animation-duration: 52s; animation-direction: reverse; }
html.pt-start .pt-card-scan { animation: pt-scan 2.2s ease-in-out .5s 1 both; }
html.pt-start .pt-scene { animation: pt-start 1.4s cubic-bezier(.2, .7, .2, 1) both; }
html.pt-start .pt-card { animation: pt-card-in .8s ease-out both; }

/* Schleifen ausserhalb des Sichtfelds oder in verstecktem Tab anhalten */
html.pt-page-hidden *,
html.pt-page-hidden *::before,
html.pt-page-hidden *::after,
.pt-offscreen,
.pt-offscreen * { animation-play-state: paused !important; }

/* Zeiger-Tiefe (translate wird vom Skript per CSSOM gesetzt) */
[data-pt-depth] { will-change: auto; }

/* Bewegung reduzieren und Systemfarben: alles still, nichts läuft */
@media (prefers-reduced-motion: reduce) {
  .pt-login *, .pt-login *::before, .pt-login *::after {
    animation: none !important;
    transition: none !important;
  }
  .pt-button:hover { transform: none; }
}
@media (forced-colors: active) {
  .pt-canvas, .pt-sky, .pt-visual, .pt-card-rocket, .pt-card-fx, .pt-card-scan { display: none; }
  .pt-card { background: Canvas; border: 1px solid CanvasText; box-shadow: none; }
  .pt-card::before, .pt-card::after { display: none; }
  .pt-title { -webkit-text-fill-color: currentColor; background: none; color: CanvasText; }
  .pt-button { border: 1px solid ButtonText; background: ButtonFace; color: ButtonText; }
}
@media print {
  .pt-sky, .pt-visual, .pt-card-rocket, .pt-foot { display: none; }
  .pt-login { background: #fff; color: #000; }
}

/* ============================== Textbereich unter der Anmeldung ============================== */
/* Rein additiv: Beschreibung und häufige Fragen als normaler, lesbarer Seitentext. */

.pt-info {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 16px 96px;
}
.pt-info-card {
  padding: 28px 28px 24px;
  border-radius: 20px;
  border: 1px solid var(--pt-line);
  background: linear-gradient(180deg, rgba(18, 27, 45, .86), rgba(10, 15, 27, .9));
}
.pt-info-card + .pt-info-card { margin-top: 20px; }
.pt-info-card h2 {
  margin: 0 0 12px;
  font-family: var(--pt-title);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--pt-text);
}
.pt-info-card h3 {
  margin: 20px 0 4px;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--pt-text);
}
.pt-info-card p {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--pt-lead);
  text-wrap: pretty;
}
.pt-info-card .pt-info-antwort { font-size: 1rem; }
@media (max-width: 560px) {
  .pt-info { padding: 4px 14px 88px; }
  .pt-info-card { padding: 22px 18px 18px; border-radius: 18px; }
}
@media print {
  .pt-info-card { border: 0; background: none; }
  .pt-info-card h2, .pt-info-card h3, .pt-info-card p { color: #000; }
}