/* 14.01.2026 Bilde in Grid gleich groß; Tabelle in Grid unten
13.01.2026 Modul 12 Animation Overlay-Einblendung
12.01.2026 Erweiterung OveralyBox: Details bei Klick auf LINK;
neben LINK Seite, Extern weiter Möglichkeit - verstekcte Seite drüberlegen
/* ===================== Modul (2) FlagBox ======== flag-box.css (minimal) =============== */
:root{
--ibox-width : 360px; /* max Panelbreite */
--ibox-speed : 320ms; /* sanfte Animation */
--flag-size : 48px; /* Kantenlänge des Flags */
--flag-top : 15rem; /* Default-Top (per body[data-flag-top] überschreibbar) */
--overlay : rgba(0,0,0,.5);
}
/* Overlay – vollflächig, klickbar nur wenn sichtbar */
#ibox-overlay{
position: fixed;
inset: 0;
background: var(--overlay);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--ibox-speed);
z-index: 900;
}
#ibox-overlay.visible{
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Panel – von rechts, „Flag guckt raus“ solange geschlossen */
.ibox-panel{
position: fixed;
top: var(--flag-top, 15rem);
right: 0;
width: min(var(--ibox-width), calc(100vw - 2rem));
max-height: calc(100vh - 2rem);
box-sizing: border-box;
background: #fff;
color: #222;
border-radius: .5rem 0 0 .5rem; /* nur linke Ecke rund, da rechts an Kante */
box-shadow: 0 8px 24px rgba(0,0,0,.18);
z-index: 1000; /* über Overlay */
overflow: hidden; /* saubere Rundung */
will-change: transform;
transition: transform var(--ibox-speed) ease;
transform: translateX(calc(100% - var(--flag-size)));
}
/* offen: komplett sichtbar */
.ibox-panel.open{
transform: translateX(0);
overflow: auto; /* Inhalt darf scrollen */
}
/* Geschlossen: nur Flag sichtbar, ohne „Schlitz“ */
.ibox-panel:not(.open){
background: transparent;
box-shadow: none;
min-height: var(--flag-size);
}
/* Alles außer Flag ausblenden, damit nichts an der Kante „durchscheint“ */
.ibox-panel:not(.open) > :not(.ibox-flag){ display: none !important; }
/* Flag – fix an der Panel-Oberkante, ragt nach links heraus */
.ibox-panel .ibox-flag{
position: absolute;
top: 0;
right: calc(100% - var(--flag-size));
width: var(--flag-size);
height: var(--flag-size);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: .5rem 0 0 .5rem;
background: #ffb400;
color: #000;
font: inherit;
font-weight: 600;
cursor: pointer;
user-select: none;
-webkit-appearance: none;
appearance: none;
transition: background .2s ease, transform .2s ease;
z-index: 1010;
}
.ibox-panel .ibox-flag:hover{ background:#ffa000; }
.ibox-panel .ibox-flag:active{ transform: scale(.96); }
.ibox-panel .ibox-flag:focus-visible{
outline: 2px solid currentColor;
outline-offset: 2px;
}
/* Inhalt – simples Padding; bei „right“ links Platz für das Flag lassen */
.ibox-panel .ibox-content{
padding: 1rem 1.25rem 1.5rem;
padding-left: calc(1.25rem + var(--flag-size));
line-height: 1.5;
}
/* Barrierearme Bewegung */
@media (prefers-reduced-motion: reduce){
.ibox-panel, #ibox-overlay, .ibox-panel .ibox-flag{ transition: none !important; }
}
/* Optional: Daten-Attribut statt CSS-Var für Top-Versatz */
body[data-flag-top] .ibox-panel{
top: attr(data-flag-top); /* wird von Browsern ignoriert → JS setzt tatsächlich */
}
/* =========================
Vertikale Position je Instanz
Default: Desktop / große Screens
(passe Werte frei an)
========================= */
.ibox-top-1 { --flag-top: 15rem; } /* erste Box */
.ibox-top-2 { --flag-top: 19rem; } /* +4rem Abstand */
.ibox-top-3 { --flag-top: 23rem; } /* +4rem Abstand */
/* Phone hochkant (<=600px) */
@media (max-width: 600px) and (orientation: portrait){
.ibox-top-1 { --flag-top: 10rem; }
.ibox-top-2 { --flag-top: 13rem; }
.ibox-top-3 { --flag-top: 16rem; }
}
/* Phone quer (<=900px) */
@media (max-width: 900px) and (orientation: landscape){
.ibox-top-1 { --flag-top: 12rem; }
.ibox-top-2 { --flag-top: 15rem; }
.ibox-top-3 { --flag-top: 18rem; }
}
/* Tablet quer / mittlere Screens (optional Feintuning) */
@media (min-width: 901px) and (max-width: 1200px){
.ibox-top-1 { --flag-top: 14rem; }
.ibox-top-2 { --flag-top: 18rem; }
.ibox-top-3 { --flag-top: 22rem; }
}
/* Optional: Safe-Area rechts (iPhone Notch im Querformat)
– nur wenn du merkst, dass es knapp wird */
@supports (right: env(safe-area-inset-right)){
.ibox-panel{ right: max(0px, env(safe-area-inset-right)); }
}
/* ============================== Modul (3) FloatBox =====================================
float-img.css — universelles Bild-/Float-Modul (Variant B: Opt-in via [data-floatimg])
Version: 2025-10-01 (robuste Fassung ohne Auto-flow-root)
► Template-Schalter:
…
Wirkt NUR innerhalb von [data-floatimg]; Header/Logo/Slider bleiben unberührt.
======================================================================= */
/* 0) Scope-Guard: Das Attribut-Element selbst soll immer block & 100% breit sein */
[data-floatimg] {
display: block;
width: 100%;
max-width: 100%;
}
/* Leichter Außenabstand für alle Lightbox-Wrapper */
[data-floatimg] .lightbox-item { padding-inline: .6em; }
/* 1) Responsive Defaults für Bilder im Content-Scope (niedrige Spezifität via :where) */
[data-floatimg] :where(img:not([width][height]), picture > img[data-responsive]) {
max-width: 100%;
height: auto;
display: block;
}
/* 2) KEIN automatisches flow-root mehr auf generischen Containern (Vermeidet Shrink-Effekte)
-> Nur opt-in-Utilities: .flow-root / .clearfix */
[data-floatimg] :where(.flow-root, .clearfix) { display: flow-root; }
[data-floatimg] .clear { clear: both; }
/* 3) Bildklassen (mozilo & Co.) nur für echte ![]()
*/
[data-floatimg] :where(img.contentimage, img.leftcontentimage, img.rightcontentimage) {
display: block;
max-width: 100%;
height: auto;
border-radius: var(--radius, .5rem);
}
/* 4) Floating-Bilder links/rechts */
[data-floatimg] :where(img.leftcontentimage, span.leftcontentimage) {
float: left;
/* margin-weg
margin: .35em .9em .75em .9em;
*/
max-width: min(100%, 18rem);
}
[data-floatimg] :where(img.rightcontentimage, span.rightcontentimage) {
float: right;
/* margin-weg
margin: .35em 0 .75em .9em;
*/
max-width: min(100%, 18rem);
}
/* Optional: schöner Textfluss */
@supports (shape-outside: inset(0 round 12px)) {
[data-floatimg] img.leftcontentimage { shape-outside: inset(0 round 12px); }
[data-floatimg] img.rightcontentimage { shape-outside: inset(0 round 12px); }
}
/* 5) Captions / Bildunterschriften */
[data-floatimg] :where(figcaption, .imagesubtitle,
span.contentimage, span.leftcontentimage, span.rightcontentimage) {
display: block;
font-size: .85em;
color: var(--clr-muted, #6b7280);
line-height: 1.3;
text-align: center;
margin: .35rem;
}
[data-floatimg] figure { margin: 1.2em 0; }
/* 6) Utilities */
[data-floatimg] .float-left { float: left; margin: .35em .9em .75em 0; }
[data-floatimg] .float-right { float: right; margin: .35em 0 .75em .9em; }
[data-floatimg] .float-none { float: none !important; }
[data-floatimg] .img-center { display: block; margin-inline: auto; float: none; }
[data-floatimg] .img-rounded { border-radius: var(--radius, .5rem); }
[data-floatimg] .img-framed { box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,.1)); background: #fff; }
/* 7) Mobile: Floats aufheben */
@media (max-width: 599px) {
[data-floatimg] :where(img.leftcontentimage, span.leftcontentimage,
img.rightcontentimage, span.rightcontentimage,
.float-left, .float-right) {
float: none;
margin: 0 0 1rem 0;
max-width: 100%;
}
}
/* 8) Safety */
[data-floatimg] img { max-width: 100%; height: auto; }
/* 9) Headings unter Floats beginnen (scoped) */
[data-floatimg] :where(h1,h2,h3,h4,h5,h6,
.heading1, .heading2, .heading3, .heading4, .heading5, .heading6) {
clear: both;
}
[data-floatimg] :where(.content-box > h3, .card-header, .card-footer) { clear: none; }
/* 10) Kompatibilitäts-Shim:
Überschreibt alte Theme-Regeln, die .contentimage/.leftcontentimage/.rightcontentimage
pauschal auf inline-block setzen. Der Scope + !important macht es zuverlässig. */
[data-floatimg] .contentimage,
[data-floatimg] .leftcontentimage,
[data-floatimg] .rightcontentimage {
display: block !important;
max-width: 100%;
height: auto;
}
/* ======================= Modul (4) GridBox === GridContainer mit GridBoxen ===
/* 31.12.2025 Modifikator cols-2 und cols-3-4
/* Für Floating auch die Selektoren in style.css beachten
Zwei Benutzerelemente anlegen:
grid_container = {VALUE}
grid_element =
grid_element_imgchange =
grid_element_plain =
Anwendung :
[grid_container={DESCRIPTION}|
[grid_element=Titel in Box 1|Kompletter Inhalt Box 1]
[grid_element=Titel in Box 2|Kompletter Inhalt Box 2]
[grid_element=Titel in Box n|Kompletter Inhalt Box n]
]
{DESCRIPTION} (opt.) kann zusätzliche Klassen für Containergestaltung bekommen
*/
:root{
--grid-content-wide: 1400px; /* Breite Grid Area */
--grid-box-wide: 280px; /* grid_box / grid_box_plain */
}
/* === grid-Container === */
.content-grid{
display: grid;
gap: 1.5rem; /* Abstand zwischen Boxen */
max-width: var(--grid-content-wide); /* maximale Breite */
margin-inline: auto; /* zentriert */
padding: 1rem;
/* Container Queries aktivieren */
container-type: inline-size;
/* === Steuer-Variablen === */
--col-min: var(--grid-box-wide, 280px); /* Karten-Mindestbreite */
--card-float-pct: 30%; /* Bildanteil neben Text */
--card-float-max: 14rem; /* obere Kappung */
/* === Spalten-Definition (nur EINMAL!) === */
grid-template-columns: repeat(
auto-fit,
minmax(var(--col-min), 1fr)
);
}
/* === grid-box ===
Element grid-box mit Überschrift, farbiger Markierung und Inhalt
Anwendung: [grid_element={DESCRIPTION}|{VALUE}]
{DESCRIPTION} Gridelement Überschrift H3
{VALUE} Grid-Inhalt
*/
.content-box {
position: relative;
background: #fff; /* später z. B. var(--clr-surface) */
border: 1px solid #ddd; /* dünner Rahmen in Entwicklungsphase */
border-radius: .5rem; /* abgerundete Ecken */
padding: 1.5rem;
box-shadow: 0 1px 3px rgba(0,0,0,.08);
transition: top .2s ease, box-shadow .2s ease;
top: 0;
}
/* Bilder in Boxen neutral behandeln */
.content-box img{
/* Kleine bilder zentrieren */
margin-inline: auto;
display:block;
max-width:100%;
height:auto;
border:none;
box-shadow:none;
border-radius:.35rem;
}
/* 1) Float-Bilder IN content-box: prozentual begrenzen */
.content-box img.leftcontentimage,
.content-box span.leftcontentimage {
float: left;
margin: .35em .9em .75em 0;
/* Bild nimmt max. 45% der Spaltenbreite, aber nie größer als 14rem */
/* NEU: prozentuale Steuerung + Kappung */
max-width: min(var(--card-float-pct, 40%), var(--card-float-max, 14rem));
}
.content-box img.rightcontentimage,
.content-box span.rightcontentimage {
float: right;
/* margin-weg
margin: .35em 0 .75em .9em;
*/
/* NEU: prozentuale Steuerung + Kappung */
max-width: min(var(--card-float-pct, 40%), var(--card-float-max, 14rem));
}
/* H3-Deko nur für echte Titel */
.content-box > h3{
font-size: 1.2rem;
font-weight: 600;
padding-left: .75rem;
border-left: 4px solid var(--clr-primary);
margin: 0 0 .75rem;
}
/* H3 ausblenden, wenn leer/whitespace → keine Deko-Linie */
.content-box > h3:empty { display:none; }
.content-box > h3:empty + * { margin-top: 0; } /* kein Extraluftloch */
.content-box:hover {
top: -4px; /* kleiner Versatz ohne transform */
box-shadow: 0 4px 10px rgba(0,0,0,.12);
}
/* === grid-box-plain ===
Element grid-box-plain über klasse .content-box-plain angesprochen
alle extras weggelassen
Alternative zu content-box Baseline – wirklich „plain“
grid_element_plain = {DESCRIPTION} {VALUE}
Anwendung : [grid_element_plain={DESCRIPTION}|{VALUE}]
*/
.content-box-plain{
background: transparent;
border: 0;
box-shadow: none;
padding: 0;
position: relative;
}
/* Falls versehentlich ein H3 gesetzt wird → nicht anzeigen */
.content-box-plain > h1,
.content-box-plain > h2,
.content-box-plain > h3 { display:none; }
/* Medien in der Plain-Box: full-bleed, ohne Rahmen/Schatten */
.content-box-plain img,
.content-box-plain picture,
.content-box-plain video{
display:block;
width:100%;
height:auto;
border:0;
box-shadow:none;
border-radius: 0; /* absolut flach */
}
.content-box .content-flow { display: flow-root; } /* sauberer Umfluss innerhalb der Karte */
/* Karte ist schmal → Bild nicht mehr floaten, volle Breite */
@container (max-width: 520px) {
.content-box img.leftcontentimage,
.content-box span.leftcontentimage,
.content-box img.rightcontentimage,
.content-box span.rightcontentimage {
float: none;
display: block;
max-width: 100%;
margin: 0 0 1rem 0; /* Bild oben, Text darunter */
}
}
/* ======================================
Modifier-Klassen für indiv. Gestaltung
=========================================*/
/* Querformat-Container: Cards dürfen nicht zu schmal werden */
.content-grid.one-column{
--col-min: 380px; /* so wählen, dass bei gewünschter Breite 2→1 kippt */
grid-template-columns: repeat(auto-fit, minmax(var(--col-min), 1fr));
}
/* Element-Boxen ohne Rand, ohjne Schatten */
.content-grid.randlos .content-box {
border: none;
box-shadow: none;
}
.content-grid.cols-2{
--col-min: 420px;
}
@container (max-width: 560px){
.content-grid.cols-2{
--col-min: 100%;
}
}
.content-grid.cols-3-4{
--col-min: 280px;
}
@container (max-width: 900px){
.content-grid.cols-3-4{
--col-min: 360px;
}
}
@container (max-width: 560px){
.content-grid.cols-3-4{
--col-min: 100%;
}
}
/* 1) Bild oben komplett ohne Abstand zu Rahmen; Inhalt darunter mit Abstand
WICHTIG! Bild (als LINK oder Normal) ist erstes Element; Auch kein WhiteSpace davor!
*/
.content-grid.cards-media-top .content-box {
padding: 0;
overflow: hidden; /* wichtig für runde Ecken */
}
/* 2. content-flow bekommt den Abstand, der für den Text gelten soll */
.content-grid.cards-media-top .content-box .content-flow {
padding: 0 1rem 1rem; /* links/rechts/unten Abstand für Text */
}
/* 3. Bild (oder Bild-Link) als erstes Kind "frisst" das Padding weg */
.content-grid.cards-media-top .content-box .content-flow > a.page:first-child,
.content-grid.cards-media-top .content-box .content-flow > img:first-child {
display: block;
/* globale 5px-Margin überschreiben */
margin: 0 -1rem 1rem; /* links/rechts negativ = bündig, unten = Abstand zum Text */
width: calc(100% + 2rem); /* gleicht die negativen Ränder aus */
max-width: none; /* OVERRIDET max-width:100% aus der Basisregel */
}
/* Sicherheit: img im Link selbst nicht wieder einengen */
.content-grid.cards-media-top .content-box .content-flow > a.page:first-child img {
display: block;
width: 100%;
height: auto;
margin: 0;
}
/* generell: innerhalb der Box kein extra Margin für Links */
.content-grid.cards-media-top .content-box a.page {
margin: 0;
}
/* =========================================================
2) SPEZIAL-ELEMENT: grid_element_imgchange für Vorher / Nachher Bilder
Klasse: .content-box-imgchange (ersetzt content-box)
Verwendet img:nth-of-type(2) für das Nachher-Bild
============================================================*/
/* 1. Container-Vorbereitung (Muss die Basis-Styles liefern) */
.content-box-imgchange {
position: relative;
padding: 0; /* Padding entfernen, damit das Bild bündig abschließt */
overflow: hidden;
/* Basis-Styling von content-box */
background: #fff;
border: 1px solid #ddd;
border-radius: .5rem;
box-shadow: 0 1px 3px rgba(0,0,0,.08);
transition: top .2s ease, box-shadow .2s ease;
top: 0;
min-height: 250px; /* Falls h3 leer ist */
}
/* 2. Style für den Bild-Wrapper (.image-wrapper-ba-auto) */
.content-box-imgchange .image-wrapper-ba-auto {
position: relative;
display: block;
width: 100%;
/* Höhe der Box definieren */
height: 350px;
}
/* 3. Basis-Style für ALLE Bilder im Wrapper (Bild 1 und Bild 2) */
.content-box-imgchange .image-wrapper-ba-auto img {
/* Beide Bilder absolut positionieren, damit sie sich überlappen */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
margin: 0;
border-radius: 0;
z-index: 1; /* Standard-Z-Index */
}
/* 4. SPEZIAL: Das ZWEITE Bild als "After-Image" behandeln */
.content-box-imgchange .image-wrapper-ba-auto img:nth-of-type(2) {
z-index: 2; /* Liegt über dem Vorher-Bild */
transform: translateX(100%); /* Startet außerhalb des Sichtbereichs */
transition: transform 0.4s ease-in-out; /* Fügt Animation hinzu */
}
/* 5. HOVER-Effekt: Das "Nachher"-Bild einblenden */
.content-box-imgchange:hover .image-wrapper-ba-auto img:nth-of-type(2) {
transform: translateX(0%);
}
/* 6. Überschrift: Abstand zum Bild korrigieren */
.content-box-imgchange > h3 {
/* Stellt Padding wieder her und dient als Platzhalter über dem Bild */
padding: 1.5rem 1.5rem 0.5rem 1.5rem;
border-left: 4px solid var(--clr-primary);
margin: 0;
}
/* =========================================================
GridBox Modifikator: artikel-karte
- Bildslot (gleich hoch) + schmaler Rand
- Tabelle am unteren Rand
Voraussetzung: Produktbild ist erstes Element in .content-flow
========================================================= */
.content-grid.artikel-karte .content-box{
/* Karte muss "strecken", damit Flex-Push nach unten sicher funktioniert */
display: flex;
flex-direction: column;
height: 100%;
}
/* Flow wird zum vertikalen Layout-Stack */
.content-grid.artikel-karte .content-box > .content-flow{
display: flex;
flex-direction: column;
gap: .75rem; /* Abstand zwischen Bild, Headline, Tabelle */
flex: 1 1 auto;
min-height: 0;
}
/* --- Bild/Link als Media-Slot behandeln (robust gegen Whitespace) --- */
/* 1) Bild ist direkt im Flow (kein Link) */
.content-grid.artikel-karte .content-box > .content-flow > img.contentimage:first-of-type{
display: block;
width: 100%;
aspect-ratio: 22 / 18;
border: 1px solid #ddd;
border-radius: .35rem;
padding: .25rem;
background: #fff;
box-sizing: border-box;
object-fit: cover;
object-position: center;
max-width: none;
margin: 0;
box-shadow: none;
}
/* 2) Bild steckt im Link (klassisch oder Overlay): Slot muss auf dem Link liegen */
.content-grid.artikel-karte .content-box > .content-flow > a.page:first-of-type,
.content-grid.artikel-karte .content-box > .content-flow > a.mz-overlay-open:first-of-type{
display: block;
width: 100%;
aspect-ratio: 22 / 18;
overflow: hidden;
border: 1px solid #ddd;
border-radius: .35rem;
padding: .25rem;
background: #fff;
box-sizing: border-box;
text-decoration: none;
}
.content-grid.artikel-karte .content-box > .content-flow > a.page:first-of-type > img.contentimage,
.content-grid.artikel-karte .content-box > .content-flow > a.mz-overlay-open:first-of-type > img.contentimage{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
max-width: none;
margin: 0;
border: 0;
box-shadow: none;
border-radius: 0;
}
/* Optional:
nach Bild/Link entfernen */
.content-grid.artikel-karte .content-box > .content-flow > br:first-of-type{
display: none;
}
/* --- Tabelle nach unten: greift auf deinen uni_tabelle-Wrapper (z.B. .tab-clean) --- */
.content-grid.artikel-karte .content-box > .content-flow > .tab-clean {
margin-top: auto; /* drückt den Tabellenblock nach unten */
}
.content-grid.artikel-karte .content-box > .content-flow > .tab-klassik {
margin-top: auto; /* drückt den Tabellenblock nach unten */
}
.content-grid.artikel-karte .content-box > .content-flow > .tab-kompakt {
margin-top: auto; /* drückt den Tabellenblock nach unten */
}
.content-grid.artikel-karte .content-box > .content-flow > .tab-karten {
margin-top: auto; /* drückt den Tabellenblock nach unten */
}
.content-grid.artikel-karte .content-box > .content-flow > .tab-contrast {
margin-top: auto; /* drückt den Tabellenblock nach unten */
}
.content-grid.artikel-karte .content-box > .content-flow > .tab-schmal {
margin-top: auto; /* drückt den Tabellenblock nach unten */
}
/* Falls du mehrere Tabellen-Wrapper-Klassen nutzt, kannst du das so erweitern:
.content-grid.artikel-karte .content-box > .content-flow > .tab-clean,
.content-grid.artikel-karte .content-box > .content-flow > .tab-xyz,
.content-grid.artikel-karte .content-box > .content-flow > .uni_tabelle {
margin-top: auto;
}
*/
/* =================== Modul (5) HoverBox ============================
/* 02.01.2026 Fokus Bild bei ext. Link aufheben */
/* Bild als Link, Hover bringt darüber Overlay-Text
benötigt own-js.js */
/* Box-Container Element [hover_container] */
.hover-box {
position: relative;
display: inline-block;
overflow: hidden; /* nichts ragt heraus */
cursor: pointer;
text-decoration: none; /* Link-Unterstrich entfernen */
touch-action: manipulation; /* kein DoubleTap-Zoom auf Touch-Geräten */
/* outline NICHT global entfernen; wir liefern unten einen Fokus-Ring */
}
/* Link im Hover-Container als Block + Bezugspunkt */
.hover-box > a {
display: block;
position: relative;
text-decoration: none;
}
/* Bild im/unter der Box (robust, egal ob in oder direktes Kind) */
.hover-box img {
display: block; /* vermeidet Lücke unter dem Bild */
width: 100%;
height: auto;
}
/* Overlay-Container Element [hover_inhalt]
mit Überblendtext (robust gegen Reset/Fremd-CSS) */
.hover-box .ovl,
.hover-box > a > .ovl {
position: absolute !important; /* sichert gegen globale span-Regeln */
inset: 0 !important; /* füllt die ganze Box aus */
display: flex !important;
align-items: center;
justify-content: center;
background: rgba(0,0,0,.6); /* halbtransparentes Schwarz */
color: #fff;
font: 700 1rem/1.2 system-ui;
text-align: center;
padding: 1em;
opacity: 0; /* unsichtbar, bis Hover/Fokus/Aktiv */
transition: opacity .3s;
pointer-events: none; /* Klick geht immer an */
border-radius: inherit; /* folgt der Box, falls dort Radius gesetzt ist */
}
/* Overlay: nur Hover (Desktop), Touch über .touched (Mobile), Tastatur über :focus-visible */
.hover-box:hover .ovl,
.hover-box.touched .ovl,
.hover-box > a:focus-visible .ovl {
opacity: 1;
}
/* optional: :active-Regel verhindert kurzen Flash beim ersten Tap */
.hover-box:active .ovl {
opacity: 0;
}
/* Deutlicher Fokus-Ring (Keyboard) */
.hover-box > a:focus-visible::after {
content: "";
position: absolute;
inset: 0;
box-shadow: 0 0 0 3px rgba(255,255,255,.8);
border-radius: inherit;
pointer-events: none;
}
/* Modifikation der Gestaltung über zusätuzliche Klassen */
/* 1. Größerer, prominenter Text */
.hover-box.hover-big .ovl {
font-size: 1.5rem;
line-height: 1.3;
letter-spacing: 0.03em;
text-transform: none; /* oder uppercase, wenn gewünscht */
}
/* 2. Links ausgerichteter Overlay-Text mit etwas Abstand */
.hover-box.hover-left .ovl {
justify-content: flex-start; /* horizontal */
align-items: flex-start; /* vertikal oben */
text-align: left;
padding: 1.2em 1.4em;
}
/* optional: leicht andere Typografie für Fließtext */
.hover-box.hover-left .ovl {
font-weight: 500;
line-height: 1.5;
}
/* 3. Helles Overlay mit blauem Text */
.hover-box.hover-soft-blue .ovl {
background: rgba(255, 255, 255, 0.85); /* helles Overlay */
color: #0b4f6c; /* gedecktes Blau */
}
/* optional: zarter Rahmen für mehr Struktur */
.hover-box.hover-soft-blue .ovl {
box-shadow: inset 0 0 0 1px rgba(11,79,108,0.25);
}
/* =========================== Modul (6) LinkBox ============================
/* Container – Bezugsfläche für die Klickfläche */
.linked-box {
max-width: 30em;
padding: 1em;
position: relative; /* wichtig für absolut positionierte Pseudo-Elemente */
border: thin solid;
overflow: visible; /* falls etwas herausragt */
transition: transform 0.2s ease; /* für den Zoom-Effekt */
}
/* Link-Optik */
.linked-box a {
color: hsl(20 80% 40%);
text-decoration: none;
}
/* Hover/Fokus-Optik */
.linked-box a:focus,
.linked-box a:hover {
color: inherit;
background: hsl(20 80% 90%);
outline: none;
}
/* Klickfläche über gesamte Box legen */
.linked-box a::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0; /* füllt komplette .linked-box */
z-index: 1; /* liegt VOR dem normalen Boxinhalt */
background: transparent; /* unsichtbar, nur Klickfang */
}
/* Hover-Zoom am gesamten Container */
.linked-box:hover {
transform: scale(1.03);
}
/* Falls in der Box andere Elemente sind, nicht über die Klickfläche legen */
.linked-box > *:not(a) {
position: relative;
z-index: 0;
}
/* ==================== Modul (7) NewsBox ===================================
NewsBox – robuste, modulare CSS-Version
Funktioniert mit und ohne JavaScript.
Mit JS: Merkt sich "geschlossen" pro Seite oder global.
Ohne JS: Schließen gilt nur bis Seitenreload.
HTML-Grundstruktur:
==================================================================
*/
/* --- Bezugssystem für Sticky-Variante: Content-Container --- */
#content,
main,
.content {
position: relative; /* nötig für position:sticky */
}
/* --- Standard-Variablen für Maße, Position, Z-Index --- */
:root {
--nb-width: 320px; /* Box-Breite */
--nb-max-height: 250px; /* Max. Inhaltshöhe */
--nb-offset-top: 3.5rem; /* Abstand von oben beim Kleben */
--nb-offset-right: 5.5rem; /* Abstand vom rechten Rand */
--nb-z: 5000; /* Über dem Content, unter Overlays */
/* Moderne Glas-Optik */
--nb-bg-opacity: 0.88;
--nb-blur: 10px;
--nb-radius: 12px;
--nb-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
/* ------------------------------------------
ANKER - Jetzt als fixer Bezugspunkt
------------------------------------------ */
.nb-anchor {
position: fixed;
top: var(--nb-offset-top);
right: 0; /* Anker rechts ausrichten */
width: 0; /* Anker selbst braucht keine Breite */
height: 0;
z-index: var(--nb-z);
pointer-events: none;
}
/* Spezialfall: Fixierte Position am Viewport (optional nutzbar via Klasse) */
.nb-anchor.fixed {
position: fixed;
right: 0;
width: 100%;
}
/* ------------------------------------------
NEWSBOX - Schwebt nun immer an der Stelle
------------------------------------------ */
.nb-anchor .newsbox {
position: absolute;
right: var(--nb-offset-right);
top: 0;
width: var(--nb-width);
min-height: 50px;
padding: 1.25rem;
box-sizing: border-box;
/* Deine Optik */
background: var(--nb-bg, rgba(255, 255, 255, var(--nb-bg-opacity)));
backdrop-filter: blur(var(--nb-blur));
-webkit-backdrop-filter: blur(var(--nb-blur));
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: var(--nb-radius);
color: var(--nb-color, #222);
box-shadow: var(--nb-shadow);
pointer-events: auto;
transform-origin: top right;
animation: nb-fade 0.4s ease-out;
transition: all 0.25s ease;
}
/* Hover-Effekt nur, wenn Klasse .bx-hover gesetzt ist */
.nb-anchor.bx-hover .newsbox:hover {
transform: scale(var(--nb-scale-hover, 1.04));
box-shadow: var(--nb-shadow-hover, 0 0.75rem 1.5rem rgba(0,0,0,.55));
}
/* --- Ein-/Ausblenden ohne JS über Checkbox --- */
.nb-anchor #nb-toggle:checked + .newsbox {
display: none !important;
}
/* --- Inhalt der Box --- */
.newsbox__content {
max-height: var(--nb-max-height);
overflow-y: auto;
overflow-x: hidden;
box-sizing: border-box;
}
/* ------------------------------------------
Schließen-Button
------------------------------------------ */
.nb-anchor .newsbox__close {
position: absolute;
top: -0.55rem; /* jetzt in rem, nicht em */
right: -0.55rem;
width: 2rem;
height: 2rem;
line-height: 2rem;
text-align: center;
font-weight: bold;
font-size: 1rem;
cursor: pointer;
background: #fff;
color: #222;
border: 1px solid currentColor;
border-radius: 50%;
box-shadow: 0 0 0.25rem rgba(0,0,0,.2);
transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.nb-anchor .newsbox__close::before {
content: "×";
}
.nb-anchor .newsbox__close:hover,
.nb-anchor .newsbox__close:focus-visible {
background: #d32f2f;
color: #fff;
box-shadow: 0 0 0 3px rgba(0,0,0,.25);
}
/* ---------------------------------------------------------
FARB-VARIANTEN (Sicher benannt, um Konflikte zu vermeiden)
------------------------------------------------------------ */
/* --- Gemeinsame Basis für alle Glass-Boxen --- */
.nb-anchor.bx-gruen,
.nb-anchor.bx-gelb,
.nb-anchor.bx-blau {
--nb-blur: 12px;
--nb-bg-opacity: 0.75;
}
/* GRÜN (Success) */
.nb-anchor.bx-gruen {
--nb-bg: rgba(76, 175, 80, var(--nb-bg-opacity));
--nb-color: #ffffff;
--nb-border: rgba(255, 255, 255, 0.4);
}
/* GELB (Warnung) */
.nb-anchor.bx-gelb {
--nb-bg: rgba(255, 193, 7, var(--nb-bg-opacity));
--nb-color: #222;
--nb-border: rgba(0, 0, 0, 0.1);
}
/* BLAU (Info) */
.nb-anchor.bx-blau {
--nb-bg: rgba(33, 150, 243, var(--nb-bg-opacity));
--nb-color: #ffffff;
--nb-border: rgba(255, 255, 255, 0.4);
}
/* Zuweisung der Variablen an die Box */
.nb-anchor.bx-gruen .newsbox,
.nb-anchor.bx-gelb .newsbox,
.nb-anchor.bx-blau .newsbox {
background-color: var(--nb-bg) !important;
color: var(--nb-color) !important;
border-color: var(--nb-border) !important;
backdrop-filter: blur(var(--nb-blur));
-webkit-backdrop-filter: blur(var(--nb-blur));
}
/* Falls Links in der grünen/blauen Box sind: weiß färben */
.nb-anchor.bx-gruen .newsbox a,
.nb-anchor.bx-blau .newsbox a {
color: #fff;
text-decoration: underline;
}
/* ------------------------------------------
Animation Keyframes
------------------------------------------ */
@keyframes nb-fade {
from { opacity: 0; transform: translateY(-0.25rem); }
to { opacity: 1; transform: translateY(0); }
}
/* ------------------------------------------
RESPONSIVE - Optimierung für Smartphones
------------------------------------------ */
@media (max-width: 600px) {
:root {
--nb-width: 100%;
--nb-radius: 0;
}
.nb-anchor {
top: auto !important; /* Wichtig: Top explizit ausschalten */
bottom: 0 !important; /* Unten fixieren */
right: 0;
left: 0;
width: 100%;
height: auto; /* Auf Mobile darf der Anker Platz einnehmen */
display: block;
}
.nb-anchor .newsbox {
position: relative; /* Aus dem absoluten Fluss raus */
right: 0 !important;
top: auto !important;
bottom: 0 !important;
width: 100%;
margin: 0;
/* Design-Anpassung */
border-radius: 15px 15px 0 0;
border-left: none;
border-right: none;
border-bottom: none;
box-shadow: 0 -5px 25px rgba(0,0,0,0.2);
/* Animation von unten */
transform: translateY(0);
animation: nb-slide-up 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Schließen-Button auf Mobile etwas nach innen rücken */
.nb-anchor .newsbox__close {
top: 10px;
right: 15px;
}
}
/* Die neue Animation für das Hochgleiten */
@keyframes nb-slide-up {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* ================= Modul (8) Raster-Box (universell) === */
/* verteilt Kacheln / Elemente in einer Box */
/* Benutzerelemente anlegen
raster_container = {VALUE}
raster_element = {VALUE}
=== Anwendung ===
1. Umspannender Container
raster_container = {VALUE}
Für {DESCRIPTION} Klassenname; Container separat stylbar
- vorgeschlagene Namenskonvention: grid_name1, grid_name2
- Standardklasse .raster_grid immer da
Für VALUE entweder [raster_element|] oder [raster_bild|]
2. Rasterkachel = Element
raster_element = {VALUE}
Für {DESCRIPTION} Klassenname; jede Kachel separat stylbar
- vorgeschlagene Namenskonvention: cell_name1, cell_name2
- Standardklasse .raster_cell immer da
Für VALUE beliebiges Element; falls Bild, dann kein ALT möglich
(Ausnahme: modifizierte syntax.php [bild|bild.jpg|alt=Text])
3. Sonderfall - nur Bild ==> NICHT BENUTZEN!
raster_bild =
VALUE nur Bilddatei
DESCRIPTION Alt-Atribut
*/
.raster-grid {
/* Defaults – pro Container überschreibbar */
--r-w: 180px; /* Elementbreite */
--r-h: 80px; /* Elementhöhe */
--r-gap: 25px; /* Elementabstand */
--cell-bg: beige; /* Elementhintergrund */
display: flex;
flex-wrap: wrap;
gap: var(--r-gap);
justify-content: center; /* <-- horizontal zentriert */
/* optional: */
/* align-content: center; /* vertikal zentriert, falls genug Höhe vorhanden */
}
/* Jede Kachel: feste Fläche, zentriert */
.raster-cell {
/* Fallback (physisch) */
width: var(--r-w);
height: var(--r-h);
/* Logisch (überschreibt nur, wenn unterstützt – gleicher Wert, also unkritisch) */
inline-size: var(--r-w);
block-size: var(--r-h);
display: grid;
place-items: center;
box-sizing: border-box;
background-color: var(--cell-bg);
}
/* Bilder/SVGs passen sich ein, ohne hochzuskalieren */
.raster-cell > img,
.raster-cell > svg {
width: 100%;
height: 100%;
object-fit: scale-down; /* skaliert nur nach unten, NIE nach oben */
object-position: center;
display: block;
}
/* Inhalte (Links/Buttons) sollen die Zelle ausfüllen & zentrieren */
.raster-cell > a,
.raster-cell > button {
display: grid;
place-items: center;
inline-size: 100%;
block-size: 100%;
text-decoration: none;
color: inherit;
}
/* Ab hier Klassen für individuelle Gestaltung .raster_grid
Namenskonvention: grid_name1, grid_name2 */
/* ===========================
Grid-Varianten (Container)
=========================== */
/* kompakter: kleinere Slots + geringerer Abstand */
.raster-grid.grid-sm {
--r-w: 100px;
--r-h: 40px;
--r-gap: 8px;
}
/* großzügiger: größere Slots + mehr Abstand */
.raster-grid.grid-lg {
--r-w: 220px;
--r-h: 100px;
--r-gap: 30px;
}
/* enger zusammenrücken, Slotgröße bleibt */
.raster-grid.grid-tight {
--r-gap: 8px;
}
/* linksbündig statt zentriert */
.raster-grid.grid-left {
justify-content: flex-start;
}
/* Container dunkel – wirkt auf alle Zellen via --cell-bg */
.raster-grid.grid-dark {
--cell-bg: #1f2937; /* dunkles Grau (Tailwind: slate-800) */
color: #f3f4f6; /* heller Text (slate-100) */
}
/* Ab hier Klassen für individuelle Gestaltung .raster_cell
Namenskonvention: cell_name1, cell_name2 */
/* ===========================
Cell-Varianten (Kacheln)
=========================== */
/* transparenter Hintergrund (z. B. für Logos auf farbiger Fläche) */
.raster-cell.cell-ghost {
background: transparent;
}
/* feine Kontur */
.raster-cell.cell-outline {
border: 1px solid #ddd;
}
/* abgerundet, Inhalte bleiben sauber beschnitten */
.raster-cell.cell-rounded {
border-radius: 12px;
overflow: hidden;
}
/* leichte Schattenkarte */
.raster-cell.cell-shadow {
box-shadow: 0 2px 5px rgba(0,0,0,.08);
}
/* etwas Innenabstand (nützlich für Text/Icons/Kombis) */
.raster-cell.cell-tight {
padding: 5px;
}
/* dezenter Hover-Lift (optional kombinierbar mit .cell-shadow) */
.raster-cell.cell-hover {
transition: transform .15s ease, box-shadow .15s ease;
}
.raster-cell.cell-hover:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
/* Einzelne Kachel dunkel (falls du nur manche dunkel willst) */
.raster-cell.cell-dark {
background: #1f2937;
color: #f3f4f6;
border: 1px solid rgba(255,255,255,.12);
}
/* Helle Kachel (z. B. für dunkle Logos auf Dark-Grid) */
.raster-cell.cell-light {
background: #ffffff;
color: #111827;
border: 1px solid #e5e7eb;
}
/* Dezente Hover-Optik auf dunklem Grund */
.raster-cell.cell-dark.cell-hover:hover,
.raster-grid.grid-dark .raster-cell.cell-hover:hover {
box-shadow: 0 6px 16px rgba(0,0,0,.35);
transform: translateY(-2px);
}
/* =========================================
RasterBox Modifier: Media Strip (Logos / Icons)
- N Elemente (3–7 typisch), gleichmäßig verteilt
- einheitliche Mindesthöhe pro Zeile
- Inhalte vertikal + horizontal zentriert
- Medien skalieren nur nach unten (contain)
========================================= */
/* =========================================
RasterBox Modifier: Media Strip (Logos / Icons)
========================================= */
.raster-grid.media-strip > br{ display: none; }
.raster-grid.media-strip{
--gap: 1.25rem;
--min-col: 7rem;
--row-h: clamp(56px, 8vw, 96px);
display: grid;
gap: var(--gap);
grid-template-columns: repeat(auto-fit, minmax(var(--min-col), 1fr));
grid-auto-rows: minmax(var(--row-h), auto);
align-items: stretch;
}
/* Zellen: div UND a identisch behandeln */
.raster-grid.media-strip > :is(div.raster-cell, a.raster-cell){
/* WICHTIG: RasterBox-Fixmaße neutralisieren */
width: auto;
height: auto;
inline-size: auto;
block-size: auto;
min-block-size: var(--row-h);
min-inline-size: 0;
background: transparent;
padding: .25rem;
box-sizing: border-box;
display: grid;
place-items: center;
}
/* Link-Zelle: typische Link-Effekte neutralisieren */
.raster-grid.media-strip > a.raster-cell{
text-decoration: none;
line-height: 0;
}
/* Medien */
.raster-grid.media-strip :is(img, svg){
display: block;
margin: 0;
max-inline-size: 100%;
max-block-size: 100%;
inline-size: auto;
block-size: auto;
object-fit: contain;
}
/* Optional: auf sehr kleinen Screens Logos etwas kleiner */
@media (max-width: 600px) {
.raster-grid {
--r-w: 140px;
--r-h: 60px;
--r-gap: 16px;
}
}
/* =================== Modul (9) ScrollTop =================================
Scroll To Top — Modul-CSS
Installation:
1) own-js.js einbinden (defer)
2) Diese Datei in style.css importieren: @import url("scroll-top.css");
3) HTML-Element (z. B. nach ):
4) Optional in style.css:
html { scroll-behavior: smooth; }
*/
/* Grundzustand: unsichtbar und nicht fokussierbar */
#scrollTopBtn {
position: fixed;
right: 2.5rem;
bottom: 2rem;
z-index: 90;
font-size: 32px;
line-height: 1;
min-width: 44px; /* bessere Touch-Zielgröße */
min-height: 44px;
border: none;
padding: 6px 10px;
border-radius: var(--ecke-rund);
cursor: pointer;
background: rgba(255,255,255,.65);
color: var(--clr-primary-dark);
opacity: 0;
visibility: hidden; /* verhindert Fokus im versteckten Zustand */
transform: translateY(20px);
transition: opacity .3s, transform .3s;
pointer-events: none;
}
/* Sichtbar, sobald own-js.js die Klasse .show setzt */
#scrollTopBtn.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
/* Hover-Feedback */
#scrollTopBtn:hover {
background: rgba(255,255,255,.85);
}
/* Tastaturfokus klar anzeigen */
#scrollTopBtn:focus-visible {
outline: 2px solid var(--clr-primary);
outline-offset: 2px;
}
/* ================ Modul (10) TableBox === Defaults (unverändert) ===
... in style.css ... */
/* === Varianten: immer NACH den Defaults platzieren === */
/*
1. tab-klassik Standard
2. tab-kompakt Zeilenhöhe, Schrift, kein Schatten
3. tab-karten Zellen wie Button, keine vert. Trennlinien
4. tab-contrast titel farbig
5- tab-clean nur Trennlinie unter titel
6- tab-schmal soo breit, wie Inhalt, zentriert
*/
/* 1) Klassik – feinere Linien, leichte Zebraoptik behalten */
.tab-klassik table.contenttable {
border: 1px solid #cbd5e1;
box-shadow: 0 2px 5px rgba(0,0,0,0.08);
background: #fff;
}
.tab-klassik th.contenttable {
background: linear-gradient(to bottom, #f9fafb, #e5e7eb);
color: #111827;
font-weight: 700;
border: 1px solid #d1d5db;
}
.tab-klassik td.contenttable1 { background: #ffffff; }
.tab-klassik td.contenttable2 { background: #f3f4f6; }
/* 2) Kompakt – weniger Padding, kleinere Schrift, kein Shadow */
.tab-kompakt table.contenttable {
box-shadow: none;
border: 1px solid #e5e7eb;
border-radius: .25rem;
}
.tab-kompakt th.contenttable,
.tab-kompakt td.contenttable1,
.tab-kompakt td.contenttable2 {
padding: .25rem .4rem;
font-size: 0.9rem;
line-height: 1.2;
}
.tab-kompakt th.contenttable {
background: #f4f4f5;
color: #333;
text-transform: none;
}
/* 3) Kartenstil – Zeilen wie Karten, keine vert. Linien */
.tab-karten table.contenttable {
border: none;
border-collapse: separate;
border-spacing: 0 8px;
background: transparent;
box-shadow: none;
}
.tab-karten thead th.contenttable {
background: transparent;
border: none;
font-size: .9rem;
text-transform: uppercase;
letter-spacing: .03em;
padding-bottom: .25rem;
}
.tab-karten tbody td.contenttable1,
.tab-karten tbody td.contenttable2 {
background: #fff;
border: 1px solid #e5e7eb;
}
.tab-karten tbody tr {
border-radius: .75rem;
box-shadow: 0 2px 4px rgba(0,0,0,.06);
overflow: hidden;
}
.tab-karten tbody tr td:first-child {
border-top-left-radius: .75rem;
border-bottom-left-radius: .75rem;
}
.tab-karten tbody tr td:last-child {
border-top-right-radius: .75rem;
border-bottom-right-radius: .75rem;
}
/* Bonus: High-Contrast Variante */
.tab-kontrast table.contenttable {
border-color: #1f2937;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.tab-kontrast th.contenttable {
background: #1f2937;
color: #fff;
border-color: #1f2937;
}
.tab-kontrast td.contenttable1,
.tab-kontrast td.contenttable2 {
border-color: #d1d5db;
color: #111827;
}
/* === Variante: CLEAN – rahmenlos, nur Kopftrennlinie === */
.tab-clean table.contenttable {
border: none;
border-collapse: collapse;
width: 100%;
background: transparent;
box-shadow: none;
}
.tab-clean th.contenttable {
border: none;
border-bottom: 2px solid #e5e7eb; /* nur Trennlinie unter Header */
background: transparent;
color: #111827;
text-align: center; /* zentriert */
padding: .6rem .75rem;
font-weight: 600;
}
.tab-clean td.contenttable1,
.tab-clean td.contenttable2 {
border: none;
background: transparent;
text-align: center; /* zentriert */
padding: .5rem .75rem;
color: #374151;
}
.tab-clean tr:nth-child(even) td {
background: #f9fafb; /* optional: zartes Zebra */
}
.tab-clean tr:hover td {
background: #f3f4f6; /* leichtes Hover-Feedback */
}
/* === Variante: SCHMAL – kompakt, spaltenbasiert, Kopf zentriert, Inhalt links === */
.tab-schmal table.contenttable {
width: auto; /* nur so breit wie nötig */
border-collapse: collapse;
border: 1px solid #e5e7eb;
border-radius: .25rem;
box-shadow: none;
margin: 0 auto; /* zentriert die gesamte Tabelle im Container */
}
.tab-schmal th.contenttable {
text-align: center; /* Kopf zentriert */
white-space: nowrap; /* Kopfzeilen bleiben in einer Zeile */
padding: .35rem .6rem;
font-size: .9rem;
background: #f3f4f6;
border: 1px solid #e5e7eb;
font-weight: 600;
}
.tab-schmal td.contenttable1,
.tab-schmal td.contenttable2 {
text-align: left; /* Inhalt linksbündig */
padding: .3rem .6rem;
border: 1px solid #e5e7eb;
font-size: .9rem;
white-space: nowrap; /* verhindert Umbrüche */
}
.tab-schmal td.contenttable1 { background: #ffffff; }
.tab-schmal td.contenttable2 { background: #f9fafb; }
/* Optional: kleine Hover-Wirkung */
.tab-schmal tbody tr:hover td {
background: #f3f4f6;
}
/* === Variante: KOMPAKTFIT v2 – Caps je Spalte, Tabelle schrumpft, responsive === */
.tab-kompaktfit table.contenttable{
/* verhindert 100%-Breite */
display: inline-table; /* shrink-to-fit, bleibt linksbündig */
width: auto !important; /* überschreibt den 100%-Default sicher */
table-layout: auto;
border: 1px solid #e5e7eb;
border-radius: .25rem;
box-shadow: none;
}
/* Kopf zentriert, darf umbrechen */
.tab-kompaktfit thead th.contenttable{
text-align: center;
font-weight: 600;
font-size: .9rem;
padding: .35rem .6rem;
background: #f3f4f6;
border: 1px solid #e5e7eb;
white-space: normal;
overflow-wrap: break-word;
word-break: normal;
hyphens: auto;
}
/* Zellen links, Umbruch erlaubt */
.tab-kompaktfit td.contenttable1,
.tab-kompaktfit td.contenttable2{
text-align: left;
padding: .3rem .6rem;
font-size: .9rem;
border: 1px solid #e5e7eb;
white-space: normal;
overflow-wrap: break-word;
word-break: normal;
hyphens: auto;
}
.tab-kompaktfit td.contenttable1{ background: #fff; }
.tab-kompaktfit td.contenttable2{ background: #f9fafb; }
/* --- Spalten-"Maximalbreiten" per CSS-Variablen (in ch – ca. Zeichenbreite) --- */
/* Default-Caps (kannst du im Wrapper überschreiben) */
.tab-kompaktfit{
--col-1: 16ch;
--col-2: 24ch;
--col-3: 20ch;
/* mehr Spalten? einfach ergänzen */
}
/* Caps anwenden – Zellen dürfen schmaler werden (wrap), aber nicht breiter als Cap */
.tab-kompaktfit thead th.contenttable:nth-child(1),
.tab-kompaktfit tbody td:nth-child(1){ max-inline-size: var(--col-1); }
.tab-kompaktfit thead th.contenttable:nth-child(2),
.tab-kompaktfit tbody td:nth-child(2){ max-inline-size: var(--col-2); }
.tab-kompaktfit thead th.contenttable:nth-child(3),
.tab-kompaktfit tbody td:nth-child(3){ max-inline-size: var(--col-3); }
/* Optional: kleines Hover-Feedback */
.tab-kompaktfit tbody tr:hover td{ background: #f3f4f6; }
/* --- Responsive: bei sehr schmalen Screens Caps lockern oder entfernen --- */
@media (max-width: 520px){
.tab-kompaktfit{
--col-1: 10ch;
--col-2: 12ch;
--col-3: 10ch;
}
}
@media (max-width: 400px){
/* ganz frei lassen, wenn’s extrem eng wird */
.tab-kompaktfit thead th.contenttable,
.tab-kompaktfit tbody td{ max-inline-size: none; }
}
@media (max-width: 640px) {
.tab-responsive table.contenttable thead {
display: none;
}
.tab-responsive table.contenttable,
.tab-responsive tbody,
.tab-responsive tr,
.tab-responsive td {
display: block;
width: 100%;
}
.tab-responsive tbody tr {
margin-bottom: .75rem;
border: 1px solid #e5e7eb;
border-radius: .5rem;
box-shadow: 0 1px 3px rgba(0,0,0,.05);
overflow: hidden;
}
.tab-responsive td.contenttable1,
.tab-responsive td.contenttable2 {
position: relative;
padding-left: 7rem;
text-align: left;
}
.tab-responsive td::before {
content: attr(data-label);
position: absolute;
left: .75rem;
top: .5rem;
font-weight: 600;
opacity: .6;
}
}
/* ======================== Modul (11) ImagechangeBox ============================
MODUL: Vorher / Nachher - Final & Universell (vn_ Namespace)
Anwendung: [change_img=MODIFIKATOR-KLASSE|
]
============================================================*/
:root {
/* -- Steuerung des Aussehens über CSS-Variablen -- */
/* Breite und Höhe als Standard; über Modifikatoren passend deklarieren */
--vn-max-width: 900px; /* 900px Maximale Breite des gesamten Elements */
--vn-height: 400px; /* 400px Feste Höhe für das Bild (wichtig für die absolute Positionierung) */
--vn-transition: 0.4s ease-in-out; /* Übergangsgeschwindigkeit */
--vn-radius: 8px; /* Abrundung der Ecken */
--vn-box-shadow: 0 4px 10px rgba(0,0,0,0.12);
--vn-bg-color: #fff;
--vn-border-color: #ddd;
}
/* 1. Äußerer Container (Breite, Ränder und Styling) */
.vn_change_img_container {
max-width: var(--vn-max-width);
margin: 2rem auto; /* Zentriert das Element */
background: var(--vn-bg-color);
border: 1px solid var(--vn-border-color);
border-radius: var(--vn-radius);
box-shadow: var(--vn-box-shadow);
padding: 0; /* Wichtig, damit das Bild bündig abschließt */
overflow: hidden; /* Muss hier sein, um die Abrundung zu sehen */
position: relative; /* Für eventuelle zukünftige Overlays */
}
/* Optionaler Hover-Effekt für die gesamte Box */
.vn_change_img_container:hover {
/* Sie können hier z.B. einen kleinen Versatz oder stärkeren Schatten einfügen */
}
/* 2. Bild-Wrapper: Definiert den Clipping-Bereich */
.vn_change_img_container .vn_image_wrapper {
position: relative;
display: block;
width: 100%;
height: var(--vn-height); /* Setzt die feste Höhe */
overflow: hidden; /* Wichtig für den Slide-Effekt */
}
/* 3. Basis-Style für ALLE Bilder im Wrapper (Bild 1 und Bild 2) */
/* Wichtig: Positionierung auf 'absolute' für Überlappung */
.vn_change_img_container .vn_image_wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
margin: 0;
border-radius: 0;
z-index: 1;
}
/* 4. SPEZIAL: Das ZWEITE Bild als "After-Image" behandeln */
.vn_change_img_container .vn_image_wrapper img:nth-of-type(2) {
z-index: 2;
transform: translateX(100%); /* Startposition: Aus dem Sichtfeld geschoben */
transition: transform var(--vn-transition);
}
/* 5. HOVER-Effekt: Bild einblenden */
.vn_change_img_container:hover .vn_image_wrapper img:nth-of-type(2) {
transform: translateX(0%); /* Endposition: Im Sichtfeld */
}
/* =====================================
Modifikatoren-Klassen
========================================*/
/* 1. Default: Cropping-Variante; Höhe aus root-Variable --vn-height */
.vn_change_img_container.vn-ci--crop .vn_image_wrapper {
height: var(--vn-height, 400px);
}
/* Bilder mittig ausrichten */
.vn_change_img_container.vn-ci--crop .vn_image_wrapper img {
object-fit: cover;
object-position: center center;
}
/* 2. Allgemein: Wrapper-Höhe per Aspect Ratio steuern */
.vn_change_img_container[class*="vn-ci--ratio"] .vn_image_wrapper {
height: auto;
aspect-ratio: var(--vn-aspect-ratio, 16 / 9);
}
/* Beispiel-Modifier */
.vn_change_img_container.vn-ci--ratio-16-9 {
--vn-aspect-ratio: 16 / 9;
}
.vn_change_img_container.vn-ci--ratio-4-3 {
--vn-aspect-ratio: 4 / 3;
}
/* Bilder bleiben wie gehabt */
.vn_change_img_container[class*="vn-ci--ratio"] .vn_image_wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 3. Variante: füllt die Zelle komplett; z.B. in grid-box, flex-cards */
.vn_change_img_container.vn-ci--fill-parent {
max-width: none;
margin: 0;
width: 100%;
/* kein height:100%; stattdessen Aspect-Ratio */
aspect-ratio: var(--vn-aspect-ratio, 16 / 9);
overflow: hidden;
}
.vn_change_img_container.vn-ci--fill-parent .vn_image_wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.vn_change_img_container.vn-ci--fill-parent .vn_image_wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Verbesserung Mobilgeräte */
/* -----------------------------------------
1) Hover-Effekt NUR auf Geräten mit echtem Hover
------------------------------------------ */
@media (hover: hover) and (pointer: fine) {
.vn_change_img_container:hover .vn_image_wrapper img:nth-of-type(2) {
transform: translateX(0%);
}
}
/* -----------------------------------------
2) Touch/Click Toggle per Klasse
------------------------------------------ */
.vn_change_img_container.is-active .vn_image_wrapper img:nth-of-type(2) {
transform: translateX(0%);
}
/* Optional: klickbar wirken lassen (vorsichtig einsetzen) */
@media (hover: none) and (pointer: coarse) {
.vn_change_img_container {
cursor: pointer;
}
}
/* -----------------------------------------
3) Dezent sichtbarer Hinweis (Overlay)
------------------------------------------ */
.vn_change_img_container .vn_hint {
position: absolute;
left: 12px;
bottom: 12px;
z-index: 5;
font-size: 0.9rem;
line-height: 1;
padding: 8px 10px;
border-radius: 999px;
background: rgba(0,0,0,0.55);
color: #fff;
backdrop-filter: blur(4px);
pointer-events: none; /* damit Klick aufs Bild nicht blockiert */
opacity: 0.95;
transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}
/* Hinweis auf Desktop weniger prominent, weil Hover-Discovery ohnehin da ist */
@media (hover: hover) and (pointer: fine) {
.vn_change_img_container .vn_hint {
opacity: 0.0;
transform: translateY(6px);
}
.vn_change_img_container:hover .vn_hint,
.vn_change_img_container:focus-within .vn_hint {
opacity: 0.85;
transform: translateY(0);
}
}
/* Wenn aktiv getoggelt, Hinweis optional ausblenden (reduziert „Overlay-Rauschen“) */
.vn_change_img_container.is-active .vn_hint {
opacity: 0.0;
}
/* -----------------------------------------
4) Fokus sichtbar machen (Tastatur)
------------------------------------------ */
.vn_change_img_container:focus-visible {
outline: 3px solid rgba(0,0,0,0.35);
outline-offset: 3px;
}
/* ================= Modul (12) OverlayBox ==========================
MODUL: bei Klick versteckte Inhaltsseite als Overlay einblenden
Anwendung:
[overlay_link=Linktext / Bild|@=Inhalte:inhalt-1=@]
============================================================*/
/* =========================
Grundlayout Overlay
========================= */
#mz-overlay-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
/* WICHTIG: Spezifität hoch, damit es sicher greift */
#mz-overlay-backdrop.mz-overlay-hidden { display: none; }
.mz-overlay-hidden { display: none; }
.mz-overlay-window {
background: #fff;
width: 90%;
max-width: 900px;
max-height: 90vh;
overflow: auto;
position: relative;
padding: 2rem;
}
.mz-overlay-close {
position: absolute;
top: 0.5rem;
right: 0.5rem;
font-size: 1.5rem;
background: none;
border: none;
cursor: pointer;
}
/* =========================
Inhalt: Overflow/Responsive
========================= */
/* Verhindert horizontales Scrollen durch „zu breite“ Inhalte */
#mz-overlay-content { overflow-x: hidden; }
/* Bilder/Videos skalieren automatisch */
#mz-overlay-content img,
#mz-overlay-content video,
#mz-overlay-content iframe {
max-width: 100%;
height: auto;
}
/* Generell: alle Elemente dürfen nicht überlaufen */
#mz-overlay-content * {
max-width: 100%;
box-sizing: border-box;
}
/* Tabellen umbrechen */
#mz-overlay-content table {
width: 100%;
table-layout: fixed;
word-wrap: break-word;
}
/* =========================
Dezente Basisanimation (ohne JS)
- animiert beim Öffnen
- Schließen wird nicht animiert (wegen display:none)
========================= */
/* Hintergrund weicher einblenden */
#mz-overlay-backdrop {
animation: mzOverlayFadeIn 160ms ease-out;
}
/* Fenster leicht „reinlaufen“ */
/* WICHTIG:
Wenn eine der Varianten A, B, C unten aktiv ist,
folgende Basis-Fensteranimation AUSKOMMENTIEREN!
*/
.mz-overlay-window {
animation: mzOverlayLiftIn 180ms ease-out;
}
@keyframes mzOverlayFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes mzOverlayLiftIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Barrierearme Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
#mz-overlay-backdrop,
.mz-overlay-window {
animation: none !important;
}
}
/* ============================================================
VARIANTEN (optional)
Aktivieren: jeweilige Variante EINKOMMENTIEREN
(und ggf. Basisanimation oben auskommentieren, wenn gewünscht)
============================================================ */
/* ---------- Variante A: Nur Fade (sehr dezent) ----------
- Fenster ohne Bewegung, nur Einblenden
*/
/*
.mz-overlay-window {
animation: mzOverlayOnlyFade 160ms ease-out;
}
@keyframes mzOverlayOnlyFade {
from { opacity: 0; }
to { opacity: 1; }
}
*/
/* ---------- Variante B: Zoom-in (dezent, aber „knackiger“) ----------
*/
/*
.mz-overlay-window {
animation: mzOverlayZoomIn 190ms ease-out;
}
@keyframes mzOverlayZoomIn {
from { opacity: 0; transform: scale(0.985); }
to { opacity: 1; transform: scale(1); }
}
*/
/* ---------- Variante C: Slide von oben (am deutlichsten) ----------
*/
/*
.mz-overlay-window {
animation: mzOverlaySlideIn 220ms ease-out;
}
@keyframes mzOverlaySlideIn {
from { opacity: 0; transform: translateY(-14px); }
to { opacity: 1; transform: translateY(0); }
}
*/