/* ==========================================================================
   Präsentationsseiten (Startseite, Preise, Rückruf-System …) – gemeinsame Bausteine
   Baut auf tokens.css + bausteine.css auf. Präfix .pr-  ·  Wrapper: <main class="pr">
   Stimmung: hell, frisch, warm – wenige, starke Bewegungen
   ========================================================================== */

.pr {
  --pr-warm: #f2a65a;                 /* warmer Zweitakzent (Erinnerungen, Wärme) */
  --pr-warm-weich: #fdf0e2;
  --pr-tinte: #10201a;                /* fast schwarzer Knopf */
  --pr-tinte-auf: #ffffff;
  --pr-papier: #fbfaf6;               /* warmes Off-White */
  overflow-x: clip;
}
[data-theme="dark"] .pr {
  --pr-warm: #f4b373;
  --pr-warm-weich: rgba(244, 179, 115, 0.12);
  --pr-tinte: #ecf2ee;
  --pr-tinte-auf: #0a0e0c;
  --pr-papier: var(--rf-hg);
}
.pr { background: var(--pr-papier); }
.pr h1, .pr h2, .pr h3 { font-family: var(--rf-schrift-titel); color: var(--rf-text); text-wrap: balance; hyphens: manual; }
.pr p { text-wrap: pretty; }
.pr p a:not([class]), .pr-lead a { color: var(--rf-akzent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.pr p a:not([class]):hover, .pr-lead a:hover { color: var(--rf-akzent-stark); }
.pr-gruen { background: linear-gradient(100deg, var(--rf-akzent) 0%, var(--rf-akzent-hell) 60%, #7fd3a2 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme="dark"] .pr-gruen { background: linear-gradient(100deg, #62d39b 0%, #9be7bd 100%); -webkit-background-clip: text; background-clip: text; }
.pr-kicker { display: inline-flex; align-items: center; gap: 10px; font: 700 13px/1 var(--rf-schrift-text); letter-spacing: .08em; text-transform: uppercase; color: var(--rf-akzent); }
.pr-kicker::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.pr-h2 { font-size: clamp(32px, 4.2vw, 54px); line-height: 1.06; letter-spacing: -.035em; font-weight: 800; margin: 16px 0 18px; }
.pr-lead { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; color: var(--rf-text-2); max-width: 58ch; margin: 0; }
.pr-kopf { text-align: center; max-width: 760px; margin: 0 auto 64px; }
.pr-kopf .pr-lead { margin-inline: auto; }
.pr-sektion { padding-block: clamp(80px, 11vw, 140px); }
.pr-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.pr-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 26px; border-radius: 16px;
  font: 650 16px/1 var(--rf-schrift-text); letter-spacing: -.005em; text-decoration: none; white-space: nowrap;
  transition: transform .25s var(--rf-kurve), box-shadow .25s var(--rf-kurve), background .2s;
}
.pr-knopf svg { width: 20px; height: 20px; flex: none; }
.pr-knopf:hover { transform: translateY(-2px); }
.pr-knopf:active { transform: translateY(0); }
.pr-knopf--gruen { background: var(--rf-akzent); color: var(--rf-akzent-auf); box-shadow: 0 10px 30px -10px color-mix(in oklab, var(--rf-akzent) 70%, transparent); }
.pr-knopf--gruen:hover { background: var(--rf-akzent-stark); color: var(--rf-akzent-auf); box-shadow: 0 16px 36px -12px color-mix(in oklab, var(--rf-akzent) 80%, transparent); }
.pr-knopf--tinte { background: var(--pr-tinte); color: var(--pr-tinte-auf); box-shadow: 0 10px 30px -12px rgb(0 0 0 / .45); }
.pr-knopf--tinte:hover { color: var(--pr-tinte-auf); background: color-mix(in oklab, var(--pr-tinte), var(--rf-akzent) 18%); }
.pr-knopf--rahmen { background: transparent; color: var(--rf-text); border: 1.5px solid var(--rf-rand-stark); }
.pr-knopf--rahmen:hover { color: var(--rf-text); border-color: var(--rf-text-3); }
.pr-knopf small { display: block; font-size: 11.5px; font-weight: 500; opacity: .7; margin-top: 3px; letter-spacing: 0; }
.pr-pille {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px;
  background: var(--rf-flaeche); border: 1px solid var(--rf-rand); box-shadow: var(--rf-schatten-sm);
  font: 500 14px/1 var(--rf-schrift-text); color: var(--rf-text-2); text-decoration: none;
}
.pr-pille b { padding: 6px 10px; border-radius: 999px; background: var(--rf-akzent-weich); color: var(--rf-akzent); font-weight: 700; font-size: 12.5px; }
.pr-vertrauen { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px; font-size: 14.5px; color: var(--rf-text-2); }
.pr-vertrauen span { display: inline-flex; align-items: center; gap: 8px; }
.pr-vertrauen svg { width: 18px; height: 18px; color: var(--rf-akzent); flex: none; }
.pr-telefon {
  position: relative; width: min(100%, 330px); aspect-ratio: 1080 / 2250; margin-inline: auto;
  border-radius: 46px; padding: 10px; background: #0c1210;
  box-shadow: 0 0 0 1.5px #2a3430 inset, 0 50px 100px -30px rgb(16 40 28 / .45), 0 30px 60px -30px rgb(0 0 0 / .35);
}
.pr-telefon::before { content: ""; position: absolute; top: 20px; left: 50%; translate: -50% 0; width: 84px; height: 22px; border-radius: 20px; background: #0c1210; z-index: 3; }
.pr .bild-dunkel { display: none !important; }
[data-theme="dark"] .pr .bild-hell { display: none !important; }
[data-theme="dark"] .pr .bild-dunkel { display: block !important; }
@media (prefers-reduced-motion: no-preference) {
  .pr-telefon { animation: pr-telefon 1.1s var(--rf-kurve) .1s both; }
}
@keyframes pr-telefon { from { opacity: 0; transform: translateY(40px) rotate(2deg) scale(.96); } }
.pr-live { border-radius: 26px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); padding: 10px; }
@keyframes pr-puls { 70% { box-shadow: 0 0 0 9px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } }
.pr-meldung { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 18px; background: rgba(255,255,255,.05); color: inherit; text-decoration: none; transition: background .2s; }
.pr-meldung + .pr-meldung { margin-top: 8px; }
.pr-meldung:hover { background: rgba(255,255,255,.09); color: inherit; }
.pr-meldung i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: rgba(239,68,68,.15); color: #f87171; flex: none; }
.pr-meldung i svg { width: 20px; height: 20px; }
.pr-meldung span { min-width: 0; flex: 1; }
.pr-meldung b { display: block; color: #fff; font-size: 15px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-meldung small { color: #94a89d; font-size: 13px; }
.pr-meldung em { font-style: normal; font-size: 12px; font-weight: 700; color: #fca5a5; background: rgba(239,68,68,.12); padding: 5px 9px; border-radius: 8px; white-space: nowrap; }
.pr-meldung--treffer { background: rgba(239,68,68,.1); box-shadow: inset 0 0 0 1px rgba(239,68,68,.35); }
.pr-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.pr-faq details { border-bottom: 1px solid var(--rf-rand); }
.pr-faq details:first-child { border-top: 1px solid var(--rf-rand); }
.pr-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; font: 700 18px/1.35 var(--rf-schrift-titel); letter-spacing: -.01em; color: var(--rf-text); }
.pr-faq summary::-webkit-details-marker { display: none; }
.pr-faq summary i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rf-rand-stark); flex: none; transition: transform .3s var(--rf-kurve), background .2s, color .2s, border-color .2s; color: var(--rf-text-2); }
.pr-faq summary i svg { width: 14px; height: 14px; }
.pr-faq details[open]:not(.wird-geschlossen) summary i { transform: rotate(45deg); background: var(--rf-akzent); border-color: var(--rf-akzent); color: var(--rf-akzent-auf); }
.pr-faq details p { margin: -6px 0 24px; padding-right: 54px; color: var(--rf-text-2); font-size: 16px; line-height: 1.65; }
.pr-schluss {
  position: relative; overflow: hidden; isolation: isolate; text-align: center; border-radius: 40px;
  padding: clamp(56px, 9vw, 112px) clamp(24px, 5vw, 64px);
  background: linear-gradient(135deg, #136b43 0%, #1a8a56 45%, #2ea46f 100%); color: #fff;
}
.pr-schluss::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(600px 300px at 85% 110%, rgba(242,166,90,.45), transparent 70%), radial-gradient(500px 300px at 10% -10%, rgba(255,255,255,.18), transparent 70%); }
.pr-schluss h2 { color: #fff; font-size: clamp(40px, 6vw, 76px); line-height: 1; letter-spacing: -.045em; font-weight: 800; margin: 0 0 20px; }
.pr-schluss p { color: rgba(255,255,255,.85); font-size: 19px; max-width: 52ch; margin: 0 auto 36px; }
.pr-schluss .pr-knoepfe { justify-content: center; }
.pr-schluss .pr-knopf--gruen { background: #fff; color: #0f3d27; box-shadow: 0 14px 30px -12px rgba(0,0,0,.4); }
.pr-schluss .pr-knopf--gruen:hover { background: #f1fbf5; color: #0f3d27; }
.pr-schluss .pr-knopf--tinte { background: #0b2a1c; color: #fff; }
.pr-schluss .pr-knopf--tinte:hover { background: #082015; color: #fff; }
.pr-schluss small { display: block; margin-top: 24px; font-size: 13.5px; color: rgba(255,255,255,.75); }
@media (max-width: 900px) {
  .pr-telefon { width: min(78%, 300px); }
  .pr-faq { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .pr-knoepfe { flex-direction: column; align-items: stretch; }
  .pr-knopf { width: 100%; }
  .pr-faq details p { padding-right: 0; }
}
.pr-pille { white-space: nowrap; max-width: 100%; }
@media (max-width: 720px) {
  .pr-live { margin-inline: -8px; }
  .pr-pille { font-size: 13px; }
  .pr-pille .pr-nur-gross { display: none; }
}
.pr-textlink { font-weight: 600; font-size: 15px; color: #a9bab1; text-decoration: underline; text-decoration-color: rgba(255,255,255,.25); text-underline-offset: 4px; transition: color .2s, text-decoration-color .2s; }
.pr-textlink:hover { color: #fff; text-decoration-color: #fff; }
.pr-knopf .pr-knopf__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
.pr-telefon__bild { position: relative; width: 100%; height: 100%; border-radius: 37px; overflow: hidden; background: var(--rf-flaeche); }
.pr-telefon__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; max-width: none; }
.pr-telefon__bild img.bild-ohne-leiste { top: 9%; height: 91%; }
.pr-telefon__bild:has(.bild-ohne-leiste) { background: #fff; }
[data-theme="dark"] .pr-telefon__bild:has(.bild-ohne-leiste) { background: #121212; }
.pr-live__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 14px; font-size: 13px; color: #a9bab1; }
.pr-live__kopf b { display: inline-flex; align-items: center; gap: 9px; color: #fff; font-size: 14px; }
.pr-live__punkt { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 0 rgba(239,68,68,.6); animation: pr-puls 2s infinite; }
.pr-live__fuss { padding: 14px 14px 8px; font-size: 12.5px; color: #7f948a; }
.pr-live__fuss a { color: #a9bab1; }
.pr-faq__kopf { position: sticky; top: calc(var(--header-h, 84px) + 32px); }
@media (max-width: 900px) {
  .pr-faq__kopf { position: static; text-align: center; }
  .pr-faq__kopf .pr-lead { margin-inline: auto; }
}
@media (max-width: 720px) {
  .pr-knopf .pr-knopf__text { align-items: center; }
}
@media (max-width: 720px) {
  .pr-live__kopf { flex-direction: column; align-items: flex-start; gap: 4px; }
}