|
|
| Zeile 1: |
Zeile 1: |
| /* ====== DroneSpots Startseite ====== */
| |
|
| |
| /* Hero */
| |
| .ds-hero {
| |
| position: relative;
| |
| background: url('/images/Drone_spots_Banner.png') center/cover no-repeat;
| |
| border-radius: 14px;
| |
| padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem);
| |
| margin: 0 0 1.5rem 0;
| |
| color: #fff;
| |
| }
| |
| .ds-hero::after { /* leichte Abdunklung für Lesbarkeit */
| |
| content: "";
| |
| position: absolute; inset: 0;
| |
| background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.45));
| |
| border-radius: 14px;
| |
| }
| |
| .ds-hero__text { position: relative; z-index: 1; text-align: center; }
| |
| .ds-hero h1 { margin: 0 0 .4rem 0; font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
| |
| .ds-hero p { margin: 0 0 .8rem 0; font-size: 1.05rem; opacity: .95; }
| |
| .ds-cta-row { display: inline-flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
| |
|
| |
| .ds-btn {
| |
| display: inline-block; padding: .65rem 1rem; border-radius: 10px;
| |
| font-weight: 600; text-decoration: none; line-height: 1; border: 2px solid transparent;
| |
| }
| |
| .ds-btn--primary { background: #1a73e8; color: #fff; }
| |
| .ds-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.8); }
| |
| .ds-btn:hover { filter: brightness(1.03); transform: translateY(-1px); }
| |
|
| |
| /* Einleitender Absatz */
| |
| .ds-lead {
| |
| background: #f5fbff;
| |
| border: 1px solid #dbeafe;
| |
| border-radius: 12px;
| |
| padding: 1rem 1.2rem;
| |
| margin: 1rem 0 1.25rem 0;
| |
| }
| |
|
| |
| /* Grid-Karten */
| |
| .ds-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
| |
| gap: .9rem;
| |
| margin: 1rem 0 1.25rem 0;
| |
| }
| |
| .ds-card {
| |
| background: #fff;
| |
| border: 1px solid #e5e7eb;
| |
| border-radius: 12px;
| |
| padding: 1rem;
| |
| text-align: center;
| |
| transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
| |
| }
| |
| .ds-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.06); }
| |
| .ds-card--soft { background: #f9fafb; }
| |
| .ds-card__icon, .ds-card__resicon {
| |
| display: block; margin: 0 auto .5rem auto;
| |
| max-width: 64px !important; height: auto !important;
| |
| }
| |
| .ds-card h3 { margin: .3rem 0 .35rem; font-size: 1.05rem; }
| |
| .ds-link { font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; }
| |
| .ds-link:hover { border-color: currentColor; }
| |
|
| |
| /* Zwei-Spalten-Listen */
| |
| .ds-columns {
| |
| display: grid; gap: 1rem; margin: 1rem 0 1.25rem;
| |
| grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
| |
| }
| |
| .ds-col h2 { margin-top: 0; }
| |
| .ds-col ul { margin-top: .4rem; }
| |
|
| |
| /* Tabellen-Hülle für horizontales Scrollen auf Mobile */
| |
| .ds-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
| |
|
| |
| /* Wikitable veredeln (nur auf Startseite via Klasse) */
| |
| table.wikitable.ds-table {
| |
| border-color: #e5e7eb;
| |
| font-size: .98rem;
| |
| }
| |
| table.wikitable.ds-table > * > tr > th {
| |
| background: #f0f7ff;
| |
| color: #0f172a;
| |
| font-weight: 700;
| |
| }
| |
| table.wikitable.ds-table > * > tr:nth-child(even) { background: #fafafa; }
| |
|
| |
| /* KPI-Block */
| |
| .ds-stats {
| |
| display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
| |
| gap: .9rem; margin: 1.25rem 0 0;
| |
| }
| |
| .ds-stat {
| |
| background: #f8fffb; border: 1px solid #d1fae5; border-radius: 12px; padding: .9rem;
| |
| text-align: center;
| |
| }
| |
| .ds-stat__number { display: block; font-size: 1.6rem; font-weight: 700; }
| |
| .ds-stat__label { color: #065f46; }
| |
|
| |
| /* Sonstiges */
| |
| h2 { scroll-margin-top: 80px; }
| |
|
| |
|
| |
| /* Fester, kleiner Sidebar-Wrapper */ | | /* Fester, kleiner Sidebar-Wrapper */ |
| .infobox-container { | | .infobox-container { |
/* Fester, kleiner Sidebar-Wrapper */
.infobox-container {
float: right !important;
clear: right !important;
width: 22em; /* << kleiner machen hier */
max-width: 100%;
margin: 0 0 1rem 1rem; /* Abstand zum Fließtext links/unten */
}
/* Infobox-Basis */
table.infobox {
background: #fff;
border: 1px solid #d9d9e3;
border-collapse: separate;
border-spacing: 0;
width: 100%; /* füllt den Wrapper (22em) */
box-shadow: 0 6px 24px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
border-radius: 12px;
overflow: hidden;
font-size: 90%;
}
/* Titel */
table.infobox .infobox-title {
background: linear-gradient(180deg, #e9efff 0%, #dfe7ff 100%);
color: #1f2a44;
text-align: center;
font-weight: 700;
padding: .7rem .9rem;
border-bottom: 1px solid #d9d9e3;
}
/* Bild */
table.infobox .infobox-media {
text-align: center;
padding: .6rem .9rem .4rem;
background: #fbfcff;
border-bottom: 1px solid #d9d9e3;
}
/* Zellen */
table.infobox th, table.infobox td {
vertical-align: top;
padding: .5rem .9rem;
line-height: 1.35;
border-top: 1px solid #ececf3;
}
table.infobox th {
width: 46%;
color: #6b7280;
font-weight: 600;
}
/* leichte Zebra-Optik */
table.infobox tr:nth-child(even) th,
table.infobox tr:nth-child(even) td {
background: #fafafa;
}
/* Mobile: Sidebar auf volle Breite unter den Text */
@media (max-width: 768px) {
.infobox-container {
float: none !important;
clear: both !important;
width: 100%;
margin: 0 0 1rem 0;
}
}
