Benutzer:ABC i407250234i Jonas/Testlabor/test/styles.css

Hinweis: Leere nach dem Speichern 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
• Internet Explorer: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
• Opera: Gehe zu Menü → Einstellungen (Opera → Einstellungen auf dem Mac) und dann auf Datenschutz & Sicherheit → Browserdaten löschen → Gespeicherte Bilder und Dateien.

/* ====== Modernes Piratenwiki-Profil (Testlabor-Version) ====== */

/* Haupt-Container der Infobox */
.profile-box {
  float: right;
  width: 280px;
  margin-left: 20px;
  margin-bottom: 20px;
  background-color: #f9f9f9; /* Ein sehr helles Grau als Hintergrund */
  border: 1px solid #e0e0e0; /* Dezenter Rahmen */
  border-radius: 8px; /* Abgerundete Ecken */
  overflow: hidden; /* Stellt sicher, dass alles innerhalb der runden Ecken bleibt */
  font-size: 0.9em;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Leichter Schatten für Tiefe */
}

/* Wrapper für das Profilbild */
.profile-image-wrapper {
  padding: 0;
  margin: 0;
  line-height: 0; /* Verhindert unerwünschte Abstände unter dem Bild */
}

/* Sektionen wie "Persönlich", "Politisch" */
.profile-section {
  padding: 10px 15px;
  border-bottom: 1px solid #e0e0e0;
}
.profile-box .profile-section:last-child {
  border-bottom: none; /* Die letzte Sektion hat keinen unteren Rahmen */
}

/* Überschriften der Sektionen */
.profile-section-header {
  font-size: 1.1em;
  color: #fff;
  background-color: #ff8800; /* Das klassische Piraten-Orange */
  padding: 8px 15px;
  margin: -10px -15px 12px -15px; /* Zieht die Überschrift über die volle Breite */
  font-weight: bold;
}

/* Ein einzelnes Feld (z.B. "Name: Max Mustermann") */
.profile-field {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}

/* Die Beschriftung (z.B. "Name:") */
.profile-label {
  font-weight: bold;
  color: #333;
  padding-right: 10px;
}

/* Der Wert (z.B. "Max Mustermann") */
.profile-value {
  text-align: right;
  color: #555;
}

/* Gitter-Layout für die Social Media Links */
.profile-social-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Zwei Spalten */
  gap: 8px; /* Abstand zwischen den Elementen */
}

/* Einzelner Link im Gitter */
.profile-social-item {
  background-color: #e9e9e9;
  text-align: center;
  padding: 6px;
  border-radius: 4px;
  transition: background-color 0.2s;
}
.profile-social-item a {
  text-decoration: none;
  font-weight: bold;
  color: #333;
}
.profile-social-item:hover {
  background-color: #ffc98a; /* Leichter Orange-Ton beim Hovern */
}

/* Bereich für "Weiteres" */
.profile-extra-content {
  padding-top: 5px;
}

/* Responsive Anpassung für schmale Bildschirme (Smartphones) */
@media (max-width: 720px) {
  .profile-box {
    float: none;
    width: auto; /* Nimmt die volle Breite ein */
    margin-left: 0;
    margin-right: 0;
  }
}