/* ==========================================================================
   components.css: cards, chips, video, lightbox, forms, storage notice
   ========================================================================== */

/* --- Icons (inline SVG) --- */
.ico{width:1.1em;height:1.1em;display:inline-block;vertical-align:-.15em;flex:none;}

/* --- Info card --- */
.info-card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:2rem 2.2rem;}
.info-card h2,.info-card h3{font-weight:620;margin-bottom:.7rem;font-size:1.05rem;letter-spacing:-.01em;}
.info-card ul{list-style:none;font-size:.93rem;color:var(--ink-soft);display:grid;gap:.3rem;}
.info-card a{color:var(--ink);text-decoration-color:rgba(26,26,29,.25);text-underline-offset:3px;}
.info-card a:hover{color:var(--m-700);}
@media (max-width:640px){.info-card{padding:1.5rem 1.3rem;}}

/* --- Chips (category / filter buttons) --- */
.chip-row{display:flex;gap:.5rem;flex-wrap:wrap;}
.cat-chip{background:#fff;border:1.5px solid rgba(34,34,34,.12);border-radius:999px;padding:.45rem 1rem;font-size:.8rem;font-weight:480;color:var(--ink);text-decoration:none;transition:background .25s ease,color .25s ease,border-color .25s ease;}
.cat-chip:hover{border-color:var(--ink);}
.cat-chip.on,.cat-chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink);}
.f-chip{display:inline-flex;align-items:center;gap:.35rem;background:#fff;border:1.5px solid rgba(34,34,34,.25);border-radius:999px;padding:.38rem .9rem;font-size:.74rem;color:var(--ink-soft);transition:background .25s ease,color .25s ease,border-color .25s ease;}
.f-chip:hover{border-color:var(--gray-500);}
.f-chip[aria-pressed="true"]{border-color:var(--gray-500);color:#fff;background:var(--gray-500);font-weight:560;}

/* --- Kids typography --- */
.kids-eyebrow{font-family:var(--font-kids);font-weight:700;font-size:.92rem;letter-spacing:.2em;text-transform:uppercase;display:inline-block;margin-bottom:.5rem;color:var(--kids-2);}

/* --- Back link --- */
.back-link{margin-top:1.6rem;}
.back-link .ico{width:16px;height:16px;}

/* --- Video player (shared by home tile and about strip) --- */
.vid-player{position:relative;aspect-ratio:16/9;border-radius:calc(var(--radius-lg) - 8px);background:#0D0D0F;overflow:hidden;}
.vid-player video{width:100%;height:100%;object-fit:cover;}
.vid-fallback{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-size:.85rem;letter-spacing:.06em;color:rgba(255,255,255,.7);padding:1rem;}
.vid-close{position:absolute;top:1.1rem;right:1.1rem;width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;z-index:2;}
.vid-close:hover{background:var(--accent);}
.vid-close .ico{width:18px;height:18px;}

/* Video strip (Über uns): small bar, expands on click */
.vid{border-radius:var(--radius-lg);background:var(--dark);color:#fff;overflow:hidden;position:relative;}
.vid-thumb{display:flex;align-items:center;gap:1rem;width:100%;padding:1rem 1.2rem;background:linear-gradient(110deg,#232326,#161618);border:none;color:#fff;text-align:left;}
.vid-play{flex:none;width:58px;height:58px;border-radius:50%;background:var(--accent);display:grid;place-items:center;box-shadow:0 0 0 6px rgba(216,46,140,.22);transition:transform .25s ease;}
.vid-play .ico{width:20px;height:20px;margin-left:3px;}
.vid-thumb:hover .vid-play{transform:scale(1.08);}
.vid-txt b{display:block;font-weight:600;font-size:.98rem;}
.vid-txt span{font-size:.78rem;color:rgba(255,255,255,.62);}
.vid.open .vid-thumb{display:none;}
.vid-stage{position:relative;padding:.6rem;animation:vidIn .5s var(--ease);}
@keyframes vidIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}

/* Video tile (Startseite): square tile, grows to 16:9 via View Transitions */
.vtile{margin-top:1.8rem;width:210px;border-radius:var(--radius-lg);overflow:hidden;background:var(--dark);view-transition-name:homevid;}
.vtile.open{width:100%;}
.vtile-thumb{position:relative;display:block;width:100%;aspect-ratio:1/1;border:none;padding:0;background:#232326;color:#fff;text-align:left;}
.vtile-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.vtile-play{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:var(--accent);display:grid;place-items:center;box-shadow:0 0 0 7px rgba(216,46,140,.25);transition:transform .25s ease;}
.vtile-play .ico{width:24px;height:24px;margin-left:3px;}
.vtile-thumb:hover .vtile-play{transform:translate(-50%,-50%) scale(1.08);}
.vtile-cap{position:absolute;left:0;right:0;bottom:0;padding:.7rem .85rem;font-size:.78rem;font-weight:560;line-height:1.3;background:linear-gradient(transparent,rgba(0,0,0,.7));}
.vtile.open .vtile-thumb{display:none;}
.vtile-stage{position:relative;padding:.5rem;}
::view-transition-group(homevid){animation-duration:.55s;animation-timing-function:var(--ease);}
@media (max-width:640px){.vtile{width:170px;}.vtile.open{width:100%;}}

/* --- Gallery item + lightbox --- */
.gal-item{display:block;width:100%;border-radius:var(--radius);overflow:hidden;position:relative;cursor:zoom-in;transition:transform .3s ease;background:var(--gray-100);}
.gal-item:hover{transform:translateY(-4px);}
.gal-item img{width:100%;height:auto;}
.lightbox{position:fixed;inset:0;background:rgba(22,22,22,.94);z-index:1000;display:flex;align-items:center;justify-content:center;padding:2rem 5rem;}
.lightbox[hidden]{display:none;}
.lb-stage{max-width:1000px;width:100%;margin:0;}
.lb-stage img{width:100%;max-height:78vh;object-fit:contain;border-radius:var(--radius-lg);}
.lb-cap{color:rgba(238,238,238,.82);text-align:center;margin-top:1rem;font-size:.9rem;}
.lb-btn,.lb-close{position:fixed;background:rgba(238,238,238,.12);border:none;color:#fff;border-radius:50%;display:grid;place-items:center;transition:background .25s;}
.lb-btn{top:50%;transform:translateY(-50%);width:52px;height:52px;}
.lb-btn:hover,.lb-close:hover{background:rgba(238,238,238,.25);}
.lb-btn .ico{width:24px;height:24px;}
.lb-prev{left:1.2rem;}.lb-next{right:1.2rem;}
.lb-close{top:1.2rem;right:1.2rem;width:46px;height:46px;}
.lb-close .ico{width:20px;height:20px;}
@media (max-width:640px){.lightbox{padding:4.5rem .8rem;}.lb-btn{top:auto;bottom:1rem;transform:none;}}

/* --- Forms --- */
.form{display:grid;gap:.9rem;}
.form label.fl{display:grid;gap:.3rem;font-size:.8rem;color:var(--ink-soft);font-weight:460;}
.form input[type=text],.form input[type=email],.form textarea{border:1.5px solid rgba(34,34,34,.18);border-radius:10px;padding:.75rem .95rem;background:#fff;width:100%;font-size:.95rem;color:var(--ink);transition:border-color .2s ease;}
.form input:focus,.form textarea:focus{border-color:var(--accent);outline:none;}
.form input:focus-visible,.form textarea:focus-visible{outline:3px solid var(--m-200);outline-offset:1px;}
.form textarea{min-height:130px;resize:vertical;}
.form .check{display:flex;gap:.6rem;align-items:flex-start;font-size:.82rem;color:var(--ink-soft);}
.form .check input{width:18px;height:18px;margin-top:.15rem;accent-color:var(--accent);flex:none;}
.form .check a{color:var(--m-700);}
.form .field-error{font-size:.78rem;color:#B3122E;}
.form [aria-invalid="true"]{border-color:#B3122E;}
.form .btn{justify-self:start;}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}
.form-msg{border-radius:12px;padding:.9rem 1.1rem;font-size:.9rem;margin-bottom:1rem;}
.form-msg.ok{background:var(--m-50);border:1.5px solid var(--m-200);color:var(--ink);}
.form-msg.err{background:#FDECEE;border:1.5px solid #F2B8C0;color:#7A0F22;}
.form-note{font-size:.82rem;color:var(--ink-soft);margin-top:1rem;}
.form-note a{color:var(--m-700);white-space:nowrap;}

/* --- Storage notice (no consent needed) --- */
.consent{position:fixed;left:1rem;bottom:1rem;z-index:1200;max-width:420px;animation:consentIn .45s var(--ease);}
.consent[hidden]{display:none;}
.consent-box{background:var(--dark);color:rgba(255,255,255,.86);border-radius:18px;padding:1.2rem 1.3rem;box-shadow:0 20px 50px rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08);}
.consent-title{font-weight:600;color:#fff;margin-bottom:.35rem;font-size:.95rem;}
.consent-text{font-size:.84rem;line-height:1.55;}
.consent-details{margin-top:.8rem;font-size:.76rem;}
.consent-details table{width:100%;border-collapse:collapse;}
.consent-details th,.consent-details td{text-align:left;padding:.35rem .4rem;border-bottom:1px solid rgba(255,255,255,.1);vertical-align:top;}
.consent-details th{color:#fff;font-weight:560;}
.consent-actions{display:flex;align-items:center;gap:1rem;margin-top:.9rem;flex-wrap:wrap;}
.consent-actions a{font-size:.8rem;color:rgba(255,255,255,.75);}
.consent-actions a:hover{color:var(--m-300);}
@keyframes consentIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
@media (max-width:580px){.consent{left:.6rem;right:.6rem;bottom:.6rem;max-width:none;}}