/* ═══════════════════════════════════════════════════════════════════
   3D-Objekte — Raster und Detailfenster.

   Vorbild ist MakerWorld (Bildschirmfotos von Markus, 13.09.2026):
   grosse Bilder in einem dichten Raster, darunter Titel, Urheber und
   Zahlen; ein Klick oeffnet ein Fenster, links die Bilder, rechts die
   Angaben, unten die Knoepfe.

   Die Werte (Rundung, Einzug) kommen aus css/stil.css, die Farben aus
   css/farben.css (hell und dunkel, seit 19.09.2026).
   ═══════════════════════════════════════════════════════════════════ */

#seiteDreid .innen { padding-block: 28px 80px; }

.d3-kopfzeile { margin: 14px 0 24px; }
.d3-kopfzeile h1 { font-size: clamp(30px, 4vw, 44px); margin: 0 0 8px; }
.d3-kopfzeile .abschnittstext { margin: 0; max-width: 62ch; }

/* ── Suche und Kategorien ───────────────────────────────────────── */

.d3-werkzeugleiste {
  display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center;
  margin-bottom: 14px;
}
.d3-suche {
  position: relative; flex: 1 1 280px; max-width: 420px;
}
.d3-suche .sym {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--leise); pointer-events: none;
}
.d3-suche input {
  width: 100%; padding: 11px 16px 11px 42px;
  border: 1px solid var(--feldrand); border-radius: 999px;
  background: var(--grund); color: var(--text); font: inherit; font-size: 15px;
}
.d3-suche input:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.d3-filter { margin: 0; justify-content: flex-start; }

.d3-anzahl { margin: 0 0 14px; color: var(--leise); font-size: 14px; }

/* ── Raster ─────────────────────────────────────────────────────── */

/* Fuenf Spalten auf einem breiten Schirm wie bei MakerWorld, dann weniger.
   Feste Spaltenzahlen je Breite statt auto-fit mit minmax(): Die feste
   Untergrenze von minmax() hat auf dieser Seite schon dreimal einen
   seitlichen Ueberlauf bei 320 Pixeln verursacht. */
.d3-raster {
  display: grid; gap: 26px 20px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) { .d3-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .d3-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; } }
@media (max-width: 420px)  { .d3-raster { grid-template-columns: minmax(0, 1fr); } }

.d3-karte { min-width: 0; }
.d3-kartenlink { display: block; color: inherit; text-decoration: none; }
.d3-kartenbild {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 3; border-radius: 14px;
  background: var(--bildgrund);
}
.d3-kartenbild > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .25s;
}
.d3-kartenlink:hover .d3-kartenbild > img { transform: scale(1.035); }
.d3-kartenlink:focus-visible { outline: none; }
.d3-kartenlink:focus-visible .d3-kartenbild { outline: 3px solid var(--akzent); outline-offset: 3px; }

/* Das Zeichen oben links — bei MakerWorld der gruene Wuerfel. */
.d3-marke {
  position: absolute; left: 10px; top: 10px;
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 2px 8px rgba(var(--schatten), .15);
}
.d3-marke img { width: 22px; height: 22px; }

.d3-vorschaumarke {
  position: absolute; right: 10px; top: 10px;
  padding: 4px 9px; border-radius: 999px;
  background: #b45309; color: #fff; font-size: 11px; font-weight: 700;
}

.d3-kartentitel {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 10px 2px 6px; font-weight: 700; font-size: 15.5px; line-height: 1.35;
}
.d3-kartenfuss {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 2px; color: var(--leise); font-size: 13px;
}
.d3-autor { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.d3-autor img { width: 20px; height: 20px; border-radius: 50%; flex: none; }
.d3-zahl { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.d3-zahl .sym { width: 15px; height: 15px; }
.d3-zahl[hidden] { display: none; }

/* ── Startseite ─────────────────────────────────────────────────── */

#dreid { padding: clamp(50px, 7vw, 90px) 0; border-top: 1px solid var(--rand); }
#dreid h2 { margin-bottom: 10px; }
#dreid .abschnittstext { margin: 0 auto 30px; }
.d3-alleknopf { margin: 30px 0 0; }

/* ═══════════ Das Detailfenster ═══════════ */

body.d3-offen { overflow: hidden; }

#dreidSchleier {
  position: fixed; inset: 0; z-index: 150;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(8, 11, 20, .55);
  animation: d3Einblenden .18s ease-out;
}
#dreidSchleier[hidden] { display: none; }
@keyframes d3Einblenden { from { opacity: 0; } to { opacity: 1; } }

#dreidFenster {
  position: relative;
  width: min(1240px, 100%); max-height: calc(100vh - 40px);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0 26px;
  padding: 22px 26px 0;
  border-radius: 18px; background: var(--grund);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  overflow: hidden;
  animation: d3Hoch .22s cubic-bezier(.22, .8, .3, 1);
}
@keyframes d3Hoch { from { transform: translateY(12px); opacity: .6; } to { transform: none; opacity: 1; } }

.d3-zu {
  position: absolute; right: 14px; top: 12px; z-index: 2;
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--rand); background: var(--grund);
  font-size: 24px; line-height: 1; color: var(--leise); cursor: pointer;
}
.d3-zu:hover { color: var(--text); background: var(--flaeche); }
.d3-zu:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

.d3-links, .d3-rechts { min-height: 0; overflow-y: auto; padding-bottom: 18px; }
.d3-rechts { padding-right: 36px; padding-top: 4px; }
/* Der Traeger um die beiden Spalten (js/dreid.js) verschwindet ab 861 px:
   Seine zwei Kinder sind dann selbst die Gitterfelder des Fensters — genau
   wie vor dem 20.09.2026, Pixel fuer Pixel. Erst am Handy wird er zum
   gemeinsamen Rollbereich (siehe unten). */
.d3-scrollbereich { display: contents; }

.d3-fensterkopf { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; padding-right: 40px; }
.d3-kopfzeichen {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  border: 1px solid var(--rand); background: var(--flaeche); padding: 6px;
}
.d3-fensterkopf h2 { margin: 0; font-size: 21px; line-height: 1.25; }
.d3-unterzeile { margin: 3px 0 0; color: var(--leise); font-size: 14px; }
.d3-gratis {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 6px;
  /* #15803d statt #16a34a (19.09.2026): Weiss auf dem helleren Gruen hatte
     nur 3,30:1 — zu wenig fuer 12 px. Jetzt 5,02:1, in beiden Modi gleich. */
  background: #15803d; color: #fff; font-size: 12px; font-weight: 700;
}

.d3-hauptbild {
  position: relative; display: block; width: 100%;
  padding: 0; border: 0; border-radius: 14px; overflow: hidden;
  background: var(--bildgrund); cursor: zoom-in; aspect-ratio: 4 / 3;
}
.d3-hauptbild img { width: 100%; height: 100%; object-fit: contain; display: block; }
.d3-hauptbild:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }
.d3-hauptbild:hover .lupenmarke, .d3-hauptbild:focus-visible .lupenmarke { opacity: 1; transform: none; }

.d3-daumen { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.d3-daumen button {
  width: 96px; aspect-ratio: 4 / 3; padding: 0; overflow: hidden;
  border-radius: 10px; border: 2px solid var(--rand); background: var(--bildgrund); cursor: pointer;
}
.d3-daumen button img { width: 100%; height: 100%; object-fit: cover; }
.d3-daumen button.aktiv { border-color: #16a34a; }
.d3-daumen button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Rechts: Bloecke mit Rahmen, wie "Druckprofil" und "Beschreibung". */
.d3-block {
  border: 1px solid var(--rand); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 14px;
}
.d3-block h3 {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px; font-size: 16px;
}
.d3-zaehler {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; background: var(--flaeche); color: var(--leise); font-size: 12px;
}
.d3-dateiliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.d3-dateiliste li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border-radius: 10px; background: var(--flaeche);
}
.d3-dateizeichen {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: 10px; background: var(--grund); color: var(--akzent);
}
.d3-dateizeichen .sym { width: 20px; height: 20px; }
.d3-dateitext { display: grid; gap: 2px; min-width: 0; flex: 1; }
.d3-dateitext strong { font-size: 14.5px; overflow-wrap: anywhere; }
.d3-dateiliste .knopf.klein { padding: 8px 10px; flex: none; }
.d3-dateiliste .knopf .sym { width: 17px; height: 17px; }

.d3-bett {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 0 0; font-size: 13.5px;
}
.d3-bett .sym { width: 17px; height: 17px; flex: none; }
/* Das Gruen der uebrigen Seite (--gut, hell #047857 statt vorher #15803d). */
.d3-bett.passt { color: var(--gut); }
.d3-bett.passtnicht { color: var(--warn); }

.d3-druck { margin: 0; display: grid; gap: 8px; }
.d3-druck > div { display: grid; grid-template-columns: 9em 1fr; gap: 10px; }
.d3-druck dt { color: var(--leise); margin: 0; }
.d3-druck dd { margin: 0; font-weight: 600; }

.d3-beschreibung, .d3-lizenz { margin: 0; line-height: 1.65; color: var(--text); }
.d3-lizenz a { color: var(--akzent); font-weight: 600; }

/* Unten: Zahlen links, Knoepfe rechts — wie die Leiste bei MakerWorld. */
.d3-fuss {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between; gap: 14px 20px;
  flex-wrap: wrap;
  margin: 0 -26px; padding: 14px 26px;
  border-top: 1px solid var(--rand); background: var(--grund);
}
.d3-fakten {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  list-style: none; margin: 0; padding: 0;
  color: var(--leise); font-size: 13.5px;
}
.d3-fakt { display: inline-flex; align-items: center; gap: 6px; }
.d3-fakt .sym { width: 16px; height: 16px; }
.d3-fakt[hidden] { display: none; }
.d3-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: flex-end; }
.d3-aktionen .knopf .sym { width: 18px; height: 18px; }
.d3-hauptknopf { min-width: 220px; }
.d3-lagehinweis {
  display: flex; align-items: center; gap: 8px; margin: 0;
  color: var(--leise); font-size: 14px;
}
.d3-lagehinweis .sym { width: 18px; height: 18px; flex: none; }

/* ── Handy ──────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  #dreidSchleier { padding: 0; place-items: stretch; }
  #dreidFenster {
    width: 100%; max-height: none; height: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    border-radius: 0; padding: 16px 16px 0;
  }
  /* Am Handy scrollt EIN Bereich — Bilder und Angaben untereinander.
     Zwei getrennte Rollbereiche nebeneinander gibt es dort nicht.
     Bis 20.09.2026 fehlte der Traeger im HTML, und diese Regel lief ins
     Leere: Die beiden Spalten standen in zwei festen Gitterzeilen
     (minmax(0, 1fr) und auto), aus denen ihr Inhalt sichtbar herausragte —
     bei 390 px das Hauptbild 61 Pixel und der Bilderstreifen 54 Pixel in
     die Angaben hinein. Rollen liess sich gar nichts. */
  .d3-links { overflow: visible; padding-bottom: 0; }
  .d3-rechts { overflow: visible; padding: 14px 0 18px; }
  .d3-scrollbereich { display: block; overflow-y: auto; min-height: 0; }
  .d3-fuss { margin: 0 -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .d3-aktionen { width: 100%; }
  .d3-aktionen .knopf { flex: 1 1 auto; }
  .d3-hauptknopf { min-width: 0; }
  .d3-daumen button { width: 72px; }
}

/* ── Stapelreihenfolge der Fenster ──────────────────────────────
   Das 3D-Fenster (150) oeffnet zwei andere Fenster UEBER sich: das
   Anmeldefenster ("Zum Herunterladen anmelden") und die grosse
   Bildansicht. Das Anmeldefenster stand mit 120 aber DARUNTER — es ging
   auf, war unsichtbar, und ein Klick neben das 3D-Fenster schloss es.
   Gefunden hat das die Sicherheitspruefung am 13.09.2026; der eigene
   Pruefstand hatte nur "hidden" abgefragt, nicht, was oben liegt.

   Reihenfolge, von unten:  Kopf 60 · 3D-Fenster 150 · Anmelden und
   Rechtstext 170 · grosse Bildansicht 200 · Meldungen 250 */
#kontoSchleier, #schleier { z-index: 170; }
#gross { z-index: 200; }
#meldung, .meldung { z-index: 250; }

/* ── Kopfzeile: ein Menuepunkt mehr ─────────────────────────────
   "3D-Objekte" macht das Menue 111 Pixel breiter (538 → 649). Gemessen
   am 13.09.2026: Bei 861 Pixeln blieben zwischen Logo und Menue nur noch
   27 Pixel, bei 900 Pixeln 62. Statt den Hamburger frueher einzuschalten
   (das sperrte ein funktionierendes Menue auf vielen Laptops weg), ruecken
   die Punkte unterhalb von 1100 Pixeln enger zusammen. */
@media (max-width: 1100px) and (min-width: 861px) {
  #menue { gap: 18px; }
  #menue a { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  #dreidSchleier, #dreidFenster { animation: none; }
  .d3-kartenbild > img { transition: none; }
}

/* ── Eigene Vorlage einreichen (seit 28.09.2026) ───────────────────
   Ein Formular unter der Ueberschrift von /3d, aufgeklappt ueber den Knopf
   (js/dreid.js, dreidFormBauen). Nur Token aus farben.css. */
.d3-einreichenzeile { margin: 14px 0 0; }
.d3-einreichen {
  margin: 8px 0 28px; padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--rand); border-radius: 16px; background: var(--karte);
  box-shadow: 0 12px 30px rgba(var(--schatten), .08);
}
.d3-einreichen[hidden] { display: none; }
.d3-einreichen h2 { margin: 0 0 6px; font-size: clamp(20px, 2.4vw, 24px); }
.d3-einreichen form { display: grid; gap: 14px; margin-top: 14px; }
.d3-feldreihe { display: grid; gap: 14px 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.d3-feld { display: grid; gap: 6px; font-size: 13px; color: var(--leise); min-width: 0; }
.d3-feld input[type=text], .d3-feld textarea, .d3-feld select, .d3-feld input[type=file] {
  width: 100%; min-width: 0; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--feldrand); background: var(--grund); color: var(--text);
  font: inherit; font-size: 15px;
}
.d3-feld textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.d3-feld input:focus-visible, .d3-feld textarea:focus-visible, .d3-feld select:focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 1px; border-color: var(--akzent);
}
.d3-haken { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text); line-height: 1.5; }
.d3-haken input { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.d3-haken a { color: var(--akzent); }
.d3-formhinweis { margin: 0; color: var(--leise); }
.d3-formstand { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--leise); }
.d3-formstand.gut { color: var(--gut); font-weight: 600; }
.d3-formstand.fehler { color: var(--fehler); font-weight: 600; }

/* Aus der Gemeinschaft: statt des MarkiMedia-Zeichens ein Personen-Sinnbild,
   die Beschreibung mit ihren eigenen Zeilenumbruechen, ein Meldeweg (DSA). */
.d3-autor svg { width: 18px; height: 18px; flex: none; color: var(--leise); }
.d3-kopfperson { display: grid; place-items: center; color: var(--leise); }
.d3-kopfperson svg { width: 26px; height: 26px; }
.d3-freitext { white-space: pre-line; overflow-wrap: anywhere; }
.d3-melden { align-self: center; font-size: 13px; color: var(--leise); margin-right: auto; }
.d3-melden:hover, .d3-melden:focus-visible { color: var(--akzent); }