/* Startseite ab 23.10.2026: Werkzeuge vorn, Anmeldung früh, Produkte danach.
   Ergänzt design-a.css (Farben, Knöpfe, Formularfelder kommen von dort). */

/* Knöpfe */
.knopf-gruen{background:var(--gruen);color:#fff;box-shadow:0 6px 18px -8px rgba(13,107,92,.7)}
.knopf-gruen:hover{background:var(--gruen-tief);color:#fff}
.knopf-gross{min-height:3.6rem;font-size:1.08rem;padding-inline:1.6rem;text-align:center}

/* Erster Bildschirm: links Werkzeuge, rechts Anmeldung */
.start-oben .unter{margin:1.3rem 0 1.5rem}
.start-oben .klein{margin-top:.9rem}

/* Anmeldekarte (oben und am Ende) */
.start-form{background:var(--karte);border:1px solid var(--linie);border-radius:22px;padding:clamp(1.25rem,3vw,2rem);box-shadow:0 18px 40px -26px rgba(7,40,34,.35)}
.start-form h2{font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem);margin-bottom:.5rem}
.start-form > p{color:var(--text-2);font-size:.98rem}
.start-form .einw{margin:.8rem 0 1rem}
.start-form .knopf{width:100%}
.schmal{max-width:40rem;margin-inline:auto}

/* Womit möchten Sie anfangen? */
.werkzeuge{padding:clamp(2.5rem,6vw,4.5rem) 0;background:var(--karte);border-block:1px solid var(--linie)}
.wz-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;margin-top:1.4rem}
.wz-karte{display:flex;flex-direction:column;align-items:flex-start;background:var(--grund);border:1px solid var(--linie);border-radius:22px;padding:clamp(1.3rem,3vw,2rem)}
.wz-karte h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem);margin:.8rem 0 .6rem}
.wz-karte .klein{margin-bottom:1.2rem}
.wz-karte .knopf{margin-top:auto}
.werkzeuge .liste{margin:1.6rem 0 0}

/* Richtwerte Monatskosten */
.kosten{padding:clamp(3rem,7vw,5rem) 0}
.kosten .mass{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.kosten .punkte{margin:1.4rem 0}

/* Neu und aktualisiert */
.neu{padding:0 0 clamp(3rem,7vw,5rem)}
.neu .liste{margin-bottom:1rem}

/* Ratgeber nach Themen */
.themen{padding:clamp(3rem,7vw,5rem) 0;background:var(--karte);border-block:1px solid var(--linie)}
.themen-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.8rem 2.6rem;margin:1.6rem 0}
.thema h3{margin-bottom:.5rem}
.thema ul{list-style:none;padding:0;margin:0;border-top:1px solid var(--linie)}
.thema a{display:block;padding:.75rem .1rem;border-bottom:1px solid var(--linie);font-weight:700;line-height:1.35;color:var(--text);text-decoration:none;transition:background-color 160ms ease}
.thema a:hover{color:var(--gruen);background:#f1f7f4}

/* Angebote: drei Spalten */
.angebot.nach-leiste{padding-top:clamp(3rem,7vw,5rem)}
.wahl.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.wahl.vier{grid-template-columns:repeat(4,minmax(0,1fr))}
.angebot .vergleich{margin-top:1.6rem}

/* Zweites Formular am Ende */
.checkliste.schluss{padding-top:0}

@media (max-width:980px){.wahl.drei{grid-template-columns:1fr}}
@media (max-width:900px){.kosten .mass{grid-template-columns:1fr}}
@media (max-width:760px){.wz-raster,.themen-raster{grid-template-columns:1fr}}
@media (max-width:560px){
  .start.start-oben{padding-top:1.25rem}
  .start-oben .mass{gap:1.5rem}
  .start-oben h1{font-size:1.95rem}
  .start-oben .stand{font-size:.82rem;margin-bottom:.7rem}
  .start-oben .unter{font-size:1.02rem;line-height:1.55;margin:.9rem 0 1.1rem}
  .start-oben .knopf-gross{min-height:3.35rem}
  .start-oben .handlung{gap:.6rem}
  .start-form > p{font-size:.92rem;line-height:1.5}
  .wz-karte .knopf{width:100%}
}

/* Band „Strand von Pattaya“ (24.10.2026): Ausschnitt mit Skyline statt nur Sand */
.abend img{object-position:center 28%}

/* 24.10.2026: Startseite aufgelockert – Bildkacheln, Preisstufen, Social */
.bildthemen{padding:0 0 clamp(2.2rem,5vw,3.5rem)}
.bk-raster{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.bk-raster a{position:relative;display:block;border-radius:18px;overflow:hidden;color:#fff;text-decoration:none;aspect-ratio:4/3;box-shadow:0 14px 30px -22px rgba(7,40,34,.6)}
.bk-raster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 300ms ease}
.bk-raster a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,40,34,0) 35%,rgba(7,40,34,.88))}
.bk-raster a:hover img{transform:scale(1.04)}
.bk-text{position:absolute;left:1rem;right:2.6rem;bottom:.9rem;z-index:1;display:flex;flex-direction:column;gap:.15rem}
.bk-text small{font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#f1c75b}
.bk-text b{font:800 1.08rem/1.25 "Montserrat",sans-serif}
.bk-raster svg{position:absolute;right:.9rem;bottom:1rem;z-index:1}
.stufen-titel{margin:1.3rem 0 .6rem;font-weight:800}
.stufen{list-style:none;margin:0 0 .8rem;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}
.stufen li{background:var(--karte);border:1px solid var(--linie);border-radius:16px;padding:.9rem .8rem;display:flex;flex-direction:column;gap:.15rem}
.stufen small{font-size:.78rem;font-weight:800;color:var(--gruen);text-transform:uppercase;letter-spacing:.06em}
.stufen b{font:800 clamp(1rem,.9rem + .4vw,1.2rem)/1.2 "Montserrat",sans-serif}
.stufen span{font-size:.85rem;color:var(--text-2)}
.social-titel{margin:1.2rem 0 .5rem;font-weight:800}
.social{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.social a{display:inline-block;padding:.55rem 1.1rem;border-radius:999px;border:1.5px solid var(--gruen);color:var(--gruen);font-weight:800;text-decoration:none}
.social a:hover{background:var(--gruen);color:#fff}
.fuss-social{margin-top:.8rem}
@media (max-width:900px){.bk-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.stufen{grid-template-columns:1fr}.bk-text b{font-size:1rem}}

@media (max-width:1180px){.wahl.vier{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.wahl.vier{grid-template-columns:1fr}}