/* MYVEG – Abschnitts-Stile, von Startseite und Unterseiten geteilt */

/* ---------- nur fuer die Startseite ---------- */

/* Hero (Titelseite der Mappe) */
.hero{position:relative;overflow:hidden;background:var(--gruen-tief);color:#fff;padding:120px 0 90px}
.scheibe{position:absolute;border-radius:50%;background:var(--salbei);pointer-events:none}
.scheibe--gross{width:640px;height:640px;top:-230px;right:-160px;opacity:.95}
.scheibe--klein{width:300px;height:300px;bottom:-180px;left:-130px;opacity:.14}
.hero .wrap{position:relative;z-index:2}
.hero__titel{font-size:clamp(34px,5.6vw,60px);line-height:1.1;margin:0 0 30px}
.hero__titel .leicht{display:block;font-weight:200;color:rgba(255,255,255,.78)}
.hero__strich{width:112px;height:2px;background:#fff;margin:0 0 30px}
.hero__text{max-width:52ch;color:rgba(255,255,255,.82);font-size:17px}
.hero__aktion{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero__fuss{margin-top:64px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.5);line-height:2}

/* Warum MYVEG */
.zweispalt{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;margin-top:52px}
.punkte{display:grid;gap:30px}
.punkt{display:grid;grid-template-columns:44px 1fr;gap:18px}
.punkt__nr{font-size:26px;font-weight:200;color:var(--salbei);line-height:1;padding-top:2px}
.punkt h3{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.punkt p{font-size:14px;color:var(--text-leise)}
.merksatz{margin-top:64px;background:var(--gruen-tief);color:#fff;border-radius:8px;padding:44px 48px}
.merksatz p{color:rgba(255,255,255,.72);font-size:14px;margin-top:16px;max-width:76ch}

/* Vergleich */
.vergleich{width:100%;border-collapse:collapse;margin-top:52px;font-size:14px}
.vergleich th{text-align:left;font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:10px;padding:16px 20px;vertical-align:bottom}
.vergleich th.v-klassisch{color:var(--text-leise)}
.vergleich th.v-myveg{background:var(--gruen-tief);color:#fff}
.vergleich td{padding:18px 20px;border-top:1px solid var(--linie);vertical-align:top}
.vergleich td.v-label{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;width:1%}
.vergleich td.v-klassisch{color:var(--text-leise)}
.vergleich td.v-myveg{background:var(--salbei-hell)}
.vergleich strong{font-weight:600;color:var(--gruen-tief)}
.tabelle-scroll{overflow-x:auto}

/* Methode */
.schritte{display:grid;gap:0;margin-top:52px}
.schritt{display:grid;grid-template-columns:52px 1fr;gap:20px;padding:24px 0;border-top:1px solid var(--linie)}
.schritt:first-child{border-top:0}
.schritt__nr{width:34px;height:34px;border-radius:50%;background:var(--gruen-tief);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:600}
.schritt h3{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.schritt p{font-size:14px;color:var(--text-leise)}

/* Rituale */
.ritual-spalten{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:52px}
.plakette{display:inline-block;color:#fff;border-radius:99px;padding:6px 18px;margin-bottom:26px;font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.plakette--kopfhaut{background:var(--beere)}
.plakette--haare{background:var(--petrol)}
.ritual{border-left:3px solid var(--linie);padding:0 0 0 18px;margin-bottom:26px}
.ritual--kopfhaut{border-left-color:var(--beere)}
.ritual--haare{border-left-color:var(--petrol)}
.ritual h3{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.ritual p{font-size:13px;color:var(--text-leise)}
.ritual .rezept{color:var(--text);font-size:13px;margin-top:4px}

/* Technologien */
.tech-karten{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.tech{border-radius:8px;padding:34px 30px;color:#fff}
.tech--mist{background:var(--petrol)}
.tech--oxi{background:var(--gruen-mittel)}
.tech--mix{background:var(--beere)}
.tech h3{font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;margin-bottom:16px}
.tech p{font-size:14px;color:rgba(255,255,255,.82)}
.tech strong{color:#fff;font-weight:600}

/* Nutzen */
.nutzen{margin-top:52px;list-style:none}
.nutzen li{display:grid;grid-template-columns:14px 1fr;gap:16px;align-items:start;padding:18px 0;border-top:1px solid rgba(255,255,255,.14);font-size:14px;color:rgba(255,255,255,.78)}
.nutzen li:first-child{border-top:0}
.nutzen li::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--salbei);margin-top:7px}
.nutzen b{color:#fff;font-weight:600}

/* Homecare-Band */
.homecare-band{background:var(--salbei-hell);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);padding:64px 0}
.homecare-band__inner{display:grid;grid-template-columns:1.4fr 1fr;gap:56px;align-items:center}
.homecare-band h2{font-size:clamp(24px,3vw,34px);margin-bottom:16px}
.homecare-band h2 .leicht{display:block;font-weight:200;color:var(--text-leise)}
.homecare-band p{font-size:15px;color:var(--text-leise);max-width:56ch}
.homecare-band__aktion{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.homecare-band__bild{border-radius:6px;overflow:hidden;aspect-ratio:4/3}
.homecare-band__bild img{width:100%;height:100%;object-fit:cover}

/* Salonfinder-Teaser */
.finder-teaser{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;background:var(--gruen-tief);color:#fff;border-radius:8px;padding:38px 44px;margin-top:64px}
.finder-teaser h3{font-size:20px;margin-bottom:8px}
.finder-teaser p{font-size:14px;color:rgba(255,255,255,.72);max-width:60ch}

/* Kontakt */
.kontakt-raster{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:52px;align-items:start}
.feld{margin-bottom:18px}
.feld label{display:block;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-leise);margin-bottom:7px}
.feld input,.feld textarea{width:100%;font-family:inherit;font-size:15px;font-weight:300;color:var(--text);border:1px solid var(--linie);border-radius:2px;padding:12px 14px;background:#fff}
.feld input:focus,.feld textarea:focus{outline:2px solid var(--salbei);outline-offset:1px;border-color:var(--salbei)}
.feld textarea{min-height:130px;resize:vertical}
.zustimmung{display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start;font-size:12px;color:var(--text-leise);margin:22px 0}
.zustimmung input{margin-top:3px}
.karte-kontakt{background:var(--gruen-tief);color:#fff;border-radius:8px;padding:44px 40px}
.karte-kontakt h3{font-size:13px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:26px}
.karte-kontakt .person{margin-bottom:24px;font-size:14px;color:rgba(255,255,255,.78)}
.karte-kontakt .person b{display:block;color:#fff;font-weight:600;margin-bottom:4px}
.karte-kontakt a{color:var(--gold);text-decoration:none}
.karte-kontakt a:hover{text-decoration:underline}
.karte-kontakt .klein{font-size:11px;color:rgba(255,255,255,.45);margin-top:30px;line-height:1.8}

@media (max-width:900px){
  .zweispalt,.ritual-spalten,.kontakt-raster,.homecare-band__inner{grid-template-columns:1fr;gap:40px}
  .tech-karten{grid-template-columns:1fr}
  .finder-teaser{grid-template-columns:1fr;gap:22px;padding:30px 26px}
  .hero{padding:80px 0 64px}
  .scheibe--gross{width:340px;height:340px;top:-140px;right:-110px}
  .merksatz{padding:32px 26px}
}

/* ---------- Teaser-Raster auf der Startseite ---------- */
.teaser-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.teaser{display:flex;flex-direction:column;background:#fff;border:1px solid var(--linie);border-radius:8px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .18s,box-shadow .18s,border-color .18s}
.teaser:hover,.teaser:focus-visible{transform:translateY(-4px);box-shadow:0 16px 40px rgba(60,74,53,.16);border-color:var(--salbei)}
.teaser__bild{aspect-ratio:4/3;overflow:hidden;background:var(--salbei-hell)}
.teaser__bild img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.teaser:hover .teaser__bild img{transform:scale(1.04)}
.teaser__text{padding:26px 26px 30px;display:flex;flex-direction:column;gap:8px;flex:1}
.teaser__label{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.teaser__text h3{font-size:18px;line-height:1.25}
.teaser__text p{font-size:14px;color:var(--text-leise)}
.teaser__pfeil{margin-top:auto;padding-top:10px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gruen-tief)}
.teaser:hover .teaser__pfeil{color:var(--gold)}
@media (max-width:900px){.teaser-raster{grid-template-columns:1fr}}

/* =========================================================================
   Ergänzungen Oktober 2026: Blog, Rechtstexte, Formular
   ========================================================================= */

/* Hinweis unter den Ritualen */
.rituale-hinweis{font-size:12px;color:var(--text-leise);margin:8px 0 40px;max-width:70ch}

/* Unsichtbares Spam-Schutzfeld im Kontaktformular */
.feld-falle{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
#k-senden[disabled]{opacity:.6;cursor:wait}

/* Kopfbereich Blog / Rechtstexte */
.unter-kopf .meta{margin-top:22px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.unter-kopf--schmal{padding:56px 0 46px}

/* Blog-Übersicht */
.blog-raster{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.blog-raster{grid-template-columns:1fr}}

/* Artikel */
.artikel-bild{max-width:960px;margin:-28px auto 0;padding:0 28px;position:relative;z-index:3}
.artikel-bild img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px;box-shadow:0 18px 44px rgba(44,51,42,.18)}
.artikel{max-width:720px;margin:0 auto;padding:56px 28px 24px}
.artikel p{font-size:16px;line-height:1.8;margin:0 0 18px}
.artikel .intro{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:clamp(21px,2.4vw,25px);line-height:1.5;color:var(--gruen-tief);margin-bottom:26px}
.artikel h2{font-size:clamp(20px,2.4vw,24px);margin:44px 0 16px}
.artikel h3{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin:30px 0 10px;color:var(--gruen-tief)}
.artikel a{color:var(--gruen-tief)}
.artikel strong{font-weight:600}
.artikel .frage{margin-top:36px;padding:22px 26px;background:var(--salbei-hell);border-left:3px solid var(--salbei);border-radius:2px;font-weight:500}
.artikel .quelle{font-size:12px;color:var(--text-leise);margin-top:30px}
.blatt{list-style:none;margin:10px 0 22px;padding:0}
.blatt li{display:flex;gap:14px;align-items:flex-start;margin:14px 0;font-size:16px;line-height:1.7}
.blatt .blatt-icon{flex:none;width:22px;height:22px;margin-top:3px;fill:var(--gruen-tief)}
.artikel-ende{max-width:720px;margin:0 auto;padding:0 28px 88px}
.artikel-ende .finder-teaser{margin-top:28px}
.zurueck-link{display:inline-block;margin-top:34px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--gruen-tief)}
.zurueck-link:hover{color:var(--gold)}

/* Rechtstexte */
.rechtstext{max-width:760px;margin:0 auto;padding:64px 28px 90px}
.rechtstext h2{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin:38px 0 10px;color:var(--gruen-tief)}
.rechtstext h2:first-child{margin-top:0}
.rechtstext p,.rechtstext li{font-size:15px;color:var(--text-leise)}
.rechtstext ul{margin:10px 0 0 20px}
.rechtstext a{color:var(--gruen-tief)}