html { font-size: 16px; } /*2026*/
body { font-family: Arial, sans-serif; font-size: 1rem; color:#441100; background:#FCEDBA url("../images/BG_Hintergrund2.gif") repeat-x; margin:0; padding:0; }
h1 { font-family: Arial, sans-serif; font-size: 1.8rem; margin-top: 0; margin-bottom: 0.3em; font-weight: 700; font-style: italic; text-align:left; }
h2 { font-family: Arial, sans-serif; font-size: 1.4rem; margin-top: 0; margin-bottom: 0.4em; text-align:left; color:#550000; font-weight: 400; }
h3 { font-family: Arial, sans-serif; font-size: 1.2rem; margin-top: 0; margin-bottom: 0.4em; text-align:left; font-weight: 400; }
p { font-size: 1rem; line-height:1.45; text-align:justify; margin:0 0 0.7em 0; }
strong { font-weight: bold; color:#330000; }
td { vertical-align:top; font-size: 1rem; text-align:justify; }
hr { width:100%; color:#330000; height:1px; }
/*======================================= Schriftarten lokal einbinden =============================*/
/* Caveat Regular */
@font-face {
font-family: 'Caveat';
src: url('../fonts/Caveat-Regular.woff2') format('woff2'),
url('../fonts/Caveat-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
/* Caveat Bold */
@font-face {
font-family: 'Caveat';
src: url('../fonts/Caveat-Bold.woff2') format('woff2'),
url('../fonts/Caveat-Bold.woff') format('woff');
font-weight: 700;
font-style: normal;
}
/* SchriftXYZ */
/* WOFF2‑Dateien z. B. über Google Fonts → „Download family“ → dann selbst in WOFF2 konvertieren.
oder WOFF2 direkt aus dem Google‑Fonts‑CSS ziehen (der Profi‑Weg) >> zB. https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap
*/
/*========================================== Links =============================*/
a { }
a:active { color:#ff0000; }
a:visited { color:#3300ff; }
a:hover { color:#aa0000; }
/* 2026 dezente Linie */
a.dezent { text-decoration: none; color: #661100; border-bottom: 1px solid #cabaaa; } /* color: inherit; */
a.dezent:hover { color: #993333; border-bottom-color: #993333; }
a.diskret { text-decoration:none; }
a.diskret:active{ text-decoration:none; }
a.diskret:visited{ text-decoration:none; }
a.diskret:hover { text-decoration:underline; }
a.diskretrot { text-decoration:none; color:#990000; }
a.diskretrot:active { text-decoration:none; }
a.diskretrot:visited { text-decoration:none; } /* color:#993333; */
a.diskretrot:hover { text-decoration:underline; }
a.diskretweiss { text-decoration:none; color:#ffffff; }
a.diskretweiss:active { text-decoration:none; color:#ffaaaa; }
a.diskretweiss:visited { text-decoration:none; color:#ffffff; }
a.diskretweiss:hover { text-decoration:underline; color:#ffffff; }
a.extern { padding:0 13px 0 0; background:url("../images/ICON_externer_Link.gif") right 2px no-repeat; }
a.logolink { display:block; position:absolute; left:45px; top:30px; width:315px; height:135px; }
a.pfeilicon { padding:0 0 0 18px; background:url("../images/ICON_Pfeil1.gif") 0 2px no-repeat; }
a.pfeilroticon { display:block; text-indent:18px; background:url("../images/ICON_Pfeil_rot.GIF") left 2px no-repeat; }
/*=============================================== Doorway-Page ================*/
/* ----Vertical centering: make div as large as viewport and use table layout (funzt bei IE aber nicht) ----*/
div.container { display: table; position: fixed; top:0; left:0; width:100%; height:100%; }
div.container p { display: table-cell; vertical-align: middle; text-align:center; }
a img, a:link img { border:none; }
/*====================================== STANDARDS ============================*/
.vspacer1 { width:100px; height:65px; }
.vspacer2 { width:100px; height:25px; }
.vspacer3 { width:100px; height:35px; }
.vspacer4 { width:100px; height:15px; }
.rechts { float:right; }
.links { float:left; margin:0; padding:0; }
.bildlinks { float:left; margin:2px 10px 0 0;
shape-outside: inset(0 0 8px 0); /* DIE MAGIE: besserer Umfluss*/
}
.bildlinks0 { float:left; margin:2px 0 0 0; }
.bildrechts { float:right; margin:2px 0 0 10px; }
.clear { clear:both; }
.floatstop { clear:both; }
.textleft { text-align: left;}
.rot { color:#990000; }
.weiss { color:#ffffff; }
.beige { color:#CEA874; }
.grau1 { color:#cccccc; }
.acht { font-size:0.7rem; }
.center { margin:0 auto; text-decoration:none; text-align:center; }
.nullpunkt,
.relativ { position:relative; }
.block { display:block; }
.bildquelle { position:absolute; right:2px; bottom:5px; }
.bildquelle, .bildquelle a { color:#bbbbbb; font-size:0.6rem; }
/*============== HAUPT LAYOUT NEU ====== Website_Slices_BG-tab.gif ===== background:url("../images/BG_Hauptcontainer2.gif");================*/
#gesamtcontainer { width:970px; }
#header { width:970px; height:165px; background:url("../images/BG_TopBanner3.jpg") 0 20px no-repeat; text-align:left; position:relative; }
#header a { position:absolute; left:785px; top:20px; width:170px; height:137px; background:url("../images/BG_Logo2.gif") no-repeat; }
#mitte { width:970px; background:url("../images/BG_Hauptcontainer2.gif") repeat-y; }
#spaltelinks { float:left; position:relative; width:50px; height:100px; }
#textspalte { float:left; width:700px; }
#spalterechts { float:left; position:relative; width:200px; height:100px; }
#spalterechtsmenu { position:absolute; left:20px; top:0; width:160px; height:100px; }
.infoboxhead { float:left; width:160px; height:20px; margin-bottom:5px; background-color:#E8C79B; }
.infoboxbody { float:left; width:150px; padding:5px; margin-bottom:20px; background-color:#F6EAD9; text-align:left; font-size:0.7rem; text-decoration:none; line-height:0.5rem; }
.infoboxbody p { font-size:0.7rem; line-height:0.8rem; text-decoration:none; }
#footerzeile { clear:both; position:relative; width:970px; height:40px; background:url("../images/BG_Footer2.gif") no-repeat; }
#kontrollnr { position:absolute; left:50px; top:9px; width:200px; height:20px; text-align:left; }
#footermenu { position:absolute; left:800px; top:7px; width:140px; height:20px; text-align:left; }
/*===================== Hauptmenü, Quermenü >> Menu COPILOT2026 ===========================*/
/* ganzer Menücontainer */
#quermenuzeile {
position:relative;
background:url("../images/BG_Menu2.gif") 0 0 no-repeat;
width:970px;
height:105px; /* bringt Abstand nach unten zum Seiteninhalt */
}
/* Menüleiste */
#quermenu {
position:absolute;
left:45px;
top:0;
width:900px;
/* ALT war: height:20px; → blockiert jede Luft */
height:auto; /* NEU: Container wächst mit */
}
/* Standard-Menüpunkte */
a.menupunkt,
a.menupunkt:visited {
display:block;
float:left;
/* ALT war: height:18px; → verhindert Luft */
height:auto; /* NEU */
/* ALT: padding:4px 10px 1px 10px; → unlogisch */
padding:4px 10px; /* NEU: symmetrischer, aber identischer Look */
color:#990000;
text-decoration:none;
font-weight:bold;
font-size:0.9rem; /* Schriftgröße der Menüpunkte */
border:1px solid transparent;
}
/* Hover */
a.menupunkt:hover,
a.menupunkt:active {
color:#ffffff;
background:#990000;
}
/* Reiter (aktiver Menüpunkt) */
a.reiter,
a.reiter:visited {
display:block;
position:relative;
top:1px; /* Reiter y-positionieren */
background:#ffffff;
color:#990000;
/* ALT: padding-top:5px; padding-bottom:7px; */
padding:5px 10px 7px 10px; /* NEU: konsistent mit menupunkt */
border-left:1px solid #990000;
border-right:1px solid #990000;
border-top:1px solid #990000;
border-bottom:2px solid #ffffff;
}
/*================================================ INHALT ========================================*/
.headline1 { position:absolute; left:50px; top:50px; z-index:100; color:#990000; font-size:1.7rem; font-weight:bold; }
.headlinelight1 { position:absolute; left:63px; top:38px; z-index:90; color:#f9f3f3; font-size:3.2rem; font-weight:600; }
/* .blattoben { float:left; height:10px; width:600px; padding:0px; background:url("../images/BILD_Papier_BG1.jpg") 10px 0px no-repeat; }
.blattmitte { float:left; width:600px; position:relative; padding:0px; background:url("../images/BILD_Papier_BG2.jpg") 10px 0px ; background-repeat: repeat-y; }
.blattunten { float:left; height:30px; width:600px; padding:0px; background:url("../images/BILD_Papier_BG3.jpg") 10px 0px no-repeat; }
.bg_muetze { background:url(images/ICON_Kochloeffel4.gif) 240px 180px no-repeat; } */
.aktuline { margin:30px auto; text-align:center; border:solid #F6EAD9 1px; }
.horiline1 { margin:10px auto; text-align:center; border:solid #E6DAC9 1px; }
/*--------- div als button ---------*/
.button a, .button a:visited { display:block; width:175px; margin-top:8px; padding:8px 0 8px 0; background:#ffffff;
border:1px solid #990000; color:#990000; text-decoration:none; text-align:center; font-weight:bold;
-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; }
.button a:hover, .button a:active { background:#990000; color:white; }
/*--------- Link als button ---------*/
a.button { margin:0; padding:0 10px 0 10px; font-size:0.6rem; display:inline; line-height:20px; text-indent:5px; }
a.button:hover { color:#ffffff; background:#990000; text-decoration:none; }
/*============================================= LISTEN =============================================*/
ul.standard { margin:10px 0 5px 20px; padding:0; text-align:left; }
ul.standard li { margin:0 0 5px 5px; padding:0; text-align:left; }
/* betrifft Menu rechts */
ul.links2 { margin:0 0 15px 17px; padding:0; list-style-type:square; color:#880000; }
ul.links2 li { margin:2px 0; padding:0; font-size:1rem; }
ul.links2 li a { margin:0 0 0 -5px; padding:0; font-size:0.8rem; display:block; line-height:20px; text-indent:5px; border:1px solid transparent; }
ul.links2 li a:hover { display:block; color:#ffffff; background:#990000; font-weight:bold; text-decoration:none; }
ul.links2 a.reiter1, ul.links2 a.reiter1:visited { display:block; color:#990000; font-weight:bold; background:#ffffff; position:relative; left:-17px; border-right:1px solid #990000; border-top:1px solid #990000; border-bottom:1px solid #990000; line-height:20px; text-indent:30px } /*--IE hat extra CSS wg border-Problem--*/
ul.links3 { margin:5px 0 5px 17px; padding:0; list-style-type:square; color:#880000; }
ul.links3 li { margin:0; margin-bottom: 0.4rem; font-size:0.8rem; }
/* ul.links3 li a { line-height: 1,9rem; } */
/* 2026 Liste >> ul muss nicht erwähnt werden */
.bullets-edel { list-style: none; margin: 0 0 1em 0; padding: 0; }
.bullets-edel li { position: relative; text-align: left; padding-left: 1.2em; margin: 0.35em 0; }
.bullets-edel li::before { content: "✦"; position: absolute; left: 0; top: 0.05em;
font-size: 0.8em; opacity: 0.7; color: #7a4a4a; } /* warmes, dezentes Braunrot */
/* weitere */
.bullets-blatt li::before { content: "❧"; position: absolute; left: 0; top: 0.05em;
font-size: 0.85em; opacity: 0.65; color: #6a5a4a; transform: rotate(-8deg);}
/* Produkte-Seite: CSS ist separat */
/* Fotogalerie-Seite: CSS ist separat */
/*----- AKTUELLES-SEITE -----*/
ul.pfeil { list-style-type:none; margin:0; margin-left:10px; padding-left:0; }
ul.pfeil li { background:url(images/ICON_Pfeil1.gif) 0 2px no-repeat; padding-left:18px; margin-bottom:0; }
ul.pfeil li.horiz { float:left; margin-right:10px; }
/*ul.pfeil a, ul.pfeil a:visited { color:#CEA874; text-decoration:none;}
ul.pfeil a:hover, ul.pfeil a:focus { color:#ffffff; background:#CEA874; text-decoration:none;}*/
a.aktuellesbild, a.aktuellesbild:visited { color:#CEA874; text-decoration:none; }
a.aktuellesbild:hover, a.aktuellesbild:focus { color:#ffffff; background:#CEA874; text-decoration:none; }
a.aktuellesbild span { display:none; position:absolute; top:-20px; left:-350px; }
a.aktuellesbild:hover span, a.aktuellesbild:focus span { display:block; position:absolute; top:-60px; left:480px; width:200px; height:150px; background:#f4f4f4; border:10px solid #F6EAD9; z-index:100; }
a.aktuellesbild:hover span.hoch, a.aktuellesbild:focus span.hoch { display:block; position:absolute; top:-78px; left:530px; width:150px; height:200px; background:#f4f4f4; border:10px solid #F6EAD9; z-index:100; }
a.aktuellesbild:hover span.flyer, a.aktuellesbild:focus span.flyer { display:block; position:absolute; z-index:150; top:230px; left:435px; width:0; height:0; background:#f4f4f4; border:0; z-index:100; /* */}
/*-- ab 10/2019 Bilder etwas größer "XL" 300px:225px --*/
a.aktuellesbildXL, a.aktuellesbildXL:visited { color:#CEA874; text-decoration:none; }
a.aktuellesbildXL:hover, a.aktuellesbildXL:focus { color:#ffffff; background:#CEA874; text-decoration:none; }
a.aktuellesbildXL span { display:none; position:absolute; top:-20px; left:-350px; }
a.aktuellesbildXL:hover span, a.aktuellesbildXL:focus span { display:block; position:absolute; top:-60px; left:380px; width:300px; height:225px; background:#f4f4f4; border:10px solid #F6EAD9; z-index:100; }
a.aktuellesbildXL:hover span.hoch, a.aktuellesbildXL:focus span.hoch { display:block; position:absolute; top:-78px; left:430px; width:225px; height:300px; background:#f4f4f4; border:10px solid #F6EAD9; z-index:100; }
/*-- ab 10/2019 Bilder etwas größer "XL2" 400px:225px --*/
a.aktuellesbildXL2, a.aktuellesbildXL2:visited { color:#CEA874; text-decoration:none; }
a.aktuellesbildXL2:hover, a.aktuellesbildXL2:focus { color:#ffffff; background:#CEA874; text-decoration:none; }
a.aktuellesbildXL2 span { display:none; position:absolute; top:-20px; left:-350px; }
a.aktuellesbildXL2:hover span, a.aktuellesbildXL2:focus span { display:block; position:absolute; top:-60px; left:280px; width:400px; height:225px; background:#f4f4f4; border:10px solid #F6EAD9; z-index:100; }
a.aktuellesbildXL2:hover span.hoch, a.aktuellesbildXL2:focus span.hoch { display:block; position:absolute; top:-70px; left:455px; width:225px; height:400px; background:#f4f4f4; border:10px solid #F6EAD9; z-index:100; }
/* ------ Videos -----*/
a.aktuellesVideo, a.aktuellesVideo:visited { color:#CEA874; text-decoration:none; }
a.aktuellesVideo:hover, a.aktuellesVideo:focus { color:#ffffff; background:#CEA874; text-decoration:none; }
a.aktuellesVideo span { display:none; position:absolute; top:-20px; left:-250px; }
a.aktuellesVideo:hover span, a.aktuellesVideo:focus span { display:block; position:absolute; top:-60px; left:380px; width:300px; height:225px; border:10px solid #F6EAD9; z-index:150; }
/* -- unsichtbare 'MausBrücke' (von Link zu Play-Button)-- */
a.aktuellesVideo:hover em, a.aktuellesVideo:focus em { display:block; position:absolute; top:-60px; left:250px; width:480px; height:350px; background:url('images/GlasLogo.gif'); z-index:50; }
/* ================================================================== */
/* ==================== ab 03/2026 - Diverses ======================= */
/* ================================================================== */
/* ===========================================================================
Einfacher hover Effekt für Bilder, z.B für QR-Codes "Aktuelles"
und Bilder "Hofladen" (Bilder mit 'eigenem Format', nicht 'Quadrat-Grid')
Doorwaypage hat aber eigene CSS
Auch Quadrat-Grid-Matrix bei 'Unsere Produkte' hat eigene CSS
========================================================================= */
/* Gemeinsame Basis für beide Bilder */
.hover-zoom {
transition:transform 0.3s ease;
/* display: block; */ /* verhindert kleine Layout-Sprünge */
}
/* Große Bilder – dezenter Hover */
.hover-zoom-big:hover {
transform: scale(1.02);
}
/* Kleine Bilder – stärkerer Hover */
.hover-zoom-small:hover {
transform: scale(1.05);
}
/* Kleine Bilder – Vergrößerungs-Hover. Effekt, um Bilder größer betrachten zu können - zB. in "Hofladen" */
.hover-zoom-strong:hover {
position: relative;
z-index: 1;
transform: scale(1.7);
box-shadow: 0px 0px 5px 8px white; /* --- Bilder Rahmen --- box-shadow: 2px 4px 6px rgba(0,0,0,0.2) --- */
}
/* ===========================
/* ===== Bilder Schatten =====
=========================== */
.img-shadow { box-shadow: 4px 8px 10px rgba(0,0,0,0.2);}
.img-shadow-small { box-shadow: 2px 4px 6px rgba(0,0,0,0.2);}
.img-shadow-big { box-shadow: 2px 4px 14px rgba(0,0,0,0.4);}
/* ====================================================
Gewisse Textstellen oder Worte können/sollen für
Desktop bzw. Mobil aus-/ein geblendet werden
Standard: Desktop (Gegenstück für Mobile ist unten)
====================================================*/
.desktop-text { display: inline; }
.mobile-text { display: none; }
/* ========================================================================
Weiteres Universelles Werkzeug (Utility-Klassen) (Gegenstück ist unten)
======================================================================== */
/* Universell: Element auf Desktop sichtbar, auf Mobile versteckt */
.hidden-mobile { display: block; }
/* Universell: Element auf Mobile sichtbar, auf Desktop versteckt */
.hidden-desktop { display: none; }
/* Globale Icon-Regel für kleine Inline-Bilder */
img.icon-inline {
width: 1.0rem; /* skaliert mit Textgröße, hier Desktopgröße */
height: auto;
vertical-align: middle;
margin-left: 0.2em;
margin-right: 0.3em; /* Abstand rechts zum Text (Link) */
margin-bottom: 0.2em;
}
/* Das sagt dem Browser: „ Inline-Icon (Pfeil) und der direkt folgende Link gehören zusammen.“ */
.icon-inline,
.icon-inline + a {
white-space: nowrap;
}
.no-break {
white-space: nowrap; /* verhindert jeden Umbruch */
hyphens: none; /* verhindert Silbentrennung */
}
.icon-lead {
font-size: 1.55em; /* dezent größer als Text */
line-height: 0; /* verhindert „Hochrutschen“ */
display: inline-block; /* erlaubt präzise Positionierung */
transform: translateY(2px); /* optische Grundlinienkorrektur */
}
/* ============================================================================
Automatische Silbentrennung für enge Layouts / Smartphone
----------------------------------------------------------------------------
Warum diese Klasse?
- Desktop: große Breite → keine Trennung nötig → wirkt oft unsauber
- Mobile: große Schrift + schmale Spalten → Wörter laufen sonst über
- Diese Klasse erlaubt gezielte Aktivierung, statt globalem Chaos
- Browser nutzt echte deutsche Trennregeln (lang="de" wichtig!)
----------------------------------------------------------------------------
Anwendung:
SehrLangesWortMitTrennbedarf…
… ganzer Textblock …
============================================================================ */
/* Standard (Desktop): Silbentrennung AUS — sauberes Schriftbild */
.auto-hyphens, .auto-silbentrennung {
hyphens: none;
overflow-wrap: normal;
word-break: normal;
}
/* Silben-Trennung selektiv per Klasse ausschalten (falls global EIN ist ) */
.no-hyphens, .keine-silbentrennung {
hyphens: none !important;
overflow-wrap: normal !important;
word-break: normal !important;
/* white-space: nowrap; >> optional, dann brechen aber auch ganze Worte nicht mehr um */
}
/* ---------------------------------------------------------
SPACING SYSTEM (Utility-Klassen)
Stufen: 10 / 20 / 40 / 60
Desktop = Basis
Mobile = optisch größer (weil engerer Viewport)
--------------------------------------------------------- */
/* Margin-Top (DESKTOP) */
.mato-10 { margin-top: 0.75rem; } /* kleine Stufe */
.mato-20 { margin-top: 1.25rem; } /* mittel */
.mato-30 { margin-top: 1.7rem; } /* groß */
.mato-40 { margin-top: 2.4rem; } /* größer */
.mato-50 { margin-top: 3.2rem; } /* noch größer */
.mato-60 { margin-top: 4rem; } /* sehr groß */
/* Margin-Bottom (DESKTOP) */
.mabo-10 { margin-bottom: 0.75rem; }
.mabo-20 { margin-bottom: 1.25rem; }
.mabo-30 { margin-bottom: 1.45rem; }
.mabo-40 { margin-bottom: 2.5rem; }
.mabo-50 { margin-bottom: 3.2rem; }
.mabo-60 { margin-bottom: 4rem; }
/* ---------------------------------------------------------
Weitere Utility Klasse: Bild im Smart‑Modus auf volle Breite strecken
– Desktop: Bild bleibt wie im HTML definiert (z. B. width="400")
– Mobile: Bild wird 100% breit, aber nicht größer als nötig
--------------------------------------------------------- */
.mobile-stretch { /* Desktop */
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
/* ============================================================= */
/* =================== für Smartphone User ===================== */
/* =================== leichte Anpassungen ===================== */
/* ============================================================= */
@media (max-width: 1000px) {
/* Standard Text etwas größer */
p {
font-size: 2.2rem; /* oder z.B. 18px */
line-height: 1.4; /* optional, für bessere Lesbarkeit */
margin-bottom: 0.7em; /* Absätze auch etwas spreizen */
}
/* Schrift größer */
#quermenu a {
font-size: 1.6em;
}
/* Mehr Luft für alle Menüpunkte */
a.menupunkt,
a.menupunkt:visited {
padding-left:10px; /* Abstand rechts (zum nächsten Menü-Punkt) */
padding-top: 8px; /* die Text-Punkte OHNE Reiter vertikal verschieben */
padding-bottom: 2px; /* macht sich nur beim HOVERN (rot) bemerkbar */
}
/* Reiter braucht etwas andere Werte, damit er nicht glitscht */
a.reiter,
a.reiter:visited {
padding-top: 5px;
padding-bottom: 3px;
top: 2px; /* den weißen Reiter mitsamt Text verschieben */
}
/* Container darf wachsen */
#quermenu {
height: auto;
top: -10px; /* gesamte Menüzeile vetikal verschieben */
}
/* ganze Menücontainer Höhe ändern (quasi unsichtbar nach unten) */
#quermenuzeile {
height: 160px; /* bringt Abstand nach unten zum Seiteninhalt */
}
/* Die großen roten "Überschrifts-Begriffe" vergrößern & positionieren */
.headline1 { left:50px; top:60px; font-size:3.3rem }
.headlinelight1 { left:40px; top:48px; font-size:4.4rem; }
/* Gewisse Textstellen oder Worte können/sollen für Desktop bzw. Mobil
aus-/ein geblendet werden zB. bei "Unsere Produkte" und Gabis Hausrezepte
um Platz im Menü zu schaffen (Gegenstück für Desktop ist oben im Code)
Worte ausblenden zB. bei "Unsere Produkte", um Platz zu uschaffen */
.desktop-text { display: none; }
.mobile-text { display: inline; }
/* Universell: Element auf Desktop sichtbar, auf Mobile versteckt */
.hidden-mobile { display: none !important; }
/* Universell: Element auf Mobile sichtbar, auf Desktop versteckt */
.hidden-desktop { display: block !important; }
/* 'Alte' Liste - kommt mit neuer Produkte-Seite eh weg */
ul.produkte li em { /* "Unsere Produkte" Links */
font-size: 1.3em;
line-height: 1.0; /* optional, für bessere Lesbarkeit */
}
/* Zoom 1 */
.smart-zoom { /* zB. für "unterschrift" auf "wir über uns" */
transform: scale(2);
transform-origin: center;
}
/* Zoom 2 */
.smart-zoom1 { /* für Bilder im Text etwas vergrößern zB. das Standardbild, links oben */
width: 380px;
height: 336px; /* war zuvor auto */
}
/* Globale Icon-Regel für kleine Inline-Bilder */
img.icon-inline {
width: 2.6rem; /* Smartphone größer */
}
/* Silbentrennung EIN — verhindert Überlaufen bei großer Schrift (SMARTPHONE) */
/* word-break: break-all; Bricht an jeder Stelle, auch mitten im Wort */
/* word-break: keep-all; Keine Trennung (für asiatische Sprachen) */
.auto-hyphens, .auto-silbentrennung {
hyphens: auto; /* Browser trennt automatisch nach deutscher Regel */
overflow-wrap: break-word; /* bricht extrem lange Wörter sicher um */
word-break: normal; /* keine aggressiven Brüche wie bei word-break:break-all */
}
/* VARIANTE: Pauschal zB. jeden ohne extra überall Klassen setzen zu müssen */
body { hyphens: auto; overflow-wrap: break-word; word-break: normal; }
/* Utility Klasse: Bild im Smart‑Modus auf volle Breite strecken */
.mobile-stretch {
width: 100%; /* MOBILE: volle Breite */
max-width: 500px; /* optional: Obergrenze */
}
/* SPACING SYSTEM (Utility-Klassen) */
/* Margin-Top (größer für mobile Optik) */
.mato-10 { margin-top: 1.25rem; }
.mato-20 { margin-top: 2rem; }
.mabo-30 { margin-top: 3.2rem; }
.mato-40 { margin-top: 5rem; } /* werte testen :-) */
.mato-50 { margin-top: 6rem; }
.mato-60 { margin-top: 7rem; }
/* Margin-Bottom (größer für mobile Optik) */
.mabo-10 { margin-bottom: 1.25rem; }
.mabo-20 { margin-bottom: 2rem; }
.mabo-30 { margin-bottom: 3.2rem; }
.mabo-40 { margin-bottom: 5rem; }
.mabo-50 { margin-bottom: 6rem; }
.mabo-60 { margin-bottom: 7rem; }
/* ===== ENDE 03/2026 ===== */
}