/* Die Editorial-Grafiken nutzen ausgeschnittene Varianten. Haut, Kleidung
   und Produkte behalten dadurch in beiden Themen exakt ihre Originalfarben;
   nur der ehemalige weisse Aussenhintergrund ist transparent. */
:root {
  --app-editorial-bg:var(--grund);
  --app-editorial-bg-soft:var(--flaeche);
  --app-editorial-text:var(--text);
  --app-editorial-muted:var(--text-leise);
  --app-editorial-control:rgba(255,255,255,.07);
  --app-editorial-line:rgba(255,255,255,.13);
  --app-editorial-code:#d7c7cc;
}
html.hell {
  --app-editorial-bg:var(--grund);
  --app-editorial-bg-soft:var(--flaeche);
  --app-editorial-text:var(--text);
  --app-editorial-muted:var(--text-leise);
  --app-editorial-control:rgba(255,255,255,.55);
  --app-editorial-line:rgba(27,25,28,.1);
  --app-editorial-code:#414b56;
}
.app-art {
  display:block; width:100%; height:auto; aspect-ratio:4 / 3; object-fit:contain;
  mix-blend-mode:normal; filter:none;
}
.app-scene {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(118px,40%); align-items:center;
  gap:8px 12px; padding:18px; margin:-14px -14px 18px;
  background:var(--app-editorial-bg-soft); color:var(--app-editorial-text); border:0; border-radius:0;
}
.app-scene__copy { min-width:0; }
.app-scene .gruss__klein { color:var(--app-editorial-muted); font-size:11px; font-weight:600; letter-spacing:0; text-transform:none; margin:0 0 6px; }
.app-scene h1 { margin:0; color:var(--app-editorial-text); font:750 23px/1.2 var(--anzeige); letter-spacing:0; overflow-wrap:break-word; }
.app-scene .app-scene__art { width:100%; max-width:188px; justify-self:end; }
.app-scene .app-scene__description { grid-column:1 / -1; margin:4px 0 0; max-width:60ch; color:var(--app-editorial-muted); font-size:13px; line-height:1.55; }
.app-scene[data-tone="neutral"] { background:color-mix(in srgb, var(--app-editorial-bg-soft) 82%, #777 18%); }

.regal-einstieg {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(118px,40%); align-items:center;
  gap:10px 12px; padding:20px 18px; margin:-14px -14px 22px;
  background:var(--app-editorial-bg); color:var(--app-editorial-text); border:0;
}
.regal-einstieg__text { min-width:0; }
.regal-einstieg h2 { font:700 21px/1.2 var(--schrift); letter-spacing:0; }
.regal-einstieg p { font-size:12px; line-height:1.5; color:var(--app-editorial-muted); margin:8px 0 0; }
.regal-einstieg > .app-art { max-width:188px; justify-self:end; }
.regal-einstieg .knopf {
  grid-column:1 / -1; width:fit-content; max-width:100%; min-height:36px; margin:2px 0 0;
  padding:8px 12px; background:#171719; color:#fff; border:0; border-radius:8px;
  box-shadow:none; font:650 12px/1.4 var(--schrift); justify-content:center; gap:10px;
}
.regal-section { margin:0 0 22px; padding:0; }
.regal-section__kopf { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.regal-section h1, .regal-section h2 { font:700 19px/1.3 var(--schrift); letter-spacing:0; margin:0; }
.regal-section .mini { margin:6px 0 12px; font-size:12px; line-height:1.6; }
.regal-section .marke { border-radius:8px; box-shadow:none; }
.regal-section .marke__bild { box-shadow:none; border-radius:6px; }
.regal-section .marke__name { letter-spacing:0; }
.regal-empty { display:flex; align-items:center; gap:12px; padding:14px 0; color:var(--text-leise); font-size:12px; }
.regal-empty > svg { flex:none; width:20px; height:20px; }
.regal-empty p { margin:0; }

.gp-media.gp-media--editorial { display:flex; align-items:center; justify-content:center; height:164px; background:var(--grund); }
.gp-media--editorial .app-art { width:218px; max-width:100%; height:164px; }

.dl-hero.dl-hero--editorial { min-height:0; display:block; padding:64px 18px 14px; background:var(--app-editorial-bg); color:var(--app-editorial-text); }
.dl-hero--editorial::after { content:none; }
.dl-hero--editorial .dl-hero__nav > span { color:var(--app-editorial-text); text-shadow:none; letter-spacing:0; }
.dl-hero--editorial .dl-hero__nav button { width:34px; height:34px; border-radius:8px; background:var(--app-editorial-control); color:var(--app-editorial-text); border-color:var(--app-editorial-line); }
.dl-hero--editorial .dl-hero__text { padding:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(118px,40%); gap:10px 12px; align-items:center; }
.dl-hero--editorial .dl-hero__text h2 { color:var(--app-editorial-text); font:700 23px/1.2 var(--schrift); letter-spacing:0; }
.dl-hero--editorial .dl-hero__copy p { color:var(--app-editorial-muted); font-size:12px; line-height:1.5; margin:8px 0 0; }
.dl-hero--editorial .dl-hero__text > .app-art { max-width:188px; justify-self:end; }
.dl-hero--editorial .dl-hero__text > .dl__cta { grid-column:1 / -1; justify-self:start; width:auto; min-height:36px; border-radius:8px; padding:8px 12px; background:#171719; color:#fff; border:0; box-shadow:none; font-size:12px; }
.dl-hero--editorial .dl-hero__code { grid-column:1 / -1; padding:0; min-height:32px; color:var(--app-editorial-code); justify-content:flex-start; }
.dl-member .dl-hero--editorial { min-height:0; }
.dl-member .dl-hero--editorial .dl-hero__text { padding:0; }

.dl-more { margin:24px -16px 0; padding:20px 18px 12px; background:var(--app-editorial-bg-soft); color:var(--app-editorial-text); }
.dl-more__kopf { display:grid; grid-template-columns:minmax(0,1fr) minmax(120px,40%); gap:12px; align-items:center; }
.dl-more h2 { margin:0; font:700 22px/1.2 var(--schrift); letter-spacing:0; overflow-wrap:break-word; }
.dl-more .app-art { max-width:180px; justify-self:end; }
.dl-more > p { color:var(--app-editorial-muted); margin:14px 0; font-size:13px; line-height:1.6; }
.dl-more__start { display:flex; align-items:center; gap:12px; max-width:100%; min-height:38px; padding:8px 12px; border-radius:8px; background:#171719; color:#fff; font:650 12px/1.5 var(--schrift); }
.dl-more__code { display:flex; align-items:center; gap:8px; max-width:100%; min-height:44px; padding:8px 0; color:var(--app-editorial-code); text-align:left; font:600 11px/1.5 var(--schrift); }
.dl-more button svg { flex:none; width:16px; height:16px; }
.dl-more button:focus-visible { outline:2px solid #24624b; outline-offset:3px; }

.abo .abo-intro { margin:12px -14px 20px; padding:18px; }
.abo .abo-intro img { margin:0; background:transparent; height:auto; }
.en .en__intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(112px,38%); gap:8px 12px; align-items:center; padding:18px 0; }
.en__intro h1 { font-size:24px; letter-spacing:0; }
.en__intro > p { grid-column:1 / -1; }
.en__intro .app-art { max-width:170px; justify-self:end; }
.an__illustration { background:var(--app-editorial-bg-soft); margin:0 -14px 20px; padding:0; }
.an__illustration .app-art { width:184px; max-width:100%; margin:0 auto; }
.app-contract-art { float:right; width:38%; max-width:180px; margin:0 0 8px 14px; background:var(--app-editorial-bg-soft); }

@container apprahmen (max-width:340px) {
  .app-scene { padding:16px 14px; grid-template-columns:minmax(0,1fr) 118px; }
  .app-scene h1 { font-size:21px; }
  .regal-einstieg h2, .dl-hero--editorial .dl-hero__text h2 { font-size:20px; }
  .en__intro h1 { font-size:22px; }
}
@media (prefers-reduced-motion:no-preference) {
  .bild[data-an="1"] .app-scene__art, .bild[data-an="1"] .regal-einstieg > .app-art { animation:appArtEnter .28s ease-out both; }
}
@keyframes appArtEnter { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }