:root{--sky:#a9d8f2;--ink:#14212b;--grass:#4f8a2e;--dirt:#6e4a2b;--light:#f1ebe2}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;position:relative;font:18px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink)}
h1{margin:0;font-family:Rockwell,"Roboto Slab",Cambria,Georgia,serif;font-weight:800;font-size:clamp(2.7rem,min(10vw,15vh),5.8rem);line-height:.98;letter-spacing:-.02em}
.pad{padding-left:max(20px,calc((100% - 860px)/2));padding-right:max(20px,calc((100% - 860px)/2))}
.sky{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:var(--sky);padding-top:56px;padding-bottom:40px}
.lead{max-width:34em;margin:18px 0 28px;font-size:1.15rem}
.lead b{font-size:1.5em;font-family:Rockwell,Cambria,Georgia,serif}
.ip{display:inline-flex;align-items:center;gap:14px;font:700 1.15rem/1 ui-monospace,Consolas,monospace;padding:16px 20px;background:#fff;color:var(--ink);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);cursor:pointer}
.ip:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.ip small{font:600 .8rem system-ui,sans-serif;color:#44525e}
.status{display:flex;align-items:center;gap:10px;margin-top:22px;font-weight:600}
.dot{width:14px;height:14px;background:#777;border:2px solid var(--ink)}
.dot.on{background:#3fbf4f}.dot.off{background:#d14b3d}
.ground{background:var(--dirt);border-top:16px solid var(--grass);color:var(--light);padding-top:26px;padding-bottom:26px;font-size:.9rem}
:focus-visible{outline:3px solid #ffd23f;outline-offset:3px}
.tabs{display:flex;margin-bottom:16px}
.tabs button{font:700 1rem system-ui,sans-serif;padding:10px 18px;background:#fff;color:var(--ink);border:3px solid var(--ink);cursor:pointer}
.tabs button+button{border-left:0}
.tabs button[aria-pressed=true]{background:var(--ink);color:#fff}
.card{display:grid;gap:14px;width:min(100%,380px);margin:0;padding:22px;background:#fff;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
label{display:grid;gap:4px;font-weight:600;font-size:.95rem}
input{font:inherit;padding:10px;border:3px solid var(--ink);background:#fff;color:var(--ink)}
.btn{font:700 1rem system-ui,sans-serif;padding:12px;background:#3b6d20;color:#fff;border:3px solid var(--ink);cursor:pointer}
.btn.alt{background:#fff;color:var(--ink)}
.err{min-height:1.4em;margin:0;color:#a3261a;font-weight:600;font-size:.95rem}
.who{position:absolute;top:14px;right:20px;display:flex;gap:16px;align-items:center;font-size:.9rem}
.link{background:none;border:0;padding:0;font:inherit;color:var(--ink);text-decoration:underline;cursor:pointer}
dialog{padding:0;border:0;background:none}
dialog::backdrop{background:#14212b99}

/* Animierter Minecraft-Cinematic-Hintergrund */
html {
  min-height: 100%;
  background: #171717;
}

body {
  position: relative;
  isolation: isolate;
  background: transparent !important;
}

#minecraftBackground {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
  pointer-events: none;
}

#backgroundOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  z-index: -1;
  pointer-events: none;
}

/* Schematics-Bibliothek */
.schematics-screen {
  width: min(1100px, calc(100% - 28px));
  margin: 80px auto 40px;
  color: #fff;
}

.schematics-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.schematics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

.schematic-card {
  min-width: 0;
  padding: 16px;
  background: #454545;
  border: 1px solid #777;
  border-radius: 8px;
}

.schematic-card h3 {
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}

.schematic-card p {
  color: #ddd;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.schematic-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.schematic-actions button,
.schematic-actions a,
.schematic-upload-button {
  display: inline-block;
  padding: 9px 12px;
  color: #fff;
  background: #333;
  border: 1px solid #aaa;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
}

.schematic-actions button:hover,
.schematic-actions a:hover,
.schematic-upload-button:hover {
  background: #555;
}

.schematic-empty {
  color: #ddd;
  padding: 20px 0;
}

.schematic-upload-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 20px;
}

.schematic-upload-form input,
.schematic-upload-form textarea {
  max-width: 100%;
  padding: 9px;
}

.schematic-message {
  margin: 12px 0;
  color: #eee;
}

@media (max-width: 520px) {
  .schematics-screen {
    margin-top: 72px;
  }
}


.schematic-preview-dialog {
  width: min(1100px, 94vw);
  max-width: none;
  padding: 0;
  border: 1px solid #344155;
  border-radius: 14px;
  color: #e5e7eb;
  background: #111827;
}

.schematic-preview-dialog::backdrop {
  background: rgba(0, 0, 0, 0.78);
}

.schematic-preview-content {
  padding: 18px;
}

.schematic-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.schematic-preview-header h2 {
  margin: 0;
}

.schematic-preview-header button {
  padding: 8px 12px;
  cursor: pointer;
}

.schematic-preview-canvas-wrap {
  width: 100%;
  height: min(65vh, 650px);
  min-height: 300px;
  overflow: hidden;
  border: 1px solid #344155;
  border-radius: 8px;
  background: #0b1020;
}

#schematicPreviewCanvas {
  display: block;
  width: 100%;
  height: 100%;
}

#schematicPreviewMessage {
  min-height: 1.4em;
  color: #cbd5e1;
}