@charset "UTF-8";
/*!
* ============================================================================
* helmich2025.all.css — ALL-IN-ONE (ohne Farben)
* ============================================================================
* Zweck
* Dieses Stylesheet bündelt ALLE Layout- und Komponenten-Regeln in EINER Datei,
* damit du nur noch ZWEI Stylesheets laden musst:
*
* 1) Farben2025.css (enthält NUR Farben & Farb-Variablen)
* 2) helmich2025.all.css (dieses File: Layout, Typografie, Komponenten, Fixes)
*
* Ziele
* - Beibehaltung der bestehenden Optik (kein visuelles Redesign)
* - Stabile Responsivität auf iPhone/iPad/Android & Desktop
* - Dreamweaver-Entwurfsansicht ohne horizontales Scrollen
* - Gut kommentierter Code für spätere Wartung
*
* Reihenfolge im (empfohlen)
*
*
*
* Hinweise
* - Farbliche Klassen (z. B. .informatikBG, .chemieBG, .fachbegriff-Farben) kommen
* weiterhin aus Farben2025.css und bleiben dort zentral gepflegt.
* - Wenn du später Farben in dieses File ziehen willst, suche nach dem Marker:
* >>> FARBFELD (aus Farben2025.css)
* ============================================================================
*/
/* ==========================================================================
0) FARBEN – externer Import
--------------------------------------------------------------------------
Nur die Farben kommen aus Farben2025.css. Keine weiteren Imports notwendig.
========================================================================== */
@import url("Farben2017.css");
/* ==========================================================================
1) UNIVERSAL-GUARDS & BASICS
--------------------------------------------------------------------------
Diese Regeln sorgen dafür, dass kein Element breiter als der Viewport wird
und reduzieren Overflow-Fallen (insb. in Dreamweaver-Entwurfsansicht).
========================================================================== */
/* Einheitliche Box-Berechnung (Padding/Borders werden in width eingerechnet) */
*,
*::before,
*::after{ box-sizing: border-box; }
/* Auf mobilen Geräten & in DW nie breiter als der Viewport */
html, body{ max-width: 100%; overflow-x: hidden; }
/* Medien stets flexibel skalieren */
img, video, canvas, svg, iframe{ max-width: 100%; height: auto; display: block; }
/* Lange Wörter/URLs umbrechen, aber ohne Optik zu verändern */
body{
font-family: Verdana;
font-size: 1em;
line-height: 1.3em;
overflow-wrap: anywhere; /* moderne Browser */
word-break: break-word; /* Fallback */
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
/* ==========================================================================
2) GRUNDLAYOUT (Mobile-First) — Grid, Header, Article, Aside, Footer
--------------------------------------------------------------------------
Desktop-Erweiterungen folgen später in einer Media-Query (>= 641px).
========================================================================== */
#pfad{ margin-bottom: 5px; font-size: .7em; }
#pfadLexikon{ margin-bottom: 5px; font-size: 1.2em; }
/* Einspaltiges Grundlayout */
main, #main{
display: inline-grid;
grid-template-columns: 100%;
grid-gap: 10px;
grid-auto-rows: minmax(20px, auto);
padding: 0;
padding-right: 5px;
max-width: 100%;
}
/* Header & Titel — h2 ist absolut positioniert; Header wird Positionier-Referenz */
header{
position: relative; /* WICHTIG: verhindert Overflow durch absolut positioniertes h2 */
grid-column: 1;
grid-row: 1;
padding: 6px;
border: 1px dotted black;
max-width: 100%;
}
header h1{ font-size: 1.8em; line-height: 1.2em; }
header h2{
font-size: 1.8em;
position: absolute; top: 30px; left: 20px;
text-shadow: .1em .1em .2em black;
line-height: 1.5em;
/* Auf sehr kleinen Screens wird h2 später via Media-Query statisch gemacht */
}
header p{ font-size: .8em; padding: 0 1%; border: 1px dotted black; }
#aufmacher{ overflow: hidden; }
header img{ border: 0; width: 100%; }
/* Hauptinhalt */
article, #content{
grid-column: 1;
grid-row: 2;
counter-reset: img; /* für Abbildungszähler */
max-width: 100%;
}
/* Section-Grundwerte */
section{
border: 1px dotted black;
padding: 10px;
margin-bottom: 10px;
max-width: 100%;
}
section:last-child{ margin-bottom: 0; }
/* Rechte Spalte (mobil untern drunter) */
aside, #rechts{
grid-column: 1;
grid-row: 3;
padding: 10px;
border: 1px dotted black;
font-size: .8em;
line-height: 1.2em;
max-width: 100%;
}
/* Mobil: Seitenleisten-Bilder verbergen (Platz sparen) */
aside img, #rechts img{
visibility: hidden;
float: right;
width: 0; height: 0; margin: 0; max-width: 0;
}
/* Footer */
footer{
margin-top: 10px;
padding: 10px 10px 10px 20px;
font-size: .8em;
border: 1px dotted black;
max-width: 100%;
}
footer:before{ content: "(C) Ulrich Helmich 2025"; display: block; }
footer .klein{ font-size: 1em; line-height: normal; }
/* ==========================================================================
3) TYPOGRAFIE, LISTEN, HERVORHEBUNGEN (aus Stile.css integriert)
========================================================================== */
/* Iframes: deine 98%-Breite bleibt erhalten, aber overflow-sicher */
iframe{
width: 98%;
height: 90%;
border: 0;
font-family: Verdana;
font-size: 1em;
line-height: 1.3em;
max-width: 100%;
}
/* Listenabstände */
.abstandNachOben{ margin-top: 20px; }
ol, ul{ margin-top: 20px; }
/* Navigation */
nav{ font-size: 1.4em; padding-top: 0; padding-bottom: 20px; }
nav:before{ content: ""; }
nav ol, nav ul{ line-height: 2em; }
nav li{ border-bottom: 1px dotted black; }
nav li:first-child{ border-top: 1px dotted #DDD; }
nav li li{ border-bottom: 1px dotted #DDD; padding-bottom: 5px; }
/* Weiter-Link/Kasten */
#weiterMit{
display: block; clear: both;
margin-top: 20px; line-height: 2em;
padding: 2px 6px;
border: 1px dotted black; border-radius: 8px;
}
/* Fachboxen mit Farbrahmen — >>> FARBFELD (aus Farben2025.css) steuert Farben */
#lernziele, #abitur, #lehrplan, #zusammenfassungBio, #zusammenfassungChe, #zusammenfassungInf{
border-radius: 8px; padding: 10px;
/* Rahmenfarbe in Farben2025.css definieren, falls du dort feiner steuern willst */
}
#lernziele{ border: 3px dotted darkred; }
#abitur { border: 3px dotted darkred; background-color: lightpink; }
#lehrplan { border: 3px dotted darkgreen; }
#zusammenfassungBio{ border: 3px dotted darkgreen; }
#zusammenfassungChe{ border: 3px dotted darkred; }
#zusammenfassungInf{ border: 3px dotted darkblue; }
/* Zitate */
cite{ font-size: 1em; }
/* Monospace-/Code-Elemente (Farbgebung kommt aus Farben2025.css) */
pre{
font-family: "Courier New", Courier, monospace;
font-size: .9em;
margin-right: 0;
padding: 2mm;
border-style: solid;
border-width: 1pt;
max-width: 100%;
overflow-x: auto; /* wenn nötig, nur im Element scrollen */
white-space: pre-wrap; /* lange Zeilen umbrechen */
}
kbd{
margin: 0 1px;
padding: 0 4px;
border-style: solid;
border-width: 1pt;
border-radius: 4px;
}
/* Lauftexte & Hervorhebungen */
.winzig, small{ font-size: .7em; line-height: 1.4em; }
.klein{ font-size: .8em; line-height: 1.6em; }
.gross, big, .formel, .titel, .antwort{ font-size: 1.3em; line-height: 1.4em; font-weight: 700; }
.titel, .antwort{ font-style: italic; margin-bottom: 6px; }
.eigenname {font-variant: small-caps;}
/* Hinweistexte */
section .anmerkung,
section .einleitung,
section .bemerkung{ font-size: .85em; font-style: italic; line-height: 1.4em; }
aside .anmerkung{ font-size: .7em; }
.anmerkung:before{ content: "Anmerkung: "; display: block; }
/* Sichtbarkeit je Medium */
@media screen{ .unsichtbar{ display: none; } }
@media print { .unsichtbar{ /* im Druck sichtbar lassen, wenn gewünscht */ } }
/* Linkbanner */
.linkbanner{ margin-right: 0; margin-bottom: 10px; }
.linkbanner a{ opacity: .5; transition: opacity .2s ease-in-out; }
.linkbanner a:hover{ opacity: 1; }
/* ==========================================================================
4) TABELLEN (robust & responsive)
========================================================================== */
table{
width: 98%; /* optisch wie gewohnt */
border-collapse: collapse;
max-width: 100%; /* aber nie breiter als der Container */
}
#Tablewrapper{ vertical-align: top; }
.Tabellenkopf, .Tabellenzeile{ font-weight: bold; text-align: center; }
td{ font-family: Verdana; font-size: .9em; line-height: 1.5; }
/* Optional: Wrapper für sehr breite Tabellen */
.table-responsive{ width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-responsive > table{ min-width: 640px; }
/* ------------- Ende des ChatGPT-Fixes ---------------------------- */
/* ==========================================================================
5) SECTIONS / HEADINGS / IMAGES
========================================================================== */
section h2{ font-size: 1.8em; line-height: 1.9em; }
section h3{ font-size: 1.6em; line-height: 1.7em; }
section h4{ font-size: 1.5em; }
section h5{ font-size: 1.4em; line-height: 1.5em; }
section h6{ font-size: 1.2em; }
/* Rahmenbilder & breite Bilder (wie zuvor, overflow-sicher) */
section .breitbild{
margin-right: 0; margin-bottom: 10px; padding: 2mm;
border: 1px solid black; display: inline-block;
max-width: 100%;
}
section .breitbild{ width: 99%; border: 1px solid black; padding: 1px; overflow: hidden; }
section .breitbild img{ display: block; width: 100%; height: auto; }
/* Pfeil, allgemeine Bilder & animiertes Einblenden */
section .verweispfeil{ border: 1px solid blue; width: 4%; }
section img{ width: 98%; height: auto; animation-duration: 2s; animation-name: bounceIn; }
/* Bildunterschriften & Listen */
section .abbildung{ font-size: .8em; font-style: italic; padding: 5px; border-top: 1px dotted black; }
section .QTBeschreibung{ font-size: .7em; line-height: 1.6em; font-style: italic; padding: 0; margin-top: -8px; }
section .abbildung:before{ counter-increment: img; content: "Abbildung " counter(img) ": "; }
section li{ line-height: 1.6em; }
/* ==========================================================================
6) KOMPONENTEN: Spalten, Video-Wrapper, Method-Box, Fach-/Info-Kästen
========================================================================== */
/* Spaltenlayout */
.spaltenFlex{
-webkit-column-width: 320px; -webkit-column-gap: 25px; -webkit-column-rule: 2px dotted #333;
-moz-column-width: 320px; -moz-column-gap: 25px; -moz-column-rule: 2px dotted #333;
column-width: 320px; column-gap: 25px; column-rule: 2px dotted #333;
}
.spaltenFlex h3{ -webkit-column-span: all; -moz-column-span: all; column-span: all; }
.spaltenumbruch{ break-after: always; } /* 'always' statt 'allways' */
/* Videorahmen im 16:9-Format */
.video-container{ position: relative; width: 100%; padding-bottom: 56.25%; height: 0; }
.video-container iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Method-Box (Farben ggf. aus Farben2025.css) */
.method-box{
border: 1px solid;
border-radius: 6px;
padding: 1em;
margin: 1.5em 0;
background-color: #fafafa;
}
/* Klassische Inhaltssboxen (aus Stile.css) */
.definition, .aufgabe, .merktext, .versuch, .experten, .loesung,
.anfaenger, .didaktik, .wichtig, .kasten, .kastenMed, .kastenKI,
.referenz, .anweisung{
margin-right: 0;
margin-bottom: 10px;
padding: 2mm;
border-style: solid;
border-width: 1pt;
width: 97%;
max-width: 100%;
}
.referenz p{ text-decoration: none; }
/* Informatik-Klassen (Färbung via Farben2025.css) */
code, var, .quelltext{
font-family: Courier, "Courier New", monospace;
font-weight: bold;
padding-left: 4px; padding-right: 4px;
}
.klasse, .objekt, .methode, .variable, .konstante, .parameter{
font-weight: bold;
padding-left: 4px; padding-right: 4px;
}
.fachbegriff, .artname, .gattung, .hervorhebung, .taxon, .stoffgruppe,
.enzym, .coenzym, .verbindung{
font-size: 1em;
font-weight: bold; /* außer artname/gattung – kursiv + fett gewünscht? Belassen wir kursiv/bold konsistent */
padding-left: 4px; padding-right: 4px;
}
.artname, .gattung{ font-style: italic; }
.WichtigeFrage{ font-style: italic; font-weight: bold; }
/* Dünne
-Linie */
.linie1{ border: none; height: 1px; background-color: #999; }
/* ==========================================================================
7) ANIMATIONEN
========================================================================== */
@keyframes bounceIn{
0% { transform: scale(0.1); opacity: .4; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes kenburns{
0% { opacity: 0; }
5% { opacity: 1; }
95%{
transform: scale3d(1.5, 1.5, 1.5) translate3d(-40px, -30px, 0);
animation-timing-function: ease-in;
opacity: 1;
}
100%{
transform: scale3d(2, 2, 2) translate3d(-30px, -20px, 0);
opacity: 0;
}
}
/* ==========================================================================
8) DESKTOP-ERWEITERUNGEN (>= 641px) — 2-Spalten-Layout & Headergrößen
========================================================================== */
@media (min-width: 641px){
body{
font-family: Verdana;
font-size: 1em;
font-kerning: normal;
line-height: 1.6em;
max-width: 1200px;
padding-left: 0; padding-right: 0;
overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto;
}
#pfad, #pfadLexikon{ margin-left: 5%; margin-right: 5%; margin-bottom: 5px; }
#pfad{ font-size: .7em; }
#pfadLexikon{ font-size: 1.3em; }
main{
display: inline-grid;
grid-template-columns: 75% 25%;
grid-gap: 10px;
border: 1px dotted black; border-radius: 12px;
max-width: 1280px; padding: 10px 20px 10px 10px;
margin-left: 5%; margin-right: 5%;
}
header{
grid-column: 1 / 3;
grid-row: 1;
padding: 6px;
border: 1px dotted black; border-radius: 12px;
}
header h1{ font-size: 1.8em; }
header h2{
font-size: 2.4em;
position: absolute; top: 30px; left: 85px;
text-shadow: .1em .1em .2em black; padding: 1%;
line-height: 1.7em;
}
header p{ font-size: .8em; padding: 0 1%; border: 1px dotted black; border-radius: 8px; }
article, #content{ grid-column: 1; grid-row: 2; }
section{ border: 1px dotted black; border-radius: 8px; padding: 10px; margin-bottom: 10px; }
aside, #rechts{
grid-column: 2; grid-row: 2;
padding: 10px; border: 1px dotted black; border-radius: 12px;
}
aside img{
visibility: visible; width: 98%; max-width: 640px; height: auto;
margin: -5px 0 20px 0; border: 1px solid black; border-radius: 8px;
}
footer{
margin: 10px 5%;
font-size: .7em;
padding: 10px 10px 10px 20px;
border: 1px dotted black; border-radius: 12px;
}
footer:before{ content: "(C) Ulrich Helmich 2025"; }
}
/* ==========================================================================
9) EXTRA RESPONSIVE FIXES
--------------------------------------------------------------------------
Ziel: Auf sehr kleinen Screens (z. B. iPhone SE) und in DW-Entwurf
sicherstellen, dass Überschriften/Medien nicht überlaufen.
========================================================================== */
/* h2 im Header auf sehr kleinen Displays NICHT absolut positionieren */
@media (max-width: 480px){
header h2{
position: static !important;
display: block;
margin: .3em 0 0 0;
text-align: left;
line-height: 1.3;
word-wrap: break-word;
max-width: 100%;
}
}
/* Bilder in Tabellen/Figuren clampen */
section table img,
figure img,
.breitbild img{ max-width: 100%; height: auto; }
/* Formulare: lange Inhalte sprengen kein Layout */
input[type="text"],
input[type="search"],
input[type="url"],
textarea{ max-width: 100%; }
/* Utility-Helfer */
.w-100{ width: 100% !important; }
.maxw-100{ max-width: 100% !important; }
/* Debug-Helfer: Umriss aktivierbar über */
.debug-overflow *{ outline: 1px dashed rgba(255,0,0,.35); }
/* ==========================================================================
10) ANIMATIONEN REDUZIEREN (Design-Ansicht & Barrierefreiheit)
--------------------------------------------------------------------------
Dreamweaver-Entwurfsansicht und Nutzer mit "Bewegung reduzieren" profitieren
von deaktivierten Animationen/Transitions. Live-Seiten behalten Animationen,
sofern das System-Setting nicht auf "reduce" steht.
========================================================================== */
@media (prefers-reduced-motion: reduce){
*{ animation: none !important; transition: none !important; }
}