/* ------------------------------------------------------------------
   seller.css — Website-Schicht für maniacseller.cloud.
   Baut auf maniac-ui.css (--ms-*) und web.css (--web-*, Bausteine) auf.
   Definiert nie --ms-* neu; ergänzt nur maniacseller-eigene Bausteine.
   ------------------------------------------------------------------ */

/* --- Zugänglichkeit: Sprunglink --- */
.skip-link {
  position: absolute; left: var(--ms-3); top: -60px; z-index: 100;
  background: var(--ms-action); color: #fff; padding: 10px var(--ms-4);
  border-radius: var(--ms-r-control); text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: var(--ms-3); }

/* --- Logo in der Kopfzeile (maniac developers, theme-adaptiv) --- */
.brand { display: flex; align-items: center; text-decoration: none; flex: none; }
.brand__logo { height: 34px; width: auto; display: block; }
.brand__logo--dark { display: none; }
:root[data-theme="dark"] .brand__logo--light { display: none; }
:root[data-theme="dark"] .brand__logo--dark { display: block; }
@media (max-width: 480px) { .brand__logo { height: 30px; } }

/* --- Zusätzliche Kopf-Aktionen --- */
.topbar__lang {
  font-size: 15px; color: var(--ms-text-muted); text-decoration: none;
  padding: 6px var(--ms-2); border-radius: var(--ms-r-control); white-space: nowrap;
}
.topbar__lang:hover { color: var(--ms-text); }
.topbar__login { white-space: nowrap; }

/* --- Mobile Navigation --- */
.nav-mobil { display: none; }
@media (max-width: 1000px) {
  .mainnav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; margin: 0; z-index: 60;
    background: var(--ms-surface); border-bottom: 1px solid var(--ms-border);
    box-shadow: var(--ms-shadow-pop);
    padding: var(--ms-2) var(--ms-5) var(--ms-5);
    max-height: calc(100dvh - 57px); overflow-y: auto;
  }
  .mainnav--open { display: flex; }
  .mainnav a { padding: var(--ms-4) 0; border-bottom: 1px solid var(--ms-border); font-size: 17px; }
  .nav-mobil { display: block; }
  .nav-mobil--cta { color: var(--ms-action); font-weight: 700; }
  .topbar { position: relative; }
  .topbar__lang, .topbar__login { display: none; }
}
@media (min-width: 1001px) {
  .navtoggle { display: none; }
  /* Menü etwas tiefer, damit es mit der Grundlinie des Logo-Schriftzugs sitzt. */
  .topbar .mainnav { transform: translateY(3px); }
}
/* „Preise" ist bei maniacseller ein echter Menüpunkt – web.css blendet den ersten
   Link zwischen 1001 und 1100px aus; das heben wir hier auf. */
@media (min-width: 1001px) and (max-width: 1100px) {
  .mainnav > a:first-child { display: inline-flex; align-items: center; }
}

/* --- Startseiten-Hero --- */
.mshero { background: var(--web-navy-bg); color: var(--web-navy-fg); overflow: clip; }
.mshero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--ms-7); align-items: center; }
.mshero h1 { color: var(--web-navy-fg); font-size: var(--web-h1); line-height: var(--ms-lh-tight); margin: 0; }
.mshero .eyebrow { color: var(--ms-brand-blue); }
.mshero__tagline { font-family: var(--ms-font-head); font-weight: 500; font-size: clamp(19px, 2.4vw, 26px); color: var(--ms-brand-blue); margin: var(--ms-2) 0 0; }
.mshero .lead { color: var(--web-navy-muted); max-width: 54ch; }
.mshero__bild { margin: 0; min-width: 0; }
.mshero__bild img { width: 100%; height: auto; display: block; filter: drop-shadow(0 20px 50px rgba(0,0,0,.45)); }
/* Animierte Datenfluss-Grafik im dunklen Hero: immer die dunkle Fassung zeigen. */
.mshero__anim .datenfluss { margin: 0; }
.mshero__anim .datenfluss__bild--hell { display: none; }
.mshero__anim .datenfluss__bild--dunkel { display: block; }

/* Merkmals-Pillen */
.pillen { list-style: none; display: flex; flex-wrap: wrap; gap: var(--ms-2); margin: var(--ms-5) 0 0; padding: 0; }
.pillen li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500; color: var(--web-navy-fg);
  background: rgba(255,255,255,.06); border: 1px solid var(--web-navy-line);
  border-radius: var(--ms-r-pill); padding: 8px 14px;
}
.pillen svg { width: 16px; height: 16px; color: var(--ms-brand-green); flex: none; }

/* --- Vorteilsraster (nutzt .card aus web.css, hier Icon-Kopf + Hover) --- */
.vorteil__icon {
  width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: var(--ms-r-control); background: var(--ms-accent-weak);
  color: var(--ms-accent); margin-bottom: var(--ms-3);
  transition: background .18s ease, color .18s ease;
}
.vorteil__icon svg { width: 26px; height: 26px; }
/* Rahmen + Mouseover wie im Hilfe-Center: Karte hebt sich an, Rahmen wird zum Akzent. */
.card {
  border-width: 1.5px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.card:hover {
  border-color: var(--ms-accent-visual);
  transform: translateY(-4px);
  box-shadow: var(--ms-shadow-pop);
}
.card:hover .vorteil__icon { background: var(--ms-accent); color: #fff; }

/* --- Shop-/Marktplatz-Logos (größer) --- */
.shops { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--ms-4); margin: 0; padding: 0; }
.shops li { display: block; }
.shops__kachel {
  display: grid; place-items: center; height: 104px; padding: var(--ms-3) var(--ms-4);
  background: #fff; border: 1px solid var(--ms-border); border-radius: var(--ms-r-card);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.shops__kachel:hover { border-color: var(--ms-accent-visual); transform: translateY(-3px); box-shadow: var(--ms-shadow-card); }
/* Einheitliche, großzügige Logohöhe – füllt die Breite, berührt aber nie die Ränder. */
.shops__kachel img { max-width: 100%; max-height: 62px; width: auto; height: auto; object-fit: contain; }
@media (max-width: 900px) { .shops { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .shops { grid-template-columns: repeat(2, 1fr); } .shops__kachel { height: 92px; } .shops__kachel img { max-height: 54px; } }

/* --- Theme-adaptive Bilder (hell/dunkel) --- */
.themebild { width: 100%; height: auto; display: block; }
.themebild.themebild--dark { display: none; }
:root[data-theme="dark"] .themebild.themebild--light { display: none; }
:root[data-theme="dark"] .themebild.themebild--dark { display: block; }

/* --- Intro: zwei Spalten statt Textwüste --- */
.intro-zwei { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--ms-7); align-items: center; }
.intro-zwei__bild { margin: 0; border-radius: var(--ms-r-card); overflow: clip; box-shadow: var(--ms-shadow-card); }
.intro-zwei__bild img { width: 100%; height: auto; display: block; }
.intro-zwei .inhalt > * + * { margin-top: var(--ms-4); }
.intro-zwei .inhalt p:first-child { font-size: clamp(18px, 1.6vw, 21px); color: var(--ms-text); font-family: var(--ms-font-head); line-height: 1.4; }
@media (max-width: 860px) { .intro-zwei { grid-template-columns: 1fr; } .intro-zwei__bild { order: -1; } }

/* --- YouTube-Fassade --- */
.ytfassade { position: relative; aspect-ratio: 16 / 9; border-radius: var(--ms-r-card); overflow: clip; background: #0b161d; box-shadow: var(--ms-shadow-card); }
.ytfassade__btn {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ms-3);
  color: #fff; text-align: center; padding: var(--ms-5);
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(36,141,255,.18), transparent 60%),
    linear-gradient(180deg, #16303f 0%, #0b161d 100%);
}
.ytfassade__play { display: grid; place-items: center; transition: transform .18s ease; }
.ytfassade__play svg { width: 78px; height: auto; filter: drop-shadow(0 6px 16px rgba(0,0,0,.4)); }
.ytfassade__btn:hover .ytfassade__play { transform: scale(1.08); }
.ytfassade__meta { display: grid; gap: 4px; }
.ytfassade__dach { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ms-brand-blue); }
.ytfassade__titel { font-family: var(--ms-font-head); font-size: clamp(18px, 2vw, 22px); font-weight: 600; }
.ytfassade__hinweis { font-size: 13px; color: rgba(255,255,255,.7); }
.ytfassade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Abschnitt: Text + Medium nebeneinander --- */
.text-medium { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ms-7); align-items: center; }
@media (max-width: 860px) { .text-medium { grid-template-columns: 1fr; } }

/* --- maniac-Logo, theme-adaptiv --- */
.maniaclogo { display: block; width: 100%; max-width: 440px; height: auto; margin-inline: auto; }
.maniaclogo--dark { display: none; }
:root[data-theme="dark"] .maniaclogo--light { display: none; }
:root[data-theme="dark"] .maniaclogo--dark { display: block; }

/* --- Google-Bewertungskopf --- */
.google-rating { display: flex; align-items: center; gap: var(--ms-3); flex-wrap: wrap; margin-bottom: var(--ms-5); }
.google-rating__wert { font-family: var(--ms-font-head); font-size: clamp(26px, 3vw, 34px); font-weight: 700; color: var(--ms-text); line-height: 1; }
.google-rating__sterne { color: var(--web-star); font-size: 22px; letter-spacing: .06em; }
.google-rating__label { color: var(--ms-text-muted); font-size: 16px; }
.google-rating__g { width: 30px; height: 30px; flex: none; }

/* --- Preiskarten --- */
.preise { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ms-4); align-items: stretch; }
.preise--versand { grid-template-columns: minmax(0, 520px); }
.preis {
  display: flex; flex-direction: column; gap: var(--ms-3);
  background: var(--ms-surface); border: 1px solid var(--ms-border);
  border-radius: var(--ms-r-card); padding: var(--ms-5); box-shadow: var(--ms-shadow-card);
}
.preis--hervor { border-color: var(--ms-accent-visual); box-shadow: var(--ms-shadow-pop); }
.preis__name { font-family: var(--ms-font-head); font-size: var(--web-h3); margin: 0; }
.preis__preis { font-size: clamp(30px, 4vw, 40px); font-weight: 700; line-height: 1; color: var(--ms-text); }
.preis__preis span { font-size: 16px; font-weight: 500; color: var(--ms-text-muted); }
.preis__liste { list-style: none; display: grid; gap: var(--ms-2); margin: 0; padding: var(--ms-3) 0 0; border-top: 1px solid var(--ms-border); }
.preis__liste li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; color: var(--ms-text-muted); }
.preis__liste svg { width: 18px; height: 18px; color: var(--ms-brand-green); flex: none; margin-top: 3px; }
.preis .btn { margin-top: auto; }
@media (max-width: 820px) { .preise { grid-template-columns: 1fr; } }
/* Preishinweise unter den Preisen, ein Block über die gesamte Breite */
.preis-hinweise { max-width: none; margin-top: var(--ms-5); font-size: 13.5px; line-height: 1.6; color: var(--ms-text-muted); }
.preis-hinweise p { margin: 0 0 var(--ms-3); }

/* --- Kontaktformular --- */
.kontaktform { display: grid; gap: var(--ms-4); max-width: 640px; }
.kontaktform .feld { display: grid; gap: 6px; }
.kontaktform .feld--zwei { grid-template-columns: 1fr 1fr; gap: var(--ms-4); }
.kontaktform label { font-size: 15px; font-weight: 500; color: var(--ms-text); }
.kontaktform input, .kontaktform select, .kontaktform textarea {
  font: inherit; color: var(--ms-text); background: var(--ms-surface);
  border: 1px solid var(--ms-border); border-radius: var(--ms-r-control);
  padding: 11px var(--ms-3); width: 100%;
}
.kontaktform textarea { min-height: 140px; resize: vertical; }
.kontaktform input:focus, .kontaktform select:focus, .kontaktform textarea:focus {
  outline: 2px solid var(--ms-focus); outline-offset: 1px; border-color: var(--ms-accent);
}
.kontaktform .honigtopf { position: absolute; left: -9999px; }
.form-hinweis { font-size: 15px; color: var(--ms-text-muted); }
.form-ok { background: var(--ms-success-bg); color: var(--ms-success-ink); border: 1px solid var(--ms-success-line); border-radius: var(--ms-r-card); padding: var(--ms-4); }
.form-fehler { background: var(--ms-danger-bg); color: var(--ms-danger-ink); border: 1px solid var(--ms-danger-line); border-radius: var(--ms-r-card); padding: var(--ms-4); }

/* Zwei-Spalten-Block (Formular + Termin) */
.zweispalt { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--ms-7); align-items: start; }
@media (max-width: 860px) { .zweispalt { grid-template-columns: 1fr; } .kontaktform .feld--zwei { grid-template-columns: 1fr; } }

/* --- Blogliste --- */
.bloglist { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ms-5); margin: 0; padding: 0; }
.blogpost {
  display: flex; flex-direction: column; overflow: clip;
  background: var(--ms-surface); border: 1px solid var(--ms-border);
  border-radius: var(--ms-r-card); box-shadow: var(--ms-shadow-card);
}
.blogpost__bild { aspect-ratio: 16 / 9; background: var(--ms-surface-2); overflow: clip; }
.blogpost__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blogpost__inhalt { display: flex; flex-direction: column; gap: var(--ms-2); padding: var(--ms-4); flex: 1; }
.blogpost__datum { font-size: 13px; color: var(--ms-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.blogpost h3 { font-size: var(--web-h3); margin: 0; line-height: var(--ms-lh-tight); }
.blogpost h3 a { color: var(--ms-text); text-decoration: none; }
.blogpost h3 a:hover { color: var(--ms-accent); }
.blogpost p { font-size: 16px; color: var(--ms-text-muted); line-height: var(--ms-lh-doc); margin: 0; }
.blogpost__mehr { margin-top: auto; font-weight: 600; color: var(--ms-accent); text-decoration: none; }
@media (max-width: 860px) { .bloglist { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .bloglist { grid-template-columns: 1fr; } }

/* Blog-Pagination */
.blognav { display: flex; gap: var(--ms-3); justify-content: center; margin-top: var(--ms-6); }
.blognav a, .blognav span {
  padding: 8px 16px; border-radius: var(--ms-r-control);
  border: 1px solid var(--ms-border); text-decoration: none; color: var(--ms-text);
}
.blognav span[aria-current] { background: var(--ms-accent); color: #fff; border-color: var(--ms-accent); }

/* --- Beitrags-Kopfbild --- */
.beitrag__bild { margin: 0 0 var(--ms-6); border-radius: var(--ms-r-card); overflow: clip; }
.beitrag__bild img { width: 100%; height: auto; display: block; }

/* --- Fußzeile (seller) --- */
.footer__top { padding-block: var(--ms-7); }
.footer__grid--seller { grid-template-columns: 1.6fr 1fr 1fr; }
.footer__brand p { color: var(--web-navy-muted); font-size: 15px; max-width: 42ch; }
.footer__logo { height: 34px; width: auto; display: block; margin-bottom: var(--ms-3); }
.footer__ruf a { color: var(--web-navy-fg); }
@media (max-width: 760px) { .footer__grid--seller { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer__grid--seller { grid-template-columns: 1fr; } }

/* --- Hero auf Startseite, mobil --- */
@media (max-width: 880px) {
  .mshero .wrap { grid-template-columns: 1fr; }
  .mshero__bild { order: -1; }
}

/* Hero (phero) soll den Inhalt nicht mit großem Leerraum trennen:
   eigenes unteres Band schmaler, folgendes Band oben schmaler. */
.band.phero > .wrap { padding-bottom: var(--ms-3); }
.band.phero + .band > .wrap { padding-top: var(--ms-4); }

/* Abschnittskopf */
.abschnittkopf { max-width: 60ch; margin-bottom: var(--ms-6); }
.abschnittkopf.abschnittkopf--mitte { margin-inline: auto; text-align: center; }
.abschnittkopf h2 { font-size: var(--web-h2); margin: var(--ms-1) 0 0; }