/* Vaiacon Kundenportal - warme Marke (Creme/Terracotta), Quicksand */
:root{
  --creme:#FBF4EE; --creme-2:#F4EDE1; --creme-3:#EAE0CC; --karte:#FFFDF8;
  --text:#1C1613; --text-2:#5A524B; --terra:#B25222; --terra-dunkel:#9C4517;
  --terra-hell:#E2652C; --peach:#FFD9C2;
  --radius:18px; --radius-s:12px;
  --schatten:0 1px 2px rgba(28,22,19,.05), 0 8px 28px rgba(28,22,19,.07);
  --schatten-hoch:0 2px 4px rgba(28,22,19,.06), 0 18px 44px rgba(28,22,19,.12);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:Quicksand,'Avenir Next',system-ui,-apple-system,sans-serif;
  font-weight:500; color:var(--text); background:var(--creme);
  background-image:radial-gradient(1200px 600px at 85% -10%, var(--peach) 0%, transparent 55%),
                   radial-gradient(900px 500px at -10% 110%, var(--creme-3) 0%, transparent 60%);
  background-attachment:fixed; min-height:100vh; line-height:1.55;
}
a{color:var(--terra); text-decoration:none}
a:hover{color:var(--terra-dunkel); text-decoration:underline}
.huelle{max-width:1080px; margin:0 auto; padding:0 22px}
.eng{max-width:520px}

/* Kopf */
.kopf{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 0 6px; flex-wrap:wrap}
.marke{display:flex; align-items:center; gap:11px; font-weight:700; font-size:1.22rem;
  letter-spacing:-.02em; color:var(--text)}
.marke:hover{text-decoration:none}
.zeichen{width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--terra-hell),var(--terra)); color:#fff;
  font-weight:700; font-size:1.02rem; box-shadow:0 4px 12px rgba(178,82,34,.32)}
.kopf-rechts{display:flex; align-items:center; gap:14px; font-size:.9rem; color:var(--text-2)}

/* Bausteine */
.karte{background:var(--karte); border:1px solid var(--creme-3); border-radius:var(--radius);
  box-shadow:var(--schatten)}
h1{font-size:clamp(1.7rem,4.2vw,2.5rem); line-height:1.15; letter-spacing:-.025em;
  font-weight:700; margin:.2em 0 .35em}
h2{font-size:1.22rem; font-weight:700; letter-spacing:-.015em; margin:0 0 .6em}
h3{font-size:1.02rem; font-weight:700; margin:0 0 .3em}
.lead{color:var(--text-2); font-size:1.04rem; margin:0 0 1.5em}
.mono{font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace}

.knopf{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--terra); color:#fff; border:0; border-radius:999px;
  padding:13px 24px; font:inherit; font-weight:700; cursor:pointer;
  box-shadow:0 4px 14px rgba(178,82,34,.28); transition:transform .12s, background .15s}
.knopf:hover{background:var(--terra-dunkel); text-decoration:none; color:#fff; transform:translateY(-1px)}
.knopf.leer{background:transparent; color:var(--terra); border:1.5px solid var(--creme-3);
  box-shadow:none}
.knopf.leer:hover{background:var(--creme-2); color:var(--terra-dunkel)}
.knopf.klein{padding:8px 15px; font-size:.85rem}
.knopf.breit{width:100%}

label{display:block; font-size:.86rem; font-weight:700; color:var(--text-2);
  margin:0 0 6px; letter-spacing:.01em}
input,textarea,select{width:100%; font:inherit; color:var(--text); background:#fff;
  border:1.5px solid var(--creme-3); border-radius:var(--radius-s); padding:12px 14px;
  transition:border-color .15s, box-shadow .15s}
input:focus,textarea:focus,select:focus{outline:0; border-color:var(--terra-hell);
  box-shadow:0 0 0 4px rgba(226,101,44,.14)}
textarea{min-height:92px; resize:vertical}
.feld{margin-bottom:16px}
.reihe{display:grid; grid-template-columns:1fr 1fr; gap:14px}

.hinweis{border-radius:var(--radius-s); padding:12px 15px; font-size:.9rem; margin-bottom:18px}
.hinweis.warn{background:#FDECE4; border:1px solid #F3C4AC; color:#7C2D0C}
.hinweis.gut{background:#EAF3EA; border:1px solid #C3DDC5; color:#2A5A2E}

.schild{display:inline-block; font-size:.74rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; padding:5px 11px; border-radius:999px;
  background:var(--creme-2); color:var(--text-2); border:1px solid var(--creme-3)}

/* Login */
.mitte{min-height:100vh; display:grid; place-items:center; padding:32px 22px}
.login-karte{background:var(--karte); border:1px solid var(--creme-3); border-radius:24px;
  box-shadow:var(--schatten-hoch); padding:38px 34px; width:100%; max-width:430px}
.code-feld{font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace; font-size:1.5rem;
  letter-spacing:.16em; text-align:center; text-transform:uppercase; padding:16px}

/* Projektgitter */
.gitter{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,420px)); gap:20px;
  justify-content:start; margin:26px 0 40px}
.projekt{display:flex; flex-direction:column; overflow:hidden; transition:transform .15s, box-shadow .15s}
.projekt:hover{transform:translateY(-3px); box-shadow:var(--schatten-hoch)}
.projekt .band{height:6px}
.projekt .inhalt{padding:22px 22px 20px; display:flex; flex-direction:column; flex:1; gap:10px}
.projekt .fuss{display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:6px;
  flex-wrap:wrap}
.projekt .fuss .knopf{white-space:nowrap}
.projekt p{margin:0; color:var(--text-2); font-size:.94rem}

.liste{list-style:none; padding:0; margin:0}
.liste li{padding:14px 0; border-bottom:1px solid var(--creme-2)}
.liste li:last-child{border-bottom:0}
.meta{font-size:.8rem; color:var(--text-2)}

table{width:100%; border-collapse:collapse; font-size:.88rem}
th,td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--creme-2);
  vertical-align:middle}
th{font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-2)}
.tabelle-huelle{overflow-x:auto}

.fuss-zeile{padding:26px 0 40px; color:var(--text-2); font-size:.84rem;
  border-top:1px solid var(--creme-3); margin-top:14px}
.abschnitt{padding:24px; margin-bottom:20px}
details summary{cursor:pointer; font-weight:700}
@media (max-width:560px){
  .reihe{grid-template-columns:1fr}
  .login-karte{padding:28px 22px}
}