body{
font-family: Arial, sans-serif;
margin:0;
padding:0;
text-align:center;
background:#f5f5f5;
}

header{
background:#ffffff;
padding:25px 15px 20px 15px;
}

/* Domain oben */
.topline{
font-size:14px;
font-weight:bold;
color:#666;
margin-bottom:8px;
}

/* Headline */
h1{
margin:5px 0 10px 0;
font-size:28px;
}

/* Subheadline */
.subheadline{
margin:0 0 6px 0;
font-size:16px;
color:#444;
}

/* Beispiele */
.examples{
font-size:14px;
color:#666;
margin-bottom:5px;
}

.examples span{
font-weight:bold;
color:#222;
}

/* SUCHFELD */
.searchbox{
margin:15px;
}

#searchInput{
width:90%;
max-width:500px;
padding:14px;
font-size:18px;
border-radius:10px;
border:1px solid #ccc;
outline:none;
}

/* Fokus */
#searchInput:focus{
border-color:#2e6df6;
box-shadow:0 0 0 3px rgba(46,109,246,0.15);
}

/* CHIPS */
.quicknames{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:8px;
margin-bottom:15px;
}

.name-chip{
border:1px solid #ccc;
background:white;
padding:8px 12px;
border-radius:20px;
font-size:14px;
cursor:pointer;
transition:all 0.2s;
}

.name-chip:hover{
background:#eef3ff;
border-color:#2e6df6;
}

/* HINWEIS */
.hint{
font-size:13px;
color:#666;
margin-bottom:10px;
}

/* ERGEBNISSE */
.results{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:20px;
padding:20px;
}

/* KARTEN */
.card{
background:white;
border-radius:10px;
padding:15px;
width:200px;
box-shadow:0 3px 10px rgba(0,0,0,0.1);
text-decoration:none;
color:inherit;
display:block;
transition:0.2s;
}

.card:hover{
transform:translateY(-3px);
box-shadow:0 6px 18px rgba(0,0,0,0.15);
}

.card img{
width:100%;
height:auto;
border-radius:6px;
}

.card h3{
margin:10px 0 5px 0;
font-size:18px;
}

.card p{
font-size:14px;
color:#555;
min-height:40px;
}

/* BUTTON (Amazon) */
.button{
display:block;
margin-top:10px;
padding:10px;
background:#ff9900;
color:white;
text-decoration:none;
border-radius:6px;
font-weight:bold;
}

/* NICHT GEFUNDEN */
.notfound{
margin:20px;
font-size:13px;
color:#666;
}

/* normale Links dort */
.notfound a{
text-decoration:none;
font-weight:bold;
}

/* WUNSCHNAME BUTTON */
.request-btn{
display:inline-block;
margin-top:6px;
padding:10px 14px;
background:#2e6df6;
color:white !important;
border-radius:6px;
text-decoration:none;
font-weight:bold;
line-height:1.2;
}

.request-btn:hover{
background:#1f5be0;
}

/* MOBILE */
@media (max-width:600px){

h1{
font-size:24px;
}

#searchInput{
font-size:16px;
padding:12px;
}

.results{
gap:12px;
padding:10px;
}

.card{
width:45%;
padding:10px;
}

.card h3{
font-size:16px;
}

.card p{
font-size:13px;
}

.button{
font-size:13px;
padding:8px;
}

.name-chip{
font-size:13px;
padding:7px 10px;
}

.hint{
font-size:12px;
}

.notfound{
font-size:12px;
}

}