iPadBlog.de – Wir sind gleich wieder da

:root {
--bg: #07111f;
--bg-2: #0e1d34;
--card: rgba(255, 255, 255, 0.12);
--card-strong: rgba(255, 255, 255, 0.18);
--border: rgba(255, 255, 255, 0.22);
--text: #f7fbff;
--muted: rgba(247, 251, 255, 0.72);
--blue: #42a5ff;
--cyan: #66e6ff;
--violet: #9b7bff;
--green: #60f5b8;
--warning: #ffd166;
--shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
--radius-xl: 34px;
--radius-lg: 24px;
--radius-md: 18px;
}

* {
box-sizing: border-box;
}

html {
min-height: 100%;
scroll-behavior: smooth;
}

body {
min-height: 100vh;
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--text);
background:
radial-gradient(circle at 10% 10%, rgba(66, 165, 255, 0.35), transparent 28%),
radial-gradient(circle at 88% 18%, rgba(155, 123, 255, 0.31), transparent 27%),
radial-gradient(circle at 50% 100%, rgba(102, 230, 255, 0.22), transparent 32%),
linear-gradient(135deg, var(--bg), var(--bg-2));
overflow-x: hidden;
}

body.light-mode {
--bg: #eef7ff;
--bg-2: #ffffff;
--card: rgba(255, 255, 255, 0.74);
--card-strong: rgba(255, 255, 255, 0.94);
--border: rgba(32, 67, 112, 0.16);
--text: #102033;
--muted: rgba(16, 32, 51, 0.68);
--shadow: 0 24px 80px rgba(36, 91, 148, 0.18);
}

a {
color: inherit;
text-decoration: none;
}

.bg-grid {
position: fixed;
inset: 0;
z-index: -3;
opacity: 0.22;
background-image:
linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 74%, transparent);
}

.orb {
position: fixed;
border-radius: 999px;
filter: blur(4px);
z-index: -2;
opacity: 0.72;
animation: float 12s ease-in-out infinite;
}

.orb.one {
width: 300px;
height: 300px;
left: -80px;
top: 12%;
background: radial-gradient(circle, rgba(66, 165, 255, 0.56), transparent 68%);
}

.orb.two {
width: 230px;
height: 230px;
right: -60px;
top: 20%;
background: radial-gradient(circle, rgba(155, 123, 255, 0.55), transparent 68%);
animation-delay: -4s;
}

.orb.three {
width: 260px;
height: 260px;
left: 48%;
bottom: -120px;
background: radial-gradient(circle, rgba(96, 245, 184, 0.32), transparent 68%);
animation-delay: -8s;
}

@keyframes float {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(20px, -24px, 0) scale(1.05); }
}

.page {
width: min(1180px, calc(100% - 32px));
min-height: 100vh;
margin: 0 auto;
padding: 32px 0;
display: flex;
flex-direction: column;
gap: 24px;
}

header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 12px 4px;
}

.brand {
display: inline-flex;
align-items: center;
gap: 12px;
min-width: 0;
}

.brand-mark {
width: 46px;
height: 46px;
border-radius: 16px;
display: grid;
place-items: center;
background: linear-gradient(135deg, rgba(66, 165, 255, 0.95), rgba(155, 123, 255, 0.95));
box-shadow: 0 18px 40px rgba(66, 165, 255, 0.25);
position: relative;
overflow: hidden;
}

.brand-mark::after {
content: "";
position: absolute;
inset: 7px;
border: 2px solid rgba(255, 255, 255, 0.76);
border-radius: 10px;
}

.brand-dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: white;
position: absolute;
bottom: 10px;
}

.brand-name {
font-size: clamp(1.05rem, 2.4vw, 1.35rem);
font-weight: 820;
letter-spacing: -0.04em;
white-space: nowrap;
}

.brand-name span {
color: var(--blue);
}

.header-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
}

.pill,
.icon-btn {
border: 1px solid var(--border);
color: var(--text);
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
box-shadow: 0 10px 34px rgba(0, 0, 0, 0.12);
}

.pill {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 42px;
padding: 10px 14px;
border-radius: 999px;
font-size: 0.92rem;
font-weight: 700;
}

.pulse-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 rgba(96, 245, 184, 0.62);
animation: pulse 1.7s infinite;
}

@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(96, 245, 184, 0.62); }
70% { box-shadow: 0 0 0 13px rgba(96, 245, 184, 0); }
100% { box-shadow: 0 0 0 0 rgba(96, 245, 184, 0); }
}

.icon-btn {
width: 42px;
height: 42px;
border-radius: 999px;
cursor: pointer;
display: grid;
place-items: center;
font-size: 1.1rem;
transition: transform 0.22s ease, background 0.22s ease;
}

.icon-btn:hover,
.btn:hover {
transform: translateY(-2px);
}

.hero {
flex: 1;
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
gap: 24px;
align-items: stretch;
}

.glass {
border: 1px solid var(--border);
background: var(--card);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
box-shadow: var(--shadow);
border-radius: var(--radius-xl);
overflow: hidden;
position: relative;
}

.glass::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(135deg, rgba(255,255,255,0.24), transparent 32%, rgba(255,255,255,0.08));
opacity: 0.7;
}

.hero-copy {
padding: clamp(30px, 6vw, 64px);
display: flex;
flex-direction: column;
justify-content: center;
min-height: 620px;
}

.kicker {
display: inline-flex;
width: fit-content;
align-items: center;
gap: 10px;
margin-bottom: 20px;
padding: 10px 13px;
border-radius: 999px;
font-size: 0.88rem;
font-weight: 800;
color: var(--cyan);
background: rgba(102, 230, 255, 0.12);
border: 1px solid rgba(102, 230, 255, 0.22);
}

.sparkle {
animation: wiggle 1.8s ease-in-out infinite;
display: inline-block;
}

@keyframes wiggle {
0%, 100% { transform: rotate(0deg) scale(1); }
35% { transform: rotate(12deg) scale(1.15); }
70% { transform: rotate(-9deg) scale(1.05); }
}

h1 {
margin: 0;
font-size: clamp(2.7rem, 7vw, 6.45rem);
line-height: 0.93;
letter-spacing: -0.08em;
text-wrap: balance;
}

.gradient-text {
background: linear-gradient(90deg, #fff, var(--cyan), var(--blue), var(--violet));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

body.light-mode .gradient-text {
background: linear-gradient(90deg, #12335a, #177dff, #7d5cff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

.lead {
max-width: 680px;
margin: 24px 0 0;
color: var(--muted);
font-size: clamp(1.06rem, 2.1vw, 1.28rem);
line-height: 1.7;
}

.typed-line {
min-height: 34px;
margin-top: 18px;
color: var(--text);
font-weight: 760;
font-size: clamp(1rem, 1.8vw, 1.18rem);
}

.typed-cursor {
display: inline-block;
width: 10px;
color: var(--cyan);
animation: blink 1s infinite;
}

@keyframes blink {
0%, 48% { opacity: 1; }
49%, 100% { opacity: 0; }
}

.hero-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}

.btn {
border: 0;
cursor: pointer;
min-height: 52px;
padding: 15px 20px;
border-radius: 999px;
font-size: 0.98rem;
font-weight: 850;
letter-spacing: -0.01em;
color: white;
background: linear-gradient(135deg, var(--blue), var(--violet));
box-shadow: 0 18px 44px rgba(66, 165, 255, 0.25);
transition: transform 0.22s ease, filter 0.22s ease;
}

.btn.secondary {
color: var(--text);
background: rgba(255, 255, 255, 0.1);
border: 1px solid var(--border);
box-shadow: none;
}

.progress-card {
margin-top: 34px;
padding: 18px;
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.08);
border-radius: var(--radius-lg);
}

.progress-top {
display: flex;
justify-content: space-between;
gap: 12px;
font-weight: 820;
margin-bottom: 12px;
}

.progress-top span:last-child {
color: var(--cyan);
}

.progress-track {
height: 14px;
overflow: hidden;
border-radius: 999px;
background: rgba(255, 255, 255, 0.13);
position: relative;
}

.progress-bar {
width: 71%;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--green), var(--cyan), var(--blue));
position: relative;
transition: width 0.6s ease;
}

.progress-bar::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.48), transparent);
transform: translateX(-100%);
animation: shimmer 2.2s ease-in-out infinite;
}

@keyframes shimmer {
100% { transform: translateX(100%); }
}

.status-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 14px;
}

.status-item {
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.07);
border-radius: 18px;
padding: 13px;
min-height: 92px;
}

.status-icon {
font-size: 1.35rem;
display: block;
margin-bottom: 8px;
}

.status-item strong {
display: block;
font-size: 0.88rem;
margin-bottom: 4px;
}

.status-item small {
color: var(--muted);
line-height: 1.35;
}

.side-panel {
padding: 22px;
display: grid;
grid-template-rows: auto 1fr auto;
gap: 18px;
min-height: 620px;
}

.device {
min-height: 330px;
border-radius: 38px;
background: linear-gradient(145deg, rgba(255,255,255,0.26), rgba(255,255,255,0.05));
border: 1px solid var(--border);
padding: 16px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.26), 0 30px 70px rgba(0,0,0,0.16);
position: relative;
transform-style: preserve-3d;
transition: transform 0.18s ease;
}

.screen {
height: 100%;
min-height: 298px;
border-radius: 26px;
overflow: hidden;
background:
radial-gradient(circle at 24% 18%, rgba(102,230,255,0.35), transparent 28%),
radial-gradient(circle at 82% 78%, rgba(155,123,255,0.36), transparent 28%),
linear-gradient(145deg, rgba(9,24,45,0.95), rgba(16,42,74,0.92));
border: 1px solid rgba(255, 255, 255, 0.16);
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 18px;
}

body.light-mode .screen {
background:
radial-gradient(circle at 24% 18%, rgba(102,230,255,0.35), transparent 28%),
radial-gradient(circle at 82% 78%, rgba(155,123,255,0.27), transparent 28%),
linear-gradient(145deg, rgba(240,248,255,0.96), rgba(213,234,255,0.92));
}

.screen-top {
display: flex;
align-items: center;
justify-content: space-between;
color: rgba(255,255,255,0.72);
font-size: 0.78rem;
font-weight: 800;
}

body.light-mode .screen-top {
color: rgba(16,32,51,0.68);
}

.screen-dots {
display: flex;
gap: 5px;
}

.screen-dots i {
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(255,255,255,0.52);
}

body.light-mode .screen-dots i {
background: rgba(16,32,51,0.32);
}

.app-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin: 24px 0;
}

.app-icon {
aspect-ratio: 1;
border-radius: 24px;
border: 1px solid rgba(255,255,255,0.20);
background: linear-gradient(135deg, rgba(255,255,255,0.24), rgba(255,255,255,0.08));
display: grid;
place-items: center;
font-size: clamp(1.45rem, 4vw, 2rem);
cursor: pointer;
user-select: none;
transition: transform 0.18s ease, background 0.18s ease;
}

.app-icon:hover {
transform: translateY(-4px) scale(1.03);
background: linear-gradient(135deg, rgba(102,230,255,0.22), rgba(155,123,255,0.18));
}

.app-icon.clicked {
animation: pop 0.36s ease;
}

@keyframes pop {
0% { transform: scale(1); }
45% { transform: scale(1.18) rotate(4deg); }
100% { transform: scale(1); }
}

.mini-game {
border: 1px solid rgba(255,255,255,0.18);
background: rgba(255,255,255,0.1);
border-radius: 24px;
padding: 15px;
}

body.light-mode .mini-game {
background: rgba(255,255,255,0.5);
}

.mini-game strong {
display: block;
margin-bottom: 6px;
}

.mini-game p {
margin: 0;
color: var(--muted);
font-size: 0.91rem;
line-height: 1.45;
}

.score-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-top: 12px;
font-weight: 850;
}

.badge {
padding: 8px 11px;
border-radius: 999px;
background: rgba(96, 245, 184, 0.14);
color: var(--green);
border: 1px solid rgba(96, 245, 184, 0.24);
font-size: 0.86rem;
}

.system-log {
border: 1px solid var(--border);
background: rgba(0, 0, 0, 0.14);
border-radius: var(--radius-lg);
padding: 16px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.82rem;
line-height: 1.55;
color: rgba(255, 255, 255, 0.72);
min-height: 125px;
overflow: hidden;
}

body.light-mode .system-log {
color: rgba(16,32,51,0.7);
background: rgba(255, 255, 255, 0.58);
}

.log-line {
display: block;
opacity: 0;
transform: translateY(6px);
animation: logIn 0.45s forwards;
}

.log-line:nth-child(2) { animation-delay: 0.25s; }
.log-line:nth-child(3) { animation-delay: 0.5s; }
.log-line:nth-child(4) { animation-delay: 0.75s; }

.log-ok { color: var(--green); }
.log-blue { color: var(--cyan); }
.log-warn { color: var(--warning); }

@keyframes logIn {
to { opacity: 1; transform: translateY(0); }
}

.notice {
display: grid;
grid-template-columns: auto 1fr;
gap: 14px;
align-items: start;
padding: 18px;
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.08);
border-radius: var(--radius-lg);
}

.notice-icon {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 16px;
background: rgba(66, 165, 255, 0.16);
color: var(--cyan);
font-size: 1.25rem;
}

.notice h2 {
margin: 0 0 5px;
font-size: 1.02rem;
letter-spacing: -0.02em;
}

.notice p {
margin: 0;
color: var(--muted);
font-size: 0.92rem;
line-height: 1.55;
}

footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
flex-wrap: wrap;
color: var(--muted);
font-size: 0.92rem;
padding: 4px;
}

footer a {
color: var(--cyan);
font-weight: 760;
}

.particle {
position: fixed;
width: 8px;
height: 8px;
border-radius: 50%;
pointer-events: none;
z-index: 10;
background: var(--cyan);
box-shadow: 0 0 18px rgba(102, 230, 255, 0.8);
animation: particle 0.82s ease-out forwards;
}

@keyframes particle {
to {
opacity: 0;
transform: translate(var(--x), var(--y)) scale(0.25);
}
}

.toast {
position: fixed;
left: 50%;
bottom: 28px;
z-index: 20;
transform: translate(-50%, 16px);
opacity: 0;
pointer-events: none;
padding: 13px 16px;
border-radius: 999px;
background: rgba(8, 18, 33, 0.84);
border: 1px solid rgba(255, 255, 255, 0.18);
color: #fff;
box-shadow: 0 18px 54px rgba(0, 0, 0, 0.32);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
transition: opacity 0.25s ease, transform 0.25s ease;
font-weight: 760;
text-align: center;
max-width: calc(100% - 32px);
}

.toast.show {
opacity: 1;
transform: translate(-50%, 0);
}

.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

@media (max-width: 920px) {
.hero {
grid-template-columns: 1fr;
}

.hero-copy,
.side-panel {
min-height: auto;
}

.status-grid {
grid-template-columns: 1fr;
}
}

@media (max-width: 620px) {
.page {
width: min(100% - 20px, 1180px);
padding: 14px 0;
}

header {
align-items: flex-start;
}

.pill {
min-height: 38px;
padding: 8px 11px;
font-size: 0.82rem;
}

.hero-copy,
.side-panel {
padding: 18px;
border-radius: 26px;
}

.hero-actions {
align-items: stretch;
}

.btn {
width: 100%;
}

.app-grid {
gap: 10px;
}

.app-icon {
border-radius: 18px;
}

.notice {
grid-template-columns: 1fr;
}
}

@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
}

iPadBlog.de

Wartung läuft

Kurzer Boxenstopp für bessere Technik

Wir bringen iPadBlog.de gerade auf Hochglanz.

Unser Online-Portal bekommt im Hintergrund ein Update. Inhalte, Technik und kleine Details werden gerade frisch sortiert, damit du gleich wieder angenehm durch News, Tipps und iPad-Themen stöbern kannst.

Kontakt aufnehmen

Update-Fortschritt
71%

Module
werden neu zusammengesetzt

Performance
wird liebevoll beschleunigt

Sicherheit
bekommt einen Extra-Check

Status wird geprüft …

const phrases = [
"Updates werden installiert …",
"Beiträge werden poliert …",
"Performance wird optimiert …",
"Der digitale Werkzeugkasten ist geöffnet …",
"Gleich geht es weiter mit iPadBlog.de!"
];

const typedText = document.getElementById("typedText");
const progressBar = document.getElementById("progressBar");
const progressLabel = document.getElementById("progressLabel");
const themeToggle = document.getElementById("themeToggle");
const notifyBtn = document.getElementById("notifyBtn");
const toast = document.getElementById("toast");
const scoreEl = document.getElementById("score");
const badgeEl = document.getElementById("badge");
const gameMessage = document.getElementById("gameMessage");
const appButtons = document.querySelectorAll(".app-icon");
const deviceCard = document.getElementById("deviceCard");

let phraseIndex = 0;
let charIndex = 0;
let deleting = false;
let score = 0;
let progress = 71;
let clickCount = 0;

document.getElementById("year").textContent = new Date().getFullYear();

function typeLoop() {
const currentPhrase = phrases[phraseIndex];
typedText.textContent = currentPhrase.slice(0, charIndex);

if (!deleting && charIndex 0) {
charIndex--;
setTimeout(typeLoop, 28);
return;
}

deleting = false;
phraseIndex = (phraseIndex + 1) % phrases.length;
setTimeout(typeLoop, 250);
}

function updateProgress(value) {
progress = Math.max(71, Math.min(99, value));
progressBar.style.width = progress + "%";
progressLabel.textContent = progress + "%";
}

function showToast(message) {
toast.textContent = message;
toast.classList.add("show");
window.clearTimeout(showToast.timer);
showToast.timer = window.setTimeout(() => toast.classList.remove("show"), 2600);
}

function createParticles(x, y, amount = 10) {
for (let i = 0; i particle.remove());
}
}

appButtons.forEach((button) => {
button.addEventListener("click", (event) => {
const points = Number(button.dataset.points || 1);
score += points;
clickCount++;
scoreEl.textContent = score;
button.classList.remove("clicked");
void button.offsetWidth;
button.classList.add("clicked");
createParticles(event.clientX, event.clientY, 12);
updateBadge();

if (clickCount % 3 === 0) {
updateProgress(progress + 1);
showToast("Bonus: Wartungsfortschritt +1% ✨");
}
});
});

notifyBtn.addEventListener("click", (event) => {
createParticles(event.clientX, event.clientY, 16);
const messages = [
"Alles im grünen Bereich – wir arbeiten daran.",
"Der Cache wird gerade frisch aufgebaut.",
"Fast geschafft: Die Systeme melden gute Laune.",
"iPadBlog.de bekommt gerade den letzten Feinschliff."
];
showToast(messages[Math.floor(Math.random() * messages.length)]);
updateProgress(progress + Math.floor(Math.random() * 2));
});

themeToggle.addEventListener("click", () => {
document.body.classList.toggle("light-mode");
const isLight = document.body.classList.contains("light-mode");
themeToggle.textContent = isLight ? "🌙" : "☀️";
showToast(isLight ? "Heller Modus aktiviert" : "Dunkler Modus aktiviert");
});

deviceCard.addEventListener("mousemove", (event) => {
const rect = deviceCard.getBoundingClientRect();
const x = (event.clientX - rect.left) / rect.width - 0.5;
const y = (event.clientY - rect.top) / rect.height - 0.5;
deviceCard.style.transform = `rotateY(${x * 8}deg) rotateX(${-y * 8}deg)`;
});

deviceCard.addEventListener("mouseleave", () => {
deviceCard.style.transform = "rotateY(0deg) rotateX(0deg)";
});

window.addEventListener("pointerdown", (event) => {
if (event.target.closest("button") || event.target.closest("a")) return;
createParticles(event.clientX, event.clientY, 6);
});

setInterval(() => {
if (Math.random() > 0.52) updateProgress(progress + 1);
}, 9000);

typeLoop();
updateProgress(progress);