/* stuffmanager-app.com: eigene Schriften, keine externen Quellen (strenge CSP). Maße nach W1 (1440) und W2 (390). */
@font-face { font-family: "Inter"; src: url("/assets/schriften/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/schriften/manrope-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/schriften/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --petrol: #0e6e6a;
  --petrol-dunkel: #0a4f4c;
  --petrol-hell: #e0efee;
  --grund: #f3f7f7;
  --karte: #ffffff;
  --tinte: #14181c;
  --gedaempft: #56606b;
  --rand: #e3e9ea;
  --dunkel: #16181d;
  --warn-bg: #fdeed8;
  --warn-text: #7a4a05;
  --fokus: #0e6e6a;
  --schrift: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --schrift-titel: "Manrope", "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --breite: 1200px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font: 400 16px/1.5 var(--schrift); color: var(--tinte); background: var(--grund); }
h1, h2, h3 { font-family: var(--schrift-titel); margin: 0; line-height: 1.15; }
p { margin: 0; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.band :focus-visible, .merkmale :focus-visible { outline-color: #fff; }
.wrap { width: 100%; max-width: calc(var(--breite) + 80px); margin: 0 auto; padding-left: 40px; padding-right: 40px; }
.ic { width: 20px; height: 20px; flex: none; }
.ic.klein { width: 16px; height: 16px; }

/* Kopf und Hero */
.band { background: var(--petrol); color: #fff; }
.kopfzeile { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; padding-bottom: 8px; }
.marke { display: inline-flex; align-items: flex-end; gap: 10px; color: #fff; text-decoration: none; }
.marke-elefant { height: 36px; width: auto; }
.marke-schrift { height: 25px; width: auto; margin-bottom: 1px; }   /* Grundlinie der Schrift auf den Füßen des Elefanten */
.marke.klein .marke-elefant { height: 24px; }
.marke.klein .marke-schrift { height: 17px; margin-bottom: 0; }
.sprache { position: relative; }
.sprache summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid rgba(255,255,255,.35); border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 500; }
.sprache summary::-webkit-details-marker { display: none; }
.sprache .kurz { display: none; }
.sprache ul { list-style: none; margin: 6px 0 0; padding: 6px; position: absolute; right: 0; z-index: 5; min-width: 160px; background: #fff; color: var(--tinte); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.sprache li a { display: block; padding: 8px 12px; border-radius: 8px; text-decoration: none; font-size: 14px; }
.sprache li a:hover, .sprache li a[aria-current] { background: var(--petrol-hell); }
.sprache li a:focus-visible { outline-color: var(--petrol); }
.hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; padding-top: 56px; padding-bottom: 96px; }
.hero-bild { display: flex; justify-content: center; }
.hero-elefant { width: min(100%, 420px); height: auto; color: #fff; }
.hero h1 { font-size: clamp(34px, 4.2vw, 54px); font-weight: 800; letter-spacing: -.01em; }
.hero-lead { margin-top: 24px; font-size: 18px; line-height: 1.55; color: rgba(255,255,255,.88); max-width: 34em; }
.knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 32px; }
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 10px; border: 1.5px solid var(--petrol); background: var(--petrol); color: #fff; font: 600 15px/1 var(--schrift); text-decoration: none; cursor: pointer; }
.knopf:hover { background: var(--petrol-dunkel); }
.knopf.hell { background: #fff; color: var(--petrol); border-color: #fff; }
.knopf.hell:hover { background: var(--petrol-hell); }
.link-hell { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; }
.link-hell:hover { text-decoration: underline; }
.hero-mobil { display: flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 14px; color: rgba(255,255,255,.85); }
.hero-meta { margin-top: 22px; font-size: 13px; color: rgba(255,255,255,.78); }

/* Abschnitte */
.abschnitt { padding-top: 72px; padding-bottom: 8px; }
.abschnitt h2, .inhalt h1 { font-size: 34px; font-weight: 800; }
.untertitel { margin-top: 10px; color: var(--gedaempft); }
.nur-klein { display: none; }

/* Kacheln: Raster mit gleicher Zeilenhöhe, Fuß bündig unten */
.kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 36px; align-items: stretch; }
.kachel { position: relative; display: flex; flex-direction: column; padding: 24px; background: var(--karte); border: 1px solid var(--rand); border-radius: 16px; }
.kachel.dein-system { border: 2px solid var(--petrol); padding: 23px; }
.dein-system[data-dein-system] { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; background: #dff2e8; color: #1b7a4b; font-size: 12px; font-weight: 600; }
.kachel-kopf { display: flex; align-items: center; gap: 14px; }
.icon-box { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--petrol-hell); color: var(--petrol); }
.kachel h3 { font-size: 19px; font-weight: 700; }
.kachel .info { margin-top: 18px; font-size: 14px; color: var(--gedaempft); }
.hinweis { margin-top: 18px; padding: 12px 14px; border-radius: 10px; font-size: 13px; line-height: 1.45; }
.hinweis.warnung { display: flex; gap: 10px; background: var(--warn-bg); color: var(--warn-text); }
.hinweis.chip { background: var(--petrol-hell); color: var(--petrol-dunkel); }
.kachel-fuss { margin-top: auto; padding-top: 24px; }
.kachel-knopf { width: 100%; background: #fff; color: var(--petrol); }
.kachel-knopf:hover { background: var(--petrol-hell); }
.dein-system .kachel-knopf { background: var(--petrol); color: #fff; }
.dein-system .kachel-knopf:hover { background: var(--petrol-dunkel); }
.groesse:not(:empty)::before { content: "· "; white-space: pre; }
.groesse { margin-left: -2px; }
.datei, .pruefsumme { margin-top: 10px; font: 400 11.5px/1.4 var(--mono); color: var(--gedaempft); overflow-wrap: anywhere; min-height: 1.4em; }
.datei:empty, .pruefsumme { margin-top: 4px; }
.datei:empty { display: none; }
.kopieren { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 4px; border: 0; border-radius: 6px; background: none; color: var(--gedaempft); cursor: pointer; vertical-align: middle; }
.kopieren:hover { background: var(--petrol-hell); }
.kopieren.kopiert { color: #1b7a4b; }
.bald-text { display: none; text-align: center; color: var(--gedaempft); font-weight: 600; min-height: 44px; line-height: 44px; }
.kachel.bald .kachel-knopf, .kachel.bald .datei, .kachel.bald .pruefsumme { display: none; }
.kachel.bald .bald-text { display: block; }
.iphone { display: flex; align-items: center; gap: 16px; margin-top: 36px; padding: 18px 24px; border-radius: 16px; background: var(--petrol-hell); color: var(--petrol-dunkel); }
.iphone h3 { font-size: 15px; font-weight: 700; }
.iphone p { font-size: 13.5px; color: var(--gedaempft); }
.iphone > div { flex: 1; }
.marke-bald { padding: 3px 12px; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 700; color: var(--petrol); }

/* Schritte */
.schritte { padding-top: 96px; padding-bottom: 96px; }
.schritte ol { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin: 40px 0 0; padding: 0; }
.schritte li { position: relative; }
.nummer { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--petrol); color: #fff; font: 700 17px var(--schrift-titel); }
.schritte li:not(:last-child)::after { content: ""; position: absolute; top: 21px; left: 58px; right: -20px; height: 1px; background: var(--rand); }
.schritte h3 { margin-top: 20px; font-size: 19px; font-weight: 700; }
.schritte li p { margin-top: 8px; color: var(--gedaempft); font-size: 15px; max-width: 24em; }

/* Merkmale */
.merkmale { background: var(--dunkel); color: #fff; }
.merkmale-innen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; padding-top: 64px; padding-bottom: 64px; }
.merkmal .ic { width: 26px; height: 26px; color: #5fd0c7; }
.merkmal h3 { margin-top: 14px; font-size: 18px; font-weight: 700; }
.merkmal p { margin-top: 10px; color: rgba(255,255,255,.7); font-size: 15px; max-width: 26em; }

/* Fuß */
.fuss { background: #fff; }
.fuss-innen { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; padding-bottom: 20px; }
.fuss .marke { color: var(--petrol); }
.fuss-links { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.fuss-text { font-size: 12.5px; color: var(--gedaempft); }
.fuss-text [data-fuss-version]::after { content: " · "; white-space: pre; }
.fuss-hinweise { font-size: 13px; font-weight: 500; color: var(--tinte); text-decoration: none; }
.fuss-hinweise:hover { text-decoration: underline; }

/* Unterseiten */
.klein-band .kopfzeile { padding-bottom: 20px; }
.inhalt { padding-top: 56px; padding-bottom: 80px; max-width: 860px; }
.inhalt h2 { font-size: 22px; margin-top: 32px; }
.inhalt p { margin-top: 14px; }
.klein-text { font-size: 13.5px; color: var(--gedaempft); }
.version { margin-top: 40px; padding: 24px; background: var(--karte); border: 1px solid var(--rand); border-radius: 16px; }
.version h2 { margin: 0; font-size: 26px; }
.version time { display: block; margin-top: 4px; color: var(--gedaempft); font-size: 14px; }
.version h3 { margin-top: 20px; font-size: 16px; }
.version ul { margin: 8px 0 0; padding-left: 20px; }
.version li { margin-top: 6px; }
.fehler { color: #a3261a; }
.zurueck a { color: var(--petrol); font-weight: 600; }
.sprachwahl-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; }
.sprachwahl-knoepfe button { height: 32px; padding: 0 12px; border: 1px solid rgba(255,255,255,.35); border-radius: 8px; background: none; color: #fff; font: 500 13px var(--schrift); cursor: pointer; }
.sprachwahl-knoepfe button[aria-current="true"] { background: #fff; color: var(--petrol); }
.code-panel { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 14px 16px; background: var(--karte); border: 1px solid var(--rand); border-radius: 12px; }
.code-panel code { flex: 1; font: 500 14px/1.4 var(--mono); overflow-wrap: anywhere; user-select: all; }
.kopiert-text { display: none; font-size: 12px; color: #1b7a4b; }
.code-panel .kopiert ~ .kopiert-text { display: inline; }
.dl-liste { padding-left: 20px; }
.dl-liste a { color: var(--petrol); font-weight: 600; }

/* Mobil (W2, 390) */
@media (max-width: 860px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .kopfzeile { padding-top: 18px; }
  .marke-elefant { height: 28px; } .marke-schrift { height: 19px; }
  .sprache .voll { display: none; } .sprache .kurz { display: inline; }
  .hero { grid-template-columns: 1fr; gap: 16px; padding-top: 12px; padding-bottom: 32px; }
  .hero-bild { order: -1; } .hero-elefant { width: 190px; }
  .hero h1 { font-size: 28px; }
  .hero-lead { margin-top: 16px; font-size: 16px; }
  .knoepfe { margin-top: 24px; }
  .knoepfe .knopf { width: 100%; min-height: 48px; }
  .hero-mobil { justify-content: center; }
  .abschnitt { padding-top: 36px; } .abschnitt h2, .inhalt h1 { font-size: 24px; }
  .nur-gross { display: none; } .nur-klein { display: inline; }
  .kacheln { display: block; margin-top: 18px; background: var(--karte); border: 1px solid var(--rand); border-radius: 14px; }
  .kachel { display: grid; grid-template-columns: 44px 1fr auto; column-gap: 14px; align-items: center; padding: 14px 16px; border: 0; border-radius: 0; border-top: 1px solid var(--rand); }
  .kachel:first-child { border-top: 0; }
  .kachel.dein-system { border: 0; border-top: 1px solid var(--rand); padding: 14px 16px; background: #f6fbfa; }
  .kachel-kopf { display: contents; }
  .kachel .icon-box { grid-row: 1 / span 2; }
  .kachel h3 { font-size: 15px; grid-column: 2; grid-row: 1; align-self: end; }
  .kachel .info { grid-column: 2; grid-row: 2; margin-top: 2px; font-size: 12.5px; }
  .kachel .hinweis { grid-column: 1 / -1; grid-row: 3; margin-top: 10px; }
  .kachel-fuss { grid-column: 3; grid-row: 1 / span 2; padding: 0; margin: 0; }
  .kachel-knopf { width: 44px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--petrol); }
  .kachel-knopf .knopf-text, .kachel-knopf .groesse, .kachel .datei, .kachel .pruefsumme { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
  .dein-system .kachel-knopf { background: none; color: var(--petrol); }
  .dein-system[data-dein-system] { position: static; grid-column: 2; grid-row: 3; justify-self: start; margin-top: 6px; }
  .iphone { display: none; }
  .schritte { padding-top: 44px; padding-bottom: 44px; }
  .schritte ol { grid-template-columns: 1fr; gap: 20px; margin-top: 20px; }
  .schritte li { display: grid; grid-template-columns: 42px 1fr; column-gap: 14px; }
  .schritte li::after { display: none; }
  .nummer { grid-row: 1 / span 2; }
  .schritte h3 { margin-top: 0; font-size: 16px; } .schritte li p { margin-top: 2px; font-size: 14px; }
  .merkmale-innen { grid-template-columns: 1fr; gap: 28px; padding-top: 36px; padding-bottom: 36px; }
  .merkmal { display: grid; grid-template-columns: 30px 1fr; column-gap: 14px; }
  .merkmal .ic { grid-row: 1 / span 2; }
  .merkmal h3 { margin-top: 0; font-size: 16px; } .merkmal p { margin-top: 4px; font-size: 14px; }
  .fuss-innen { flex-direction: column-reverse; align-items: flex-start; gap: 12px; }
  .fuss .marke { display: none; }
  .fuss-text { display: flex; flex-direction: column; }
  .fuss-text [data-fuss-version]::after { content: ""; }
  .inhalt { padding-top: 32px; }
}