/* werbung.css — „Werben auf Profingo“ (namespaced pfx-ads-*, konfliktarm)
   Brand: #1D1F20 (Black), #1294F2 (Blue), #2A9C8C (Teal)
*/

:root{
  --ads-black:#1D1F20;
  --ads-blue:#1294F2;
  --ads-teal:#1294F2;
  --ads-bg:#ffffff;
  --ads-muted:#6B7280;
  --ads-border:#E5E7EB;
  --ads-card:#F9FAFB;

  --ads-radius-xl:22px;
  --ads-radius:16px;
  --ads-radius-sm:12px;

  --ads-shadow:0 18px 40px rgba(0,0,0,.08);
  --ads-shadow-sm:0 10px 24px rgba(0,0,0,.06);
  --ads-shadow-xs:0 4px 12px rgba(0,0,0,.06);

  --ads-focus:0 0 0 3px rgba(18,148,242,.25);
  --ads-focus-strong:0 0 0 4px rgba(18,148,242,.35);
}

.pfx-ads-body{
  background:var(--ads-bg);
  color:var(--ads-black);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

.pfx-ads-container{
  width:min(1120px,92vw);
  margin-inline:auto;
}
.pfx-ads-section{
  padding:clamp(2.6rem, 2rem + 2vw, 4.6rem) 0;
}
.pfx-ads-h2{
  font-size:clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
  line-height:1.18;
  margin:0 0 1rem 0;
  letter-spacing:-.01em;
}

/* HERO */
.pfx-ads-hero{
  background:
    radial-gradient(1000px 420px at 85% -10%, rgba(18,148,242,.14), transparent 60%),
    radial-gradient(900px 520px at -10% 30%, rgba(42,156,140,.18), transparent 60%),
    linear-gradient(180deg,#fff 0%,#f7fafc 100%);
  border-bottom:1px solid var(--ads-border);
  overflow:clip;
}
.pfx-ads-hero__inner{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:1.4rem;
  align-items:center;
  padding:clamp(3.6rem, 6vw, 6rem) 0;
}
@media (max-width: 960px){
  .pfx-ads-hero__inner{ grid-template-columns:1fr; }
}
.pfx-ads-hero__text h1{
  font-size:clamp(2.1rem, 1.4rem + 2.6vw, 3.2rem);
  margin:0 0 .6rem 0; letter-spacing:-.02em;
}
.pfx-ads-hero__lead{
  max-width:60ch;
  color:var(--ads-muted);
  margin:0 0 1.2rem 0;
  font-size:clamp(1.05rem, .95rem + .5vw, 1.22rem);
}
.pfx-ads-actions{
  display:flex; gap:.9rem; flex-wrap:wrap;
}
.pfx-ads-hero__panel{
  background:#fff;
  border:1px solid var(--ads-border);
  border-radius:var(--ads-radius-xl);
  padding:1.1rem 1.1rem 1.2rem;
  box-shadow:var(--ads-shadow-sm);
  position:relative;
}
.pfx-ads-hero__badge{
  position:absolute; top:.9rem; right:.9rem;
  background:linear-gradient(180deg, var(--ads-teal), #248978);
  color:#fff; padding:.3rem .6rem; border-radius:999px;
  font-size:.78rem; font-weight:800; box-shadow:var(--ads-shadow-xs);
}
.pfx-ads-ticks{
  list-style:none; padding:0; margin:0; display:grid; gap:.55rem;
}
.pfx-ads-ticks li{
  padding-left:1.6rem; position:relative; font-weight:700;
}
.pfx-ads-ticks li::before{
  content:'';
  position:absolute; left:0; top:.28rem;
  width:12px; height:12px; border-radius:50%;
  background:var(--ads-teal);
  box-shadow:0 0 0 3px rgba(42,156,140,.16);
}

/* Buttons */
.pfx-ads-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 1.25rem; border-radius:999px; border:1px solid transparent;
  font-weight:800; text-decoration:none; box-shadow:var(--ads-shadow-xs);
  transition:transform .12s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease, opacity .25s ease;
  outline:none;
}
.pfx-ads-btn:hover{ transform:translateY(-1.5px); }
.pfx-ads-btn:active{ transform:translateY(0); }
.pfx-ads-btn:focus-visible{ box-shadow:var(--ads-focus-strong); }
.pfx-ads-btn[aria-disabled="true"]{ opacity:.6; pointer-events:none; }

.pfx-ads-btn--primary{
  background:linear-gradient(180deg, #1294F2, #0F83D5);
  color:#fff;
}
.pfx-ads-btn--primary:hover{ box-shadow:0 14px 32px rgba(18,148,242,.28); }

.pfx-ads-btn--ghost{
  background:#fff; border-color:var(--ads-border); color:var(--ads-black);
}
.pfx-ads-btn--outline{
  background:transparent; border-color:var(--ads-blue); color:var(--ads-blue);
}
.pfx-ads-btn--outline:hover{ background:rgba(18,148,242,.06); }

/* Grid & Boxen */
.pfx-ads-grid{ display:grid; gap:1.2rem; }
.pfx-ads-grid--2{ grid-template-columns:1.1fr .9fr; }
@media (max-width: 960px){ .pfx-ads-grid--2{ grid-template-columns:1fr; } }

.pfx-ads-box{
  background:#fff; border:1px solid var(--ads-border);
  border-radius:var(--ads-radius);
  padding:1.2rem;
  box-shadow:var(--ads-shadow-sm);
}
.pfx-ads-list{
  list-style:none; padding:0; margin:.6rem 0 0 0; display:grid; gap:.55rem;
}
.pfx-ads-stats{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.9rem;
}
@media (max-width: 640px){ .pfx-ads-stats{ grid-template-columns:1fr; } }
.pfx-ads-stat{
  background:#fff; border:1px solid var(--ads-border);
  border-radius:var(--ads-radius);
  padding:1rem .9rem; text-align:center;
  box-shadow:var(--ads-shadow-sm);
  transition:transform .15s ease, box-shadow .25s ease;
}
.pfx-ads-stat:hover{ transform:translateY(-2px); box-shadow:var(--ads-shadow); }
.pfx-ads-stat__num{ display:block; font-weight:900; font-size:1.15rem; margin-bottom:.2rem; }
.pfx-ads-stat__txt{ color:var(--ads-muted); }

/* Karten / Platzierungen */
.pfx-ads-cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1rem;
}
@media (max-width: 1200px){ .pfx-ads-cards{ grid-template-columns:1fr 1fr; } }
@media (max-width: 720px){ .pfx-ads-cards{ grid-template-columns:1fr; } }

.pfx-ads-card{
  background:#fff; border:1px solid var(--ads-border);
  border-radius:var(--ads-radius);
  overflow:clip; box-shadow:var(--ads-shadow-sm);
  transition:transform .18s ease, box-shadow .25s ease, border-color .25s ease;
}
.pfx-ads-card:hover{ transform:translateY(-3px); box-shadow:var(--ads-shadow); }
.pfx-ads-card__media{
  height:150px; background:var(--ads-card); display:grid; place-items:center;
  border-bottom:1px solid var(--ads-border);
}
.pfx-ads-card__body{ padding:1rem 1rem 1.1rem; }
.pfx-ads-card h3{ margin:.1rem 0 .4rem 0; font-size:1.08rem; letter-spacing:-.01em; }
.pfx-ads-meta{
  list-style:none; padding:0; margin:.7rem 0 0 0; display:flex; gap:.6rem; flex-wrap:wrap;
}
.pfx-ads-meta li{
  padding:.35rem .6rem; border:1px solid var(--ads-border); border-radius:999px; font-size:.86rem; color:var(--ads-muted);
}

/* Skeletons (Bildplatzhalter) */
.pfx-ads-skeleton{
  width:100%; height:100%; display:grid; place-items:center;
  color:#0b4b44; font-weight:800; letter-spacing:.02em;
  background:
    linear-gradient(100deg, rgba(255,255,255,.0) 40%, rgba(255,255,255,.45) 50%, rgba(255,255,255,.0) 60%),
    linear-gradient(180deg, rgba(42,156,140,.15), rgba(18,148,242,.12));
  background-size:200% 100%, 100% 100%;
  animation:pfx-ads-shimmer 2.5s infinite linear;
  border-bottom:1px solid var(--ads-border);
}
.pfx-ads-skeleton--banner{ background:
    linear-gradient(100deg, rgba(255,255,255,.0) 40%, rgba(255,255,255,.45) 50%, rgba(255,255,255,.0) 60%),
    linear-gradient(180deg, rgba(18,148,242,.15), rgba(42,156,140,.12)); }
@keyframes pfx-ads-shimmer{
  0%{ background-position:200% 0, 0 0; }
  100%{ background-position:-200% 0, 0 0; }
}
.pfx-ads-note{ margin-top:.7rem; color:var(--ads-muted); }

/* Pakete */
.pfx-ads-section--tinted{
  background:linear-gradient(180deg,#ffffff 0%, #f7fafc 100%);
  border-top:1px solid var(--ads-border);
  border-bottom:1px solid var(--ads-border);
}
.pfx-ads-packgrid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem;
}
@media (max-width: 1200px){ .pfx-ads-packgrid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 720px){ .pfx-ads-packgrid{ grid-template-columns:1fr; } }

.pfx-ads-pack{
  background:#fff; border:1px solid var(--ads-border);
  border-radius:var(--ads-radius);
  padding:1.2rem; box-shadow:var(--ads-shadow-sm);
  display:grid; gap:.9rem;
}
.pfx-ads-pack--focus{
  border-color:transparent;
  background:
    radial-gradient(900px 400px at -10% 120%, rgba(18,148,242,.08), transparent 60%),
    radial-gradient(900px 400px at 110% -20%, rgba(42,156,140,.08), transparent 60%),
    #ffffff;
  box-shadow:var(--ads-shadow);
}
.pfx-ads-pack header h3{ margin:0 0 .2rem 0; }
.pfx-ads-pack__price{ margin:.2rem 0 0 0; font-weight:900; font-size:1.05rem; }
.pfx-ads-pack ul{ list-style:none; padding:0; margin:0; display:grid; gap:.4rem; }

.pfx-ads-fineprint{
  color:var(--ads-muted);
  margin-top:.9rem;
}

/* FAQ / Accordion */
.pfx-ads-accordion{ display:grid; gap:.9rem; }
.pfx-ads-details{
  background:#fff; border:1px solid var(--ads-border);
  border-radius:var(--ads-radius);
  box-shadow:var(--ads-shadow-sm);
  overflow:clip;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.pfx-ads-summary{
  cursor:pointer; list-style:none; padding:1.1rem 1.1rem; font-weight:900; position:relative;
}
.pfx-ads-summary::-webkit-details-marker{ display:none; }
.pfx-ads-summary::after{
  content:'+';
  position:absolute; right:1rem; top:50%; transform:translateY(-50%); color:var(--ads-muted); font-weight:900;
}
.pfx-ads-details[open] .pfx-ads-summary::after{ content:'–'; }
.pfx-ads-details__content{
  padding:.25rem 1.1rem 1.1rem;
  border-top:1px solid var(--ads-border);
  animation:pfx-ads-fade .22s ease;
}
@keyframes pfx-ads-fade{ from{ opacity:.9; transform:translateY(-2px);} to{ opacity:1; transform:translateY(0);} }

/* CTA */
.pfx-ads-cta{
  background:
    radial-gradient(900px 400px at -10% 120%, rgba(18,148,242,.12), transparent 60%),
    radial-gradient(900px 400px at 110% -20%, rgba(42,156,140,.12), transparent 60%),
    #ffffff;
  border-top:1px solid var(--ads-border);
}
.pfx-ads-cta__inner{
  display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:center;
}
@media (max-width: 820px){ .pfx-ads-cta__inner{ grid-template-columns:1fr; text-align:center; } }
.pfx-ads-cta__actions{ display:flex; gap:.9rem; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width: 820px){ .pfx-ads-cta__actions{ justify-content:center; } }

/* Utilities */
.pfx-ads-section a:not(.pfx-ads-btn){
  color:var(--ads-blue); text-decoration:none; font-weight:600;
}
.pfx-ads-section a:not(.pfx-ads-btn):hover{ text-decoration:underline; }

/* Dark Mode (auto) */
@media (prefers-color-scheme: dark){
  :root{
    --ads-border:#1f242a; --ads-card:#14181c; --ads-muted:#9aa6b2;
    --ads-shadow:0 18px 40px rgba(0,0,0,.5);
    --ads-shadow-sm:0 10px 24px rgba(0,0,0,.45);
    --ads-shadow-xs:0 4px 12px rgba(0,0,0,.4);
  }
  .pfx-ads-body{ background:#0f1214; color:#f2f5f7; }
  .pfx-ads-section a:not(.pfx-ads-btn){ color:#7cc3ff; }
  .pfx-ads-hero,
  .pfx-ads-section--tinted{ border-color:#1f242a; }
  .pfx-ads-hero__panel,
  .pfx-ads-box,
  .pfx-ads-stat,
  .pfx-ads-card,
  .pfx-ads-pack,
  .pfx-ads-details{ background:#12161a; }
  .pfx-ads-btn--ghost{ background:#0f1214; color:#f2f5f7; border-color:#1f242a; }
  .pfx-ads-btn--outline{ border-color:#2999ff; color:#bfe2ff; }
}
/* Footer soll nie die Ads-Textfarbe erben */
.pfx-ads-body footer,
.pfx-ads-body .site-footer { color:#fff; }

.pfx-ads-body footer a,
.pfx-ads-body .site-footer a { color:#fff; }