/* Dr. Crop — Website
   Farben und Schrift sind bewusst identisch mit der App, damit jemand, der
   von hier in den Store und dann in die App geht, dasselbe Produkt wiedererkennt. */

:root {
  --tanne:       #1A4331;   /* primary: Kopfzeilen, Titel */
  --tanne-hell:  #2A5D46;
  --creme:       #F0E6D2;   /* Seitenhintergrund */
  --papier:      #FCFBF7;   /* Karten, Eingabefelder */
  --rost:        #8B4A38;   /* Akzent: Knöpfe, Hervorhebungen */
  --rost-hell:   #A85B47;
  --teal:        #39D2C0;   /* Zweitakzent, sparsam */
  --text:        #23312B;
  --text-leise:  #5E6B63;
  --rand:        rgba(139, 74, 56, .22);
  --schatten:    0 2px 14px rgba(26, 67, 49, .09);
  --schatten-tief: 0 10px 34px rgba(26, 67, 49, .16);
  --breite:      1080px;
  --radius:      16px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--text);
  font-family: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* height: auto ist hier nicht Kosmetik: die Bilder tragen width/height im
   HTML (damit beim Laden nichts springt). Begrenzt max-width dann die
   Breite, bliebe die Hoehe auf dem Attributwert stehen und das Bild waere
   verzerrt -- genau das passierte beim Portraet. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--rost); }

.huelle { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 22px; }

/* ---------- Kopfzeile ---------- */

.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--tanne);
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
}
.kopf .huelle {
  display: flex; align-items: center; gap: 18px;
  min-height: 62px;
}
.marke { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
/* Das Logo ist nicht quadratisch (96x77). Eine feste Hoehe von 32 px
   quetschte es zusammen. */
.marke img { width: 34px; height: auto; }
.marke .text { display: flex; flex-direction: column; line-height: 1.15; }
.marke b { color: #fff; font-size: 1.16rem; letter-spacing: -.01em; }
/* Nur der Untertitel wird gesperrt und in Versalien gesetzt -- ein
   Nachfahren-Selektor auf span faerbte sonst auch den Markennamen mit. */
.marke .unter { color: rgba(255,255,255,.62); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }

.navi { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.navi a {
  color: rgba(255,255,255,.86); text-decoration: none;
  padding: 7px 12px; border-radius: 9px; font-size: .93rem;
}
.navi a:hover, .navi a:focus-visible { background: rgba(255,255,255,.12); color: #fff; }

.sprache {
  display: flex; gap: 2px; margin-left: 6px;
  background: rgba(255,255,255,.11); border-radius: 9px; padding: 3px;
}
.sprache button {
  border: 0; background: none; cursor: pointer;
  color: rgba(255,255,255,.72); font: inherit; font-size: .8rem; font-weight: 600;
  padding: 4px 9px; border-radius: 7px;
}
.sprache button[aria-pressed="true"] { background: var(--papier); color: var(--tanne); }

/* ---------- Abschnitte ---------- */

section { padding: 76px 0; }
section.schmal { padding: 54px 0; }

h1, h2, h3 { color: var(--tanne); line-height: 1.2; text-wrap: balance; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.35rem); letter-spacing: -.025em; }
h2 { font-size: clamp(1.55rem, 3.4vw, 2.15rem); letter-spacing: -.018em; }
h3 { font-size: 1.14rem; }
p  { margin: 0 0 1.05em; max-width: 66ch; }
.leise { color: var(--text-leise); }

.augenbraue {
  color: var(--rost); font-size: .76rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: .7em;
}

/* ---------- Aufmacher ---------- */

.aufmacher { padding: 64px 0 60px; }
.aufmacher .huelle {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 52px; align-items: center;
}
.aufmacher p.gross { font-size: 1.14rem; color: var(--text-leise); }
/* Das Aufmacherbild ist ein hohes Hochformat (440x908). Ungebremst waere der
   Aufmacher ueber 1000 px hoch und die Ueberschrift verschwaende neben einem
   Plakat. Deshalb ueber die Hoehe begrenzt, Breite folgt dem Seitenverhaeltnis. */
.aufmacher img {
  border-radius: 20px; box-shadow: var(--schatten-tief);
  max-height: 540px; width: auto; justify-self: center;
}

.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.knopf {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--rost); color: #fff; text-decoration: none;
  padding: 13px 24px; border-radius: 12px; font-weight: 600; font-size: 1rem;
  border: 0; cursor: pointer; font-family: inherit;
  transition: background .15s ease, transform .15s ease;
}
.knopf:hover { background: var(--rost-hell); transform: translateY(-1px); }
.knopf.zweit { background: transparent; color: var(--tanne); border: 1.5px solid var(--rand); }
.knopf.zweit:hover { background: var(--papier); }
.knopf[disabled] { opacity: .55; cursor: default; transform: none; }

/* ---------- Karten ---------- */

.gitter { display: grid; gap: 20px; }
.gitter.zwei { grid-template-columns: repeat(2, 1fr); }

.karte {
  background: var(--papier); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--schatten);
}
.karte h3 { margin-bottom: .35em; }
.karte p:last-child { margin-bottom: 0; }
.karte .symbol { font-size: 1.6rem; line-height: 1; margin-bottom: 12px; display: block; }

/* ---------- Kein gewoehnlicher Chatbot ---------- */

.hirn { background: var(--tanne); }
.hirn .huelle { text-align: center; max-width: 760px; }
.hirn .augenbraue { color: var(--teal); }
.hirn h2 { color: #fff; }
.hirn p.lead {
  color: rgba(255,255,255,.84); font-size: 1.1rem;
  margin: 0 auto 40px; max-width: 62ch;
}

/* Vier Kacheln -- 2x2 statt 3+1, das bliebe sonst unausgeglichen. */
.hirn-claims { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; text-align: left; }
.hirn-claim {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius); padding: 22px;
}
.hirn-claim .zahl {
  display: block; font-weight: 700; font-size: 1.2rem; line-height: 1.3;
  color: var(--teal); margin-bottom: 8px;
}
.hirn-claim p { color: rgba(255,255,255,.78); font-size: .92rem; margin: 0; }

.hirn-mensch {
  display: flex; align-items: center; gap: 20px; text-align: left;
  margin-top: 20px; padding: 22px 26px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
}
.hirn-mensch img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.hirn-mensch p { color: rgba(255,255,255,.84); font-size: .93rem; margin: 0 0 14px; }

.hirn-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.hirn-tags span {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.86); font-size: .78rem; font-weight: 600;
  padding: 5px 12px; border-radius: 20px;
}

/* ---------- Bildschirmfotos ---------- */

.schirme { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.schirme figure { margin: 0; }
.schirme img { border-radius: 16px; border: 1px solid var(--rand); box-shadow: var(--schatten); }
.schirme figcaption { font-size: .88rem; color: var(--text-leise); margin-top: 10px; text-align: center; }

/* ---------- Preise ---------- */

.preise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.preis {
  background: var(--papier); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 26px; display: flex; flex-direction: column;
}
.preis.hervor { border-color: var(--rost); border-width: 2px; box-shadow: var(--schatten-tief); }
/* Bewusst ohne .preis davor: die Grow-Pass-Karte ist eine .karte, keine
   .preis-Spalte, und blieb mit dem engeren Selektor ohne Auszeichnung. */
.marke-oben {
  font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--rost); margin-bottom: 10px;
}
.preis .betrag { font-size: 2.15rem; font-weight: 700; color: var(--tanne); line-height: 1.1; }
.preis .betrag small { font-size: .95rem; font-weight: 500; color: var(--text-leise); }
.preis ul { list-style: none; padding: 0; margin: 16px 0 0; }
.preis li { padding: 5px 0 5px 25px; position: relative; font-size: .95rem; }
.preis li::before { content: "✓"; position: absolute; left: 0; color: var(--rost); font-weight: 700; }

/* ---------- Fragen ---------- */

details.frage {
  background: var(--papier); border: 1px solid var(--rand);
  border-radius: 12px; padding: 0; margin-bottom: 10px; overflow: hidden;
}
details.frage summary {
  cursor: pointer; padding: 16px 20px; font-weight: 600; color: var(--tanne);
  list-style: none; display: flex; justify-content: space-between; gap: 14px; align-items: center;
}
details.frage summary::-webkit-details-marker { display: none; }
details.frage summary::after { content: "+"; color: var(--rost); font-size: 1.35rem; line-height: 1; }
details.frage[open] summary::after { content: "−"; }
details.frage .antwort { padding: 0 20px 18px; }
details.frage .antwort p:last-child { margin-bottom: 0; }

/* ---------- Hinweisstreifen ---------- */

.hinweis {
  background: rgba(139, 74, 56, .09); border: 1px solid var(--rand);
  border-radius: 12px; padding: 16px 20px; font-size: .95rem;
  /* p erbt sonst max-width: 66ch und der Kasten endet mitten unter den
     Preiskarten, als waere er abgeschnitten. */
  max-width: none;
}
.hinweis strong { color: var(--rost); }

/* ---------- Über den Macher ---------- */

.portraet {
  display: grid; grid-template-columns: 190px 1fr; gap: 34px; align-items: start;
}
.portraet img { border-radius: 18px; box-shadow: var(--schatten); }
.portraet .tagline {
  color: var(--rost); font-weight: 700; font-size: 1.05rem;
  margin: -6px 0 16px;
}

.beleg { border-left: 3px solid var(--rost); padding-left: 20px; margin: 0 0 26px; }
.beleg h3 { margin-bottom: .3em; }

/* ---------- Fußzeile ---------- */

.fuss { background: var(--tanne); color: rgba(255,255,255,.74); padding: 46px 0 34px; margin-top: 20px; }
.fuss a { color: rgba(255,255,255,.9); }
.fuss .huelle { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; }
.fuss h4 { color: #fff; font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; margin: 0 0 12px; }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { margin-bottom: 7px; font-size: .93rem; }
.fuss .unten {
  border-top: 1px solid rgba(255,255,255,.14); margin-top: 30px; padding-top: 18px;
  font-size: .85rem; color: rgba(255,255,255,.55);
}

/* ---------- Rechtstexte ---------- */

.rechtstext { max-width: 760px; }
.rechtstext h2 { margin-top: 1.8em; font-size: 1.3rem; }
.rechtstext h2:first-of-type { margin-top: 0; }
.platzhalter {
  background: rgba(139, 74, 56, .1); border: 1px dashed var(--rost);
  border-radius: 8px; padding: 3px 10px; color: var(--rost); font-size: .93rem;
  display: inline-block;
}

/* ---------- Schmale Bildschirme ---------- */

@media (max-width: 900px) {
  .aufmacher .huelle { grid-template-columns: 1fr; gap: 34px; }
  .aufmacher img { max-width: 300px; margin: 0 auto; }
  .gitter.zwei, .preise, .hirn-claims { grid-template-columns: 1fr; }
  .hirn-mensch { flex-direction: column; text-align: center; }
  .hirn-tags { justify-content: center; }
  /* Untereinander waeren die drei Telefonbilder rund 2400 px Scrollweg.
     Als wischbare Reihe bleibt der Abschnitt ueberschaubar. */
  .schirme {
    grid-template-columns: repeat(3, 76%);
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 8px; margin-right: -22px; padding-right: 22px;
  }
  .schirme figure { scroll-snap-align: center; }
  .portraet { grid-template-columns: 1fr; }
  .portraet img { max-width: 175px; }
  .fuss .huelle { grid-template-columns: 1fr; gap: 24px; }
  section { padding: 54px 0; }
  .navi a { padding: 7px 9px; font-size: .88rem; }
}
/* Auf dem Telefon passen Marke, vier Links und der Sprachschalter nicht in
   eine Zeile -- die Links schoben sich sonst ueber den Markennamen und liefen
   rechts aus dem Bild. Die Abschnittslinks entfallen dort (man scrollt
   ohnehin); sichtbar bleibt nur der Link, der auf eine andere Seite fuehrt. */
@media (max-width: 760px) {
  .navi a { display: none; }
  .navi a.wichtig { display: inline-flex; }
}
@media (max-width: 560px) {
  .marke .unter { display: none; }
  .marke b { font-size: 1.05rem; }
  .navi { gap: 0; }
  .navi a.wichtig { padding: 7px 6px; font-size: .84rem; }
}