, )
**nicht überschreiben oder verändern** – was er standardmässig tun würde.
Wichtig:
Der visuelle Stil des
ist für SEO irrelevant – Google erkennt den anhand
der HTML-Struktur (Semantik), nicht der Darstellung (Optik) im Browser.
Umsetzung:
Durch 'all: unset' und weitere explizite CSS-Regeln wird der -Tag visuell auf
«neutral» gesetzt, behält aber seine semantische Bedeutung für Suchmaschinen.
*/
h1.h1_css_style_komplett_aufheben {
all: unset;
display: block;
font: inherit;
color: inherit;
text-transform: none; /* 🔧 gesamter Text in Grossbuchstaben wieder ausschalten */
text-decoration: none; /* 🔧 entfernt Unterstreichung */
border: none; /* 🔧 entfernt Linie */
box-shadow: none; /* 🔧 entfernt Schattenlinie */
}
/* Für den -Tag gleiches Verfahren wie oben für den -Tag */
h2.h2_css_style_komplett_aufheben {
all: unset;
display: block;
font: inherit;
color: inherit;
text-transform: none; /* 🔧 gesamter Text in Grossbuchstaben wieder ausschalten */
text-decoration: none; /* 🔧 entfernt Unterstreichung */
border: none; /* 🔧 entfernt Linie */
box-shadow: none; /* 🔧 entfernt Schattenlinie */
}
/* -------------------------------------------------------------------------------- */
.DiagonalbandBesucher {
position: absolute;
bottom: 58px; /* Verschiebt das Band weiter nach draussen (d.h. weiter weg von der blauen Ecke) */
right: -70px;
transform: rotate(-45deg); /* Band diagonal drehen um -45 Grad */
background-color: coral; /* Hintergrundfarbe für das Band */
color: #fff;
font-size: 14px;
font-weight: bold;
z-index: 10; /* Band über andere Elemente legen */
box-shadow: 0 2px 6px rgba(0,0,0,0.3); /* leichter Schatten für plastischen Effekt */
display: flex;
align-items: center; /* Text vertikal im Band zentrieren */
justify-content: center; /* Text horizontal im Band zentrieren */
height: 30px; /* Bandbreite */
padding: 0 55px; /* horizontaler Innenabstand etwas kleiner */
white-space: nowrap; /* verhindert Zeilenumbruch */
overflow: visible; /* Überlauf sichtbar lassen (für abgeschnittene Ecken) */
}
.DiagonalbandBesucher__text {
position: relative;
transform: translate(1px, -1px); /* verschiebt den Text um 1px nach rechts und 1px nach oben */
z-index: 1; /* Text über die abgeschnittenen Ecken legen */
}
/* Safari Hack: Safari 10.1+ only - überschreibt die css-Klasse von oben, d.h. nur die Attribute,
welche in Safari anders sind. Muss nach der normalen Klasse definiert werden und gleich heissen! */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.DiagonalbandBesucher__text {
transform: translate(2px, -1px); /* verschiebt den Text um 1px nach rechts und 1px nach oben */
}
}
.DiagonalbandBesucher::before,
.DiagonalbandBesucher::after {
content: ""; /* erzeugt leere Pseudo-Elemente für die Bandenden */
position: absolute; /* absolut im Bezug auf .DiagonalbandBesucher */
top: 0;
border-top: 16px solid transparent; /* an Bandhöhe angepasst: muss an mehren Orten angepasst werden! */
border-bottom: 16px solid transparent; /* an Bandhöhe angepasst: muss an mehren Orten angepasst werden! */
z-index: 0;
}
.DiagonalbandBesucher::before {
left: -16px; /* an Bandhöhe angepasst: muss an mehren Orten angepasst werden! */
border-right: 16px solid coral; /* an Bandhöhe angepasst: muss an mehren Orten angepasst werden! */
}
.DiagonalbandBesucher::after {
right: -16px; /* an Bandhöhe angepasst: muss an mehren Orten angepasst werden! */
border-left: 16px solid coral; /* an Bandhöhe angepasst: muss an mehren Orten angepasst werden! */
}
/* -------------------------------------------------------------------------------- */
/* Standard: Desktop + Tablet */
.rolands_abstand_top_bottom {
padding-top: 45px !important;
padding-bottom: 5px !important;
}
/* Mobile (bis 767px) */
@media (max-width: 767px) {
.rolands_abstand_top_bottom {
padding-top: 30px !important;
padding-bottom: 20px !important;
}
}
/* -------------------------------------------------------------------------------- */
/* Border nur für Tablet und Desktop (uk-visible@m) anzeigen */
@media (min-width: 960px) {
.roland_border_linke_spalte {
border-width: 1px;
border-color: lightgrey;
border-style: solid;
}
}
/* -------------------------------------------------------------------------------- */