/* Luftballon-Finder – Party-Design (inspiriert von der Einladung). Keine externen Ressourcen. */
:root{
  --paper:#fbf7ec; --ink:#1b1b1b;
  --yellow:#ffc61e; --blue:#2fb2e9; --pink:#ec1e79; --green:#8bc53f; --red:#e8412b; --orange:#f59e1b;
  --shadow:0 6px 0 rgba(0,0,0,.12), 0 12px 28px rgba(0,0,0,.14);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:"Trebuchet MS","Segoe UI",system-ui,-apple-system,sans-serif;
  color:var(--ink); background:var(--paper);
  background-image:
    radial-gradient(circle, var(--pink) 6px, transparent 7px),
    radial-gradient(circle, var(--blue) 5px, transparent 6px),
    radial-gradient(circle, var(--yellow) 6px, transparent 7px),
    radial-gradient(circle, var(--green) 5px, transparent 6px);
  background-size:340px 340px,260px 260px,300px 300px,220px 220px;
  background-position:0 40px,120px 160px,220px 60px,60px 260px;
  background-attachment:fixed;
  min-height:100vh;
}
/* Wimpelkette */
.bunting{display:flex;justify-content:center;gap:0;padding-top:8px;overflow:hidden}
.bunting span{width:44px;height:36px;margin:0 -1px;clip-path:polygon(0 0,100% 0,50% 100%);
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.15));transform:translateY(-2px)}
.bunting span:nth-child(6n+1){background:var(--red)}
.bunting span:nth-child(6n+2){background:var(--orange)}
.bunting span:nth-child(6n+3){background:var(--yellow)}
.bunting span:nth-child(6n+4){background:var(--green)}
.bunting span:nth-child(6n+5){background:var(--blue)}
.bunting span:nth-child(6n+6){background:var(--pink)}

.wrap{max-width:680px;margin:6px auto 40px;padding:0 16px}

/* Hero */
.hero{text-align:center;margin:10px 0 22px}
.balloons{font-size:40px;letter-spacing:8px;filter:drop-shadow(0 4px 3px rgba(0,0,0,.2))}
.title{margin:.1em 0;line-height:1;font-weight:800;letter-spacing:.5px}
.title .l{display:inline-block;color:#fff;padding:.12em .35em;border-radius:14px;transform:rotate(-2deg);
  box-shadow:var(--shadow);margin:.08em .1em}
.title .l1{background:var(--blue);font-size:2.6rem;transform:rotate(-3deg)}
.title .l2{background:var(--pink);font-size:2.6rem;transform:rotate(2deg)}
.lead{max-width:560px;margin:14px auto 0;font-size:1.05rem;line-height:1.55}

/* Cards */
.card{background:#fff;border-radius:22px;padding:22px 20px;box-shadow:var(--shadow);
  border:4px solid #fff;outline:3px dashed rgba(0,0,0,.08);outline-offset:-12px}
.thanks{text-align:center}
.thanks h2{color:var(--pink);margin-top:.2em;font-size:1.8rem}

/* Form */
.form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row .grow{flex:1 1 60%}
.row .zip{flex:1 1 110px;max-width:150px}
.tag{align-self:flex-start;color:#fff;font-weight:800;font-size:.92rem;
  padding:5px 12px;border-radius:9px;transform:rotate(-1deg);box-shadow:0 3px 0 rgba(0,0,0,.12)}
.tag-yellow{background:var(--yellow);color:#5a4300}
.tag-blue{background:var(--blue)}
.tag-green{background:var(--green);color:#20430a}
.tag-pink{background:var(--pink)}
.tag-red{background:var(--red)}
input[type=text],textarea{
  font:inherit;width:100%;padding:12px 14px;border:3px solid #eadfc7;border-radius:14px;
  background:#fffdf7;transition:border-color .15s, box-shadow .15s}
input[type=text]:focus,textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(47,178,233,.2)}
textarea{resize:vertical}

.consent{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;line-height:1.4}
.consent input{margin-top:3px;width:20px;height:20px;accent-color:var(--pink)}

.btn{display:inline-block;border:none;cursor:pointer;font:inherit;font-weight:800;color:#fff;
  padding:14px 26px;border-radius:16px;box-shadow:0 5px 0 rgba(0,0,0,.18);text-decoration:none;
  transition:transform .08s, box-shadow .08s}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.18)}
.btn-send{background:var(--pink);font-size:1.2rem;align-self:center;margin-top:4px}
.btn-blue{background:var(--blue)}
.hint{color:#8a7c5f;font-size:.85rem;text-align:center;margin:.2em 0 0}

.alert{background:#fff4f2;border:3px solid var(--red);color:#a3231a;border-radius:14px;
  padding:12px 16px;margin-bottom:16px;font-weight:600}
.alert div{margin:2px 0}

/* Inhaltsseiten (Impressum/Datenschutz/Admin) */
.page h1{color:var(--blue)}
.page h2{color:var(--pink);margin-top:1.2em}
.page{line-height:1.6}
.page a:not(.btn){color:var(--blue)}
.page .btn{color:#fff}

/* Admin-Tabelle */
.tbl{width:100%;border-collapse:collapse;font-size:.92rem;background:#fff;border-radius:12px;overflow:hidden}
.tbl th,.tbl td{padding:9px 10px;border-bottom:1px solid #eee;text-align:left;vertical-align:top}
.tbl th{background:var(--blue);color:#fff}
.tbl tr:nth-child(even){background:#fafafa}

.foot{text-align:center;color:#7a6f57;padding:18px;font-size:.9rem}
.foot a{color:#5b8a2a;text-decoration:none}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

@media (max-width:520px){
  .title .l1,.title .l2{font-size:2rem}
  .card{padding:18px 14px}
}