/* ===== Poggengerd UI components (ported from design-system React components) ===== */

/* ---- Button ---- */
.pg-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;width:auto;font-family:var(--font-body);font-weight:var(--fw-semibold);letter-spacing:.01em;line-height:1;border:var(--bw-medium) solid transparent;border-radius:var(--radius-sm);cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background var(--dur-fast),color var(--dur-fast)}
.pg-btn--full{width:100%}
.pg-btn__ic{display:inline-flex}
.pg-btn--sm{padding:.5rem .9rem;font-size:var(--fs-sm)}
.pg-btn--md{padding:.85rem 1.4rem;font-size:var(--fs-body)}
.pg-btn--lg{padding:1.05rem 1.9rem;font-size:1.0625rem}
.pg-btn--primary{background:var(--pg-yellow);color:var(--indigo-900);border-color:var(--pg-yellow)}
.pg-btn--primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-yellow);background:var(--yellow-400);border-color:var(--yellow-400)}
.pg-btn--indigo{background:var(--pg-indigo);color:var(--white);border-color:var(--pg-indigo)}
.pg-btn--indigo:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.pg-btn--ghost{background:transparent;color:var(--pg-indigo);border-color:var(--border-strong)}
.pg-btn--ghost:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);background:var(--pg-indigo);color:var(--white);border-color:var(--pg-indigo)}
.pg-btn--on-dark{background:transparent;color:var(--white);border-color:var(--border-on-dark)}
.pg-btn--on-dark:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);background:var(--pg-yellow);color:var(--indigo-900);border-color:var(--pg-yellow)}

/* ---- Badge ---- */
.pg-badge{display:inline-flex;align-items:center;gap:.45em;font-family:var(--font-mono);font-weight:var(--fw-medium);letter-spacing:var(--ls-label);text-transform:uppercase;border-radius:var(--radius-sm);line-height:1.1;white-space:nowrap;border:1px solid transparent;font-size:var(--fs-sm);padding:.4rem .8rem}
.pg-badge--sm{font-size:var(--fs-xs);padding:.25rem .6rem}
.pg-badge__ic{display:inline-flex;width:1em;height:1em}
.pg-badge--neutral{background:var(--steel-100);color:var(--steel-700)}
.pg-badge--indigo{background:var(--indigo-50);color:var(--pg-indigo);border-color:var(--indigo-200)}
.pg-badge--yellow{background:var(--yellow-100);color:var(--indigo-900);border-color:var(--yellow-500)}
.pg-badge--solid{background:var(--pg-indigo);color:var(--white)}
.pg-badge--outline{background:transparent;color:var(--pg-indigo);border-color:var(--border-strong)}
.pg-badge--on-dark{background:rgba(255,255,255,.08);color:var(--white);border-color:var(--border-on-dark)}

/* ---- Section heading ---- */
.pg-heading{display:flex;flex-direction:column;gap:var(--sp-4);align-items:flex-start;max-width:60ch}
.pg-heading--center{align-items:center;text-align:center;max-width:46ch;margin-inline:auto}
.pg-heading__title{font-size:var(--fs-h2);font-weight:var(--fw-bold);color:var(--text-strong);margin:0}
.pg-heading__lead{font-size:var(--fs-lead);line-height:var(--lh-normal);color:var(--text-body);margin:0}
.pg-heading--on-dark .pg-heading__title{color:var(--white)}
.pg-heading--on-dark .pg-heading__lead{color:var(--text-on-dark-dim)}

/* ---- Stat (count-up) ---- */
.pg-stat{display:flex;flex-direction:column;gap:var(--sp-2)}
.pg-stat__num{display:flex;align-items:baseline;gap:.08em;font-family:var(--font-display);font-weight:var(--fw-black);font-size:clamp(2.6rem,4vw,4rem);line-height:1;color:var(--white);letter-spacing:var(--ls-tight)}
.pg-stat__num .pre,.pg-stat__num .suf{color:var(--pg-yellow)}
.pg-stat__label{font-family:var(--font-mono);font-size:var(--fs-sm);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-on-dark-dim);max-width:22ch}

/* ---- Service card (Bereich) ---- */
.pg-card{position:relative;display:flex;flex-direction:column;height:100%;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);text-decoration:none;overflow:hidden;transition:transform var(--dur-med) var(--ease-out),box-shadow var(--dur-med) var(--ease-out),border-color var(--dur-med)}
.pg-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--indigo-300)}
.pg-card__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--indigo-950)}
.pg-card__img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform var(--dur-slow) var(--ease-out)}
.pg-card:hover .pg-card__img{transform:scale(1.07)}
.pg-card__ph{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(135deg,var(--indigo-800),var(--indigo-950));transition:transform var(--dur-slow) var(--ease-out)}
.pg-card:hover .pg-card__ph{transform:scale(1.07)}
.pg-card__ph::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:radial-gradient(120% 120% at 50% 40%,#000 55%,transparent 100%);mask-image:radial-gradient(120% 120% at 50% 40%,#000 55%,transparent 100%)}
.pg-card__ph .ic{position:relative;color:var(--yellow-500)}
.pg-card__ph em{position:absolute;bottom:10px;left:12px;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.45);text-transform:uppercase;font-style:normal}
.pg-card__index{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--indigo-900);background:var(--pg-yellow);padding:.2rem .5rem;border-radius:var(--radius-xs);letter-spacing:.06em}
.pg-card__bar{position:absolute;bottom:0;left:0;right:0;height:var(--bw-accent);background:var(--pg-yellow);transform:scaleX(0);transform-origin:left;z-index:2;transition:transform var(--dur-med) var(--ease-out)}
.pg-card:hover .pg-card__bar{transform:scaleX(1)}
.pg-card__body{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5);flex:1 1 auto}
.pg-card__title{font-size:var(--fs-h4);font-weight:var(--fw-bold);color:var(--text-strong);margin:0}
.pg-card__text{font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--text-body);margin:0}
.pg-card__more{margin-top:auto;display:inline-flex;align-items:center;gap:.45em;font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--pg-indigo)}
.pg-card__arrow{transition:transform var(--dur-med) var(--ease-out)}
.pg-card:hover .pg-card__arrow{transform:translate(4px,-4px)}

/* ---- Pillar + prose + benefit ---- */
.pg-pillar p{font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--text-body);margin:0}
.pg-prose{font-size:var(--fs-body);line-height:var(--lh-relaxed);color:var(--text-body);margin:0}
.pg-prose b,.pg-prose strong{color:var(--text-strong)}
.pg-benefit{display:flex;flex-direction:column;gap:var(--sp-3);border-top:2px solid var(--indigo-500);padding-top:var(--sp-4)}
.pg-benefit__title{font-size:var(--fs-h4);color:var(--white);margin:var(--sp-2) 0 0}
.pg-benefit__text{font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--text-on-dark-dim);margin:0}

/* ---- Floating contact rail ---- */
.pg-rail{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-2);align-items:flex-end;background:var(--pg-indigo);border-radius:var(--radius-md);border:1px solid var(--indigo-500);box-shadow:var(--shadow-lg)}
.pg-rail__item{display:flex;align-items:center;justify-content:flex-end;gap:0;text-decoration:none;transition:gap var(--dur-med) var(--ease-out)}
.pg-rail:hover .pg-rail__item{gap:var(--sp-3)}
.pg-rail__text{display:flex;flex-direction:column;line-height:1.2;align-items:flex-end;text-align:right;color:var(--white);max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width var(--dur-med) var(--ease-out),opacity var(--dur-fast) var(--ease-out)}
.pg-rail:hover .pg-rail__text{max-width:200px;opacity:1}
.pg-rail__label{font-family:var(--font-mono);font-size:.62rem;letter-spacing:var(--ls-label);text-transform:uppercase;opacity:.6}
.pg-rail__sub{font-size:var(--fs-sm);font-weight:var(--fw-semibold);overflow:hidden;text-overflow:ellipsis}
.pg-rail__icon{flex-shrink:0;width:46px;height:46px;border-radius:var(--radius-sm);display:grid;place-items:center;background:rgba(255,255,255,.08);color:var(--white);border:1px solid var(--border-on-dark)}
.pg-rail__item--accent .pg-rail__icon{background:var(--pg-yellow);color:var(--indigo-900);border:none}

/* ---- Contact section + form ---- */
.pg-contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:860px){.pg-contact__grid{grid-template-columns:1fr}}
.pg-contact__info{display:flex;flex-direction:column;gap:var(--sp-4)}
.pg-contact__list{list-style:none;padding:0;margin:var(--sp-3) 0 0;display:flex;flex-direction:column;gap:var(--sp-3)}
.pg-contact__list a{display:inline-flex;align-items:center;gap:var(--sp-3);color:var(--text-body);font-size:var(--fs-body)}
.pg-contact__list a:hover{color:var(--pg-indigo)}
.pg-contact__list .ic{color:var(--pg-indigo)}
.pg-form{display:flex;flex-direction:column;gap:var(--sp-4);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:clamp(1.5rem,3vw,2.5rem)}
.pg-form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
@media (max-width:560px){.pg-form__row{grid-template-columns:1fr}}
.pg-field{display:flex;flex-direction:column;gap:var(--sp-2)}
.pg-field label{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-strong)}
.pg-field .req{color:var(--pg-indigo)}
.pg-field input,.pg-field textarea{font:inherit;font-size:var(--fs-body);color:var(--text-strong);background:var(--surface-page);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:.75rem .9rem;transition:border-color var(--dur-fast),box-shadow var(--dur-fast);width:100%}
.pg-field input:focus,.pg-field textarea:focus{outline:none;border-color:var(--pg-indigo);box-shadow:0 0 0 3px rgba(44,42,122,.12)}
.pg-field textarea{min-height:140px;resize:vertical}
.pg-consent{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--text-body)}
.pg-consent input{margin-top:.2rem;flex:none;width:18px;height:18px;accent-color:var(--pg-indigo)}
.pg-consent a{color:var(--pg-indigo);text-decoration:underline}
.pg-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.pg-form__note{font-size:var(--fs-xs);color:var(--text-muted)}
.pg-alert{border-radius:var(--radius-sm);padding:var(--sp-4);font-size:var(--fs-sm);line-height:var(--lh-normal)}
.pg-alert--ok{background:var(--indigo-50);border:1px solid var(--indigo-200);color:var(--indigo-900)}
.pg-alert--err{background:#fdecec;border:1px solid #f5c2c2;color:#8a1f1f}


/* ---- Prose / content pages ---- */
.pg-prose p{margin:0 0 var(--sp-4)}.pg-prose p:last-child{margin-bottom:0}
.pg-content h2,.pg-content h3{font-family:var(--font-display);color:var(--text-strong);line-height:var(--lh-snug);letter-spacing:var(--ls-tight);margin:var(--sp-6) 0 var(--sp-3)}
.pg-content h2{font-size:var(--fs-h3)}.pg-content h3{font-size:var(--fs-h4)}
.pg-content a{color:var(--pg-indigo);text-decoration:underline}
.pg-content ul,.pg-content ol{margin:0 0 var(--sp-4) var(--sp-5)}.pg-content li{margin-bottom:var(--sp-2)}

/* ---- Dynamic form grid ---- */
.pg-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.pg-field--full{grid-column:1 / -1}
@media (max-width:560px){.pg-form__grid{grid-template-columns:1fr}}

/* ---- Form grid: 12-Spalten, responsiv ---- */
.pg-form__grid{grid-template-columns:repeat(12,1fr)}
.pg-form__grid > .pg-field{grid-column:span 6}
.pg-field--w3{grid-column:span 3}
.pg-field--w4{grid-column:span 4}
.pg-field--w6{grid-column:span 6}
.pg-field--w8{grid-column:span 8}
.pg-field--w9{grid-column:span 9}
.pg-field--w12{grid-column:span 12}
@media (max-width:900px){.pg-form__grid > .pg-field--w3,.pg-form__grid > .pg-field--w4{grid-column:span 6}.pg-form__grid > .pg-field--w8,.pg-form__grid > .pg-field--w9{grid-column:span 12}}
@media (max-width:560px){.pg-form__grid > .pg-field{grid-column:span 12 !important}}