/* Kostenlose Werkzeuge (tools/): Übersicht und gemeinsame Bausteine der Werkzeugseiten.
   Grundaussehen, Menü und Fuß kommen aus assets/gruppenseiten.css und assets/nav.css.
   Menü und Fuß setzt werkstatt/gruppenseiten/build.py ein (WERKZEUG_SEITEN). */

/* Übersicht */
.tl-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;list-style:none;margin:32px 0 0;padding:0;}
.tl-card{position:relative;display:flex;flex-direction:column;gap:10px;height:100%;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 24px 56px;transition:border-color .15s,box-shadow .15s;}
a.tl-card:hover{border-color:var(--red);box-shadow:0 8px 20px -12px rgba(192,0,0,.35);}
.tl-card .ic{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:#f6efec;color:var(--red);}
.tl-card .ic svg{width:26px;height:26px;}
.tl-card .fuer{color:var(--grey);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.tl-card .t{font-weight:700;font-size:1.12rem;color:var(--dark);}
.tl-card .d{color:var(--grey);font-size:.93rem;line-height:1.55;}
.tl-card .go{position:absolute;left:24px;bottom:20px;font-weight:700;color:var(--red);font-size:.93rem;}
.tl-card.bald{background:var(--cream);border-style:dashed;}
.tl-card.bald .ic{background:#efe9e4;color:var(--grey);}
.tl-card.bald .go{color:var(--grey);font-weight:500;}
.tl-note{margin:28px 0 0;color:var(--grey);font-size:.9rem;line-height:1.55;max-width:720px;}
.tl-points{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;list-style:none;margin:28px 0 0;padding:0;}
.tl-points li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;}
.tl-points .t{display:block;font-weight:700;color:var(--dark);}
.tl-points .d{display:block;margin-top:6px;color:var(--grey);font-size:.9rem;line-height:1.5;}
@media (max-width:900px){ .tl-cards{grid-template-columns:1fr 1fr;} .tl-points{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .tl-cards,.tl-points{grid-template-columns:1fr;} .gp-head h1{font-size:2.1rem;} }

/* Hinweis „läuft im Browser“ */
.tl-lokal{display:flex;gap:12px;align-items:flex-start;margin:22px 0 0;padding:14px 16px;max-width:640px;background:#fff;border:1px solid var(--line);border-radius:10px;color:var(--ink);font-size:.92rem;line-height:1.5;}
.tl-lokal svg{flex:0 0 auto;width:22px;height:22px;color:var(--red);margin-top:1px;}

/* Übersicht in Gruppen */
.tl-sprung ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:20px 0 0;padding:0;}
.tl-sprung a{display:inline-block;padding:7px 14px;border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--dark);font-size:.9rem;font-weight:700;text-decoration:none;}
.tl-sprung a:hover{border-color:var(--red);color:var(--red);}
.tl-gruppe{margin:44px 0 0;font-size:1.35rem;color:var(--dark);scroll-margin-top:90px;}
.tl-gruppe + .tl-cards{margin-top:16px;}

/* Gruppenfarben (Übersicht und Werkzeugseiten) */
.tl-g-ehrenamt{--g:#B4235A;--g-hell:#fbeef3;}
.tl-g-vorstand{--g:#1F5E8C;--g-hell:#eaf2f8;}
.tl-g-planen{--g:#2E7D4F;--g-hell:#ebf5ef;}
.tl-g-auftritt{--g:#C00000;--g-hell:#f8ecea;}
.tl-g-verbaende{--g:#6A3FA0;--g-hell:#f1ecf7;}

/* Übersicht: Kopf */
.tl-held{position:relative;overflow:hidden;}
.tl-held::before{content:"";position:absolute;right:-120px;top:-140px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(192,0,0,.08),rgba(192,0,0,0) 70%);pointer-events:none;}
.tl-held .wrap{position:relative;}
.tl-illu{width:100%;max-width:300px;height:auto;justify-self:end;}
.tl-vorteile{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:22px 0 0;padding:0;}
.tl-vorteile li{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;background:#fff;border:1px solid var(--line);border-radius:999px;font-size:.9rem;font-weight:700;color:var(--dark);}
.tl-vorteile li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);}

/* Übersicht: Sprungleiste bleibt stehen */
.tl-sprung{position:sticky;top:64px;z-index:5;margin:20px -12px 0;padding:8px 12px;background:rgba(253,251,249,.94);backdrop-filter:blur(6px);border-radius:12px;}
.tl-sprung ul{margin:0;}
.tl-sprung li a{display:inline-flex;align-items:center;gap:8px;}
.tl-sprung li a::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--g,var(--red));}
.tl-sprung li a:hover{border-color:var(--g,var(--red));color:var(--g,var(--red));}

/* Übersicht: Gruppen und Karten */
.tl-gruppe{display:flex;align-items:center;gap:12px;}
.tl-gruppe::before{content:"";width:6px;height:1.3em;border-radius:3px;background:var(--g,var(--red));}
.tl-cards[class*="tl-g-"] .tl-card{border-top:4px solid var(--g);}
.tl-cards[class*="tl-g-"] .tl-card .ic{background:var(--g-hell);color:var(--g);}
.tl-cards[class*="tl-g-"] a.tl-card:hover{border-color:var(--g);border-top-color:var(--g);box-shadow:0 12px 26px -16px var(--g);transform:translateY(-2px);}
.tl-cards[class*="tl-g-"] .tl-card .go{color:var(--g);}
a.tl-card{transition:border-color .15s,box-shadow .15s,transform .15s;}
.tl-chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:2px 0 0;padding:0;}
.tl-chips li{padding:3px 9px;border-radius:6px;background:#f4f0ec;color:var(--dark);font-size:.76rem;font-weight:700;}
.tl-chips li.st,.tl-ergebnis li.st{background:var(--g-hell,#f8ecea);color:var(--g,var(--red));}

/* Werkzeugseiten: Kopf */
.tl-kopf{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--cream) 0%,var(--cream) 55%,var(--g-hell,#f8ecea) 100%);}
.tl-kopf::before{content:"";position:absolute;right:-90px;bottom:-160px;width:420px;height:420px;border-radius:50%;border:40px solid var(--g,var(--red));opacity:.06;pointer-events:none;}
.tl-kopf .wrap{position:relative;}
.tl-kopf .eyebrow{color:var(--g,var(--red));}
.tl-kopf h1{margin-right:220px;}
.tl-kopf-ic{position:absolute;right:24px;top:50%;width:150px;height:150px;margin-top:-75px;display:flex;align-items:center;justify-content:center;border-radius:36px;background:#fff;color:var(--g,var(--red));box-shadow:0 22px 40px -26px var(--g,var(--red));transform:rotate(-5deg);}
.tl-kopf-ic::after{content:"";position:absolute;inset:14px;border-radius:26px;background:var(--g-hell,#f8ecea);z-index:0;}
.tl-kopf-ic svg{position:relative;z-index:1;width:78px;height:78px;stroke-width:1.7;}
.tl-ergebnis{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;margin:18px 0 0;padding:0;}
.tl-ergebnis::before{content:"Sie erhalten";margin-right:4px;color:var(--grey);font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;}
.tl-ergebnis li{padding:5px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--dark);font-size:.86rem;font-weight:700;}
.tl-ergebnis li.st{border-color:transparent;}

/* Werkzeugseiten: nummerierte Schritte */
.tl-nr{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;margin-right:4px;border-radius:50%;background:var(--g,var(--red));color:#fff;font-size:.9rem;font-weight:700;vertical-align:1px;flex:0 0 auto;}

/* Ideen und Wünsche */
.tl-ideen{padding:8px 0 0;}
.tl-ideen-box{display:flex;gap:18px;align-items:flex-start;max-width:820px;padding:22px 24px;border-radius:16px;background:#fff;border:1px solid var(--line);border-left:6px solid var(--g,var(--red));}
.tl-ideen-box .ic{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;background:var(--g-hell,#f8ecea);color:var(--g,var(--red));}
.tl-ideen-box .ic svg{width:26px;height:26px;}
.tl-ideen-box p{margin:0;color:var(--ink);line-height:1.55;}
.tl-ideen-box .t{font-weight:700;color:var(--dark);font-size:1.08rem;margin-bottom:4px;}
.tl-ideen-box a{color:var(--g,var(--red));font-weight:700;}
#inhalt > .tl-ideen:last-child{padding:0 0 64px;}

/* Werkzeugseiten: weitere Werkzeuge als Karten */
.tl-kopf ~ .gp-other ul,main[class*="tl-g-"] .gp-other ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;}
main[class*="tl-g-"] .gp-other a{position:relative;display:flex;align-items:center;height:100%;box-sizing:border-box;padding:16px 46px 16px 18px;border-radius:12px;background:#fff;border:1px solid var(--line);line-height:1.4;}
main[class*="tl-g-"] .gp-other a::after{content:"\2192";position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--g,var(--red));font-size:1.1rem;transition:right .15s;}
main[class*="tl-g-"] .gp-other a:hover{border-color:var(--g,var(--red));color:var(--dark);box-shadow:0 10px 22px -16px var(--g,var(--red));}
main[class*="tl-g-"] .gp-other a:hover::after{right:13px;}
main[class*="tl-g-"] .gp-other li:last-child a{background:var(--cream);border-style:dashed;}

@media (max-width:900px){
  .tl-kopf h1{margin-right:0;}
  .tl-kopf-ic{display:none;}
  .tl-illu{display:none;}
}
@media (max-width:600px){
  .tl-sprung{position:static;margin:20px 0 0;padding:0;background:none;backdrop-filter:none;}
  .tl-ideen-box{padding:18px;gap:14px;}
}
@media (prefers-reduced-motion:reduce){ a.tl-card,main[class*="tl-g-"] .gp-other a::after{transition:none;} .tl-cards[class*="tl-g-"] a.tl-card:hover{transform:none;} }
@media print{ .tl-kopf-ic,.tl-ergebnis,.tl-ideen,.tl-kopf::before{display:none !important;} .tl-kopf{background:none;} }

/* Übersicht: Suche (tools/suche.js) */
.tl-suche{margin:24px 0 0;}
.tl-suchfeld{position:relative;max-width:520px;}
.tl-suchfeld svg{position:absolute;left:16px;top:50%;width:20px;height:20px;transform:translateY(-50%);color:var(--grey);pointer-events:none;}
.tl-suchfeld input{width:100%;box-sizing:border-box;font:inherit;font-size:1rem;padding:13px 18px 13px 48px;border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);}
.tl-suchfeld input:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-color:var(--red);}
.tl-suchchips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;}
.tl-suchchip{font:inherit;font-size:.82rem;font-weight:700;padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:#f4f0ec;color:var(--dark);cursor:pointer;}
.tl-suchchip:hover{border-color:var(--red);color:var(--red);}
.tl-suchchip[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff;}
.tl-suchstand{margin:14px 0 0;color:var(--grey);font-size:.93rem;min-height:1px;}
.tl-suchstand:empty{margin:0;}
.tl-suchleer{margin:18px 0 0;padding:16px 18px;max-width:720px;background:#fff;border:1px dashed var(--line);border-radius:12px;color:var(--ink);}
.tl-suchleer a{color:var(--red);font-weight:700;}
.tl-sucht .tl-sprung{display:none;}
.tl-gruppe[hidden],.tl-cards[hidden],.tl-cards li[hidden]{display:none;}

/* Video im Seitenkopf der Werkzeuge */
.tl-video{margin:26px 0 0;max-width:760px;}
.tl-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:14px;background:#1f1a1a;border:4px solid #1f1a1a;box-shadow:10px 10px 0 var(--g,var(--red));}
.tl-video figcaption{margin-top:12px;color:var(--grey);font-size:.86rem;line-height:1.45;}
@media print{ .tl-video{display:none;} }

/* Übersicht: Gruppenband und Karten mit Ergebnisbild (Bilder in tools/bilder/, zugeschnitten aus werkstatt/werkzeug-videos/*/bilder/) */
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 600;font-display:swap;src:url('../docs/_shared/fonts/fraunces_italic_latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 600;font-display:swap;src:url('../docs/_shared/fonts/fraunces_italic_latin-ext.woff2') format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
.tl-band{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr auto;align-items:end;gap:4px 20px;margin:52px 0 0;padding:26px 28px 24px;border-radius:18px;background:var(--g);color:#fff;}
.tl-band::before{display:none;}
.tl-band::after{content:"";position:absolute;right:150px;top:-70px;width:190px;height:190px;border-radius:50%;border:30px solid rgba(255,255,255,.12);pointer-events:none;}
.tl-band .n{grid-column:1;font-size:1.5rem;line-height:1.2;}
.tl-band .z{grid-column:1;grid-row:2;font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:400;font-size:1.25rem;color:rgba(255,255,255,.85);}
.tl-band .anz{grid-column:2;grid-row:1 / span 2;align-self:center;position:relative;z-index:1;padding:6px 14px;border:2px solid rgba(255,255,255,.7);border-radius:999px;font-size:.85rem;letter-spacing:.02em;white-space:nowrap;}
.tl-band + .tl-cards{margin-top:22px;}

.tl-cards-bild{grid-template-columns:repeat(4,1fr);}
.tl-cards-bild.n3{grid-template-columns:repeat(3,1fr);}
.tl-cards-bild.n3 .tl-bild{height:200px;}
.tl-cards-bild .tl-card{overflow:hidden;padding-top:0;}
.tl-bild{position:relative;display:block;height:176px;margin:0 -24px 8px;overflow:hidden;background:var(--g-hell);}
.tl-bild::before{content:"";position:absolute;right:-40px;bottom:-60px;width:150px;height:150px;border-radius:50%;border:22px solid var(--g);opacity:.13;}
.tl-bild img{position:absolute;left:50%;top:30px;width:68%;height:auto;transform:translateX(-46%) rotate(-3deg);border-radius:6px;background:#fff;box-shadow:0 14px 26px -14px rgba(31,26,26,.55),0 0 0 1px rgba(31,26,26,.06);transition:transform .25s ease;}
.tl-cards-bild a.tl-card:hover .tl-bild img{transform:translateX(-50%) translateY(-6px) rotate(0deg);}
.tl-cards-bild .tl-card .ic{position:absolute;left:14px;top:14px;z-index:1;width:40px;height:40px;border-radius:11px;background:#fff;box-shadow:0 6px 14px -8px rgba(31,26,26,.5);}
.tl-cards-bild .tl-card .ic svg{width:22px;height:22px;}
@media (max-width:1100px){ .tl-cards-bild,.tl-cards-bild.n3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .tl-cards-bild,.tl-cards-bild.n3{grid-template-columns:1fr;} .tl-band{grid-template-columns:1fr;padding:22px 20px;} .tl-band .anz{grid-column:1;grid-row:3;justify-self:start;margin-top:10px;} .tl-band::after{right:-60px;} }
@media (prefers-reduced-motion:reduce){ .tl-bild img{transition:none;} }