111 lines
No EOL
2 KiB
CSS
111 lines
No EOL
2 KiB
CSS
/* ============================
|
|
CSS Reset & Variablen
|
|
============================ */
|
|
|
|
:root {
|
|
--color-primary: #1e88e5;
|
|
--color-accent: #e53935;
|
|
--color-success: #43a047;
|
|
--color-warning: #fbc02d;
|
|
--color-text: #212121;
|
|
--color-text-light: #fafafa;
|
|
--bg-light: #f5f5f5;
|
|
--bg-dark: #212121;
|
|
--font-base: 'Segoe UI', Arial, sans-serif;
|
|
--font-size-base: 16px;
|
|
--spacing-xs: 0.25rem;
|
|
--spacing-sm: 0.5rem;
|
|
--spacing-md: 1rem;
|
|
--spacing-lg: 2rem;
|
|
--max-content-width: 1200px;
|
|
--transition-fast: 0.2s ease;
|
|
--transition-base: 0.3s ease;
|
|
}
|
|
|
|
html {
|
|
box-sizing: border-box;
|
|
font-size: 100%;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
*, *::before, *::after {
|
|
box-sizing: inherit;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
font-family: var(--font-base);
|
|
font-size: var(--font-size-base);
|
|
color: var(--color-text);
|
|
background-color: var(--bg-light);
|
|
line-height: 1.5;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
img, picture, video, canvas, svg {
|
|
display: block;
|
|
max-width: 100%;
|
|
}
|
|
|
|
input, button, textarea, select {
|
|
font: inherit;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: color var(--transition-fast);
|
|
}
|
|
|
|
a:hover, a:focus {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
/* ============================
|
|
Body & Grundlayout
|
|
============================ */
|
|
|
|
.app-header {
|
|
background-color: var(--bg-dark);
|
|
color: var(--color-text-light);
|
|
padding: var(--spacing-md);
|
|
text-align: center;
|
|
}
|
|
|
|
.app-footer {
|
|
background-color: var(--bg-dark);
|
|
color: var(--color-text-light);
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
text-align: center;
|
|
margin-top: auto;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.app-footer::after {
|
|
content: '© 2026 Donau2Space.de';
|
|
display: block;
|
|
margin-top: var(--spacing-xs);
|
|
}
|
|
|
|
main {
|
|
width: 100%;
|
|
max-width: var(--max-content-width);
|
|
margin: 0 auto;
|
|
padding: var(--spacing-md);
|
|
flex: 1;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
body {
|
|
font-size: 1.0625rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
body {
|
|
font-size: 1.125rem;
|
|
}
|
|
} |