/* get-involved.css — Inline-Stylesheet aus Lilys Entwurf culture-site/get-involved.html, unveraendert bis auf CSS_PATCHES (fh-book-convert). */
/* Schriften: dieselben Schnitte wie Lilys Google-Fonts-Anfrage, selbst gehostet (fh-book-convert). */
@font-face{font-family:"Spectral";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/spectral-500.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Spectral";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/spectral-600.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/manrope-300-800.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/manrope-300-800.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/manrope-300-800.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/manrope-300-800.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/manrope-300-800.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* Ab hier aus dem Entwurf. */
:root{
  --paper:#F3F4F1;--paper-2:#FBFBF9;--card:#FFFFFF;
  --ink:#111820;--ink-soft:#4C554F;--ink-faint:#5E655F;
  --rule:#E1E3DC;--rule-soft:#ECEEE8;
  --cn:#B02329;--cn-soft:#F7E9E8;--de:#1B3A5C;--de-soft:#E8EEF4;
  --cn-solid:#B02329;--de-solid:#1B3A5C;--field:#0E1A26;
  --display:"Spectral",Georgia,"Songti SC",serif;
  --sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --shadow:0 1px 2px rgba(17,24,32,.04),0 18px 40px -26px rgba(17,24,32,.28);
  --shadow-lg:0 2px 6px rgba(17,24,32,.05),0 30px 60px -32px rgba(17,24,32,.34);
  --gutter:clamp(1rem,4vw,3rem);
}
*,*::before,*::after{box-sizing:border-box;}
html{font-size:112.5%;scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--de);outline-offset:3px;border-radius:6px;}
.wrap{max-width:62rem;margin:0 auto;padding-inline:var(--gutter);}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* header */
.top{background:var(--field);color:#F4F1EA;}
.bar{display:flex;align-items:center;gap:1rem;padding-block:1rem;}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:700;font-size:.92rem;margin-right:auto;}
.brand svg{width:1.45rem;height:1.45rem;}
.back{font-size:.84rem;font-weight:600;color:#A9BDD2;text-decoration:none;}
.back:hover{color:#F4F1EA;}
.hero{padding-block:clamp(2.2rem,7vh,4rem) clamp(2.4rem,7vh,4.2rem);}
.hero h1{font-family:var(--display);font-weight:600;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.05;letter-spacing:-.02em;margin:0 0 .8rem;}
.hero p{max-width:38rem;font-size:clamp(1rem,1.3vw,1.12rem);color:#D3DEEA;margin:0;}

/* jump cards */
.jump{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.7rem;margin:-1.9rem auto 2.6rem;position:relative;}
.jump a{--fill:var(--card);display:flex;flex-direction:column;gap:.55rem;text-decoration:none;color:var(--ink);font-weight:700;font-size:.9rem;line-height:1.25;
  padding:.95rem 1rem 1rem;border:1.5px solid transparent;border-radius:16px;box-shadow:var(--shadow);
  background:linear-gradient(var(--fill),var(--fill)) padding-box,linear-gradient(135deg,var(--cn),var(--de)) border-box;transition:transform .2s ease,box-shadow .2s ease;}
.jump a:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.ic{flex:none;width:2rem;height:2rem;padding:.42rem;border-radius:9px;background:linear-gradient(135deg,var(--cn-soft),var(--de-soft));color:var(--de);}
@media(max-width:900px){.jump{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* sections */
.blk{background:var(--card);border:1px solid var(--rule);border-radius:16px;box-shadow:var(--shadow);padding:clamp(1.3rem,3vw,2rem);margin-bottom:1.4rem;scroll-margin-top:1.2rem;}
.blk-head{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem;}
.blk h2{font-family:var(--display);font-weight:600;font-size:clamp(1.35rem,2.2vw,1.7rem);line-height:1.15;margin:0;}
.blk>p.lead{font-size:.95rem;line-height:1.6;color:var(--ink-soft);margin:0 0 1.2rem;max-width:44rem;}

/* forms */
form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem 1rem;}
.full{grid-column:1 / -1;}
.fld{display:flex;flex-direction:column;gap:.35rem;}
.fld>label,.fld>.lbl{font-size:.8rem;font-weight:700;}
.fld small{font-weight:500;color:var(--ink-faint);}
input[type=text],input[type=email],select,textarea{font:inherit;font-size:.92rem;color:var(--ink);background:var(--paper-2);border:1px solid var(--rule);border-radius:10px;padding:.65rem .8rem;width:100%;}
textarea{resize:vertical;min-height:7rem;line-height:1.5;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--de);outline-offset:1px;border-color:transparent;}
.opts{display:flex;flex-wrap:wrap;gap:.5rem;}
.opt{position:relative;}
.opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;}
.opt span{display:inline-block;font-size:.86rem;font-weight:600;padding:.5rem .85rem;border-radius:10px;border:1px solid var(--rule);background:var(--paper-2);color:var(--ink-soft);transition:background-color .2s,color .2s,border-color .2s;}
.opt input:checked+span{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--cn-solid),var(--de-solid));}
.opt input:focus-visible+span{outline:2px solid var(--de);outline-offset:2px;}
.chk{display:flex;gap:.55rem;align-items:flex-start;font-size:.8rem;line-height:1.45;color:var(--ink-soft);}
.chk input{margin-top:.15rem;}
.chk a{color:var(--de);}
.btn{justify-self:start;font:inherit;font-size:.92rem;font-weight:700;color:#fff;border:0;border-radius:10px;padding:.72rem 1.3rem;cursor:pointer;
  background:linear-gradient(135deg,var(--cn-solid),var(--de-solid));transition:transform .2s ease,box-shadow .2s ease;}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px -8px rgba(27,58,92,.6);}
.btn:disabled{opacity:.55;transform:none;cursor:default;}
.note{font-size:.76rem;color:var(--ink-faint);margin:0;}
.ok{font-size:.88rem;font-weight:600;color:var(--de);margin:0;}
@media(max-width:640px){form{grid-template-columns:1fr;}}

/* discussion board */
.board{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:1rem 0;margin-bottom:1.2rem;}
.board p{margin:0;text-align:center;font-size:.88rem;color:var(--ink-faint);padding:.6rem 0;}

.foot{padding-block:2rem 3rem;font-size:.8rem;color:var(--ink-faint);text-align:center;}
.foot a{color:var(--de);}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}.jump a,.btn{transition:none;}}

/* compact jump cards: icon left */
.jump a{flex-direction:row;align-items:center;gap:.6rem;padding:.7rem .85rem;font-size:.86rem;}
.jump .ic{width:1.8rem;height:1.8rem;padding:.38rem;}

/* two-by-two layout so the page stays short: Subscribe | Feedback, Discussion (full width), Printed edition | Contribute */
.wrap{max-width:76rem;}
.blocks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.3rem;align-items:start;}
.blocks .blk{margin:0;height:100%;}
.blocks form{gap:.75rem .85rem;}
.blk>p.lead{margin-bottom:1rem;}
.disc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:1.4rem;align-items:start;}
.disc-grid .board{margin:0;height:100%;display:grid;place-items:center;border:1px dashed var(--rule);border-radius:12px;padding:1.2rem;}
textarea{min-height:5.5rem;}
@media(max-width:900px){.blocks{grid-template-columns:1fr;}.disc-grid{grid-template-columns:1fr;}}

/* the chosen form lights up: gradient frame + soft tint; its jump card turns dark */
.blk{transition:box-shadow .35s ease,background .35s ease;}
.blk.is-target{border:1.5px solid transparent;
  background:linear-gradient(color-mix(in srgb,var(--de-soft) 45%,var(--card)),color-mix(in srgb,var(--cn-soft) 35%,var(--card))) padding-box,linear-gradient(135deg,var(--cn),var(--de)) border-box;
  box-shadow:var(--shadow-lg);animation:blkIn .9s ease;}
@keyframes blkIn{0%{box-shadow:0 0 0 0 rgba(27,58,92,.35),var(--shadow-lg);}60%{box-shadow:0 0 0 8px rgba(27,58,92,0),var(--shadow-lg);}}
.jump a.is-on{color:#fff;background:linear-gradient(135deg,var(--cn-solid),var(--de-solid)) border-box;}
.jump a.is-on .ic{background:rgba(255,255,255,.9);}
@media(prefers-reduced-motion:reduce){.blk.is-target{animation:none;}}

/* stronger highlight (Lily: more visible) */
.blk.is-target{border-width:2px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--cn) 13%,var(--card)),color-mix(in srgb,var(--de) 15%,var(--card))) padding-box,linear-gradient(135deg,var(--cn-solid),var(--de-solid)) border-box;}
.blk.is-target input[type=text],.blk.is-target input[type=email],.blk.is-target select,.blk.is-target textarea,.blk.is-target .opt span{background:var(--card);}