20.933
Bearbeitungen
RaWen (Diskussion | Beiträge) KKeine Bearbeitungszusammenfassung |
RaWen (Diskussion | Beiträge) KKeine Bearbeitungszusammenfassung |
||
(28 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
.infobox{ | .infobox{ | ||
background: #f8f8f8; | background: #f8f8f8; | ||
border-radius: 6px; | border-radius: 6px; /* Abgerundete Ecken */ | ||
box-sizing: border-box; | box-sizing: border-box; | ||
max-width: 330px; | max-width: 330px; | ||
Zeile 10: | Zeile 10: | ||
margin: 0 0 1.4em 1.4em; | margin: 0 0 1.4em 1.4em; | ||
padding: 1.4em;} | padding: 1.4em;} | ||
.logo, .bild { | |||
box-sizing: border-box;} | |||
/* Grid-Container f. Logo & Bild */ | |||
.logo-bild-container { | |||
display: grid; | |||
grid-template-columns: repeat(25, 4%); /* 25-Spalten-Grid für minutiöse Kontrolle, jede Spalte 4 % der Infobox breit */ | |||
grid-template-rows: repeat(4, auto) 1fr; /* Automatische Höhe für Logo, Grid verbleibender Platz für Bild */ | |||
width: 100%; /* Container nimmt volle Breite ein */ | |||
margin: 0 0 1.8em 0 /* unterer Abstand zum Text der Infobox*/} | |||
.logo img, .bild img { | |||
height: auto;} | |||
/* Stil für das Logo */ | |||
.logo { | |||
z-index: 2; | |||
grid-column: 1 / -1; /* Logo nimmt alle Spalten der Grid ein */ | |||
grid-row: 1 / 5; /* Logo erstreckt sich über 5 Zeilen der Grid */ | |||
display: flex; /* Logo wird im Grid angeordnet */ | |||
justify-content: center; /* Zentriert das Logo horizontal */ | |||
align-items: center; /* Zentriert das Logo vertikal */ | |||
padding: 6px; | |||
background: #fff; /* Hintergrundfarbe */ | |||
border-radius: 6px; /* Runde Ecken */ | |||
box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25); /* Schatten */ | |||
max-width: 85%; | |||
width: max-content; | |||
height: max-content;} | |||
.logo img { | |||
max-height: 100px; | |||
max-width: 100%; | |||
width: auto;} | |||
/* Stil für das Bild*/ | |||
.bild { | |||
width: 100%; /* Nimmt die volle Breite ein */ | |||
grid-column: 2 / -1; /* Bild erstreckt sich über Spalte 2 bis Ende */ | |||
grid-row: 4 / -1; /* Bild beginnt in 4. Zeile, um sich mit dem Logo zu überschneiden */} | |||
.bild img { | |||
width: 100%; /* Bild nimmt volle Breite ein */ | |||
height: auto; | |||
margin-bottom: 1.2em; | |||
height: auto; /* Höhe passt sich dem Seitenverhältnis des Bildes an */ | |||
border-radius: 6px; | |||
box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25); /* Schatteneffekt */} | |||
/* Aspekt-Gruppen */ | |||
.infobox .aspect-group{ | .infobox .aspect-group{ | ||
Zeile 16: | Zeile 67: | ||
border-top: 1px solid #ccc;} | border-top: 1px solid #ccc;} | ||
.infobox . | .infobox .first{ | ||
border-top: none;} | |||
.infobox . | .infobox .notitle{ | ||
border-top: none;} | padding-top: 0.8em !important;} | ||
.infobox .sub{ | |||
border-top: none !important; | |||
margin: 1.5em 0 0 0 !important;} | |||
.infobox .head{ | .infobox .head{ | ||
font-size: 1.1em; | font-size: 1.1em; | ||
font-weight: bold; | font-weight: bold; | ||
line-height: 1.6; | |||
margin: 1em 0; | margin: 1em 0; | ||
border: 0; | border: 0; | ||
Zeile 44: | Zeile 100: | ||
box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25); | box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25); | ||
max-width: 85%;} | max-width: 85%;} | ||
/* Stil für den Titel der Infobox, wenn kein Logo vorhanden ist */ | |||
.title-no-logo { | |||
grid-column: 1 / -1; /* Überschrift nimmt alle Spalten ein, wie das Logo */ | |||
grid-row: 1 / 5; /* Überschrift erstreckt sich über dieselben Zeilen wie das Logo */ | |||
display: flex; /* Flexibles Layout für Zentrierung */ | |||
justify-content: center; /* Zentriert den Text horizontal */ | |||
align-items: center; /* Zentriert den Text vertikal */ | |||
z-index: 2; /* Stellt sicher, dass die Überschrift über dem Bild liegt */ | |||
background: #fff; | |||
border-radius: 6px; /* Runde Ecken */ | |||
box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25); /* Schatten für Hervorhebung */ | |||
padding: 6px; | |||
max-width: 85%; | |||
width: max-content; | |||
height: max-content; | |||
font-size: 1.2em; | |||
font-weight: bold; | |||
line-height: 1.6;} | |||
.title-no-logo.overlap { | |||
background: #fff; | |||
z-index: 2;} | |||
.infobox .title-noshow{ | |||
display: none;} | |||
/* Stil für den Titel der Infobox, wenn kein Bild vorhanden ist */ | |||
.infobox .title-no-img{ | .infobox .title-no-img{ | ||
Zeile 51: | Zeile 136: | ||
text-align: left; | text-align: left; | ||
background: #fff; | background: #fff; | ||
box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25); | |||
padding: 0.4em 0.8em 0.4em 0.8em; | padding: 0.4em 0.8em 0.4em 0.8em; | ||
font-size: 1.2em; | font-size: 1.2em; | ||
font-weight: bold; | font-weight: bold; | ||
line-height: 1.6; | |||
color: #000;} | |||
.infobox .motto{ | .infobox .motto{ | ||
font-size: | font-size: 115% !important; | ||
font-weight: normal; | font-weight: normal; | ||
padding: 0 | padding: 0; | ||
margin: 0; | |||
font-style: italic !important; | font-style: italic !important; | ||
text-align: | text-align: left;} | ||
.infobox .media-container{ | .infobox .media-container{ | ||
Zeile 73: | Zeile 157: | ||
margin: 0; | margin: 0; | ||
border-radius: 6px; | border-radius: 6px; | ||
box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25) | box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);} | ||
.infobox .map-container .karte{ | .infobox .map-container .karte{ | ||
Zeile 86: | Zeile 169: | ||
.infobox .leaflet-container{ | .infobox .leaflet-container{ | ||
width: 100% !important; /* | width: 100% !important; /* Überschreibt die (inline) width-Anweisung */ | ||
border-radius: 6px; | border-radius: 6px; | ||
margin: 0 auto;} | margin: 0 auto;} | ||
Zeile 99: | Zeile 182: | ||
margin-right: auto; | margin-right: auto; | ||
margin-bottom: 0.8em; | margin-bottom: 0.8em; | ||
display: block;} | display: block;} | ||
Zeile 125: | Zeile 188: | ||
.infobox .strassenbild{ | .infobox .strassenbild{ | ||
margin | margin: 1.2em 0 1.2em 0;} | ||
.infobox .strassenbild img{ | .infobox .strassenbild img{ | ||
Zeile 137: | Zeile 200: | ||
display: block;} | display: block;} | ||
.infobox . | .infobox .unter_logo{ | ||
padding-top: 2em;} | |||
.infobox .strassenbild p{ | .infobox .strassenbild p{ | ||
Zeile 189: | Zeile 236: | ||
width: 100%; | width: 100%; | ||
padding: 2em 2.5em;} | padding: 2em 2.5em;} | ||
.infobox .title{ | .infobox .title{ | ||
Zeile 203: | Zeile 247: | ||
width: 49%; | width: 49%; | ||
margin-right: 2%;} | margin-right: 2%;} | ||
.noscale{ | |||
width: 100% !important; | |||
margin: 0! important;} | |||
.infobox .strassenbild{ | .infobox .strassenbild{ | ||
Zeile 254: | Zeile 302: | ||
max-width: none; | max-width: none; | ||
width: 100%;} | width: 100%;} | ||
.infobox .title{ | .infobox .title{ | ||
Zeile 263: | Zeile 308: | ||
.infobox .services dt{ | .infobox .services dt{ | ||
display: flex;} | display: flex;} | ||
.noscale{ | |||
width: 100% !important; | |||
margin: 0! important;} | |||
} | } | ||
Zeile 269: | Zeile 319: | ||
max-width: none; | max-width: none; | ||
width: 100%;} | width: 100%;} | ||
.infobox-pagewide { | .infobox-pagewide { | ||
Zeile 281: | Zeile 328: | ||
.infobox .title{ | .infobox .title{ | ||
max-width: 85% !important;} | max-width: 85% !important;} | ||
.noscale{ | |||
width: 100% !important; | |||
margin: 0! important;} | |||
} | } | ||
Zeile 287: | Zeile 339: | ||
max-width: none; | max-width: none; | ||
width: 100%;} | width: 100%;} | ||
.infobox-pagewide{ | .infobox-pagewide{ | ||
Zeile 299: | Zeile 348: | ||
.infobox .title{ | .infobox .title{ | ||
max-width: 85% !important;} | max-width: 85% !important;} | ||
.noscale{ | |||
width: 100% !important; | |||
margin: 0! important;} | |||
} | } | ||