MediaWiki:Common.css

Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.

• Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
• Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
• Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken

/* ====== 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 */
.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;
  }
}