/* ==============================
   Was wir tun – Styles (noch bunter + mehr Layouts)
   Pfad: pages/was-wir-tun/was-wir-tun.css
   Hinweis: Vollständige Datei
   ============================== */

:root{
  --wwt-blue: rgba(0,140,255,.92);
  --wwt-violet: rgba(170,80,255,.92);
  --wwt-teal: rgba(0,220,190,.92);
  --wwt-amber: rgba(255,170,0,.92);
  --wwt-pink: rgba(255,70,170,.92);
  --wwt-lime: rgba(160,255,80,.86);

  --wwt-border: rgba(255,255,255,.10);
  --wwt-soft: rgba(255,255,255,.05);
  --wwt-muted: var(--text-muted, rgba(255,255,255,.72));
  --wwt-shadow: 0 12px 30px rgba(0,0,0,.22);
}

.wwt-page{width:100%}
.muted{color:var(--wwt-muted)}

.btn.btn-ghost{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:var(--text,#fff);
}
.btn.btn-ghost:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(0,140,255,.28);
}

.pill{
  font-size:.85rem;padding:.28rem .6rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  color:var(--text,#fff);
  display:inline-flex;align-items:center;gap:.45rem;
  background:rgba(255,255,255,.06);
}
.p-blue{border-color:rgba(0,140,255,.28);background:linear-gradient(135deg, rgba(0,140,255,.14), rgba(255,255,255,.04))}
.p-teal{border-color:rgba(0,220,190,.28);background:linear-gradient(135deg, rgba(0,220,190,.14), rgba(255,255,255,.04))}
.p-violet{border-color:rgba(170,80,255,.28);background:linear-gradient(135deg, rgba(170,80,255,.14), rgba(255,255,255,.04))}
.p-amber{border-color:rgba(255,170,0,.28);background:linear-gradient(135deg, rgba(255,170,0,.14), rgba(255,255,255,.04))}
.p-pink{border-color:rgba(255,70,170,.28);background:linear-gradient(135deg, rgba(255,70,170,.14), rgba(255,255,255,.04))}
.p-lime{border-color:rgba(160,255,80,.24);background:linear-gradient(135deg, rgba(160,255,80,.12), rgba(255,255,255,.04))}
.p-rainbow{
  border-color:rgba(255,255,255,.16);
  background:linear-gradient(135deg, rgba(0,140,255,.14), rgba(170,80,255,.12), rgba(0,220,190,.10), rgba(255,170,0,.10), rgba(255,70,170,.10));
}

.card{
  border-radius:18px;
  border:1px solid var(--wwt-border);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  overflow:hidden;
  background:var(--wwt-soft);
  backdrop-filter:saturate(120%) blur(8px);
}
.card-grad{
  background:
    radial-gradient(860px 520px at 12% 18%, rgba(0,140,255,.18), transparent 55%),
    radial-gradient(760px 480px at 86% 14%, rgba(170,80,255,.14), transparent 55%),
    radial-gradient(760px 520px at 74% 86%, rgba(0,220,190,.12), transparent 55%),
    radial-gradient(820px 520px at 18% 88%, rgba(255,170,0,.10), transparent 60%),
    radial-gradient(760px 520px at 92% 74%, rgba(255,70,170,.08), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,0,0,.08));
}
.card-head{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:1rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.10)
}
.card-head h2{font-size:1.08rem;margin:0;letter-spacing:.15px}
.card-body{padding:1rem 1.1rem 1.1rem}
.card-body h3{margin:.1rem 0 .55rem;font-size:1.12rem}
.card-body p{margin:0 0 .9rem;line-height:1.65}

/* Hero */
.wwt-hero{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  border:1px solid var(--wwt-border);
  box-shadow:0 16px 44px rgba(0,0,0,.34);
  margin:0 0 1.25rem;
}
.wwt-hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(980px 580px at 16% 18%, rgba(0,140,255,.36), transparent 55%),
    radial-gradient(820px 560px at 84% 12%, rgba(170,80,255,.28), transparent 55%),
    radial-gradient(900px 560px at 74% 88%, rgba(0,220,190,.22), transparent 55%),
    radial-gradient(820px 520px at 18% 88%, rgba(255,170,0,.16), transparent 60%),
    radial-gradient(920px 520px at 92% 76%, rgba(255,70,170,.12), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,0,0,.26)),
    url("/media/was-wir-tun/hero.jpg");
  background-size:cover;
  background-position:center;
  filter:saturate(118%) contrast(103%);
}
.wwt-hero-inner{
  position:relative;
  padding:1.25rem 1.2rem;
  display:grid;
  grid-template-columns:1.35fr .95fr;
  gap:1.1rem;
  align-items:stretch;
  min-height:400px;
}
.wwt-hero-content{
  background:rgba(0,0,0,.46);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:1.05rem 1.05rem 1.1rem;
  backdrop-filter: blur(10px);
  align-self:end;
}
.wwt-kicker{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.9rem;
  padding:.25rem .6rem;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(0,140,255,.20), rgba(255,70,170,.10), rgba(170,80,255,.14));
  border:1px solid rgba(0,140,255,.24);
  margin-bottom:.7rem
}
.wwt-hero h1{margin:0 0 .5rem;font-size:1.95rem;letter-spacing:.2px}
.wwt-hero p{margin:0 0 .95rem;line-height:1.65}
.wwt-hero-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin:.35rem 0 .95rem}
.wwt-hero-actions .btn{display:inline-flex;align-items:center;gap:.5rem}
.wwt-hero-badges{display:flex;gap:.55rem;flex-wrap:wrap}

.wwt-hero-gallery{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  grid-template-rows:repeat(6, 1fr);
  gap:.65rem;
  align-self:stretch;
}
.wwt-hero-gallery .tile{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.10);
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.wwt-hero-gallery img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(125%)}
.tile.t1{grid-column:1/4;grid-row:1/4}
.tile.t2{grid-column:4/7;grid-row:1/3}
.tile.t3{grid-column:4/7;grid-row:3/5}
.tile.t4{grid-column:1/4;grid-row:4/7}

/* Facts row */
.wwt-facts{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1rem;
  margin:0 0 1.25rem;
}
.fact{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.12);
  padding:.95rem .95rem;
  display:flex;gap:.85rem;align-items:flex-start;
  box-shadow:var(--wwt-shadow);
}
.fact-ico{
  width:44px;height:44px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
}
.fact-title{font-weight:650;margin-bottom:.15rem}
.f-blue .fact-ico{background:rgba(0,140,255,.12);border-color:rgba(0,140,255,.22)}
.f-teal .fact-ico{background:rgba(0,220,190,.12);border-color:rgba(0,220,190,.22)}
.f-violet .fact-ico{background:rgba(170,80,255,.12);border-color:rgba(170,80,255,.22)}
.f-amber .fact-ico{background:rgba(255,170,0,.12);border-color:rgba(255,170,0,.22)}

/* Intro split */
.wwt-intro{margin-bottom:1.25rem}
.wwt-split{
  display:grid;
  grid-template-columns:1.2fr .9fr;
  gap:1.25rem;
  margin-top:1rem;
}
.wwt-bullets{list-style:none;padding:0;margin:.2rem 0 0;display:flex;flex-direction:column;gap:.45rem}
.wwt-bullets li{display:flex;gap:.55rem;align-items:flex-start}
.wwt-bullets i{margin-top:.15rem;color:var(--wwt-teal)}
.wwt-split-media{
  display:grid;
  grid-template-columns:1fr;
  gap:.85rem;
}
.wwt-split-media img{
  width:100%;height:190px;
  border-radius:18px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.10);
  box-shadow:var(--wwt-shadow);
}

/* Sections */
.wwt-sections{display:flex;flex-direction:column;gap:1.25rem;margin:0 0 1.25rem}
.wwt-section{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:1.25rem;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(0,0,0,.12));
  box-shadow:0 14px 36px rgba(0,0,0,.28);
}
.wwt-section.reverse{grid-template-columns:1fr 1.05fr}
.wwt-section.reverse .wwt-section-media{order:2}
.wwt-section-media{
  padding:1rem;
  display:flex;
  flex-direction:column;
  gap:.85rem;
}
.wwt-section-media img{
  width:100%;
  border-radius:18px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.10);
}
.wwt-section-media img.main{height:260px;box-shadow:0 12px 28px rgba(0,0,0,.26)}
.wwt-section-media .mini{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.85rem;
}
.wwt-section-media .mini img{height:150px}

.wwt-section-text{padding:1.05rem 1.1rem 1.1rem}
.wwt-section-text h2{margin:.4rem 0 .55rem;font-size:1.35rem}
.wwt-section-text p{margin:0 0 .85rem;line-height:1.68}

.tag{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.28rem .65rem;
  border-radius:999px;
  font-size:.9rem;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
}
.t-blue{border-color:rgba(0,140,255,.26);background:rgba(0,140,255,.10)}
.t-teal{border-color:rgba(0,220,190,.26);background:rgba(0,220,190,.10)}
.t-violet{border-color:rgba(170,80,255,.26);background:rgba(170,80,255,.10)}
.t-amber{border-color:rgba(255,170,0,.26);background:rgba(255,170,0,.10)}
.t-rainbow{
  border-color:rgba(255,255,255,.16);
  background:linear-gradient(135deg, rgba(0,140,255,.12), rgba(170,80,255,.10), rgba(0,220,190,.08), rgba(255,170,0,.08), rgba(255,70,170,.08));
}

.wwt-featuregrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:.75rem;
  margin:.2rem 0 1rem;
}
.feat{
  display:flex;align-items:center;gap:.6rem;
  padding:.65rem .7rem;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,0,0,.10));
}
.s-blue .feat i{color:var(--wwt-blue)}
.s-teal .feat i{color:var(--wwt-teal)}
.s-violet .feat i{color:var(--wwt-violet)}
.s-amber .feat i{color:var(--wwt-amber)}

/* Workshops panels */
.wwt-workshops{margin:0 0 1.25rem}
.wwt-two{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1rem;
  margin-top:.25rem;
}
.wwt-panel{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  padding:.9rem .95rem;
  background:rgba(0,0,0,.12);
  box-shadow:var(--wwt-shadow);
}
.wwt-panel h3{margin:.05rem 0 .35rem;font-size:1.05rem;display:flex;gap:.55rem;align-items:center}
.p1{border-color:rgba(255,70,170,.18);background:linear-gradient(135deg, rgba(255,70,170,.10), rgba(0,0,0,.12))}
.p2{border-color:rgba(0,220,190,.18);background:linear-gradient(135deg, rgba(0,220,190,.10), rgba(0,0,0,.12))}
.p3{border-color:rgba(170,80,255,.18);background:linear-gradient(135deg, rgba(170,80,255,.10), rgba(0,0,0,.12))}
.p4{border-color:rgba(255,170,0,.18);background:linear-gradient(135deg, rgba(255,170,0,.10), rgba(0,0,0,.12))}

/* FAQ */
.wwt-faq{margin:0 0 1.25rem}
.wwt-accordion{display:flex;flex-direction:column;gap:.75rem}
.qa{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.12);
  padding:.8rem .9rem;
  box-shadow:var(--wwt-shadow);
}
.qa summary{cursor:pointer;font-weight:650;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"＋";float:right;opacity:.9}
.qa[open] summary::after{content:"–"}
.qa > div{margin-top:.6rem;line-height:1.6}

/* Onboarding */
.wwt-onboarding{margin:0 0 1.25rem}
.wwt-steps{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1rem;
  margin:.25rem 0 1rem;
}
.step{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.12);
  padding:.9rem .95rem;
  box-shadow:var(--wwt-shadow);
}
.step-no{
  width:34px;height:34px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  margin-bottom:.6rem;
  font-weight:700;
}
.s1 .step-no{background:rgba(0,140,255,.14);border-color:rgba(0,140,255,.22)}
.s2 .step-no{background:rgba(0,220,190,.14);border-color:rgba(0,220,190,.22)}
.s3 .step-no{background:rgba(170,80,255,.14);border-color:rgba(170,80,255,.22)}
.s4 .step-no{background:rgba(255,170,0,.14);border-color:rgba(255,170,0,.22)}
.step h3{margin:.1rem 0 .35rem;font-size:1.05rem}

.wwt-cta{
  display:flex;gap:1rem;align-items:center;justify-content:space-between;
  padding:.9rem .95rem;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(135deg, rgba(0,140,255,.10), rgba(170,80,255,.08), rgba(0,220,190,.08), rgba(255,170,0,.06), rgba(255,70,170,.06));
}
.wwt-cta-text h3{margin:.05rem 0 .25rem;font-size:1.15rem}
.wwt-cta-text p{margin:0}
.wwt-cta-actions{display:flex;gap:.75rem;flex-wrap:wrap}

.wwt-note{margin-top:.85rem;font-size:.92rem}

/* Strip */
.wwt-strip{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:.75rem;
  margin:0 0 1.25rem;
}
.wwt-strip img{
  width:100%;
  height:140px;
  object-fit:cover;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.10);
  box-shadow:var(--wwt-shadow);
  filter:saturate(118%);
}

/* Image list chips */
.wwt-images{margin:0 0 .15rem}
.wwt-image-list{display:flex;flex-wrap:wrap;gap:.6rem}
.imgtag{
  font-size:.92rem;
  padding:.42rem .6rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
}
.t-rainbow{border-color:rgba(255,255,255,.16);background:linear-gradient(135deg, rgba(0,140,255,.10), rgba(170,80,255,.08), rgba(0,220,190,.06), rgba(255,170,0,.06), rgba(255,70,170,.06))}

/* Responsive */
@media (max-width:1100px){
  .wwt-hero-inner{grid-template-columns:1fr}
  .wwt-hero-gallery{grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(4,1fr)}
  .tile.t1{grid-column:1/5;grid-row:1/3}
  .tile.t2{grid-column:5/9;grid-row:1/3}
  .tile.t3{grid-column:1/5;grid-row:3/5}
  .tile.t4{grid-column:5/9;grid-row:3/5}
}
@media (max-width:980px){
  .wwt-facts{grid-template-columns:repeat(2, minmax(0,1fr))}
  .wwt-split{grid-template-columns:1fr}
  .wwt-section,.wwt-section.reverse{grid-template-columns:1fr}
  .wwt-section.reverse .wwt-section-media{order:0}
  .wwt-steps{grid-template-columns:repeat(2, minmax(0,1fr))}
  .wwt-strip{grid-template-columns:repeat(3, minmax(0,1fr))}
  .wwt-two{grid-template-columns:1fr}
}
@media (max-width:680px){
  .wwt-hero h1{font-size:1.55rem}
  .wwt-hero-inner{padding:1rem}
  .wwt-strip{grid-template-columns:repeat(2, minmax(0,1fr))}
  .wwt-strip img{height:120px}
  .wwt-steps{grid-template-columns:1fr}
  .wwt-section-media img.main{height:220px}
  .wwt-section-media .mini img{height:130px}
}