:root{
  --bg:#f7f3ee;
  --card:#ffffff;
  --text:#1a1f26;
  --muted:#5a6675;
  --line:rgba(19,33,52,.14);

  --navy:#0f2a3d;
  --teal:#1b6b6f;
  --gold:#c7a15a;

  --shadow: 0 12px 40px rgba(15,42,61,.10);
  --radius:18px;
  --max: 1080px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 12% -10%, rgba(199,161,90,.18), transparent 55%),
    radial-gradient(900px 600px at 90% 0%, rgba(27,107,111,.14), transparent 55%),
    linear-gradient(180deg, #fbf9f6 0%, var(--bg) 100%);
}

a{color:var(--teal); text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:var(--max); margin:0 auto; padding:26px 18px 48px}

.header{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  padding:14px 14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(8px);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.brand{
  display:flex; align-items:center; gap:12px;
  min-width: 240px;
}
.brand img{
  width:70px; height:70px; object-fit:contain;
  filter: none; /* Logo bleibt black */
}
.brand .t{
  line-height:1.1
}
.brand .t .title{font-weight:800; letter-spacing:.02em}
.brand .t .sub{font-size:13px; color:var(--muted); margin-top:2px}

.nav{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.nav a{
  padding:9px 12px;
  border-radius: 999px;
  border:1px solid transparent;
  color:var(--navy);
  font-weight:650;
  font-size:14px;
}
.nav a:hover{background: rgba(27,107,111,.08); border-color: rgba(27,107,111,.18); text-decoration:none}
.nav a.active{background: rgba(15,42,61,.06); border-color: rgba(15,42,61,.16)}

.lang{
  display:flex; align-items:center; gap:8px;
  font-size:14px;
}
.lang label{color:var(--muted)}
.lang select{
  border:1px solid var(--line);
  background: white;
  padding:8px 10px;
  border-radius: 10px;
}

.hero{
  position:relative;
  overflow:hidden;
  margin-top:18px;
  padding:26px 22px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.86);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero h1{margin:0 0 10px; font-size:34px; color:var(--navy)}
.hero p{margin:0; color:var(--muted); font-size:16px; line-height:1.6; max-width: 72ch}
.hero .chips{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.hero::before{
  content:"";
  position:absolute;
  inset:-40px -40px auto -40px;
  height:220px;
  background:
    radial-gradient(140px 140px at 20% 35%, rgba(255,200,120,.55), rgba(255,200,120,0) 70%),
    radial-gradient(220px 220px at 55% 10%, rgba(255,92,77,.38), rgba(255,92,77,0) 72%),
    radial-gradient(260px 260px at 85% 40%, rgba(255,215,0,.28), rgba(255,215,0,0) 70%);
  filter: blur(10px);
  opacity:.65;
  pointer-events:none;
}
.hero::after{
  content:"☕";
  position:absolute;
  right:16px;
  top:14px;
  font-size:22px;
  opacity:.38;
  transform: rotate(-8deg);
  pointer-events:none;
}

.chip{
  padding:7px 10px;
  border-radius: 999px;
  background: rgba(199,161,90,.14);
  border:1px solid rgba(199,161,90,.30);
  color: var(--navy);
  font-size:13px;
  font-weight:650;
}

.grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:18px; margin-top:18px}
@media (max-width: 900px){ .grid{grid-template-columns:1fr} }

.card{
  border:1px solid var(--line);
  background: rgba(255,255,255,.92);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card .head{padding:18px 18px 8px}
.card .head h2{margin:0; color:var(--navy); font-size:20px}
.card .head p{margin:6px 0 0; color:var(--muted); line-height:1.55}
.card .body{padding:16px 18px 18px}

.badge{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,42,61,.14);
  background: rgba(15,42,61,.03);
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 14px;
}
.kbd{
  font-weight:800;
  letter-spacing:.08em;
  font-size:12px;
  color: var(--navy);
  background: rgba(199,161,90,.20);
  border: 1px solid rgba(199,161,90,.34);
  padding:6px 8px;
  border-radius: 999px;
}

.field{margin: 0 0 12px}
label{display:block; font-weight:700; margin: 0 0 6px; color: var(--navy)}
input,select,textarea{
  width:100%;
  padding:12px 12px;
  border:1px solid rgba(19,33,52,.18);
  border-radius: 12px;
  font-size: 15px;
  background: white;
  color: var(--text);
}
textarea{min-height: 140px; resize: vertical}
.row2{display:grid; grid-template-columns: 1fr 1fr; gap: 12px}
@media (max-width: 700px){ .row2{grid-template-columns:1fr} }

.help{margin-top:6px; color: rgba(160,40,40,.95); font-size:13px}
.small{font-size:13px; color: var(--muted)}
.hidden{display:none}
.sr-only{position:absolute; left:-9999px}

.checkbox{display:flex; gap:10px; align-items:flex-start}
.checkbox input{width:18px; height:18px; margin-top:2px}

.actions{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top: 10px}
button{
  appearance:none;
  border:0;
  background: linear-gradient(135deg, var(--navy), var(--teal));
  color:white;
  padding:12px 16px;
  font-weight:800;
  border-radius: 12px;
  cursor:pointer;
  box-shadow: 0 12px 26px rgba(15,42,61,.18);
  text-shadow: 0 1px 2px rgba(0,0,0,.22);
}
button:hover{filter: brightness(1.03)}
button:disabled{opacity:.6; cursor:not-allowed}

.alert{
  border-radius: 14px;
  padding: 12px 12px;
  border: 1px solid rgba(19,33,52,.16);
  background: rgba(15,42,61,.03);
  margin-bottom: 14px;
}
.alert.ok{border-color: rgba(27,107,111,.28); background: rgba(27,107,111,.06)}
.alert.err{border-color: rgba(160,40,40,.28); background: rgba(160,40,40,.06)}
.alert h3{margin:0 0 6px}
.alert p{margin:0}
.alert .small{margin-top:6px}

.breadcrumb{
  margin-top: 14px;
  color: var(--muted);
  font-size: 13px;
}
.breadcrumb a{color: var(--muted)}
.breadcrumb .sep{opacity:.5; margin:0 6px}

.footer{
  margin-top: 22px;
  padding: 16px 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.72);
  border-radius: var(--radius);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.footer .links{display:flex; gap:14px; flex-wrap:wrap}
.footer .logo{
  display:flex; align-items:center; gap:10px;
  color: var(--navy);
  font-weight:800;
}
.footer .logo img{width:24px; height:24px; object-fit:contain}

.coffeeNote{margin:10px 0 0; font-size:13px; color:var(--muted); font-style:italic}

button:focus-visible{outline:3px solid rgba(199,161,90,.85); outline-offset:2px}


@media (max-width: 520px){
  .brand img{width:56px; height:56px}
}

.steps{
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.6;
}
.steps li{ margin: 6px 0; }