/* Startseite byteweise.com: digitaler Canvas (Punktraster wie Miro) in gedämpftem Chromgrau, Byte im Pixel-Look steht auf einem
   Podest und stellt seine Apps vor. Farben aus dem Figurenblatt (Cyan, Azur, Deep Navy), Schriften Inter und JetBrains Mono. */
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap; src: url(schriften/inter.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 100 800; font-display: swap; src: url(schriften/jetbrains-mono.woff2) format("woff2"); }

:root {
  /* Grund: Chrom aus dem Figurenblatt, eine Stufe dunkler, Flächen leicht cremefarben (Nick 26.10.: heller als Anthrazit, dunkler als vorher, nicht reinweiß) */
  --canvas: #c8cfd8; --punkt: #adb7c3; --text: #1d2c42; --text-2: #3f4d63; --blatt: #faf6ee;
  --navy: #1d2c42; --navy-2: #4a5a72; --cyan: #18d8e4; --azur: #00a8f0; --azur-text: #0072a8;
  --mono: "JetBrains Mono", ui-monospace, monospace; --ui: "Inter", system-ui, sans-serif;
  --rand: max(16px, calc((100vw - 1040px) / 2));
  --px: 1px; /* Maßstab für Bytes Podest */
}
* { box-sizing: border-box; }
html { background: var(--canvas); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; color: var(--text); font: 400 1.0625rem/1.5 var(--ui);
  background: radial-gradient(circle, var(--punkt) 1.2px, transparent 1.6px) 0 0 / 24px 24px, var(--canvas); }
a:focus-visible { outline: 3px solid var(--azur); outline-offset: 4px; border-radius: 6px; }

.kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 28px var(--rand) 0; }
.kopf a { color: inherit; text-decoration: none; }
.kopf b { font: 800 1.6rem/1 var(--ui); letter-spacing: -.02em; }
.kopf b::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 3px; background: var(--cyan); box-shadow: 9px -9px 0 var(--azur); }
.kopf span { font: 500 .95rem/1.3 var(--mono); color: var(--text-2); }

/* Bühne: Byte links, Sprechblase und App-Karte rechts, eine Verbindungslinie von seiner Hand zur Karte */
.buehne { flex: 1; display: grid; grid-template-columns: auto minmax(0, 30rem); justify-content: center; align-items: start;
  grid-template-rows: auto auto 1fr; column-gap: 72px; padding: clamp(32px, 6vw, 72px) var(--rand) 72px; }
.byte { grid-row: 1 / 4; position: relative; isolation: isolate; margin: 0; width: 320px; }
.byte img { display: block; width: 100%; height: auto; }
/* Podest im Pixel-Look: Deckfläche, Leuchtkante in Cyan wie die Linien am Anzug, Vorderseite in Deep Navy, Ecken in Stufen */
.byte::before, .byte::after { content: ""; position: absolute; z-index: -1; }
.byte::before { left: 2%; right: 4%; bottom: calc(-28 * var(--px)); height: calc(44 * var(--px));
  background: linear-gradient(#3c4860 0 calc(20 * var(--px)), var(--cyan) 0 calc(23 * var(--px)), var(--navy) 0 calc(40 * var(--px)), #121a28 0);
  --s: calc(4 * var(--px));
  clip-path: polygon(0 var(--s), var(--s) var(--s), var(--s) 0, calc(100% - var(--s)) 0, calc(100% - var(--s)) var(--s), 100% var(--s),
    100% calc(100% - var(--s)), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - var(--s)) 100%, var(--s) 100%,
    var(--s) calc(100% - var(--s)), 0 calc(100% - var(--s))); }
/* Schatten unter den Füßen, als gestufte Ellipse */
.byte::after { left: 9%; right: 13%; bottom: calc(-3 * var(--px)); height: calc(9 * var(--px)); background: rgb(0 0 0 / .45);
  clip-path: polygon(12% 0, 88% 0, 88% 33%, 100% 33%, 100% 67%, 88% 67%, 88% 100%, 12% 100%, 12% 67%, 0 67%, 0 33%, 12% 33%); }
@media (prefers-reduced-motion: no-preference) {
  .byte img { transform-origin: 50% 100%; animation: atmen 3.2s steps(4, jump-none) infinite alternate; }
  @keyframes atmen { to { transform: scaleY(1.012); } }
}
.blase { grid-column: 2; position: relative; margin: 18px 0 0; padding: 18px 22px; color: var(--navy); background: var(--blatt); border: 2px solid var(--navy); border-radius: 16px;
  font: 700 clamp(1.3rem, 2.4vw, 1.6rem)/1.3 var(--mono); letter-spacing: -.01em; }
/* Spitze zeigt nach links oben zu Bytes Mund */
.blase::before, .blase::after { content: ""; position: absolute; left: -24px; top: 18px; border-style: solid; border-width: 0 24px 16px 0; }
.blase::before { border-color: transparent var(--navy) transparent transparent; }
.blase::after { left: -20px; top: 20px; border-width: 0 21px 13px 0; border-color: transparent var(--blatt) transparent transparent; }

/* App-Karte als ausgewähltes Objekt auf dem Canvas: Auswahlrahmen mit Griffen in den Ecken */
.app { grid-column: 2; position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 84px;
  padding: 18px; color: var(--navy); text-decoration: none; background: var(--blatt); border: 2px solid var(--navy); border-radius: 14px;
  box-shadow: 0 0 0 5px var(--canvas), 0 0 0 7px var(--azur); }
.app::before { content: ""; position: absolute; right: 100%; top: 38px; width: 70px; height: 2px; margin-right: 9px; background: var(--azur); }
.app .griffe { position: absolute; inset: -11px; pointer-events: none; background:
  linear-gradient(var(--blatt), var(--blatt)) 2px 2px / 6px 6px no-repeat, linear-gradient(var(--blatt), var(--blatt)) calc(100% - 2px) 2px / 6px 6px no-repeat,
  linear-gradient(var(--blatt), var(--blatt)) 2px calc(100% - 2px) / 6px 6px no-repeat, linear-gradient(var(--blatt), var(--blatt)) calc(100% - 2px) calc(100% - 2px) / 6px 6px no-repeat,
  linear-gradient(var(--azur), var(--azur)) 0 0 / 10px 10px no-repeat, linear-gradient(var(--azur), var(--azur)) 100% 0 / 10px 10px no-repeat,
  linear-gradient(var(--azur), var(--azur)) 0 100% / 10px 10px no-repeat, linear-gradient(var(--azur), var(--azur)) 100% 100% / 10px 10px no-repeat; }
.app img { width: 64px; height: 64px; border-radius: 14px; }
.app b { display: block; font: 800 1.35rem/1.2 var(--ui); letter-spacing: -.01em; }
.app span { display: block; color: var(--navy-2); }
.app em { display: block; margin-top: 6px; font: 600 .85rem/1.3 var(--mono); font-style: normal; color: var(--azur-text); }
.app:hover { box-shadow: 0 0 0 5px var(--canvas), 0 0 0 7px var(--navy); }

/* Impressum und Datenschutz: ein weißes Blatt auf dem Canvas, links bündig mit dem Kopf */
.recht { align-self: flex-start; width: calc(100% - 2 * var(--rand)); max-width: 46rem; margin: clamp(24px, 4vw, 48px) var(--rand) 24px;
  padding: clamp(20px, 4vw, 40px); color: var(--navy); background: var(--blatt); border: 2px solid var(--navy); border-radius: 14px; }
.recht h1 { margin: 0 0 4px; font: 800 clamp(1.7rem, 4vw, 2.3rem)/1.1 var(--ui); letter-spacing: -.02em; }
.recht .stand { margin: 0 0 8px; font: 500 .9rem/1.4 var(--mono); color: var(--navy-2); }
.recht h2 { margin: 28px 0 6px; font: 700 1.1rem/1.3 var(--ui); }
.recht p { margin: 0 0 12px; }
.recht a { color: var(--azur-text); overflow-wrap: anywhere; }
.recht + .fuss { margin-top: auto; }

.fuss { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 24px var(--rand) 32px; font: 500 .9rem/1.4 var(--mono); }
.fuss a { color: var(--text-2); }
.fuss a:hover { color: var(--text); }

@media (max-width: 759px) {
  .buehne { grid-template-columns: minmax(0, 1fr); justify-items: center; padding-top: 24px; }
  /* Handy: Sprechblase über Byte, Spitze nach unten zum Kopf, Karte darunter ohne Verbindungslinie */
  .buehne { grid-template-rows: none; }
  .blase { grid-column: 1; grid-row: 1; margin: 0 0 22px; }
  .byte { grid-row: 2; width: 180px; --px: .6px; }
  .app { grid-column: 1; grid-row: 3; margin: 52px 11px 0; width: calc(100% - 22px); }
  .blase::before { left: 50%; top: 100%; margin-left: -12px; border-width: 18px 12px 0 12px; border-color: var(--navy) transparent transparent transparent; }
  .blase::after { left: 50%; top: 100%; margin: -1px 0 0 -9px; border-width: 14px 9px 0 9px; border-color: var(--blatt) transparent transparent transparent; }
  .app::before { display: none; }
}