/* ============================================================
   product.css — Feature-Sektionen der Produkt-Unterseiten
   (ORGA/TECH/TEAM/LINK). Nutzt --ac (Akzentfarbe je App, auf <main>).
   Theme-aware: hell als Default, dunkel via [data-theme="dark"].
   ============================================================ */
.prodfeat{--pf-card:#ffffff;--pf-line:#e6ebf3;--pf-ink:#12152D;--pf-sub:#55607a}
:root[data-theme="dark"] .prodfeat{--pf-card:#141d33;--pf-line:rgba(255,255,255,.10);--pf-ink:#ffffff;--pf-sub:rgba(233,238,251,.68)}

.prodfeat .pf-lede{color:var(--pf-sub)}
.prodfeat .pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:2.2rem}
/* Vier Karten sollen in einer Reihe stehen; das Dreier-Raster liesse die
   vierte allein umbrechen. Ab 1100px vier Spalten, darunter greifen die
   Regeln weiter unten (zwei bzw. eine Spalte). */
@media(min-width:1100px){.prodfeat .pf-grid-4{grid-template-columns:repeat(4,1fr);gap:16px}}
@media(min-width:1100px){.prodfeat .pf-grid-4 .pf-card{padding:1.15rem 1.15rem 1.3rem}
  .prodfeat .pf-grid-4 .pf-card h3{font-size:1.02rem}
  .prodfeat .pf-grid-4 .pf-card p{font-size:.92rem}
  .prodfeat .pf-grid-4 .pf-card li{font-size:.88rem}}
.pf-card{background:var(--pf-card);border:1px solid var(--pf-line);border-top:3px solid var(--ac,#0D71EA);border-radius:18px;padding:26px 24px;box-shadow:0 1px 2px rgba(16,25,48,.04),0 16px 36px -24px rgba(16,25,48,.22);transition:transform .18s ease, box-shadow .18s ease}
.pf-card:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(16,25,48,.05),0 26px 48px -24px rgba(16,25,48,.3)}
.pf-card .pf-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb, var(--ac) 15%, transparent);color:var(--ac);margin-bottom:16px}
.pf-card .pf-ic svg{width:23px;height:23px}
.pf-card h3{font-size:1.14rem;color:var(--pf-ink);margin:0 0 10px;line-height:1.25;letter-spacing:-.01em}
.pf-card > p{color:var(--pf-sub);font-size:.97rem;line-height:1.5;margin:0}
.pf-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.pf-list li{display:flex;gap:10px;align-items:flex-start;font-size:.93rem;color:var(--pf-ink);font-weight:500;line-height:1.4}
.pf-list li svg{flex:none;margin-top:3px}

/* Prozess-Flow (nummerierte Schritte mit Verbindungspfeil) */
.pf-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:2.2rem}
.pf-step{position:relative;background:var(--pf-card);border:1px solid var(--pf-line);border-radius:16px;padding:26px 24px;box-shadow:0 1px 2px rgba(16,25,48,.04),0 14px 32px -24px rgba(16,25,48,.2)}
.pf-step .n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--ac);color:#fff;font-weight:800;font-size:.95rem;margin-bottom:14px;box-shadow:0 8px 20px -8px var(--ac)}
.pf-step h4{font-size:1.04rem;color:var(--pf-ink);margin:0 0 6px;letter-spacing:-.01em}
.pf-step p{color:var(--pf-sub);font-size:.92rem;line-height:1.45;margin:0}
.pf-step:not(:last-child)::after{content:"";position:absolute;right:-13px;top:44px;width:18px;height:18px;border-right:2px solid var(--ac);border-top:2px solid var(--ac);transform:rotate(45deg);opacity:.55}

@media(max-width:900px){
  .prodfeat .pf-grid,.pf-flow{grid-template-columns:1fr}
  .pf-step:not(:last-child)::after{display:none}
}
@media(min-width:901px) and (max-width:1100px){
  .prodfeat .pf-grid{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Kundenbenefits (reales Foto + Zitat + Vorteile) ---------- */
.pfben{--pf-card:#ffffff;--pf-line:#e6ebf3;--pf-ink:#12152D;--pf-sub:#55607a}
:root[data-theme="dark"] .pfben{--pf-card:#141d33;--pf-line:rgba(255,255,255,.10);--pf-ink:#ffffff;--pf-sub:rgba(233,238,251,.68)}
.pfben-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:46px;align-items:center;margin-top:2rem}
.pfben-media{display:flex;flex-direction:column;align-items:center;gap:20px}
.pfben-photo{width:min(90%,330px);aspect-ratio:1;border-radius:50%;object-fit:cover;border:5px solid var(--ac,#0D71EA);box-shadow:0 30px 60px -28px rgba(16,25,48,.55)}
.pfben-cap{font-size:.9rem;color:var(--pf-sub);font-weight:600;text-align:center;margin:-6px 0 0}
.pfben-quote{background:var(--pf-card);border:1px solid var(--pf-line);border-radius:16px;padding:22px 24px;box-shadow:0 1px 2px rgba(16,25,48,.04),0 16px 34px -24px rgba(16,25,48,.2);margin:0}
.pfben-quote blockquote{margin:0;font-size:1rem;line-height:1.55;color:var(--pf-ink)}
.pfben-quote figcaption{margin-top:12px;font-size:.86rem;color:var(--pf-sub)}
.pfben-quote figcaption strong{color:var(--pf-ink)}
.pfben-benes{list-style:none;margin:0;padding:0;display:grid;gap:15px}
.pfben-benes li{display:flex;gap:13px;align-items:flex-start;font-size:1.05rem;color:var(--pf-ink);font-weight:600;line-height:1.4}
.pfben-benes li svg{flex:none;margin-top:3px}
.pfben-benes li span{font-weight:400;color:var(--pf-sub)}
@media(max-width:900px){.pfben-grid{grid-template-columns:1fr;gap:28px}}

/* ---------- App-Hero: modernes Foto-Card-Treatment (Header) ---------- */
.apphero-photo-hero .apphero-row{display:grid;grid-template-columns:1.06fr .82fr;gap:48px;align-items:center}
.apphero .ah-photo{position:relative;justify-self:center;width:min(100%,384px)}
.apphero .ah-photo::before{content:"";position:absolute;inset:-12% -8% -16% -8%;z-index:0;border-radius:40px;background:radial-gradient(58% 58% at 55% 32%, color-mix(in srgb,var(--ac,#0D71EA) 42%, transparent), transparent 72%);filter:blur(34px);opacity:.75}
.apphero .ah-frame{position:relative;z-index:1;border-radius:26px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 44px 84px -34px rgba(16,25,48,.62),0 0 0 1px rgba(16,25,48,.05)}
.apphero .ah-frame img{width:100%;height:100%;object-fit:cover;display:block}
.apphero .ah-frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 52%,rgba(10,14,32,.58))}
.apphero .ah-badge{position:absolute;left:16px;bottom:16px;z-index:2;display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.94);backdrop-filter:saturate(160%) blur(8px);border-radius:15px;padding:8px 16px 8px 8px;box-shadow:0 14px 32px -12px rgba(0,0,0,.55)}
.apphero .ah-badge img{width:40px;height:40px;border-radius:11px}
.apphero .ah-badge b{font-size:14.5px;color:#12152D;display:block;line-height:1.15;font-weight:700}
.apphero .ah-badge span{font-size:11px;color:#5a647d;font-weight:600;letter-spacing:.02em}
@media(max-width:860px){
  .apphero-photo-hero .apphero-row{grid-template-columns:1fr;gap:26px}
  .apphero .ah-photo{grid-row:1;width:min(80%,300px);margin-inline:auto}
}

/* Kundenstimme mit Logo und Portraet — gleiche Anmutung wie die Karten
   auf der Startseite (2026-08-30) */
.pfben-quote .pfben-logo{display:block;height:26px;width:auto;margin:0 0 14px;
  opacity:.95}
.pfben-quote figcaption{display:flex;align-items:center;gap:12px}
.pfben-quote .pfben-face{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.14),0 6px 16px -8px rgba(0,0,0,.6)}
.pfben-quote figcaption span{display:flex;flex-direction:column;line-height:1.35}
.pfben-quote figcaption strong{display:block}
/* Das Brezen-Kolb-Logo enthaelt Bildmarke und Claim — bei 26px waere der
   Claim nicht mehr lesbar; die reinen Wortmarken bleiben bei 26px. */
.pfben-quote .pfben-logo[src*="brezen-kolb"]{height:36px}
/* Wo kein Portraet vorliegt, steht die Bildmarke des Kunden — heller
   Untergrund, damit die braune Zeichnung im dunklen Umfeld traegt. */
.pfben-quote .pfben-face-marke{background:#fff;object-fit:contain;padding:3px}