sie nicht vollständig umschliesst. Um dieses Problem zu beheben, kannst du das CSS-Stil clearfix
verwenden. Quelle: https://www.w3schools.com/howto/howto_css_clearfix.asp
*/
.roland_custom_clearfix_border::after {
content: "";
display: table;
clear: both;
}
/*-- ------------------------------------------- --*/
/*
Graues Dreieck "Profil ausgeblendet":
-------------------------------------
Wichtig: "position: relative;" muss im übergeordneten Container (siehe: "
" in "suchergebnisse.aspx")
stehen, sonst wird das graue Dreieck "Profil ausgeblendet" bei iOS Safari nicht korrekt angezeigt!
*/
.roland_custom_grau_dreieck_cell {
position: relative; /* Notwendig für die absolute Positionierung des Dreiecks */
width: 100%;
height: 100%;
/*overflow: hidden; Auskommentiert, ansonsten das unterste Profil der Liste keinen Abschlussstrich mehr hat. */ /* Um sicherzustellen, dass nichts aus der Zelle herausragt */
}
.roland_custom_grau_dreieck_cell::after {
content: "";
position: absolute;
bottom: 0;
right: 20px;
width: 0;
height: 0;
border-bottom: 130px solid gray; /* Die untere Kathete */
border-left: 130px solid transparent; /* Die rechte Kathete */
transform: rotate(0deg); /* Dreieck diagonal ausrichten */
padding-right: 0px; /* Position des Textes anpassen */
padding-bottom: 0px; /* Vertikale Anpassung des Textes */
z-index: 10; /* Stellt sicher, dass das Dreieck über allen anderen Elementen liegt */
pointer-events: none; /* Damit das Dreieck keine Interaktionen blockiert */
}
.roland_custom_grau_dreieck_text {
position: absolute;
bottom: 28px;
right: 28px;
transform: rotate(-45deg) translate(2%, 5%); /* ganzer Text-Block im Dreieck nach Links resp. nach Oben verschieben */
transform-origin: center; /* Rotation um die Mitte des Textes */
color: white;
font-size: 13px;
font-weight: bold;
z-index: 11;
text-align: center;
white-space: nowrap; /* verhindert ungewollten Zeilenumbruch */
}
/* Ausnahme für iOS-Geräte (iPhone und iPad) */
@supports (-webkit-touch-callout: none) {
.roland_custom_grau_dreieck_text {
transform: rotate(-45deg) translate(4%, 5%); /* ganzer Text-Block im Dreieck nach Links resp. nach Oben verschieben */
}
}
/*-- ------------------------------------------- --*/
/*
Silbentrennung:
---------------
Wichtig:
--------
Die Einführung der Silbentrennung ist ein absolutes Muss, damit z. B. der Text auf Tablets wie dem iPad oder bei
sehr langen Wörtern nicht zu viele Zeilenumbrüche ("/n") erzeugt und dadurch die Textbox unnötig hoch wird.
Quelle: https://www.mediaevent.de/css3-silbentrennung-hyphens
Achtung:
--------
Damit die Silbentrennung funktioniert, muss das umgebende folgendes Attribut enthalten: lang="de" (für
Silbentrennung nach deutscher Grammatik). Quelle: https://stackoverflow.com/questions/45319971/why-hyphens-dont-work-with-inner-span)
Update zu lang="de":
--------------------
Ich habe das lang="de" aus allen umschliessenden div-Elementen entfernt, da es nicht nötig ist.
Es reicht, das lang="de" in der obersten Ebene der Seite zu definieren, wie folgt:
Wichtig für "web.config":
-------------------------
In "web.config" muss die Sprache der Webseite auf "schweiz-deutsch" eingestellt sein, sonst wird nach amerikanischer Regel getrennt!
In "web.config" ist leider ein generischer Tag für Deutsch: culture="de" uiCulture="de" NICHT möglich, es braucht hier immer zwingend
eine genaue DE-Gebietsangabe (z.B. de-CH, de-DE, en-US, etc.)!
Beispiel Feineinstellungen für die Silbentrennung:
--------------------------------------------------
- Die maximale Anzahl von Trennzeichen im gleichen Wort kann eingestellt werden (d.h. wieviel max. Trennungen im GLEICHEN Wort erlaubt werden):
(hyphenate-limit-lines: 2)
- Die minimale Anzahl von Buchstaben pro Trennung im gleichen Wort kann ebenfalls definiert werden:
(hyphenate-limit-chars: auto 5).
Beispiel:
---------
p {
hyphenate-limit-chars: auto 5;
hyphenate-limit-lines: 2;
}
*/
/* Silbentrennung für Normaltext
Hinweis: früher hat diese Klasse NICHT für URLs und E-Mails funktioniert! Für URLs und E-Mails ist die andere Klasse weiter unten da!
Ich bin aber nicht mehr sicher, ob es die andere Klasse für URLs und E-Mails überhaupt noch braucht, da ich in dieser Klasse hier unten jetzt auch
"overflow-wrap: anywhere;" und "word-break: break-word;" eingebaut habe, was ja eigentlich auch für URLs und E-Mails funktionieren müsste.
*/
.roland_custom_Silbentrennung_erzwingen {
word-wrap: break-word; /* wichtig falls es lange URLs hat, müssen diese unbedingt umgebrochen werden! Sonst schiessen sie über die Textbox raus! */
hyphens: auto; /* es wird überall automatisch Silbentrennung gemacht, wo lange Wörter sind = mehr Information auf engerem Raum möglich! Gibt bei langen Wörter letztlich weniger Zeilenumbrüche! */
-webkit-hyphens: auto;
-webkit-hyphenate-limit-chars: auto 3;
-webkit-hyphenate-limit-lines: 4;
-ms-hyphens: auto;
-ms-hyphenate-limit-chars: auto 3;
-ms-hyphenate-limit-lines: 4;
/* -------------------- */
/* Neu Hinzugefügt: Folgendes habe ich für URL und Fliesstexte mit vielen "/" eingebaut. Bei URL wie bei Texten mit vielen "/" ist sowieso eine
Silbentrennung in CSS NICHT möglich, wichtig für mich ist lediglich, dass der normale Text noch Silbentrennung hat, aber URLs und Texte mit "/"
trotzdem umgebrochen werden können, damit sie nicht aus der Textbox rauslaufen.
Hier funktioniert Silbentrennung:
---------------------------------
Bindestriche «-» werden von der automatischen Silbentrennung (hyphens: auto;) als «legale» Umbruchstellen erkannt.
-> Bsp. Fliesstext mit vielen "-": "mein-Kind-hat-mit-5-Monaten-schön-einen-Doktor-Titel-und-dein-Kind-kann-nicht-mal-laufen-Mamis"
Hier funktioniert KEINE Silbentrennung (was in CSS auch nicht möglich ist, laut ChatGPT!):
------------------------------------------------------------------------------------------
Schrägstriche «/» dagegen nicht. CSS kennt keine Regel, die Silbentrennung innerhalb solcher Segmente automatisch erlaubt.
-> Bsp. URL: "http://cookandeattogether.wixsite.com/culturalcookingbelp/cookingbelpautopause/testwebseite/dasistmeinboot/undgut"
-> Bsp. E-Mail: "abdfddfasdfj-afdlsdjfjsdj@bluewasdfwersdfsdsin.ch"
-> Bsp. Fliesstext mit vielen "/": "Spaziergänge/Jassen/Wandern/Konzerte/Sport/Anlässe/Events/Sportveranstaltungen/Dinner/Weekend-Ausflüge/Wellness/Reisen/gesellige Runde"
*/
overflow-wrap: anywhere; /* erlaubt Umbruch an beliebigen Stellen, auch bei "/" */
word-break: break-word; /* optional: erzwingt Umbruch bei "/" */
/* -------------------- */
/* Folgende 3 Attribute NIE für die Silbentrennung für Normaltext verwenden, sondern nur für URLs und E-Mails (siehe Klasse unten) */
/*overflow-wrap: break-word;*/ /* wieder auskommentiert, da es leider die Silbentrennung im Normaltext kaputt macht. Für Browser-Kompatibilität */
/*word-break: break-all;*/ /* wieder auskommentiert, da es leider die Silbentrennung im Normaltext kaputt macht. Bricht Wörter überall um, auch URLs */
/*white-space: normal; */ /* wieder auskommentiert, da es leider die Silbentrennung im Normaltext kaputt macht. Erlaubt Zeilenumbrüche */
}
/* Update:
-------
Ich bin nicht mehr 100% sicher, ob es diese Klasse noch braucht, da ich in der oberen Klasse den Umbruch für URLs und E-Mails jetzt auch eingebaut habe.
Alt (nicht sicher ob das nocht stimmt):
---------------------------------------
Silbentrennung für URLs und E-Mails. Untenstehnde CSS-Klasse NUR für URLs und E-Mails verwenden! Die untenstehenden 3 Attribute würden bei der Silbentrennung
in einem Normaltext die Silbentrennung zerstören, darum untenstehende Klasse nur für URL's und Emails einsetzen!
Beispiel überlanger URL, welcher sonst ohne die Klasse Probleme machen würde: "http://cookandeattogether.wixsite.com/culturalcookingbelp/cookingbelpautopause/testwebseite/dasistmeinboot/undgut"
Beispiel überlange E-Mail, welche sonst ohne die Klasse Probleme machen würde: "abdfddfasdfj-afdlsdjfjsdj@bluewasdfwersdfsdsin.ch"
*/
.roland_custom_only_URL_or_Email_Silbentrennung_erzwingen {
overflow-wrap: break-word; /* Für Browser-Kompatibilität */
word-break: break-all; /* Bricht Wörter überall um, auch URLs */
white-space: normal; /* Erlaubt Zeilenumbrüche */
}
/*-- ------------------------------------------- --*/
.Chat_Nachricht_gruener_Haken {
font-size: 18px;
font-weight: bold;
color: #0ec325;
background: 0 0 !important;
/* padding: 0px 0px 0px 462px;*/
margin: -14px 0px 0px 0px;
line-height: 11px;
z-index: 0 !important;
}
/* Registrieren */
.roland_custom_header_registrieren {
margin-right: -70px;
font-size: 15px !important;
}
/* Mobile */
@media (max-width: 767px) {
.roland_custom_header_registrieren {
margin-right: -60px;
font-size: 14px !important;
}
}
/*-- ------------------------------------------- --*/
/* Anmelden */
.roland_custom_header_anmelden {
font-size: 15px !important;
}
/* Mobile */
@media (max-width: 767px) {
.roland_custom_header_anmelden {
margin-right: -40px;
font-size: 14px !important;
}
}
/*-- ------------------------------------------- --*/
/* Nachricht als ungelesen markieren + Bild (optional) */
.roland_custom_nachricht_ungelesen_markieren_bild {
font-size: 15px !important;
}
/* Mobile */
@media (max-width: 767px) {
.roland_custom_nachricht_ungelesen_markieren_bild {
font-size: 14px !important;
}
}
/*-- ------------------------------------------- --*/
/* Ermöglicht, dass das Google-Maps Control responsive wird */
.roland_custom_google_map_container {
width: 100% !important;
max-height: 100% !important;
/*height: 350px; */
/* border:0;*/
}
/*-- ------------------------------------------- --*/
.roland_custom_Loeschen_Button_hidden {
display: none;
}
/*-- ------------------------------------------- --*/
/* Dieses CSS gehört zu meinem Java-Script (Text kürzen) in: "textkuerzen_2024_10_22.js" */
.roland_custom_text_kuerzen_toggle_icon {
display: inline;
cursor: pointer;
margin-left: 5px; /* Optional: fügt Abstand zwischen Text und Icon hinzu */
white-space: nowrap; /* Verhindert Zeilenumbruch */
}
/*-- ------------------------------------------- --*/
/* Style zu "textkuerzen_2024_10_22.js" (Text kürzen) */
.roland_custom_text_kuerzen_container_vorstellung,
.roland_custom_text_kuerzen_content_vorstellung span,
.roland_custom_text_kuerzen_container_interessen,
.roland_custom_text_kuerzen_content_interessen span {
font-size: 14px !important;
/* color: red !important;*/
}
/*-- ------------------------------------------- --*/
/* Bild auf Bildschirmbreite maximieren, ohne diese zu überschreiten */
.roland_custom_profil_responsive_image {
width: 100%;
max-width: 100vw; /* Nie grösser als Bildschirmbreite */
height: auto; /* Proportionen beibehalten */
max-height: 100vh; /* Nie grösser als Bildschirmhöhe */
}
/*-- ------------------------------------------- --*/
/* Für mobile Geräte */
@media only screen and (max-width: 767px) {
.roland_custom_Abstand_zu_Profilbild {
margin: -9px 0px 0px 7px;
}
}
/* Für alle anderen Geräte */
@media only screen and (min-width: 768px) {
.roland_custom_Abstand_zu_Profilbild {
margin: -9px 0px 0px 10px;
}
}
/*-- ------------------------------------------- --*/
/* Der Text: "Zuletzt online" wird bei Mobile zu "Zuletzt onl." gekürtzt */
@media (max-width: 600px) { /* Bildschirmbreite anpassen nach Bedarf */
.roland_custom_zuletzt_online_Text_kuerzen {
font-size: 0; /* Versteckt den Textinhalt */
}
.roland_custom_zuletzt_online_Text_kuerzen::before {
content: "Zuletzt onl.";
font-size: 14px; /* Definiere eine Schriftgrösse, die sichtbar ist */
display: inline-block;
}
}
/*-- ------------------------------------------- --*/
/* Basis-Layout */
.roland_premium_abwesend_container {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0; /* Kein standardmässiger Abstand, stattdessen gezielte Margins */
}
.roland_premium_abwesend_heading {
margin-right: 20px; /* 20px Abstand zwischen Text und Premium-Label */
}
.roland_premium_abwesend_label {
margin-top: -10px !important; /* Optional: Verschiebt das Label nach oben */
}
/* 14px Abstand zwischen Premium und Abwesend, nur wenn sie in einer Zeile sind */
.roland_premium_only_label {
margin-right: 14px !important;
}
/* Layout-Anpassung für kleinere Bildschirme */
@media (max-width: 600px) {
.roland_premium_abwesend_label {
margin-bottom: 20px !important; /* Falls "Premium" auf die nächst tiefere Zeile rutscht, dann einen zusätzlichen Abstand nach unten */
}
.roland_premium_only_label {
margin-bottom: 20px !important; /* Falls "Premium" auf die nächst tiefere Zeile rutscht, dann einen zusätzlichen Abstand nach unten */
}
.roland_abwesend_only_label {
display: inline-block; /* Darf nie "!important" sein, da es später mit "display:none" übersteuert werden muss! Wichtig für iOS */
margin-bottom: 20px !important; /* Falls "Abwesende" auf die nächst tiefere Zeile rutscht, dann einen zusätzlichen Abstand nach unten */
}
}
/*-- ------------------------------------------- --*/
/* Bild auf Bildschirmbreite maximieren, ohne diese zu überschreiten */
.roland_custom_menue {
font-size: 16px;
line-height: 1.4;
}
/* Layout-Anpassung für kleinere Bildschirme */
@media (max-width: 600px) {
.roland_custom_menue {
font-size: 17px;
line-height: 1.6;
}
}
/*-- ------------------------------------------- --*/
/*
Diese Einstellungen bewirken, dass der Text abgeschnitten wird und am Ende mit drei Punkten dargestellt
wird, wenn er länger ist als die angegebene Breite (für den Normalfall 200px, für Mobile: 100px).
Hier könnte ich beliebig viele @media-widths hinzufügen, um den Text bei verschiedenen Bildschirmbreiten
zu individuell nach Textbreite zu kürzen.
*/
/* Normalfall: Hier wird der Text ebenfalls automatisch gekürtzt */
.roland_custom_Mobile_Only_kuerze_Text_Standort {
max-width: 230px !important;
overflow: hidden !important;
text-overflow: ellipsis !important; /* Text wird abgeschnitten und mit drei Punkten dargestellt */
white-space: nowrap !important;
display: inline-block !important;
line-height: 1.2;
position: relative;
top: 0px; /* Nachkorrektur bei Mobile: Justierung, um den Text bei Mobile leicht runterzusetzen */
}
/* Mobile Geräte - z. B. bei einer Breite unter 340px */
@media (min-width: 300px) and (max-width: 600px) {
.roland_custom_Mobile_Only_kuerze_Text_Standort {
max-width: 90px !important;
}
}
@media (min-width: 360px) and (max-width: 600px) {
.roland_custom_Mobile_Only_kuerze_Text_Standort {
max-width: 110px !important;
}
}
@media (min-width: 380px) and (max-width: 600px) {
.roland_custom_Mobile_Only_kuerze_Text_Standort {
max-width: 130px !important;
}
}
@media (min-width: 400px) and (max-width: 600px) {
.roland_custom_Mobile_Only_kuerze_Text_Standort {
max-width: 150px !important;
}
}
@media (min-width: 420px) and (max-width: 600px) {
.roland_custom_Mobile_Only_kuerze_Text_Standort {
max-width: 170px !important;
}
}
@media (min-width: 440px) and (max-width: 600px) {
.roland_custom_Mobile_Only_kuerze_Text_Standort {
max-width: 190px !important;
}
}
@media (min-width: 460px) and (max-width: 600px) {
.roland_custom_Mobile_Only_kuerze_Text_Standort {
max-width: 210px !important;
}
}
/*-- ------------------------------------------- --*/
/*
Diese Einstellungen bewirken, dass der Text abgeschnitten wird und am Ende mit drei Punkten dargestellt
wird, wenn er länger ist als die angegebene Breite (in diesem Fall 300px).
Hier könnte ich beliebig viele @media-widths hinzufügen, um den Text bei verschiedenen Bildschirmbreiten
zu individuell nach Textbreite zu kürzen.
*/
/* Wrapper für die Überschrift: sorgt für nebeneinanderliegende Elemente (Quote – Text – Quote) */
H3.roland_custom_Mobile_Only_kuerze_Text_Header {
display: flex !important; /* Nebeneinander */
align-items: center !important; /* Vertikal zentriert – sorgt dafür, dass alle Kindelemente auf gleicher Höhe ausgerichtet sind */
flex-wrap: nowrap !important; /* Kein Umbruch */
gap: 0 !important; /* Kein Abstand zwischen den Elementen */
margin: 0 !important; /* Sicherstellen, dass kein zusätzlicher Abstand entsteht */
padding: 0 !important;
}
.roland_custom_Mobile_Only_kuerze_Text_bei_300px {
color: #3B3B3B;
font-family: Lato, sans-serif;
font-weight: bold;
font-size: 17px !important;
overflow: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis;
min-width: 0; /* Wichtig bei Flexbox für korrektes Kürzen */
display: block !important; /* Verhindert inline-spezifische Effekte */
line-height: 1.2;
position: relative;
top: 1px; /* Leichte Justierung für gleichmässige Höhe mit den Quotes */
padding: 0 !important;
margin: 0 2px 0 2px !important; /* Nur hier werden die Abstände Links und Rechts zum Quote eingestellt! */
box-sizing: border-box !important;
}
/* Start-Anführungszeichen (links) */
.roland_custom_Mobile_Only_kuerze_Text_Quote_Icon_Start {
color: darkorange;
font-weight: bold;
font-size: 26px !important;
font-family: sans-serif;
line-height: 1.2;
display: inline-block; /* Sicherstellen, dass es sich wie Text verhält */
position: relative;
top: 17px;
padding: 0 !important;
margin: 0 !important;
}
/* Ende-Anführungszeichen (rechts) */
.roland_custom_Mobile_Only_kuerze_Text_Quote_Icon_Ende {
color: darkorange;
font-weight: bold;
font-size: 26px !important;
font-family: sans-serif;
line-height: 1.2;
display: inline-block;
position: relative;
top: 1px;
padding: 0 !important;
margin: 0 !important;
}
/* Kürzt lange Gruppentitel auf Mobile – mit Punkten (…), wenn sie zu lang sind */
/* Mobile Geräte – z. B. bei einer Breite unter 550px */
@media (max-width: 550px) {
.roland_custom_Mobile_Only_kuerze_Text_bei_300px {
/* Achtung: Hier nicht auf Edge-Cases optimieren! Der Abstand ist hier immer grösser zum rechten Quote, das lässt sich nicht ändern! Das ein Titel gekürzt wird auf Mobile kommt selten vor! */
max-width: 300px !important;
margin-left: 3px !important; /* Nur hier werden die Abstände Links und Rechts zum Quote eingestellt! */
}
}
/*-- ------------------------------------------- --*/
/* NICHT Mobile: Abstand von "Persönliche Vorstellung" nach oben */
.roland_custom_remove_margin_top_mobile {
margin-top: 30px !important;
}
/* NUR Mobile: Abstand von "Persönliche Vorstellung" nach oben */
@media (max-width: 768px) {
.roland_custom_remove_margin_top_mobile {
margin-top: 10px !important;
}
}
/*-- ------------------------------------------- --*/
/* Formular-Titel: Schwarz */
.roland_custom_formular_titel_schwarz {
color: #3B3B3B !important; /* schwarz */
/* color: green !important;*/
/*margin-top: 0px;*/
font-family: Lato, sans-serif;
font-size: 14px;
font-weight: bold;
line-height: 15px;
margin-top: 2px !important;
}
/* Formular-Titel: Blau */
.roland_custom_formular_titel_blau {
color: #0080c3 !important; /* blau */
/* color: green !important;*/
/*margin-top: 0px;*/
font-family: Lato, sans-serif;
font-size: 14px;
font-weight: bold;
line-height: 15px;
margin-top: 2px !important;
}
/* Formular-Stern: Rot */
.roland_custom_formular_titel_stern_rot {
color: #F35270 !important; /* rot */
/* color: green !important;*/
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI Web', 'Segoe UI';
font-size: 20px;
font-weight: bold;
}
/* Formular-Stern: Transparent */
.roland_custom_formular_titel_stern_unsichtbar {
color: transparent !important; /* unsichtbar */
/*color: green !important;*/
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI Web', 'Segoe UI';
font-size: 20px;
font-weight: bold;
}
/* Formular-Stern: Transparent - Mobile und Tablet */
/* Ganzes Element bei mobilen Geräten und Tablet ausblenden: damit es linksbündig mit allen anderen Titeln wird (und kein Abstand zum linken Rand entsteht) */
@media (max-width: 958px) {
.roland_custom_formular_titel_stern_unsichtbar {
display: none;
}
}
/*-- ------------------------------------------- --*/
.roland_custom_linkbutton_filterdialog_dicke_unterlinie {
text-decoration: none !important;
border-bottom: 2px solid transparent;
/* padding-bottom: 4px; */
height: 24px; /* Abstand wird über height: 29px; geregelt, das hat mehr Vorteile, als es über padding-bottom: 4px; zu regeln */
display: inline; /* Stelle sicher, dass der Link als inline-Element behandelt wird */
}
.roland_custom_linkbutton_filterdialog_dicke_unterlinie:hover {
border-bottom: 2px; /* Stärke des Unterstrichs */
border-style: solid; /* Stil des Unterstrichs */
border-color: #1c6cbd; /* Farbe des Unterstrichs */
}
/*-- ------------------------------------------- --*/
/* Färbt den Hintergrund der oberen beiden Zeilen des Dropdowns ein */
.roland_custom_dropdown_oberen_zwei_Zeilen_einfaerben .uk-dropdown-nav > li:nth-child(1),
.roland_custom_dropdown_oberen_zwei_Zeilen_einfaerben .uk-dropdown-nav > li:nth-child(2) {
background-color: #eae8e8;
margin: -10px; /* Überschreibt das Padding des Containers */
padding: 10px; /* Beibehaltung des eigenen Paddings innerhalb der Elemente */
}
/* Nur für das 2. Element eine untere graue Kante */
.roland_custom_dropdown_oberen_zwei_Zeilen_einfaerben .uk-dropdown-nav > li:nth-child(2) {
border-bottom: 1px solid #ccc; /* graue Kante mit 1px Breite */
}
/*-- ------------------------------------------- --*/
/* Rolands NAV-Link-Button */
.rolands_custom_link_nav_mobile_button {
display: inline-block;
position: relative; /* Wichtig, damit das Element immer andere überdeckt! */
z-index: 1000; /* Wichtig, damit das Element immer andere überdeckt! */
justify-content: left;
text-align: left;
background-color: transparent !important;
color: #767171;
white-space: nowrap !important;
padding: 0px 0px 0px 0px !important;
margin: 8px 22px 10px 0px !important;
font-family: Lato, sans-serif; /* Schriftart Lato */
font-weight: normal; /* Fett formatierter Text */
font-size: 16px; /* Default-Schriftgrösse nach Bedarf anpassen */
width: auto; /* Breite kann auch festgelegt werden, z.B. width: 200px; */
line-height: 1;
text-decoration: none;
border-radius: 0px;
/* ab hier abwärts wird der Unterstrich geregelt: */
border: none;
border-width: 0px;
border-bottom: 3px; /* Stärke des Unterstrichs */
border-style: solid; /* Stil des Unterstrichs */
border-color: transparent; /* Farbe des Unterstrichs */
/* padding-bottom: 4px; */
/* Achtung, "height" muss an 2 Orten in diesem css geändert werden: */
height: 22px !important; /* Abstand wird über height: 25px; geregelt, das hat mehr Vorteile, als es über padding-bottom: 4px; zu regeln */
}
.rolands_custom_link_nav_mobile_button:hover {
border-color: dodgerblue; /* Farbe des Unterstrichs */
}
/* Wichtige Zusatzklasse, damit ich im Code-Behind steuern kann, ob der NAV-Mobile-Link permanent-unterstrichen angezeigt wird oder nicht! */
.rolands_custom_link_nav_mobile_button.active {
border-color: dodgerblue; /* Farbe des Unterstrichs */
}
.rolands_custom_link_nav_mobile_button .rolands_custom_link_nav_mobile_text {
display: inline-block;
justify-content: left;
text-align: left;
white-space: nowrap !important;
background-color: transparent !important;
font-family: Lato,sans-serif;
font-size: 16px !important;
padding: 0px 0px 0px 0px; /* Passe die Polsterung nach Bedarf an */
margin: 0px 0px 0px 0px; /* Passe den Abstand nach Bedarf an */
font-weight: normal;
color: #767171;
text-decoration: none;
/* Achtung, "height" muss an 2 Orten in diesem css geändert werden: */
height: 22px !important; /* Abstand wird über height: 25px; geregelt, das hat mehr Vorteile, als es über padding-bottom: 4px; zu regeln */
}
.rolands_custom_link_nav_mobile_button .rolands_custom_link_nav_mobile_text:hover {
color: #786565;
font-weight: bold;
}
/*-- ------------------------------------------- --*/
/* Rolands NAV-Link-Button */
.rolands_custom_link_angebote_button {
display: inline-block;
position: relative; /* Wichtig, damit das Element immer andere überdeckt! */
z-index: 1000; /* Wichtig, damit das Element immer andere überdeckt! */
justify-content: left;
text-align: left;
background-color: transparent !important;
color: #767171;
white-space: nowrap !important;
padding: 0px 0px 0px 0px !important;
margin: 0px 0px 0px 0px !important;
font-family: Lato, sans-serif; /* Schriftart Lato */
font-weight: normal; /* Fett formatierter Text */
font-size: 16px; /* Default-Schriftgrösse nach Bedarf anpassen */
width: auto; /* Breite kann auch festgelegt werden, z.B. width: 200px; */
line-height: 1;
text-decoration: none;
border-radius: 0px;
/* ab hier abwärts wird der Unterstrich geregelt: */
border: none;
border-width: 0px;
border-bottom: 2px; /* Stärke des Unterstrichs */
border-style: solid; /* Stil des Unterstrichs */
border-color: transparent; /* Farbe des Unterstrichs */
/* padding-bottom: 4px; */
/* Achtung, "height" muss an 2 Orten in diesem css geändert werden: */
height: 21px !important; /* Abstand wird über height: 24px; geregelt, das hat mehr Vorteile, als es über padding-bottom: 4px; zu regeln */
}
.rolands_custom_link_angebote_button:hover {
border-color: #117fee; /* Farbe des Unterstrichs */
}
.rolands_custom_link_angebote_button .rolands_custom_link_angebote_text {
display: inline-block;
justify-content: left;
text-align: left;
white-space: nowrap !important;
background-color: transparent !important;
font-family: Lato,sans-serif;
font-size: 16px !important;
padding: 0px 0px 0px 0px; /* Passe die Polsterung nach Bedarf an */
margin: 0px 0px 0px 0px; /* Passe den Abstand nach Bedarf an */
font-weight: bold;
color: #e10d0d;
text-decoration: none;
/* Achtung, "height" muss an 2 Orten in diesem css geändert werden: */
height: 21px !important; /* Abstand wird über height: 24px; geregelt, das hat mehr Vorteile, als es über padding-bottom: 4px; zu regeln */
}
.rolands_custom_link_angebote_button .rolands_custom_link_angebote_text:hover {
font-weight: bold;
color: dodgerblue;
}
/*-- ------------------------------------------- --*/
/* Rolands NAV-Link-Button: mit rechts- und links-Überlappung des Unterstriches */
.rolands_custom_link_leitgedanke_button {
display: inline-block;
position: relative; /* Wichtig für ::after */
z-index: 1000; /* Wichtig, damit das Element immer andere überdeckt! */
text-align: left;
background-color: transparent !important;
color: #40508D;
white-space: nowrap !important;
padding: 0px 0px 0px 0px !important;
margin: 0px 0px 0px 0px !important;
font-family: Lato, sans-serif; /* Schriftart Lato */
font-weight: bold; /* Fett formatierter Text */
font-size: 16px; /* Default-Schriftgrösse nach Bedarf anpassen */
width: auto; /* Breite kann auch festgelegt werden, z.B. width: 200px; */
line-height: 1;
text-decoration: none;
/* ab hier abwärts wird der Unterstrich geregelt: */
border: none;
border-radius: 0;
height: 20px !important; /* Abstand wird über height: 24px; geregelt, das hat mehr Vorteile, als es über padding-bottom: 4px; zu regeln */
}
/* Pseudo-Element für Unterstrich: Damit die rechts- und links-Überlappung des Unterstriches funktioniert */
.rolands_custom_link_leitgedanke_button::after {
content: '';
position: absolute;
bottom: 0;
left: 0px; /* 0px überstehend nach links (z.B. 1px überstehend nach links wäre -1) */
width: calc(100% + 3px); /* 0px links + 3px rechts = 3px (Beispiel: nach link: -1px nach rechts: 4px, Total = 5px */
height: 1px; /* Dicke des Unterstrichs */
background-color: #40508D;
z-index: 1;
}
.rolands_custom_link_leitgedanke_text {
display: inline-block;
white-space: nowrap !important;
background-color: transparent !important;
font-family: Lato, sans-serif;
font-size: 16px !important;
padding: 0px 0px 0px 0px; /* Passe die Polsterung nach Bedarf an */
margin: 0px 0px 0px 0px; /* Passe den Abstand nach Bedarf an */
font-weight: bold;
color: #40508D;
text-decoration: none;
}
/*-- ------------------------------------------- --*/
/*
Kleine Zusatzkorrektur nur für «profil.aspx» (betrifft nur Controls unterhalb des UIKit-Formulars)
--------------------------------------------------------------------------------------------------
Betroffene Controls:
- AGB-Checkbox
- Error-Label
- Premium-Mitgliedschaft-Button
- Google-Maps-Button
Diese kleine Korrektur des linken Rands betrifft nur wenige Controls (siehe oben), die NICHT innerhalb
des UIKit-Formulars (class="uk-form-horizontal") platziert sind. Hintergrund: Im UIKit-Formular gibt es
einen roten Stern zur Kennzeichnung von Pflichtfeldern. In der mobilen Darstellung verschieben sich diese
Sterne von der linken Seite des Controls ÜBER das Control nach OBEN. Dadurch rücken die Controls bis an
den äussersten linken Rand. Die weiter unten platzierten Controls, die AUSSERHALB des UIKit-Formulars
liegen, sollen in der mobilen Darstellung ebenfalls ganz nach links verschoben werden, damit sie
linksbündig mit den übrigen (obenstehenden) Controls ausgerichtet sind.
*/
/* Für Mobile (kein Abstand mehr LINKS) */
.roland_custom_profil_padding_left_red_star {
padding: 0px 0px 0px 0px;
}
/* Für Tablet/Desktop (mit Abstand LINKS damit mit rotem Stern oberhalb ausgerichtet) */
@media (min-width: 960px) {
.roland_custom_profil_padding_left_red_star {
padding: 0px 0px 0px 14px;
}
}
/*-- ------------------------------------------- --*/
/* Alter (Gender) - */
/* Standard: Mobile zuerst */
.roland_custom_profil_alter_gender_long_show_desktop {
display: none;
}
.roland_custom_profil_alter_gender_short_show_mobile {
display: inline;
}
/* Ab 600px: Desktop-Ansicht */
@media (min-width: 600px) {
.roland_custom_profil_alter_gender_long_show_desktop {
display: inline;
}
.roland_custom_profil_alter_gender_short_show_mobile {
display: none;
}
}
/*-- ------------------------------------------- --*/
/* Sprache(n) */
/* Standard: Mobile zuerst */
.roland_custom_profil_sprachen_long_show_desktop {
display: none;
}
.roland_custom_profil_sprachen_short_show_mobile {
display: inline;
}
/* Ab 600px: Desktop-Ansicht */
@media (min-width: 600px) {
.roland_custom_profil_sprachen_long_show_desktop {
display: inline;
}
.roland_custom_profil_sprachen_short_show_mobile {
display: none;
}
}
/*-- ------------------------------------------- --*/
/* Angabe unterdrückt */
/* Standard: Mobile zuerst */
.roland_custom_profil_angabe_unterdrueckt_long_show_desktop {
display: none;
}
.roland_custom_profil_angabe_unterdrueckt_short_show_mobile {
display: inline;
}
/* Ab 600px: Desktop-Ansicht */
@media (min-width: 600px) {
.roland_custom_profil_angabe_unterdrueckt_long_show_desktop {
display: inline;
}
.roland_custom_profil_angabe_unterdrueckt_short_show_mobile {
display: none;
}
}
/*-- ------------------------------------------- --*/
/* PLZ + Ort */
/* Standard: Mobile zuerst */
.roland_custom_profil_ort_long_show_desktop {
display: none;
}
.roland_custom_profil_ort_short_show_mobile {
display: inline;
}
/* Ab 600px: Desktop-Ansicht */
@media (min-width: 600px) {
.roland_custom_profil_ort_long_show_desktop {
display: inline;
}
.roland_custom_profil_ort_short_show_mobile {
display: none;
}
}
/*-- ------------------------------------------- --*/
/* PLZ + Ort */
/* Standard: Mobile zuerst */
.roland_custom_profil_aktualisiert_long_show_desktop {
display: none;
}
.roland_custom_profil_aktualisiert_short_show_mobile {
display: inline;
}
/* Ab 600px: Desktop-Ansicht */
@media (min-width: 600px) {
.roland_custom_profil_aktualisiert_long_show_desktop {
display: inline;
}
.roland_custom_profil_aktualisiert_short_show_mobile {
display: none;
}
}
/*-- ------------------------------------------- --*/
/* Der Ort-Text wird hier dynamisch mit 3 Punkten (...) gekürtzt */
/* Bei Standard wird nicht gekürtzt */
.roland_custom_profil_ort_dynamisch_kuerzen {
display: block !important; /* WICHTIG */
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Dynamisch kürzen */
@media (min-width: 100px) and (max-width: 600px) {
.roland_custom_profil_ort_dynamisch_kuerzen {
max-width: 72px !important;
}
}
/* Dynamisch kürzen */
@media (min-width: 340px) and (max-width: 600px) {
.roland_custom_profil_ort_dynamisch_kuerzen {
max-width: 81px !important;
}
}
/* Dynamisch kürzen */
@media (min-width: 350px) and (max-width: 600px) {
.roland_custom_profil_ort_dynamisch_kuerzen {
max-width: 90px !important;
}
}
/* Dynamisch kürzen */
@media (min-width: 360px) and (max-width: 600px) {
.roland_custom_profil_ort_dynamisch_kuerzen {
max-width: 99px !important;
}
}
/*
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Referenz-Test-Breite:
--> Smälstes iPhone: iPhone 13 Mini!! Viewport: 375px
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Dynamisch kürzen:
*/
@media (min-width: 370px) and (max-width: 600px) {
.roland_custom_profil_ort_dynamisch_kuerzen {
max-width: 108px !important;
}
}
/* Dynamisch kürzen */
@media (min-width: 380px) and (max-width: 600px) {
.roland_custom_profil_ort_dynamisch_kuerzen {
max-width: 117px !important;
}
}
/*
Dieses min-width entspricht vermutlich meinem Smartphone, habe aber Pixel für min-width
für iPhones angepasst und NICHT für Samsung (mein Smartphone) - da für Safari und iOS
ein Unterschied besteht! Daher IMMER für iOS in BrowserStack überprüfen!
Dynamisch kürzen
*/
@media (min-width: 390px) and (max-width: 600px) {
.roland_custom_profil_ort_dynamisch_kuerzen {
max-width: 126px !important;
}
}
/* Dynamisch kürzen */
@media (min-width: 400px) and (max-width: 600px) {
.roland_custom_profil_ort_dynamisch_kuerzen {
max-width: 135px !important;
}
}
/* Dynamisch kürzen */
@media (min-width: 410px) and (max-width: 600px) {
.roland_custom_profil_ort_dynamisch_kuerzen {
max-width: 144px !important;
}
}
/* Dynamisch kürzen */
@media (min-width: 420px) and (max-width: 600px) {
.roland_custom_profil_ort_dynamisch_kuerzen {
max-width: 153px !important;
}
}
/* Dynamisch kürzen */
@media (min-width: 430px) and (max-width: 600px) {
.roland_custom_profil_ort_dynamisch_kuerzen {
max-width: 162px !important;
}
}
/*
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Referenz-Test-Breite:
--> Breitestes iPhone: iPhone 16 Pro Max!! Viewport: 440px
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Dynamisch kürzen:
*/
@media (min-width: 440px) and (max-width: 600px) {
.roland_custom_profil_ort_dynamisch_kuerzen {
max-width: 171px !important;
/*background-color: skyblue;*/
}
}
/* Dynamisch kürzen */
@media (min-width: 450px) and (max-width: 600px) {
.roland_custom_profil_ort_dynamisch_kuerzen {
max-width: 180px !important;
}
}
/* Dynamisch kürzen */
@media (min-width: 460px) and (max-width: 600px) {
.roland_custom_profil_ort_dynamisch_kuerzen {
max-width: 189px !important;
}
}
/* Dynamisch kürzen */
@media (min-width: 470px) and (max-width: 600px) {
.roland_custom_profil_ort_dynamisch_kuerzen {
max-width: 198px !important;
}
}
/* Dynamisch kürzen */
@media (min-width: 480px) and (max-width: 600px) {
.roland_custom_profil_ort_dynamisch_kuerzen {
max-width: 207px !important;
}
}
/*-- ------------------------------------------- --*/
.roland_custom_master_link_list a {
text-decoration: none;
color: #333333;
}
.roland_custom_master_link_list a:hover {
text-decoration: underline;
}
/*-- ------------------------------------------- --*/
/* Abstand zwischen den Radiobuttons resp. zwischen den Checkboxen: */
/* Standard: Mobile zuerst */
.rolands_custom_padding_top_Radio_Checkbox_Mobile {
padding-top: 6px !important; /* Abstand bei Mobile zwischen den Radiobuttons resp. zwischen den Checkboxen grösser machen! */
}
/* Ab 600px: Desktop-Ansicht */
@media (min-width: 600px) {
.rolands_custom_padding_top_Radio_Checkbox_Mobile {
padding-top: 2px !important;
}
}
/*-- ------------------------------------------- --*/
.rolands_custom_svg_heller {
filter: brightness(1.1); /* svg heller machen */
}
/*-- ------------------------------------------- --*/