/* Webseite shopkobel.com (22.10.2026) – Aufbau wie cookobel.de, Farben wie die App (Design „Petrol“, Logo-Fläche #165059);
   helle Flächen leicht petrol getönt (Betreiber: „etwas mehr in Richtung Petrol, aber immer noch hell“).
   Überschriften: DM Serif Display (SIL Open Font License, schrift/OFL.txt), sonst die Systemschrift. Immer hell. */
@font-face { font-family: "DM Serif Display"; src: url("schrift/DMSerifDisplay-Regular.ttf") format("truetype"); font-display: swap; }
:root {
  color-scheme: only light;
  --petrol: #165059; --petrol-dunkel: #0f3b42; --leder: #dcae6a; --leder-hell: #f0dcb4;
  --bg: #dcebe9; --flaeche: #e7f1f0; --karte: #f2f8f7; --text: #1c2a2d; --leise: #4f6467; --linie: #c2d7d4; --akzent: #1b6471; --gruen: #3f8a33;
  --schatten: 0 1px 2px rgba(10, 50, 55, .08), 0 12px 32px rgba(10, 50, 55, .14);
  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --breite: 1120px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.6 var(--sans); }
img { max-width: 100%; display: block; }
a { color: var(--akzent); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.12; margin: 0; text-wrap: balance; color: var(--petrol); }
.innen { max-width: var(--breite); margin: 0 auto; padding-inline: 20px; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 10; background: var(--petrol); border-bottom: 3px solid var(--leder); }
.kopf .innen { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.kopf .logo img { height: 40px; width: auto; }
.kopf nav { margin-left: auto; display: flex; gap: 22px; align-items: center; }
.kopf nav a { color: #eef6f5; text-decoration: none; font-size: .95rem; }
.kopf nav a:hover { color: var(--leder-hell); }
@media (max-width: 760px) { .kopf nav a:not(.sprache) { display: none; } }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font: 600 1rem var(--sans);
  text-decoration: none; border: 2px solid var(--petrol); background: var(--petrol); color: #f4faf9; cursor: pointer; }
.knopf.leise { background: transparent; color: var(--petrol); }
.bald { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px 9px 14px; border-radius: 14px; background: var(--petrol-dunkel);
  color: #eef6f5; font-size: .85rem; line-height: 1.25; }
.bald svg { width: 26px; height: 26px; }
.bald b { display: block; font-size: 1.02rem; }

/* Einstieg */
.held { padding: 64px 0 48px; overflow: hidden; }
.held .innen { display: grid; grid-template-columns: .95fr 1.05fr; gap: 56px; align-items: center; }
.dachzeile { font: 600 .82rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--akzent); margin: 0 0 14px; }
.held h1 { font-size: clamp(2.3rem, 5vw, 3.4rem); }
.lead { font-size: 1.15rem; color: var(--leise); margin: 20px 0 26px; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.aussprache { margin-top: 22px; font-size: .92rem; color: var(--leise); }
@media (max-width: 900px) { .held .innen { grid-template-columns: 1fr; } }

/* Szenen (mit KI erzeugt, Impressum): Bild mit runden Ecken, davor klein die App */
.szene { position: relative; margin: 0; }
.szene > img { width: 100%; border-radius: 24px; box-shadow: var(--schatten); }
.szene .handy.klein { position: absolute; width: 150px; left: -22px; bottom: -34px; border-width: 6px; border-radius: 22px; }
.held-szene { margin: 0 0 56px; }
.held-szene .handy.klein { width: 175px; left: -40px; bottom: -56px; border-width: 7px; border-radius: 24px; }   /* davor die Liste, die sie gerade einspricht */
.szene.breit { margin-bottom: 40px; }
.szene.breit > img { max-height: 400px; object-fit: cover; object-position: center 38%; }
.reihe.szene-reihe { grid-template-columns: 1fr 1.15fr; }
.reihe.links.szene-reihe { grid-template-columns: 1.15fr 1fr; }
.reihe.links > .szene { order: -1; }
@media (max-width: 900px) {
  .szene .handy.klein { width: 110px; left: 12px; bottom: -26px; }
  .held-szene { margin: 0 0 70px 0; }
  .held-szene .handy.klein { width: 130px; left: 12px; bottom: -64px; }
}
@media (max-width: 760px) { .reihe.szene-reihe, .reihe.links.szene-reihe { grid-template-columns: 1fr; } .reihe .szene, .reihe.links > .szene { order: 2; margin-bottom: 26px; } }

.handy { border: 9px solid #12292d; border-radius: 30px; overflow: hidden; background: #12292d; box-shadow: var(--schatten); }

/* Versprechen */
.versprechen { background: var(--petrol); color: #e9f3f2; padding: 34px 0; }
.versprechen .innen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.zusage h2 { color: #fff; font-size: 1.35rem; margin: 10px 0 6px; }
.zusage p { margin: 0; font-size: .95rem; color: #cfe2e0; }
.haken { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--leder); color: var(--petrol-dunkel); }
.haken svg { width: 20px; height: 20px; }
@media (max-width: 900px) { .versprechen .innen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .versprechen .innen { grid-template-columns: 1fr; } }

/* Abschnitte */
section { padding: 72px 0; }
section.hell { background: var(--flaeche); }
.abschnitt-kopf { max-width: 720px; margin-bottom: 40px; }
.abschnitt-kopf h2 { font-size: clamp(2rem, 4.2vw, 2.9rem); }
.abschnitt-kopf p { color: var(--leise); font-size: 1.08rem; margin: 14px 0 0; }
.reihe { display: grid; grid-template-columns: 1fr 260px; gap: 48px; align-items: center; margin-bottom: 56px; }
.reihe:last-child { margin-bottom: 0; }
.reihe.links { grid-template-columns: 260px 1fr; }
.reihe.links > .handy { order: -1; }
.reihe h3 { font-size: 1.75rem; margin-bottom: 10px; }
/* Einsprechen: was man nacheinander sagt, als Sprechblasen – dieselben Wörter wie im Bild daneben (fotos.mjs „gesprochen“) */
.sprechfolge { list-style: none; margin: 14px 0 18px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sprechfolge li { font: 400 1.2rem var(--serif); color: var(--petrol); background: var(--karte); border: 1px solid var(--linie);
  border-radius: 18px 18px 18px 4px; padding: 6px 15px; box-shadow: 0 1px 2px rgba(10, 50, 55, .08); }
.sprechfolge li.ende { background: var(--petrol); border-color: var(--petrol); color: #f4faf9; }
.sprechfolge li.mikro { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 0;
  background: var(--petrol); color: #f4faf9; box-shadow: var(--schatten); }
.sprechfolge li.mikro svg { width: 22px; height: 22px; }
.reihe p { margin: 0 0 10px; }
@media (max-width: 760px) {
  .reihe, .reihe.links { grid-template-columns: 1fr; gap: 24px; }
  .reihe > .handy { width: 220px; margin: 0 auto; order: 2; }
}
.karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 18px; padding: 24px; }
.karte h3 { font-size: 1.4rem; margin-bottom: 8px; }
.karte p { margin: 0; color: var(--leise); }
@media (max-width: 900px) { .karten { grid-template-columns: 1fr; } }

/* Kosten */
.preise { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.preis { background: var(--karte); border: 1px solid var(--linie); border-radius: 20px; padding: 28px; }
.preis.voll { border: 2px solid var(--petrol); }
.preis h3 { font-size: 1.6rem; }
.preis .betrag { font: 400 2.4rem var(--serif); color: var(--petrol); margin: 8px 0 4px; }
.preis .betrag small { font: 500 1rem var(--sans); color: var(--leise); }
.preis ul { padding-left: 1.2rem; margin: 14px 0 0; }
.preis li { margin: 4px 0; }
.probe { margin-top: 22px; background: var(--leder-hell); border-radius: 14px; padding: 16px 20px; color: var(--petrol-dunkel); }
@media (max-width: 760px) { .preise { grid-template-columns: 1fr; } }

/* Fragen */
.fragen details { background: var(--karte); border: 1px solid var(--linie); border-radius: 14px; padding: 4px 20px; margin-bottom: 12px; }
.fragen summary { cursor: pointer; font-weight: 600; padding: 12px 0; color: var(--petrol); }
.fragen details p { margin: 0 0 14px; color: var(--leise); }

/* Rechtstexte, Kontakt */
.recht { padding: 48px 0 72px; }
.recht .innen { max-width: 820px; }
.recht h1 { font-size: 2.6rem; margin-bottom: 16px; }
.recht h2 { font-size: 1.5rem; margin: 34px 0 10px; }
.recht h3 { font-size: 1.2rem; margin: 22px 0 8px; }
.recht p, .recht li { color: #2b3b3e; }
form.kontakt { display: grid; gap: 8px; max-width: 560px; margin-top: 20px; }
form.kontakt label { font-weight: 600; margin-top: 8px; }
form.kontakt label span { font-weight: 400; color: var(--leise); }
form.kontakt input, form.kontakt textarea { font: inherit; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 10px; background: #fff; }
form.kontakt .falle { position: absolute; left: -9999px; }
form.kontakt .knopf { justify-self: start; margin-top: 10px; }
.kontakt-hinweis { font-size: .9rem; color: var(--leise); }
.kontakt-fehler { background: #fbe9e7; border-radius: 10px; padding: 4px 16px; color: #8a2b1d; }
.kontakt-danke { background: #e5f2e1; border-radius: 10px; padding: 14px 18px; }

/* Fuß */
.fuss { background: var(--petrol-dunkel); color: #cfe2e0; padding: 28px 0; font-size: .92rem; }
.fuss .innen { display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: center; }
.fuss img { height: 32px; width: auto; }
.fuss nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 18px; }
.fuss a { color: #e9f3f2; }

/* Kobel-Familie: der Weg Cookobel → Shopkobel → Todokobel → zurück, als vier Stationen mit Pfeilen */
.ablauf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; counter-reset: station; }
.ablauf li { position: relative; background: var(--karte); border: 1px solid var(--linie); border-radius: 20px; padding: 22px 20px 20px; }
.ablauf li::before { counter-increment: station; content: counter(station); position: absolute; top: 14px; right: 16px;
  font: 400 1.6rem var(--serif); color: var(--leder); }
.ablauf li:not(:last-child)::after { content: "→"; position: absolute; right: -27px; top: 44px; font-size: 1.5rem; color: var(--leder); }
.ablauf img { width: 56px; height: 56px; border-radius: 14px; margin-bottom: 10px; }
.ablauf .app { display: block; font: 600 .78rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--akzent); }
.ablauf h3 { font-size: 1.35rem; margin: 4px 0 8px; }
.ablauf p { margin: 0 0 12px; color: var(--leise); font-size: .95rem; }
.ablauf .tipp { display: inline-block; background: var(--leder-hell); color: var(--petrol-dunkel); border-radius: 999px; padding: 3px 12px;
  font-size: .85rem; font-weight: 600; }
@media (max-width: 980px) {
  .ablauf { grid-template-columns: 1fr; gap: 30px; }
  .ablauf li:not(:last-child)::after { content: "↓"; right: auto; left: 46px; top: auto; bottom: -30px; }
}

/* Eine Liste für jeden Laden – der Verkaufsgrund (Betreiber 22.10.2026), gleich nach dem Einstieg */
.laeden { background: var(--flaeche); }
.laeden-oben { display: grid; grid-template-columns: 1fr 270px; gap: 56px; align-items: center; }
.laeden h2 { font-size: clamp(2.1rem, 4.5vw, 3.1rem); }
.laeden .lead { margin: 16px 0 22px; }
.laeden-punkte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; }
.laeden-punkte li { display: flex; gap: 12px; align-items: flex-start; }
.laeden-punkte .haken { flex: none; margin-top: 2px; }
.laeden-punkte h3 { font-size: 1.2rem; margin-bottom: 4px; }
.laeden-punkte p { margin: 0; color: var(--leise); font-size: .95rem; }
.laeden-streifen-titel { margin: 48px 0 14px; font: 600 .82rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--akzent); }
.laeden-streifen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.laeden-streifen img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; box-shadow: var(--schatten); }
.laeden-streifen span { display: block; margin-top: 6px; font-size: .85rem; text-align: center; color: var(--leise); }
@media (max-width: 760px) {
  .laeden-oben { grid-template-columns: 1fr; gap: 28px; }
  .laeden-oben .handy { width: 230px; margin: 0 auto; }
  .laeden-punkte { grid-template-columns: 1fr; }
  .laeden-streifen { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .laeden-streifen img { border-radius: 8px; }
  .laeden-streifen span { font-size: .8rem; }
}