/* Reset & Grundlayout */
*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%;font-family:'Manrope',sans-serif;background:linear-gradient(145deg,#a1c4fd,#c2e9fb)}


/* Hero-zentrierte Ausrichtung */
.hero {
  min-height: 100vh;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Kard-Design */
.card{
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(12px);
  border-radius:20px;
  padding:40px 32px;
  max-width:500px;
  width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.12);
  text-align:center;
  transform:perspective(1000px) rotateX(0deg);
  transition:transform .6s ease;
}
.card:hover{transform:perspective(1000px) translateY(-3px);}

/* Titel & Untertitel */
h1{
  font-size:2.2rem;
  font-weight:700;
  color:#1a1a1a;
  margin-bottom:12px;
}
.subtitle{
  font-size:0.95rem;
  color:#666;
  margin-bottom:32px;
  line-height:1.5;
}

/* Textarea - groß & angenehm */
#entryText{
  width:100%;
  min-height:140px;
  padding:20px;
  border:2px solid #e2e8f0;
  border-radius:16px;
  font-size:15px;
  color:#333;
  resize:vertical;
  background:rgba(255,255,255,.8);
  transition:border-color .3s,box-shadow .3s;
  margin-bottom:24px;
}
#entryText:focus{
  outline:none;
  border-color:#4a90d9;
  box-shadow:0 0 0 3px rgba(74,144,217,.3);
}
#entryText::placeholder{color:#999}

/* Button - animiert */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 24px;
  font-size:15px;
  font-weight:600;
  color:#fff;
  background:linear-gradient(135deg,#4a90d9,#3b82f6);
  border:none;
  border-radius:12px;
  cursor:pointer;
  transition:transform .2s,box-shadow .2s,background .3s;
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(74,144,217,.4);
}
.btn:active{transform:translateY(0)}
.icon{font-size:18px;transition:transform .3s}
.btn:hover .icon{transform:translateX(4px)}

/* Nachricht */
.message{
  margin-top:24px;
  padding:12px 16px;
  border-radius:10px;
  font-size:0.9rem;
  font-weight:500;
}
.message.success{background:#d4edda;color:#155724}
.message.error{background:#f8d7da;color:#721c24}