/*
 * Dein Tag - drei Druckbilder auf einem Geruest.
 *   body.zeitung   bis 1969 (mit .antiqua 1933-1949: Kopf ohne Fraktur)
 *   body.magazin   1970-1994, Jugendmagazin mit Neon
 *   body.portal    ab 1995, fruehes Internet mit glaenzenden Kaesten
 * Abgenommen als Skizze am 04.11.2026.
 */

:root {
  --papier: #f2eee3;
  --papier-hell: #f8f5ec;
  --tisch: #2b2a27;
  --tinte: #151412;
  --grau: #5e5a52;
  --rot: #b3121f;
  --zart: #cdc6b5;
  --kopf: "UnifrakturMaguntia", "Old English Text MT", serif;
  --titel: "Playfair Display", Georgia, serif;
  --rubrik: "Oswald", "Arial Narrow", sans-serif;
  --text: "Source Serif 4", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; font: 16px/1.5 var(--text); color: var(--tinte); }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--rot); outline-offset: 2px; }
[hidden] { display: none !important; }

.ausgabe { max-width: 520px; margin: 0 auto; padding: 22px 18px 28px; display: grid; gap: 14px; }

.vorschau-streifen { background: #111; color: #eee; font: 500 12px/1.3 var(--mono); padding: 8px 14px; text-align: center; }
.vorschau-streifen a { color: #ffd35c; }

.in-arbeit { font: italic 400 14px/1.45 var(--text); padding: 10px 12px; border: 1px dashed currentColor; opacity: .85; }
.glueckwunsch { text-align: center; font: 600 14px/1 var(--rubrik); letter-spacing: .14em; text-transform: uppercase;
  padding: 10px 12px; border: 2.5px solid var(--rot); color: var(--rot); transform: rotate(-1.5deg); justify-self: center; }

/* Schluss: Teilen, Aendern, Nachweise ------------------------------------ */
.schluss { display: grid; gap: 12px; justify-items: center; padding-top: 8px; text-align: center; }
.teilen { font: 600 14px/1 var(--rubrik); letter-spacing: .16em; text-transform: uppercase; color: var(--rot); background: transparent;
  border: 2.5px solid var(--rot); border-radius: 4px; padding: 12px 20px; transform: rotate(-2deg); cursor: pointer; }
.aendern { font-size: 13px; color: var(--grau); }
.nachweis { font: 400 10.5px/1.45 var(--mono); color: var(--grau); max-width: 60ch; }
.nachweis a { text-decoration: underline; }
.recht { font-size: 12px; color: var(--grau); }

.bildvorschau { position: fixed; inset: 0; background: rgba(0,0,0,.82); display: grid; place-items: center; padding: 18px; z-index: 10; }
.bildvorschau-box { display: grid; gap: 10px; justify-items: center; max-width: 360px; color: #fff; text-align: center; font: 14px/1.4 system-ui, sans-serif; }
.bildvorschau-box img { width: 100%; height: auto; border-radius: 10px; }
.bildvorschau-box button { font: 600 15px/1 system-ui, sans-serif; padding: 11px 22px; border-radius: 99px; border: 0; cursor: pointer; }

canvas.mond { width: 100%; height: auto; display: block; }

/* ======================================================================
   ZEITUNG
   ====================================================================== */
body.zeitung { background: var(--papier);
  background-image: radial-gradient(rgba(60,45,20,.05) 1px, transparent 1.2px); background-size: 3px 3px; }
.zeitung-blatt { display: grid; gap: 14px; }
.zeitung .zeile { display: flex; justify-content: space-between; gap: 8px; font: 500 10px/1.2 var(--rubrik); letter-spacing: .08em;
  text-transform: uppercase; border-bottom: 1px solid var(--tinte); padding-bottom: 6px; }
.zeitung .zeile .rot { color: var(--rot); }
.titelkopf { text-align: center; border-bottom: 4px double var(--tinte); padding-bottom: 8px; }
.titelkopf .name { font: 400 clamp(52px, 15vw, 70px)/1 var(--kopf); }
.antiqua .titelkopf .name, .antiqua .kopfname { font: 900 clamp(46px, 13vw, 62px)/1 var(--titel); letter-spacing: -.01em; }
.titelkopf .unter { font: italic 400 13px/1.3 var(--text); color: var(--grau); margin-top: 3px; }
.datumsleiste { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  font: 600 11px/1.2 var(--rubrik); letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--tinte); padding-bottom: 8px; }
.datumsleiste span:last-child { text-align: right; }
.datumsleiste b { font: 900 15px/1 var(--titel); letter-spacing: 0; text-transform: none; }

.rubrik { font: 600 11px/1.2 var(--rubrik); letter-spacing: .16em; text-transform: uppercase; color: var(--rot); }
.rubrik.schwarz { color: var(--tinte); }
.aufmacher { display: grid; gap: 8px; }
.aufmacher h1 { font: 900 clamp(27px, 7.6vw, 34px)/1.04 var(--titel); letter-spacing: -.01em; }
.aufmacher .dach { font: italic 700 16px/1.25 var(--titel); color: var(--grau); }
.satz { font-size: 15px; line-height: 1.45; text-align: justify; hyphens: auto; }
.satz.initial::first-letter { float: left; font: 900 48px/.82 var(--titel); padding: 4px 6px 0 0; }
.ort { font: 600 11px/1 var(--rubrik); letter-spacing: .08em; text-transform: uppercase; }

.spalten { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--tinte); }
.spalten > * { padding: 10px 0; display: grid; gap: 6px; align-content: start; margin: 0; }
.spalten > :first-child { padding-right: 12px; border-right: 1px solid var(--tinte); }
.spalten > :last-child { padding-left: 12px; }
.spalten h2 { font: 900 18px/1.12 var(--titel); }
.spalten .satz { font-size: 14px; text-align: left; hyphens: manual; }
.mondbild canvas { background: var(--tinte); }
.bildtext { font: italic 400 11.5px/1.3 var(--text); color: var(--grau); }

.wetterkasten { border: 2px solid var(--tinte); padding: 10px 12px; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; align-items: center; }
.wetterkasten .grad { font: 900 46px/1 var(--titel); grid-row: span 3; font-variant-numeric: lining-nums; }
.wetterkasten .grad sup { font-size: 20px; }
.wetterkasten .kurz { font: 900 17px/1.15 var(--titel); }
.wetterkasten .werte { font: 400 12px/1.4 var(--mono); font-variant-numeric: tabular-nums; }

.hitparade { border-top: 4px double var(--tinte); border-bottom: 1px solid var(--tinte); padding: 10px 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; }
.hitparade .platz { font: 900 54px/.9 var(--titel); color: var(--rot); grid-row: span 2; }
.hitparade .lied { font: 900 19px/1.12 var(--titel); }
.hitparade .wer { font-size: 13.5px; }

.kurzmeldung-blatt { display: grid; gap: 4px; border-top: 1px solid var(--zart); padding-top: 10px; }
.kurzmeldung-blatt h3 { font: 900 18px/1.15 var(--titel); }

.zahlenfeld { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--tinte); margin-top: 4px; }
.zahlenfeld div { padding: 8px 0; border-bottom: 1px solid var(--zart); display: grid; gap: 1px; }
.zahlenfeld div:nth-child(odd) { padding-right: 10px; border-right: 1px solid var(--zart); }
.zahlenfeld div:nth-child(even) { padding-left: 10px; }
.zahlenfeld b { font: 900 16px/1.15 var(--titel); }
.zahlenfeld span { font: 500 10px/1.2 var(--rubrik); letter-spacing: .08em; text-transform: uppercase; color: var(--grau); }

/* Die Sterne: links die Tafel, rechts die Horoskop-Spalte */
.sterne-blatt { display: grid; gap: 6px; border-top: 4px double var(--tinte); padding-top: 10px; }
.sternfeld { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 0; }
.sterntafel { margin: 0; padding-right: 12px; border-right: 1px solid var(--tinte); display: grid; align-content: start; }
.sterntafel div { display: grid; gap: 0; padding: 5px 0; border-bottom: 1px solid var(--zart); }
.sterntafel dt { font: 600 10px/1.2 var(--rubrik); letter-spacing: .1em; text-transform: uppercase; color: var(--grau); }
.sterntafel dt span { font-family: "DejaVu Sans", "Segoe UI Symbol", "Apple Symbols", sans-serif; letter-spacing: 0; color: var(--rot); }
.sterntafel dd { margin: 0; font: 700 14px/1.2 var(--titel); }
.horoskop { padding-left: 12px; display: grid; gap: 6px; align-content: start; }
.horoskop h3 { font: italic 900 19px/1.12 var(--titel); }
.horoskop .satz { font-size: 14px; text-align: left; hyphens: manual; }

.ausschnitt-platz { padding: 8px 6px 4px; }
.ausschnitt { position: relative; background: var(--papier-hell); padding: 20px 16px 14px; transform: rotate(-1.2deg);
  box-shadow: 0 6px 14px rgba(0,0,0,.18); display: grid; gap: 8px;
  clip-path: polygon(0 2%, 4% 0, 12% 1.5%, 22% .3%, 31% 1.8%, 43% .4%, 55% 1.6%, 66% .2%, 78% 1.7%, 89% .3%, 100% 1.4%,
    99.4% 30%, 100% 62%, 99.2% 100%, 86% 98.6%, 72% 100%, 58% 98.8%, 44% 100%, 30% 98.6%, 16% 100%, 3% 98.8%, .6% 70%, 0 36%); }
.ausschnitt::before { content: ""; position: absolute; top: -2px; left: 50%; width: 86px; height: 22px; margin-left: -43px;
  background: rgba(235, 222, 170, .75); transform: rotate(3deg); }
.ausschnitt h2 { font: 900 22px/1.08 var(--titel); }
.ausschnitt .werte { display: flex; flex-wrap: wrap; gap: 4px 10px; font: 400 11.5px/1.3 var(--mono);
  border-top: 1px solid var(--tinte); border-bottom: 1px solid var(--tinte); padding: 5px 0; }
.kurzmeldung { display: grid; gap: 2px; }
.kurzmeldung b { font: 900 15px/1.15 var(--titel); }
.kurzmeldung p { font-size: 13.5px; line-height: 1.4; }

.zeitung .nachweis, .zeitung .recht, .zeitung .aendern { color: var(--grau); }

/* Bestellschein (Einrichten) und Textseiten ------------------------------- */
.bestellschein { border: 2px dashed var(--tinte); padding: 20px 16px 16px; position: relative; display: grid; gap: 14px; background: var(--papier-hell); margin-top: 8px; }
.bestellschein .schere { position: absolute; top: -13px; left: 14px; background: var(--papier); padding: 0 6px; font-size: 18px; line-height: 1; }
.bestellschein .kopfname { font: 400 40px/1 var(--kopf); text-align: center; }
.bestellschein h1 { font: 900 23px/1.12 var(--titel); text-align: center; }
.bestellschein > p { font-size: 14.5px; text-align: center; color: var(--grau); }
.feld { display: grid; gap: 4px; position: relative; }
.feld > label:first-child { font: 600 11px/1 var(--rubrik); letter-spacing: .12em; text-transform: uppercase; }
.feld input[type=text], .feld input[type=date] { font: 400 19px/1.2 var(--text); padding: 8px 2px; border: 0; border-bottom: 1.5px solid var(--tinte);
  background: transparent; color: var(--tinte); width: 100%; border-radius: 0; -webkit-appearance: none; appearance: none; min-height: 44px; }
.feld input:focus { outline: none; border-bottom-color: var(--rot); box-shadow: 0 1.5px 0 var(--rot); }
.feld input:disabled { opacity: .45; }
.feld input[aria-invalid=true] { border-bottom-color: var(--rot); }
.feld .hilfe { font-size: 12.5px; color: var(--grau); }
.feld .fehler, .fehlerkasten { font-size: 13.5px; color: var(--rot); }
.fehlerkasten { border: 1.5px solid var(--rot); padding: 8px 10px; }
.feld .frei { text-transform: none; letter-spacing: 0; font: italic 400 12px/1 var(--text); color: var(--grau); }
.haken { display: flex; gap: 8px; align-items: center; font-size: 13.5px; margin-top: 4px; }
.haken input { width: 18px; height: 18px; accent-color: var(--tinte); }
.ortliste { list-style: none; margin: 0; padding: 0; position: absolute; top: 72px; left: 0; right: 0; z-index: 5;
  background: #fff; border: 1.5px solid var(--tinte); box-shadow: 0 8px 18px rgba(0,0,0,.16); }
.ortliste li { padding: 10px 12px; cursor: pointer; font-size: 15px; border-bottom: 1px solid var(--zart); }
.ortliste li:last-child { border-bottom: 0; }
.ortliste li small { color: var(--grau); margin-left: 6px; }
.ortliste li[aria-selected=true], .ortliste li:hover { background: var(--papier); }
.druck { display: block; width: 100%; padding: 15px; border: 0; background: var(--tinte); color: var(--papier-hell);
  font: 600 15px/1 var(--rubrik); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.zurueck { text-align: center; font-size: 14px; color: var(--grau); }
.kleingedruckt { font-size: 12px; color: var(--grau); text-align: center; }

.rechtstext { display: grid; gap: 10px; font-size: 15px; }
.rechtstext h1 { font: 900 30px/1.1 var(--titel); border-bottom: 4px double var(--tinte); padding-bottom: 8px; }
.rechtstext h2 { font: 600 12px/1.2 var(--rubrik); letter-spacing: .14em; text-transform: uppercase; color: var(--rot); margin-top: 8px; }
.rechtstext ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }

/* ======================================================================
   MAGAZIN (1970-1994)
   ====================================================================== */
body.magazin { --neon-pink: #ff4fa3; --neon-tuerkis: #2de2e6; --neon-gelb: #f9f871; --lila: #2a0e4a; --nacht: #14061f;
  background: var(--nacht); color: #f6f0ff; font-family: "Rubik", system-ui, sans-serif;
  background-image: radial-gradient(ellipse at 50% -10%, #4a1673 0%, transparent 60%); }
.magazin-blatt { display: grid; gap: 16px; }
.cover { position: relative; overflow: hidden; border-radius: 6px; padding: 14px 16px 0; min-height: 360px; display: grid; align-content: start; gap: 6px;
  background: linear-gradient(180deg, #2b0b45 0%, #6b1460 55%, #ff6b3d 100%); box-shadow: 0 0 0 3px var(--neon-tuerkis), 0 10px 30px rgba(0,0,0,.5); }
.cover-oben { display: flex; justify-content: space-between; font: 600 11px/1 "Rubik", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--neon-gelb); }
.titel-neon { font: 400 clamp(64px, 20vw, 92px)/.86 "Bungee", "Rubik", sans-serif; color: #fff; text-transform: uppercase;
  text-shadow: 0 0 10px var(--neon-pink), 3px 3px 0 var(--neon-pink), 6px 6px 0 var(--neon-tuerkis); margin-top: 8px; }
.sticker { position: absolute; right: 12px; top: 54px; width: 96px; height: 96px; border-radius: 50%; background: var(--neon-gelb); color: #2a0e4a;
  display: grid; place-content: center; text-align: center; font: 800 12px/1.1 "Rubik", sans-serif; transform: rotate(14deg);
  box-shadow: 0 4px 0 #b8b43a; padding: 8px; }
.sticker b { display: block; font: 400 17px/1.05 "Bungee", sans-serif; word-break: break-word; }
.cover-datum { display: grid; margin-top: 8px; position: relative; z-index: 1; }
.cover-datum .riesig { font: 400 110px/.85 "Bungee", sans-serif; color: var(--neon-gelb); text-shadow: 4px 4px 0 #2a0e4a; }
.cover-datum .monat { font: 800 26px/1.1 "Rubik", sans-serif; text-transform: uppercase; letter-spacing: .02em; }
.cover-datum .wtag { font: 600 13px/1.3 "Rubik", sans-serif; opacity: .9; }
.horizont { height: 90px; margin: 8px -16px 0; background:
  repeating-linear-gradient(90deg, rgba(45,226,230,.7) 0 2px, transparent 2px 34px),
  repeating-linear-gradient(0deg, rgba(45,226,230,.7) 0 2px, transparent 2px 18px), #1a0630;
  transform: perspective(160px) rotateX(48deg); transform-origin: top; }
.kasten { position: relative; border-radius: 4px; padding: 26px 14px 14px; display: grid; gap: 8px; color: #1a0b28; transform: rotate(-.6deg); }
.kasten:nth-of-type(even) { transform: rotate(.7deg); }
.kasten .etikett { position: absolute; top: -11px; left: 12px; font: 400 12px/1 "Bungee", sans-serif; padding: 6px 9px; background: #1a0b28; color: var(--neon-gelb); transform: rotate(-2deg); }
.kasten h1 { font: 800 25px/1.1 "Rubik", sans-serif; }
.kasten .dach { font: 600 15px/1.3 "Rubik", sans-serif; }
.kasten p { font-size: 15px; line-height: 1.45; }
.kasten.pink { background: var(--neon-pink); }
.kasten.gelb { background: var(--neon-gelb); }
.kasten.tuerkis { background: var(--neon-tuerkis); }
.kasten.lila { background: #b58cff; }
.kasten.weiss { background: #fff; }
.kasten.schwarz { background: #1a0b28; color: #f6f0ff; box-shadow: 0 0 0 2px var(--neon-pink); }
.kasten.schwarz .etikett { background: var(--neon-pink); color: #1a0b28; }
.musik { justify-items: center; text-align: center; }
.kassette { width: 200px; max-width: 70%; height: auto; }
.musik .lied { font: 400 21px/1.1 "Bungee", sans-serif; }
.musik .wer { font-weight: 600; }
.paar { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.paar .kasten { padding-top: 28px; }
.grad-neon { font: 400 46px/1 "Bungee", sans-serif; color: #1a0b28; }
.paar p { font-size: 13.5px; }
.kasten.lila canvas { max-width: 110px; justify-self: center; }
.knapp { display: grid; gap: 2px; border-top: 2px dotted #1a0b28; padding-top: 8px; }
.knapp:first-of-type { border-top: 0; padding-top: 0; }
.knapp b { font: 800 16px/1.2 "Rubik", sans-serif; }
.knapp p { font-size: 14px; }
.zahlen3 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.zahlen3 div { display: grid; gap: 1px; }
.zahlen3 span { font: 600 10.5px/1.2 "Rubik", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--neon-tuerkis); }
.zahlen3 b { font: 800 16px/1.2 "Rubik", sans-serif; }
.kasten.orange { background: #ff9f43; }
.sterne-kasten h2 { font: 400 22px/1.1 "Bungee", sans-serif; }
.sternchips { display: flex; flex-wrap: wrap; gap: 5px; }
.sternchips span { background: #1a0b28; color: #f6f0ff; border-radius: 99px; padding: 4px 9px; font-size: 12px; font-weight: 600; }
.sternchips b { color: var(--neon-gelb); font-family: "DejaVu Sans", "Segoe UI Symbol", "Apple Symbols", sans-serif; }
.zettel { position: relative; background: #fffbe0; color: #2a2010; padding: 26px 16px 16px; transform: rotate(1.4deg);
  box-shadow: 0 10px 22px rgba(0,0,0,.45); display: grid; gap: 8px; margin: 6px 4px 0;
  background-image: repeating-linear-gradient(0deg, transparent 0 25px, rgba(45,120,200,.18) 25px 26px); }
.zettel .pin { position: absolute; top: -8px; left: 50%; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff8ac4, #d1006a 70%); box-shadow: 0 3px 4px rgba(0,0,0,.4); }
.zettel .etikett { font: 400 12px/1 "Bungee", sans-serif; color: #d1006a; }
.zettel h2 { font: 800 21px/1.1 "Rubik", sans-serif; }
.zettel .werte { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; font-weight: 600; }
.zettel p { font-size: 14px; line-height: 1.45; }
.magazin .in-arbeit { color: inherit; }
.magazin .glueckwunsch { color: var(--neon-gelb); border-color: var(--neon-gelb); font-family: "Bungee", sans-serif; }
.magazin .teilen { color: var(--neon-gelb); border-color: var(--neon-gelb); font-family: "Bungee", sans-serif; letter-spacing: .04em; }
.magazin .nachweis, .magazin .recht, .magazin .aendern { color: #c9b8e6; font-family: var(--mono); }

/* ======================================================================
   PORTAL (ab 1995)
   ====================================================================== */
body.portal { --blau-dunkel: #0e4a99; --rahmen: #9fc2e7; --orange: #ff7a00;
  --rund: "Varela Round", "Trebuchet MS", Verdana, sans-serif; --kopf2: "Exo 2", "Trebuchet MS", sans-serif;
  color: #1b2a3a; font-family: var(--rund);
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.45) 0 1px, transparent 1px 3px), linear-gradient(180deg, #e9f2fb, #cfe1f4) fixed; }
.portal-blatt { display: grid; gap: 12px; }
.portal .leiste { display: flex; justify-content: space-between; font-size: 11px; color: #4a6584; padding: 0 4px; }
.marke2 { position: relative; border-radius: 16px; padding: 16px 16px 14px; color: #fff;
  background: linear-gradient(180deg, #6cbcff 0%, #2a86ea 48%, #136cd2 52%, #3d9cf3 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 3px 8px rgba(14,74,153,.35); }
.marke2 .name { font: italic 800 44px/1 var(--kopf2); letter-spacing: -.02em; text-shadow: 0 2px 0 #0e4a99, 0 0 14px rgba(255,255,255,.5); }
.marke2 .name span { color: #ffe066; }
.marke2 .unter { font-size: 13px; margin-top: 6px; padding-right: 70px; }
.stern { position: absolute; right: -6px; top: -12px; width: 82px; height: 82px; display: grid; place-items: center; text-align: center;
  background: var(--orange); color: #fff; font: 700 11px/1.05 var(--rund); transform: rotate(12deg); padding: 10px;
  clip-path: polygon(50% 0, 61% 14%, 79% 7%, 80% 26%, 98% 30%, 88% 46%, 100% 62%, 82% 68%, 84% 88%, 65% 84%, 50% 100%, 37% 85%, 17% 90%, 18% 69%, 0 62%, 12% 47%, 2% 30%, 20% 26%, 21% 7%, 39% 14%); }
.stern b { display: block; font-size: 15px; word-break: break-word; }
.widget { background: #fff; border: 1px solid var(--rahmen); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 5px rgba(31,111,209,.12); }
.widget > h2 { font: 700 13px/1.2 var(--rund); color: var(--blau-dunkel); padding: 8px 12px;
  background: linear-gradient(180deg, #ffffff 0%, #eef3f9 50%, #e1e9f3 51%, #f2f6fb 100%); border-bottom: 1px solid var(--rahmen); }
.widget .inhalt { padding: 10px 12px 12px; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; }
.aufm h1 { font: 700 21px/1.2 var(--rund); color: #0d2f5c; }
.aufm .dach { color: #4a6584; font-size: 13.5px; }
.widget .titel { color: #0d2f5c; }
.widget .klein { font-size: 12px; color: #4a6584; }
.widget .mitte { text-align: center; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.wetterkopf { display: flex; align-items: center; gap: 10px; }
.grad2 { font: italic 800 34px/1 var(--kopf2); color: var(--orange); }
.sonne { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6b0, #ffc21a 45%, #ff8a00 100%); box-shadow: 0 0 10px rgba(255,170,0,.6); flex: none; }
.mond2 canvas { max-width: 96px; margin: 0 auto; }
.player { border-radius: 18px; padding: 12px; background: linear-gradient(180deg, #4a4f57, #1b1d21); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 3px 8px rgba(0,0,0,.3); display: grid; gap: 10px; }
.lcd { border-radius: 8px; padding: 9px 10px; background: linear-gradient(180deg, #c9f0ff, #8fd3f2); color: #08304a; font: 500 12px/1.35 var(--mono); box-shadow: inset 0 2px 4px rgba(0,0,0,.35); }
.lcd b { display: block; font: 700 15px/1.2 var(--rund); }
.balken { height: 5px; border-radius: 3px; background: rgba(8,48,74,.2); margin-top: 6px; overflow: hidden; }
.balken i { display: block; width: 38%; height: 100%; background: #08304a; }
.tasten { display: flex; justify-content: center; gap: 14px; color: #dfe6ee; font-size: 14px; }
.tasten span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #6a707a, #2c2f35); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.zahlen2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.zahlen2 div { background: #f3f8fd; border: 1px solid #d6e5f4; border-radius: 8px; padding: 7px 9px; display: grid; gap: 1px; }
.zahlen2 span { font-size: 11px; color: #4a6584; }
.zahlen2 b { font-size: 14.5px; color: #0d2f5c; }
.sterntabelle { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: 13px; }
.sterntabelle td { padding: 5px 8px; border-top: 1px solid #e1e9f3; }
.sterntabelle td:first-child { color: #4a6584; width: 42%; }
.sterntabelle td:first-child span { color: var(--orange); font-family: "DejaVu Sans", "Segoe UI Symbol", "Apple Symbols", sans-serif; }
.sterntabelle tr:nth-child(odd) td { background: #f6f9fd; }
.ticker { border-radius: 12px; overflow: hidden; border: 1px solid #f0a35a; background: #fff8ef; }
.ticker .band { background: linear-gradient(180deg, #ff9b33, #ff6a00); color: #fff; font: 700 13px/1.3 var(--rund); padding: 8px 12px; }
.ticker .inhalt { padding: 10px 12px 12px; display: grid; gap: 8px; font-size: 13.5px; line-height: 1.45; }
.ticker .werte { display: flex; flex-wrap: wrap; gap: 4px; }
.ticker .werte span { background: #fff; border: 1px solid #f3c79a; border-radius: 99px; padding: 3px 8px; font-size: 11.5px; }
.ticker b { color: #b44a00; }
.portal .teilen { transform: none; border: 0; border-radius: 99px; padding: 12px 26px; color: #fff; font: 700 15px/1 var(--rund); letter-spacing: 0; text-transform: none;
  background: linear-gradient(180deg, #ffb35c 0%, #ff8000 50%, #f06a00 51%, #ff9a2e 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 3px 6px rgba(240,106,0,.4); }
.portal .glueckwunsch { color: var(--orange); border-color: var(--orange); font-family: var(--rund); transform: none; border-radius: 99px; }
.portal .nachweis, .portal .recht, .portal .aendern { color: #4a6584; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (min-width: 700px) { body { padding: 20px 0; } }