/* vier Unterseiten, vier Formen:
   blatt     - Rechenblatt mit karierter Fläche
   speicher  - ganze Seite beige, Gegenüberstellung und Waage
   geld      - Programmkarten mit Marke links
   kurs      - Abendfolge mit Bildern im Wechsel */

/*==== 1. Rechenblatt ====*/
.blatt-kopf{padding:52px 0 44px;background:var(--papier-2)}
.blatt-kopf__innen{max-width:820px;margin:0 auto;padding:0 var(--rand)}
.blatt-kopf h1{margin:6px 0 16px;font-size:28px;letter-spacing:3px;color:var(--ink)}
.blatt-kopf p{max-width:620px;color:var(--grau)}

.eingang{display:flex;flex-direction:column-reverse;gap:30px;max-width:var(--breit);margin:0 auto;padding:44px var(--rand) 20px}
.eingang__liste .titel{margin-bottom:18px}
.eingang__zeile{display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 14px;padding:13px 0;border-bottom:1px dotted #d6cfc0}
.eingang__zeile:last-child{border-bottom:0}
.eingang__nr{font-family:var(--schrift);font-size:13px;font-weight:700;color:var(--sage);padding-top:4px}
.eingang__zeile b{display:block;font-family:var(--schrift);font-size:15.5px;color:var(--ink)}
.eingang__zeile span{display:block;margin-top:3px;font-size:14px;line-height:1.7;color:var(--grau)}
.eingang__bild img{width:100%;border-radius:20px 4px 22px 6px;box-shadow:0 14px 32px rgba(37,30,28,.12)}
.eingang__bu{margin-top:10px;font-size:13px;line-height:1.7;color:#8c857c}

.formel{max-width:820px;margin:0 auto;padding:16px var(--rand) 10px}
.formel__karte{padding:26px 24px;background:var(--band);border-radius:22px 6px 20px 4px}
.formel__zeile{
  margin:10px 0 14px;
  font-family:var(--schrift);
  font-size:16px;
  font-weight:700;
  line-height:1.7;
  color:#31382b;
}
.formel__karte p{color:#4a4a42;font-size:14.5px}

.beispiel{max-width:820px;margin:0 auto;padding:36px var(--rand) 20px}
.beispiel__vor{margin:10px 0 20px;color:var(--grau)}
/* kariertes Papier, damit die Tabelle nach Notizblock aussieht */
.rechenblatt{
  padding:18px 20px;
  background:
    repeating-linear-gradient(0deg, #ece6d8 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, #ece6d8 0 1px, transparent 1px 26px),
    var(--weiss);
  border-radius:4px;
  box-shadow:0 10px 26px rgba(37,30,28,.08);
}
.rechenblatt__zeile{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:9px 0;border-bottom:1px dotted #ded7c7;font-size:14.5px}
.rechenblatt__zeile:last-child{border-bottom:0}
.rechenblatt__zeile span{color:var(--grau)}
.rechenblatt__zeile b{font-family:var(--schrift);color:var(--ink)}
.rechenblatt__zeile--dick{border-bottom-style:solid;border-bottom-color:#c9c1af}
.rechenblatt__zeile--dick b{font-size:16px;color:var(--taupe)}
.beispiel__nach{margin-top:18px;font-size:14.5px;line-height:1.85;color:var(--grau)}

.ausgang{margin-top:34px;padding:46px 0 52px;background:var(--papier-2)}
.ausgang__innen{max-width:820px;margin:0 auto;padding:0 var(--rand)}
.ausgang ul{margin:16px 0 18px}
.ausgang li{position:relative;padding:8px 0 8px 26px;font-size:14.5px;border-bottom:1px dotted #d6cfc0}
.ausgang li:last-child{border-bottom:0}
.ausgang li::before{content:"\2713";position:absolute;left:0;top:6px;font-family:var(--hand);font-size:20px;color:var(--sage)}
.ausgang p{margin-bottom:18px;color:var(--grau)}

/*==== 2. Speicher ====*/
.seite-speicher{background:var(--beige)}
.seite-speicher .burger{background:rgba(255,255,255,.9)}
.speicher-kopf{padding:52px 0 40px}
.speicher-kopf__innen{max-width:820px;margin:0 auto;padding:0 var(--rand)}
.speicher-kopf h1{margin:6px 0 16px;font-size:28px;letter-spacing:2px;color:#3a3228}
.speicher-kopf p{max-width:640px;color:#5a5044}

.gegen{display:grid;grid-template-columns:1fr;gap:16px;max-width:var(--breit);margin:0 auto;padding:0 var(--rand) 40px}
.gegen__spalte{padding:26px 24px;border-radius:20px 5px 18px 5px;background:var(--papier)}
.gegen__spalte h2{margin-bottom:14px;font-size:19px;letter-spacing:1px}
.gegen__spalte li{position:relative;padding:9px 0 9px 24px;font-size:14.5px;line-height:1.75;border-bottom:1px dotted #ddd5c4}
.gegen__spalte li:last-child{border-bottom:0}
.gegen__spalte li::before{content:"";position:absolute;left:0;top:19px;width:12px;height:2px;border-radius:2px}
.gegen__spalte--ja h2{color:#4d6234}
.gegen__spalte--ja li::before{background:var(--sage)}
.gegen__spalte--nein{background:#3a3228;color:#ddd3c4}
.gegen__spalte--nein h2{color:#fff}
.gegen__spalte--nein li{border-bottom-color:#4e4437}
.gegen__spalte--nein li::before{background:#c98b6a}

.waage{max-width:820px;margin:0 auto;padding:10px var(--rand) 44px}
.waage p{color:#5a5044}
.waage .titel{margin-bottom:12px;color:#6d6252}
.waage__balken{display:grid;grid-template-columns:1fr;gap:12px;margin:22px 0 18px}
.waage__stueck{padding:20px 22px;border-radius:16px}
.waage__stueck b{display:block;font-family:var(--schrift);font-size:34px;font-weight:700;line-height:1}
.waage__stueck span{display:block;margin-top:6px;font-size:13.5px}
.waage__stueck--nutzen{background:var(--sage);color:#22300f}
.waage__stueck--kosten{background:#3a3228;color:#e6dccd}
.waage__fuss{font-size:14.5px;line-height:1.9}

.kipp{display:flex;flex-direction:column;gap:26px;max-width:var(--breit);margin:0 auto;padding:0 var(--rand) 56px}
.kipp img{width:100%;border-radius:50% 50% 46% 54% / 44% 46% 54% 56%;box-shadow:0 16px 36px rgba(37,30,28,.16)}
.kipp__text p{margin-bottom:14px;color:#5a5044}
.kipp__hinweis{padding:14px 16px;background:var(--papier);border-radius:14px;font-size:14px !important}

/*==== 3. Förderung ====*/
.geld-kopf{display:flex;flex-direction:column;gap:26px;max-width:var(--breit);margin:0 auto;padding:40px var(--rand) 30px}
.geld-kopf__bild img{width:100%;border-radius:24px 6px 24px 6px;box-shadow:0 14px 32px rgba(37,30,28,.12)}
.geld-kopf h1{margin:6px 0 16px;font-size:27px;letter-spacing:2px;color:var(--ink)}
.geld-kopf p{color:var(--grau)}

.programme{max-width:var(--breit);margin:0 auto;padding:0 var(--rand) 20px}
.programm{display:grid;grid-template-columns:1fr;gap:10px 26px;margin-bottom:14px;padding:24px 22px;background:var(--weiss);border-radius:6px 20px 6px 20px;box-shadow:0 8px 22px rgba(37,30,28,.06)}
.programm:nth-child(even){background:#fbf9f4}
.programm__marke b{display:block;font-family:var(--schrift);font-size:19px;font-weight:700;letter-spacing:1px;color:var(--taupe)}
.programm__marke span{display:block;margin-top:4px;font-size:12.5px;letter-spacing:1px;text-transform:uppercase;color:var(--sage)}
.programm__inhalt p{margin-bottom:11px;font-size:14.5px;line-height:1.85;color:var(--grau)}
.programm__inhalt p:last-child{margin-bottom:0}
.programm__haken{padding-left:16px;border-left:3px solid var(--pale);color:#6b6357 !important}

.zins{display:flex;flex-direction:column;gap:24px;align-items:center;max-width:960px;margin:0 auto;padding:26px var(--rand) 56px}
.zins img{width:62%;max-width:280px;aspect-ratio:1;object-fit:cover;border-radius:50%;box-shadow:0 14px 30px rgba(37,30,28,.14)}
.zins p{margin-bottom:14px;color:var(--grau)}

/*==== 4. Abendkurs ====*/
.kurs-kopf{padding:50px 0 42px;background:var(--band)}
.kurs-kopf__innen{max-width:860px;margin:0 auto;padding:0 var(--rand)}
.kurs-kopf h1{margin:6px 0 16px;font-size:28px;letter-spacing:2px;color:#31382b}
.kurs-kopf > .kurs-kopf__innen > p{max-width:600px;color:#4a5340}
.kurs-fakten{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:26px;background:#bcc9ab;border:1px solid #bcc9ab;border-radius:14px;overflow:hidden}
.kurs-fakten div{padding:13px 15px;background:var(--band);font-size:14.5px;color:#31382b}
.kurs-fakten span{display:block;margin-bottom:3px;font-family:var(--schrift);font-size:10.5px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:#6d7a5c}

.abende{max-width:var(--breit);margin:0 auto;padding:40px var(--rand) 10px}
.abend{display:grid;grid-template-columns:1fr;gap:16px;padding:26px 0;border-bottom:1px dotted #d6cfc0}
.abend:last-child{border-bottom:0}
.abend__nr{font-family:var(--hand);font-size:24px;color:var(--sage)}
.abend__text h2{margin:4px 0 10px;font-size:20px;letter-spacing:1px;color:var(--ink)}
.abend__text p{color:var(--grau)}
.abend__rand{margin-top:12px;padding:10px 14px;background:var(--papier-2);border-radius:12px;font-size:13.5px !important;color:#7a7268 !important}
.abend__bild{width:100%;border-radius:18px 4px 18px 4px;box-shadow:0 12px 28px rgba(37,30,28,.1)}

.kurs-fuss{display:grid;grid-template-columns:1fr;gap:16px;max-width:var(--breit);margin:0 auto;padding:24px var(--rand) 56px}
.kurs-fuss__block{padding:28px 24px;background:var(--papier-2);border-radius:20px 6px 20px 6px}
.kurs-fuss__block--hell{background:var(--weiss)}
.kurs-fuss__block p{margin:12px 0 18px;color:var(--grau);font-size:14.5px}

@media (min-width: 760px){
  .blatt-kopf,.speicher-kopf,.kurs-kopf{padding-top:70px}
  .blatt-kopf h1,.speicher-kopf h1,.geld-kopf h1,.kurs-kopf h1{font-size:38px;letter-spacing:5px}
  .eingang{flex-direction:row;gap:56px;align-items:flex-start}
  .eingang__liste{flex:1.25 1 0;min-width:0}
  .eingang__bild{flex:1 1 0;min-width:0;position:sticky;top:26px}
  .gegen{grid-template-columns:repeat(2,1fr);gap:22px}
  .waage__balken{grid-template-columns:1fr 1fr;gap:18px}
  .kipp{flex-direction:row;align-items:center;gap:50px}
  .kipp img,.kipp__text{flex:1 1 0;min-width:0}
  .geld-kopf{flex-direction:row-reverse;align-items:center;gap:50px}
  .geld-kopf__bild,.geld-kopf__text{flex:1 1 0;min-width:0}
  .programm{grid-template-columns:210px minmax(0,1fr);padding:28px 30px}
  .zins{flex-direction:row;gap:44px;align-items:center}
  .zins img{width:34%}
  .kurs-fakten{grid-template-columns:repeat(4,1fr)}
  .abend{grid-template-columns:150px minmax(0,1fr) 260px;gap:0 28px;align-items:start}
  .abend:nth-child(even) .abend__bild{order:-1}
  .kurs-fuss{grid-template-columns:1fr 1fr;gap:22px}
}

/* die karierte Fläche war zuerst ein Hintergrundbild, die zwei Verläufe sind leichter */