:root{
  --eiche-hell:#F3E7D6;
  --eiche:#C89B6A;
  --eiche-dunkel:#8A5E38;
  --sand:#FAF4EC;
  --creme:#FFFDF9;
  --tinte:#3A2C1E;
  --tinte-weich:#6B5843;
  --gold:#C8A96B;
  --gruen:#4F7A52;
  --rot:#B4553F;
  --glas:rgba(255,253,249,.62);
  --glas-rand:rgba(255,255,255,.75);
  --schatten:0 10px 30px rgba(90,62,36,.14);
  --schatten-tief:0 18px 48px rgba(90,62,36,.20);
  --radius:26px;
  --radius-klein:16px;
}

*{box-sizing:border-box;margin:0;padding:0;}

html,body{height:100%;}

body{
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  color:var(--tinte);
  background:
    radial-gradient(1100px 700px at 15% -10%, #FFF6E9 0%, transparent 60%),
    radial-gradient(900px 620px at 95% 8%, #F6E3CB 0%, transparent 58%),
    linear-gradient(168deg,#FBF3E8 0%,#F2E3CE 52%,#EAD8BE 100%);
  background-attachment:fixed;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* Warme Holzmaserung als sehr feine Textur ueber dem Verlauf */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(94deg,
    rgba(160,116,72,.030) 0px,
    rgba(160,116,72,.030) 1px,
    transparent 1px,
    transparent 7px);
  opacity:.55;
}

.wrap{position:relative;z-index:1;max-width:640px;margin:0 auto;padding:24px 18px 120px;}

/* ---- Typografie ---- */
h1{font-size:26px;font-weight:700;letter-spacing:-.4px;}
h2{font-size:19px;font-weight:650;letter-spacing:-.2px;}
.meta{font-size:11.5px;letter-spacing:2.2px;text-transform:uppercase;color:var(--tinte-weich);font-weight:600;}
.sub{font-size:14.5px;color:var(--tinte-weich);line-height:1.55;}

/* ---- Formular ---- */
.feld{margin-bottom:16px;}
.feld label{display:block;font-size:13px;font-weight:600;margin-bottom:7px;color:var(--tinte-weich);}

input[type=text],input[type=password]{
  width:100%;padding:15px 16px;font-size:16px;font-family:inherit;color:var(--tinte);
  background:rgba(255,255,255,.72);
  border:1.5px solid rgba(200,155,106,.34);
  border-radius:var(--radius-klein);
  transition:border-color .2s,box-shadow .2s,background .2s;
}
input:focus{
  outline:none;background:rgba(255,255,255,.94);
  border-color:var(--eiche);
  box-shadow:0 0 0 4px rgba(200,169,107,.20);
}

button{
  font-family:inherit;font-size:16px;font-weight:650;cursor:pointer;
  border:none;border-radius:var(--radius-klein);
  padding:16px 20px;width:100%;
  color:#fff;
  background:linear-gradient(135deg,var(--eiche) 0%,var(--eiche-dunkel) 100%);
  box-shadow:0 6px 18px rgba(138,94,56,.28);
  transition:transform .15s,box-shadow .2s,filter .2s;
  min-height:52px;
}
button:hover{filter:brightness(1.06);box-shadow:0 8px 24px rgba(138,94,56,.34);}
button:active{transform:translateY(1px);}
button:disabled{opacity:.55;cursor:not-allowed;transform:none;}

button.sekundaer{
  background:rgba(255,255,255,.62);
  color:var(--tinte);
  border:1.5px solid rgba(200,155,106,.40);
  box-shadow:none;
}

/* ---- Meldungen ---- */
.meldung{
  padding:13px 15px;border-radius:14px;font-size:14px;line-height:1.45;
  margin-bottom:16px;display:none;
}
.meldung.an{display:block;}
.meldung.fehler{background:rgba(180,85,63,.12);border:1px solid rgba(180,85,63,.30);color:#8E3F2D;}
.meldung.gut{background:rgba(79,122,82,.12);border:1px solid rgba(79,122,82,.30);color:#3B5C3E;}