/* Seite „Für Fachbetriebe“ – baut auf site.css auf */
.p-hero { background: #000; color: var(--dark-ink); padding: clamp(150px, 20vh, 220px) 0 clamp(90px, 12vw, 150px); }
.p-eyebrow { margin: 0 0 18px; font-size: 19px; font-weight: 600; color: #a1a1a6; letter-spacing: -.01em; }
.p-h1 { margin: 0; max-width: 980px; font-size: clamp(48px, 7.4vw, 104px); line-height: .98; font-weight: 700; letter-spacing: -.048em; }
.p-sub { margin: 22px 0 0; max-width: 640px; font-size: clamp(27px, 3vw, 40px); line-height: 1.2; font-weight: 600; color: #fff; letter-spacing: -.02em; text-shadow: 0 1px 2px rgba(0,0,0,.18), 0 2px 18px rgba(0,0,0,.2); } /* wie die Subline der Startseite */
@media (max-width: 760px) { .p-sub { font-size: 27px; } }
.p-ctas { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 38px; }
.p-ctas .link-arrow { color: var(--link-dark); }

/* Hero: Text links, Postfach mit eintreffenden Anfragen rechts */
.p-hero-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
.p-hero-grid .p-h1 { font-size: clamp(56px, 7.8vw, 120px); } /* Dreizeiler-Block, breiteste Zeile ≈ 3,86 em */
.p-mail { position: relative; margin: 0 -9% 0 0; container-type: inline-size; filter: drop-shadow(0 30px 60px rgba(0,0,0,.55)); } /* Fenster endet unten hart (kein Auslaufen) */
.p-mail img { display: block; width: 100%; height: auto; }
.p-mail picture { display: block; }
/* Liste exakt über der leeren Nachrichtenspalte des Fensters (Koordinaten in % der Bildgröße 1980 × 1763, Fenster mit Unterkante) */
.p-mail-liste { position: absolute; left: 46.6%; right: 9.8%; top: 15.8%; bottom: 2.4%; margin: 0; padding: 0; list-style: none; overflow: hidden; }
.p-mail-liste ol, .p-mail-liste li { list-style: none; }
.p-mail-liste li { position: relative; padding: 2.4cqw 0 2.3cqw; border-bottom: 1px solid #e3e3e8; background: #fff; } /* = Hintergrund der Liste im Bild */
.p-mail-liste li::before { content: ""; position: absolute; left: -2.6cqw; top: 3.3cqw; width: 1.25cqw; height: 1.25cqw; border-radius: 50%; background: #0a84ff; transition: opacity .6s; }
.p-mail-liste li.gelesen::before { opacity: 0; }
.pm-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1cqw; }
.pm-kopf b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 2.45cqw; font-weight: 700; letter-spacing: -.01em; color: #1d1d1f; }
.pm-zeit { flex: none; font-size: 1.75cqw; color: #86868b; white-space: nowrap; }
.pm-betreff { display: flex; align-items: center; gap: 1cqw; margin-top: .45cqw; font-size: 2.25cqw; color: #1d1d1f; white-space: nowrap; overflow: hidden; }
.pm-betreff span:last-child { overflow: hidden; text-overflow: ellipsis; }
.pm-neu { flex: none; padding: .3cqw 1.05cqw; border-radius: 980px; background: #0a84ff; color: #fff; font-size: 1.55cqw; font-weight: 700; letter-spacing: .01em; transition: opacity .6s; }
.gelesen .pm-neu { display: none; }
.pm-text { margin-top: .4cqw; font-size: 2.05cqw; line-height: 1.35; color: #6e6e73; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p-mail-liste li.rein { animation: pmRein .8s var(--ease-out) both; }
@keyframes pmRein { from { opacity: 0; } }
.p-hero { position: relative; overflow: hidden; }
/* Hintergrund: Sternenhimmel, gespiegelt – das Licht fällt von rechts oben hinter das Postfach */
.p-hero-bg { position: absolute; inset: 0; z-index: 0; }
.p-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 20%; }
.p-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28%; z-index: 0; background: linear-gradient(transparent, #141416); pointer-events: none; } /* weicher Übergang zur Musteranfrage */
.p-hero > .wrap-wide { position: relative; z-index: 1; }
/* iPhone: vergrößerter Ausschnitt nur mit der Nachrichtenliste, damit die Mails lesbar bleiben */
/* iPhone: vergrößerter Ausschnitt nur mit der Nachrichtenliste, damit die Mails lesbar bleiben */
@media (max-width: 600px) { .p-mail { width: 175%; max-width: none; margin-left: -72%; } }
@media (max-width: 600px) { .p-hero-bg img { object-position: 35% 20%; } } /* iPhone: dunklerer Himmelsausschnitt, damit die grauen Texte lesbar bleiben (Lichtkegel nur noch am Rand) */
@media (max-width: 1000px) {
  .p-hero-grid { grid-template-columns: 1fr; }
  .p-hero-grid .p-h1 { font-size: min(calc((100vw - 44px) / 3.95), 120px); } /* Block füllt die Breite */
  .p-mail { max-width: 620px; margin-right: 0; }
}

.p-dark { background: var(--dark-2); color: var(--dark-ink); }
.p-dark .lead { color: #a1a1a6; }
.p-dark .sec-head .eyebrow { color: var(--dark-ink-2); }
/* Partner werden: reines Schwarz, damit das MacBook-Bild nahtlos übergeht */
.p-bewerben { background: #000; overflow: hidden; }
.p-lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.p-checks { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 14px; }
.p-checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; color: #e8e8ed; }
.p-checks svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--accent); }
@media (max-width: 900px) { .p-lead-grid { grid-template-columns: 1fr; } }

/* Musteranfrage: Mail auf dem MacBook-Display, zwei Spalten, wechselt zwischen Beispielen */
#anfrage { background: #141416; }
.monitor { position: relative; max-width: 1180px; margin: 0 auto; }
.monitor picture { display: block; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(transparent, #000 6%, #000 86%, transparent); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent) intersect, linear-gradient(transparent, #000 6%, #000 86%, transparent); }
.monitor img { display: block; width: 100%; height: auto; }
.monitor.macbook { max-width: 1000px; z-index: 3; } /* Zoom liegt über Headline und Häkchen */
.monitor.macbook picture { -webkit-mask: none; mask: none; }
/* Display im MacBook-Bild: x 10,05–89,9 %, y 6,5–91,4 %. Der Ausschnitt begrenzt die Mail beim Hereinschieben. */
.mac-clip { position: absolute; left: 10.05%; top: 6.5%; width: 79.85%; height: 84.9%; }
.mac-clip.zu { overflow: hidden; }
.monitor.macbook .mon-mail { left: 50%; top: 50%; width: 58.9%; will-change: transform, opacity; }
.lead-card.kopf .lc-titel { opacity: 1; transform: none; } /* Betreff steht schon beim Hereinschieben */
.lead-card.ohne .lc-titel, .lead-card.ohne .lc-rows > div { transition: none !important; }
#anfrage { overflow-x: clip; } /* wegfliegende Mail erzeugt kein seitliches Scrollen */
/* Mail mittig auf der Bildschirmfläche des Fotos (x 7,52–92,56 %, y 7,33–76,33 %) */
.mon-mail { position: absolute; left: 50.04%; top: 41.83%; width: 46%; transform: translate(-50%, -50%); container-type: inline-size; }
.lead-card { position: relative; border-radius: 3cqw; background: #fff; color: var(--ink); padding: 5.4cqw 6cqw 4.6cqw; box-shadow: 0 4cqw 10cqw rgba(0,0,0,.35); }
.lc-new { position: absolute; top: 0; right: 0; transform: translate(28%, -42%); padding: 1.5cqw 3.6cqw; border-radius: 980px; background: var(--blue); color: #fff; font-size: 3.8cqw; font-weight: 600; letter-spacing: -.01em; box-shadow: 0 1.4cqw 4cqw rgba(0,113,227,.4); }
.lead-card.go .lc-new { animation: lcPulse 2.4s 1.8s var(--ease) infinite; }
@keyframes lcPulse { 0%, 100% { box-shadow: 0 1.4cqw 4cqw rgba(0,113,227,.4), 0 0 0 0 rgba(0,113,227,.5); } 60% { box-shadow: 0 1.4cqw 4cqw rgba(0,113,227,.4), 0 0 0 2.6cqw rgba(0,113,227,0); } }
.lc-head { padding-bottom: 3.2cqw; border-bottom: 1px solid var(--line-soft); }
.lc-titel b { display: block; font-size: 6.8cqw; line-height: 1.05; letter-spacing: -.035em; }
.lc-titel span { display: block; margin-top: 1cqw; font-size: 3cqw; color: var(--ink-2); }
.lc-titel, .lc-rows > div { opacity: 0; transform: translateY(1.4cqw); transition: opacity .5s var(--ease), transform .6s var(--ease-out); }
.lead-card.go .lc-titel, .lead-card.go .lc-rows > div { opacity: 1; transform: none; }
.lc-rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: 5cqw; margin: 0; }
.lc-rows > div { position: relative; padding: 1.35cqw 0 1.35cqw 2.6cqw; border-bottom: 1px solid var(--line-soft); min-width: 0; }
/* kleiner schwarzer Aufzählungspunkt vor jeder Angabe, auf Höhe des Werts */
.lc-rows dt { line-height: 1.4; }
.lc-rows dd { line-height: 1.35; }
.lc-rows > div::before { content: ""; position: absolute; left: 0; top: calc(1.35cqw + 2.3cqw * 1.4 + .2cqw + 2.8cqw * 1.35 / 2 - .5cqw); width: 1cqw; height: 1cqw; border-radius: 50%; background: var(--ink); }
.lc-rows > div:nth-last-child(-n+2) { border-bottom: 0; }
.lc-rows dt { font-size: 2.3cqw; color: var(--ink-2); }
.lc-rows dd { margin: .2cqw 0 0; font-size: 2.8cqw; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-checks-row { grid-template-columns: repeat(4, 1fr); gap: 16px 24px; max-width: 1100px; margin: 40px auto 0; }
.p-checks-row li { font-size: 15px; }
@media (max-width: 900px) { .p-checks-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  /* Auf kleinen Bildschirmen wäre die Mail auf dem Monitor zu klein: Karte frei darstellen */
  .monitor picture { display: none; }
  .mac-clip { position: static; width: auto; height: auto; }
  .mon-mail, .monitor.macbook .mon-mail { position: static; width: auto; transform: none; container-type: normal; }
  .lead-card { border-radius: 22px; box-shadow: 0 30px 80px rgba(0,0,0,.45); padding: 26px 22px 18px; }
  .lc-head { padding-bottom: 16px; }
  .lc-new { transform: translate(10%, -45%); padding: 7px 15px; font-size: 15px; box-shadow: 0 6px 18px rgba(0,113,227,.4); }
  .lc-titel b { font-size: 28px; }
  .lc-titel span { margin-top: 3px; font-size: 13px; }
  .lc-rows { column-gap: 16px; }
  .lc-rows > div { padding: 9px 0 9px 13px; }
  .lc-rows > div::before { top: calc(9px + 12px * 1.4 + 2px + 13.5px * 1.35 / 2 - 2.5px); width: 5px; height: 5px; }
  .lc-rows dt { font-size: 12px; }
  .lc-rows dd { margin-top: 2px; font-size: 13.5px; white-space: normal; }
  .p-checks-row { grid-template-columns: 1fr; }
}

/* Vorteile */
.p-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.p-feat { padding: 30px 26px; border-radius: var(--r-lg); background: var(--bg-alt); }
.p-feat svg { width: 36px; height: 36px; color: var(--ink); }
.p-feat h3 { margin: 26px 0 8px; font-size: 21px; letter-spacing: -.02em; }
.p-feat p { margin: 0; color: var(--ink-2); font-size: 16px; }
@media (max-width: 1000px) { .p-feats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .p-feats { grid-template-columns: 1fr; } }

/* Preise */
.p-prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.p-price { position: relative; display: flex; flex-direction: column; padding: 34px 28px 28px; border-radius: var(--r-lg); background: #fff; }
.p-price:first-child { background: #e8f1fd; box-shadow: inset 0 0 0 1px rgba(81,81,84,.5); } /* empfohlen: hellblau mit zarter Kontur, wie die beste Wahl im Vergleich */
.p-tag { position: absolute; top: -13px; left: 28px; padding: 5px 12px; border-radius: 980px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 600; }
.p-price h3 { margin: 0; font-size: 24px; letter-spacing: -.02em; }
.p-amount { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 6px; }
.p-amount b { font-size: 56px; font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.p-amount span { font-size: 15px; color: var(--ink-2); }
.p-desc { margin: 0 0 20px; color: var(--ink-2); font-size: 15px; min-height: 2.9em; }
.p-price ul { list-style: none; margin: 0 0 26px; padding: 18px 0 0; border-top: 1px solid var(--line-soft); display: grid; gap: 11px; }
.p-price li { display: flex; gap: 10px; font-size: 15px; }
.p-price li svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--blue); }
.p-price .btn { margin-top: auto; }
.p-limit { max-width: 760px; margin: 34px auto 0; text-align: center; font-size: 15px; color: var(--ink-2); }
.p-limit b { color: var(--ink); }
@media (max-width: 900px) { .p-prices { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; gap: 26px; } }

/* Ablauf */
.p-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.p-steps li { padding: 30px 26px; border-radius: var(--r-lg); background: var(--bg-alt); }
.p-steps span { display: block; font-size: 56px; font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.p-steps h3 { margin: 20px 0 8px; font-size: 21px; letter-spacing: -.02em; }
.p-steps p { margin: 0; color: var(--ink-2); font-size: 16px; }
@media (max-width: 1000px) { .p-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .p-steps { grid-template-columns: 1fr; } }

/* Formular */
.p-form-wrap { max-width: 720px; }
.p-form { display: grid; gap: 12px; }
.p-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .p-row { grid-template-columns: 1fr; } }
.p-fld { position: relative; display: block; }
.p-fld input, .p-fld textarea {
  width: 100%; height: 60px; padding: 24px 18px 8px; border: 0; border-radius: 14px; outline: 0;
  background: #1c1c1e; color: #f5f5f7; font: inherit; font-size: 17px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); transition: box-shadow .2s;
}
.p-fld textarea { height: auto; min-height: 110px; padding-top: 28px; resize: vertical; }
.p-fld input:focus, .p-fld textarea:focus { box-shadow: inset 0 0 0 2px var(--blue); }
.p-fld span { position: absolute; left: 18px; top: 20px; font-size: 17px; color: #86868b; pointer-events: none; transition: top .2s var(--ease), font-size .2s; }
.p-fld input:focus + span, .p-fld input:not(:placeholder-shown) + span,
.p-fld textarea:focus + span, .p-fld textarea:not(:placeholder-shown) + span { top: 9px; font-size: 12px; }
.p-fld.err input { box-shadow: inset 0 0 0 2px #ff453a; }
.p-chips { border: 0; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.p-chips legend { padding: 0; margin-bottom: 10px; font-size: 14px; color: #a1a1a6; }
.p-chips label { cursor: pointer; }
.p-chips input { position: absolute; opacity: 0; pointer-events: none; }
.p-chips span { display: inline-block; padding: 10px 16px; border-radius: 980px; background: #1c1c1e; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); font-size: 15px; color: #e8e8ed; transition: background .2s, box-shadow .2s; }
.p-chips input:checked + span { background: var(--blue); box-shadow: none; color: #fff; }
.p-chips input:focus-visible + span { outline: 3px solid rgba(0,113,227,.6); outline-offset: 2px; }
.p-consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 10px; font-size: 13px; color: #a1a1a6; line-height: 1.45; cursor: pointer; }
.p-consent input { width: 20px; height: 20px; flex: none; accent-color: var(--blue); }
.p-consent.err { color: #ff8a80; }
.p-consent a { color: var(--link-dark); }
.p-form .btn { margin-top: 12px; justify-self: start; }
/* WhatsApp unter dem Formular: für Betriebe, die lieber kurz schreiben */
.p-wa { margin-top: 40px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.12); }
.p-wa p { margin: 0 0 16px; font-size: 17px; line-height: 1.45; color: var(--dark-ink-2); }
.p-wa p b { color: var(--dark-ink); font-weight: 600; }
.p-ok { padding: 28px; border-radius: 20px; background: #1c1c1e; text-align: center; }
.p-ok b { display: block; font-size: 24px; letter-spacing: -.02em; margin-bottom: 6px; }
.p-ok span { color: #a1a1a6; }
#pMsg .f-err { margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(255,69,58,.12); color: #ff8a80; font-size: 14px; }
.btn .spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Postfach im Hero: wächst beim Laden aus klein heraus und federt sanft nach (gedämpfte Feder, wie die Icons auf der Startseite, aber zurückhaltender, weil groß) */
/* startet erst, wenn die Grafik im Bild ist (Desktop sofort, iPhone beim Scrollen) */
.p-mail.wartet { opacity: 0; transform: scale(.3); }
.p-mail.ploppt { transform-origin: 50% 60%; animation: postfachPlopp 1.9s linear .25s both; will-change: transform; }
@media (max-width: 600px) { .p-mail.ploppt { transform-origin: 70% 40%; animation-delay: .1s; } }
@keyframes postfachPlopp {
  0.0% { opacity: 0; transform: scale(0.3101, 0.2899); }
  2.0% { opacity: 0.14; transform: scale(0.4374, 0.3963); }
  4.0% { opacity: 0.29; transform: scale(0.5646, 0.5047); }
  6.0% { opacity: 0.43; transform: scale(0.6813, 0.6116); }
  8.0% { opacity: 0.57; transform: scale(0.7810, 0.7140); }
  10.0% { opacity: 0.71; transform: scale(0.8609, 0.8091); }
  12.0% { opacity: 0.86; transform: scale(0.9216, 0.8939); }
  14.0% { transform: scale(0.9654, 0.9658); }
  16.0% { transform: scale(0.9962, 1.0226); }
  18.0% { transform: scale(1.0175, 1.0636); }
  20.0% { transform: scale(1.0324, 1.0892); }
  22.0% { transform: scale(1.0430, 1.1009); }
  24.0% { transform: scale(1.0506, 1.1012); }
  26.0% { transform: scale(1.0557, 1.0931); }
  28.0% { transform: scale(1.0586, 1.0796); }
  30.0% { transform: scale(1.0590, 1.0636); }
  32.0% { transform: scale(1.0570, 1.0473); }
  34.0% { transform: scale(1.0526, 1.0325); }
  36.0% { transform: scale(1.0462, 1.0202); }
  38.0% { transform: scale(1.0382, 1.0108); }
  40.0% { transform: scale(1.0292, 1.0045); }
  42.0% { transform: scale(1.0200, 1.0007); }
  44.0% { transform: scale(1.0111, 0.9990); }
  46.0% { transform: scale(1.0031, 0.9987); }
  48.0% { transform: scale(0.9966, 0.9992); }
  50.0% { transform: scale(0.9918, 0.9998); }
  52.0% { transform: scale(0.9888, 1.0003); }
  54.0% { transform: scale(0.9875, 1.0004); }
  56.0% { transform: scale(0.9877, 1.0000); }
  58.0% { transform: scale(0.9891, 0.9992); }
  60.0% { transform: scale(0.9912, 0.9982); }
  62.0% { transform: scale(0.9938, 0.9970); }
  64.0% { transform: scale(0.9963, 0.9960); }
  66.0% { transform: scale(0.9985, 0.9953); }
  68.0% { transform: scale(1.0003, 0.9950); }
  70.0% { transform: scale(1.0014, 0.9952); }
  72.0% { transform: scale(1.0020, 0.9958); }
  74.0% { transform: scale(1.0021, 0.9967); }
  76.0% { transform: scale(1.0017, 0.9978); }
  78.0% { transform: scale(1.0011, 0.9990); }
  80.0% { transform: scale(1.0005, 1.0001); }
  82.0% { transform: scale(0.9998, 1.0010); }
  84.0% { transform: scale(0.9993, 1.0016); }
  86.0% { transform: scale(0.9990, 1.0020); }
  88.0% { transform: scale(0.9989, 1.0020); }
  90.0% { transform: scale(0.9991, 1.0019); }
  92.0% { transform: scale(0.9993, 1.0015); }
  94.0% { transform: scale(0.9997, 1.0010); }
  96.0% { transform: scale(1.0001, 1.0005); }
  98.0% { transform: scale(1.0004, 1.0000); }
  100% { opacity: 1; transform: none; }
}