/* Aingel Variante 13 – nur die Startseite: was nach dem dunklen Raum kommt (Belege, Leistungen als Bento mit
   Glas-Objekten, Was es bringt, Referenzen; Kontakt in elemente/kontakt-formular.css). Komponenten und Tokens aus
   css/basis.css. Owner 13.10. abends: „die Seite ist bisschen zu lang“ – Spezialisten, Ablauf und Sicherheit sind raus. */

/* Nach dem Raum: die Seite beginnt mit einem runden oberen Rand (im hellen Modus der Übergang in die helle Seite) */
.nach-raum { position: relative; z-index: 3; }
.nach-raum::before {
  content: ''; position: absolute; left: 0; right: 0; top: -40px; height: 41px;
  background: var(--grund); border-radius: 40px 40px 0 0; border-top: 1px solid var(--linie);
}
@media (max-width: 760px) { .nach-raum::before { top: -28px; height: 29px; border-radius: 28px 28px 0 0; } }

/* ---------- Belege: drei Felder ohne Kasten, getrennt von Haarlinien ---------- */
.belege-band { padding: clamp(40px, 6vw, 72px) 0 0; }
.belege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--linie); }
.beleg { display: grid; gap: 6px; align-content: start; padding: 28px clamp(16px, 2.4vw, 32px); }
.beleg + .beleg { border-left: 1px solid var(--linie); }
.beleg__zahl { font: 500 clamp(2.5rem, 5vw, 3.6rem)/1 var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.beleg__wort { font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.2; letter-spacing: -.015em; font-weight: 600; text-wrap: balance; }
.beleg__klein { display: inline-flex; align-items: center; gap: 9px; font: 400 13px/1.4 var(--mono); color: var(--text-leise); }
.beleg__klein::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--glas, var(--glas-code)); flex: none; }
@media (max-width: 760px) {
  .belege { grid-template-columns: 1fr; }
  .beleg { padding: 20px 0; }
  .beleg + .beleg { border-left: 0; border-top: 1px solid var(--linie); }
}

/* ---------- Leistungen: Bento mit vier Glas-Objekten an wechselnden Stellen ---------- */
.bento--leistungen { grid-template-areas: "a a b b" "a a c d" "e f g g" "h h i j"; grid-auto-rows: minmax(286px, auto); }
.bento--leistungen > :nth-child(1) { grid-area: a; } .bento--leistungen > :nth-child(2) { grid-area: b; }
.bento--leistungen > :nth-child(3) { grid-area: c; } .bento--leistungen > :nth-child(4) { grid-area: d; }
.bento--leistungen > :nth-child(5) { grid-area: e; } .bento--leistungen > :nth-child(6) { grid-area: f; }
.bento--leistungen > :nth-child(7) { grid-area: g; } .bento--leistungen > :nth-child(8) { grid-area: h; }
.bento--leistungen > :nth-child(9) { grid-area: i; } .bento--leistungen > :nth-child(10) { grid-area: j; }
/* a – groß: das Zahnrad oben rechts, von der Kachel angeschnitten; der Text unten links */
.kachel--zahnrad { --g: 52%; }
.kachel--zahnrad .kachel__text { max-width: 62%; }
/* b – breit: die Module ragen oben rechts über die Kante */
.kachel--module { --g: 36%; }
.kachel--module .kachel__text { max-width: 58%; }
/* c – klein: die Sprechblase oben links, der Text darunter */
.kachel--chat { --g: 50%; padding-top: 150px; }
/* h – breit: die Formen rechts, angeschnitten */
.kachel--formen { --g: 33%; }
.kachel--formen .kachel__text { max-width: 60%; }
/* j – das Aktionsfeld: Orange nur am Punkt des Knopfes */
.kachel--aktion { background: var(--flaeche-hoch); justify-content: space-between; }
.kachel--aktion .knopf { align-self: flex-start; margin-top: 14px; }
.leistungen__weiter { margin-top: 28px; }
@media (max-width: 1100px) and (min-width: 761px) {
  .bento--leistungen { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "a a" "b b" "c d" "e f" "g g" "h h" "i j"; }
  .kachel--zahnrad { --g: 38%; }
  .kachel--zahnrad .kachel__text { max-width: 66%; }
}
@media (max-width: 760px) {
  .bento--leistungen { grid-template-columns: 1fr; grid-template-areas: none; grid-auto-rows: auto; gap: 12px; }
  .bento--leistungen > * { grid-area: auto !important; }
  .kachel { padding: 22px; min-height: 0; }
  /* Am Handy steht jede Grafik oben rechts, innen, kleiner – nie über dem Text, nie über dem Rand */
  .kachel--zahnrad, .kachel--module, .kachel--chat, .kachel--formen { --g: 38%; padding-top: 178px; }
  .kachel--zahnrad .kachel__text, .kachel--module .kachel__text, .kachel--formen .kachel__text { max-width: none; }
  .kachel--zahnrad .kachel__grafik, .kachel--formen .kachel__grafik { right: 14px; top: 14px; translate: none; width: auto; height: 150px; }
  .kachel--module .kachel__grafik { right: 14px; top: 14px; width: auto; height: 150px; }
  .kachel--chat .kachel__grafik { left: auto; right: 14px; top: 22px; width: auto; height: 128px; }
}

/* ---------- Was es bringt: Bento aus vier Kacheln, Text oben, das Bild der Wirkung unten ---------- */
.bento--nutzen { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "zeit zeit kosten" "tempo kontrolle kosten"; grid-auto-rows: minmax(250px, auto); }
.bento--nutzen .kachel { justify-content: space-between; gap: 22px; }
.nutzen--zeit { grid-area: zeit; } .nutzen--kosten { grid-area: kosten; } .nutzen--tempo { grid-area: tempo; } .nutzen--kontrolle { grid-area: kontrolle; }
/* Zeit: drei Häkchen, die sich nacheinander setzen */
.erledigt { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.erledigt li {
  position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; border-radius: var(--r-pille);
  border: 1px solid var(--linie); background: var(--flaeche-hoch); font: 400 13.5px/1.2 var(--mono); color: var(--text);
}
.erledigt li::before {
  content: ''; width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: color-mix(in srgb, var(--glas-code) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rolle-code) 55%, transparent);
}
/* das Häkchen im Kreis */
.erledigt li::after {
  content: ''; position: absolute; left: 16px; top: 50%; width: 7px; height: 4px; margin-top: -3px;
  border-left: 1.6px solid var(--rolle-code); border-bottom: 1.6px solid var(--rolle-code); transform: rotate(-45deg);
}
.js .einblenden .erledigt li { opacity: 0; transform: translateY(6px); transition: opacity .5s var(--kurve), transform .5s var(--kurve); }
.js .einblenden.ist-sichtbar .erledigt li { opacity: 1; transform: none; }
.js .einblenden.ist-sichtbar .erledigt li:nth-child(2) { transition-delay: .25s; }
.js .einblenden.ist-sichtbar .erledigt li:nth-child(3) { transition-delay: .5s; }
/* Kosten: viele Abos werden durchgestrichen, übrig bleibt eure Plattform */
.abos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.abos li { font: 400 13.5px/1.2 var(--mono); color: var(--text-leise); padding: 10px 14px; border-radius: var(--r-s); border: 1px dashed var(--geruest); position: relative; }
.abos li:not(.abos__eins)::after { content: ''; position: absolute; left: 12px; right: 12px; top: 50%; height: 1px; background: var(--text-leise); transform-origin: left; transition: transform .6s var(--kurve) var(--verzug, .2s); }
.js .einblenden:not(.ist-sichtbar) .abos li:not(.abos__eins)::after { transform: scaleX(0); }
.abos li:nth-child(2) { --verzug: .35s; } .abos li:nth-child(3) { --verzug: .5s; } .abos li:nth-child(4) { --verzug: .65s; }
.abos .abos__eins { border-style: solid; border-color: color-mix(in srgb, var(--rolle-code) 45%, var(--linie)); color: var(--text); background: color-mix(in srgb, var(--glas-code) var(--toenung), var(--flaeche)); display: flex; align-items: center; gap: 10px; }
.abos__eins::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--glas-code); }
/* Tempo und Kontrolle: ein Schild mit dem Kern der Aussage */
.nutzen__marke { align-self: flex-start; }
.nutzen--kontrolle { border-color: color-mix(in srgb, var(--mensch) 30%, var(--linie)); }
.band-hinweis {
  display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 18px 22px; border-radius: var(--r-l);
  border: 1px dashed var(--geruest); color: var(--text-leise); font-size: 16px;
}
.band-hinweis strong { color: var(--text); font-weight: 600; margin-right: 6px; }
.band-hinweis__plus { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--rolle-code) 50%, var(--linie)); color: var(--code); font: 500 18px/1 var(--mono); }
@media (max-width: 860px) {
  .bento--nutzen { grid-template-columns: 1fr; grid-template-areas: "zeit" "kosten" "tempo" "kontrolle"; grid-auto-rows: auto; gap: 12px; }
  .band-hinweis { align-items: flex-start; font-size: 15px; }
}

/* ---------- Referenzen ---------- */
.referenzen-bereich .weiter { margin-top: 28px; }