/* =========================================================
   R+V KwK Landingpage – Standalone
   Vorlage für den MPP.360 HTML Service
   Maße 1:1 aus Figma (Desktop 1727px / Mobile 402px)
   ========================================================= */

/* ---------- Schriften ----------
   RuV_Sans / RuV_Slab: Hausschriften, Dateien nachlegen unter assets/fonts/
   Unterschrift: im Design "Bradley Hand Bold", auf Wunsch durch RuV Sans ersetzt */
@font-face { font-family:"RuV Sans"; src:url("https://www.ruv-kunden-werben-kunden.de/assets/lp/gemeinsam/fonts/RuVSans-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"RuV Sans"; src:url("https://www.ruv-kunden-werben-kunden.de/assets/lp/gemeinsam/fonts/RuVSans-Bold.woff2")    format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"RuV Slab"; src:url("https://www.ruv-kunden-werben-kunden.de/assets/lp/gemeinsam/fonts/RuVSlab-Bold.woff2")    format("woff2"); font-weight:700; font-display:swap; }

/* ---------- Tokens ---------- */
:root{
  --ruv-blau:#011957;
  --ruv-mint:#00dcdc;
  --ruv-mint-dunkel:#109da8;
  --ruv-grey:#f5f5f5;
  --linien-grau:#cdcdcd;
  --ruv-orange-light:#eb6504;
  --ruv-orange-dark:#f79506;
  /* Inhaltsspalte laut Design 1080px (FAQ, Footer, So funktionierts).
     Der 24px-Seitenrand der .wrap liegt AUSSEN darauf, darf also nicht
     davon abgezogen werden. Spenden ist breiter, siehe .donate__grid. */
  --content:1128px;   /* 1080 + 2x24 */
  --band:1404px;
  --font:"RuV Sans",Arial,Helvetica,sans-serif;
  --font-slab:"RuV Slab","RuV Sans",Georgia,serif;
  --font-sign:var(--font);   /* war "Bradley Hand", jetzt Hausschrift */
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-weight:400;color:var(--ruv-blau);background:#fff;font-size:18px;line-height:30px}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{max-width:var(--content);margin:0 auto;padding:0 24px;position:relative}
.c-orange{color:var(--ruv-orange-light)}
/* Auf der dunkelblauen Headerfläche nutzt das Design den helleren Orangeton */
.hero .c-orange{color:var(--ruv-orange-dark)}
.d-only{display:inline}
.m-only{display:none}
.h2{font-weight:700;font-size:39px;line-height:45px;margin:0}
.kicker{font-family:var(--font-slab);font-weight:700;font-size:24px;line-height:63px;color:var(--ruv-orange-light);margin:0}

/* ---------- CTA ---------- */
.cta{display:inline-flex;align-items:center;justify-content:center;text-align:center;
  width:348px;min-height:64px;padding:8px 16px;border-radius:12px;text-decoration:none;
  font-weight:700;font-size:22px;line-height:24px;border:3px solid transparent}
.cta--primary{background:var(--ruv-mint);color:var(--ruv-blau)}
.cta--filled-dark{background:var(--ruv-mint-dunkel);color:#fff;font-size:19px}
.cta--outline{border-color:var(--ruv-mint-dunkel);color:var(--ruv-mint-dunkel);font-size:19px;background:transparent}
.cta:hover{filter:brightness(.95)}

/* ---------- NAV ---------- */
.nav{background:#fff}
/* Die Nav übernimmt die 52/48-Aufteilung des Headers. Das Logo sitzt mittig
   über dem Textblock in der blauen Fläche (nicht über der Fläche selbst):
   Textblock 670px, 40px vor der Panelkante -> Mitte 375px, Logo 343px -> 204px. */
.nav__inner{max-width:1728px;margin:0 auto;display:grid;grid-template-columns:52% 48%;align-items:center}
.nav__logo{justify-self:end;margin-right:204px}
.nav__logo img{width:343px;height:auto}
.nav__menu{display:flex;gap:40px;font-weight:700;font-size:18px;line-height:30px;
  justify-content:flex-end;padding-right:59px}
.nav__menu a{text-decoration:none}
.nav__burger{display:none;background:none;border:0;padding:8px;cursor:pointer;flex-direction:column;gap:7px}
.nav__burger span{display:block;width:28px;height:4px;background:var(--ruv-blau)}

/* ---------- Aufgeklapptes Menue ----------
   Nur mobil; auf dem Desktop steht die Navigation ohnehin offen daneben.
   Das Panel schiebt den Inhalt nach unten statt ihn zu ueberdecken - so
   bleibt der Bezug zur Seite erhalten und es braucht keine Sperre des
   Hintergrundscrollens. */
.nav__panel{display:none;background:#fff;border-top:1px solid var(--linien-grau)}
.nav__panel a{display:block;padding:22px 30px;font-weight:700;font-size:18px;
  line-height:24px;color:var(--ruv-blau);text-decoration:none;
  border-bottom:1px solid var(--linien-grau)}
.nav__panel a:last-child{border-bottom:0}

/* Aus den drei Balken wird ein X. Die Balken sind 4px hoch bei 7px Abstand,
   die Mitte des ersten liegt also genau 11px ueber der des mittleren. */
.nav__burger span{transition:transform .2s ease,opacity .2s ease}
body.nav-open .nav__burger span:nth-child(1){transform:translateY(11px) rotate(45deg)}
body.nav-open .nav__burger span:nth-child(2){opacity:0}
body.nav-open .nav__burger span:nth-child(3){transform:translateY(-11px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){
  .nav__burger span{transition:none}
}


/* ---------- HERO ---------- */
/* Auf die Rahmenbreite des Designs gedeckelt (1728px). Darüber bleibt
   links und rechts weißer Rand statt einer immer breiteren Bühne. */
.hero{max-width:1728px;margin:0 auto;display:grid;grid-template-columns:52% 48%;min-height:579px}
.hero__panel{background:var(--ruv-blau);display:flex;justify-content:flex-end;align-items:center}
.hero__content{max-width:670px;padding:24px 40px 24px 24px;width:100%}
.hero__h1{margin:0;font-weight:700;font-size:65px;line-height:62.3px;color:#fff}
.hero__h2{margin:29px 0 0;font-weight:700;font-size:40px;line-height:49.6px;color:#fff}
.hero__panel .cta{margin-top:29px}
/* GA: R+V-Zeichen mit Agenturbezeichnung. Auf dem Desktop steht es im Fluss
   ueber der Headline - nur so bleibt der ganze Stapel wie im Design mittig
   im blauen Feld. Mobil sitzt es oben links auf dem Key-Visual, also unter
   einem anderen Elternelement. Deshalb liegt es zweimal im Markup und je
   Breakpoint ist genau eine Instanz sichtbar. */
.hero__agency{margin:0 0 36px}
.hero__agency-logo{display:block;width:135px;height:55px}
.hero__agency-name{margin:13px 0 0;color:#fff;font-weight:400;font-size:18px;line-height:22px}
.hero__agency--mobile{display:none}
.hero__visual{position:relative;order:2;overflow:hidden}
/* Klassen statt >img:first-child - durch das <picture> ist das Foto kein
   direktes Kind mehr, und der Selektor haette sonst das Herz-Logo getroffen. */
.hero__pic{display:block;width:100%;height:100%}
/* Bleibt mittig: GAs Logo-Rechtskante liegt bei 75 % des Bildes, angeschnitten
   würde es erst unter 894px Fenster – der Umbruch auf mobil kommt bei 900px.
   Reserve sind nur 2px. Falls sich Breakpoint, Logolage oder Spaltenaufteilung
   ändern, hier auf 54 % gehen (analog Standalone). */
.hero__img{width:100%;height:100%;object-fit:cover;object-position:center}
/* GA-Design: Logo bei x 1201..1510, y 375..582 (Figma 386:2130), Bildflaeche
   ab x=863. Relativ zur Flaeche also x 338..647. Unser Kasten ist 48 % breit
   statt der 50,06 % des Designs, das Asset wird also 17,8px je Seite
   beschnitten - der Rechtswert ist entsprechend korrigiert. */

/* ---------- INTRO ---------- */
.intro{padding:37px 0 0}
.intro .wrap{text-align:center;padding-bottom:56px;max-width:var(--band)}
.intro .h2,.intro__text,.intro__signature{max-width:1045px;margin-left:auto;margin-right:auto}
.intro__text{max-width:1045px;margin:6px auto 0}
.intro__signature{margin-top:47px;display:flex;justify-content:center;align-items:baseline;gap:10px}
.intro__signature-name{font-family:var(--font-sign);font-size:28px;line-height:30px}
.intro__badge{position:absolute;top:0;right:8px;width:130px}

/* ---------- STEPS ---------- */
/* Gleiche Deckelung wie der Header, sonst ist das Band breiter als die
   Bühne darüber. position:relative bleibt für den Störer mobil. */
.steps{max-width:1728px;margin:0 auto;background:var(--ruv-grey);padding:62px 0 42px;position:relative}
/* Im Design bündig mit der linken Kante des weißen Kastens, nicht zentriert */
.steps__title{text-align:left;max-width:736px;margin:0 auto}
/* Mittig auf der oberen rechten Ecke des weißen Kastens. Am Kasten verankert,
   nicht an der Sektion – so wandert er nicht mit, wenn Abstände oder
   Schriftmetriken die Kastenposition verschieben. */
.steps__stoerer{z-index:2;position:absolute;top:-70px;right:-70px;width:140px;height:140px}
.steps__box{background:#fff;max-width:736px;margin:24px auto 0;padding:31px 46px 31px 105px;position:relative;display:flex;flex-direction:column;gap:25px}
.step{position:relative}
.step__num{position:absolute;left:-127px;top:0;width:49px;height:50px}
.step__num img{position:absolute}
.step__num-fill{left:3px;top:4px;width:46px;height:46px}
.step__num-ring{left:0;top:0;width:44px;height:44px}
.step__num b{position:absolute;left:0;top:0;width:44px;height:44px;
  display:grid;place-items:center;font-size:26.4px;line-height:33px}
.step__title{margin:0 0 6px;font-weight:700;font-size:29px;line-height:40px}
.step__body p{margin:0}
.steps__ctas{display:flex;gap:41px;justify-content:center;margin:32px auto 0;max-width:736px}
/* GA: der einzelne Button nimmt die volle Kastenbreite ein (736px im Design). */
.steps__ctas--single .cta{width:100%}
.steps__footnote{max-width:735px;margin:32px auto 0;text-align:center;font-size:12px;line-height:22px}

/* ---------- SPENDEN ---------- */
.donate{padding:68px 0}
/* Spenden ist im Design 1108px breit, breiter als FAQ (1080) und Footer (1078). */
.donate__grid{max-width:1156px;display:grid;grid-template-columns:1fr 509px;gap:67px;align-items:stretch}
.donate__text{display:flex;flex-direction:column}
.donate__lead{margin:11px 0 0}
.donate__org{margin:24px 0 18px;font-weight:700;font-size:25px;line-height:normal}
.donate__desc p{margin:0}
/* Der Organisationsname ist ein Link, soll im Ruhezustand aber wie im
   Design aussehen. Unterstreichung erst beim Überfahren. */
.donate__org a{color:inherit;text-decoration:none}
.donate__org a:hover{text-decoration:underline}
/* Button an die Unterkante: bleibt auch bei geänderten JSON-Texten
   auf der Höhe der untersten Karte. */
.donate__text .cta{margin-top:auto}
.donate__cards{display:flex;flex-direction:column;gap:14px;position:relative}
.donate__card{position:relative;height:134.667px;border-radius:10px;overflow:hidden;border:2px solid transparent;
  cursor:pointer;-webkit-user-select:none;user-select:none}  /* Karten sind Schalter, kein Lesetext */
.donate__card.is-active{border-color:var(--ruv-mint-dunkel)}
.donate__card img{width:100%;height:100%;object-fit:cover}
.donate__label{position:absolute;right:15px;bottom:13px;background:rgba(255,255,255,.8);border-radius:6.9px;
  padding:8px 12px;font-weight:700;font-size:20.7px;line-height:27.6px}
.donate__dots{display:none;gap:8px;justify-content:center;margin-top:16px}
.donate__dots button{width:8px;height:8px;padding:0;border:0;border-radius:1000px;background:var(--linien-grau);cursor:pointer}
.donate__dots button[aria-selected="true"]{background:var(--ruv-mint-dunkel)}

/* ---------- TELLJA ---------- */
.tellja{padding:0 0 96px}
.tellja__grid{max-width:var(--band);display:grid;grid-template-columns:1fr 1fr;gap:17px;background:var(--ruv-grey);padding:92px 161px 95px}
.tellja__box{background:#fff;padding:32px 41px 40px}
.tellja__right{display:flex;flex-direction:column}
.tellja__box--contact{margin-top:31px}
.tellja__box .h2{margin-top:0}
.tellja__copy p{margin:24px 0 0}
.tellja__more{display:none;background:none;border:0;padding:0;color:var(--ruv-blau);text-decoration:underline;cursor:pointer;font:inherit}
.tellja__box .cta{margin-top:32px}
.tellja__brand{display:flex;align-items:center;gap:20px;margin:0 0 0 7px}
.tellja__brand>*:first-child{width:252px}
.tellja__tellja-logo{width:161px}
.tellja__plus{position:relative;width:45px;height:45px;flex:none}
.tellja__plus::before,.tellja__plus::after{content:"";position:absolute;background:var(--ruv-blau)}
.tellja__plus::before{left:50%;top:0;width:13.8px;height:45px;transform:translateX(-50%)}
.tellja__plus::after{top:50%;left:0;height:13.8px;width:45px;transform:translateY(-50%)}
.tellja__contact-title{margin:0 0 0;font-weight:700;font-size:22px;line-height:32px}
.tellja__box--contact{display:flex;flex-direction:column;flex:1}
.tellja__box--contact p{margin:0;line-height:32px}
/* Kontaktdaten nach unten, damit beide weißen Blöcke gleich hoch abschließen */
.tellja__box--contact p:last-of-type{margin-top:auto;padding-top:24px}

/* ---------- VEREINSHINWEIS ---------- */
.verein{padding:0 0 99px}
.verein__grid{max-width:var(--band);display:grid;grid-template-columns:509px 1fr;gap:64px;background:var(--ruv-grey);padding:30px 162px 29px}
.verein__visual{position:relative;height:328px;border-radius:10px;overflow:hidden}
.verein__visual>img:first-child{width:100%;height:100%;object-fit:cover}
.verein__kwk-logo{position:absolute;left:216px;top:102px;width:202px}
.verein__text{padding-top:53px}
.verein__text p{margin:29px 0 0}
.verein__text a{text-decoration:underline}

/* ---------- FAQ ---------- */
.faq{padding:0 0 99px}
.faq__title{text-align:center;margin-bottom:99px}
.faq__item{border-bottom:1px solid var(--linien-grau)}
.faq__item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:24px 0;font-size:22px;line-height:1.6}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"";flex:none;width:24px;height:24px;
  background:url("https://www.ruv-kunden-werben-kunden.de/assets/lp/gemeinsam/faq-icon-closed.svg") no-repeat center/contain}
/* Das Design enthält kein Minus-Icon. Für den offenen Zustand drehen wir
   das exportierte Plus um 45 Grad – sichtbares Feedback, gleiches Asset. */
.faq__item summary::after{transition:transform .15s ease}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__answer{padding:0 0 24px}
.faq__answer:empty{display:none}

/* ---------- FOOTER ---------- */
.footer{padding:0 0 60px}
.footer__inner{display:flex;align-items:center;justify-content:space-between;gap:40px}
.footer__logo{width:374px}
.footer__links{display:flex;gap:40px;font-weight:700;font-size:18px;line-height:30px}
.footer__links a{text-decoration:none}

/* =========================================================
   MOBILE – eigene Struktur, nicht nur Umbruch (Figma 402px)
   ========================================================= */
@media (max-width:900px){
  body{font-size:18px}
  .wrap{padding:0 30px;max-width:none}
  .h2{font-size:39px;line-height:45px}

  .nav__inner{display:flex;align-items:center;justify-content:space-between;padding:0}
  .nav__logo{justify-self:auto;margin-right:0}
  .nav__menu{padding-right:0}
  .nav__logo img{width:282px}
  .nav__menu{display:none}
  .nav__burger{display:flex}
  body.nav-open .nav__panel{display:block}

  /* Header: Visual oben, darunter die geformte blaue Fläche */
  .hero{display:block;min-height:0}
  .hero__visual{height:338px}   /* GA-Design, nicht 270 wie Standalone */
    .hero__panel{display:block;background:transparent;
    background-image:url("https://www.ruv-kunden-werben-kunden.de/assets/lp/gemeinsam/header-shape-background.svg");
    background-repeat:no-repeat;background-size:100% auto;background-position:top center;min-height:477px}
  .hero__content{max-width:none;padding:96px 30px 0}
  .hero__h1{font-size:39px;line-height:48.8px}
  .hero__h2{font-size:30px;line-height:40px;margin-top:27px}
  .hero__panel .cta{margin-top:32px;width:100%;max-width:341px}
  /* Logo-Block wechselt mobil auf das Key-Visual, Groesse im Design 141x92 */
  .hero__agency--desktop{display:none}
  .hero__agency--mobile{display:block;position:absolute;left:30px;top:18px;z-index:2}
  .hero__agency--mobile .hero__agency-logo{width:112px;height:46px}
  .hero__agency--mobile .hero__agency-name{margin-top:11px;font-size:15px;line-height:18px}

  .intro{padding-top:46px}
  .intro__text{margin-top:62px}
  .intro__signature{flex-direction:column;align-items:center;gap:4px;margin-top:28px}
  .intro__badge{position:static;margin:24px auto 0}

  .steps{padding:54px 0 40px}
  .steps__title{text-align:center;max-width:none}
  /* Mobil sitzt er oberhalb des Graubands. Der Kasten wird static, damit der
     Bezugsrahmen .wrap ist und die Design-Werte direkt gelten. */
  .steps__box{position:static}
  .steps__stoerer{top:-108px;right:0;left:auto;margin-left:0;width:108px;height:108px}
  /* drei einzelne Boxen, Ziffer zentriert darüber */
  .steps__box{background:transparent;max-width:none;margin-top:74px;padding:0;gap:62px}
  .step{background:#fff;padding:56px 30px 30px;text-align:left}
  .step__num{position:absolute;left:50%;top:-20px;transform:translateX(-50%)}
  .step__title{margin-bottom:10px}
  .steps__ctas{flex-direction:column;gap:8px;align-items:center;margin-top:38px}
  .steps__ctas .cta,.donate__text .cta,.tellja__box .cta{width:100%;max-width:341px}
  .steps__footnote{margin-top:48px;max-width:341px}

  .donate{padding:44px 0 0}
  .donate__grid{grid-template-columns:1fr;gap:0}
  .d-only{display:none}
  .m-only{display:inline}
  .donate__text{display:flex;flex-direction:column}
  .donate__org{display:none}
  .donate__desc{order:3;margin-top:17px}
  .donate__text .cta{order:4;margin-top:36px;align-self:center}
  .donate__cards{order:2;margin-top:37px}
  .donate__card{display:none;height:135px}
  .donate__card.is-active{display:block;border-color:transparent}
  .donate__dots{display:flex}

  .tellja{padding:57px 0 0}
  .tellja__grid{grid-template-columns:1fr;gap:0;padding:57px 30px 114px}
  .tellja__box{padding:19px 29px 40px}
  .tellja__right{background:#fff;padding:0 29px 40px}
  .tellja__box--contact{margin-top:0;padding:0;background:transparent;flex:0 1 auto}
  .tellja__box--contact p:last-of-type{margin-top:0;padding-top:24px}
  .tellja__box{padding-bottom:0}
  .tellja__copy .tellja__rest{display:none}
  .tellja__copy.is-open .tellja__rest{display:inline}
  .tellja__more{display:inline;text-decoration:underline}
  .tellja__copy.is-open .tellja__more{display:none}
  .tellja__brand{gap:12px;margin:36px 0 20px}
  .tellja__brand>*:first-child{width:114px}
  .tellja__plus{width:26px;height:26px}
  .tellja__plus::before{width:8px;height:26px}
  .tellja__plus::after{height:8px;width:26px}

  .verein{padding:0 0 40px}
  .verein__grid{grid-template-columns:1fr;gap:0;padding:0 30px 40px}
  .verein__visual{height:328px}
  .verein__kwk-logo{left:50%;transform:translateX(-50%);top:114px;width:203px}
  .verein__text{padding-top:41px}

  .faq{padding:0 0 60px}
  .faq__title{text-align:left;margin-bottom:38px}
  .faq__item summary{font-size:22px}

  .footer{padding:0 0 40px}
  .footer__inner{flex-direction:column;align-items:flex-start;gap:21px}
  .footer__logo{width:329px}
  .footer__links{gap:47px}
}

/* =========================================================
   Zusammengesetzte Logos
   Figma exportiert beide Logos in Einzelteilen. Die Prozentwerte sind
   die inset-Angaben aus dem Design und damit größenunabhängig – deshalb
   reicht EIN Dateisatz für alle Einsatzgrößen (Header/Tellja/Verein).
   ========================================================= */
:where(.logo-kwk){position:relative}
.logo-kwk{display:block}
.logo-kwk__base{width:100%;display:block}
.logo-kwk>span{position:absolute}
.logo-kwk>span>img{width:100%;height:100%;display:block}
.logo-kwk__p1{top:5.61%;right:33.5%;bottom:6.74%;left:3.76%}
.logo-kwk__p2{top:47.6%;right:45.16%;bottom:41.16%;left:19.33%}
.logo-kwk__p3{top:32.43%;right:5.92%;bottom:41.16%;left:19.87%}

:where(.logo-tellja){position:relative}
.logo-tellja{display:block;aspect-ratio:161.3/67.293}
.logo-tellja>span{position:absolute}
.logo-tellja>span>img{width:100%;height:100%;display:block}
.logo-tellja__p1{top:14.35%;right:79.23%;bottom:53.39%;left:5.75%}
.logo-tellja__p2{top:5.29%;right:76.28%;bottom:37.65%;left:2.53%}
.logo-tellja__p3{top:0;right:73.77%;bottom:29.39%;left:0}
.logo-tellja__p4{top:13.16%;right:2.79%;bottom:20.67%;left:31.33%}
.logo-tellja__p5{top:26.01%;right:0;bottom:67.74%;left:97.21%}
.logo-tellja__p6{top:80.67%;right:.48%;bottom:0;left:17.01%}