* {
box-sizing: border-box;
}
html {
min-height: 100%;
}
body {
margin: 0;
min-height: 100%;
font-family:
Arial,
Helvetica,
sans-serif;
background: #f3f5f7;
color: #17212b;
}
a {
color: inherit;
}
.container {
width: min(
1380px,
calc(100% - 40px)
);
margin: 0 auto;
}
.site-header {
background: #ffffff;
border-bottom: 1px solid #dfe5ea;
position: sticky;
top: 0;
z-index: 50;
}
.header-inner {
min-height: 86px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
}
.brand {
display: flex;
align-items: center;
gap: 13px;
text-decoration: none;
}
.brand-radar {
font-size: 48px;
line-height: 1;
}
.brand strong {
display: block;
font-size: 25px;
letter-spacing: 1px;
}
.brand small {
display: block;
margin-top: 3px;
font-size: 14px;
color: #66727d;
}
.top-nav {
display: flex;
gap: 22px;
}
.top-nav a {
text-decoration: none;
font-weight: 700;
}
.hero {
padding: 48px 0 36px;
}
.hero-box {
background: #ffffff;
border-radius: 18px;
padding: 42px;
border: 1px solid #e1e6ea;
}
.hero h1 {
margin: 0 0 12px;
font-size: clamp(
34px,
5vw,
58px
);
}
.hero p {
margin: 0;
font-size: 19px;
color: #62707c;
}
.section {
padding: 22px 0 42px;
}
.section-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 20px;
}
.section-title h2 {
margin: 0;
font-size: 28px;
}
.grid {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 20px;
}
.card {
background: #ffffff;
border: 1px solid #e1e6ea;
border-radius: 14px;
overflow: hidden;
}
.card-image {
height: 165px;
background:
linear-gradient(
135deg,
#d8dde2,
#eef1f3
);
}
.card-body {
padding: 20px;
}
.card-kicker {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
color: #697681;
margin-bottom: 8px;
}
.card h3 {
margin: 0 0 9px;
font-size: 20px;
}
.card p {
margin: 0;
color: #65727d;
line-height: 1.5;
}
.ad-banner {
min-height: 120px;
background: #ffffff;
border: 2px dashed #ccd3d9;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #7a858e;
padding: 20px;
}
.city-grid {
display: grid;
grid-template-columns:
repeat(
auto-fit,
minmax(270px, 1fr)
);
gap: 20px;
}
.city-link {
display: block;
text-decoration: none;
background: #ffffff;
padding: 28px;
border-radius: 14px;
border: 1px solid #e1e6ea;
}
.city-link strong {
display: block;
font-size: 24px;
}
.city-link span {
display: block;
margin-top: 7px;
color: #697681;
}
.login-wrap {
min-height: calc(100vh - 170px);
display: grid;
place-items: center;
padding: 50px 20px;
}
.login-card {
width: min(460px, 100%);
background: #ffffff;
padding: 36px;
border-radius: 16px;
border: 1px solid #e1e6ea;
}
.login-card h1 {
margin-top: 0;
}
.field {
margin-bottom: 18px;
}
.field label {
display: block;
font-weight: 700;
margin-bottom: 7px;
}
.field input {
width: 100%;
padding: 13px 14px;
border: 1px solid #bdc7cf;
border-radius: 8px;
font-size: 16px;
}
.button {
display: inline-block;
border: 0;
border-radius: 8px;
padding: 13px 20px;
background: #17212b;
color: #ffffff;
font-size: 15px;
font-weight: 700;
cursor: pointer;
text-decoration: none;
}
.error {
padding: 13px;
background: #fff0f0;
border: 1px solid #efc4c4;
border-radius: 8px;
margin-bottom: 18px;
}
.admin-header {
background: #17212b;
color: #ffffff;
padding: 18px 0;
}
.admin-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
}
.admin-shell {
padding: 34px 0 60px;
}
.stats {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 18px;
margin: 25px 0 35px;
}
.stat {
background: #ffffff;
border: 1px solid #e1e6ea;
border-radius: 12px;
padding: 24px;
}
.stat-number {
font-size: 34px;
font-weight: 700;
}
.stat-label {
color: #687580;
margin-top: 5px;
}
.admin-grid {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 18px;
}
.admin-tile {
display: block;
text-decoration: none;
background: #ffffff;
border: 1px solid #e1e6ea;
border-radius: 12px;
padding: 24px;
}
.admin-tile strong {
font-size: 19px;
}
.admin-tile span {
display: block;
color: #687580;
margin-top: 7px;
line-height: 1.45;
}
.site-footer {
background: #17212b;
color: #ffffff;
padding: 38px 0;
margin-top: 50px;
}
.footer-inner {
display: flex;
justify-content: space-between;
gap: 30px;
}
@media (max-width: 1000px) {
.grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.stats {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.admin-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 650px) {
.container {
width: min(
100% - 24px,
1380px
);
}
.header-inner {
min-height: 74px;
}
.top-nav {
display: none;
}
.brand strong {
font-size: 20px;
}
.brand-radar {
font-size: 38px;
}
.hero {
padding-top: 24px;
}
.hero-box {
padding: 26px 20px;
}
.grid,
.stats,
.admin-grid {
grid-template-columns: 1fr;
}
.footer-inner {
flex-direction: column;
}
}
/* ==================================================
STADTTREFFPUNKT ADMIN STÄDTE
================================================== */
.admin-brand-link {
color: #ffffff;
text-decoration: none;
font-weight: 700;
}
.admin-user-area {
display: flex;
align-items: center;
gap: 18px;
}
.admin-user-area a {
color: #ffffff;
}
.admin-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
margin-bottom: 25px;
}
.admin-page-heading {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 20px;
margin-bottom: 25px;
}
.admin-page-heading h1 {
margin: 0 0 7px;
}
.admin-page-heading p {
margin: 0;
color: #687580;
}
.admin-count {
background: #ffffff;
border: 1px solid #e1e6ea;
border-radius: 999px;
padding: 8px 14px;
font-weight: 700;
}
.admin-panel {
background: #ffffff;
border: 1px solid #e1e6ea;
border-radius: 14px;
padding: 26px;
}
.admin-table-wrap {
overflow-x: auto;
padding: 0;
}
.admin-table {
width: 100%;
border-collapse: collapse;
}
.admin-table th {
text-align: left;
padding: 16px 18px;
background: #f7f8f9;
border-bottom: 1px solid #e1e6ea;
font-size: 13px;
text-transform: uppercase;
letter-spacing: .4px;
color: #65727d;
}
.admin-table td {
padding: 18px;
border-bottom: 1px solid #edf0f2;
vertical-align: middle;
}
.admin-table tbody tr:last-child td {
border-bottom: 0;
}
.table-subline {
display: block;
margin-top: 5px;
color: #74808a;
}
.table-actions {
text-align: right !important;
}
.table-action-group {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
gap: 7px;
}
.inline-form {
display: inline;
margin: 0;
}
.small-button {
appearance: none;
border: 1px solid #cbd3da;
background: #ffffff;
border-radius: 7px;
padding: 8px 11px;
text-decoration: none;
color: #17212b;
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
.small-button:hover {
background: #f1f3f5;
}
.button-secondary {
background: #ffffff;
color: #17212b;
border: 1px solid #cbd3da;
}
.success {
padding: 14px 16px;
margin-bottom: 20px;
background: #edf9f1;
border: 1px solid #b9dfc5;
border-radius: 8px;
}
.status-badge {
display: inline-block;
padding: 5px 9px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
}
.status-active {
background: #e5f6ea;
color: #17652f;
}
.status-inactive {
background: #f0f1f2;
color: #65717a;
}
.status-headquarters {
background: #e8edf9;
color: #294e96;
}
.form-grid {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 20px;
}
.field-full {
grid-column: 1 / -1;
}
.field select {
width: 100%;
padding: 13px 14px;
border: 1px solid #bdc7cf;
border-radius: 8px;
background: #ffffff;
font-size: 16px;
}
.field small {
display: block;
margin-top: 6px;
line-height: 1.4;
color: #74808a;
}
.checkbox-row {
display: flex !important;
align-items: flex-start;
gap: 12px;
cursor: pointer;
}
.checkbox-row input {
width: auto;
margin-top: 4px;
}
.checkbox-row span {
display: block;
}
.checkbox-row strong {
display: block;
}
.checkbox-row small {
display: block;
}
.form-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 12px;
}
.admin-tile {
transition:
transform .15s ease,
box-shadow .15s ease;
}
.admin-tile:hover {
transform: translateY(-2px);
box-shadow:
0 6px 20px
rgba(0, 0, 0, .06);
}
code {
font-family:
Consolas,
Monaco,
monospace;
font-size: 13px;
}
@media (max-width: 750px) {
.admin-header-inner {
align-items: flex-start;
flex-direction: column;
gap: 8px;
padding-top: 13px;
padding-bottom: 13px;
}
.admin-user-area {
width: 100%;
justify-content: space-between;
}
.admin-toolbar {
align-items: stretch;
flex-direction: column;
}
.admin-toolbar .button {
width: 100%;
text-align: center;
}
.admin-page-heading {
align-items: flex-start;
flex-direction: column;
}
.form-grid {
grid-template-columns: 1fr;
}
.field-full {
grid-column: auto;
}
.admin-table {
min-width: 850px;
}
}
.status-preparation {
background: #fff5d8;
color: #765600;
}
.status-paused {
background: #fff0d9;
color: #8a5100;
}
/* ==================================================
STADTTREFFPUNKT STADTPARTNER UND LIZENZEN
================================================== */
.partner-editor {
display: grid;
gap: 22px;
}
.partner-editor .admin-panel h2 {
margin-top: 0;
margin-bottom: 8px;
}
.section-help {
margin-top: 0;
margin-bottom: 22px;
color: #687580;
line-height: 1.6;
}
.field textarea {
width: 100%;
min-height: 110px;
resize: vertical;
padding: 13px 14px;
border: 1px solid #bdc7cf;
border-radius: 8px;
background: #ffffff;
font: inherit;
box-sizing: border-box;
}
.empty-table {
padding: 35px !important;
text-align: center;
color: #74808a;
}
/* ==================================================
STADTTREFFPUNKT CONTENT ADMIN
================================================== */
.content-admin-grid {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 18px;
}
.content-admin-card {
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
background: #ffffff;
border: 1px solid #e1e6ea;
border-radius: 14px;
padding: 22px;
}
.content-admin-card h2 {
margin: 0 0 6px;
font-size: 18px;
}
.content-admin-card p {
margin: 0;
color: #74808a;
}
.content-admin-count {
min-width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #f0f3f6;
font-weight: 800;
font-size: 16px;
}
@media (max-width: 1100px) {
.content-admin-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 650px) {
.content-admin-grid {
grid-template-columns: 1fr;
}
}
/* ==================================================
STADTTREFFPUNKT NEWS SOURCES ADMIN
================================================== */
.admin-toolbar-group {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.content-admin-link {
color: inherit;
text-decoration: none;
transition:
transform .15s ease,
box-shadow .15s ease;
}
.content-admin-link:hover {
transform: translateY(-2px);
box-shadow:
0 6px 20px
rgba(0, 0, 0, .07);
}
.admin-table a {
color: inherit;
}
@media (max-width: 750px) {
.admin-toolbar-group {
display: grid;
width: 100%;
}
}
/* ==========================================================
STADTTREFFPUNKT PUBLIC PORTAL V1
BLOCK 11
========================================================== */
:root {
--or-bg: #f4f6f8;
--or-card: #ffffff;
--or-text: #17202a;
--or-muted: #667085;
--or-border: #e4e7ec;
--or-dark: #111827;
--or-darker: #0b1220;
--or-accent: #ef3e36;
--or-accent-dark: #c92f29;
--or-soft: #fff1f0;
--or-blue-soft: #eef5ff;
--or-radius: 20px;
--or-shadow:
0 12px 35px
rgba(17, 24, 39, 0.08);
}
html {
scroll-behavior: smooth;
}
body.or-public {
margin: 0;
background: var(--or-bg);
color: var(--or-text);
font-family:
Inter,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
}
.or-public * {
box-sizing: border-box;
}
.or-public a {
color: inherit;
}
.or-shell {
width: min(1180px, calc(100% - 40px));
margin: 0 auto;
}
/* ==========================================================
HEADER
========================================================== */
.or-site-header {
position: sticky;
top: 0;
z-index: 100;
border-bottom: 1px solid
rgba(255,255,255,.08);
background:
rgba(11, 18, 32, .96);
backdrop-filter: blur(12px);
color: #fff;
}
.or-header-inner {
min-height: 76px;
display: flex;
align-items: center;
gap: 32px;
}
.or-brand {
display: inline-flex;
align-items: center;
gap: 12px;
text-decoration: none;
flex-shrink: 0;
}
.or-brand-mark {
width: 44px;
height: 44px;
display: inline-grid;
place-items: center;
border-radius: 50%;
background:
radial-gradient(
circle at center,
#fff 0 7%,
transparent 8% 22%,
rgba(255,255,255,.9) 23% 26%,
transparent 27% 45%,
rgba(255,255,255,.55) 46% 49%,
transparent 50%
),
var(--or-accent);
color: transparent;
box-shadow:
0 0 0 4px
rgba(239,62,54,.12);
}
.or-brand-copy {
display: flex;
flex-direction: column;
line-height: 1.05;
}
.or-brand-copy strong {
font-size: 18px;
letter-spacing: .08em;
}
.or-brand-copy small {
margin-top: 6px;
color: #cbd5e1;
font-size: 12px;
}
.or-main-nav {
display: flex;
gap: 24px;
margin-left: auto;
}
.or-main-nav a {
text-decoration: none;
color: #dbe2ea;
font-size: 14px;
font-weight: 650;
}
.or-main-nav a:hover {
color: #fff;
}
.or-header-city-button {
padding: 11px 16px;
border: 1px solid
rgba(255,255,255,.2);
border-radius: 999px;
color: #fff;
text-decoration: none;
font-size: 13px;
font-weight: 700;
white-space: nowrap;
}
/* ==========================================================
CITY HERO
========================================================== */
.or-city-hero {
overflow: hidden;
background:
radial-gradient(
circle at 85% 25%,
rgba(239,62,54,.35),
transparent 28%
),
linear-gradient(
135deg,
#111827,
#0b1220
);
color: #fff;
}
.or-city-hero-grid {
min-height: 340px;
display: grid;
grid-template-columns: 1.35fr .65fr;
align-items: center;
gap: 50px;
}
.or-city-hero h1,
.or-home-hero h1 {
margin: 10px 0 14px;
font-size:
clamp(38px, 6vw, 70px);
line-height: .98;
letter-spacing: -.045em;
}
.or-city-hero p,
.or-home-hero p {
max-width: 660px;
color: #d0d5dd;
font-size: 19px;
line-height: 1.6;
}
.or-eyebrow {
display: inline-block;
color: var(--or-accent);
font-size: 12px;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
}
.or-eyebrow.light {
color: #ffd1ce;
}
.or-city-stats {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}
.or-city-stats span {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border: 1px solid
rgba(255,255,255,.12);
border-radius: 999px;
background:
rgba(255,255,255,.06);
color: #dbe2ea;
font-size: 13px;
}
.or-city-stats strong {
color: #fff;
font-size: 16px;
}
.or-radar-visual {
position: relative;
width: min(290px, 100%);
aspect-ratio: 1;
justify-self: end;
}
.or-radar-ring {
position: absolute;
inset: 50%;
border: 1px solid
rgba(255,255,255,.16);
border-radius: 50%;
transform: translate(-50%, -50%);
}
.or-radar-ring.ring-1 {
width: 35%;
height: 35%;
}
.or-radar-ring.ring-2 {
width: 66%;
height: 66%;
}
.or-radar-ring.ring-3 {
width: 96%;
height: 96%;
}
.or-radar-center {
position: absolute;
inset: 50%;
width: 72px;
height: 72px;
display: grid;
place-items: center;
transform: translate(-50%, -50%);
border-radius: 50%;
background: var(--or-accent);
box-shadow:
0 0 60px
rgba(239,62,54,.48);
font-size: 36px;
}
/* ==========================================================
HOME
========================================================== */
.or-home-hero {
padding: 100px 0 90px;
background:
radial-gradient(
circle at 80% 20%,
rgba(239,62,54,.28),
transparent 25%
),
linear-gradient(
135deg,
#111827,
#0b1220
);
color: #fff;
}
.or-city-selection {
padding: 70px 0 100px;
}
.or-city-grid {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 18px;
}
.or-city-card {
display: flex;
align-items: center;
gap: 14px;
min-height: 110px;
padding: 20px;
border: 1px solid var(--or-border);
border-radius: var(--or-radius);
background: #fff;
box-shadow: var(--or-shadow);
text-decoration: none;
transition:
transform .18s ease,
box-shadow .18s ease;
}
.or-city-card:hover {
transform: translateY(-3px);
box-shadow:
0 18px 40px
rgba(17,24,39,.12);
}
.or-city-card-icon {
width: 48px;
height: 48px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--or-soft);
color: var(--or-accent);
font-size: 25px;
}
.or-city-card-content {
display: flex;
flex-direction: column;
gap: 6px;
}
.or-city-card-content strong {
font-size: 17px;
}
.or-city-card-content small {
color: var(--or-muted);
}
.or-city-card-arrow {
margin-left: auto;
font-size: 23px;
}
/* ==========================================================
ADVERTISING
========================================================== */
.or-ad-section {
padding-top: 34px;
}
.or-ad-slot,
.or-inline-ad {
position: relative;
overflow: hidden;
border: 1px dashed #cfd4dc;
border-radius: 16px;
background:
linear-gradient(
135deg,
#fff,
#f8fafc
);
color: var(--or-muted);
}
.or-ad-slot {
min-height: 130px;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.or-ad-slot-wide {
min-height: 150px;
}
.or-ad-slot strong,
.or-inline-ad strong {
color: #475467;
}
.or-ad-label {
display: inline-block;
margin-bottom: 7px;
color: #98a2b3;
font-size: 10px;
font-weight: 800;
letter-spacing: .13em;
text-transform: uppercase;
}
.or-inline-ad {
grid-column: 1 / -1;
min-height: 105px;
padding: 24px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* ==========================================================
SECTION HEADINGS
========================================================== */
.or-section-heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: 25px;
margin-bottom: 28px;
}
.or-section-heading h2 {
margin: 6px 0 0;
font-size:
clamp(28px, 4vw, 42px);
letter-spacing: -.035em;
}
.or-section-count {
padding: 8px 13px;
border-radius: 999px;
background: #fff;
color: var(--or-muted);
font-size: 13px;
box-shadow:
0 3px 12px
rgba(16,24,40,.05);
}
/* ==========================================================
NEWS
========================================================== */
.or-news-section {
padding-top: 70px;
padding-bottom: 85px;
}
.or-news-grid {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 20px;
}
.or-news-card {
overflow: hidden;
display: flex;
flex-direction: column;
min-width: 0;
border: 1px solid var(--or-border);
border-radius: var(--or-radius);
background: var(--or-card);
box-shadow:
0 6px 22px
rgba(16,24,40,.06);
}
.or-news-card-visual {
position: relative;
min-height: 148px;
padding: 16px;
background:
radial-gradient(
circle at 85% 25%,
rgba(239,62,54,.22),
transparent 24%
),
linear-gradient(
135deg,
#172033,
#0c1424
);
}
.or-news-location {
position: absolute;
z-index: 2;
top: 14px;
left: 14px;
padding: 7px 10px;
border-radius: 999px;
background: var(--or-accent);
color: #fff;
font-size: 11px;
font-weight: 800;
}
.or-news-placeholder {
height: 100%;
min-height: 116px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #dbe2ea;
}
.or-news-placeholder-radar {
font-size: 42px;
line-height: 1;
}
.or-news-placeholder small {
margin-top: 8px;
color: #98a2b3;
}
.or-news-card-body {
display: flex;
flex: 1;
flex-direction: column;
padding: 20px;
}
.or-news-meta {
display: flex;
justify-content: space-between;
gap: 10px;
color: var(--or-muted);
font-size: 11px;
}
.or-news-category {
color: var(--or-accent-dark);
font-weight: 800;
}
.or-news-card h3 {
margin: 12px 0;
font-size: 18px;
line-height: 1.32;
letter-spacing: -.018em;
}
.or-news-card p {
margin: 0 0 20px;
color: #5f6b7a;
font-size: 14px;
line-height: 1.6;
}
.or-news-card-footer {
margin-top: auto;
padding-top: 15px;
border-top: 1px solid #edf0f3;
}
.or-news-source {
display: block;
margin-bottom: 11px;
color: #98a2b3;
font-size: 10px;
}
.or-news-more {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--or-accent-dark);
text-decoration: none;
font-size: 13px;
font-weight: 800;
}
.or-empty-state {
padding: 50px;
border-radius: var(--or-radius);
background: #fff;
text-align: center;
}
/* ==========================================================
MODULES
========================================================== */
.or-module-section {
padding: 80px 0;
background: #fff;
}
.or-module-white-section {
padding-top: 80px;
padding-bottom: 80px;
}
.or-module-grid {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 20px;
}
.or-module-grid-four {
grid-template-columns:
repeat(4, minmax(0, 1fr));
}
.or-module-card {
padding: 28px;
border: 1px solid var(--or-border);
border-radius: var(--or-radius);
background: #fff;
box-shadow:
0 5px 20px
rgba(16,24,40,.05);
}
.or-module-card.compact {
min-height: 200px;
}
.or-module-icon {
width: 48px;
height: 48px;
display: grid;
place-items: center;
margin-bottom: 20px;
border-radius: 14px;
background: var(--or-soft);
color: var(--or-accent);
font-size: 22px;
font-weight: 800;
}
.or-module-card h3 {
margin: 0 0 9px;
}
.or-module-card p {
color: var(--or-muted);
line-height: 1.6;
}
.or-coming-soon {
display: inline-block;
margin-top: 10px;
padding: 7px 10px;
border-radius: 999px;
background: #f2f4f7;
color: #667085;
font-size: 11px;
font-weight: 700;
}
/* ==========================================================
JOBS
========================================================== */
.or-jobs-section {
padding: 40px 0 80px;
}
.or-jobs-box {
padding: 44px;
border-radius: 24px;
background:
radial-gradient(
circle at 85% 30%,
rgba(239,62,54,.35),
transparent 30%
),
var(--or-darker);
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
}
.or-jobs-box h2 {
margin: 6px 0 12px;
font-size: 34px;
}
.or-jobs-box p {
max-width: 620px;
margin: 0;
color: #cbd5e1;
line-height: 1.6;
}
.or-jobs-action {
padding: 13px 18px;
border-radius: 999px;
background: #fff;
color: var(--or-dark);
font-size: 13px;
font-weight: 800;
white-space: nowrap;
}
/* ==========================================================
BOTTOM ADS
========================================================== */
.or-bottom-ads {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
padding-bottom: 80px;
}
/* ==========================================================
FOOTER
========================================================== */
.or-footer {
padding: 42px 0;
background: #080f1c;
color: #fff;
}
.or-footer-inner {
display: flex;
justify-content: space-between;
gap: 30px;
}
.or-footer p {
margin: 7px 0;
color: #98a2b3;
}
.or-footer small {
color: #667085;
}
.or-footer-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 20px;
}
.or-footer-links a {
color: #cbd5e1;
text-decoration: none;
font-size: 13px;
}
/* ==========================================================
404
========================================================== */
.or-not-found {
padding: 100px 0;
text-align: center;
}
.or-not-found .or-brand-mark {
margin: 0 auto;
}
.or-primary-button {
display: inline-block;
margin-top: 20px;
padding: 13px 18px;
border-radius: 999px;
background: var(--or-accent);
color: #fff !important;
text-decoration: none;
font-weight: 800;
}
/* ==========================================================
TABLET
========================================================== */
@media (max-width: 1050px) {
.or-main-nav {
display: none;
}
.or-header-city-button {
margin-left: auto;
}
.or-news-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.or-module-grid-four {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.or-city-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width: 700px) {
.or-shell {
width:
min(
100% - 24px,
1180px
);
}
.or-header-inner {
min-height: 66px;
gap: 10px;
}
.or-brand-mark {
width: 38px;
height: 38px;
}
.or-brand-copy strong {
font-size: 15px;
}
.or-brand-copy small {
font-size: 10px;
}
.or-header-city-button {
padding: 9px 11px;
font-size: 11px;
}
.or-city-hero-grid {
min-height: auto;
grid-template-columns: 1fr;
padding: 55px 0;
}
.or-radar-visual {
display: none;
}
.or-city-hero h1,
.or-home-hero h1 {
font-size: 42px;
}
.or-city-hero p,
.or-home-hero p {
font-size: 16px;
}
.or-city-stats {
gap: 7px;
}
.or-city-stats span {
padding: 8px 10px;
font-size: 11px;
}
.or-news-grid,
.or-module-grid,
.or-module-grid-four,
.or-city-grid,
.or-bottom-ads {
grid-template-columns: 1fr;
}
.or-news-section {
padding-top: 45px;
padding-bottom: 55px;
}
.or-section-heading {
align-items: flex-start;
flex-direction: column;
}
.or-section-heading h2 {
font-size: 30px;
}
.or-news-card-visual {
min-height: 125px;
}
.or-module-section,
.or-module-white-section {
padding-top: 55px;
padding-bottom: 55px;
}
.or-jobs-box {
padding: 28px;
flex-direction: column;
align-items: flex-start;
}
.or-bottom-ads {
padding-bottom: 55px;
}
.or-footer-inner {
flex-direction: column;
}
.or-home-hero {
padding: 70px 0;
}
.or-city-selection {
padding: 55px 0 70px;
}
}
/* ==========================================================
STADTTREFFPUNKT NEWS DETAIL V1
BLOCK 12
========================================================== */
.or-article-page {
padding: 45px 0 90px;
}
.or-breadcrumb {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 34px;
color: var(--or-muted);
font-size: 13px;
}
.or-breadcrumb a {
color: var(--or-muted);
text-decoration: none;
}
.or-article-header {
max-width: 950px;
margin-bottom: 38px;
}
.or-article-tags {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 18px;
}
.or-article-tags .or-news-location {
position: static;
}
.or-article-category {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0 11px;
border-radius: 999px;
background: var(--or-soft);
color: var(--or-accent-dark);
font-size: 11px;
font-weight: 800;
}
.or-article-header h1 {
margin: 0 0 20px;
font-size:
clamp(
34px,
5vw,
60px
);
line-height: 1.06;
letter-spacing: -.04em;
}
.or-article-meta {
display: flex;
flex-wrap: wrap;
gap: 15px 24px;
color: var(--or-muted);
font-size: 13px;
}
.or-article-layout {
display: grid;
grid-template-columns:
minmax(0, 1fr)
300px;
gap: 35px;
align-items: start;
}
.or-article-placeholder {
min-height: 330px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 35px;
border-radius: 24px;
background:
radial-gradient(
circle at 75% 25%,
rgba(239,62,54,.30),
transparent 27%
),
linear-gradient(
135deg,
#172033,
#0b1220
);
color: #fff;
}
.or-article-placeholder span {
font-size: 78px;
}
.or-article-placeholder small {
margin-top: 12px;
color: #cbd5e1;
}
.or-article-lead {
margin: 0 0 30px;
font-size: 20px;
line-height: 1.7;
font-weight: 550;
color: #344054;
}
.or-article-content {
color: #344054;
font-size: 17px;
line-height: 1.82;
}
.or-article-content p {
margin-bottom: 24px;
}
.or-article-source-box {
display: flex;
flex-direction: column;
gap: 7px;
margin-top: 45px;
padding: 22px;
border: 1px solid var(--or-border);
border-radius: 16px;
background: #fff;
}
.or-article-source-box a {
margin-top: 5px;
color: var(--or-accent-dark);
text-decoration: none;
font-weight: 800;
}
.or-article-sidebar {
position: sticky;
top: 100px;
display: flex;
flex-direction: column;
gap: 20px;
}
.or-article-sidebar .or-ad-slot {
min-height: 250px;
}
.or-article-back-card {
display: flex;
align-items: center;
gap: 14px;
padding: 20px;
border: 1px solid var(--or-border);
border-radius: 16px;
background: #fff;
text-decoration: none;
}
.or-article-back-card > span {
color: var(--or-accent);
font-size: 24px;
}
.or-article-back-card div {
display: flex;
flex-direction: column;
gap: 4px;
}
.or-article-back-card small {
color: var(--or-muted);
}
@media (max-width: 900px) {
.or-article-layout {
grid-template-columns: 1fr;
}
.or-article-sidebar {
position: static;
}
}
@media (max-width: 700px) {
.or-article-page {
padding: 30px 0 60px;
}
.or-article-header h1 {
font-size: 34px;
}
.or-article-placeholder {
min-height: 210px;
}
.or-article-lead {
font-size: 17px;
}
.or-article-content {
font-size: 16px;
}
}
/* ==========================================================
STADTTREFFPUNKT EVENTS PUBLIC V1
BLOCK 13
========================================================== */
.or-events-grid {
display: grid;
grid-template-columns:
repeat(
3,
minmax(0, 1fr)
);
gap: 20px;
}
.or-event-card {
overflow: hidden;
display: flex;
flex-direction: column;
border:
1px solid
var(--or-border);
border-radius:
var(--or-radius);
background: #fff;
box-shadow:
0 6px 22px
rgba(16,24,40,.06);
}
.or-event-card.highlighted {
border:
2px solid
rgba(239,62,54,.38);
}
.or-event-date-box {
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
padding: 16px 20px;
background:
linear-gradient(
135deg,
#111827,
#1f2937
);
color: #fff;
}
.or-event-date-box strong {
font-size: 16px;
}
.or-event-date-box span {
color: #d0d5dd;
font-size: 12px;
}
.or-event-card-body {
display: flex;
flex: 1;
flex-direction: column;
padding: 22px;
}
.or-event-topline {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.or-event-type {
color: var(--or-accent-dark);
font-size: 12px;
font-weight: 800;
}
.or-event-highlight {
padding: 5px 8px;
border-radius: 999px;
background: var(--or-soft);
color: var(--or-accent-dark);
font-size: 10px;
font-weight: 800;
}
.or-event-card h3 {
margin: 14px 0 10px;
font-size: 20px;
line-height: 1.3;
}
.or-event-card p {
margin: 0 0 18px;
color: var(--or-muted);
font-size: 14px;
line-height: 1.6;
}
.or-event-details {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: auto;
padding-top: 15px;
border-top:
1px solid
#edf0f3;
color: #667085;
font-size: 12px;
}
.or-event-link {
display: inline-flex;
margin-top: 16px;
color: var(--or-accent-dark);
text-decoration: none;
font-size: 13px;
font-weight: 800;
}
.or-events-empty {
display: flex;
align-items: center;
gap: 20px;
padding: 30px;
border:
1px dashed
#d0d5dd;
border-radius:
var(--or-radius);
background:
#f8fafc;
}
.or-events-empty-icon {
width: 58px;
height: 58px;
display: grid;
flex-shrink: 0;
place-items: center;
border-radius: 18px;
background: var(--or-soft);
color: var(--or-accent);
font-size: 28px;
}
.or-events-empty strong {
display: block;
margin-bottom: 5px;
}
.or-events-empty p {
margin: 0;
color: var(--or-muted);
line-height: 1.5;
}
@media (max-width: 1000px) {
.or-events-grid {
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
}
}
@media (max-width: 700px) {
.or-events-grid {
grid-template-columns:
1fr;
}
.or-events-empty {
align-items: flex-start;
flex-direction: column;
}
}
/* ==========================================================
STADTTREFFPUNKT CLASSIFIEDS PUBLIC V1
BLOCK 14
========================================================== */
.or-classified-heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: 25px;
margin-top: 65px;
margin-bottom: 28px;
}
.or-classified-heading h2 {
margin: 6px 0 0;
font-size: clamp(28px, 4vw, 42px);
letter-spacing: -.035em;
}
.or-classified-grid {
display: grid;
grid-template-columns:
repeat(
4,
minmax(0, 1fr)
);
gap: 20px;
}
.or-classified-card {
overflow: hidden;
display: flex;
flex-direction: column;
min-width: 0;
border: 1px solid var(--or-border);
border-radius: var(--or-radius);
background: #fff;
box-shadow:
0 6px 22px
rgba(16,24,40,.06);
}
.or-classified-card.featured {
border:
2px solid
rgba(239,62,54,.42);
}
.or-classified-visual {
position: relative;
min-height: 175px;
overflow: hidden;
background:
linear-gradient(
135deg,
#172033,
#0b1220
);
}
.or-classified-visual img {
width: 100%;
height: 175px;
display: block;
object-fit: cover;
}
.or-classified-placeholder {
min-height: 175px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
}
.or-classified-placeholder span {
font-size: 46px;
line-height: 1;
}
.or-classified-placeholder small {
margin-top: 9px;
color: #cbd5e1;
}
.or-private-badge,
.or-commercial-badge {
position: absolute;
top: 12px;
left: 12px;
padding: 6px 9px;
border-radius: 999px;
font-size: 10px;
font-weight: 800;
}
.or-private-badge {
background: #ecfdf3;
color: #027a48;
}
.or-commercial-badge {
background: #fff1f0;
color: #b42318;
}
.or-classified-body {
display: flex;
flex: 1;
flex-direction: column;
padding: 20px;
}
.or-classified-topline {
display: flex;
justify-content: space-between;
gap: 10px;
color: var(--or-muted);
font-size: 11px;
}
.or-classified-topline strong {
color: var(--or-accent-dark);
}
.or-classified-card h3 {
margin: 11px 0 8px;
font-size: 18px;
line-height: 1.3;
}
.or-classified-price {
margin-bottom: 12px;
color: var(--or-dark);
font-size: 21px;
font-weight: 850;
}
.or-classified-card p {
margin: 0 0 18px;
color: var(--or-muted);
font-size: 14px;
line-height: 1.55;
}
.or-classified-meta {
display: flex;
flex-direction: column;
gap: 5px;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid #edf0f3;
color: #667085;
font-size: 11px;
}
.or-classified-empty {
display: flex;
align-items: center;
gap: 20px;
padding: 30px;
border: 1px dashed #d0d5dd;
border-radius: var(--or-radius);
background: #f8fafc;
}
.or-classified-empty-icon {
width: 58px;
height: 58px;
flex-shrink: 0;
display: grid;
place-items: center;
border-radius: 18px;
background: var(--or-soft);
color: var(--or-accent);
font-size: 27px;
font-weight: 850;
}
.or-classified-empty strong {
display: block;
margin-bottom: 5px;
}
.or-classified-empty p {
margin: 0;
color: var(--or-muted);
line-height: 1.5;
}
@media (max-width: 1050px) {
.or-classified-grid {
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
}
}
@media (max-width: 700px) {
.or-classified-heading {
align-items: flex-start;
flex-direction: column;
}
.or-classified-grid {
grid-template-columns: 1fr;
}
.or-classified-empty {
flex-direction: column;
align-items: flex-start;
}
}
/* ==========================================================
STADTTREFFPUNKT CLASSIFIED SUBMIT V1
BLOCK 15
========================================================== */
.or-classified-heading-actions {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.or-classified-submit-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 16px;
border-radius: 999px;
background: var(--or-accent);
color: #fff;
text-decoration: none;
font-size: 13px;
font-weight: 800;
}
.or-submit-page {
min-height: 70vh;
padding: 55px 0 90px;
background: #f7f8fa;
}
.or-submit-shell {
max-width: 1180px;
}
.or-submit-heading {
margin-bottom: 32px;
}
.or-submit-heading h1 {
margin: 7px 0 7px;
font-size:
clamp(
34px,
5vw,
56px
);
letter-spacing: -.045em;
}
.or-submit-heading p {
margin: 0;
color: var(--or-muted);
font-size: 17px;
}
.or-submit-layout {
display: grid;
grid-template-columns:
minmax(0, 1fr)
290px;
gap: 28px;
align-items: start;
}
.or-submit-card {
padding: 30px;
border: 1px solid var(--or-border);
border-radius: 24px;
background: #fff;
box-shadow:
0 10px 35px
rgba(16,24,40,.06);
}
.or-submit-section-title {
display: flex;
align-items: center;
gap: 13px;
margin: 8px 0 20px;
}
.or-submit-section-title:not(:first-child) {
margin-top: 42px;
}
.or-submit-section-title > span {
width: 36px;
height: 36px;
flex-shrink: 0;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--or-soft);
color: var(--or-accent-dark);
font-weight: 900;
}
.or-submit-section-title div {
display: flex;
flex-direction: column;
gap: 2px;
}
.or-submit-section-title small {
color: var(--or-muted);
}
.or-submit-grid {
display: grid;
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
gap: 17px;
}
.or-submit-field {
display: flex;
flex-direction: column;
gap: 7px;
}
.or-submit-field.full {
grid-column: 1 / -1;
}
.or-submit-field label {
font-size: 13px;
font-weight: 800;
}
.or-submit-field input,
.or-submit-field select,
.or-submit-field textarea {
width: 100%;
box-sizing: border-box;
padding: 12px 13px;
border: 1px solid #d0d5dd;
border-radius: 11px;
background: #fff;
color: #101828;
font: inherit;
}
.or-submit-field textarea {
min-height: 180px;
resize: vertical;
}
.or-submit-field small {
color: var(--or-muted);
font-size: 11px;
}
.or-submit-field.checkbox {
justify-content: end;
}
.or-submit-field.checkbox label {
display: flex;
align-items: center;
gap: 9px;
min-height: 46px;
}
.or-submit-field.checkbox input {
width: auto;
}
.or-submit-info {
margin-bottom: 20px;
padding: 18px;
border-radius: 14px;
background: #f8fafc;
border: 1px solid #e4e7ec;
}
.or-submit-info strong {
display: block;
margin-bottom: 7px;
}
.or-submit-info p {
margin: 0;
color: var(--or-muted);
font-size: 13px;
line-height: 1.55;
}
.or-submit-terms {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 20px 0;
color: #475467;
font-size: 13px;
line-height: 1.55;
}
.or-submit-terms input {
margin-top: 4px;
}
.or-submit-primary,
.or-submit-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 18px;
border: 0;
border-radius: 999px;
text-decoration: none;
cursor: pointer;
font: inherit;
font-size: 13px;
font-weight: 850;
}
.or-submit-primary {
background: var(--or-accent);
color: #fff;
}
.or-submit-secondary {
background: #111827;
color: #fff;
}
.or-submit-large {
width: 100%;
min-height: 50px;
}
.or-submit-sidebar {
display: flex;
flex-direction: column;
gap: 18px;
}
.or-submit-side-card {
padding: 21px;
border: 1px solid var(--or-border);
border-radius: 18px;
background: #fff;
}
.or-submit-side-card strong {
display: block;
margin-bottom: 9px;
}
.or-submit-side-card p {
margin: 0;
color: var(--or-muted);
font-size: 13px;
line-height: 1.55;
}
.or-submit-side-card ul {
margin: 0;
padding-left: 18px;
color: var(--or-muted);
font-size: 13px;
line-height: 1.8;
}
.or-submit-free {
display: inline-flex;
margin-bottom: 10px;
padding: 5px 9px;
border-radius: 999px;
background: #ecfdf3;
color: #027a48;
font-size: 11px;
font-weight: 900;
}
.or-submit-error {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 24px;
padding: 15px 18px;
border: 1px solid #fecdca;
border-radius: 13px;
background: #fff1f0;
color: #b42318;
}
.or-submit-success {
max-width: 700px;
margin: 30px auto;
padding: 45px;
text-align: center;
border: 1px solid var(--or-border);
border-radius: 24px;
background: #fff;
}
.or-submit-success-icon {
width: 70px;
height: 70px;
display: grid;
place-items: center;
margin: 0 auto 20px;
border-radius: 50%;
background: #ecfdf3;
color: #027a48;
font-size: 34px;
font-weight: 900;
}
.or-submit-success h1 {
margin: 0 0 15px;
}
.or-submit-success p {
color: var(--or-muted);
line-height: 1.65;
}
.or-submit-success-actions {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 25px;
}
.or-submit-honeypot {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
}
@media (max-width: 900px) {
.or-submit-layout {
grid-template-columns: 1fr;
}
.or-submit-sidebar {
display: grid;
grid-template-columns:
repeat(
3,
minmax(0,1fr)
);
}
}
@media (max-width: 700px) {
.or-submit-page {
padding: 35px 0 60px;
}
.or-submit-card {
padding: 20px;
}
.or-submit-grid {
grid-template-columns: 1fr;
}
.or-submit-field.full {
grid-column: auto;
}
.or-submit-sidebar {
grid-template-columns: 1fr;
}
.or-classified-heading-actions {
width: 100%;
align-items: stretch;
flex-direction: column;
}
.or-classified-submit-button {
width: 100%;
box-sizing: border-box;
}
.or-submit-success {
padding: 28px 20px;
}
}
/* ==========================================================
STADTTREFFPUNKT BUSINESSES PUBLIC V1
BLOCK 17
========================================================== */
.or-business-section {
padding: 70px 0;
background: #f8fafc;
}
.or-business-group + .or-business-group {
margin-top: 70px;
}
.or-business-grid {
display: grid;
grid-template-columns:
repeat(
4,
minmax(0,1fr)
);
gap: 20px;
}
.or-business-card {
overflow: hidden;
display: flex;
flex-direction: column;
border: 1px solid #e4e7ec;
border-radius: 18px;
background: #fff;
box-shadow:
0 6px 22px
rgba(16,24,40,.06);
}
.or-business-card.featured {
border: 2px solid rgba(239,62,54,.38);
}
.or-business-image {
position: relative;
height: 180px;
overflow: hidden;
background:
linear-gradient(
135deg,
#172033,
#0b1220
);
}
.or-business-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.or-business-placeholder {
width: 100%;
height: 100%;
display: grid;
place-items: center;
color: #fff;
font-size: 50px;
}
.or-business-type-badge {
position: absolute;
left: 12px;
bottom: 12px;
padding: 6px 9px;
border-radius: 999px;
background: rgba(255,255,255,.94);
color: #101828;
font-size: 10px;
font-weight: 850;
}
.or-business-body {
display: flex;
flex: 1;
flex-direction: column;
padding: 20px;
}
.or-business-topline {
display: flex;
justify-content: space-between;
gap: 10px;
color: #667085;
font-size: 11px;
}
.or-business-card h3 {
margin: 11px 0 10px;
font-size: 19px;
}
.or-business-card p {
margin: 0 0 17px;
color: #667085;
font-size: 14px;
line-height: 1.55;
}
.or-business-meta {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: auto;
padding-top: 13px;
border-top: 1px solid #edf0f3;
color: #667085;
font-size: 11px;
}
.or-business-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 15px;
}
.or-business-links a {
display: inline-flex;
padding: 7px 10px;
border-radius: 999px;
background: #fff1f0;
color: #b42318;
text-decoration: none;
font-size: 11px;
font-weight: 800;
}
.or-business-empty {
padding: 28px;
border: 1px dashed #d0d5dd;
border-radius: 18px;
background: #fff;
}
.or-business-empty strong {
display: block;
margin-bottom: 6px;
}
.or-business-empty p {
margin: 0;
color: #667085;
}
@media (max-width:1100px) {
.or-business-grid {
grid-template-columns:
repeat(
2,
minmax(0,1fr)
);
}
}
@media (max-width:700px) {
.or-business-grid {
grid-template-columns: 1fr;
}
.or-business-section {
padding: 50px 0;
}
}
/* ==========================================================
STADTTREFFPUNKT JOBS PUBLIC V1
BLOCK 18
========================================================== */
.or-jobs-section {
padding:70px 0;
background:#fff;
}
.or-jobs-grid {
display:grid;
grid-template-columns:
repeat(
3,
minmax(0,1fr)
);
gap:20px;
}
.or-job-card {
display:flex;
flex-direction:column;
padding:23px;
border:1px solid #e4e7ec;
border-radius:18px;
background:#fff;
box-shadow:
0 7px 24px
rgba(16,24,40,.06);
}
.or-job-card.featured {
border:2px solid rgba(239,62,54,.42);
}
.or-job-card-top {
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.or-job-company-icon {
width:46px;
height:46px;
display:grid;
place-items:center;
border-radius:14px;
background:#f2f4f7;
font-size:22px;
}
.or-job-badges {
display:flex;
flex-wrap:wrap;
gap:6px;
justify-content:flex-end;
}
.or-job-badges span,
.or-job-badges strong {
padding:5px 8px;
border-radius:999px;
font-size:10px;
}
.or-job-badges span {
background:#f2f4f7;
color:#475467;
}
.or-job-badges strong {
background:#fff1f0;
color:#b42318;
}
.or-job-card h3 {
margin:18px 0 7px;
font-size:20px;
line-height:1.3;
}
.or-job-company {
margin-bottom:13px;
color:#344054;
font-weight:750;
}
.or-job-card p {
margin:0 0 18px;
color:#667085;
font-size:14px;
line-height:1.55;
}
.or-job-meta {
display:flex;
flex-direction:column;
gap:6px;
margin-top:auto;
padding-top:14px;
border-top:1px solid #edf0f3;
color:#667085;
font-size:12px;
}
.or-job-actions {
margin-top:17px;
}
.or-job-actions a {
display:inline-flex;
align-items:center;
justify-content:center;
padding:9px 13px;
border-radius:999px;
background:#ef3e36;
color:#fff;
text-decoration:none;
font-size:12px;
font-weight:800;
}
.or-jobs-empty {
display:flex;
gap:20px;
align-items:center;
padding:30px;
border:1px dashed #d0d5dd;
border-radius:18px;
background:#f8fafc;
}
.or-jobs-empty-icon {
width:60px;
height:60px;
display:grid;
place-items:center;
border-radius:17px;
background:#fff;
font-size:28px;
}
.or-jobs-empty strong {
display:block;
margin-bottom:5px;
}
.or-jobs-empty p {
margin:0;
color:#667085;
}
@media(max-width:1000px) {
.or-jobs-grid {
grid-template-columns:
repeat(
2,
minmax(0,1fr)
);
}
}
@media(max-width:700px) {
.or-jobs-grid {
grid-template-columns:1fr;
}
.or-jobs-section {
padding:50px 0;
}
.or-jobs-empty {
align-items:flex-start;
flex-direction:column;
}
}
/* ==========================================================
STADTTREFFPUNKT FUN PUBLIC V1
BLOCK 19
========================================================== */
.or-fun-section {
padding:70px 0;
background:#f8fafc;
}
.or-fun-grid {
display:grid;
grid-template-columns:
repeat(
2,
minmax(0,1fr)
);
gap:24px;
}
.or-fun-card {
display:grid;
grid-template-columns:
auto
1fr;
gap:22px;
min-height:250px;
padding:30px;
border:1px solid #e4e7ec;
border-radius:24px;
background:#fff;
box-shadow:
0 12px 35px
rgba(16,24,40,.06);
}
.or-fun-icon {
display:grid;
place-items:center;
width:70px;
height:70px;
border-radius:20px;
background:#f2f4f7;
font-size:38px;
}
.or-fun-content h2 {
margin:7px 0 18px;
}
.or-joke-text,
.or-riddle-question {
margin:0;
font-size:19px;
line-height:1.65;
font-weight:650;
}
.or-riddle-details {
margin-top:15px;
padding:12px 15px;
border:1px solid #e4e7ec;
border-radius:12px;
background:#f9fafb;
}
.or-riddle-details summary {
cursor:pointer;
font-weight:800;
}
.or-riddle-details p {
margin:12px 0 0;
line-height:1.6;
}
.or-riddle-details.answer {
background:#f0fdf4;
}
@media(max-width:760px) {
.or-fun-grid {
grid-template-columns:1fr;
}
.or-fun-card {
grid-template-columns:1fr;
}
}
/* ==========================================================
ENDE STADTTREFFPUNKT FUN PUBLIC V1
========================================================== */
/* ==========================================================
STADTTREFFPUNKT WEATHER PUBLIC V1
BLOCK 20
========================================================== */
.or-weather-section {
padding:70px 0;
background:#fff;
}
.or-weather-current {
display:grid;
grid-template-columns:auto 1fr auto;
gap:24px;
align-items:center;
padding:28px;
border:1px solid #e4e7ec;
border-radius:24px;
background:
linear-gradient(
135deg,
#eff8ff,
#ffffff
);
box-shadow:
0 12px 35px
rgba(16,24,40,.06);
}
.or-weather-current-icon {
display:grid;
place-items:center;
width:95px;
height:95px;
border-radius:24px;
background:#fff;
font-size:56px;
}
.or-weather-temperature {
margin-bottom:4px;
font-size:44px;
line-height:1;
font-weight:900;
}
.or-weather-current-main strong {
display:block;
margin-bottom:4px;
font-size:18px;
}
.or-weather-feels {
color:#667085;
}
.or-weather-current-stats {
display:grid;
grid-template-columns:
repeat(2,minmax(130px,1fr));
gap:12px;
}
.or-weather-current-stats > div {
padding:15px;
border-radius:14px;
background:#fff;
}
.or-weather-current-stats span {
display:block;
margin-bottom:4px;
color:#667085;
font-size:13px;
}
.or-weather-current-stats strong {
font-size:17px;
}
.or-weather-forecast {
display:grid;
grid-template-columns:
repeat(7,minmax(0,1fr));
gap:12px;
margin-top:20px;
}
.or-weather-day {
padding:18px 12px;
border:1px solid #e4e7ec;
border-radius:18px;
background:#fff;
text-align:center;
}
.or-weather-day-name {
display:block;
margin-bottom:10px;
}
.or-weather-day-icon {
min-height:48px;
margin-bottom:6px;
font-size:34px;
}
.or-weather-day-description {
min-height:40px;
margin-bottom:8px;
color:#667085;
font-size:12px;
line-height:1.4;
}
.or-weather-day-temp {
display:flex;
justify-content:center;
gap:7px;
margin-bottom:7px;
}
.or-weather-day-temp strong {
font-size:18px;
}
.or-weather-day-temp span {
color:#667085;
}
.or-weather-rain {
color:#475467;
font-size:13px;
}
.or-weather-source {
margin-top:13px;
color:#98a2b3;
font-size:12px;
text-align:right;
}
.or-weather-unavailable {
padding:24px;
border:1px solid #e4e7ec;
border-radius:16px;
background:#f9fafb;
}
@media(max-width:1050px) {
.or-weather-forecast {
grid-template-columns:
repeat(4,minmax(0,1fr));
}
}
@media(max-width:760px) {
.or-weather-current {
grid-template-columns:auto 1fr;
}
.or-weather-current-stats {
grid-column:1 / -1;
}
.or-weather-forecast {
grid-template-columns:
repeat(2,minmax(0,1fr));
}
}
@media(max-width:430px) {
.or-weather-current {
grid-template-columns:1fr;
text-align:center;
}
.or-weather-current-icon {
margin:0 auto;
}
.or-weather-current-stats {
grid-template-columns:1fr;
}
}
/* ==========================================================
ENDE WEATHER PUBLIC V1
========================================================== */
/*
* ==========================================================
* OR_NEWS_IMAGES_CSS_BLOCK39D2B
* ==========================================================
*/
.or-news-card-visual{
position:relative;
overflow:hidden;
background:#10233f;
}
.or-news-card-image{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:
transform .35s ease,
filter .35s ease;
}
.or-news-card:hover .or-news-card-image{
transform:scale(1.025);
}
.or-news-card-visual::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
180deg,
rgba(4,14,28,.05) 20%,
rgba(4,14,28,.42) 100%
);
pointer-events:none;
}
.or-news-location{
position:absolute;
z-index:3;
}
/*
* News-Verzeichnis
*/
.or-directory-news-image-link{
display:block;
width:100%;
aspect-ratio:16 / 9;
overflow:hidden;
background:#10233f;
text-decoration:none;
}
.or-directory-news-image{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .35s ease;
}
.or-directory-news-image-link:hover
.or-directory-news-image{
transform:scale(1.025);
}
/* ============================================================
OR_PORTAL_HOMEPAGE_BLOCK62A
Marktplatz / Startseite
============================================================ */
.or-section-intro {
margin: 8px 0 0;
max-width: 680px;
color: #5c6873;
line-height: 1.6;
}
.or-classified-section {
padding-top: 54px;
padding-bottom: 54px;
background: #f6f8fa;
}
.or-classified-section .or-classified-heading {
margin-bottom: 24px;
}
.or-classified-section .or-classified-heading-actions {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 12px;
}
.or-classified-section .or-classified-empty {
background: #fff;
}
.or-directory-action-row {
display: flex;
justify-content: flex-end;
margin: 22px 0;
}
.or-directory-action {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 10px 16px;
border-radius: 10px;
background: #163f67;
color: #fff;
font-weight: 700;
text-decoration: none;
}
.or-directory-action:hover {
background: #102f4d;
}
@media (max-width:700px) {
.or-classified-section {
padding-top: 38px;
padding-bottom: 38px;
}
.or-classified-section
.or-classified-heading-actions {
width: 100%;
justify-content: flex-start;
}
.or-classified-section
.or-classified-submit-button {
width: 100%;
justify-content: center;
text-align: center;
}
}
/* ENDE OR_PORTAL_HOMEPAGE_BLOCK62A */
/* ============================================================
OR_PORTAL_DASHBOARD_CSS_BLOCK63A
============================================================ */
.or-portal-dashboard {
padding: 34px 0 42px;
background:
linear-gradient(
180deg,
#ffffff 0%,
#f4f7fa 100%
);
border-bottom:
1px solid #e3e8ed;
}
.or-portal-dashboard-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 22px;
}
.or-portal-dashboard-head h2 {
margin: 4px 0 0;
color: #132f49;
font-size:
clamp(24px, 3vw, 34px);
line-height: 1.15;
}
.or-portal-dashboard-head p {
max-width: 720px;
margin: 9px 0 0;
color: #63717e;
line-height: 1.55;
}
.or-portal-quick-grid {
display: grid;
grid-template-columns:
repeat(
3,
minmax(0, 1fr)
);
gap: 14px;
}
.or-portal-quick-card {
position: relative;
display: flex;
align-items: center;
gap: 14px;
min-height: 92px;
padding: 17px 18px;
overflow: hidden;
border:
1px solid #dce4eb;
border-radius: 15px;
background: #fff;
color: #172f45;
text-decoration: none;
box-shadow:
0 4px 14px
rgba(17, 47, 73, .055);
transition:
transform .16s ease,
box-shadow .16s ease,
border-color .16s ease;
}
.or-portal-quick-card:hover {
transform:
translateY(-2px);
border-color:
#b9cbd9;
box-shadow:
0 9px 24px
rgba(17, 47, 73, .11);
}
.or-portal-quick-icon {
flex:
0 0 48px;
width: 48px;
height: 48px;
display:
inline-flex;
align-items: center;
justify-content: center;
border-radius: 13px;
background:
#eef4f8;
font-size: 24px;
}
.or-portal-quick-content {
min-width: 0;
display: flex;
flex: 1;
flex-direction: column;
gap: 4px;
}
.or-portal-quick-content strong {
font-size: 16px;
line-height: 1.2;
}
.or-portal-quick-content small {
color: #687784;
font-size: 13px;
line-height: 1.35;
}
.or-portal-quick-arrow {
flex: 0 0 auto;
color: #54758f;
font-size: 20px;
font-weight: 700;
transition:
transform .16s ease;
}
.or-portal-quick-card:hover
.or-portal-quick-arrow {
transform:
translateX(3px);
}
@media (max-width:950px) {
.or-portal-quick-grid {
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
}
}
@media (max-width:620px) {
.or-portal-dashboard {
padding:
26px 0
32px;
}
.or-portal-dashboard-head {
margin-bottom: 17px;
}
.or-portal-dashboard-head h2 {
font-size: 25px;
}
.or-portal-quick-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.or-portal-quick-card {
min-height: 78px;
padding: 13px 14px;
border-radius: 13px;
}
.or-portal-quick-icon {
flex-basis: 43px;
width: 43px;
height: 43px;
font-size: 21px;
}
}
/* ENDE OR_PORTAL_DASHBOARD_CSS_BLOCK63A */
/*
* ============================================================
* OR_BUSINESS_V2_CSS_BLOCK65C
* ============================================================
*/
.or-business-profile-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 36px;
padding: 7px 11px;
border-radius: 9px;
background: #173e5c;
color: #fff;
font-size: 13px;
font-weight: 700;
text-decoration: none;
}
.or-business-detail-header {
padding: 18px 0;
background: #fff;
border-bottom: 1px solid #e0e6eb;
}
.or-business-detail-back {
color: #294f6b;
font-weight: 700;
text-decoration: none;
}
.or-business-detail-main {
min-height: 70vh;
padding: 38px 0 65px;
background: #f5f7f9;
}
.or-business-profile {
overflow: hidden;
background: #fff;
border: 1px solid #e0e6eb;
border-radius: 20px;
box-shadow:
0 10px 32px
rgba(24,54,77,.07);
}
.or-business-profile-hero {
display: grid;
grid-template-columns:
260px minmax(0,1fr);
min-height: 240px;
border-bottom: 1px solid #e4e9ed;
}
.or-business-profile-image {
min-height: 240px;
background:
linear-gradient(
135deg,
#eaf1f5,
#d9e5ed
);
}
.or-business-profile-image img {
display: block;
width: 100%;
height: 100%;
min-height: 240px;
object-fit: cover;
}
.or-business-profile-placeholder {
width: 100%;
height: 100%;
min-height: 240px;
display: flex;
align-items: center;
justify-content: center;
font-size: 76px;
}
.or-business-profile-heading {
display: flex;
flex-direction: column;
justify-content: center;
padding: 35px;
}
.or-business-profile-heading h1 {
margin: 12px 0 9px;
color: #16364f;
font-size:
clamp(30px,4vw,46px);
line-height: 1.08;
}
.or-business-profile-badges {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.or-business-profile-badges span,
.or-business-profile-badges strong {
display: inline-flex;
padding: 6px 10px;
border-radius: 999px;
background: #edf3f7;
color: #35556d;
font-size: 12px;
font-weight: 700;
}
.or-business-profile-location {
margin: 0;
color: #667681;
}
.or-business-profile-layout {
display: grid;
grid-template-columns:
minmax(0,1fr) 330px;
gap: 36px;
padding: 36px;
}
.or-business-profile-content h2,
.or-business-contact-card h2 {
margin-top: 0;
color: #173950;
}
.or-business-profile-content p {
color: #536571;
line-height: 1.7;
}
.or-business-info-block {
margin-top: 30px;
padding-top: 26px;
border-top: 1px solid #e4e9ed;
}
.or-business-source-note {
margin-top: 32px;
padding: 14px 16px;
border-radius: 10px;
background: #f5f7f9;
color: #71808a;
font-size: 12px;
line-height: 1.5;
}
.or-business-source-note a {
color: #315e7e;
}
.or-business-contact-card {
align-self: start;
padding: 22px;
background: #f6f8fa;
border: 1px solid #e0e6eb;
border-radius: 15px;
}
.or-business-contact-row {
display: grid;
grid-template-columns:
25px minmax(0,1fr);
gap: 10px;
margin-top: 17px;
color: #536571;
}
.or-business-contact-row strong {
display: block;
margin-bottom: 3px;
color: #253f53;
font-size: 13px;
}
.or-business-contact-row a {
color: #315e7e;
overflow-wrap: anywhere;
text-decoration: none;
}
.or-business-contact-actions {
display: grid;
gap: 9px;
margin-top: 24px;
}
.or-business-primary-action,
.or-business-secondary-action {
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 9px 13px;
border-radius: 10px;
font-weight: 700;
text-decoration: none;
}
.or-business-primary-action {
background: #173e5c;
color: #fff;
}
.or-business-secondary-action {
background: #fff;
color: #294f6b;
border: 1px solid #cbd8e2;
}
@media (max-width:800px) {
.or-business-profile-hero {
grid-template-columns: 1fr;
}
.or-business-profile-image,
.or-business-profile-image img,
.or-business-profile-placeholder {
min-height: 190px;
}
.or-business-profile-layout {
grid-template-columns: 1fr;
padding: 24px;
}
.or-business-profile-heading {
padding: 25px;
}
}
@media (max-width:600px) {
.or-business-detail-main {
padding-top: 20px;
}
.or-business-profile {
border-radius: 14px;
}
.or-business-profile-heading h1 {
font-size: 29px;
}
.or-business-profile-layout {
padding: 19px;
gap: 25px;
}
}
/* ENDE OR_BUSINESS_V2_CSS_BLOCK65C */
/*
* ============================================================
* OR_CLASSIFIED_V2_CSS_BLOCK66A
* ============================================================
*/
.or-market-v2-header {
padding: 34px 0;
background:
linear-gradient(
135deg,
#173e5c,
#27688f
);
color: #fff;
}
.or-market-v2-headgrid {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
}
.or-market-v2-header h1 {
margin: 9px 0 5px;
color: #fff;
font-size: clamp(36px,5vw,55px);
line-height: 1;
}
.or-market-v2-header p {
margin: 0;
color: rgba(255,255,255,.82);
font-size: 17px;
}
.or-market-v2-back {
color: rgba(255,255,255,.85);
text-decoration: none;
font-weight: 700;
}
.or-market-v2-submit {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 10px 18px;
border-radius: 10px;
background: #fff;
color: #173e5c;
text-decoration: none;
font-weight: 800;
}
.or-market-v2-main {
min-height: 70vh;
padding: 30px 0 70px;
background: #f5f7f9;
}
.or-market-v2-filter {
padding: 19px;
margin-bottom: 25px;
background: #fff;
border: 1px solid #e0e6eb;
border-radius: 15px;
box-shadow:
0 5px 20px
rgba(20,50,70,.05);
}
.or-market-v2-filtergrid {
display: grid;
grid-template-columns:
minmax(240px,2fr)
minmax(150px,1fr)
minmax(150px,1fr)
minmax(150px,1fr)
auto;
gap: 11px;
align-items: end;
}
.or-market-v2-filtergrid label {
display: flex;
flex-direction: column;
gap: 6px;
}
.or-market-v2-filtergrid label span {
color: #586a76;
font-size: 12px;
font-weight: 800;
}
.or-market-v2-filtergrid input,
.or-market-v2-filtergrid select {
width: 100%;
min-height: 44px;
padding: 9px 11px;
border: 1px solid #ccd7df;
border-radius: 8px;
background: #fff;
color: #24343f;
font: inherit;
}
.or-market-v2-filtergrid button {
min-height: 44px;
padding: 9px 17px;
border: 0;
border-radius: 8px;
background: #173e5c;
color: #fff;
font: inherit;
font-weight: 800;
cursor: pointer;
}
.or-market-v2-filterbottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: 16px;
padding-top: 15px;
border-top: 1px solid #e5eaed;
color: #647681;
font-size: 14px;
}
.or-market-v2-sort {
display: flex;
flex-wrap: wrap;
gap: 7px;
align-items: center;
}
.or-market-v2-sort a {
padding: 5px 8px;
border-radius: 7px;
color: #4c6576;
text-decoration: none;
font-weight: 700;
}
.or-market-v2-sort a.active {
background: #e8f0f5;
color: #173e5c;
}
.or-market-v2-activefilter {
display: flex;
justify-content: space-between;
gap: 15px;
margin-top: 12px;
padding: 10px 12px;
border-radius: 8px;
background: #edf3f6;
color: #536875;
font-size: 13px;
}
.or-market-v2-activefilter a {
color: #245d82;
font-weight: 700;
}
.or-market-v2-grid {
display: grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap: 19px;
}
.or-market-v2-card {
overflow: hidden;
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #e0e6eb;
border-radius: 15px;
box-shadow:
0 5px 20px
rgba(20,50,70,.05);
}
.or-market-v2-card.featured {
border-color: #c6a548;
}
.or-market-v2-image {
position: relative;
display: block;
height: 210px;
overflow: hidden;
background:
linear-gradient(
135deg,
#e6eef3,
#d6e3eb
);
text-decoration: none;
}
.or-market-v2-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.or-market-v2-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 68px;
}
.or-market-v2-top {
position: absolute;
top: 12px;
left: 12px;
padding: 6px 9px;
border-radius: 999px;
background: #f3cc55;
color: #4d3d0d;
font-size: 11px;
font-weight: 800;
}
.or-market-v2-cardbody {
display: flex;
flex: 1;
flex-direction: column;
padding: 17px;
}
.or-market-v2-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 9px;
}
.or-market-v2-badges span {
padding: 4px 7px;
border-radius: 999px;
background: #edf3f6;
color: #536875;
font-size: 11px;
font-weight: 700;
}
.or-market-v2-card h2 {
margin: 0 0 8px;
font-size: 20px;
line-height: 1.25;
}
.or-market-v2-card h2 a {
color: #173950;
text-decoration: none;
}
.or-market-v2-price {
margin-bottom: 10px;
color: #173e5c;
font-size: 23px;
font-weight: 850;
}
.or-market-v2-cardbody > p {
margin: 0 0 14px;
color: #637580;
line-height: 1.5;
font-size: 14px;
}
.or-market-v2-meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: auto;
margin-bottom: 14px;
color: #71808a;
font-size: 12px;
}
.or-market-v2-detail {
display: flex;
align-items: center;
justify-content: center;
min-height: 39px;
padding: 8px 12px;
border-radius: 8px;
background: #173e5c;
color: #fff;
text-decoration: none;
font-weight: 750;
}
.or-market-v2-empty {
padding: 55px 25px;
text-align: center;
background: #fff;
border: 1px solid #e0e6eb;
border-radius: 15px;
}
.or-market-v2-emptyicon {
font-size: 58px;
}
.or-market-v2-empty h2 {
color: #173950;
}
.or-market-v2-empty p {
max-width: 620px;
margin: 7px auto;
color: #637580;
line-height: 1.6;
}
.or-market-v2-empty a {
display: inline-flex;
margin-top: 17px;
padding: 10px 16px;
border-radius: 8px;
background: #173e5c;
color: #fff;
text-decoration: none;
font-weight: 800;
}
.or-market-v2-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
margin-top: 35px;
padding: 25px 28px;
border-radius: 15px;
background:
linear-gradient(
135deg,
#173e5c,
#28688f
);
color: #fff;
}
.or-market-v2-banner h2 {
margin: 0 0 5px;
color: #fff;
}
.or-market-v2-banner p {
margin: 0;
color: rgba(255,255,255,.82);
}
.or-market-v2-banner > a {
padding: 11px 17px;
border-radius: 8px;
background: #fff;
color: #173e5c;
text-decoration: none;
font-weight: 800;
}
.or-market-v2-detailhead {
padding: 17px 0;
background: #fff;
border-bottom: 1px solid #e1e7eb;
}
.or-market-v2-detailhead a {
color: #315d7c;
text-decoration: none;
font-weight: 750;
}
.or-market-v2-detailmain {
min-height: 70vh;
padding: 32px 0 70px;
background: #f5f7f9;
}
.or-market-v2-profile {
overflow: hidden;
background: #fff;
border: 1px solid #e0e6eb;
border-radius: 18px;
box-shadow:
0 8px 28px
rgba(20,50,70,.06);
}
.or-market-v2-profileimage {
height: 430px;
background:
linear-gradient(
135deg,
#e6eef3,
#d6e3eb
);
}
.or-market-v2-profileimage img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}
.or-market-v2-profileplaceholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 110px;
}
.or-market-v2-profilegrid {
display: grid;
grid-template-columns:
minmax(0,1fr)
330px;
gap: 38px;
padding: 34px;
}
.or-market-v2-profilebadges {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.or-market-v2-profilebadges span,
.or-market-v2-profilebadges strong {
padding: 5px 9px;
border-radius: 999px;
background: #edf3f6;
color: #526b7c;
font-size: 12px;
font-weight: 750;
}
.or-market-v2-profilebadges strong {
background: #f6df8d;
color: #59460d;
}
.or-market-v2-profile h1 {
margin: 13px 0 10px;
color: #173950;
font-size: clamp(30px,4vw,45px);
line-height: 1.1;
}
.or-market-v2-profileprice {
color: #173e5c;
font-size: 31px;
font-weight: 850;
}
.or-market-v2-profilemeta {
display: flex;
flex-wrap: wrap;
gap: 13px;
margin-top: 15px;
color: #697b86;
font-size: 13px;
}
.or-market-v2-description {
margin-top: 31px;
padding-top: 27px;
border-top: 1px solid #e4e9ed;
}
.or-market-v2-description h2 {
color: #173950;
}
.or-market-v2-description p {
color: #526571;
line-height: 1.75;
}
.or-market-v2-contact {
align-self: start;
padding: 22px;
border: 1px solid #e0e6eb;
border-radius: 14px;
background: #f5f7f9;
}
.or-market-v2-contact h2 {
margin-top: 0;
color: #173950;
}
.or-market-v2-contact > div {
margin-top: 17px;
padding-top: 16px;
border-top: 1px solid #dde4e9;
}
.or-market-v2-contact strong {
display: block;
margin-bottom: 5px;
color: #526571;
font-size: 12px;
}
.or-market-v2-contact span,
.or-market-v2-contact a {
color: #244c68;
overflow-wrap: anywhere;
}
.or-market-v2-mail {
display: flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 8px 12px;
border-radius: 8px;
background: #173e5c;
color: #fff !important;
text-decoration: none;
font-weight: 800;
}
.or-market-v2-warning {
margin-top: 24px !important;
padding: 13px !important;
border: 0 !important;
border-radius: 8px;
background: #fff7df;
color: #6b581b;
font-size: 12px;
line-height: 1.5;
}
.or-market-v2-warning p {
margin: 5px 0 0;
}
.or-market-v2-detailactions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 11px;
margin-top: 25px;
}
.or-market-v2-detailactions a {
padding: 10px 15px;
border: 1px solid #d4dde4;
border-radius: 8px;
background: #fff;
color: #315d7c;
text-decoration: none;
font-weight: 750;
}
@media (max-width:1050px) {
.or-market-v2-filtergrid {
grid-template-columns:
repeat(2,minmax(0,1fr));
}
.or-market-v2-filtergrid button {
grid-column: 1 / -1;
}
.or-market-v2-grid {
grid-template-columns:
repeat(2,minmax(0,1fr));
}
}
@media (max-width:800px) {
.or-market-v2-headgrid,
.or-market-v2-banner {
flex-direction: column;
align-items: flex-start;
}
.or-market-v2-profilegrid {
grid-template-columns: 1fr;
gap: 25px;
padding: 24px;
}
.or-market-v2-profileimage {
height: 320px;
}
}
@media (max-width:620px) {
.or-market-v2-submit {
width: 100%;
}
.or-market-v2-filtergrid {
grid-template-columns: 1fr;
}
.or-market-v2-filterbottom {
flex-direction: column;
align-items: flex-start;
}
.or-market-v2-grid {
grid-template-columns: 1fr;
}
.or-market-v2-image {
height: 225px;
}
.or-market-v2-profileimage {
height: 250px;
}
.or-market-v2-profileplaceholder {
font-size: 80px;
}
.or-market-v2-profilegrid {
padding: 19px;
}
.or-market-v2-banner {
padding: 21px;
}
.or-market-v2-banner > a {
width: 100%;
text-align: center;
}
}
/*
* ENDE OR_CLASSIFIED_V2_CSS_BLOCK66A
*/
/* OR_EVENTS_V2_CSS_BLOCK67F */
.or-events-v2-header {
padding: 38px 0;
background: linear-gradient(
135deg,
#173e5c,
#34779e
);
color: #fff;
}
.or-events-v2-back {
color: rgba(255,255,255,.88);
text-decoration: none;
font-weight: 750;
}
.or-events-v2-header h1 {
margin: 12px 0 7px;
color: #fff;
font-size: clamp(36px,5vw,56px);
line-height: 1;
}
.or-events-v2-header p {
max-width: 760px;
margin: 0;
color: rgba(255,255,255,.88);
font-size: 17px;
line-height: 1.5;
}
.or-events-v2-main,
.or-event-detail-main {
min-height: 70vh;
padding: 30px 0 70px;
background: #f5f7f9;
}
.or-events-v2-filter {
margin-bottom: 25px;
padding: 19px;
border: 1px solid #e0e6eb;
border-radius: 15px;
background: #fff;
box-shadow:
0 5px 20px
rgba(20,50,70,.05);
}
.or-events-v2-filtergrid {
display: grid;
grid-template-columns:
minmax(230px,2fr)
minmax(145px,1fr)
minmax(145px,1fr)
minmax(175px,1fr)
auto;
gap: 10px;
align-items: end;
}
.or-events-v2-filtergrid label {
display: flex;
flex-direction: column;
gap: 6px;
}
.or-events-v2-filtergrid label span {
color: #586a76;
font-size: 12px;
font-weight: 800;
}
.or-events-v2-filtergrid input,
.or-events-v2-filtergrid select {
width: 100%;
min-height: 44px;
padding: 9px 11px;
border: 1px solid #ccd7df;
border-radius: 8px;
background: #fff;
color: #24343f;
font: inherit;
}
.or-events-v2-filtergrid button {
min-height: 44px;
padding: 9px 16px;
border: 0;
border-radius: 8px;
background: #173e5c;
color: #fff;
font: inherit;
font-weight: 800;
cursor: pointer;
}
.or-events-v2-count {
margin-top: 15px;
padding-top: 14px;
border-top: 1px solid #e5eaed;
color: #657782;
font-size: 14px;
}
.or-events-v2-active {
display: flex;
justify-content: space-between;
gap: 15px;
margin-top: 12px;
padding: 10px 12px;
border-radius: 8px;
background: #edf3f6;
color: #536875;
font-size: 13px;
}
.or-events-v2-active a {
color: #245d82;
font-weight: 750;
}
.or-events-v2-grid {
display: grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
gap: 17px;
}
.or-events-v2-card {
display: grid;
grid-template-columns:
122px
minmax(0,1fr);
overflow: hidden;
border: 1px solid #e0e6eb;
border-radius: 15px;
background: #fff;
box-shadow:
0 5px 20px
rgba(20,50,70,.05);
}
.or-events-v2-card.highlighted {
border-color: #d5b653;
}
.or-events-v2-datebox {
display: flex;
flex-direction: column;
justify-content: center;
padding: 20px 12px;
background: #eaf1f5;
text-align: center;
}
.or-events-v2-datebox span {
color: #657985;
font-size: 12px;
font-weight: 750;
}
.or-events-v2-datebox strong {
display: block;
margin: 5px 0;
color: #173e5c;
font-size: 19px;
}
.or-events-v2-datebox small {
color: #506875;
font-size: 12px;
}
.or-events-v2-cardcontent {
display: flex;
min-width: 0;
flex-direction: column;
padding: 18px;
}
.or-events-v2-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 8px;
}
.or-events-v2-badges span {
padding: 4px 7px;
border-radius: 999px;
background: #edf3f6;
color: #536875;
font-size: 11px;
font-weight: 750;
}
.or-events-v2-badges .highlight {
background: #f6df8d;
color: #59460d;
}
.or-events-v2-card h2 {
margin: 0 0 9px;
color: #173950;
font-size: 20px;
line-height: 1.28;
overflow-wrap: anywhere;
}
.or-events-v2-card h2 a {
color: inherit;
text-decoration: none;
}
.or-events-v2-card h2 a:hover {
text-decoration: underline;
}
.or-events-v2-meta {
margin-bottom: 10px;
color: #607581;
font-size: 13px;
}
.or-events-v2-cardcontent > p {
margin: 0 0 14px;
color: #637580;
line-height: 1.55;
font-size: 14px;
}
.or-events-v2-more {
margin-top: auto;
color: #245d82;
text-decoration: none;
font-size: 13px;
font-weight: 800;
}
.or-events-v2-empty {
padding: 55px 25px;
border: 1px solid #e0e6eb;
border-radius: 15px;
background: #fff;
text-align: center;
}
.or-events-v2-emptyicon {
font-size: 56px;
}
.or-events-v2-empty h2 {
color: #173950;
}
.or-events-v2-empty p {
max-width: 600px;
margin: 8px auto;
color: #637580;
}
.or-events-v2-empty a {
display: inline-flex;
margin-top: 17px;
padding: 10px 16px;
border-radius: 8px;
background: #173e5c;
color: #fff;
text-decoration: none;
font-weight: 800;
}
.or-event-detail-head {
padding: 17px 0;
border-bottom: 1px solid #e1e7eb;
background: #fff;
}
.or-event-detail-head a {
color: #315d7c;
text-decoration: none;
font-weight: 750;
}
.or-event-detail-card {
overflow: hidden;
border: 1px solid #e0e6eb;
border-radius: 18px;
background: #fff;
box-shadow:
0 8px 28px
rgba(20,50,70,.06);
}
.or-event-detail-grid {
display: grid;
grid-template-columns:
minmax(0,1fr)
330px;
gap: 38px;
padding: 34px;
}
.or-event-detail-badges {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.or-event-detail-badges span,
.or-event-detail-badges strong {
padding: 5px 9px;
border-radius: 999px;
background: #edf3f6;
color: #526b7c;
font-size: 12px;
}
.or-event-detail-badges strong {
background: #f6df8d;
color: #59460d;
}
.or-event-detail-content h1 {
margin: 14px 0 18px;
color: #173950;
font-size: clamp(30px,4vw,45px);
line-height: 1.12;
overflow-wrap: anywhere;
}
.or-event-detail-time {
display: grid;
gap: 8px;
padding: 16px;
border-radius: 10px;
background: #edf3f6;
color: #3f5968;
}
.or-event-detail-description {
margin-top: 30px;
padding-top: 25px;
border-top: 1px solid #e4e9ed;
}
.or-event-detail-description h2 {
color: #173950;
}
.or-event-detail-description p {
color: #526571;
line-height: 1.75;
overflow-wrap: anywhere;
}
.or-event-detail-info {
align-self: start;
padding: 22px;
border: 1px solid #e0e6eb;
border-radius: 14px;
background: #f5f7f9;
}
.or-event-detail-info h2 {
margin-top: 0;
color: #173950;
}
.or-event-detail-info > div {
margin-top: 16px;
padding-top: 15px;
border-top: 1px solid #dde4e9;
}
.or-event-detail-info strong {
display: block;
margin-bottom: 5px;
color: #526571;
font-size: 12px;
}
.or-event-detail-info span,
.or-event-detail-info a {
color: #244c68;
line-height: 1.5;
overflow-wrap: anywhere;
}
.or-event-detail-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 11px;
margin-top: 25px;
}
.or-event-detail-actions a {
padding: 10px 15px;
border: 1px solid #d4dde4;
border-radius: 8px;
background: #fff;
color: #315d7c;
text-decoration: none;
font-weight: 750;
}
@media (max-width:1100px) {
.or-events-v2-filtergrid {
grid-template-columns:
repeat(2,minmax(0,1fr));
}
.or-events-v2-filtergrid button {
grid-column: 1 / -1;
}
}
@media (max-width:900px) {
.or-events-v2-grid {
grid-template-columns: 1fr;
}
.or-event-detail-grid {
grid-template-columns: 1fr;
gap: 25px;
padding: 24px;
}
}
@media (max-width:620px) {
.or-events-v2-filtergrid {
grid-template-columns: 1fr;
}
.or-events-v2-active {
flex-direction: column;
}
.or-events-v2-card {
grid-template-columns:
92px
minmax(0,1fr);
}
.or-events-v2-datebox {
padding: 16px 7px;
}
.or-events-v2-datebox strong {
font-size: 15px;
}
.or-events-v2-cardcontent {
padding: 15px;
}
.or-events-v2-card h2 {
font-size: 17px;
}
.or-event-detail-grid {
padding: 19px;
}
}
/* END_OR_EVENTS_V2_CSS_BLOCK67F */
/*
* ==========================================================
* OR_BLAULICHT_V2_CSS_BLOCK68C
* ==========================================================
*/
.or-blaulicht-page {
margin: 0;
background: #f4f6f8;
color: #172033;
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
}
.or-blaulicht-page *,
.or-blaulicht-page *::before,
.or-blaulicht-page *::after {
box-sizing: border-box;
}
.or-blaulicht-shell {
width: min(1180px, calc(100% - 36px));
margin-inline: auto;
}
.or-blaulicht-header {
position: sticky;
z-index: 50;
top: 0;
border-bottom: 1px solid #e1e5ea;
background: rgba(255,255,255,.97);
backdrop-filter: blur(12px);
}
.or-blaulicht-header
.or-blaulicht-shell {
min-height: 72px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
}
.or-blaulicht-brand {
display: inline-flex;
align-items: center;
gap: 11px;
color: #172033;
text-decoration: none;
}
.or-blaulicht-brand strong {
display: block;
font-size: 19px;
line-height: 1.1;
}
.or-blaulicht-brand small {
display: block;
margin-top: 3px;
color: #697586;
font-size: 11px;
}
.or-blaulicht-radar {
display: grid;
width: 40px;
height: 40px;
place-items: center;
border-radius: 50%;
background: #b51f2e;
color: #fff;
font-size: 25px;
}
.or-blaulicht-nav {
display: flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;
}
.or-blaulicht-nav a {
padding: 8px 10px;
border-radius: 8px;
color: #344054;
text-decoration: none;
font-size: 13px;
font-weight: 700;
}
.or-blaulicht-nav a:hover,
.or-blaulicht-nav a.active {
background: #fbeaec;
color: #9e1827;
}
.or-blaulicht-hero {
overflow: hidden;
background:
radial-gradient(
circle at 80% 10%,
rgba(221,55,68,.28),
transparent 28%
),
linear-gradient(
135deg,
#101d30 0%,
#172a45 56%,
#27354b 100%
);
color: #fff;
}
.or-blaulicht-hero-grid {
min-height: 330px;
display: grid;
grid-template-columns:
minmax(0, 1fr)
260px;
align-items: center;
gap: 50px;
padding: 55px 0;
}
.or-blaulicht-kicker {
display: inline-flex;
margin-bottom: 15px;
padding: 7px 11px;
border: 1px solid rgba(255,255,255,.2);
border-radius: 999px;
background: rgba(255,255,255,.08);
color: #f8c8cd;
font-size: 12px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
}
.or-blaulicht-hero h1 {
margin: 0;
font-size: clamp(40px, 6vw, 66px);
line-height: .98;
letter-spacing: -.045em;
}
.or-blaulicht-hero h1 span {
display: block;
margin-top: 10px;
color: #f1b8bf;
font-size: .48em;
letter-spacing: -.025em;
}
.or-blaulicht-hero p {
max-width: 720px;
margin: 24px 0 0;
color: #d9e0e8;
font-size: 17px;
line-height: 1.7;
}
.or-blaulicht-hero-icon {
display: flex;
align-items: center;
justify-content: center;
}
.or-blaulicht-hero-icon img {
width: min(220px, 100%);
filter:
drop-shadow(
0 20px 35px
rgba(0,0,0,.28)
);
}
.or-blaulicht-content {
padding: 45px 0 80px;
}
.or-blaulicht-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 20px;
}
.or-blaulicht-search {
display: flex;
width: min(650px, 100%);
gap: 8px;
}
.or-blaulicht-search input[type="search"] {
min-width: 0;
flex: 1;
height: 46px;
padding: 0 15px;
border: 1px solid #ccd3dc;
border-radius: 10px;
background: #fff;
color: #172033;
font: inherit;
}
.or-blaulicht-search button {
min-height: 46px;
padding: 0 18px;
border: 0;
border-radius: 10px;
background: #163f67;
color: #fff;
cursor: pointer;
font-weight: 800;
}
.or-blaulicht-count {
white-space: nowrap;
color: #697586;
font-size: 14px;
}
.or-blaulicht-count strong {
color: #172033;
}
.or-blaulicht-filters {
display: flex;
gap: 9px;
margin-bottom: 30px;
overflow-x: auto;
padding-bottom: 4px;
}
.or-blaulicht-filter {
flex: 0 0 auto;
padding: 9px 14px;
border: 1px solid #d5dae1;
border-radius: 999px;
background: #fff;
color: #344054;
text-decoration: none;
font-size: 13px;
font-weight: 800;
}
.or-blaulicht-filter:hover,
.or-blaulicht-filter.active {
border-color: #b51f2e;
background: #b51f2e;
color: #fff;
}
.or-blaulicht-result-info {
margin: -10px 0 28px;
padding: 13px 15px;
border-radius: 10px;
background: #fff;
color: #475467;
font-size: 14px;
}
.or-blaulicht-result-info a {
margin-left: 10px;
color: #9e1827;
font-weight: 800;
}
.or-blaulicht-grid {
display: grid;
grid-template-columns:
repeat(3, minmax(0,1fr));
gap: 22px;
}
.or-blaulicht-card {
min-width: 0;
overflow: hidden;
display: flex;
flex-direction: column;
border: 1px solid #e0e4e9;
border-radius: 15px;
background: #fff;
box-shadow:
0 8px 28px
rgba(16,24,40,.065);
}
.or-blaulicht-card-image {
position: relative;
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
background:
linear-gradient(
135deg,
#15253d,
#293a53
);
}
.or-blaulicht-card-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform .35s ease;
}
.or-blaulicht-card:hover
.or-blaulicht-card-image img {
transform: scale(1.025);
}
.or-blaulicht-location {
position: absolute;
z-index: 3;
top: 12px;
left: 12px;
padding: 7px 10px;
border-radius: 999px;
background: #b51f2e;
color: #fff;
box-shadow:
0 4px 12px
rgba(0,0,0,.18);
font-size: 11px;
font-weight: 900;
}
.or-blaulicht-card-body {
display: flex;
flex: 1;
flex-direction: column;
padding: 20px;
}
.or-blaulicht-meta {
display: flex;
justify-content: space-between;
gap: 12px;
color: #7b8796;
font-size: 11px;
}
.or-blaulicht-meta span {
color: #a51c2b;
font-weight: 900;
}
.or-blaulicht-card h2 {
margin: 13px 0 12px;
font-size: 19px;
line-height: 1.32;
letter-spacing: -.02em;
}
.or-blaulicht-card h2 a {
color: #172033;
text-decoration: none;
}
.or-blaulicht-card h2 a:hover {
color: #9e1827;
}
.or-blaulicht-card p {
margin: 0 0 20px;
color: #5f6b7a;
font-size: 14px;
line-height: 1.62;
}
.or-blaulicht-card-footer {
margin-top: auto;
padding-top: 15px;
border-top: 1px solid #edf0f3;
}
.or-blaulicht-source {
display: block;
margin-bottom: 10px;
color: #8994a3;
font-size: 10px;
}
.or-blaulicht-more {
color: #9e1827;
text-decoration: none;
font-size: 13px;
font-weight: 900;
}
.or-blaulicht-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-top: 38px;
}
.or-blaulicht-pagination a {
padding: 9px 13px;
border: 1px solid #d5dae1;
border-radius: 9px;
background: #fff;
color: #344054;
text-decoration: none;
font-weight: 800;
}
.or-blaulicht-pagination span {
color: #697586;
font-size: 13px;
}
.or-blaulicht-empty {
padding: 70px 25px;
border: 1px solid #e0e4e9;
border-radius: 15px;
background: #fff;
text-align: center;
}
.or-blaulicht-empty > div {
color: #b51f2e;
font-size: 50px;
}
.or-blaulicht-empty h2 {
margin: 10px 0;
}
.or-blaulicht-empty p {
color: #697586;
}
.or-blaulicht-empty a {
display: inline-flex;
margin-top: 10px;
padding: 10px 15px;
border-radius: 9px;
background: #163f67;
color: #fff;
text-decoration: none;
font-weight: 800;
}
.or-blaulicht-info {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
margin-top: 45px;
padding: 25px;
border-left: 4px solid #b51f2e;
border-radius: 10px;
background: #fff;
}
.or-blaulicht-info strong {
display: block;
margin-bottom: 5px;
}
.or-blaulicht-info p {
margin: 0;
color: #697586;
font-size: 13px;
line-height: 1.6;
}
.or-blaulicht-info > a {
flex: 0 0 auto;
color: #163f67;
text-decoration: none;
font-weight: 900;
}
.or-blaulicht-footer {
padding: 30px 0;
background: #111d2e;
color: #d5dde7;
}
.or-blaulicht-footer
.or-blaulicht-shell {
display: flex;
align-items: center;
gap: 15px;
}
.or-blaulicht-footer span {
color: #94a0af;
}
.or-blaulicht-footer a {
margin-left: auto;
color: #fff;
text-decoration: none;
font-weight: 800;
}
@media (max-width: 900px) {
.or-blaulicht-nav {
display: none;
}
.or-blaulicht-hero-grid {
grid-template-columns: 1fr 160px;
}
.or-blaulicht-grid {
grid-template-columns:
repeat(2, minmax(0,1fr));
}
}
@media (max-width: 650px) {
.or-blaulicht-shell {
width: min(
100% - 24px,
1180px
);
}
.or-blaulicht-header
.or-blaulicht-shell {
min-height: 62px;
}
.or-blaulicht-hero-grid {
min-height: 0;
grid-template-columns: 1fr;
gap: 25px;
padding: 42px 0;
}
.or-blaulicht-hero-icon {
display: none;
}
.or-blaulicht-hero h1 {
font-size: 43px;
}
.or-blaulicht-hero p {
font-size: 15px;
}
.or-blaulicht-content {
padding: 28px 0 55px;
}
.or-blaulicht-toolbar {
align-items: stretch;
flex-direction: column;
}
.or-blaulicht-search {
width: 100%;
}
.or-blaulicht-search button {
padding-inline: 13px;
}
.or-blaulicht-grid {
grid-template-columns: 1fr;
}
.or-blaulicht-meta {
flex-direction: column;
gap: 5px;
}
.or-blaulicht-pagination {
flex-wrap: wrap;
}
.or-blaulicht-info {
align-items: flex-start;
flex-direction: column;
}
.or-blaulicht-footer
.or-blaulicht-shell {
align-items: flex-start;
flex-direction: column;
}
.or-blaulicht-footer a {
margin-left: 0;
}
}
/* ==========================================================
OR_VERKEHR_V2_CSS_BLOCK69B
Verkehr & ÖPNV
========================================================== */
.or-traffic-page {
margin: 0;
background: #f5f7f8;
color: #182126;
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
}
.or-traffic-page *,
.or-traffic-page *::before,
.or-traffic-page *::after {
box-sizing: border-box;
}
.or-traffic-header {
background: #ffffff;
border-bottom: 1px solid #dde3e6;
position: sticky;
top: 0;
z-index: 50;
}
.or-traffic-header-inner {
max-width: 1240px;
margin: 0 auto;
padding: 14px 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.or-traffic-brand {
color: #172026;
text-decoration: none;
display: flex;
flex-direction: column;
line-height: 1.15;
}
.or-traffic-brand strong {
font-size: 1.2rem;
}
.or-traffic-brand span {
margin-top: 4px;
font-size: .78rem;
color: #66747c;
}
.or-traffic-nav {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.or-traffic-nav a {
color: #34434b;
text-decoration: none;
font-weight: 700;
font-size: .91rem;
padding: 9px 11px;
border-radius: 9px;
}
.or-traffic-nav a:hover,
.or-traffic-nav a[aria-current="page"] {
background: #e8f3ef;
color: #126247;
}
.or-traffic-main {
max-width: 1240px;
margin: 0 auto;
padding: 28px 22px 56px;
}
.or-traffic-hero {
display: flex;
align-items: center;
gap: 24px;
padding: 30px;
border-radius: 20px;
background:
linear-gradient(
135deg,
#0d5f49,
#15815f
);
color: #ffffff;
box-shadow:
0 12px 34px
rgba(18, 64, 52, .14);
}
.or-traffic-hero-icon {
width: 78px;
height: 78px;
flex: 0 0 78px;
border-radius: 18px;
display: grid;
place-items: center;
font-size: 2.6rem;
background: rgba(255,255,255,.15);
}
.or-traffic-kicker {
margin: 0 0 7px;
font-size: .76rem;
font-weight: 900;
letter-spacing: .11em;
}
.or-traffic-hero h1 {
margin: 0;
font-size: clamp(2rem, 5vw, 3.2rem);
line-height: 1.05;
}
.or-traffic-hero p:last-child {
max-width: 780px;
margin: 12px 0 0;
line-height: 1.65;
color: rgba(255,255,255,.9);
}
.or-traffic-tools {
margin-top: 24px;
padding: 22px;
border-radius: 16px;
background: #ffffff;
border: 1px solid #e0e6e8;
}
.or-traffic-search label {
display: block;
margin-bottom: 8px;
font-weight: 800;
}
.or-traffic-search-row {
display: flex;
gap: 10px;
}
.or-traffic-search-row input {
width: 100%;
min-width: 0;
padding: 13px 14px;
border: 1px solid #cfd8dc;
border-radius: 10px;
font: inherit;
background: #ffffff;
color: #172026;
}
.or-traffic-search-row button {
border: 0;
border-radius: 10px;
padding: 12px 22px;
font: inherit;
font-weight: 800;
cursor: pointer;
background: #126247;
color: #ffffff;
}
.or-traffic-locations {
margin-top: 18px;
display: flex;
flex-wrap: wrap;
gap: 9px;
}
.or-traffic-locations a {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 12px;
border-radius: 999px;
border: 1px solid #d6dfe2;
color: #3d4a50;
text-decoration: none;
font-weight: 750;
background: #ffffff;
}
.or-traffic-locations a span {
min-width: 24px;
padding: 2px 6px;
text-align: center;
border-radius: 999px;
background: #edf1f2;
font-size: .78rem;
}
.or-traffic-locations a:hover,
.or-traffic-locations a.is-active {
color: #ffffff;
border-color: #126247;
background: #126247;
}
.or-traffic-locations a.is-active span,
.or-traffic-locations a:hover span {
background: rgba(255,255,255,.18);
}
.or-traffic-results {
margin-top: 30px;
}
.or-traffic-results-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
margin-bottom: 18px;
}
.or-traffic-results-head h2 {
margin: 0;
font-size: clamp(1.45rem, 3vw, 2rem);
}
.or-traffic-results-head .or-traffic-kicker {
color: #126247;
}
.or-traffic-result-count {
white-space: nowrap;
color: #637178;
font-weight: 750;
}
.or-traffic-grid {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 20px;
}
.or-traffic-card {
overflow: hidden;
display: flex;
flex-direction: column;
min-width: 0;
border-radius: 16px;
border: 1px solid #dfe6e8;
background: #ffffff;
box-shadow:
0 6px 20px
rgba(29, 48, 57, .06);
}
.or-traffic-card-image {
height: 160px;
display: block;
overflow: hidden;
background: #eaf2ef;
}
.or-traffic-card-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.or-traffic-card-body {
flex: 1;
padding: 18px;
display: flex;
flex-direction: column;
}
.or-traffic-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
margin-bottom: 10px;
color: #728087;
font-size: .79rem;
}
.or-traffic-location {
display: inline-block;
padding: 5px 8px;
border-radius: 999px;
background: #e5f2ed;
color: #126247;
font-weight: 850;
}
.or-traffic-card h3 {
margin: 0;
font-size: 1.13rem;
line-height: 1.35;
}
.or-traffic-card h3 a {
color: #172026;
text-decoration: none;
}
.or-traffic-card h3 a:hover {
color: #126247;
}
.or-traffic-card-body > p {
margin: 12px 0 18px;
color: #58676e;
line-height: 1.55;
}
.or-traffic-card-footer {
margin-top: auto;
padding-top: 14px;
border-top: 1px solid #edf0f1;
display: flex;
flex-direction: column;
gap: 9px;
color: #748087;
font-size: .79rem;
}
.or-traffic-read {
color: #126247;
text-decoration: none;
font-weight: 850;
}
.or-traffic-empty {
padding: 36px 24px;
border-radius: 16px;
text-align: center;
background: #ffffff;
border: 1px solid #dfe6e8;
}
.or-traffic-empty h3 {
margin-top: 0;
}
.or-traffic-empty p {
color: #637178;
}
.or-traffic-empty a {
color: #126247;
font-weight: 800;
}
.or-traffic-pagination {
margin-top: 26px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 14px;
}
.or-traffic-pagination a {
padding: 10px 14px;
border-radius: 9px;
background: #126247;
color: #ffffff;
text-decoration: none;
font-weight: 800;
}
.or-traffic-pagination span {
color: #5f6d73;
font-weight: 700;
}
.or-traffic-info {
margin-top: 34px;
padding: 22px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
background: #e8f3ef;
border: 1px solid #cee3db;
}
.or-traffic-info strong {
font-size: 1.1rem;
}
.or-traffic-info p {
margin: 5px 0 0;
color: #53645e;
}
.or-traffic-info > a {
flex: 0 0 auto;
color: #126247;
text-decoration: none;
font-weight: 850;
}
.or-traffic-footer {
padding: 28px 22px;
background: #182126;
color: #ffffff;
}
.or-traffic-footer > div {
max-width: 1240px;
margin: 0 auto;
display: flex;
justify-content: space-between;
gap: 20px;
}
.or-traffic-footer span {
color: #b9c4c9;
}
.or-traffic-start-link {
display: inline-flex;
align-items: center;
margin-left: 8px;
}
@media (max-width: 980px) {
.or-traffic-header-inner {
align-items: flex-start;
flex-direction: column;
}
.or-traffic-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 680px) {
.or-traffic-main {
padding:
18px 14px 40px;
}
.or-traffic-header-inner {
padding:
12px 14px;
}
.or-traffic-nav {
width: 100%;
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: 4px;
}
.or-traffic-nav a {
white-space: nowrap;
}
.or-traffic-hero {
align-items: flex-start;
padding: 22px 18px;
}
.or-traffic-hero-icon {
width: 54px;
height: 54px;
flex-basis: 54px;
font-size: 1.8rem;
}
.or-traffic-search-row {
flex-direction: column;
}
.or-traffic-search-row button {
width: 100%;
}
.or-traffic-results-head {
align-items: flex-start;
flex-direction: column;
}
.or-traffic-grid {
grid-template-columns: 1fr;
}
.or-traffic-card-image {
height: 190px;
}
.or-traffic-info {
align-items: flex-start;
flex-direction: column;
}
.or-traffic-footer > div {
flex-direction: column;
}
}
/*
* ============================================================
* OR_SPORT_V2_CSS_BLOCK70B
* ============================================================
*/
.or-sport-page {
margin: 0;
background:
#f5f7fa;
color:
#17202a;
}
.or-sport-page *,
.or-sport-page *::before,
.or-sport-page *::after {
box-sizing:
border-box;
}
.or-sport-header {
position:
sticky;
top:
0;
z-index:
50;
background:
rgba(255,255,255,.97);
border-bottom:
1px solid #e5e9ef;
backdrop-filter:
blur(12px);
}
.or-sport-header-inner {
width:
min(1240px, calc(100% - 32px));
min-height:
72px;
margin:
0 auto;
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
24px;
}
.or-sport-brand {
display:
inline-flex;
align-items:
center;
gap:
12px;
text-decoration:
none;
color:
#17202a;
}
.or-sport-brand strong {
display:
block;
font-size:
20px;
}
.or-sport-brand small {
display:
block;
margin-top:
2px;
color:
#68717d;
}
.or-sport-radar {
width:
42px;
height:
42px;
border-radius:
50%;
display:
grid;
place-items:
center;
background:
#edf8f1;
color:
#14733b;
font-size:
25px;
}
.or-sport-header-actions {
display:
flex;
align-items:
center;
gap:
8px;
flex-wrap:
wrap;
}
.or-sport-header-actions a {
padding:
9px 13px;
border-radius:
9px;
color:
#3e4854;
text-decoration:
none;
font-weight:
700;
}
.or-sport-header-actions a:hover,
.or-sport-header-actions a.active {
background:
#eaf7ef;
color:
#116936;
}
.or-sport-main {
width:
min(1240px, calc(100% - 32px));
margin:
28px auto 60px;
}
.or-sport-hero {
min-height:
300px;
padding:
clamp(30px, 5vw, 64px);
border-radius:
26px;
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
30px;
overflow:
hidden;
background:
linear-gradient(
135deg,
#0c502a 0%,
#168448 58%,
#25a861 100%
);
color:
#fff;
box-shadow:
0 18px 45px
rgba(12,80,42,.18);
}
.or-sport-kicker {
margin-bottom:
13px;
font-size:
13px;
font-weight:
900;
letter-spacing:
.14em;
opacity:
.82;
}
.or-sport-hero h1 {
margin:
0;
max-width:
700px;
font-size:
clamp(35px, 5vw, 62px);
line-height:
1.02;
color:
#fff;
}
.or-sport-hero p {
max-width:
720px;
margin:
20px 0 0;
font-size:
clamp(17px, 2vw, 21px);
line-height:
1.55;
color:
rgba(255,255,255,.9);
}
.or-sport-hero-stats {
display:
flex;
flex-wrap:
wrap;
gap:
14px;
margin-top:
28px;
}
.or-sport-hero-stats div {
min-width:
150px;
padding:
13px 17px;
border:
1px solid
rgba(255,255,255,.2);
border-radius:
13px;
background:
rgba(255,255,255,.11);
}
.or-sport-hero-stats strong {
display:
block;
font-size:
23px;
}
.or-sport-hero-stats span {
display:
block;
margin-top:
3px;
font-size:
12px;
color:
rgba(255,255,255,.78);
}
.or-sport-hero-icon {
flex:
0 0 auto;
font-size:
clamp(90px, 14vw, 175px);
line-height:
1;
filter:
drop-shadow(
0 12px 20px
rgba(0,0,0,.16)
);
}
.or-sport-clubs,
.or-sport-news-section {
margin-top:
38px;
}
.or-sport-section-heading {
display:
flex;
align-items:
end;
justify-content:
space-between;
gap:
20px;
margin-bottom:
18px;
}
.or-sport-section-heading > div > span {
display:
block;
margin-bottom:
5px;
color:
#168448;
font-size:
12px;
font-weight:
900;
letter-spacing:
.13em;
}
.or-sport-section-heading h2 {
margin:
0;
font-size:
clamp(25px, 3vw, 35px);
line-height:
1.15;
}
.or-sport-club-grid {
display:
grid;
grid-template-columns:
repeat(4, minmax(0,1fr));
gap:
15px;
}
.or-sport-club-card {
min-height:
170px;
padding:
22px;
border:
1px solid #e2e7ec;
border-radius:
18px;
display:
flex;
flex-direction:
column;
text-decoration:
none;
color:
#17202a;
background:
#fff;
box-shadow:
0 8px 25px
rgba(20,30,40,.05);
transition:
transform .15s ease,
box-shadow .15s ease,
border-color .15s ease;
}
.or-sport-club-card:hover,
.or-sport-club-card.active {
transform:
translateY(-3px);
border-color:
#43a66c;
box-shadow:
0 14px 32px
rgba(20,90,50,.12);
}
.or-sport-club-card.active {
background:
#effaf3;
}
.or-sport-club-icon {
margin-bottom:
15px;
font-size:
31px;
}
.or-sport-club-card strong {
font-size:
17px;
line-height:
1.3;
}
.or-sport-club-card small {
margin-top:
5px;
color:
#707985;
}
.or-sport-club-card b {
margin-top:
auto;
padding-top:
15px;
color:
#14733b;
font-size:
13px;
}
.or-sport-reset-row {
margin-top:
13px;
}
.or-sport-reset-row a {
color:
#16723d;
font-weight:
700;
text-decoration:
none;
}
.or-sport-filter-panel {
margin-top:
28px;
padding:
22px;
border:
1px solid #e1e6eb;
border-radius:
18px;
background:
#fff;
}
.or-sport-search label {
display:
block;
margin-bottom:
8px;
font-weight:
800;
}
.or-sport-search-row {
display:
flex;
gap:
10px;
}
.or-sport-search-row input {
flex:
1 1 auto;
min-width:
0;
height:
48px;
padding:
0 15px;
border:
1px solid #ccd3da;
border-radius:
10px;
font:
inherit;
color:
#17202a;
background:
#fff;
}
.or-sport-search-row button {
min-width:
110px;
height:
48px;
padding:
0 20px;
border:
0;
border-radius:
10px;
background:
#167c43;
color:
#fff;
font:
inherit;
font-weight:
800;
cursor:
pointer;
}
.or-sport-location-filter {
display:
flex;
align-items:
center;
flex-wrap:
wrap;
gap:
8px;
margin-top:
18px;
}
.or-sport-filter-label {
margin-right:
4px;
font-weight:
800;
}
.or-sport-location-filter a {
display:
inline-flex;
align-items:
center;
gap:
6px;
padding:
8px 12px;
border:
1px solid #dce2e8;
border-radius:
999px;
color:
#48515b;
background:
#fff;
text-decoration:
none;
font-weight:
700;
}
.or-sport-location-filter a.active {
border-color:
#168448;
background:
#168448;
color:
#fff;
}
.or-sport-location-filter small {
font-size:
11px;
opacity:
.8;
}
.or-sport-active-filter {
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
15px;
margin-top:
17px;
padding-top:
16px;
border-top:
1px solid #edf0f3;
}
.or-sport-active-filter span {
font-weight:
800;
}
.or-sport-active-filter a {
color:
#16723d;
font-weight:
800;
text-decoration:
none;
}
.or-sport-result-count {
color:
#6b7480;
font-weight:
700;
}
.or-sport-news-grid {
display:
grid;
grid-template-columns:
repeat(3, minmax(0,1fr));
gap:
20px;
}
.or-sport-news-card {
min-width:
0;
overflow:
hidden;
border:
1px solid #e2e7ec;
border-radius:
18px;
background:
#fff;
box-shadow:
0 9px 28px
rgba(20,30,40,.06);
}
.or-sport-news-image {
position:
relative;
display:
block;
height:
190px;
overflow:
hidden;
background:
#eaf6ee;
}
.or-sport-news-image img {
width:
100%;
height:
100%;
object-fit:
cover;
display:
block;
transition:
transform .25s ease;
}
.or-sport-news-card:hover
.or-sport-news-image img {
transform:
scale(1.025);
}
.or-sport-club-badge {
position:
absolute;
left:
14px;
bottom:
14px;
max-width:
calc(100% - 28px);
padding:
8px 11px;
border-radius:
9px;
background:
rgba(16,27,21,.88);
color:
#fff;
font-size:
12px;
font-weight:
800;
}
.or-sport-news-body {
padding:
19px;
}
.or-sport-news-meta {
display:
flex;
align-items:
center;
justify-content:
space-between;
flex-wrap:
wrap;
gap:
7px;
margin-bottom:
10px;
color:
#6c7580;
font-size:
12px;
}
.or-sport-news-body h3 {
margin:
0;
font-size:
20px;
line-height:
1.32;
}
.or-sport-news-body h3 a {
color:
#17202a;
text-decoration:
none;
}
.or-sport-news-body h3 a:hover {
color:
#13703a;
}
.or-sport-news-body p {
margin:
13px 0 0;
color:
#58616b;
line-height:
1.55;
}
.or-sport-news-footer {
display:
flex;
align-items:
end;
justify-content:
space-between;
gap:
14px;
margin-top:
18px;
padding-top:
15px;
border-top:
1px solid #edf0f2;
}
.or-sport-news-footer small {
color:
#7a838c;
line-height:
1.35;
}
.or-sport-news-footer a {
flex:
0 0 auto;
color:
#14743d;
text-decoration:
none;
font-weight:
800;
}
.or-sport-empty {
padding:
55px 25px;
border:
1px dashed #ccd5dc;
border-radius:
18px;
text-align:
center;
background:
#fff;
}
.or-sport-empty > div {
font-size:
52px;
}
.or-sport-empty h3 {
margin:
12px 0 5px;
}
.or-sport-empty p {
margin:
0;
color:
#69727d;
}
.or-sport-empty a {
display:
inline-block;
margin-top:
17px;
color:
#14743d;
font-weight:
800;
text-decoration:
none;
}
.or-sport-pagination {
display:
flex;
align-items:
center;
justify-content:
center;
gap:
18px;
margin-top:
28px;
}
.or-sport-pagination a {
padding:
10px 14px;
border-radius:
9px;
background:
#fff;
border:
1px solid #dce2e7;
color:
#166f3c;
text-decoration:
none;
font-weight:
800;
}
.or-sport-pagination span {
color:
#68717b;
font-weight:
700;
}
.or-sport-more {
margin-top:
42px;
padding:
28px;
border-radius:
20px;
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
25px;
background:
#17251d;
color:
#fff;
}
.or-sport-more > div > span {
color:
#7ed59f;
font-size:
12px;
font-weight:
900;
letter-spacing:
.12em;
}
.or-sport-more h2 {
margin:
6px 0;
color:
#fff;
}
.or-sport-more p {
margin:
0;
color:
rgba(255,255,255,.72);
}
.or-sport-more-links {
display:
flex;
flex-wrap:
wrap;
justify-content:
flex-end;
gap:
8px;
}
.or-sport-more-links a {
padding:
10px 13px;
border:
1px solid
rgba(255,255,255,.18);
border-radius:
9px;
color:
#fff;
text-decoration:
none;
background:
rgba(255,255,255,.07);
}
.or-sport-footer {
padding:
28px 16px;
border-top:
1px solid #e2e6ea;
background:
#fff;
}
.or-sport-footer > div {
width:
min(1240px,100%);
margin:
0 auto;
display:
flex;
justify-content:
space-between;
gap:
20px;
color:
#69727c;
}
.or-sport-footer strong {
color:
#17202a;
}
@media (max-width: 1000px) {
.or-sport-club-grid {
grid-template-columns:
repeat(2,minmax(0,1fr));
}
.or-sport-news-grid {
grid-template-columns:
repeat(2,minmax(0,1fr));
}
.or-sport-hero-icon {
font-size:
105px;
}
}
@media (max-width: 720px) {
.or-sport-header-inner {
width:
min(100% - 22px,1240px);
padding:
10px 0;
align-items:
flex-start;
flex-direction:
column;
}
.or-sport-header {
position:
static;
}
.or-sport-header-actions {
width:
100%;
overflow-x:
auto;
flex-wrap:
nowrap;
padding-bottom:
3px;
}
.or-sport-header-actions a {
flex:
0 0 auto;
}
.or-sport-main {
width:
min(100% - 22px,1240px);
margin-top:
15px;
}
.or-sport-hero {
min-height:
auto;
padding:
28px 22px;
border-radius:
18px;
}
.or-sport-hero-icon {
display:
none;
}
.or-sport-club-grid {
grid-template-columns:
1fr;
}
.or-sport-club-card {
min-height:
145px;
}
.or-sport-news-grid {
grid-template-columns:
1fr;
}
.or-sport-search-row {
flex-direction:
column;
}
.or-sport-search-row button {
width:
100%;
}
.or-sport-section-heading {
align-items:
flex-start;
flex-direction:
column;
}
.or-sport-active-filter {
align-items:
flex-start;
flex-direction:
column;
}
.or-sport-more {
align-items:
flex-start;
flex-direction:
column;
}
.or-sport-more-links {
justify-content:
flex-start;
}
.or-sport-footer > div {
flex-direction:
column;
}
}
/*
* ENDE OR_SPORT_V2_CSS_BLOCK70B
*/
/* ==========================================================
OR_KULTUR_V3_CSS_BLOCK73C
Kultur & Freizeit
========================================================== */
.or-kultur-page {
margin: 0;
background: #f6f7f9;
color: #1c2230;
}
.or-kultur-header {
background: #ffffff;
border-bottom: 1px solid rgba(0,0,0,.08);
}
.or-kultur-header-inner {
max-width: 1240px;
min-height: 74px;
margin: 0 auto;
padding: 0 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
}
.or-kultur-brand {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
}
.or-kultur-brand strong {
font-size: 1.2rem;
}
.or-kultur-brand span {
font-size: .78rem;
opacity: .66;
}
.or-kultur-nav {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.or-kultur-nav a {
color: inherit;
text-decoration: none;
font-weight: 700;
}
.or-kultur-nav a.active {
color: #713c7d;
}
.or-kultur-hero {
background:
linear-gradient(
135deg,
#3d2545,
#713c7d
);
color: #fff;
}
.or-kultur-hero-inner {
max-width: 1240px;
margin: 0 auto;
padding: 46px 22px;
display: grid;
grid-template-columns: minmax(0,1.3fr) minmax(260px,.7fr);
align-items: center;
gap: 40px;
}
.or-kultur-kicker {
display: inline-block;
margin-bottom: 8px;
font-size: .78rem;
font-weight: 900;
letter-spacing: .09em;
text-transform: uppercase;
}
.or-kultur-hero h1 {
margin: 0 0 14px;
font-size: clamp(2rem,5vw,4rem);
line-height: 1.02;
}
.or-kultur-hero p {
max-width: 700px;
margin: 0;
font-size: 1.08rem;
line-height: 1.65;
opacity: .92;
}
.or-kultur-hero-image {
display: block;
width: 100%;
border-radius: 20px;
box-shadow: 0 18px 45px rgba(0,0,0,.24);
}
.or-kultur-tools,
.or-kultur-content,
.or-kultur-events-cta,
.or-kultur-more {
max-width: 1240px;
margin-left: auto;
margin-right: auto;
padding-left: 22px;
padding-right: 22px;
}
.or-kultur-tools {
padding-top: 30px;
}
.or-kultur-search {
background: #fff;
padding: 20px;
border-radius: 18px;
box-shadow: 0 8px 30px rgba(0,0,0,.05);
}
.or-kultur-search label {
display: block;
margin-bottom: 8px;
font-weight: 800;
}
.or-kultur-search-row {
display: flex;
gap: 10px;
}
.or-kultur-search-row input {
flex: 1;
min-width: 0;
min-height: 48px;
padding: 0 15px;
border: 1px solid #d8dbe1;
border-radius: 12px;
font: inherit;
}
.or-kultur-search-row button {
min-height: 48px;
padding: 0 22px;
border: 0;
border-radius: 12px;
background: #713c7d;
color: #fff;
font: inherit;
font-weight: 800;
cursor: pointer;
}
.or-kultur-locations {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-top: 18px;
}
.or-kultur-locations a {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 13px;
border-radius: 999px;
background: #fff;
border: 1px solid #e0e2e7;
text-decoration: none;
color: inherit;
font-weight: 750;
}
.or-kultur-locations a.active {
background: #713c7d;
border-color: #713c7d;
color: #fff;
}
.or-kultur-locations span {
min-width: 23px;
padding: 2px 6px;
border-radius: 999px;
background: rgba(0,0,0,.07);
text-align: center;
font-size: .78rem;
}
.or-kultur-locations a.active span {
background: rgba(255,255,255,.18);
}
.or-kultur-content {
padding-top: 34px;
padding-bottom: 20px;
}
.or-kultur-heading-row {
display: flex;
align-items: end;
justify-content: space-between;
gap: 20px;
margin-bottom: 18px;
}
.or-kultur-heading-row h2 {
margin: 0;
font-size: clamp(1.6rem,3vw,2.4rem);
}
.or-kultur-result-count {
font-weight: 800;
opacity: .72;
}
.or-kultur-grid {
display: grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap: 22px;
}
.or-kultur-card {
overflow: hidden;
background: #fff;
border-radius: 20px;
border: 1px solid rgba(0,0,0,.07);
box-shadow: 0 10px 30px rgba(0,0,0,.055);
}
.or-kultur-card-image-link {
display: block;
background: #56315e;
}
.or-kultur-card-image {
display: block;
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
}
.or-kultur-card-body {
padding: 19px;
}
.or-kultur-card-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 11px;
font-size: .78rem;
opacity: .72;
}
.or-kultur-location {
padding: 5px 8px;
border-radius: 999px;
background: #f1eaf3;
color: #63366e;
font-weight: 850;
opacity: 1;
}
.or-kultur-card h3 {
margin: 0 0 11px;
font-size: 1.16rem;
line-height: 1.3;
}
.or-kultur-card h3 a {
color: inherit;
text-decoration: none;
}
.or-kultur-card p {
margin: 0;
line-height: 1.55;
opacity: .83;
}
.or-kultur-card-footer {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid #eceef1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
font-size: .78rem;
}
.or-kultur-card-footer span {
opacity: .65;
}
.or-kultur-card-footer a {
color: #713c7d;
text-decoration: none;
font-weight: 850;
white-space: nowrap;
}
.or-kultur-empty {
padding: 48px 28px;
background: #fff;
border-radius: 20px;
text-align: center;
border: 1px solid #e2e4e8;
}
.or-kultur-empty h3 {
margin-top: 0;
}
.or-kultur-empty a {
display: inline-block;
margin-top: 8px;
color: #713c7d;
font-weight: 800;
}
.or-kultur-pagination {
margin-top: 30px;
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
}
.or-kultur-pagination a {
padding: 10px 14px;
border-radius: 10px;
background: #fff;
border: 1px solid #dddfe4;
color: inherit;
text-decoration: none;
font-weight: 800;
}
.or-kultur-events-cta {
padding-top: 25px;
padding-bottom: 20px;
}
.or-kultur-events-cta-inner {
padding: 28px;
border-radius: 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
background:
linear-gradient(
135deg,
#f1e9f3,
#e5d7e9
);
border: 1px solid #d8c4dd;
}
.or-kultur-events-cta h2 {
margin: 0 0 8px;
}
.or-kultur-events-cta p {
margin: 0;
max-width: 720px;
line-height: 1.55;
}
.or-kultur-events-button {
display: inline-flex;
min-height: 48px;
padding: 0 18px;
align-items: center;
justify-content: center;
border-radius: 12px;
background: #713c7d;
color: #fff;
text-decoration: none;
font-weight: 850;
white-space: nowrap;
}
.or-kultur-more {
padding-top: 10px;
padding-bottom: 45px;
text-align: center;
}
.or-kultur-more a {
color: #713c7d;
font-weight: 850;
}
.or-kultur-footer {
padding: 28px 22px;
background: #20232b;
color: #fff;
}
.or-kultur-footer > div {
max-width: 1240px;
margin: 0 auto;
display: flex;
justify-content: space-between;
gap: 20px;
}
@media (max-width: 980px) {
.or-kultur-grid {
grid-template-columns:
repeat(2,minmax(0,1fr));
}
.or-kultur-hero-inner {
grid-template-columns: 1fr;
}
.or-kultur-hero-image {
max-width: 520px;
}
.or-kultur-header-inner {
align-items: flex-start;
flex-direction: column;
padding-top: 17px;
padding-bottom: 17px;
}
}
@media (max-width: 680px) {
.or-kultur-grid {
grid-template-columns: 1fr;
}
.or-kultur-nav {
gap: 12px;
font-size: .9rem;
}
.or-kultur-search-row {
display: block;
}
.or-kultur-search-row button {
width: 100%;
margin-top: 9px;
}
.or-kultur-heading-row,
.or-kultur-events-cta-inner {
display: block;
}
.or-kultur-result-count {
margin-top: 8px;
}
.or-kultur-events-button {
width: 100%;
margin-top: 18px;
}
.or-kultur-card-footer {
align-items: flex-start;
flex-direction: column;
}
}
/* OR_PORTAL_HUB_CSS_BLOCK74B START */
.or-portal-hub {
padding: clamp(20px,3vw,34px) clamp(14px,3vw,28px);
background: linear-gradient(180deg,#f6f9fd 0%,#ffffff 100%);
border-bottom: 1px solid rgba(15,23,42,.08);
}
.or-portal-hub__inner {
width: min(1220px,100%);
margin: 0 auto;
}
.or-portal-hub__intro {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 20px;
}
.or-portal-hub__eyebrow {
display: inline-block;
margin-bottom: 7px;
color: #1767c0;
font-size: .78rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.or-portal-hub__intro h2 {
margin: 0;
color: #10243e;
font-size: clamp(1.45rem,2.6vw,2.15rem);
line-height: 1.15;
}
.or-portal-hub__intro p {
max-width: 720px;
margin: 8px 0 0;
color: #5d6b7d;
line-height: 1.55;
}
.or-portal-hub__news-link {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border: 1px solid rgba(23,103,192,.20);
border-radius: 999px;
background: #fff;
color: #1767c0;
font-weight: 800;
text-decoration: none;
}
.or-portal-hub__grid {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 12px;
}
.or-portal-hub__card {
--or-hub-accent: #1767c0;
position: relative;
display: grid;
grid-template-columns: 48px minmax(0,1fr) 24px;
align-items: center;
gap: 12px;
min-height: 98px;
padding: 15px;
overflow: hidden;
border: 1px solid rgba(15,23,42,.09);
border-radius: 17px;
background: #fff;
color: #10243e;
text-decoration: none;
box-shadow: 0 5px 18px rgba(15,23,42,.055);
transition:
transform .16s ease,
box-shadow .16s ease,
border-color .16s ease;
}
.or-portal-hub__card::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 4px;
background: var(--or-hub-accent);
}
.or-portal-hub__card:hover,
.or-portal-hub__card:focus-visible {
transform: translateY(-2px);
border-color: var(--or-hub-accent);
box-shadow: 0 10px 27px rgba(15,23,42,.10);
}
.or-portal-hub__icon {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 14px;
background: #f2f6fb;
font-size: 1.5rem;
}
.or-portal-hub__content {
display: block;
min-width: 0;
}
.or-portal-hub__content strong {
display: block;
margin-bottom: 4px;
color: #10243e;
font-size: 1rem;
}
.or-portal-hub__content small {
display: block;
color: #64748b;
font-size: .82rem;
line-height: 1.35;
}
.or-portal-hub__arrow {
color: var(--or-hub-accent);
font-size: 1.25rem;
font-weight: 900;
text-align: right;
transition: transform .16s ease;
}
.or-portal-hub__card:hover .or-portal-hub__arrow {
transform: translateX(3px);
}
.or-portal-hub__card--news {
--or-hub-accent: #1767c0;
}
.or-portal-hub__card--police {
--or-hub-accent: #c93434;
}
.or-portal-hub__card--traffic {
--or-hub-accent: #df7b1c;
}
.or-portal-hub__card--sport {
--or-hub-accent: #16844b;
}
.or-portal-hub__card--culture {
--or-hub-accent: #7545ad;
}
.or-portal-hub__card--events {
--or-hub-accent: #b9477d;
}
.or-portal-hub__card--business {
--or-hub-accent: #087f8a;
}
.or-portal-hub__card--jobs {
--or-hub-accent: #4057a6;
}
.or-portal-hub__card--market {
--or-hub-accent: #94601c;
}
@media (max-width:980px) {
.or-portal-hub__grid {
grid-template-columns: repeat(2,minmax(0,1fr));
}
}
@media (max-width:680px) {
.or-portal-hub {
padding: 18px 12px 22px;
}
.or-portal-hub__intro {
flex-direction: column;
align-items: flex-start;
gap: 13px;
}
.or-portal-hub__grid {
grid-template-columns: 1fr;
gap: 9px;
}
.or-portal-hub__card {
grid-template-columns: 43px minmax(0,1fr) 20px;
min-height: 80px;
padding: 12px;
border-radius: 14px;
}
.or-portal-hub__icon {
width: 43px;
height: 43px;
border-radius: 12px;
font-size: 1.3rem;
}
}
@media (max-width:390px) {
.or-portal-hub__card {
grid-template-columns: 40px minmax(0,1fr) 18px;
gap: 10px;
}
.or-portal-hub__icon {
width: 40px;
height: 40px;
}
}
/* OR_PORTAL_HUB_CSS_BLOCK74B END */
/* OR_CITY_HERO_V2_CSS_BLOCK75A START */
/*
* Stadtportal Hero V2
* Ergänzt das bestehende Design,
* ohne die vorhandene Hero-Struktur zu ersetzen.
*/
.or-city-hero {
position: relative;
overflow: hidden;
}
.or-city-hero::after {
content: "";
position: absolute;
right: -120px;
bottom: -170px;
width: 420px;
height: 420px;
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(255,255,255,.13) 0%,
rgba(255,255,255,0) 68%
);
pointer-events: none;
}
.or-city-hero-copy {
position: relative;
z-index: 2;
}
.or-city-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 22px;
}
.or-city-hero-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
padding: 10px 16px;
border:
1px solid
rgba(255,255,255,.42);
border-radius: 999px;
background:
rgba(255,255,255,.12);
color: inherit;
font-size: .91rem;
font-weight: 800;
line-height: 1.2;
text-decoration: none;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition:
transform .16s ease,
background .16s ease,
border-color .16s ease,
box-shadow .16s ease;
}
.or-city-hero-action:hover,
.or-city-hero-action:focus-visible {
transform: translateY(-2px);
background:
rgba(255,255,255,.21);
border-color:
rgba(255,255,255,.70);
box-shadow:
0 8px 22px
rgba(0,0,0,.12);
}
.or-city-hero-action--primary {
background: #ffffff;
color: #1767c0;
border-color: #ffffff;
}
.or-city-hero-action--primary:hover,
.or-city-hero-action--primary:focus-visible {
background: #f4f8ff;
color: #10579f;
border-color: #ffffff;
}
/*
* Portal-Hub sitzt nun direkt unter dem Hero.
*/
.or-city-hero + .or-portal-hub,
.or-city-hero +
.or-city-portal-order-anchor +
.or-portal-hub {
border-top: 0;
}
/*
* Hub optisch stärker an den Hero anbinden.
*/
.or-portal-hub {
padding-top:
clamp(
26px,
4vw,
42px
);
padding-bottom:
clamp(
28px,
4vw,
46px
);
}
.or-portal-hub__intro {
margin-bottom: 22px;
}
.or-portal-hub__grid {
gap: 14px;
}
.or-portal-hub__card {
min-height: 104px;
}
/*
* Desktop:
* Die neun Funktionen ergeben bewusst
* drei saubere Reihen.
*/
@media (min-width: 981px) {
.or-portal-hub__grid {
grid-template-columns:
repeat(
3,
minmax(0,1fr)
);
}
}
/*
* Tablet
*/
@media (max-width: 980px) {
.or-city-hero-actions {
margin-top: 18px;
}
.or-portal-hub__card {
min-height: 94px;
}
}
/*
* Smartphone
*/
@media (max-width: 680px) {
.or-city-hero-actions {
display: grid;
grid-template-columns:
repeat(
2,
minmax(0,1fr)
);
gap: 8px;
margin-top: 17px;
}
.or-city-hero-action {
min-height: 42px;
padding: 9px 12px;
font-size: .84rem;
}
.or-city-hero-action--primary {
grid-column: 1 / -1;
}
.or-portal-hub {
padding-top: 24px;
padding-bottom: 28px;
}
.or-portal-hub__intro {
margin-bottom: 17px;
}
.or-portal-hub__card {
min-height: 80px;
}
}
/*
* Sehr kleine Geräte
*/
@media (max-width: 390px) {
.or-city-hero-actions {
grid-template-columns: 1fr;
}
.or-city-hero-action--primary {
grid-column: auto;
}
.or-city-hero-action {
width: 100%;
}
}
/* OR_CITY_HERO_V2_CSS_BLOCK75A END */
/*
* ==========================================================
* OR_CITY_FLOW_CSS_BLOCK75D START
* Stadtportal Mannheim / Ludwigshafen
* Priorisierter Inhaltsfluss.
* ==========================================================
*/
.or-city-home-flow {
display: flex;
flex-direction: column;
width: 100%;
}
/*
* 10 – Identität der Stadt
*/
.or-city-home-flow > .or-city-hero {
order: 10;
}
/*
* 20 – zentrale Portalnavigation
*/
.or-city-home-flow > .or-portal-hub {
order: 20;
}
/*
* 30 – kompakter Schnellzugriff / Kennzahlen
*/
.or-city-home-flow > .or-portal-dashboard {
order: 30;
}
/*
* 40 – Nachrichten als Hauptinhalt
*/
.or-city-home-flow > .or-news-section {
order: 40;
}
/*
* 50 – Veranstaltungen
*/
.or-city-home-flow > #veranstaltungen {
order: 50;
}
/*
* 60 – Wetter
*/
.or-city-home-flow > #wetter {
order: 60;
}
/*
* 70 – Hotels, Gastronomie und Unternehmen
*/
.or-city-home-flow > #hotels-gastronomie {
order: 70;
}
/*
* 80 – Stellenangebote
*/
.or-city-home-flow > #stellenangebote {
order: 80;
}
/*
* 90 – Marktplatz / Kleinanzeigen
*
* Der Bereich bleibt sichtbar,
* veröffentlicht aber weiterhin ausschließlich
* bereits aktive Anzeigen.
*/
.or-city-home-flow > #marktplatz {
order: 90;
}
/*
* 100 – Unterhaltung
*/
.or-city-home-flow > #witz-raetsel {
order: 100;
}
/*
* Werbeflächen bewusst nach dem redaktionellen
* Hauptangebot platzieren.
*/
.or-city-home-flow > .or-ad-section {
order: 110;
}
.or-city-home-flow > .or-bottom-ads {
order: 120;
}
/*
* Sonstige direkte Sections, die später ergänzt
* werden, bleiben am Ende sichtbar.
*/
.or-city-home-flow > section:not(
.or-city-hero
):not(
.or-portal-hub
):not(
.or-portal-dashboard
):not(
.or-news-section
):not(
#veranstaltungen
):not(
#wetter
):not(
#hotels-gastronomie
):not(
#stellenangebote
):not(
#marktplatz
):not(
#witz-raetsel
):not(
.or-ad-section
):not(
.or-bottom-ads
) {
order: 130;
}
/*
* Abschnittsabstände vereinheitlichen.
*/
.or-city-home-flow > .or-portal-dashboard,
.or-city-home-flow > .or-news-section,
.or-city-home-flow > #veranstaltungen,
.or-city-home-flow > #wetter,
.or-city-home-flow > #hotels-gastronomie,
.or-city-home-flow > #stellenangebote,
.or-city-home-flow > #marktplatz,
.or-city-home-flow > #witz-raetsel {
scroll-margin-top: 100px;
}
/*
* Mobile:
* Reihenfolge bleibt identisch.
* Der Benutzer soll zuerst relevante Inhalte
* und erst danach Werbung sehen.
*/
@media (max-width: 760px) {
.or-city-home-flow {
width: 100%;
overflow-x: hidden;
}
.or-city-home-flow > .or-news-section,
.or-city-home-flow > #veranstaltungen,
.or-city-home-flow > #wetter,
.or-city-home-flow > #hotels-gastronomie,
.or-city-home-flow > #stellenangebote,
.or-city-home-flow > #marktplatz,
.or-city-home-flow > #witz-raetsel {
scroll-margin-top: 78px;
}
}
/*
* ==========================================================
* OR_CITY_FLOW_CSS_BLOCK75D END
* ==========================================================
*/
/*
==============================================================
OR_CITY_COMPACT_CSS_BLOCK76B START
Stadtstartseite Mannheim / Ludwigshafen
==============================================================
*/
/* ==========================================================
GRUNDLAYOUT
========================================================== */
.or-city-home-flow {
--or-home-width: 1180px;
--or-home-radius: 18px;
}
.or-city-home-flow > .or-portal-hub,
.or-city-home-flow > .or-portal-dashboard,
.or-city-home-flow > .or-news-section,
.or-city-home-flow > #veranstaltungen,
.or-city-home-flow > #wetter,
.or-city-home-flow > #hotels-gastronomie,
.or-city-home-flow > #stellenangebote,
.or-city-home-flow > #marktplatz,
.or-city-home-flow > #witz-raetsel {
width: min(
var(--or-home-width),
calc(100% - 32px)
);
margin-left: auto;
margin-right: auto;
}
/* ==========================================================
NACHRICHTEN
========================================================== */
.or-city-home-flow .or-news-section {
padding-top: 30px;
padding-bottom: 32px;
}
.or-city-home-flow .or-news-section
.or-section-heading {
margin-bottom: 20px;
}
.or-city-home-flow .or-news-section
.or-section-heading h2 {
font-size: clamp(
1.65rem,
2.5vw,
2.25rem
);
line-height: 1.08;
}
.or-city-home-flow .or-news-grid {
gap: 18px;
}
.or-city-home-flow .or-news-card {
min-width: 0;
overflow: hidden;
border-radius: var(--or-home-radius);
transition:
transform .18s ease,
box-shadow .18s ease;
}
.or-city-home-flow .or-news-card-visual {
overflow: hidden;
}
.or-city-home-flow .or-news-card-image {
width: 100%;
display: block;
object-fit: cover;
}
.or-city-home-flow .or-news-card-body {
padding-top: 16px;
}
.or-city-home-flow .or-news-card h3 {
line-height: 1.22;
}
.or-city-home-flow .or-news-card p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.or-city-home-flow .or-news-card-footer {
margin-top: auto;
}
@media (hover:hover) {
.or-city-home-flow
.or-news-card:hover {
transform: translateY(-3px);
}
}
/* ==========================================================
VERANSTALTUNGEN
========================================================== */
.or-city-home-flow #veranstaltungen {
padding-top: 24px;
padding-bottom: 28px;
}
.or-city-home-flow #veranstaltungen
.or-section-heading {
margin-bottom: 16px;
}
.or-city-home-flow .or-events-grid {
gap: 14px;
}
.or-city-home-flow .or-event-card {
min-width: 0;
border-radius: 16px;
}
.or-city-home-flow .or-event-date-box {
flex: 0 0 auto;
}
.or-city-home-flow .or-event-card-body {
min-width: 0;
}
.or-city-home-flow .or-event-card h3 {
line-height: 1.2;
}
.or-city-home-flow .or-event-card p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.or-city-home-flow .or-event-details {
margin-top: 8px;
}
/* ==========================================================
WETTER
========================================================== */
.or-city-home-flow #wetter {
padding-top: 22px;
padding-bottom: 24px;
}
.or-city-home-flow #wetter
.or-section-heading {
margin-bottom: 14px;
}
.or-city-home-flow .or-weather-current {
border-radius: 18px;
}
.or-city-home-flow .or-weather-current-main {
min-width: 0;
}
.or-city-home-flow .or-weather-current-stats {
gap: 10px;
}
.or-city-home-flow .or-weather-forecast {
gap: 10px;
}
.or-city-home-flow .or-weather-day {
min-width: 0;
border-radius: 14px;
}
.or-city-home-flow .or-weather-day-description {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
/* ==========================================================
UNTERNEHMEN
========================================================== */
.or-city-home-flow #hotels-gastronomie {
padding-top: 24px;
padding-bottom: 28px;
}
.or-city-home-flow .or-business-group +
.or-business-group {
margin-top: 28px;
}
.or-city-home-flow .or-business-grid {
gap: 14px;
}
.or-city-home-flow .or-business-card {
min-width: 0;
border-radius: 16px;
overflow: hidden;
}
.or-city-home-flow .or-business-image {
overflow: hidden;
}
.or-city-home-flow .or-business-body {
min-width: 0;
}
.or-city-home-flow .or-business-card h3 {
line-height: 1.2;
}
.or-city-home-flow .or-business-card p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.or-city-home-flow .or-business-meta {
margin-top: 8px;
}
.or-city-home-flow .or-business-links {
margin-top: 10px;
}
/* ==========================================================
JOBS
========================================================== */
.or-city-home-flow #stellenangebote {
padding-top: 24px;
padding-bottom: 28px;
}
.or-city-home-flow .or-jobs-grid {
gap: 14px;
}
.or-city-home-flow .or-job-card {
min-width: 0;
border-radius: 16px;
}
.or-city-home-flow .or-job-card-top {
gap: 10px;
}
.or-city-home-flow .or-job-card h3 {
line-height: 1.2;
}
.or-city-home-flow .or-job-card p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.or-city-home-flow .or-job-meta {
margin-top: 8px;
}
.or-city-home-flow .or-job-actions {
margin-top: 10px;
}
/* ==========================================================
KLEINANZEIGEN
========================================================== */
.or-city-home-flow #marktplatz {
padding-top: 22px;
padding-bottom: 26px;
}
.or-city-home-flow .or-classified-heading {
gap: 16px;
}
.or-city-home-flow .or-classified-empty {
max-width: 720px;
margin-left: auto;
margin-right: auto;
text-align: center;
border-radius: 18px;
}
.or-city-home-flow
.or-classified-submit-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 10px 18px;
border-radius: 12px;
font-weight: 700;
}
/* ==========================================================
WITZ & RÄTSEL
========================================================== */
.or-city-home-flow #witz-raetsel {
padding-top: 20px;
padding-bottom: 24px;
}
.or-city-home-flow .or-fun-grid {
gap: 14px;
}
.or-city-home-flow .or-fun-card {
min-width: 0;
border-radius: 16px;
}
/* ==========================================================
TABLET
========================================================== */
@media (max-width: 900px) {
.or-city-home-flow > .or-portal-hub,
.or-city-home-flow > .or-portal-dashboard,
.or-city-home-flow > .or-news-section,
.or-city-home-flow > #veranstaltungen,
.or-city-home-flow > #wetter,
.or-city-home-flow > #hotels-gastronomie,
.or-city-home-flow > #stellenangebote,
.or-city-home-flow > #marktplatz,
.or-city-home-flow > #witz-raetsel {
width: calc(100% - 24px);
}
.or-city-home-flow .or-news-grid,
.or-city-home-flow .or-events-grid,
.or-city-home-flow .or-business-grid,
.or-city-home-flow .or-jobs-grid {
gap: 12px;
}
}
/* ==========================================================
SMARTPHONE
========================================================== */
@media (max-width: 620px) {
.or-city-home-flow > .or-portal-hub,
.or-city-home-flow > .or-portal-dashboard,
.or-city-home-flow > .or-news-section,
.or-city-home-flow > #veranstaltungen,
.or-city-home-flow > #wetter,
.or-city-home-flow > #hotels-gastronomie,
.or-city-home-flow > #stellenangebote,
.or-city-home-flow > #marktplatz,
.or-city-home-flow > #witz-raetsel {
width: calc(100% - 18px);
}
.or-city-home-flow .or-news-section,
.or-city-home-flow #veranstaltungen,
.or-city-home-flow #wetter,
.or-city-home-flow #hotels-gastronomie,
.or-city-home-flow #stellenangebote,
.or-city-home-flow #marktplatz,
.or-city-home-flow #witz-raetsel {
padding-top: 18px;
padding-bottom: 18px;
}
.or-city-home-flow
.or-news-section
.or-section-heading h2 {
font-size: 1.5rem;
}
.or-city-home-flow .or-news-card p {
-webkit-line-clamp: 2;
}
.or-city-home-flow .or-event-card p,
.or-city-home-flow .or-business-card p,
.or-city-home-flow .or-job-card p {
-webkit-line-clamp: 2;
}
.or-city-home-flow
.or-classified-heading {
align-items: flex-start;
}
}
/* ==========================================================
SEHR KLEINE DISPLAYS
========================================================== */
@media (max-width: 390px) {
.or-city-home-flow > .or-portal-hub,
.or-city-home-flow > .or-portal-dashboard,
.or-city-home-flow > .or-news-section,
.or-city-home-flow > #veranstaltungen,
.or-city-home-flow > #wetter,
.or-city-home-flow > #hotels-gastronomie,
.or-city-home-flow > #stellenangebote,
.or-city-home-flow > #marktplatz,
.or-city-home-flow > #witz-raetsel {
width: calc(100% - 14px);
}
}
/*
==============================================================
OR_CITY_COMPACT_CSS_BLOCK76B END
==============================================================
*/
/*
==============================================================
OR_NEWS_EDITORIAL_CSS_BLOCK77B START
Redaktioneller Nachrichten-Hub
==============================================================
*/
/* ----------------------------------------------------------
LINK RESET
---------------------------------------------------------- */
.or-news-editorial a,
.or-news-more-grid h3 a {
color: inherit;
text-decoration: none;
}
/* ----------------------------------------------------------
OBERER REDAKTIONELLER BEREICH
---------------------------------------------------------- */
.or-news-editorial {
display: grid;
grid-template-columns:
minmax(0, 1.65fr)
minmax(300px, .85fr);
gap: 18px;
align-items: stretch;
margin-bottom: 22px;
}
/* ----------------------------------------------------------
HAUPTMELDUNG
---------------------------------------------------------- */
.or-news-lead {
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
background: #fff;
border: 1px solid rgba(20, 49, 75, .12);
border-radius: 20px;
box-shadow:
0 12px 34px rgba(20, 49, 75, .09);
}
.or-news-lead-visual {
position: relative;
display: block;
min-height: 330px;
overflow: hidden;
background: #eef3f7;
}
.or-news-lead-visual img {
width: 100%;
height: 100%;
min-height: 330px;
max-height: 410px;
display: block;
object-fit: cover;
transition: transform .3s ease;
}
.or-news-lead-visual::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
rgba(0, 0, 0, 0) 52%,
rgba(0, 0, 0, .28) 100%
);
pointer-events: none;
}
.or-news-lead-location,
.or-news-lead-label {
position: absolute;
z-index: 2;
top: 14px;
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 5px 10px;
border-radius: 999px;
font-size: .78rem;
font-weight: 800;
line-height: 1;
}
.or-news-lead-location {
left: 14px;
background: rgba(255, 255, 255, .94);
color: #173c5e;
}
.or-news-lead-label {
right: 14px;
background: #b51f2e;
color: #fff;
}
.or-news-lead-body {
display: flex;
flex: 1;
flex-direction: column;
padding: 22px;
}
.or-news-lead-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 9px 13px;
margin-bottom: 11px;
color: #667787;
font-size: .84rem;
}
.or-news-lead h3 {
margin: 0;
font-size: clamp(
1.55rem,
2.8vw,
2.25rem
);
line-height: 1.08;
letter-spacing: -.025em;
}
.or-news-lead h3 a:hover {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
.or-news-lead p {
margin: 15px 0 0;
color: #465a6b;
font-size: 1rem;
line-height: 1.6;
}
.or-news-lead-footer {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 15px;
margin-top: auto;
padding-top: 20px;
}
.or-news-lead-footer
.or-news-source {
min-width: 0;
}
/* ----------------------------------------------------------
RECHTE NEBENMELDUNGEN
---------------------------------------------------------- */
.or-news-side {
display: grid;
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 18px;
min-width: 0;
}
.or-news-side-card {
display: grid;
grid-template-columns: 138px minmax(0, 1fr);
min-width: 0;
overflow: hidden;
background: #fff;
border: 1px solid rgba(20, 49, 75, .12);
border-radius: 18px;
box-shadow:
0 8px 24px rgba(20, 49, 75, .07);
}
.or-news-side-visual {
position: relative;
display: block;
min-height: 100%;
overflow: hidden;
background: #eef3f7;
}
.or-news-side-visual img {
width: 100%;
height: 100%;
min-height: 190px;
display: block;
object-fit: cover;
transition: transform .25s ease;
}
.or-news-side-location {
position: absolute;
z-index: 2;
left: 9px;
top: 9px;
max-width: calc(100% - 18px);
padding: 5px 8px;
overflow: hidden;
border-radius: 999px;
background: rgba(255, 255, 255, .94);
color: #173c5e;
font-size: .69rem;
font-weight: 800;
text-overflow: ellipsis;
white-space: nowrap;
}
.or-news-side-body {
display: flex;
flex-direction: column;
min-width: 0;
padding: 15px;
}
.or-news-side-meta {
display: flex;
flex-wrap: wrap;
gap: 5px 9px;
margin-bottom: 8px;
color: #6c7c8a;
font-size: .72rem;
}
.or-news-side-meta span:first-child {
color: #174d78;
font-weight: 800;
}
.or-news-side-card h3 {
margin: 0;
font-size: 1.02rem;
line-height: 1.22;
}
.or-news-side-card h3 a {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
.or-news-side-more {
display: inline-flex;
align-items: center;
align-self: flex-start;
margin-top: auto;
padding-top: 10px;
color: #174d78 !important;
font-size: .79rem;
font-weight: 800;
}
/* ----------------------------------------------------------
WEITERE MELDUNGEN
---------------------------------------------------------- */
.or-news-more-grid {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 16px;
}
.or-news-more-grid
.or-news-card {
min-width: 0;
}
.or-news-card-compact
.or-news-card-visual {
display: block;
position: relative;
}
.or-news-card-compact
.or-news-card-image {
aspect-ratio: 16 / 9;
height: auto;
}
.or-news-card-compact
.or-news-card-body {
display: flex;
flex-direction: column;
height: 100%;
}
.or-news-card-compact h3 {
margin-bottom: 10px;
font-size: 1.04rem;
}
.or-news-card-compact h3 a {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.or-news-card-compact p {
font-size: .91rem;
line-height: 1.48;
-webkit-line-clamp: 2 !important;
}
.or-news-card-compact
.or-news-source {
max-width: 60%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ----------------------------------------------------------
WERBEPLATZ
---------------------------------------------------------- */
.or-news-editorial-ad {
min-height: 190px;
grid-column: span 1;
border-radius: 18px;
}
/* ----------------------------------------------------------
HOVER
---------------------------------------------------------- */
@media (hover:hover) {
.or-news-lead:hover
.or-news-lead-visual img {
transform: scale(1.025);
}
.or-news-side-card:hover
.or-news-side-visual img {
transform: scale(1.035);
}
.or-news-side-card:hover h3 a {
text-decoration: underline;
text-underline-offset: 3px;
}
}
/* ----------------------------------------------------------
TABLET
---------------------------------------------------------- */
@media (max-width: 980px) {
.or-news-editorial {
grid-template-columns:
minmax(0, 1.25fr)
minmax(270px, .75fr);
}
.or-news-side-card {
grid-template-columns: 110px minmax(0, 1fr);
}
.or-news-side-visual img {
min-height: 175px;
}
.or-news-more-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
}
/* ----------------------------------------------------------
MOBILE
---------------------------------------------------------- */
@media (max-width: 760px) {
.or-news-editorial {
display: block;
}
.or-news-lead {
margin-bottom: 14px;
}
.or-news-lead-visual,
.or-news-lead-visual img {
min-height: 230px;
}
.or-news-lead-body {
padding: 17px;
}
.or-news-lead h3 {
font-size: 1.45rem;
}
.or-news-lead-footer {
align-items: flex-start;
flex-direction: column;
}
.or-news-side {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
grid-template-rows: none;
gap: 12px;
}
.or-news-side-card {
display: flex;
flex-direction: column;
}
.or-news-side-visual {
min-height: 150px;
}
.or-news-side-visual img {
height: 150px;
min-height: 150px;
}
.or-news-side-body {
flex: 1;
}
}
/* ----------------------------------------------------------
SMARTPHONE
---------------------------------------------------------- */
@media (max-width: 560px) {
.or-news-lead-visual,
.or-news-lead-visual img {
min-height: 205px;
}
.or-news-lead-location,
.or-news-lead-label {
top: 10px;
font-size: .7rem;
}
.or-news-lead-location {
left: 10px;
}
.or-news-lead-label {
right: 10px;
}
.or-news-lead-body {
padding: 15px;
}
.or-news-lead h3 {
font-size: 1.3rem;
}
.or-news-lead p {
font-size: .93rem;
}
.or-news-side {
grid-template-columns: 1fr;
}
.or-news-side-card {
display: grid;
grid-template-columns:
105px minmax(0, 1fr);
}
.or-news-side-visual,
.or-news-side-visual img {
height: 100%;
min-height: 145px;
}
.or-news-side-body {
padding: 12px;
}
.or-news-side-card h3 {
font-size: .94rem;
}
.or-news-side-card h3 a {
-webkit-line-clamp: 3;
}
.or-news-more-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.or-news-card-compact {
display: grid;
grid-template-columns:
112px minmax(0, 1fr);
}
.or-news-card-compact
.or-news-card-visual {
min-height: 100%;
}
.or-news-card-compact
.or-news-card-image {
width: 100%;
height: 100%;
min-height: 150px;
aspect-ratio: auto;
object-fit: cover;
}
.or-news-card-compact
.or-news-card-body {
padding: 12px;
}
.or-news-card-compact
.or-news-meta {
font-size: .7rem;
}
.or-news-card-compact h3 {
font-size: .94rem;
}
.or-news-card-compact p {
display: none;
}
.or-news-card-compact
.or-news-source {
display: none;
}
.or-news-card-compact
.or-news-card-footer {
margin-top: auto;
}
.or-news-editorial-ad {
display: flex;
min-height: 130px;
}
}
/*
==============================================================
OR_NEWS_EDITORIAL_CSS_BLOCK77B END
==============================================================
*/
/*
==============================================================
OR_REGIONAL_MARKET_CSS_BLOCK78A START
Regionaler Marktplatz
==============================================================
*/
.or-region-market {
width: min(1180px, calc(100% - 32px));
margin: 34px auto 48px;
padding: 26px;
border: 1px solid rgba(20,49,75,.11);
border-radius: 24px;
background:
linear-gradient(
145deg,
#f7fafc 0%,
#ffffff 52%,
#f3f7fa 100%
);
box-shadow:
0 14px 42px rgba(20,49,75,.07);
}
.or-region-market-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 22px;
}
.or-region-market-kicker {
display: block;
margin-bottom: 5px;
color: #b51f2e;
font-size: .76rem;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.or-region-market-head h2 {
margin: 0;
color: #173c5e;
font-size: clamp(1.6rem, 3vw, 2.25rem);
line-height: 1.05;
}
.or-region-market-head p {
margin: 8px 0 0;
color: #607383;
}
.or-region-market-all {
flex: 0 0 auto;
color: #174d78;
font-size: .9rem;
font-weight: 800;
text-decoration: none;
}
.or-region-market-grid {
display: grid;
grid-template-columns:
repeat(2, minmax(0,1fr));
gap: 18px;
}
.or-region-panel {
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
border: 1px solid rgba(20,49,75,.11);
border-radius: 19px;
background: #fff;
box-shadow:
0 7px 24px rgba(20,49,75,.055);
}
.or-region-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 17px 18px;
border-bottom: 1px solid rgba(20,49,75,.09);
}
.or-region-panel-head > div {
display: flex;
align-items: center;
min-width: 0;
gap: 11px;
}
.or-region-panel-head a {
flex: 0 0 auto;
color: #174d78;
font-size: .78rem;
font-weight: 800;
text-decoration: none;
}
.or-region-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 43px;
height: 43px;
flex: 0 0 43px;
border-radius: 13px;
background: #eef4f8;
color: #174d78;
font-size: .72rem;
font-weight: 900;
}
.or-region-panel-events .or-region-icon {
background: #fff1e7;
color: #9b4a13;
}
.or-region-panel-jobs .or-region-icon {
background: #eaf4ff;
color: #14568d;
}
.or-region-panel-business .or-region-icon {
background: #edf7ee;
color: #33723b;
}
.or-region-panel-classifieds .or-region-icon {
background: #fff3dc;
color: #8b5d0a;
font-size: 1rem;
}
.or-region-label {
display: block;
margin-bottom: 3px;
color: #71818e;
font-size: .72rem;
font-weight: 800;
letter-spacing: .025em;
text-transform: uppercase;
}
.or-region-panel-head strong {
display: block;
color: #203e57;
font-size: .98rem;
}
.or-region-list {
display: flex;
flex: 1;
flex-direction: column;
}
.or-region-row {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 18px;
border-bottom: 1px solid rgba(20,49,75,.075);
color: inherit;
text-decoration: none;
transition:
background .18s ease,
padding-left .18s ease;
}
.or-region-row:last-child {
border-bottom: 0;
}
.or-region-row:hover {
padding-left: 21px;
background: #f8fafc;
}
.or-region-row-badge {
align-self: flex-start;
max-width: 100%;
overflow: hidden;
color: #174d78;
font-size: .7rem;
font-weight: 800;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.or-region-row strong {
display: -webkit-box;
overflow: hidden;
color: #203e57;
font-size: .94rem;
line-height: 1.3;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.or-region-row small {
overflow: hidden;
color: #71818e;
font-size: .76rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.or-region-panel-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: auto;
padding: 14px 18px;
border-top: 1px solid rgba(20,49,75,.09);
background: #f8fafc;
color: #174d78;
font-size: .8rem;
font-weight: 900;
text-decoration: none;
}
.or-region-panel-cta span {
transition: transform .18s ease;
}
.or-region-panel-cta:hover span {
transform: translateX(3px);
}
.or-region-empty {
margin: auto;
padding: 28px 18px;
color: #71818e;
text-align: center;
font-size: .86rem;
}
.or-region-classified-empty {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 210px;
padding: 25px 22px;
text-align: center;
}
.or-region-classified-symbol {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
margin-bottom: 12px;
border-radius: 50%;
background: #fff3dc;
color: #8b5d0a;
font-size: 1.65rem;
font-weight: 400;
}
.or-region-classified-empty strong {
color: #203e57;
font-size: 1rem;
}
.or-region-classified-empty p {
max-width: 360px;
margin: 8px auto 13px;
color: #71818e;
font-size: .83rem;
line-height: 1.5;
}
.or-region-classified-empty a {
color: #174d78;
font-size: .82rem;
font-weight: 900;
text-decoration: none;
}
@media (max-width: 820px) {
.or-region-market {
width: min(100% - 24px, 1180px);
padding: 19px;
border-radius: 20px;
}
.or-region-market-grid {
gap: 14px;
}
}
@media (max-width: 680px) {
.or-region-market {
margin-top: 26px;
padding: 15px;
}
.or-region-market-head {
display: block;
}
.or-region-market-all {
display: inline-block;
margin-top: 13px;
}
.or-region-market-grid {
grid-template-columns: 1fr;
}
.or-region-panel-head {
padding: 14px;
}
.or-region-row {
padding: 13px 14px;
}
.or-region-panel-cta {
padding: 13px 14px;
}
}
@media (max-width: 420px) {
.or-region-market {
width: calc(100% - 16px);
padding: 10px;
border-radius: 16px;
}
.or-region-market-head {
padding: 6px 4px;
}
.or-region-panel {
border-radius: 15px;
}
.or-region-icon {
width: 38px;
height: 38px;
flex-basis: 38px;
}
.or-region-panel-head strong {
font-size: .9rem;
}
}
/*
==============================================================
OR_REGIONAL_MARKET_CSS_BLOCK78A END
==============================================================
*/
/*
==============================================================
OR_START_CLEANUP_CSS_BLOCK78F START
==============================================================
*/
.or-region-market {
margin-top: 30px;
margin-bottom: 42px;
}
.or-region-market-head {
padding-top: 2px;
}
.or-region-panel {
min-height: 100%;
transition:
transform .18s ease,
box-shadow .18s ease;
}
.or-region-panel-jobs
.or-region-row small {
min-height: 1em;
}
@media (hover:hover) {
.or-region-panel:hover {
transform: translateY(-2px);
box-shadow:
0 12px 30px
rgba(20,49,75,.08);
}
}
@media (max-width:680px) {
.or-region-market {
margin-top: 22px;
margin-bottom: 28px;
}
}
/*
==============================================================
OR_START_CLEANUP_CSS_BLOCK78F END
==============================================================
*/
/* ==========================================================
OR_GENERIC_CITY_HERO_CSS_BLOCK101E_D5C
Generisches Stadtbild mit Radar-Overlay
========================================================== */
.or-city-hero-visual {
position: relative;
width: min(430px, 100%);
aspect-ratio: 4 / 3;
justify-self: end;
margin: 0;
overflow: hidden;
border-radius: 24px;
background: #111827;
box-shadow:
0 24px 60px rgba(0,0,0,.30);
}
.or-city-hero-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.or-city-hero-visual::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(
180deg,
rgba(11,18,32,.04),
rgba(11,18,32,.32)
);
}
.or-city-hero-radar-overlay {
position: absolute;
z-index: 2;
right: 18px;
bottom: 18px;
width: 128px;
height: 128px;
}
.or-city-hero-radar-overlay .or-radar-ring {
border-color:
rgba(255,255,255,.38);
}
.or-city-hero-radar-overlay .or-radar-center {
width: 46px;
height: 46px;
font-size: 24px;
box-shadow:
0 0 36px rgba(239,62,54,.58);
}
@media (max-width: 760px) {
.or-city-hero-visual {
width: 100%;
justify-self: stretch;
aspect-ratio: 16 / 10;
}
.or-city-hero-radar-overlay {
right: 12px;
bottom: 12px;
width: 104px;
height: 104px;
}
}
/* ==========================================================
OR_GENERIC_CITY_HERO_ATTRIBUTION_CSS_BLOCK101E_D5FB
Generischer Bildnachweis für Stadt-Hero-Bilder
========================================================== */
.or-city-hero-attribution {
position: absolute;
z-index: 4;
left: 12px;
right: 12px;
bottom: 10px;
display: flex;
flex-wrap: wrap;
gap: 3px 5px;
align-items: center;
width: fit-content;
max-width: calc(100% - 24px);
padding: 5px 8px;
margin: 0;
border-radius: 8px;
background: rgba(11, 18, 32, .72);
color: rgba(255, 255, 255, .92);
font-size: 10px;
line-height: 1.35;
text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
backdrop-filter: blur(3px);
}
.or-city-hero-attribution__label {
font-weight: 700;
}
.or-city-hero-attribution__source,
.or-city-hero-attribution__rights {
overflow-wrap: anywhere;
}
.or-city-hero-attribution__separator {
opacity: .72;
}
@media (max-width: 760px) {
.or-city-hero-attribution {
left: 8px;
right: 8px;
bottom: 7px;
max-width: calc(100% - 16px);
padding: 4px 6px;
font-size: 9px;
}
}