/* ==========================================================================
   medienkompetenz.school – Design 2026 („ruhig & cool“)
   Ebene über main.css: weniger Flächen, eine Kartenart, eingefärbte
   Kopfbilder, Projekte als Social-Media-Posts, Spirale nur im Logo.
   ========================================================================== */
:root{--duo-dark:#1A0F3D;--duo-light:#9A8EF8;--r-post:18px}

/* ---------- Typo & Grundton ---------- */
.eyebrow{font-size:var(--s-s);font-weight:400;letter-spacing:0;text-transform:none;color:var(--text-leise)}
.eyebrow::before{display:none}
.h2 em,.head h2 em,.split h2 em,.prose h2 em,.stack h2 em{font-style:normal;color:inherit}
.kicker{font-size:var(--s-s);color:var(--text-leise)}
.section--gruen{background:var(--lila-50)}
.mt-1 + .feed,.feed + .btns{margin-top:2rem}

/* ---------- Header ---------- */
.site-header{border-bottom:1px solid var(--linie)}
.nav .cta a{background:var(--gruen);color:#fff;font-weight:700;font-size:1.1875rem;padding:.8rem 1.35rem}
.nav .cta a:hover,.nav .cta a[aria-current="page"]{background:#7FA63A;color:#fff}

/* ---------- Buttons ---------- */
.btn{box-shadow:none}
.btn:hover{transform:none}
.btn--primary{box-shadow:none}
.btn--primary:hover{background:#5747DA}
.btn--ghost{background:transparent}

/* ---------- Eingefärbtes Bild (Duoton in den Markenfarben) ---------- */
.has-img{position:relative;isolation:isolate;color:#fff;background:var(--duo-dark)}
.duo{position:absolute;inset:0;z-index:-2;background:var(--duo-light);overflow:hidden}
.duo img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 40%;filter:grayscale(1) contrast(1.12);mix-blend-mode:multiply}
.duo::after{content:"";position:absolute;inset:0;background:var(--duo-dark);mix-blend-mode:lighten}
.has-img::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(26,15,61,.93) 0%,rgba(26,15,61,.74) 40%,rgba(26,15,61,.18) 78%,rgba(26,15,61,0) 100%)}
.has-img h1,.has-img h2{color:#fff}
.has-img h1 em{color:#B6ADFB}
.has-img .lead,.has-img p{color:#E4E0FA}
.has-img .kicker,.has-img .note,.has-img .crumbs,.has-img .crumbs span{color:#CFC8F7}
.has-img .crumbs a{color:#fff}
.has-img .btn--ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.has-img .btn--ghost:hover{border-color:#fff}
@media (max-width:860px){.has-img::before{background:linear-gradient(180deg,rgba(26,15,61,.9) 0%,rgba(26,15,61,.72) 60%,rgba(26,15,61,.4) 100%)}}

/* ---------- Startseiten-Kopf ---------- */
.hero-x{padding-block:clamp(6rem,14vw,11rem) clamp(5rem,11vw,8.5rem)}
.hero-x:not(.has-img){background:var(--lila-50)}
.hero-x-text{display:grid;gap:1.6rem;justify-items:start;max-width:40rem}
.hero-x h1,.hero-p h1{font-size:clamp(2.7rem,6vw,4.75rem);line-height:1.04;max-width:13ch;margin:0}
.hero-x .lead,.hero-p .lead{max-width:31rem;margin:0}
.hero-x .note,.hero-p .note{font-size:var(--s-s);color:var(--text-leise);margin:0}
.hero-x.has-img .note,.hero-x.has-img .kicker{color:#CFC8F7}
.hero-p{padding-block:clamp(3rem,7vw,6rem)}
.hero-p .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
.hero-post{max-width:25rem;justify-self:center;width:100%;transform:rotate(1.5deg);box-shadow:0 30px 60px -30px rgba(43,27,92,.45)}
.hero-post:hover{transform:rotate(0)}
@media (max-width:860px){.hero-p .wrap{grid-template-columns:1fr}.hero-x{padding-block:4.5rem 4rem}}

/* ---------- Seitenkopf ---------- */
.page-hero{background:var(--lila-50);padding-block:clamp(2.75rem,6vw,4.5rem) clamp(3rem,7vw,5rem)}
.page-hero .wrap{display:grid;grid-template-columns:none;gap:1.3rem;justify-items:start}
.page-hero.has-img{background:var(--duo-dark);padding-block:clamp(3rem,7vw,5.5rem) clamp(3.5rem,8vw,6rem)}
.page-hero h1{font-size:clamp(2.4rem,5.2vw,4rem);max-width:16ch;margin:0}
.page-hero .lead{margin:0;max-width:36rem}
.page-hero .btns{margin:.4rem 0 0}
.page-hero .kicker{margin:0}
.page-hero .deco{display:none}
.pills-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:0}
.pills-row span{font-size:var(--s-xs);font-weight:500;padding:.4rem .75rem;border-radius:var(--pill);background:#fff;color:var(--deep)}
.has-img .pills-row span{background:rgba(255,255,255,.14);color:#fff}

/* ---------- Für wen? + Logos ---------- */
.finder{background:transparent;box-shadow:none;border-radius:0;padding:2rem 0 0;border-top:1px solid var(--linie);margin-top:clamp(2.5rem,5vw,3.5rem)}
.hero-x + .wrap .finder,.hero-p + .wrap .finder{border-top:0;padding-top:0}
.finder h2{font-size:var(--s-xl)}
.finder-opt{background:#fff!important;color:var(--deep)!important;border:1px solid var(--linie);border-radius:var(--r-m);justify-content:space-between;box-shadow:none!important;transform:none!important}
.finder-opt:hover{border-color:var(--lila);background:var(--lila-50)!important}
.finder-opt .ic{display:none}
.finder-opt::after{content:"→";color:var(--lila-text);font-weight:500}
.logos{padding-block:2rem 0}
.logos .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem 2.5rem}
.logos p{font-size:var(--s-s);font-weight:400;letter-spacing:0;text-transform:none}
.logos ul{gap:1.25rem 2.5rem}
.logos img{height:1.9rem;opacity:.55;filter:grayscale(1)}

/* ---------- Modulkarten (eine Kartenart) ---------- */
.mk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.mk[hidden]{display:none}
.mk > a{display:grid;grid-template-rows:auto auto 1fr auto;gap:.6rem;height:100%;padding:1.6rem;background:#fff;border:1px solid var(--linie);border-radius:var(--r-m);text-decoration:none;color:var(--deep);transition:border-color .15s,transform .15s}
.mk > a:hover{border-color:var(--lila);transform:translateY(-2px)}
.mk-cat{font-size:var(--s-s);color:var(--text-leise);display:flex;align-items:center;gap:.5rem}
.mk-cat::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--dot,var(--lila));flex-shrink:0}
.mk h3{font-family:var(--f-serif-text);font-weight:400;font-size:var(--s-l);line-height:1.25}
.mk p{font-size:var(--s-s);color:var(--text-leise);line-height:1.55}
.mk-meta{display:flex;justify-content:space-between;align-items:center;gap:1rem;border-top:1px solid var(--linie);padding-top:.9rem;margin-top:.4rem;font-size:var(--s-s)}
.mk-meta span{color:var(--text-leise)}
.mk-meta i{font-style:normal;color:var(--lila-text);font-weight:500;white-space:nowrap}
.mk--feat{grid-column:span 2}
.mk--feat > a{grid-template-columns:minmax(0,1fr) auto;column-gap:2rem;background:var(--deep);border-color:var(--deep);color:#fff}
.mk--feat > a > *:not(.mk-logo){grid-column:1}
.mk--feat .mk-logo{grid-column:2;grid-row:1 / span 4;width:7.5rem;height:auto;align-self:center;border-radius:14px}
.mk--feat .mk-cat,.mk--feat p,.mk--feat .mk-meta span{color:#D9D3F5}
.mk--feat .mk-meta{border-color:rgba(255,255,255,.15)}
.mk--feat .mk-meta i{color:#fff}
.mk--feat h3{font-size:var(--s-xl)}
.mk--own > a{background:transparent;border-style:dashed}
@media (max-width:980px){.mk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.mk-grid{grid-template-columns:1fr}.mk--feat{grid-column:auto}.mk--feat > a{grid-template-columns:1fr}.mk--feat .mk-logo{grid-column:1;grid-row:auto;width:5rem;order:-1}}

/* ---------- Projekte als Social-Media-Posts ---------- */
.feed{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}
.post{display:grid;align-content:start;background:#fff;border:1px solid var(--linie);border-radius:var(--r-post);overflow:hidden;text-decoration:none;color:var(--deep);transition:transform .2s,box-shadow .2s}
a.post:hover{transform:translateY(-3px);box-shadow:0 22px 40px -24px rgba(43,27,92,.35)}
.post-top{display:flex;align-items:center;gap:.6rem;padding:.7rem .85rem}
.ava{width:2rem;height:2rem;border-radius:50%;padding:2px;background:conic-gradient(var(--gruen),var(--lila),var(--gruen));flex-shrink:0}
.ava span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--deep);border:2px solid #fff}
.ava svg{width:.8rem;height:.8rem;color:var(--gruen)}
.post-top b{display:block;font-size:var(--s-xs);font-weight:700;line-height:1.2}
.post-top small{display:block;font-size:.75rem;color:var(--text-leise);line-height:1.2}
.post-top .dots{margin-left:auto;color:var(--text-leise);letter-spacing:.1em}
.post-img{position:relative;display:block;aspect-ratio:4/5;background:var(--deep);overflow:hidden}
.post-img img{width:100%;height:100%;object-fit:cover;display:block}
.post--logo .post-img{display:grid;place-items:center}
.post-img .chip{position:absolute;left:.75rem;top:.75rem;background:rgba(26,15,61,.72);backdrop-filter:blur(6px);color:#fff;font-size:.75rem;font-weight:500;padding:.35rem .65rem;border-radius:var(--pill)}
.post-act{display:flex;gap:.9rem;padding:.75rem .85rem .2rem;color:var(--deep)}
.post-act svg{width:1.35rem;height:1.35rem}
.post-act svg:last-child{margin-left:auto}
.post-cap{display:block;padding:.35rem .85rem 1rem;font-size:var(--s-s);line-height:1.45}
.post-cap b{font-weight:700}
.post-cap .tags{display:block;color:var(--lila-text);margin-top:.25rem}
.post-cap .more{display:block;color:var(--text-leise);font-size:var(--s-xs);margin-top:.5rem}
@media (max-width:1080px){.feed{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.feed{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.9rem;padding-bottom:.5rem;scrollbar-width:none}.feed .post{flex:0 0 82%;scroll-snap-align:start}}
main{overflow-x:clip}

/* Case-Karten (Übersicht, „Weitere Projekte“): ruhiger */
.case{box-shadow:none;border:1px solid var(--linie);border-radius:var(--r-m)}
.case:hover{box-shadow:none;transform:translateY(-2px);border-color:var(--lila)}
.case-cat{color:var(--text-leise);letter-spacing:0;text-transform:none;font-weight:400;font-size:var(--s-s)}

/* ---------- Vorteile, Schritte, Begriffe, Formate ---------- */
.pillar,.section--tint .pillar{background:transparent;border-top:2px solid var(--deep);border-radius:0;padding:1.2rem 0 0}
.pillar .ic,.section--tint .pillar .ic{width:auto;height:auto;background:none;border-radius:0;justify-content:start;margin:0}
.step{background:transparent;box-shadow:none;border-radius:0;border-top:2px solid var(--deep);padding:1.2rem 0 0}
.step::before{width:auto;height:auto;background:none!important;border-radius:0;font-family:var(--f-serif);font-size:var(--s-2xl);color:var(--lila);place-items:start;display:block}
.term,.format{box-shadow:none;border:1px solid var(--linie)}
.section--tint .term,.section--tint .format{border-color:transparent}

/* ---------- Zitat ohne Kasten ---------- */
.quote-box{background:transparent;color:var(--deep);padding:0;border-radius:0;display:block;max-width:52rem}
.quote-box .qm{display:none}
.quote-box blockquote{font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.3}
.quote-box blockquote::before{content:"„";color:var(--gruen)}
.quote-box blockquote::after{content:"“";color:var(--gruen)}
.quote-box cite{color:var(--text-leise)}
.quote-box cite b{color:var(--deep)}

/* ---------- FAQ mit Linien ---------- */
.faq{gap:0}
.faq details,.section--tint .faq details,.faq details[open]{background:transparent;box-shadow:none;border-radius:0;padding:0;border-bottom:1px solid var(--linie)}
.faq details:first-child{border-top:1px solid var(--linie)}
.faq summary::after{width:auto;height:auto;background:none;content:"+";font:300 1.5rem/1 var(--f-sans);color:var(--lila-text)}

/* ---------- Call-to-Action ---------- */
.cta-box{background:var(--lila-text)}
.cta-box .mark{display:none}
.cta-box h2 em{color:#fff}

/* ---------- Länder-Karten ---------- */
.country{box-shadow:none;border:1px solid var(--linie);border-radius:var(--r-m)}
.country:hover{box-shadow:none;transform:translateY(-2px);border-color:var(--lila)}

/* ---------- Modulseite: Inhalte & Buchung ---------- */
.content-list,.prose ul.content-list{gap:0;border-top:1px solid var(--linie)}
.content-list li{background:transparent;border-radius:0;padding:1rem 0;border-bottom:1px solid var(--linie)}
.outcomes,.prose ul.outcomes{gap:.75rem 1.5rem}
.outcomes li{background:transparent;padding:0;font-weight:400;border-radius:0}
.outcomes li::before{background-color:var(--gruen-50)}
.booking{box-shadow:none;border:1px solid var(--linie);border-radius:var(--r-m)}
.booking legend{font-size:var(--s-s);letter-spacing:0;text-transform:none}
.opt{background:#fff;border:1px solid var(--linie);border-radius:14px;justify-content:flex-start}
.opt:hover{background:#fff;border-color:var(--lila)}
.opt:has(input:checked){border-color:var(--lila-text);background:var(--lila-50);box-shadow:inset 0 0 0 1px var(--lila-text)}
.opt span{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;width:100%;font-weight:500}
.opt small{font-weight:400;font-size:var(--s-s)}
.case-numbers div{box-shadow:none;border:1px solid var(--linie)}
.case-hero{background:var(--lila-50)}
.case-cover{box-shadow:none}

/* ---------- Mega-Menü: Punkte statt Spiralen ---------- */
.mm-ic{width:.7rem!important;height:.7rem!important;border-radius:50%!important;align-self:center}
.mm-ic svg{display:none}
.mm-ic.tone-deep{background:var(--deep)}.mm-ic.tone-lila{background:var(--lila)}.mm-ic.tone-gruen{background:var(--gruen)}.mm-ic.tone-hell{background:#B4AAF8}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion:reduce){.post,.mk > a,.hero-post{transition:none;transform:none}}