@import url("mobile.css");

/* ====== STAND 2 DESIGN – PERFEKTE SPALTENTRENNUNG ====== */
:root{
  --container: 1500px;
  --gap: 24px;
  --col1: 220px; /* = col1 width */
  --col2: 220px; /* = col2 width (nur Doku) */
  --col4: 220px; /* = col4 width */
}

body {
  background:#fff;
  margin:0;
  padding:0;
   font-family: Verdana, Arial, sans-serif;
  font-size:13px;
  font-weight:500;
  color:#333;
}

/* ===================================== */
/* Standard-Link-Stile (global)          */
/* ===================================== */
a {
  color:#333;
  text-decoration:none;
  transition:color 0.2s ease-in-out;
}
a:hover {
  color:#000;
}

/* ===================================== */
/* HEADER                                */
/* ===================================== */
.header-box {
  width:1500px;
  height:120px;
  margin:20px auto;
  background:#fff url('../images/design/header_background.png') no-repeat center center;
  background-size:cover; /* skaliert auf volle Fläche, proportional */
  border-radius:10px;
  box-shadow:4px 4px 12px rgba(0,0,0,0.25);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 40px;
  box-sizing:border-box;
}

.header-box a {
  color:#333;
  text-decoration:none;
  font-weight:600;
  transition:color 0.2s ease-in-out;
}
.header-box a:hover {
  color:#000;
}

/* =====================================================
   ====  4 feste Spalten – unabhängig voneinander  ====
   ===================================================== */
.wrapper {
  width:1500px;
  margin:20px auto;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
}

/* Jede Spalte ist ein eigener "Stack" */
.column {
  display:flex;
  flex-direction:column;
  gap:24px;
}

/* Feste Breiten */
.col1,.col2,.col4{width:220px;}
.col3{flex:1;} /* mittlere Spalte flexibel */

/* =====================================================
   ====  BOXEN (Standard-Design für alle Spalten)  ====
   ===================================================== */
.box {
  background:#fff;
  border-radius:10px;
  box-shadow:4px 4px 12px rgba(0,0,0,0.25);
  padding:10px 15px;
  box-sizing:border-box;
}

.box h3 {
  margin:0 0 8px 0;
  font-size:13px;
  font-weight:bold;
  color:#333;
  text-transform:uppercase;
  border-bottom:1px solid #ddd;
  padding-bottom:4px;
}

/* Inhaltliche Schriftgrößen */
.nav-links p,
.nav-links li,
.box p {
  font-size:11px;
  color:#333;
  margin:2px 0;
  line-height:1.35;
}

/* Navigation */
.nav-links {
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-top:6px;
}

.nav-links a {
  color:#333;
  text-decoration:none;
  padding:2px 0;
  font-size:11px;
  transition:color 0.2s ease-in-out;
}

.nav-links a:hover {
  color:#000;
  background:none;
  text-decoration:underline;
}

/* Geburtstagsliste */
.birthday-list {
  list-style:none;
  margin:0;
  padding:0;
}

.birthday-list li {
  font-size:11px;
  margin:2px 0;
  line-height:1.3;
}

/* =====================================================
   =======  Zusätzliche Reihe mit breiter Box  ==========
   ===================================================== */
.row-full {
  width:1500px;
  margin:20px auto;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

.box-wide {
  max-width:1092px;
  background:#fff;
  border-radius:10px;
  box-shadow:4px 4px 12px rgba(0,0,0,0.25);
  box-sizing:border-box;
}

.box-wide h3 {
  margin-top:0;
  margin-bottom:6px;
  font-size:13px;
  text-transform:uppercase;
  padding-bottom:4px;
  border-bottom:1px solid #ccc;
}

.box-wide p {
  font-size:11px;
  color:#333;
  line-height:1.35;
  margin:2px 0;
}

.userlist-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 13px;
}

.userlist-head th {
  border-bottom: 2px solid #ccc;
  text-align: left;
  padding: 6px 8px;
  background: none; /* kein grauer Hintergrund */
}

.userlist-head a {
  color: #333;
  text-decoration: none;
  font-weight: 600;
}
.userlist-head a:hover {
  text-decoration: underline;
}

.userlist-table td {
  border-bottom: 1px solid #ddd;
  padding: 6px 8px;
}
.row1 { background:#fafafa; }
.row2 { background:#fff; }

.pagination {
  padding: 6px;
  color: #444;
}

/* =====================================================
   ================  FOOTER  ===========================
   ===================================================== */
.footer-box {
  width:1500px;

  height:40px;
  margin:20px auto;
  background:#fff;
  border-radius:10px;
  box-shadow:4px 4px 12px rgba(0,0,0,0.25);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px;
  font-size:12px;
  box-sizing:border-box;
}

.footer-left a,
.footer-right a {
  color:#333;
  text-decoration:none;
  transition:color 0.2s ease-in-out;
}

.footer-left a:hover,
.footer-right a:hover {
  color:#111;
}

.footer-left{text-align:left;}
.footer-right{text-align:right;text-transform:lowercase;}

/* =====================================================
   ======== PROFILSPALTEN LAYOUT ======================
   ===================================================== */
.profile-wrapper {
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:24px;
}
.profile-wrapper .column {
  display:flex;
  flex-direction:column;
  gap:24px;
}
.profile-wrapper .col2 {width:220px;}
.profile-wrapper .col3 {flex:1;}