/* FRISCHHAUS — die Abschnitte der Startseite, von oben nach unten. */

/* ------------------------------------------------------------ Kopf je Abschnitt */
.abschnitt__kopf{
  display:flex;align-items:flex-end;justify-content:space-between;gap:28px;
  margin-bottom:clamp(24px,3vw,40px);
}
.abschnitt__kopf > div{max-width:60ch}
.abschnitt__kopf p{margin-top:14px;color:var(--tinte-weich)}
.abschnitt__kopf--hell p{color:rgba(255,255,255,.92)}

/* ============================================================== Startbereich */
.start{padding-top:clamp(18px,2.4vw,32px)}
.start__gitter{
  display:grid;grid-template-columns:1.12fr .88fr;gap:16px;
  background:#fff;padding:16px;border-radius:var(--rund-xl);box-shadow:var(--schatten-weich);
}
.start__tafel{
  position:relative;overflow:hidden;
  background:var(--flieder-tief);color:#fff;
  border-radius:var(--rund-l);padding:clamp(26px,3vw,46px);
  display:flex;flex-direction:column;
}
.start__tafel::after{
  content:"";position:absolute;right:-90px;bottom:-120px;width:340px;height:340px;border-radius:50%;
  border:52px solid rgba(255,255,255,.07);pointer-events:none;
}
.start__titel{font-size:clamp(28px,3.5vw,50px);line-height:1.1}
.start__titel em{display:block;font-style:normal;color:var(--mango)}
.start__unter{margin-top:18px;color:rgba(255,255,255,.92);max-width:44ch}
.start__mitte{
  position:relative;z-index:1;
  display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.4vw,32px);
  align-items:center;margin:clamp(22px,3vw,36px) 0 clamp(24px,3vw,34px);
}
.start__schaum{margin:0}
.start__schaum img{
  width:clamp(112px,13vw,178px);aspect-ratio:1;object-fit:cover;
  border-radius:var(--rund-m);
}
.start__tafel .knopf{align-self:flex-start;margin-top:auto}
.start__bild{margin:0;border-radius:var(--rund-l);overflow:hidden}
.start__bild img{width:100%;height:100%;min-height:420px;object-fit:cover}

/* --------------------------------------------------------------- Merkmale */
.merkmale{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.merkmal{
  border-radius:var(--rund-m);padding:clamp(20px,2vw,28px);
  transition:transform var(--ruhig),box-shadow var(--ruhig);
}
.merkmal--gruen{background:var(--pistazie)}
.merkmal--gelb{background:var(--mango)}
.merkmal h2{font-size:clamp(18px,1.35vw,21px);color:var(--flieder-dunkel);margin-bottom:10px}
.merkmal p{color:var(--tinte);font-size:.95em}

/* ============================================================== Leistungen */
.leistungen{padding-top:var(--luft)}
.bento{
  display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-rows:minmax(178px,1fr);gap:16px;
}
.kachel{
  position:relative;overflow:hidden;border-radius:var(--rund-m);
  display:flex;align-items:flex-end;padding:18px;text-decoration:none;
  background:var(--lavendel);
  transition:transform var(--ruhig),box-shadow var(--ruhig);
}
.kachel--breit{grid-column:span 2}
.kachel--hoch{grid-row:span 2}
.kachel--flieder{background:var(--flieder)}
.kachel--pistazie{background:var(--pistazie)}
.kachel--flieder::after,.kachel--pistazie::after{
  content:"";position:absolute;right:-40px;top:-60px;width:230px;height:230px;border-radius:50%;
  border:40px solid rgba(255,255,255,.16);pointer-events:none;
}
.kachel--pistazie::after{border-color:rgba(79,79,188,.10)}
.kachel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.22,.61,.36,1)}
.kachel__schild{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:9px;
  background:#fff;border-radius:999px;padding:10px 18px;
  font-family:'Jost',sans-serif;font-weight:500;font-size:.98em;color:var(--tinte);
  box-shadow:0 6px 18px rgba(47,47,66,.12);
  transition:color var(--schnell),box-shadow var(--ruhig);
}
.kachel__schild .pfeil{color:var(--flieder-dunkel)}

/* ==================================================================== Über */
.ueber{padding-top:var(--luft)}
.ueber__tafel{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,60px);
  background:#fff;border-radius:var(--rund-l);padding:clamp(26px,3.4vw,52px);
  box-shadow:var(--schatten-weich);
}
.ueber__links .haken{margin-top:22px}
.zahlen{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,34px);margin:0}
.zahlen div{margin:0}
.zahlen dt{font-family:'Jost',sans-serif;font-weight:600;font-size:clamp(26px,2.6vw,38px);color:var(--flieder-dunkel);line-height:1.05}
.zahlen div:nth-child(even) dt{color:var(--gold)}
.zahlen dd{margin:8px 0 0;font-size:.93em;color:var(--tinte-weich);line-height:1.45}

/* ============================================================== Ergebnisse */
.ergebnisse{background:var(--flieder-tief);padding:var(--luft) 0;margin-top:var(--luft);color:#fff}
.ergebnisse .abschnitt__kopf{align-items:center}
.fall{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,3vw,44px);align-items:start}
.fall[hidden]{display:none}
.fall__zeile{display:flex;justify-content:space-between;gap:16px;margin:0;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.24)}
.fall__zeile span{color:rgba(255,255,255,.92)}
.fall__zeile b{font-family:'Jost',sans-serif;font-weight:500}
.fall__liste{list-style:none;margin:20px 0 26px;padding:0;display:grid;gap:9px}
.fall__liste li{position:relative;padding-left:26px;font-size:.95em;color:rgba(255,255,255,.92)}
.fall__liste li::before{
  content:"";position:absolute;left:2px;top:.42em;width:11px;height:7px;
  border-left:2px solid var(--mango);border-bottom:2px solid var(--mango);transform:rotate(-45deg);
}

/* ================================================================ Vorteile */
.vorteile{padding-top:var(--luft)}
.mosaik{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stein{
  border-radius:var(--rund-m);padding:clamp(20px,2vw,26px);margin:0;
  display:flex;flex-direction:column;justify-content:center;min-height:186px;
  transition:transform var(--ruhig),box-shadow var(--ruhig);
}
.stein h3{font-family:'Jost',sans-serif;font-weight:600;font-size:clamp(17px,1.3vw,20px);margin:0 0 10px;color:var(--flieder-dunkel)}
.stein p{font-size:.93em;color:var(--tinte-weich)}
.stein--lavendel{background:var(--lavendel)}
.stein--gelb{background:var(--mango)}
.stein--gelb p{color:var(--tinte)}
.stein--pistazie{background:var(--pistazie)}
.stein--pistazie p{color:var(--tinte)}
.stein--flieder{background:var(--flieder-tief)}
.stein--flieder h3{color:#fff}
.stein--flieder p{color:rgba(255,255,255,.92)}
.stein--bild{padding:0;overflow:hidden}
.stein--bild img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.22,.61,.36,1)}

/* ==================================================================== Band */
.band{margin:var(--luft) 0 0;overflow:hidden}
.band img{width:100%;aspect-ratio:20/9;object-fit:cover}

/* ================================================================ Aktionen */
.aktionen{padding-top:var(--luft)}
.aktion__gitter{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(180px,auto);gap:16px}
.aktion,.aktion__bild{border-radius:var(--rund-m);margin:0;overflow:hidden}
.aktion{padding:clamp(22px,2.2vw,32px);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.aktion h3{font-family:'Jost',sans-serif;font-weight:600;font-size:clamp(18px,1.5vw,24px);margin:0 0 12px}
.aktion h3 em{font-style:normal}
.aktion p{font-size:.95em}
.aktion--gelb{background:var(--mango)}
.aktion--gelb h3{color:var(--flieder-dunkel)}
.aktion--gelb h3 em{color:var(--tinte)}
.aktion--pistazie{background:var(--pistazie)}
.aktion--pistazie h3{color:var(--flieder-dunkel)}
.aktion--flieder{background:var(--flieder-tief);color:#fff}
.aktion--flieder h3{color:#fff;font-size:clamp(22px,2.2vw,34px)}
.aktion--flieder h3 em{color:var(--mango)}
.aktion--flieder p{color:rgba(255,255,255,.92)}
.aktion--flieder::after{
  content:"";position:absolute;right:-70px;bottom:-90px;width:280px;height:280px;border-radius:50%;
  border:46px solid rgba(255,255,255,.08);pointer-events:none;
}
.aktion--gross{grid-row:span 2}
.aktion__bild img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.22,.61,.36,1)}

/* ============================================================= Bewertungen */
.bewertungen{background:var(--flieder-tief);padding:var(--luft) 0;margin-top:var(--luft);color:#fff}
.bewertungen .abschnitt__kopf{align-items:center}

/* ===================================================================== FAQ */
.faq{padding-top:var(--luft)}
.faq .titel{margin-bottom:clamp(22px,2.6vw,36px)}
.faq__gitter{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,4vw,64px)}

/* ================================================================= Kontakt */
.kontakt{padding-top:var(--luft)}
.kontakt .titel{margin-bottom:clamp(22px,2.6vw,36px)}
.kontakt__gitter{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;align-items:stretch}
.kontakt__form{
  background:var(--flieder-tief);color:#fff;border-radius:var(--rund-l);
  padding:clamp(24px,3vw,44px);display:grid;gap:16px;align-content:start;
}
.kontakt__text{color:rgba(255,255,255,.92);max-width:46ch}
.kontakt__reihe{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kontakt__form .knopf{justify-self:start}
.kontakt__meldung{margin:0;min-height:1.4em;font-size:.92em;color:var(--mango-hell)}
.kontakt__bild{margin:0;border-radius:var(--rund-l);overflow:hidden}
.kontakt__bild img{width:100%;height:100%;min-height:380px;object-fit:cover}

/* =================================================================== Schmal */
@media (hover:hover) and (pointer:fine){
  .merkmal:hover,.stein:hover{transform:translateY(-4px);box-shadow:var(--schatten-weich)}
  .kachel:hover{transform:translateY(-4px);box-shadow:var(--schatten-tief)}
  .kachel:hover img,.stein--bild:hover img,.aktion__bild:hover img{transform:scale(1.06)}
  .kachel:hover .kachel__schild{color:var(--flieder-dunkel);box-shadow:0 10px 26px rgba(47,47,66,.2)}
  .kachel:hover .kachel__schild .pfeil{transform:translateX(4px)}
}

@media (max-width:1080px){
  .start__gitter{grid-template-columns:1fr}
  .start__bild img{min-height:320px}
  .ueber__tafel{grid-template-columns:1fr}
  .fall{grid-template-columns:1fr}
  .kontakt__gitter{grid-template-columns:1fr}
  .kontakt__bild img{min-height:300px}
}
@media (max-width:860px){
  .merkmale{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr 1fr}
  .kachel--breit,.kachel--hoch{grid-column:auto;grid-row:auto}
  .mosaik{grid-template-columns:1fr 1fr}
  .aktion__gitter{grid-template-columns:1fr 1fr}
  .aktion--gross{grid-row:auto;grid-column:span 2}
  .faq__gitter{grid-template-columns:1fr}
  .abschnitt__kopf{flex-direction:column;align-items:flex-start;gap:18px}
}
@media (max-width:560px){
  .start__gitter{padding:10px;border-radius:var(--rund-l)}
  .start__mitte{grid-template-columns:1fr}
  .bento,.mosaik,.aktion__gitter{grid-template-columns:1fr}
  .aktion--gross{grid-column:auto}
  .zahlen{grid-template-columns:1fr}
  .kontakt__reihe{grid-template-columns:1fr}
  .band img{aspect-ratio:4/3}
}