/* WICKART.DIGITAL IMMOBILIENVERWALTUNG — Eigentümerportal
   Flatdesign, Open Sans, Palette nach Corporate Design. */

:root{
  --denim:#4A6988;
  --denim-hell:#6E8AA5;
  --denim-blass:#C7D1DA;
  --anthrazit:#373A3F;
  --leinen:#F1F1F0;
  --weiss:#FFFFFF;
  --beere:#B43C6F;
  --nebel:#747D88;
  --kreide:#EDEDED;
  --moos:#3B7458;
  --kupfer:#AD5F26;
  --terrakotta:#B45A48;
  --gold:#C8963E;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--leinen);
  color:var(--anthrazit);
  font:15px/1.7 "Open Sans", Helvetica, Arial, sans-serif;
}

:focus-visible{outline:2px solid var(--beere); outline-offset:2px}

a{color:var(--denim)}
a:hover{color:var(--beere)}

/* ---------------------------------------------------------- Rahmen */

.kopf{
  background:var(--denim);
  color:var(--leinen);
}
.kopf .innen{
  max-width:960px; margin:0 auto; padding:14px 18px;
  display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center; justify-content:space-between;
}
.kopf img{display:block; height:34px; width:auto}
.kopf .wer{font-size:13px; color:var(--denim-blass); text-align:right}
.kopf .wer b{display:block; color:var(--leinen); font-weight:600; font-size:14px}
.kopf a{color:var(--denim-blass)}
.kopf a:hover{color:var(--leinen)}

.nav{background:var(--weiss); border-bottom:1px solid var(--kreide)}
.nav .innen{
  max-width:960px; margin:0 auto; padding:0 18px;
  display:flex; flex-wrap:wrap; gap:0 6px;
}
.nav a{
  display:inline-block; padding:13px 8px 11px;
  font-size:14px; font-weight:600; color:var(--nebel);
  text-decoration:none; border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--denim)}
.nav a.aktiv{color:var(--denim); border-bottom-color:var(--beere)}

.blatt{max-width:960px; margin:0 auto; padding:22px 18px 60px}
.schmal{max-width:430px; margin:34px auto 0; padding:0 18px 60px}

.fuss{
  max-width:960px; margin:0 auto; padding:0 18px 40px;
  font-size:12px; color:var(--nebel); text-align:center;
}

/* ---------------------------------------------------------- Karten */

.karte{
  background:var(--weiss); border:1px solid var(--kreide); border-radius:3px;
  padding:20px 22px 22px; margin-bottom:16px;
}
.karte > *:first-child{margin-top:0}
.karte > *:last-child{margin-bottom:0}

h1{font-size:24px; font-weight:600; color:var(--denim); margin:0 0 6px; line-height:1.3}
h2{font-size:18px; font-weight:700; color:var(--denim); margin:0 0 6px}
h3{font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
   color:var(--nebel); margin:22px 0 8px}
p{margin:0 0 12px; max-width:66ch}
p:last-child{margin-bottom:0}
.leise{color:var(--nebel); font-size:13px}
.gross{font-size:21px; font-weight:300; color:var(--denim)}

/* ---------------------------------------------------------- Zeilen */

.liste{display:flex; flex-direction:column; gap:6px}
.gruppe{display:flex; flex-direction:column; gap:6px; margin-bottom:18px}
.gruppe:last-child{margin-bottom:0}
.jahr{font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
      color:var(--nebel); margin:0}

.zeile{
  background:var(--leinen); border-radius:3px; padding:11px 14px;
  display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center;
}
.zeile .name{flex:1 1 230px; font-weight:600}
.zeile .name small{display:block; font-weight:400; font-size:12px; color:var(--nebel)}
.zeile .meta{font-size:12px; color:var(--nebel); font-variant-numeric:tabular-nums}
.zeile .tun{font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
            color:var(--denim); text-decoration:none}
.zeile .tun:hover{color:var(--beere)}

/* ---------------------------------------------------------- Abzeichen */

.badge{
  display:inline-block; padding:2px 7px; border-radius:3px;
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--leinen); white-space:nowrap;
}
.b-moos{background:var(--moos)}
.b-kupfer{background:var(--kupfer)}
.b-terra{background:var(--terrakotta)}
.b-denim{background:var(--denim)}
.b-still{background:var(--nebel)}
.badge.klarname{text-transform:none; letter-spacing:0; font-weight:600}

/* ---------------------------------------------------------- Meldungen */

.meldung{
  border-left:3px solid var(--denim); background:var(--leinen);
  padding:12px 16px; margin:0 0 14px; border-radius:0 3px 3px 0;
}
.meldung p{margin:0}
.meldung p + p{margin-top:8px}
.meldung.ok{border-left-color:var(--moos)}
.meldung.warn{border-left-color:var(--kupfer)}
.meldung.fehler{border-left-color:var(--terrakotta)}

/* ---------------------------------------------------------- Formulare */

label.feld{display:block; font-size:13px; font-weight:600; margin-bottom:14px}
label.feld > span{display:block; margin-bottom:4px}
label.feld small{display:block; font-weight:400; color:var(--nebel); margin-top:3px}

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], input[type=file], select, textarea{
  width:100%; font:inherit; font-size:15px; font-weight:400; padding:9px 11px;
  border:1px solid var(--kreide); border-radius:3px;
  background:var(--weiss); color:var(--anthrazit);
}
textarea{min-height:80px; resize:vertical}
input:focus, select:focus, textarea:focus{border-color:var(--denim); outline:none}
input[type=radio], input[type=checkbox]{accent-color:var(--denim); width:16px; height:16px}

fieldset{border:none; margin:0 0 14px; padding:0}
legend{font-size:13px; font-weight:600; padding:0; margin-bottom:6px}
.wahl{display:flex; flex-wrap:wrap; gap:6px 18px; font-size:14px}
.wahl label{display:flex; gap:6px; align-items:center; font-weight:400}

.raster{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:0 16px}
.reihe{display:flex; flex-wrap:wrap; gap:10px; align-items:center}

button, .knopf{
  font:inherit; font-size:14px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:11px 18px; border-radius:3px; border:1px solid transparent;
  cursor:pointer; text-decoration:none; display:inline-block; text-align:center;
}
.haupt{background:var(--beere); color:var(--leinen)}
.haupt:hover{background:#9E3461; color:var(--leinen)}
.zweit{background:transparent; color:var(--denim); border-color:var(--denim)}
.zweit:hover{color:var(--beere); border-color:var(--beere)}
.klein{font-size:12px; padding:7px 12px}
.voll{display:block; width:100%}
.textknopf{
  background:none; border:none; padding:0; color:var(--denim);
  font-weight:600; font-size:13px; text-transform:none; letter-spacing:0; cursor:pointer;
}
.textknopf:hover{color:var(--beere)}
.gefahr{color:var(--terrakotta)}

/* ---------------------------------------------------------- Tabellen */

.rolle{overflow-x:auto}
table{border-collapse:collapse; width:100%; min-width:560px; font-size:14px}
th, td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--kreide); vertical-align:middle}
thead th{background:var(--denim); color:var(--leinen); font-weight:600; font-size:13px; border-bottom:none}
tbody tr:last-child td{border-bottom:none}
td.zahl, th.zahl{text-align:right; font-variant-numeric:tabular-nums}
.summe{margin-top:10px; font-size:13px; color:var(--nebel)}

/* ---------------------------------------------------------- Schalter */

.schalter{display:flex; flex-direction:column; gap:2px}
.schalter label{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 14px; background:var(--leinen); border-radius:3px; cursor:pointer;
}
.schalter input{margin-top:4px; flex:none}
.schalter b{display:block; font-weight:700}
.schalter span{display:block; font-size:13px; color:var(--nebel); line-height:1.5}

/* ---------------------------------------------------------- Anmeldung */

.anmeldung img{display:block; width:150px; max-width:100%; height:auto; margin:0 auto 8px}
.anmeldung .adresse{text-align:center; font-size:13px; color:var(--nebel); margin:0 0 22px}

/* ---------------------------------------------------------- Brief */

.brief{
  background:var(--weiss); border:1px solid var(--kreide); border-radius:3px;
  padding:28px 30px 30px; margin-bottom:16px; max-width:none;
}
.brief .code{
  font-size:26px; font-weight:700; letter-spacing:.14em; color:var(--denim);
  background:var(--leinen); border-radius:3px; padding:12px 16px;
  display:inline-block; margin:6px 0 4px;
}

@media print{
  .kopf, .nav, .fuss, .nichtdrucken{display:none !important}
  body{background:#fff}
  .blatt{padding:0; max-width:none}
  .brief{border:none; padding:0; page-break-after:always; margin-bottom:0}
}

@media (max-width:540px){
  .karte{padding:16px 14px 18px}
  .blatt{padding:16px 14px 44px}
  .nav .innen{padding-inline:12px}
  .nav a{font-size:13px; padding-inline:6px}
  button, .knopf{width:100%}
  .reihe button, .reihe .knopf{width:100%}
}