/* Homecart-Website (15.10.2026): Richtung A „Papier“ mit der Schrift aus B.
   Schriften liegen lokal unter schrift/ — keine Anfrage an Google. */
:root {
  --badge-hell: inline-block; --badge-dunkel: none;
  --papier: #FBFAF8; --flaeche: #FFFFFF; --tinte: #141414; --leise: #5E5E63; --linie: #E6E4E0;
  --akzent: #2A6CED; --akzent-sanft: #EEF3FD; --gold: #E39A2E; --gold-text: #B8781D; --gold-sanft: #FBEBD2;
  --nacht: #141414; --nacht-text: #C9C9CE;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --badge-hell: none; --badge-dunkel: inline-block;
    --papier: #111112; --flaeche: #1C1C1E; --tinte: #F2F2F2; --leise: #A5A5AA; --linie: #2C2C2E;
    --akzent: #5B8DF2; --akzent-sanft: #1B2740; --gold-sanft: #3A2C12; --gold-text: #F0B44C;
    --nacht: #000000; --nacht-text: #C9C9CE;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --badge-hell: none; --badge-dunkel: inline-block;
    --papier: #111112; --flaeche: #1C1C1E; --tinte: #F2F2F2; --leise: #A5A5AA; --linie: #2C2C2E;
    --akzent: #5B8DF2; --akzent-sanft: #1B2740; --gold-sanft: #3A2C12; --gold-text: #F0B44C;
    --nacht: #000000; --nacht-text: #C9C9CE;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Geraete und Lichtschein ragen seitlich raus — die Seite darf trotzdem nicht querscrollen. */
html, body { overflow-x: clip; }
body { margin: 0; background: var(--papier); color: var(--tinte); font-family: Figtree, -apple-system, "Helvetica Neue", Arial, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--akzent); }
img { max-width: 100%; }
.disp { font-family: "Bricolage Grotesque", -apple-system, "Helvetica Neue", Arial, sans-serif; font-weight: 800; letter-spacing: -.025em; line-height: 1; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: 14px; font-weight: 600; font-size: 16px; text-decoration: none; border: 0; cursor: pointer; }
.btn-dark { background: var(--tinte); color: var(--papier); }
.btn-dark:hover { opacity: .9; }
.btn-light { background: var(--flaeche); color: var(--tinte); border: 1px solid var(--linie); }
.btn-light:hover { border-color: var(--tinte); }
.btn-klein { min-height: 44px; padding: 0 18px; font-size: 15px; }

/* Kopfleiste: schwebende Glasleiste, kompakt beim Scrollen, Klappmenue auf dem Handy */
.kopfleiste { position: sticky; top: 0; z-index: 50; padding: 12px 0; }
.kopfleiste::before { content: ""; position: absolute; inset: 0; background: color-mix(in oklab, var(--papier) 72%, transparent); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid transparent; transition: border-color .2s; }
.kopfleiste.gescrollt::before { border-bottom-color: var(--linie); }
nav.kopf { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; padding: 6px 6px 6px 14px; border-radius: 999px; border: 1px solid var(--linie); background: color-mix(in oklab, var(--flaeche) 86%, transparent); box-shadow: 0 10px 30px rgba(20, 20, 20, .06); transition: padding .2s, box-shadow .2s; }
.kopfleiste.gescrollt nav.kopf { box-shadow: 0 14px 40px rgba(20, 20, 20, .10); }
nav.kopf .marke { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinte); }
nav.kopf .marke img { width: 36px; height: 36px; border-radius: 10px; transition: width .2s, height .2s; }
nav.kopf .marke span { font-size: 22px; }
nav.kopf .links { display: flex; align-items: center; gap: 4px; }
nav.kopf .links a.nl { position: relative; color: var(--tinte); text-decoration: none; font-weight: 500; font-size: 15px; padding: 9px 12px; border-radius: 999px; transition: background .15s, color .15s; }
nav.kopf .links a.nl:hover { background: var(--akzent-sanft); color: var(--akzent); }
nav.kopf .links a.nl[aria-current="page"] { background: var(--akzent-sanft); color: var(--akzent); font-weight: 600; }
nav.kopf .links .sprache { margin-left: 8px; }
nav.kopf .links .thema { margin-left: 6px; }
nav.kopf .links .btn { margin-left: 8px; }
nav.kopf .menue { display: none; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--tinte); cursor: pointer; align-items: center; justify-content: center; padding: 0; }
nav.kopf .menue svg { width: 20px; height: 20px; }
nav.kopf .menue .zu { display: none; }
nav.kopf.offen .menue .auf { display: none; }
nav.kopf.offen .menue .zu { display: block; }
@media (max-width: 860px) {
  nav.kopf { padding: 6px 6px 6px 12px; }
  nav.kopf .menue { display: inline-flex; }
  nav.kopf .links { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 8px); flex-direction: column; align-items: stretch; gap: 4px; padding: 10px; border-radius: 22px; border: 1px solid var(--linie); background: var(--flaeche); box-shadow: 0 20px 50px rgba(20, 20, 20, .14); }
  nav.kopf.offen .links { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  nav.kopf .links a.nl { grid-column: 1 / -1; padding: 12px 14px; font-size: 16px; }
  nav.kopf .links .sprache { margin: 8px 0 0 4px; justify-self: start; }
  nav.kopf .links .thema { margin: 8px 4px 0 0; justify-self: end; }
  nav.kopf .links .btn { grid-column: 1 / -1; margin: 10px 0 0; }
}
.hero { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; padding: 40px 0 80px; }
.hero > div { flex: 1 1 400px; min-width: 0; }
.hero h1 { margin: 16px 0 18px; font-size: clamp(44px, 7vw, 84px); text-wrap: balance; }
.hero p.lead { margin: 0 0 28px; font-size: 21px; color: var(--leise); max-width: 44ch; }
.hero .knoepfe { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .klein { margin: 20px 0 0; font-size: 14px; color: var(--leise); }

/* Geraet: Titanrahmen, Blende, Bildschirm, Tasten — alles CSS, Bild in voller
   Aufloesung (1320 px, WebP mit PNG-Rueckfall). Groesse ueber --w. */
.geraet { --w: 340px; position: relative; width: var(--w); max-width: 86vw; aspect-ratio: 1320 / 2868; flex: 0 0 auto;
  border-radius: calc(var(--w) * .16); padding: calc(var(--w) * .026);
  background: linear-gradient(155deg, #9a9aa0 0%, #3c3c42 16%, #26262b 44%, #4c4c52 76%, #1c1c20 100%);
  box-shadow: 0 60px 120px -30px rgba(0, 0, 0, .5), 0 24px 48px -24px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .22); }
.geraet .schirm { position: relative; height: 100%; border-radius: calc(var(--w) * .135); overflow: hidden; background: #000;
  box-shadow: inset 0 0 0 calc(var(--w) * .012) #08080a; }
.geraet .schirm img, .geraet .schirm video { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; background: #000; }
.geraet .schirm::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, 0) 38%); }
.geraet .k { position: absolute; width: calc(var(--w) * .013); border-radius: 2px; background: linear-gradient(90deg, #77777d, #2a2a2e); }
.geraet .k.stumm { left: calc(var(--w) * -.012); top: 17%; height: 4.2%; }
.geraet .k.laut1 { left: calc(var(--w) * -.012); top: 24.5%; height: 7%; }
.geraet .k.laut2 { left: calc(var(--w) * -.012); top: 33%; height: 7%; }
.geraet .k.an { right: calc(var(--w) * -.012); top: 27%; height: 11.5%; background: linear-gradient(270deg, #77777d, #2a2a2e); }

/* Buehne im Hero: zwei Geraete in Perspektive, Lichtschein in der Akzentfarbe. */
.hero .buehne { position: relative; flex: 1 1 400px; min-height: 640px; display: flex; justify-content: center; align-items: flex-end; perspective: 1800px; }
.hero .buehne::before { content: ""; position: absolute; inset: 8% -6% 0; border-radius: 50%; z-index: 0;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--akzent) 30%, transparent), transparent 72%); filter: blur(14px); }
.hero .g1 { --w: 330px; z-index: 2; transform: rotateY(-16deg) rotateX(5deg) rotateZ(-2deg); animation: schweben 7s ease-in-out infinite; }
.hero .g2 { --w: 240px; position: absolute; right: 2%; bottom: 10%; z-index: 1; opacity: .96;
  transform: rotateY(-24deg) rotateX(6deg) translateZ(-140px); animation: schweben 9s ease-in-out infinite reverse; }
@keyframes schweben { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }

/* Geraete in den Abschnitten: leicht gedreht, weicher Lichtschein in der Abschnittsfarbe. */
.feat .bild, .nacht .bild { position: relative; display: flex; justify-content: center; padding: 24px 0; }
.feat .bild::before, .nacht .bild::before { content: ""; position: absolute; inset: 6% 10%; border-radius: 50%; z-index: 0;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--glanz, var(--akzent)) 26%, transparent), transparent 72%); filter: blur(12px); }
.feat .bild .geraet { --w: 290px; z-index: 1; transform: rotate(-3deg); }
.feat.rechts .bild .geraet { transform: rotate(3deg); }
.feat .eyebrow { color: var(--glanz, var(--akzent)); }
.nacht .bild .geraet { --w: 300px; z-index: 1; transform: rotate(-2deg); box-shadow: 0 60px 120px -30px rgba(91, 141, 242, .45), inset 0 0 0 1px rgba(255, 255, 255, .22); }

.feat { display: flex; flex-wrap: wrap; align-items: center; gap: 40px 56px; padding: 64px 0; border-top: 1px solid var(--linie); }
.feat > div { flex: 1 1 360px; min-width: 0; }
.feat .bild { display: flex; justify-content: center; }
.feat.rechts { flex-direction: row-reverse; }
.feat h2 { margin: 12px 0 14px; font-size: clamp(32px, 4.2vw, 46px); text-wrap: balance; }
.feat p { margin: 0; font-size: 19px; color: var(--leise); max-width: 46ch; }

.nacht { background: var(--nacht); color: #fff; margin-top: 24px; }
.nacht .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 40px 56px; padding-top: 72px; padding-bottom: 72px; }
.nacht .wrap > div { flex: 1 1 340px; min-width: 0; }
.nacht .eyebrow { color: #8FB0F6; }
.nacht h2 { margin: 12px 0 14px; font-size: clamp(32px, 4.2vw, 46px); text-wrap: balance; }
.nacht p { margin: 0; font-size: 19px; color: var(--nacht-text); max-width: 46ch; }
.nacht .bild { display: flex; justify-content: center; }
.nacht .phone { background: #2a2a2e; }

.pro { padding: 88px 0 24px; }
.pro .intro { text-align: center; max-width: 720px; margin: 0 auto 36px; }
.pro .intro .eyebrow { color: var(--gold-text); }
.pro h2 { margin: 12px 0 14px; font-size: clamp(36px, 5vw, 56px); text-wrap: balance; }
.pro .intro p { margin: 0; font-size: 19px; color: var(--leise); }
.preise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.card { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 20px; padding: 26px; }
.card.beliebt { border-color: var(--gold); box-shadow: 0 12px 32px rgba(227, 154, 46, .18); }
.card .titel { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; }
.card .pille { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--gold-text); background: var(--gold-sanft); padding: 3px 8px; border-radius: 999px; }
.card .preis { margin: 10px 0 6px; font-size: 40px; font-weight: 800; letter-spacing: -.02em; font-family: "Bricolage Grotesque", sans-serif; }
.card p { margin: 0; color: var(--leise); }
.haken { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; margin: 32px auto 0; max-width: 760px; }
.haken div { display: flex; gap: 10px; align-items: flex-start; font-size: 17px; }
.haken span { color: var(--gold); font-weight: 800; }

.fragen { padding: 56px 0; max-width: 800px; }
.fragen h2 { margin: 0 0 20px; font-size: clamp(30px, 4vw, 40px); }
.faq { border-top: 1px solid var(--linie); padding: 22px 0; }
.faq h3 { margin: 0 0 8px; font-size: 20px; }
.faq p { margin: 0; color: var(--leise); font-size: 17px; }

.store { background: var(--akzent-sanft); }
.store .wrap { text-align: center; padding-top: 64px; padding-bottom: 64px; }
.store .symbol { width: 88px; height: 88px; border-radius: 22px; box-shadow: 0 12px 28px rgba(42, 108, 237, .25); }
.store h2 { margin: 18px 0 10px; font-size: clamp(32px, 4.5vw, 46px); }
.store p { margin: 0 0 24px; font-size: 18px; color: var(--leise); }

footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 24px; padding: 28px 0 40px; border-top: 1px solid var(--linie); font-size: 15px; color: var(--leise); }
footer .links { display: flex; gap: 20px; flex-wrap: wrap; }
footer a { color: var(--leise); text-decoration: none; }
footer a:hover { color: var(--tinte); }

/* Textseiten (Datenschutz, Support, Impressum) */
main.text { max-width: 720px; margin: 0 auto; padding: 24px 20px 80px; }
main.text h1 { font-size: clamp(34px, 5vw, 46px); margin: 24px 0 6px; }
main.text h2 { font-size: 24px; margin: 40px 0 8px; }
main.text h3 { font-size: 19px; margin: 24px 0 6px; }
main.text .stand { color: var(--leise); font-size: 15px; margin: 0 0 24px; }
main.text .kurz { font-size: 20px; border-left: 3px solid var(--akzent); padding: 2px 0 2px 16px; margin: 20px 0; }
main.text p, main.text li { margin: 0 0 12px; font-size: 17px; }
main.text ul { padding-left: 20px; }
main.text hr { border: 0; border-top: 1px solid var(--linie); margin: 64px 0 40px; }
main.text .sprachen { font-size: 15px; margin-top: 8px; }

@media (max-width: 760px) {
  .preise, .haken { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .hero .buehne { min-height: 560px; }
  .hero .g1 { --w: 280px; }
  .hero .g2 { --w: 190px; right: -4%; }
  .feat, .feat.rechts { flex-direction: column; }
  .hero { padding-top: 16px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero .g1, .hero .g2 { animation: none; } }

/* ---- Bewegung beim Scrollen (wow.js) ---- */
[data-reveal] { opacity: 0; translate: 0 28px; transition: opacity .9s cubic-bezier(.2, .7, .2, 1), translate .9s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 110ms); }
[data-reveal].sichtbar { opacity: 1; translate: 0 0; }
.hero .buehne[data-reveal] { scale: .94; transition-property: opacity, translate, scale; }
.hero .buehne[data-reveal].sichtbar { scale: 1; }

/* Kapitel: links die Schritte, rechts das festgepinnte Geraet. */
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 40px; align-items: start; }
.story .schritt { min-height: 82vh; display: flex; flex-direction: column; justify-content: center; padding: 8vh 0; opacity: .3; transition: opacity .5s ease; }
.story .schritt.aktiv { opacity: 1; }
.story .schritt h2 { margin: 12px 0 14px; font-size: clamp(32px, 4.2vw, 46px); text-wrap: balance; }
.story .schritt p { margin: 0; font-size: 19px; color: var(--leise); max-width: 46ch; }
.story .schritt .eyebrow { color: var(--glanz, var(--akzent)); }
.story .buehne { position: sticky; top: 8vh; height: 84vh; display: flex; align-items: center; justify-content: center; }
.story .schein { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background-color: var(--akzent); opacity: .22; filter: blur(70px); transition: background-color .7s ease; }
.story .buehne .geraet { --w: 340px; z-index: 1; }
.story .buehne .schirm img, .story .buehne .schirm video { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.story .buehne .schirm .aktiv { opacity: 1; }

@media (max-width: 760px) {
  .story { grid-template-columns: minmax(0, 1fr); }
  /* top = Hoehe der klebenden Kopfleiste, sonst verdeckt sie das gepinnte Geraet */
  .story .buehne { order: -1; top: 76px; height: 50vh; align-items: flex-start; overflow: hidden; z-index: 2;
    background: linear-gradient(var(--papier) 84%, transparent); padding-top: 14px; }
  .story .buehne .geraet { --w: 210px; }
  .story .schein { width: 90%; top: -10%; }
  .story .schritt { min-height: 54vh; padding: 6vh 0; }
}

/* "Und noch mehr": drei Kacheln, das Geraet lugt unten heraus (16.10.) */
.mehr { padding: 72px 0 8px; }
.mehr .kopfzeile { max-width: 720px; margin-bottom: 28px; }
.mehr .kopfzeile h2 { margin: 12px 0 0; font-size: clamp(32px, 4.2vw, 46px); text-wrap: balance; }
.kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.kachel { position: relative; overflow: hidden; border-radius: 28px; border: 1px solid var(--linie); background: var(--flaeche); height: 600px; display: flex; flex-direction: column; isolation: isolate; }
.kachel::before { content: ""; position: absolute; left: -20%; right: -20%; top: -30%; height: 75%; z-index: -1; background: radial-gradient(60% 60% at 50% 35%, color-mix(in oklab, var(--glanz) 30%, transparent), transparent 72%); }
.kachel .text { padding: 30px 28px 0; min-height: 200px; }   /* gleiche Texthoehe, damit die drei Geraete auf einer Linie sitzen */
.kachel .eyebrow { color: var(--glanz); }
.kachel h3 { margin: 10px 0 8px; font-size: 26px; letter-spacing: -.01em; text-wrap: balance; line-height: 1.15; }
.kachel p { margin: 0; color: var(--leise); font-size: 16px; max-width: 34ch; }
.kachel .buehne { position: relative; flex: 1; min-height: 240px; }
.kachel .buehne .geraet { --w: 250px; position: absolute; left: 50%; top: 26px; transform: translateX(-50%); box-shadow: 0 40px 80px -30px color-mix(in oklab, var(--glanz) 60%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .18); }
.kachel.dunkel { background: var(--nacht); color: #fff; border-color: rgba(255, 255, 255, .08); }
.kachel.dunkel p { color: var(--nacht-text); }
.kachel.dunkel .eyebrow { color: var(--glanz); }
@media (max-width: 860px) { .kacheln { grid-template-columns: 1fr; } .kachel { height: 540px; } .kachel .text { min-height: 0; } }

/* ---- Hilfe, Presse, Über, Neu ---- */
main.text.breit { max-width: 860px; }
.kat-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 20px 0 8px; }
.kat-raster a { display: block; padding: 16px 16px 14px; border: 1px solid var(--linie); border-radius: 16px; background: var(--flaeche); text-decoration: none; color: var(--tinte); }
.kat-raster a:hover { border-color: var(--akzent); }
.kat-raster strong { display: block; font-size: 16px; margin-bottom: 2px; }
.kat-raster span { font-size: 13px; color: var(--leise); }
.artikel { border-top: 1px solid var(--linie); padding: 22px 0 6px; }
.artikel h3 { margin: 0 0 8px; font-size: 20px; }
.artikel p, .artikel li { font-size: 17px; }
.artikel .pfad { display: inline-block; font-size: 13px; color: var(--leise); background: var(--akzent-sanft); padding: 2px 8px; border-radius: 8px; }
main.text h2.kat { margin-top: 56px; padding-top: 8px; font-size: 28px; }
.fakten { width: 100%; border-collapse: collapse; margin: 12px 0 24px; font-size: 16px; }
.fakten th { text-align: left; color: var(--leise); font-weight: 600; padding: 8px 12px 8px 0; width: 32%; vertical-align: top; border-top: 1px solid var(--linie); }
.fakten td { padding: 8px 0; border-top: 1px solid var(--linie); vertical-align: top; }
.assets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 12px 0 24px; }
.asset { border: 1px solid var(--linie); border-radius: 16px; background: var(--flaeche); padding: 14px; display: flex; gap: 14px; align-items: center; }
.asset img { width: 72px; height: 72px; border-radius: 16px; object-fit: contain; background: var(--papier); }
.asset div { min-width: 0; }
.asset strong { display: block; font-size: 15px; }
.asset small { color: var(--leise); font-size: 13px; display: block; }
.asset a { font-size: 14px; }
.farben { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 24px; }
.farbe { flex: 1 1 140px; border: 1px solid var(--linie); border-radius: 14px; overflow: hidden; font-size: 13px; }
.farbe i { display: block; height: 48px; }
.farbe span { display: block; padding: 8px 10px; color: var(--leise); }
.version { border-top: 1px solid var(--linie); padding: 22px 0 8px; }
.version h3 { margin: 0 0 4px; font-size: 22px; }
.version .wann { color: var(--leise); font-size: 14px; margin-bottom: 10px; }
.zitat { font-size: 21px; line-height: 1.45; border-left: 3px solid var(--gold); padding: 4px 0 4px 18px; margin: 24px 0; }
@media (max-width: 700px) { .kat-raster, .assets { grid-template-columns: repeat(1, minmax(0, 1fr)); } }

/* ---- Hilfe als Wissensdatenbank ---- */
.hilfe-hero { background: var(--akzent-sanft); padding: 56px 0 44px; }
.hilfe-hero h1 { margin: 0 0 8px; font-size: clamp(40px, 6vw, 64px); }
.hilfe-hero p { margin: 0 0 22px; color: var(--leise); font-size: 19px; }
.suche { position: relative; max-width: 680px; }
.suche img { position: absolute; left: 16px; top: 50%; translate: 0 -50%; width: 28px; height: 28px; pointer-events: none; }
.suche input { width: 100%; height: 60px; padding: 0 18px 0 56px; border-radius: 16px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--tinte); font: inherit; font-size: 18px; box-shadow: 0 10px 30px rgba(20, 20, 20, .06); }
.suche input:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--akzent) 22%, transparent); }
.treffer { max-width: 680px; margin-top: 10px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 16px; overflow: hidden; box-shadow: 0 16px 40px rgba(20, 20, 20, .10); }
.treffer a { display: block; padding: 12px 16px; text-decoration: none; color: var(--tinte); border-top: 1px solid var(--linie); }
.treffer a:first-child { border-top: 0; }
.treffer a:hover { background: var(--akzent-sanft); }
.treffer strong { display: block; font-size: 16px; }
.treffer span { display: block; font-size: 13px; color: var(--leise); margin-top: 2px; }
.treffer .leer { padding: 14px 16px; color: var(--leise); font-size: 15px; }
main.hilfe { padding-top: 8px; padding-bottom: 72px; }
h2.abschnitt { font-size: 26px; margin: 44px 0 16px; }
h2.abschnitt.klein { font-size: 20px; margin-top: 40px; }
.kat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.kat-karte { display: flex; flex-direction: column; padding: 20px 20px 16px; border: 1px solid var(--linie); border-radius: 20px; background: var(--flaeche); text-decoration: none; color: var(--tinte); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.kat-karte:hover { transform: translateY(-2px); border-color: var(--akzent); box-shadow: 0 14px 34px rgba(20, 20, 20, .08); }
.kat-karte img { width: 56px; height: 56px; margin-bottom: 14px; }
.kat-karte strong { font-size: 18px; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; letter-spacing: -.01em; }
.kat-karte span { color: var(--leise); font-size: 14px; margin-top: 2px; }
.kat-karte small { color: var(--akzent); font-size: 13px; font-weight: 600; margin-top: 12px; }
.oft-gelesen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.beliebt-zeile, .art-zeile { display: block; padding: 14px 16px; border: 1px solid var(--linie); border-radius: 14px; background: var(--flaeche); text-decoration: none; color: var(--tinte); }
.beliebt-zeile:hover, .art-zeile:hover { border-color: var(--akzent); }
.beliebt-zeile strong, .art-zeile strong { display: block; font-size: 16px; }
.beliebt-zeile span, .art-zeile span { display: block; color: var(--leise); font-size: 13px; margin-top: 2px; }
.art-liste { display: flex; flex-direction: column; gap: 10px; }
.art-zeile span { font-size: 14px; }
.hilfe-fuss { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 44px; padding: 18px 20px; border-radius: 20px; background: var(--akzent-sanft); }
.hilfe-fuss img { width: 44px; height: 44px; }
.hilfe-fuss div { flex: 1 1 260px; }
.hilfe-fuss strong { display: block; font-size: 16px; }
.hilfe-fuss span { color: var(--leise); font-size: 14px; }
.brot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--leise); padding: 18px 0 8px; }
.brot a { color: var(--leise); text-decoration: none; }
.brot a:hover { color: var(--akzent); }
.brot em { font-style: normal; color: var(--tinte); }
.rubrik-kopf { display: flex; align-items: center; gap: 18px; margin: 12px 0 24px; }
.rubrik-kopf img { width: 72px; height: 72px; }
.rubrik-kopf h1 { margin: 0; font-size: clamp(30px, 4.5vw, 42px); }
.rubrik-kopf p { margin: 4px 0 0; color: var(--leise); }
.artikel-seite article.text { max-width: 720px; }
.artikel-seite article h1 { font-size: clamp(30px, 4.5vw, 40px); margin: 8px 0 16px; }
.artikel-seite article p, .artikel-seite article li { font-size: 17px; margin: 0 0 12px; }
.artikel-seite article ul { padding-left: 20px; }
.artikel-seite article .pfad { display: inline-block; font-size: 13px; color: var(--leise); background: var(--akzent-sanft); padding: 2px 8px; border-radius: 8px; }
.vor-zurueck { display: flex; justify-content: space-between; gap: 16px; margin: 28px 0 0; font-size: 15px; }
.vor-zurueck a { text-decoration: none; font-weight: 600; }
@media (max-width: 760px) { .kat-grid, .oft-gelesen { grid-template-columns: repeat(1, minmax(0, 1fr)); } .kat-karte img { width: 44px; height: 44px; } }

/* ---- Presse ---- */
.presse-hero { position: relative; overflow: hidden; padding: 56px 0 0; background: var(--akzent-sanft); }
.presse-hero .wrap { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 32px; }
.presse-hero .text-teil { flex: 1 1 380px; padding-bottom: 56px; }
.presse-hero h1 { margin: 0 0 10px; font-size: clamp(40px, 6vw, 64px); }
.presse-hero p { margin: 0 0 22px; color: var(--leise); font-size: 19px; max-width: 46ch; }
.presse-hero .knoepfe { display: flex; gap: 12px; flex-wrap: wrap; }
.presse-hero .buehne { flex: 1 1 420px; display: flex; justify-content: center; align-items: flex-end; gap: 0; min-height: 360px; }
.presse-hero .geraet { --w: 210px; margin-bottom: -60px; }
.presse-hero .geraet:nth-child(1) { transform: rotate(-8deg) translateY(30px); z-index: 1; }
.presse-hero .geraet:nth-child(2) { --w: 240px; z-index: 2; margin: 0 -30px -40px; }
.presse-hero .geraet:nth-child(3) { transform: rotate(8deg) translateY(30px); z-index: 1; }
main.presse { padding-top: 24px; padding-bottom: 72px; }
.p-abschnitt { display: flex; align-items: center; gap: 14px; margin: 56px 0 18px; }
.p-abschnitt img { width: 44px; height: 44px; }
.p-abschnitt h2 { margin: 0; font-size: 28px; }
.p-abschnitt span { color: var(--leise); font-size: 14px; }
.textkarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.textkarte { position: relative; border: 1px solid var(--linie); border-radius: 20px; background: var(--flaeche); padding: 20px 20px 16px; }
.textkarte.breit { grid-column: 1 / -1; }
.textkarte h3 { margin: 0 0 8px; font-size: 15px; color: var(--leise); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.textkarte p { margin: 0 0 10px; font-size: 16px; }
.textkarte .zitat { margin: 0; font-size: 24px; font-family: Fraunces, Georgia, serif; font-weight: 600; font-variation-settings: "opsz" 144; line-height: 1.35; border: 0; padding: 0; }
.kopieren { position: absolute; right: 14px; top: 14px; font: inherit; font-size: 13px; font-weight: 600; color: var(--akzent); background: var(--akzent-sanft); border: 0; border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.kopieren:hover { filter: brightness(.95); }
.fakt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fakt { border: 1px solid var(--linie); border-radius: 16px; background: var(--flaeche); padding: 14px 16px; }
.fakt small { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); margin-bottom: 4px; }
.fakt strong { font-size: 16px; font-weight: 600; }
.galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.galerie figure { margin: 0; border: 1px solid var(--linie); border-radius: 20px; background: var(--flaeche); overflow: hidden; }
.galerie img { width: 100%; aspect-ratio: 1320 / 2868; object-fit: cover; display: block; }
.galerie figcaption { padding: 12px 14px 14px; font-size: 14px; }
.galerie figcaption strong { display: block; margin-bottom: 2px; }
.galerie figcaption a { font-size: 13px; margin-right: 10px; }
.marke-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.marke-karte { border: 1px solid var(--linie); border-radius: 20px; overflow: hidden; background: var(--flaeche); }
.marke-karte .vorschau { display: flex; align-items: center; justify-content: center; height: 200px; }
.marke-karte .vorschau.dunkel { background: #141414; }
.marke-karte .vorschau.papier { background: #FBFAF8; }
.marke-karte .vorschau img.symbol { width: 128px; height: 128px; border-radius: 29px; box-shadow: 0 16px 36px rgba(0, 0, 0, .18); }
.marke-karte .vorschau img.wort { height: 70px; width: auto; }
.marke-karte .unten { padding: 12px 16px 14px; font-size: 14px; }
.marke-karte .unten strong { display: block; }
.marke-karte .unten a { margin-right: 10px; font-size: 13px; }
.farb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.farb-kachel { border-radius: 18px; overflow: hidden; border: 1px solid var(--linie); background: var(--flaeche); cursor: pointer; text-align: left; padding: 0; font: inherit; color: var(--tinte); }
.farb-kachel i { display: block; height: 84px; }
.farb-kachel span { display: block; padding: 10px 12px 12px; font-size: 14px; }
.farb-kachel small { display: block; color: var(--leise); font-size: 12px; font-variant-numeric: tabular-nums; }
.entwickler { display: flex; gap: 18px; align-items: flex-start; border: 1px solid var(--linie); border-radius: 20px; background: var(--flaeche); padding: 20px; }
.entwickler img { width: 64px; height: 64px; }
.entwickler p { margin: 0; font-size: 16px; }
.nutzung { border-radius: 20px; background: var(--akzent-sanft); padding: 20px 22px; }
.nutzung ul { margin: 0; padding-left: 20px; font-size: 16px; }
.nutzung li { margin-bottom: 8px; }
@media (max-width: 760px) { .textkarten, .fakt-grid, .marke-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); } .galerie, .farb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .presse-hero .buehne { min-height: 300px; } .presse-hero .geraet { --w: 150px; } .presse-hero .geraet:nth-child(2) { --w: 170px; margin: 0 -24px -40px; } }

/* ---- Schalter im Kopf: Sprache und Hell/Dunkel ---- */
.sprache { display: inline-flex; align-items: center; padding: 3px; border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche); text-decoration: none; }
.sprache span { padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--leise); }
.sprache span.an { background: var(--tinte); color: var(--papier); }
.sprache:hover span:not(.an) { color: var(--tinte); }
.thema { width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--tinte); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.thema:hover { border-color: var(--tinte); }
.thema svg { width: 18px; height: 18px; }
.thema .mond { display: none; }
:root[data-theme="dark"] .thema .sonne { display: none; }
:root[data-theme="dark"] .thema .mond { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .thema .sonne { display: none; }
  :root:not([data-theme="light"]) .thema .mond { display: block; }
}

/* ---- Rubrik als Akkordeon ---- */
.kuerzel { margin: 10px 0 0; font-size: 13px; color: var(--leise); }
.rubrik-kopf .alle { margin-left: auto; font: inherit; font-size: 13px; font-weight: 600; color: var(--akzent); background: var(--akzent-sanft); border: 0; border-radius: 999px; padding: 8px 14px; cursor: pointer; white-space: nowrap; }
.rubrik-raster { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; }
.toc { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.toc strong { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); margin-bottom: 8px; }
.toc a { color: var(--leise); text-decoration: none; padding: 6px 10px; border-radius: 8px; line-height: 1.3; }
.toc a:hover { background: var(--akzent-sanft); color: var(--tinte); }
.boxen { display: flex; flex-direction: column; gap: 10px; }
details.box { border: 1px solid var(--linie); border-radius: 16px; background: var(--flaeche); transition: border-color .15s; }
details.box[open] { border-color: var(--akzent); }
details.box:target { border-color: var(--akzent); }
details.box summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; cursor: pointer; font-weight: 600; font-size: 17px; }
details.box summary::-webkit-details-marker { display: none; }
details.box summary svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--leise); transition: transform .2s ease; }
details.box[open] summary svg { transform: rotate(180deg); color: var(--akzent); }
details.box summary:hover { color: var(--akzent); }
.box-inhalt { padding: 0 18px 18px; }
.box-inhalt p, .box-inhalt li { font-size: 16px; margin: 0 0 10px; }
.box-inhalt ul { padding-left: 20px; }
.box-inhalt .pfad { display: inline-block; font-size: 13px; color: var(--leise); background: var(--akzent-sanft); padding: 2px 8px; border-radius: 8px; }
.link-kopieren { font: inherit; font-size: 13px; color: var(--leise); background: transparent; border: 1px solid var(--linie); border-radius: 999px; padding: 5px 12px; cursor: pointer; margin-top: 4px; }
.link-kopieren:hover { color: var(--tinte); border-color: var(--tinte); }
@media (max-width: 860px) { .rubrik-raster { grid-template-columns: minmax(0, 1fr); } .toc { position: static; display: none; } .rubrik-kopf { flex-wrap: wrap; } .rubrik-kopf .alle { margin-left: 0; } }

/* Offizielles App-Store-Badge (Apple-Vorgabe: unveraendert, schwarz auf hell, weiss auf dunkel) + QR-Code */
.badge { display: inline-flex; line-height: 0; border-radius: 8px; transition: transform .15s; }
.badge:hover { transform: translateY(-1px); }
.badge img { height: 52px; width: auto; }
.badge .hell { display: var(--badge-hell); }
.badge .dunkel { display: var(--badge-dunkel); }
.knoepfe.mitte { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center; }
.qr-knopf svg { width: 20px; height: 20px; }
dialog.qr { border: 0; padding: 0; background: transparent; max-width: min(92vw, 380px); }
dialog.qr::backdrop { background: rgba(10, 10, 12, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.qr-kasten { background: var(--flaeche); color: var(--tinte); border: 1px solid var(--linie); border-radius: 28px; padding: 28px 28px 24px; text-align: center; box-shadow: 0 30px 80px rgba(0, 0, 0, .25); }
.qr-bild { width: 220px; height: 220px; margin: 0 auto 18px; padding: 14px; border-radius: 20px; background: #fff; }
.qr-bild svg { width: 100%; height: 100%; display: block; }
.qr-kasten h2 { font-size: 22px; margin: 0 0 6px; }
.qr-kasten p { color: var(--leise); margin: 0 0 18px; font-size: 15px; }