/* ========================================================= ABITREFFEN 2027 – Retro-Design-System ("Voll-Retro 2000er") Oberfläche: GeoCities / Windows-XP-Luna / Schulhomepage 2001 Technik darunter: sauber, responsive, mobil ≥16px, Touch ≥44px ========================================================= */ /* ---- Comic Neue als Web-Fallback für Comic Sans MS ---- */ @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,400;0,700;1,400;1,700&display=swap'); /* ========================================================= FARB-SKINS (Skin-Switcher schaltet [data-skin] auf ) ========================================================= */ :root, :root[data-skin="blau"] { --bg: #000066; --bg-2: #00004a; --prim-light: #6666ff; --prim-dark: #0000aa; --accent: #ffff00; /* Gelb */ --accent-2: #ff00ff; /* Magenta */ --alarm: #ff0000; --alarm-dark: #cc0000; --lcd: #00ff00; --lcd-dim: #063; --silver: #c0c0c0; --lightblue: #e8e8ff; --box-bg: #e8e8ff; --ink: #000033; --star: #ffffff; } :root[data-skin="gruen"] { --bg: #013220; --bg-2: #001a10; --prim-light: #2e8b57; --prim-dark: #044d29; --accent: #ffec3d; --accent-2: #ff7a00; --alarm: #e60000; --alarm-dark: #a30000; --lcd: #7CFC00; --lcd-dim: #264d00; --silver: #c8ccc0; --lightblue: #e4f5e4; --box-bg: #e4f5e4; --ink: #07210f; --star: #fff8d0; } :root[data-skin="lila"] { --bg: #2a0845; --bg-2: #18062a; --prim-light: #b14aff; --prim-dark: #6a00b8; --accent: #00ffe0; --accent-2: #ff2d95; --alarm: #ff0066; --alarm-dark: #cc0052; --lcd: #00ffe0; --lcd-dim: #064d44; --silver: #c4bcd0; --lightblue: #f0e6ff; --box-bg: #f0e6ff; --ink: #240a36; --star: #ffe6ff; } /* ========================================================= GRUNDGERÜST ========================================================= */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: "Comic Sans MS", "Comic Neue", "Chalkboard SE", cursive, sans-serif; font-size: 17px; line-height: 1.5; color: #000; background-color: var(--bg); background-image: radial-gradient(1.4px 1.4px at 18px 24px, var(--star) 50%, transparent 51%), radial-gradient(1.2px 1.2px at 96px 60px, var(--star) 50%, transparent 51%), radial-gradient(1.6px 1.6px at 150px 18px, var(--accent) 50%, transparent 51%), radial-gradient(1.1px 1.1px at 60px 120px, var(--star) 50%, transparent 51%), radial-gradient(1.3px 1.3px at 200px 90px, var(--star) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 30px 170px, var(--accent-2) 50%, transparent 51%), linear-gradient(var(--bg-2), var(--bg-2)); background-size: 220px 200px, 220px 200px, 220px 200px, 220px 200px, 220px 200px, 220px 200px, 100% 100%; } body.no-stars { background-image: linear-gradient(var(--bg-2), var(--bg-2)); } a { color: var(--prim-dark); } img { max-width: 100%; } .wrap { max-width: 880px; margin: 0 auto; padding: 0 10px 40px; } /* ========================================================= MARQUEE (CSS statt , respektiert reduced-motion) ========================================================= */ .marquee { background: var(--alarm-dark); color: #fff; border-bottom: 3px ridge var(--accent); overflow: hidden; white-space: nowrap; font-weight: bold; letter-spacing: .5px; padding: 5px 0; } .marquee__inner { display: inline-block; padding-left: 100%; animation: marquee 22s linear infinite; } .marquee__inner span { padding: 0 1.5em; } @keyframes marquee { to { transform: translateX(-100%); } } /* ========================================================= HEADER-BANNER ========================================================= */ .banner { background: linear-gradient(180deg, var(--prim-light), var(--prim-dark)); border-bottom: 4px ridge var(--silver); color: #fff; text-align: center; padding: 14px 10px 16px; position: relative; } .banner__star { position: absolute; top: 8px; font-size: 30px; animation: spin 6s linear infinite; } .banner__star.left { left: 12px; } .banner__star.right { right: 12px; } @keyframes spin { to { transform: rotate(360deg); } } .banner h1 { margin: 4px 0 2px; font-size: clamp(26px, 7vw, 46px); color: var(--accent); text-shadow: 3px 3px 0 var(--accent-2), 5px 5px 0 rgba(0,0,0,.35); letter-spacing: 1px; } .banner .sub { margin: 2px 0 0; font-size: clamp(14px, 3.4vw, 19px); color: #fff; } .banner .domain { display: inline-block; margin-top: 6px; font-family: "Courier New", monospace; font-size: 13px; background: #000; color: var(--lcd); padding: 2px 8px; border: 1px solid var(--lcd-dim); } /* ========================================================= NAVIGATION (Tab-Bevel-Buttons) ========================================================= */ .nav { background: var(--silver); border-bottom: 3px ridge #fff; display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; justify-content: center; } .nav a { font-family: inherit; font-size: 15px; text-decoration: none; color: #000; background: linear-gradient(180deg, #fdfdfd, #d4d4d4); border: 2px outset #fff; padding: 8px 12px; min-height: 40px; display: inline-flex; align-items: center; white-space: nowrap; } .nav a:hover { background: linear-gradient(180deg, #fff, var(--lightblue)); } .nav a.active { border-style: inset; background: var(--accent); font-weight: bold; } .nav a .ico { margin-right: 5px; } /* ========================================================= WIN-BOX (3D-Rahmen + Verlaufs-Titelbalken) ========================================================= */ .box { background: var(--box-bg); border: 3px ridge var(--silver); box-shadow: 4px 4px 0 rgba(0,0,0,.35); margin: 18px 0; } .box__title { background: linear-gradient(90deg, var(--prim-light), var(--prim-dark)); color: #fff; font-weight: bold; padding: 6px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 2px groove var(--silver); } .box__title .t { display: flex; align-items: center; gap: 7px; } .box__title .winbtns { display: flex; gap: 3px; } .box__title .winbtns b { width: 18px; height: 16px; background: var(--silver); border: 1px outset #fff; color: #000; font-size: 11px; font-family: "Courier New", monospace; text-align: center; line-height: 14px; } .box__body { padding: 14px; } .box__body > :first-child { margin-top: 0; } .box__body > :last-child { margin-bottom: 0; } h2.head, h3.head { color: var(--prim-dark); } .yellow-head { color: var(--accent); text-shadow: 2px 2px 0 var(--accent-2); } /* ========================================================= BUTTONS ========================================================= */ .btn { font-family: inherit; font-size: 16px; background: linear-gradient(180deg, #fdfdfd, #cfcfcf); border: 3px outset #fff; padding: 10px 18px; min-height: 44px; cursor: pointer; color: #000; } .btn:active { border-style: inset; background: linear-gradient(180deg, #cfcfcf, #fdfdfd); } .btn--cta { background: linear-gradient(180deg, #ff5555, var(--alarm-dark)); color: #fff; font-weight: bold; font-size: 18px; border-color: #ffb3b3 #800 #800 #ffb3b3; text-shadow: 1px 1px 0 #600; } .btn--cta:active { border-style: inset; } .btn--go { background: linear-gradient(180deg, #aaffaa, #2a8a2a); color: #003300; font-weight: bold; } /* ========================================================= FORMULARE ========================================================= */ label { display: block; font-weight: bold; margin: 10px 0 3px; color: var(--ink); } input[type=text], input[type=email], input[type=password], input[type=search], select, textarea { width: 100%; font-family: inherit; font-size: 16px; background: #ffffcc; border: 2px inset #808080; padding: 10px; min-height: 44px; color: #000; } textarea { min-height: 80px; line-height: 1.4; } .checkrow { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-weight: bold; } .checkrow input { width: 22px; height: 22px; min-height: 0; } fieldset { border: 2px groove var(--silver); margin: 12px 0; padding: 10px 12px; background: rgba(255,255,255,.4); } legend { font-weight: bold; padding: 0 6px; } .captcha-q { background: var(--alarm); color: #fff; font-weight: bold; padding: 6px 10px; display: inline-block; margin-bottom: 6px; } .form-msg { padding: 10px 12px; margin: 10px 0; border: 2px ridge; font-weight: bold; } .form-msg.ok { background: #ccffcc; border-color: #2a8a2a; color: #064d06; } .form-msg.err { background: #ffd6d6; border-color: var(--alarm); color: var(--alarm-dark); } /* ========================================================= LCD-COUNTDOWN & ZÄHLER ========================================================= */ .lcd { background: #000; border: 4px inset #444; color: var(--lcd); font-family: "Courier New", monospace; text-shadow: 0 0 6px var(--lcd); } .countdown { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 16px; } .cd-cell { text-align: center; } .cd-cell .num { font-size: clamp(28px, 9vw, 54px); font-weight: bold; letter-spacing: 1px; line-height: 1; } .cd-cell .lbl { font-size: 11px; text-transform: uppercase; color: var(--lcd-dim); margin-top: 4px; letter-spacing: 1px; } .cd-cell.ms .num { color: #aaffaa; } .visitor { display: inline-flex; align-items: center; gap: 6px; font-family: "Comic Sans MS", "Comic Neue", cursive; font-size: 14px; color: #fff; } .visitor .digits { font-family: "Courier New", monospace; background: #000; color: var(--lcd); padding: 3px 7px; border: 2px inset #444; letter-spacing: 3px; text-shadow: 0 0 5px var(--lcd); font-weight: bold; } /* ========================================================= TABELLEN (Zebra + dunkelblauer Kopf) ========================================================= */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 2px inset #808080; } .retro-table { border-collapse: collapse; width: 100%; background: #fff; font-size: 16px; } .retro-table th { background: var(--prim-dark); color: #fff; padding: 9px 10px; text-align: left; border: 1px solid #fff; white-space: nowrap; } .retro-table td { padding: 8px 10px; border: 1px solid #cfd4ee; } .retro-table tr:nth-child(even) td { background: var(--lightblue); } .retro-table tr.me td { background: var(--accent); font-weight: bold; } .tick { color: #1a8a1a; font-weight: bold; } .cross { color: #999; } .sumrow td { background: var(--prim-light) !important; color: #fff; font-weight: bold; } /* ========================================================= STICKER / BADGES / DEKO ========================================================= */ .sticker-neu { display: inline-block; background: var(--alarm); color: #ffff00; font-weight: bold; font-size: 12px; padding: 2px 7px; transform: rotate(-8deg); border: 1px solid #fff; box-shadow: 1px 1px 0 rgba(0,0,0,.4); text-shadow: 1px 1px 0 #600; } .blink { animation: blink 1.1s steps(2, start) infinite; } @keyframes blink { 50% { opacity: 0; } } .badge { display: inline-block; font-family: "Courier New", monospace; font-size: 11px; background: #000; color: var(--lcd); border: 1px solid var(--lcd-dim); padding: 3px 7px; margin: 3px; } .badge.web { background: linear-gradient(180deg, #1e90ff, #00008b); color: #fff; border: 1px outset #88c; } .badge.ie { background: #ffeb99; color: #553300; border: 1px solid #aa8800; } .polaroid { background: #fff; padding: 8px 8px 30px; border: 1px solid #ccc; box-shadow: 3px 3px 7px rgba(0,0,0,.4); display: inline-block; } .polaroid .ph { background: repeating-linear-gradient(45deg, #bcdcf0, #bcdcf0 10px, #a8cce8 10px, #a8cce8 20px); width: 100%; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; color: #36506a; font-weight: bold; text-align: center; padding: 8px; position: relative; } .polaroid .cap { font-family: "Comic Neue", "Comic Sans MS", cursive; text-align: center; margin-top: 8px; color: #333; } .stamp-who { position: absolute; top: 10px; left: 50%; transform: translateX(-50%) rotate(-12deg); border: 3px solid var(--alarm); color: var(--alarm); font-weight: bold; padding: 2px 8px; font-size: 13px; opacity: .8; font-family: "Courier New", monospace; background: rgba(255,255,255,.6); } /* ========================================================= FOOTER (Windows-95-Grau) ========================================================= */ .foot { background: var(--silver); border-top: 4px ridge #fff; color: #000; padding: 16px 10px 26px; text-align: center; font-size: 13px; } .foot .links { margin: 8px 0; } .foot .links a { color: var(--prim-dark); font-weight: bold; } .foot .uc { color: var(--alarm-dark); font-weight: bold; } /* simple modal/overlay */ .overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: none; align-items: center; justify-content: center; padding: 16px; z-index: 60; } .overlay.open { display: flex; } .dialog { background: var(--silver); border: 3px outset #fff; max-width: 420px; width: 100%; box-shadow: 5px 5px 0 rgba(0,0,0,.5); } /* skin switcher chip */ .skinbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin-top: 10px; } .skinbar .lbl2 { color: #fff; font-size: 12px; } .skin-dot { width: 26px; height: 26px; border: 2px outset #fff; cursor: pointer; padding: 0; } .skin-dot[data-set="blau"] { background: linear-gradient(135deg,#6666ff,#0000aa); } .skin-dot[data-set="gruen"] { background: linear-gradient(135deg,#2e8b57,#044d29); } .skin-dot[data-set="lila"] { background: linear-gradient(135deg,#b14aff,#6a00b8); } .skin-dot.sel { border-style: inset; outline: 2px solid var(--accent); } /* star-trail cursor dots */ .trail-star { position: fixed; pointer-events: none; z-index: 9999; font-size: 16px; transform: translate(-50%,-50%); } /* ========================================================= RESPONSIVE ========================================================= */ .cols { display: grid; gap: 18px; } @media (min-width: 760px) { .cols.two { grid-template-columns: 1fr 1fr; align-items: start; } } @media (max-width: 600px) { body { font-size: 16px; } .countdown { grid-template-columns: repeat(3, 1fr); } .countdown .cd-cell.ms { grid-column: span 3; } .nav a { font-size: 14px; padding: 8px 10px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .marquee__inner { animation: none; padding-left: 0; } .banner__star { animation: none; } .blink { animation: none; } .lcd, .visitor .digits { text-shadow: none; } }