/* ============================================================================
   Wattnsommer — Teal-Glas-Theme
   Abgeleitet aus der Freizeit-App (app_theme.dart / home-teal-v3 Mockup).
   "Vibrant Teal, hell & dezent" · Inter Tight + Inter · Lucide-Icons.
   ============================================================================ */

:root{
  --bg:#e8efee;
  --bg-deep:#dce9e7;
  --accent:#0e9488;
  --accent-2:#e08a5b;
  --text:#102a2c;
  --muted:rgba(16,42,44,.56);
  --faint:rgba(16,42,44,.32);
  --line:rgba(16,42,44,.08);
  --card:rgba(248,251,250,.85);
  --card-solid:#f8fbfa;
  --card-border:rgba(255,255,255,.72);
  --card-shadow:0 5px 20px rgba(16,42,44,.07);
  --card-shadow-lg:0 18px 44px rgba(16,42,44,.13);
  --badge:rgba(14,148,136,.13);
  --badge-warm:rgba(224,138,91,.14);
  --inset:rgba(16,42,44,.05);
  --r-card:20px;
  --r-sm:12px;
  --r-pill:999px;
  --gap:11px;
  --pad:14px;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--text);
  background:
    radial-gradient(720px 480px at 12% -5%, rgba(14,148,136,.10), transparent 60%),
    radial-gradient(680px 520px at 90% 0%, rgba(224,138,91,.10), transparent 62%),
    var(--bg);
  min-height:100vh;
}

/* Typo */
.display,.h1,.h2,.ctitle,.brand{font-family:'Inter Tight','Inter',sans-serif;letter-spacing:-.5px}
.display{font-size:clamp(26px,4vw,34px);font-weight:700;line-height:1.02}
.h1{font-size:24px;font-weight:700;line-height:1.05}
.h2{font-size:19px;font-weight:700;letter-spacing:-.3px}
.eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.3px;color:var(--muted);display:flex;align-items:center;gap:6px;text-transform:none}
.eyebrow .accent{color:var(--accent);font-weight:700}
.muted{color:var(--muted)}
.faint{color:var(--faint)}

/* Lucide sizing helpers */
.ic{width:18px;height:18px;stroke-width:2}
.ic-sm{width:15px;height:15px;stroke-width:2.2}
.ic-badge{width:20px;height:20px;stroke-width:2}
.eyebrow .ic-sm{stroke:var(--accent)}

/* Card */
.card{
  border-radius:var(--r-card);
  padding:var(--pad);
  background:var(--card);
  border:.5px solid var(--card-border);
  box-shadow:var(--card-shadow);
  backdrop-filter:blur(20px) saturate(135%);
  -webkit-backdrop-filter:blur(20px) saturate(135%);
}
.card.feature{background:linear-gradient(135deg,rgba(14,148,136,.10),var(--card) 62%)}
.card.tap{cursor:pointer;transition:transform .15s ease,box-shadow .2s ease}
.card.tap:hover{transform:translateY(-2px);box-shadow:var(--card-shadow-lg)}
.card.tap:active{transform:translateY(0)}

/* Badge (getöntes Icon-Feld) */
.badge{width:38px;height:38px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--badge);font-size:20px}
.badge .ic-badge{stroke:var(--accent)}
.badge.warm{background:var(--badge-warm)}
.badge.warm .ic-badge{stroke:var(--accent-2)}

.ctitle{font-size:16px;font-weight:700;letter-spacing:-.3px;color:var(--text);line-height:1.15}
.ctitle.sm{font-size:14.5px}
.ctext{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.5}

.row{display:flex;align-items:center;gap:12px}

/* Pills / Chips */
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:var(--r-pill);
  padding:5px 11px;font-size:11px;font-weight:600;background:var(--badge);color:var(--accent)}
.pill.warm{background:var(--badge-warm);color:var(--accent-2)}
.chip{font-size:12px;font-weight:600;padding:7px 13px;border-radius:var(--r-pill);
  background:#fff;color:var(--muted);border:1px solid var(--line);cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;transition:.15s}
.chip.on{background:var(--accent);color:#fff;border-color:transparent}
.chip.warm.on{background:var(--accent-2)}

/* Forms */
.field-label{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin-bottom:6px;display:block}
.input,.textarea,select.input{
  width:100%;padding:11px 12px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--line);
  font-family:inherit;font-size:14px;color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s;
}
.input:focus,.textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(14,148,136,.12)}
.textarea{resize:vertical;min-height:70px;line-height:1.5}
.twocol{display:flex;gap:9px}
.twocol>div{flex:1}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:12px 16px;border-radius:14px;border:none;cursor:pointer;
  font-family:'Inter Tight',sans-serif;font-size:14px;font-weight:700;letter-spacing:-.2px;
  background:var(--accent);color:#fff;transition:filter .15s,transform .1s;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.btn .ic-sm{stroke:#fff}
.btn.warm{background:var(--accent-2)}
.btn.ghost{background:#fff;color:var(--text);border:1px solid var(--line)}
.btn.ghost .ic-sm{stroke:var(--text)}
.btn.danger{background:#e5484d}
.btn.sm{padding:8px 12px;font-size:12.5px;border-radius:11px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* Hint / Inset */
.hint{font-size:11.5px;color:var(--muted);line-height:1.5;background:var(--inset);
  padding:10px 12px;border-radius:var(--r-sm);display:flex;gap:8px;align-items:flex-start}
.hint .ic-sm{stroke:var(--accent-2);flex-shrink:0;margin-top:1px}

/* Layout Container */
.container{max-width:840px;margin:0 auto;padding:0 16px}

/* Hero */
.hero{position:relative;min-height:190px;border-radius:0 0 26px 26px;overflow:hidden;
  background-size:cover;background-position:center 38%;
  display:flex;flex-direction:column;justify-content:flex-end;padding:22px 20px 26px}
.hero::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,42,44,.05) 0%,rgba(16,42,44,.42) 60%,rgba(16,42,44,.62) 100%)}
.hero>*{position:relative;z-index:2;color:#fff}
.hero .kicker{font-size:11px;font-weight:600;letter-spacing:.5px;color:rgba(255,255,255,.85)}
.hero .greet{font-family:'Inter Tight',sans-serif;font-size:clamp(26px,5vw,34px);font-weight:700;letter-spacing:-.6px;line-height:1.02;margin-top:5px}
.hero .sub{font-size:12.5px;color:rgba(255,255,255,.82);margin-top:6px;font-weight:500}
.hero .topbar{position:absolute;top:16px;left:20px;right:20px;z-index:3;display:flex;justify-content:space-between;align-items:center}
.hero .glass-pill{backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  background:rgba(255,255,255,.18);border:.5px solid rgba(255,255,255,.35);border-radius:999px;
  padding:6px 12px;font-size:11px;font-weight:600;color:#fff;display:inline-flex;align-items:center;gap:6px;text-decoration:none}

/* Utility */
.stack{display:flex;flex-direction:column;gap:var(--gap)}
.spacer{flex:1}
a.plain{text-decoration:none;color:inherit}
.section-h{display:flex;align-items:center;gap:8px;padding:10px 2px 2px;margin-top:6px}
.section-h .ic-sm{stroke:var(--accent)}
.section-h .t{font-family:'Inter Tight',sans-serif;font-size:13px;font-weight:700;color:var(--text)}
.section-h .spacer{flex:1}