/**
* ============================================================================
* RESPONSIVE-BASE.CSS - Universelles Intelligentes Responsive System
* ============================================================================
*
* 🎯 ZWECK DIESER DATEI:
* Diese Datei löst 95% aller Responsive-Probleme für JEDES Webprojekt:
* ✅ Container ragen niemals über Bildschirmränder hinaus
* ✅ Schriftgrößen skalieren automatisch von Handy bis Desktop
* ✅ Funktioniert auf ALLEN Geräten (auch zukünftigen)
* ✅ Keine endlosen Media Queries nötig
* ✅ Ein System für alle Projekte
*
* 📋 WAS DIESES SYSTEM MACHT:
* 1. FLUID TYPOGRAPHY (Utopia): Schrift skaliert von 375px bis 2560px Bildschirm
* 2. INTRINSIC CONTAINERS: Container passen sich automatisch an verfügbaren Platz an
* 3. INTELLIGENT SPACING: Abstände skalieren proportional mit
* 4. OVERFLOW PREVENTION: Verhindert Content-Überläufe automatisch
*
* 🚨 ZWINGEND ERFORDERLICH FÜR FUNKTION:
* 1. Diese Datei MUSS als ERSTE CSS-Datei eingebunden werden:
*
* 2. Folgende Meta-Tag MUSS im stehen:
*
* 3. Danach erst projekt-spezifische CSS-Dateien einbinden
*
* 📖 VERWENDUNG:
*
* SCHRIFTGRÖSSEN (automatisch skalierend):
* - Normale Texte: font-size: var(--step-0);
* - Kleine Hinweise: font-size: var(--step--1);
* - Überschriften: font-size: var(--step-1);
* - Große Titel: font-size: var(--step-2);
* - Hero Headlines: font-size: var(--step-3);
*
* CONTAINER-KLASSEN (niemals Overflow):
* - Standard Container: class="responsive-container"
* - Inhalts-angepasst: class="content-fit"
* - Flexible Breite: class="flexible-box"
* - Schmaler Textblock: class="text-content"
*
* ABSTÄNDE (automatisch skalierend):
* - Kleine Abstände: margin/padding: var(--space-xs);
* - Standard Abstände: margin/padding: var(--space-md);
* - Große Abstände: margin/padding: var(--space-lg);
*
* ⚠️ WICHTIGE REGELN:
*
* ❌ NIEMALS VERWENDEN:
* - Feste Pixel-Werte für Container-Breiten: width: 800px;
* - Feste Font-Größen: font-size: 16px;
* - Media Queries für Grundlayout (nur für spezielle Fälle)
* - max-width ohne min() Funktion
*
* ✅ STATTDESSEN VERWENDEN:
* - Container-Klassen: class="responsive-container"
* - Schrift-Variablen: font-size: var(--step-0);
* - Intrinsic Sizing: width: fit-content;
* - Clamp-Funktionen: width: min(800px, 100vw - 2rem);
*
* 🔧 ANPASSUNGEN:
* - Schriftgrößen-Range: Ändern Sie die Utopia-Werte (Zeile ~100)
* - Container-Maximalbreiten: Anpassen in Container-Klassen (Zeile ~150)
* - Abstände: Modifizieren der --space-* Variablen (Zeile ~130)
*
* 🏗️ SYSTEM-GRUNDLAGE:
* - Basiert auf Utopia Fluid Typography (utopia.fyi)
* - Verwendet moderne CSS Intrinsic Sizing
* - Nutzt clamp(), min(), max() Funktionen
* - Mobile-First Ansatz (375px bis 2560px)
*
* 📱 GETESTETE GERÄTE-BEREICHE:
* - Smartphones: 320px - 480px (Portrait & Landscape)
* - Tablets: 768px - 1024px (Portrait & Landscape)
* - Laptops: 1280px - 1920px
* - Large Displays: bis 2560px
*
* 🔄 UPDATES:
* Version 1.0 - Initial Release
* Erstellt für universelle Wiederverwendung in allen Projekten
*
* ⚡ PERFORMANCE:
* - Minimale CSS-Größe durch clevere Verwendung von Funktionen
* - Keine JavaScript-Abhängigkeiten
* - Browser-native Berechnungen (sehr schnell)
*
* 🆘 TROUBLESHOOTING:
* - Container läuft über? → Prüfen Sie ob min() verwendet wird
* - Schrift zu groß/klein? → Verwenden Sie --step-* Variablen
* - Layout bricht? → Überprüfen Sie viewport Meta-Tag
* - Nicht responsive? → Diese Datei muss ZUERST geladen werden
*
* ============================================================================
*/
/* ============================================================================
RESET & FOUNDATION
============================================================================ */
/* Basis-Reset für konsistente Darstellung */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* HTML & Body Grundeinstellungen */
html {
scroll-behavior: smooth;
}
body {
font-family: system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Ubuntu', 'Cantarell', sans-serif;
line-height: 1.6;
text-rendering: optimizeSpeed;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ============================================================================
UTOPIA FLUID TYPOGRAPHY SYSTEM
============================================================================ */
:root {
/*
* Fluid Typography: Automatische Skalierung von 375px bis 2560px Viewport
* Basiert auf: 14px-18px Schrift, 1.2-1.333 Typographic Scale
* Generator: https://utopia.fyi/type/calculator?c=375,14,1.2,2560,18,1.333,5,2
*/
/* Extra-kleine Texte */
--step--4: clamp(0.48rem, 0.47rem + 0.02vw, 0.52rem);
--step--3: clamp(0.54rem, 0.53rem + 0.02vw, 0.58rem);
/* Sehr kleine Texte (Kleingedrucktes, Labels) */
--step--2: clamp(0.6076rem, 0.6035rem + 0.0185vw, 0.6331rem);
/* Kleine Texte (Captions, Hilfstext) - leicht reduziert */
--step--1: clamp(0.60rem, 0.59rem + 0.05vw, 0.72rem);
/* Standard Fließtext (Body Text) - reduziert */
--step-0: clamp(0.78rem, 0.74rem + 0.16vw, 1.0rem);
/* Mittlere Überschriften (H3) - reduziert */
--step-1: clamp(0.95rem, 0.90rem + 0.28vw, 1.35rem);
/* Große Überschriften (H2) */
--step-2: clamp(1.26rem, 1.1391rem + 0.5375vw, 1.999rem);
/* Sehr große Überschriften (H1, Section Headers) */
--step-3: clamp(1.512rem, 1.3234rem + 0.8383vw, 2.6647rem);
/* Hero Headlines (Landing Pages, Banner) */
--step-4: clamp(1.8144rem, 1.5301rem + 1.2637vw, 3.552rem);
/* Display Titles (selten verwendet) */
--step-5: clamp(2.1773rem, 1.7588rem + 1.86vw, 4.7348rem);
}
/* ============================================================================
HTML ELEMENT DEFAULTS - Responsive Typography für alle Basis-Elemente
============================================================================ */
/* Überschriften-Hierarchie */
h1 { font-size: var(--step-3); margin-bottom: var(--space-sm); }
h2 { font-size: var(--step-2); margin-bottom: var(--space-sm); }
h3 { font-size: var(--step-1); margin-bottom: var(--space-sm); }
h4 { font-size: var(--step-1); margin-bottom: var(--space-xs); }
h5 { font-size: var(--step-0); margin-bottom: var(--space-xs); }
h6 { font-size: var(--step-0); margin-bottom: var(--space-xs); }
/* Text-Elemente */
p { font-size: var(--step-0); margin-bottom: var(--space-sm); }
body { font-size: var(--step-0); }
/* Listen */
ul, ol { font-size: var(--step-0); }
li { margin-bottom: var(--space-xs); }
/* Kleinere Elemente */
small { font-size: var(--step--1); }
caption { font-size: var(--step--1); }
/* ============================================================================
INTELLIGENT SPACING SYSTEM
============================================================================ */
:root {
/* Fluid Spacing: Skaliert proportional zur Bildschirmgröße */
--space-xs: clamp(0.5rem, 2vw, 1rem); /* Kleine Abstände */
--space-sm: clamp(0.75rem, 3vw, 1.5rem); /* Moderate Abstände */
--space-md: clamp(1rem, 4vw, 2rem); /* Standard Abstände */
--space-lg: clamp(1.5rem, 6vw, 3rem); /* Große Abstände */
--space-xl: clamp(2rem, 8vw, 4rem); /* Sehr große Abstände */
/* Layout-spezifische Abstände */
--content-padding: clamp(1rem, 4vw, 2rem); /* Inhalts-Innenabstand */
--section-gap: clamp(2rem, 8vw, 4rem); /* Zwischen Sektionen */
}
/* ============================================================================
INTRINSIC CONTAINER SYSTEM - Niemals Overflow!
============================================================================ */
/* Standard Container - Für die meisten Layouts */
.responsive-container {
width: min(100%, 1200px); /* Nie breiter als Screen oder 1200px */
margin-inline: auto; /* Zentriert horizontal */
padding-inline: var(--content-padding); /* Responsive Seitenabstand */
}
/* Content-angepasster Container - Passt sich Inhalt an */
.content-fit {
width: fit-content; /* Nur so breit wie nötig */
/*max-width: min(90vw, 60ch); */ /* ← PROBLEM */
max-width: 100%; /* ← LÖSUNG: Nie breiter als Parent */
min-width: min-content; /* Nie kleiner als längstes Wort */
margin-inline: auto; /* Zentriert */
}
/* Flexibler Container - Für variable Inhalte */
.flexible-box {
width: 100%; /* ← LÖSUNG: Parent-Breite verwenden */
/* width: min(800px, 100vw - 2rem); */ /* ← PROBLEM */
margin-inline: auto;
padding: var(--space-md);
}
/* Text-Content Container - Optimiert für Lesbarkeit */
.text-content {
/* width: min(65ch, 90vw); */ /* ← PROBLEM */
width: 100%; /* ← Parent-Breite verwenden */
max-width: 65ch; /* ← Aber nie breiter als optimal für Text */
margin-inline: auto;
font-size: var(--step-0); /* Standard Lesetext */
line-height: 1.7; /* Optimaler Zeilenabstand */
}
/* Grid Container - Responsive Grid ohne Media Queries */
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
/* gap: var(--space-md); */ /* ← War Standart aber irgendwie zu groß find ich */
/*gap: var(--space-sm); */ /* ← KLEINER */
gap: var(--space-xs); /* ← KLEINER */
width: 100%;
}
/* Flex Container - Intelligentes Flex-Layout */
.responsive-flex {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
justify-content: space-between;
align-items: flex-start;
}
/* ============================================================================
RESPONSIVE COMPONENTS - Basis-Styling für häufige Elemente
============================================================================ */
/* Intelligente Buttons */
.responsive-btn {
font-size: var(--step--3);
padding: var(--space-sm) var(--space-md);
min-height: 44px; /* Touch-freundlich */
border: none;
border-radius: clamp(4px, 1vw, 8px);
cursor: pointer;
transition: all 0.2s ease;
/* Nie zu schmal für Touch */
min-width: fit-content;
padding-inline: max(1rem, 4vw);
}
/* Responsive Bilder */
img {
max-width: 100%; /* Nie breiter als Container */
height: auto; /* Seitenverhältnis beibehalten */
display: block;
}
/* Responsive Tabellen */
.responsive-table {
width: 100%;
overflow-x: auto; /* Horizontal scrollen wenn nötig */
max-width: 100%;
}
.responsive-table table {
width: 100%;
min-width: fit-content; /* Nie zu schmal für Inhalt */
max-width: 100%;
font-size: inherit; /* Von Umgebung übernehmen */
}
/* ============================================================================
UTILITY CLASSES - Schnelle Responsive Helfer
============================================================================ */
/* Schriftgrößen-Utilities */
.text-xs { font-size: var(--step--2); }
.text-sm { font-size: var(--step--1); }
.text-base { font-size: var(--step-0); }
.text-lg { font-size: var(--step-1); }
.text-xl { font-size: var(--step-2); }
.text-2xl { font-size: var(--step-3); }
.text-3xl { font-size: var(--step-4); }
/* Abstände-Utilities */
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.m-xs { margin: var(--space-xs); }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }
/* Layout-Utilities */
.w-fit { width: fit-content; }
.w-full { width: 100%; }
.max-w-content { max-width: max-content; }
.min-w-content { min-width: min-content; }
/* Overflow-Prevention */
.overflow-safe {
width: min(100%, max-content);
overflow-wrap: break-word;
word-wrap: break-word;
}
/* ============================================================================
DEBUGGING HELPERS - Nur für Entwicklung verwenden
============================================================================ */
/*
* Uncomment für visuelles Debugging:
* Zeigt Container-Grenzen zur Entwicklungszeit an
*/
/*
.responsive-container,
.content-fit,
.flexible-box,
.text-content {
outline: 2px dashed rgba(255, 0, 0, 0.3);
outline-offset: -1px;
}
.responsive-container::before,
.content-fit::before,
.flexible-box::before,
.text-content::before {
content: attr(class);
position: absolute;
top: -1.5em;
left: 0;
font-size: 0.75rem;
color: red;
background: white;
padding: 2px 4px;
font-family: monospace;
}
*/
/* ============================================================================
PRINT STYLES - Responsive auch beim Drucken
============================================================================ */
/* Entfernt harte Breakpoints für Typografie – reine clamp()-Skalierung */
@media print {
:root {
--step-0: 12pt; /* Lesbare Druckgröße */
--space-md: 0.5rem; /* Kompakte Abstände */
}
.responsive-container,
.content-fit,
.flexible-box {
width: 100%;
margin: 0;
padding: 0;
}
.responsive-btn {
border: 1px solid #000; /* Buttons beim Drucken sichtbar */
}
}