/* Meshgrove - Vorstellungsseite. Farben aus der App (Kacheln, Auswahl, Plaketten) und aus dem Banner
   (Hain in Petrol, genau ein Bernstein-Baum). Bernstein gibt es nur am Download.
   Schriften selbst gehostet (Noto Sans wie die App unter KDE, Hack wie egui), keine externen Ressourcen. */
@font-face { font-family: "Noto Sans"; src: url("fonts/noto-sans.woff?v=3b00702a74") format("woff"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Hack"; src: url("fonts/hack.woff?v=0cf4c3a38f") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  --ground: #19181f;   /* Grund des Logos; Kopf- und Fussband bleiben so, auch im hellen Modus */
  /* aus dem Logo: Grund, Laub vom dunklen Petrol bis Salbei, die eine orange Facette */
  --night: #19181f; --band: #141319; --raise: #23222b; --line: #2e2d38;
  --ink: #e8e8ec; --muted: #a6a5b2; --link: #5cc79a; --leaf: #9cc48c; --canopy: #2ea67e; --deep: #0f5a50;
  --amber: #f9b25c; --amber-hi: #fcc77f; --on-amber: #24170a;
  --shot-edge: #302f3a; --shot-shadow: 0 34px 70px -34px rgba(0, 0, 0, .85);
  --display: "Outfit", "Noto Sans", system-ui, sans-serif;
  --text: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Hack", ui-monospace, "DejaVu Sans Mono", monospace;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --night: #eeeef0; --band: #e3e4e8; --raise: #e4e5e9; --line: #d0d1d8;
    --ink: #1c1b22; --muted: #565663; --link: #11785a; --leaf: #4f8a45; --canopy: #1d8f6a;
    --shot-edge: #cbcbd3; --shot-shadow: 0 30px 60px -36px rgba(20, 24, 40, .45);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body { margin: 0; background: var(--night); color: var(--ink); font: 400 1.125rem/1.6 var(--text); }
img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--deep); color: #fff; }
code { font: .86em/1 var(--mono); background: var(--raise); padding: .16em .38em; border-radius: 4px; white-space: nowrap; }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; margin: 0; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.25rem); line-height: 1.15; font-weight: 650; letter-spacing: -.012em; }
h3 { font-size: 1.375rem; line-height: 1.25; font-weight: 620; }
p { margin: 0; }
.wrap { max-width: 1180px; margin-inline: auto; padding-inline: 24px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--night); padding: 8px 14px; border-radius: 4px; z-index: 10; }
.skip:focus { left: 8px; }

/* Sprachwahl */
.lang { position: absolute; top: 16px; right: 20px; display: flex; gap: 2px; font-size: .8rem; font-weight: 650; letter-spacing: .04em; z-index: 2; }
.lang a { padding: 4px 10px; border-radius: 4px; color: var(--muted); text-decoration: none; }
.lang a:hover { color: var(--ink); background: var(--raise); }
.lang a[aria-current="true"] { color: var(--ink); background: var(--raise); }

/* Kopf: Schriftzug links, Krea-Hain rechts (wie das README-Banner); das Band bleibt dunkel, auch im hellen Modus */
.hero { position: relative; padding: 0 0 72px; }
.masthead { position: relative; padding-top: 56px; }
.masthead[data-scenery] { padding-top: 24px; background: var(--ground); color-scheme: dark; --ink: #e8e8ec; --muted: #a6a5b2; --raise: #23222b; color: var(--ink); }
.masthead-row { display: flex; align-items: center; }
.masthead .wordmark { flex: none; position: relative; z-index: 1; }
.head-img { flex: 1 1 auto; min-width: 0; width: 100%; max-width: 900px; height: auto; margin-left: -12%;
            -webkit-mask-image: linear-gradient(to right, transparent, #000 24%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 16%);
            -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to right, transparent, #000 24%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 16%);
            mask-composite: intersect; }
.masthead + .hero-grid { margin-top: 40px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.wordmark { display: flex; align-items: center; gap: 16px; font-size: clamp(2.8rem, 2rem + 3vw, 4.2rem); font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.wordmark img { width: 64px; height: 64px; flex: none; }
.lead { margin-top: 0; font: 500 clamp(1.5rem, 1.1rem + 1.4vw, 2rem)/1.25 var(--display); max-width: 20ch; }
.intro { margin-top: 18px; color: var(--muted); max-width: 46ch; }
.cta { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; }
.btn-download { display: inline-flex; flex-direction: column; gap: 2px; padding: 13px 24px 12px; border-radius: 8px; background: var(--amber); color: var(--on-amber);
                text-decoration: none; font-weight: 650; font-size: 1.06rem; line-height: 1.25; box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset; }
.btn-download:hover { background: var(--amber-hi); }
.btn-file { font-size: .8rem; font-weight: 500; opacity: .78; }
.btn-file:empty { display: none; }
.cta-links { font-size: .95rem; line-height: 1.7; }
.version { margin-top: 22px; font-size: .9rem; color: var(--muted); }

/* Nachgebautes App-Fenster (bleibt immer dunkel, wie die App) */
/* overflow bleibt sichtbar, weil der Hinweis (figcaption) unter dem Fenster steht */
.app { position: relative; margin: 0; border-radius: 9px; background: #1b1b1b; color: #c9c9c9; font: 400 13px/1.35 var(--text);
       border: 1px solid #2b2c33; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .35); color-scheme: dark; }
.app-titlebar { position: relative; display: flex; align-items: center; justify-content: center; height: 30px; border-radius: 9px 9px 0 0; background: #16171b; color: #d6d6d6; }
.app-titlebar img { position: absolute; left: 9px; top: 7px; }
.app-titlebar i::after { content: "\2304\2003\2303\2003\2715"; position: absolute; right: 12px; top: 6px; font-style: normal; font-size: 11px; color: #a9a9a9; }
.app-toolbar { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 8px; border-bottom: 1px solid #262626; }
.tb-btn { display: grid; place-items: center; width: 28px; height: 24px; border-radius: 4px; background: #2a2a2a; }
.tb-btn svg { width: 14px; height: 14px; fill: none; stroke: #dedede; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.crumbs { margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs span + span::before { content: "\203A"; margin: 0 7px; color: #808080; }
.tb-pill { flex: none; padding: 3px 8px; border-radius: 4px; background: #2a2a2a; color: #dedede; white-space: nowrap; }
.tb-btn.gear { margin-left: 0; }
.filter { margin-left: auto; padding: 3px 9px; width: 24%; border-radius: 4px; background: #0f0f0f; color: #727272; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-body { display: grid; grid-template-columns: 172px minmax(0, 1fr); min-height: 0; }
.app-places { padding: 8px 6px 12px 10px; border-right: 1px solid #262626; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; overflow: hidden; }
.app-places b { margin-top: 8px; font-size: 10.5px; font-weight: 650; color: #cfcfcf; white-space: nowrap; }
.app-places span { display: flex; align-items: center; gap: 6px; padding: 1px 8px 1px 6px; border-radius: 4px; white-space: nowrap; }
.app-places svg { width: 12px; height: 12px; flex: none; fill: none; stroke: #d6d6d6; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.app-places svg .fill { fill: #d6d6d6; stroke: none; }
.app-places .tag-row i { width: 8px; height: 8px; border-radius: 50%; background: var(--bg); margin: 0 3px 0 2px; }
.app-places .sel { background: #22678a; color: #fff; }
.tiles { list-style: none; margin: 0; padding: 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.tile { position: relative; padding: 6px 6px 8px; border-radius: 6px; cursor: grab; touch-action: pan-y; outline-offset: -2px; }
.tile:hover, .tile.spinning { background: #232325; }
.tile:focus-visible { outline: 2px solid #3d93b8; }
.tile.dragging { cursor: grabbing; }
.thumb { position: relative; aspect-ratio: 1; background: var(--still) center / contain no-repeat; }
/* Groesse nur beim Drehen: danach steht wieder das Standbild in voller Groesse da */
.tile.spinning .thumb { background-image: var(--sprite); background-size: var(--sprite-size); }
.dots { position: absolute; top: 0; left: 2px; display: flex; gap: 3px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px #0c0c0c, 0 0 0 2.5px #3a3a3a; }
.pills { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.pills i { font-style: normal; font-size: 10px; line-height: 15px; padding: 0 6px; border-radius: 8px; background: var(--bg); color: var(--fg); white-space: nowrap; }
.badge { position: absolute; left: 2px; bottom: 0; padding: 1px 5px; border-radius: 3px; background: #0d0d0d; color: #ececec; font-size: 10px; font-weight: 650; letter-spacing: .02em; }
.tile .name { margin-top: 5px; text-align: center; color: #b4b4b4; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-status { display: flex; height: 26px; align-items: center; border-top: 1px solid #262626; border-radius: 0 0 9px 9px; font-size: 12px; color: #9b9b9b; }
.app-status span { padding: 0 10px; }
.app-status span + span { border-left: 1px solid #333; }
.app-status .status-lib { margin-left: auto; }
.status-view { display: flex; align-items: center; gap: 8px; }
.status-view svg { width: 12px; height: 12px; fill: none; stroke: #bdbdbd; stroke-width: 1.3; }
.status-view .slider { width: 70px; height: 4px; border-radius: 2px; background: #3a3a3a; position: relative; }
.status-view .slider::after { content: ""; position: absolute; left: 18px; top: -4px; width: 10px; height: 12px; border-radius: 5px; background: #cfcfcf; }
.app-hint { position: absolute; left: 0; top: calc(100% + 14px); font-size: .9rem; color: var(--muted); }

/* Das Problem: graue Symbole werden zu Vorschauen */
.problem { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px 64px; padding-top: 88px; padding-bottom: 96px; align-items: start; }
.problem-text p { margin-top: 18px; color: var(--muted); max-width: 44ch; }
.files { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 18px; perspective: 900px; }
.file { text-align: center; }
.file .card { display: block; position: relative; aspect-ratio: 1; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3, .1, .2, 1); transition-delay: calc(var(--i) * 110ms); }
.file .face { position: absolute; inset: 0; backface-visibility: hidden; display: grid; place-items: center; border-radius: 6px; }
.file .front { transform: rotateY(180deg); opacity: 0; }
.file .face { transition: opacity 0s linear calc(var(--i) * 110ms + 275ms); }
.js .files:not(.flipped) .front { opacity: 1; }
.js .files:not(.flipped) .back { opacity: 0; }
.file .front svg { width: 46%; height: auto; }
.file .back { background: #1b1b1b; background-image: var(--still); background-size: contain; background-position: center; background-repeat: no-repeat; }
.file .back.mosaic { grid-template: 1fr 1fr / 1fr 1fr; place-items: stretch; gap: 4px; padding: 10px 10px 26px; background-image: none; }
.file .back.mosaic i { background: var(--still) center / contain no-repeat; border-radius: 3px; background-color: #222; }
.file .back .badge { left: 8px; bottom: 6px; }
.file .fname { display: block; margin-top: 8px; font-size: .88rem; color: var(--muted); overflow-wrap: anywhere; }
/* Mit JavaScript stehen zuerst die grauen Symbole da; ohne bleiben die Vorschauen sichtbar */
.js .files:not(.flipped) .card { transform: rotateY(180deg); }
.problem-after { grid-column: 2; color: var(--muted); max-width: 52ch; }

/* Video */
.film { background: var(--band); padding: 88px 0; }
.film-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: center; }
.film-text p { margin-top: 16px; color: var(--muted); max-width: 36ch; }
.film-frame { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--shot-edge); box-shadow: var(--shot-shadow); background: #000; }
.film-frame video { width: 100%; aspect-ratio: 16 / 9; }
.film-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px;
             padding: 12px 22px 12px 16px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: rgba(12, 12, 16, .78);
             color: #fff; font: 600 1rem/1 var(--text); cursor: pointer; backdrop-filter: blur(2px); }
.film-play svg { width: 22px; height: 22px; fill: currentColor; }
.film-play:hover { background: rgba(12, 12, 16, .92); border-color: rgba(255, 255, 255, .5); }
/* display: inline-flex wuerde das hidden-Attribut sonst ueberstimmen */
.film-play[hidden] { display: none; }

/* Rundgang */
.tour { padding: 104px 0 40px; }
.feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; margin-top: 64px; }
.feature:nth-of-type(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.feature:nth-of-type(even) .shot { order: 2; }
.feature .copy p { margin-top: 14px; color: var(--muted); max-width: 44ch; }
.shot { margin: 0; }
.shot img { border-radius: 8px; border: 1px solid var(--shot-edge); box-shadow: var(--shot-shadow); width: 100%; }
.tour-small { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 48px; margin-top: 104px; }
.tour-small .shot img { aspect-ratio: 1400 / 860; object-fit: cover; object-position: left top; }
.tour-small article h3 { margin-top: 22px; }
.tour-small article p { margin-top: 10px; color: var(--muted); max-width: 48ch; }
.tour-ai { margin-top: 104px; }
.ai-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; padding: 44px; border-radius: 12px; background: var(--raise); }
.ai-panel p { margin-top: 14px; color: var(--muted); max-width: 46ch; }

/* Grundsaetze */
.principles { padding-top: 104px; }
.principles dl { margin: 36px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 56px; }
.principles dl > div { border-top: 1px solid var(--line); padding-top: 18px; }
.principles dt { font: 620 1.25rem/1.3 var(--display); }
.principles dd { margin: 8px 0 0; color: var(--muted); max-width: 48ch; }

/* Warum */
.why { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; padding-top: 112px; }
.why-letter p { font-size: 1.2rem; line-height: 1.7; max-width: 58ch; }
.why-letter p + p { margin-top: 18px; }
.why-letter .sig { margin-top: 28px; font-size: .95rem; color: var(--muted); line-height: 1.4; }
.why-letter .sig span { display: block; font: 600 1.35rem/1.3 var(--display); color: var(--ink); }

/* Download */
.download { padding-top: 112px; }
.download .divider { display: block; width: 120px; height: auto; margin: -24px 0 6px -14px; }
.download-intro { margin-top: 14px; color: var(--muted); }
.dl-groups { margin-top: 36px; display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 20px; align-items: start; }
.dl-group { padding: 22px 22px 14px; border-radius: 10px; border: 1px solid var(--line); }
.dl-group.is-mine { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber) inset; }
.dl-group h3 { font-size: 1.2rem; }
.dl-group ul { list-style: none; margin: 14px 0 0; padding: 0; }
.dl-group li { padding: 12px 0; border-top: 1px solid var(--line); }
.dl-group li:first-child { border-top: 0; padding-top: 4px; }
.pkg-desc { display: block; font-size: 1rem; line-height: 1.4; }
.pkg-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin-top: 3px; font-size: .84rem; }
.pkg-file { overflow-wrap: anywhere; }
.pkg-size { color: var(--muted); white-space: nowrap; }
.dl-group details { margin-top: 4px; font-size: .8rem; color: var(--muted); }
.dl-group summary { cursor: pointer; width: max-content; }
.sha { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; }
.sha code { white-space: normal; overflow-wrap: anywhere; font-size: .74rem; line-height: 1.5; padding: 4px 6px; }
.sha button { flex: none; font: 600 .75rem/1 var(--text); padding: 6px 9px; border-radius: 5px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
.sha button:hover { background: var(--raise); }
.dl-hint { margin-top: 10px; font-size: .84rem; color: var(--muted); line-height: 1.5; }
.dl-status { margin-top: 26px; color: var(--muted); font-size: .95rem; max-width: 70ch; }
.dl-links { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: .95rem; }

/* Neu / Nicht */
.later { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding-top: 112px; padding-bottom: 120px; }
.later h2 { font-size: 1.6rem; }
.later ul { margin: 18px 0 0; padding-left: 1.1em; color: var(--muted); }
.later li + li { margin-top: 12px; }
.later li::marker { color: var(--canopy); }
.news-shot { margin: 28px 0 0; max-width: 540px; }
.news > p { margin-top: 18px; font-size: .95rem; }

/* Fuss */
.foot { position: relative; padding: 44px 0 44px; color: var(--muted); font-size: .95rem; }
.foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px;
               background: repeating-linear-gradient(to bottom, #1f8a6c 0 1px, #2ea67e 1px 2px, transparent 2px 3px); opacity: .85; }
/* Mit Krea-Streifen endet die Seite im Wald: Staemme laufen am unteren Rand aus. Der Fuss bleibt dann dunkel, auch hell. */
.foot[data-scenery] { padding-bottom: 0; background: var(--ground); color-scheme: dark; --ink: #e8e8ec; --muted: #a6a5b2; --link: #5cc79a; --line: #2e2d38; }
.foot .grove { display: block; width: 100%; max-width: 1920px; height: auto; margin: 36px auto 0;
               -webkit-mask-image: linear-gradient(to bottom, transparent, #000 32%); mask-image: linear-gradient(to bottom, transparent, #000 32%); }
.foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 48px; }
.foot-legal { display: flex; gap: 22px; }
.foot-tip { max-width: 52ch; }

@media (max-width: 960px) {
  .hero-grid, .problem, .film-grid, .feature, .feature:nth-of-type(even), .ai-panel, .why, .later { grid-template-columns: minmax(0, 1fr); }
  .hero-grid { gap: 48px; }
  .hero .app { margin-bottom: 40px; }
  .feature:nth-of-type(even) .shot { order: 0; }
  .feature { gap: 26px; }
  .problem-after { grid-column: 1; }
  .dl-groups { grid-template-columns: minmax(0, 1fr); }
  .why { gap: 22px; }
  .ai-panel { padding: 28px; }
}
@media (max-width: 640px) {
  body { font-size: 1.0625rem; }
  .wrap { padding-inline: 16px; }
  .hero { padding: 0 0 48px; }
  .masthead[data-scenery] { padding-top: 56px; }
  .masthead-row { flex-direction: column; align-items: flex-start; }
  .head-img { margin: 8px 0 0; max-width: none; }
  .masthead + .hero-grid { margin-top: 20px; }
  .app-places, .filter, .tb-pill, .tb-btn.gear, .status-lib, .status-view { display: none; }
  .app-body { grid-template-columns: minmax(0, 1fr); }
  .tiles { padding: 4px; gap: 2px; }
  .tile { padding: 4px 3px 6px; }
  .tile .name { font-size: 11px; }
  .files { gap: 18px 10px; }
  .tour-small, .principles dl, .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .tour-small { gap: 48px; margin-top: 72px; }
  .ai-panel { padding: 20px; margin-inline: -4px; }
  .film { padding: 64px 0; }
  .feature { margin-top: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .file .card, .file .face { transition: none; }
}

/* Rechtstexte */
.legal { max-width: 720px; margin: 0 auto; padding: 40px 20px 72px; }
.legal h1 { font-size: 2.4rem; margin: 18px 0 8px; }
.legal h2 { font-size: 1.35rem; margin: 1.8em 0 .5em; }
.legal p + p { margin-top: .8em; }
.legal .box { background: var(--raise); border-radius: 8px; padding: 14px 18px; }
.legal .muted { color: var(--muted); }