/* Farben und Schrift wie in der CLV-Mitgliederseite / im CLV Plakat-Generator. */ @font-face{font-family:Rubik;font-style:normal;font-weight:300 900;font-display:swap;src:url(/assets/fonts/rubik-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:Rubik;font-style:normal;font-weight:300 900;font-display:swap;src:url(/assets/fonts/rubik-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} :root{ --bg:#f5f4ee; --surface:#fff; --surface-muted:#edeadf; --border:#ddd8c7; --text:#3a362c; --text-muted:#766f5d; --text-soft:#a1a196; --accent:#a4c57b;--gruen-text:#a4c57b; --accent-soft:#e9f1de; --secondary:#f39200; --secondary-hover:#d97f00; --secondary-soft:#fdead0; --fehler:#b3261e; --fehler-soft:#fdecea; --radius:1.25rem; } *,*::before,*::after{box-sizing:border-box} html{scroll-padding-top:5rem;overflow-x:hidden} /* Sicherheitsnetz gegen 100vw-Elemente (Bildband, Newsletter-Band): manche mobilen Browser zeigen sonst kurz einen Rand mit der Grundfarbe von */ body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--text);font-family:Rubik,ui-sans-serif,system-ui,sans-serif;font-size:1rem;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} a{color:inherit} img{max-width:100%} /* Kopfleiste über dem Foto */ .kopf{position:absolute;inset:0 0 auto 0;z-index:40} .kopf-innen{max-width:none;margin:0 auto;padding:calc(1.25rem + env(safe-area-inset-top,0px)) calc(1rem + env(safe-area-inset-right,0px)) .75rem calc(1rem + env(safe-area-inset-left,0px));display:flex;align-items:center;justify-content:space-between;gap:1rem} .logo{height:2rem;width:auto;display:block;filter:drop-shadow(0 1px 8px rgb(0 0 0/.45))} .logo-link{flex:none;display:flex} .symbol{flex:none} .sprung{position:absolute;left:1rem;top:.75rem;background:#fff;color:var(--text);padding:.5rem 1rem;border-radius:.75rem;font-weight:600;transform:translateY(-200%)} .sprung:focus{transform:none} .burger{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:0;border-radius:50%;background:none;color:#fff;cursor:pointer;filter:drop-shadow(0 1px 8px rgb(0 0 0/.45))} .burger:hover{background:rgb(255 255 255/.15)} .burger .b-auf,.burger .b-zu{display:inline-flex} .burger .b-zu,.kopf.offen .burger .b-auf{display:none} .kopf.offen .burger .b-zu{display:inline-flex} /* Menü: auf Handy und Tablet ein weißes Fenster, ab 1200 px die Leiste über dem Foto (Menü mittig) */ #hauptmenue{display:none} .kopf.offen #hauptmenue{display:block;position:fixed;top:4.25rem;left:.75rem;right:.75rem;max-height:calc(100vh - 6rem);overflow-y:auto;background:#fff;border-radius:1rem;padding:.5rem;box-shadow:0 25px 50px -12px rgb(0 0 0/.25);outline:1px solid rgb(0 0 0/.05)} .menue{list-style:none;margin:0;padding:0} .menue a,.menue-knopf,.menue-rechts a{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;min-height:3rem;padding:.75rem 1rem;border:0;border-radius:.75rem;background:none;color:var(--text);font:inherit;font-size:1rem;font-weight:500;text-align:left;text-decoration:none;cursor:pointer} .menue a:hover,.menue-knopf:hover,.menue a:active,.menue-rechts a:hover{background:var(--secondary-soft)} .menue-zeile{display:flex;align-items:stretch;border-radius:.75rem;transition:background .12s} .menue-zeile:hover,.menue-punkt.offen>.menue-zeile{background:var(--secondary-soft)} .menue-zeile a:hover,.menue-zeile .menue-knopf:hover{background:none} .menue-umbruch{display:none} .menue-zeile .menue-haupt{flex:1} .menue-zeile .menue-pfeil{flex:none;width:3.25rem;justify-content:center;padding:0} .menue a[aria-current=page]{color:var(--secondary-hover);font-weight:600} .menue-knopf .symbol{transition:transform .15s;color:var(--text-muted)} .menue-punkt.offen .menue-knopf .symbol{transform:rotate(180deg)} .unter{display:none;list-style:none;margin:0 0 .25rem;padding:0 0 0 .75rem;border-left:3px solid var(--accent-soft);margin-left:1rem} .menue-punkt.offen>.unter{display:block} .unter a{min-height:2.5rem;padding:.5rem .75rem;font-size:.95rem;font-weight:400} .unter a .symbol{color:var(--text-muted)} .unter-titel{padding:.75rem .75rem .25rem;font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)} .menue-rechts{display:flex;flex-direction:column;gap:.25rem;margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--border)} .menue-rechts .suche-link{display:flex;justify-content:flex-start;gap:.75rem} .menue-rechts .anmelden-knopf{justify-content:center;background:var(--accent);color:#fff;font-weight:600;border-radius:.75rem} .menue-rechts .anmelden-knopf:hover{background:#8fb45f} @media(min-width:640px){.kopf.offen #hauptmenue{left:auto;right:1.5rem;width:22rem}.kopf-innen{padding:1.75rem clamp(1.5rem,3.2vw,3.25rem) 1rem}.logo{height:2.25rem}} @media(min-width:1200px){ /* An der Content-Breite der übrigen Seite (80rem) ausrichten, statt über die volle Fensterbreite verteilt zu wirken; die Navigation dabei nur wenige Pixel weiter nach unten setzen (rein optisch, keine spürbar höhere Kopfzeile). */ .kopf-innen{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:1.5rem;max-width:80rem;padding-top:calc(1.75rem + env(safe-area-inset-top,0px) + .35rem)} .logo-link{justify-self:start} .burger{display:none} #hauptmenue,.kopf.offen #hauptmenue{display:contents} .menue{grid-column:2;max-width:34rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.1rem .15rem} /* max-width: Mittelspalte so breit wie die breiteste Menüzeile (seit "Startseite" dazukam: Startseite+Der CLV+Personalvertretung+Service & Vorteile ≈ 33.7rem), damit die Navigation exakt in der Seitenmitte sitzt */ .menue-umbruch{display:block;flex-basis:100%;height:0} .menue-punkt{position:relative;z-index:1} .menue-punkt:hover,.menue-punkt:focus-within,.menue-punkt.offen{z-index:5} .menue a,.menue-knopf,.menue-rechts a{display:inline-flex;white-space:nowrap;width:auto;min-height:0;padding:.5rem .7rem;border-radius:.5rem;color:rgb(255 255 255/.95);text-shadow:0 1px 10px rgb(0 0 0/.55);font-size:.9375rem} .menue a:hover,.menue-knopf:hover,.menue-rechts a:hover{background:rgb(255 255 255/.36);color:#fff} .menue-zeile a:hover,.menue-zeile .menue-knopf:hover{background:none} .menue .menue-haupt[aria-current=page]{color:#fff} .menue-punkt.aktiv>.menue-zeile,.menue-punkt.aktiv>.menue-knopf{box-shadow:inset 0 -2px 0 rgb(255 255 255/.9);border-radius:.5rem .5rem 0 0} .unter a[aria-current=page]{color:var(--secondary-hover);font-weight:600} .menue-knopf .symbol{color:inherit} .menue-zeile{display:inline-flex;align-items:center;border-radius:.5rem} .menue-zeile:hover,.menue-punkt:hover>.menue-zeile,.menue-punkt:focus-within>.menue-zeile,.menue-punkt.offen>.menue-zeile{background:rgb(255 255 255/.36)} .menue-punkt:hover>.menue-knopf,.menue-punkt:focus-within>.menue-knopf,.menue-punkt.offen>.menue-knopf{background:rgb(255 255 255/.36)} .menue-zeile .menue-haupt{flex:none;padding-right:.15rem} .menue-zeile .menue-pfeil{width:auto;padding:.5rem .35rem .5rem .1rem} .unter{position:absolute;left:0;top:100%;min-width:17rem;max-height:calc(100vh - 8rem);overflow-y:auto;margin:0;padding:.5rem;border:0;border-radius:1rem;background:#fff;box-shadow:0 25px 50px -12px rgb(0 0 0/.3);outline:1px solid rgb(0 0 0/.05)} .unter{display:block;visibility:hidden;opacity:0;transition:opacity .14s,visibility 0s .25s} .menue-punkt:hover>.unter,.menue-punkt:focus-within>.unter,.menue-punkt.offen>.unter{visibility:visible;opacity:1;transition-delay:0s} .menue-punkt:last-child>.unter{left:auto;right:0} .unter a{display:flex;color:var(--text);text-shadow:none;font-size:.90625rem;padding:.5rem .75rem;box-shadow:none} .unter a:hover{background:var(--secondary-soft);color:var(--text)} .menue-rechts{grid-column:3;justify-self:end;flex-direction:row;align-items:center;gap:.75rem;margin:0;padding:0;border:0} .menue-rechts .suche-link{padding:.5rem;color:#fff;text-shadow:0 1px 10px rgb(0 0 0/.55)} .menue-rechts .suche-link span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .menue-rechts .anmelden-knopf{width:auto;height:2.5rem;min-height:0;padding:0 1.2rem;border-radius:.75rem;text-shadow:none;font-size:.8125rem;text-transform:uppercase;letter-spacing:.025em} .menue-rechts .anmelden-knopf:hover{background:#8fb45f;color:#fff} } /* Foto mit dunklem Layer und Wellenkante */ .hero{position:relative;isolation:isolate;overflow:hidden;background:var(--text) url(/assets/hero.jpg) center/cover no-repeat} .hero::before{content:"";position:absolute;inset:0;z-index:-1;background:rgb(122 122 122/var(--ub,.2))} .hero::after{content:"";position:absolute;inset:0 0 auto 0;height:11rem;z-index:-1;background:linear-gradient(to bottom,rgb(58 54 44/.16),transparent)} .hero-text{max-width:56rem;margin:0 auto;min-height:22rem;padding:7rem 1rem 6rem;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff} .hero-text h1{margin:0;font-size:1.9rem;line-height:1.25;font-weight:700;text-shadow:0 2px 18px rgb(0 0 0/.3)} .hero-text p{margin:1.5rem 0 0;max-width:44rem;font-size:1.0625rem;color:rgb(255 255 255/.9);text-wrap:balance} .hero.kompakt .hero-text{justify-content:flex-start;min-height:24rem;padding:8.5rem 1rem 5.5rem} @media(min-width:640px){.hero.kompakt .hero-text{min-height:28rem;padding:11rem 1.5rem 6rem}} @media(min-width:1200px){.hero.kompakt .hero-text{min-height:30rem;padding:12rem 1.5rem 6.5rem}} .welle{position:absolute;left:0;right:0;bottom:-3px;display:block;width:100%;height:auto;color:var(--bg)} @media(min-width:640px){.hero-text{min-height:28rem;padding:9rem 1.5rem 7rem}.hero-text h1{font-size:2.25rem}.hero-text p{font-size:1.1875rem}} @media(min-width:1024px){ .hero-text h1{font-size:3rem} /* Startseite Desktop: "seit CLV 1899" über dem großen Claim – wie am Handy, nur für das Foto statt für den dunklen Kopf eingefärbt (helles, halbtransparentes Weiß mit Schatten wie die übrige Hero-Schrift). */ body.startseite .hero-text .sm-seit{display:flex;justify-content:center;align-items:baseline;gap:2.2rem;margin:0 0 1.4rem;font-size:.95rem;font-weight:500;letter-spacing:.05em;color:rgb(255 255 255/.82);text-shadow:0 1px 10px rgb(0 0 0/.45)} body.startseite .sm-seit .sm-clv{font-size:1.2rem;font-weight:700;letter-spacing:.18em;color:#fff} } .pinsel{display:inline-block;-webkit-box-decoration-break:clone;box-decoration-break:clone;background-repeat:no-repeat;background-position:0 100%;background-size:100% .3em;padding-bottom:.22em} .pinsel+br+.pinsel{margin-top:.2rem} .pinsel-orange{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8 C 60 3, 150 10, 297 4' fill='none' stroke='%23f39200' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E")} .pinsel-gruen{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8 C 60 3, 150 10, 297 4' fill='none' stroke='%23a4c57b' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E")} /* Foto-Köpfe je Seite (wie auf der bisherigen Website). Erzeugt aus den Originalen, Fokus und Abdunklung übernommen. */ .hero.bild-aktuelles{background-image:url(/assets/hero/aktuelles.jpg);background-position:50% 50%;--ub:0.5} .hero.bild-kurzinfos{background-image:url(/assets/hero/kurzinfos.jpg);background-position:50% 50%;--ub:0.15} .hero.bild-ueberuns{background-image:url(/assets/hero/ueberuns.jpg);background-position:51% 38%;--ub:0} .hero.bild-las{background-image:url(/assets/hero/las.jpg);background-position:53% 22%;--ub:0.15} .hero.bild-lehrkraft{background-image:url(/assets/hero/lehrkraft.jpg);background-position:57% 50%;--ub:0.5} .hero.bild-junglehrer{background-image:url(/assets/hero/junglehrer.jpg);background-position:50% 18%;--ub:0.65} .hero.bild-pensionisten{background-image:url(/assets/hero/pensionisten.jpg);background-position:50% 50%;--ub:0.15} .hero.bild-goed{background-image:url(/assets/hero/goed.jpg);background-position:50% 50%;--ub:0.6} .hero.bild-service{background-image:url(/assets/hero/service.jpg);background-position:50% 50%;--ub:0.4} .hero.bild-wegweiser{background-image:url(/assets/hero/wegweiser.jpg);background-position:49% 50%;--ub:0.15} .hero.bild-schuleheute{background-image:url(/assets/hero/schuleheute.jpg);background-position:54% 20%;--ub:0.15} .hero.bild-kontakt{background-image:url(/assets/hero/kontakt.jpg);background-position:55% 50%;--ub:0.5} .hero.bild-kontaktpv{background-image:url(/assets/hero/kontaktpv.jpg);background-position:51% 50%;--ub:0.4} /* Startseite: das Foto füllt etwa drei Viertel des Bildschirms, große Überschrift */ .hero.gross .hero-text{min-height:max(30rem,74vh);padding-top:8rem;padding-bottom:9rem} .hero.gross .hero-text h1{font-size:2.4rem} .hero.gross .welle{transform:scaleY(1.9);transform-origin:bottom} @media(min-width:640px){.hero.gross .hero-text{padding-top:9rem;padding-bottom:10rem}.hero.gross .hero-text h1{font-size:3.4rem}} @media(min-width:1024px){.hero.gross .hero-text h1{font-size:4rem}} /* Inhalt */ main{flex:1;width:100%;max-width:52rem;margin:0 auto;padding:2.25rem 1rem 5rem} @media(min-width:640px){main{padding-top:3.5rem}} .karte{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;box-shadow:0 1px 2px rgb(0 0 0/.05)} @media(min-width:640px){.karte{padding:2.25rem}} .karte+.karte{margin-top:1.5rem} .hinweis{margin:0 0 1.5rem;color:var(--text-muted)} fieldset{border:0;margin:0 0 2rem;padding:0;min-width:0} legend{padding:0;margin:0 0 1rem;font-size:1.15rem;font-weight:600;display:flex;align-items:center;gap:.6rem} legend::before{content:"";width:.5rem;height:1.25rem;border-radius:.25rem;background:var(--secondary)} .raster{display:grid;gap:1rem;grid-template-columns:1fr} @media(min-width:640px){.raster{grid-template-columns:repeat(2,1fr)}.voll{grid-column:1/-1}.drittel{grid-template-columns:repeat(6,1fr)}} @media(min-width:640px){.raster.drittel .z2{grid-column:span 2}.raster.drittel .z3{grid-column:span 3}.raster.drittel .z4{grid-column:span 4}} .feld{display:block;position:relative} .feldkopf{display:flex;align-items:center;gap:.4rem;margin-bottom:.375rem} .feldkopf label{font-size:.875rem;font-weight:500} .info{flex:none;width:1.2rem;height:1.2rem;padding:0;border-radius:50%;border:1.5px solid var(--secondary);background:#fff;color:var(--secondary-hover);font:italic 700 .75rem/1 Georgia,serif;cursor:pointer;display:grid;place-items:center} .info:hover,.info[aria-expanded=true]{background:var(--secondary);color:#fff} .info:focus-visible{outline:3px solid rgb(243 146 0/.4);outline-offset:2px} .infotext{margin:0 0 .6rem;padding:.65rem .9rem;border-radius:.75rem;background:var(--secondary-soft);border:1px solid #f3cf9b;font-size:.85rem;line-height:1.45;color:var(--text)} .infotext[hidden]{display:none} input::placeholder,textarea::placeholder{color:var(--text-soft);opacity:1} .feld .pflicht{display:inline;color:var(--secondary-hover);margin-left:.15rem} .feld small{display:block;margin-top:.3rem;color:var(--text-muted);font-size:.8rem} input[type=text],input[type=password],input[type=email],input[type=tel],input[type=date],input[type=time],select,textarea{width:100%;border:1px solid var(--border);border-radius:.75rem;background:#fff;padding:.75rem 1rem;font:inherit;color:var(--text);outline:none;appearance:none;-webkit-appearance:none} select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23766f5d' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem} textarea{min-height:7.5rem;resize:vertical} input:focus,select:focus,textarea:focus{border-color:var(--secondary);box-shadow:0 0 0 3px rgb(243 146 0/.3)} .hat-fehler input,.hat-fehler select,.hat-fehler textarea{border-color:var(--fehler)} .fehlertext{display:block;margin-top:.3rem;color:var(--fehler);font-size:.85rem;font-weight:500} .haken{display:flex;gap:.75rem;align-items:flex-start;padding:1rem;border:1px solid var(--border);border-radius:.9rem;background:var(--bg);font-size:.9rem;cursor:pointer} .haken+.haken{margin-top:.75rem} .haken input{flex:none;width:1.25rem;height:1.25rem;margin:.1rem 0 0;accent-color:var(--secondary)} .haken.hat-fehler{border-color:var(--fehler);background:var(--fehler-soft)} .haken a{color:var(--secondary-hover);font-weight:500} .meldung{border-radius:.9rem;padding:1rem 1.25rem;margin-bottom:1.5rem;font-size:.95rem} .meldung.fehler{background:var(--fehler-soft);border:1px solid #f0b8b3;color:#7a1a14} .meldung.fehler ul{margin:.4rem 0 0;padding-left:1.2rem} .meldung.ok{background:var(--accent-soft);border:1px solid var(--accent)} .knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:0;border-radius:.9rem;background:var(--secondary);color:#fff;font:inherit;font-weight:600;padding:.85rem 2rem;cursor:pointer;text-decoration:none;transition:background .15s} .knopf:hover{background:var(--secondary-hover)} .knopf:focus-visible{outline:3px solid rgb(243 146 0/.4);outline-offset:2px} .knopf[disabled]{opacity:.6;cursor:wait} .knopf.hell{background:var(--surface-muted);color:var(--text)} .knopf.hell:hover{background:var(--border)} .knopf.klein{padding:.45rem 1rem;font-size:.85rem;border-radius:.65rem} .knopf.rot{background:var(--fehler)} .absenden{margin-top:1.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem} .absenden p{margin:0;font-size:.85rem;color:var(--text-muted);max-width:26rem} .kein-bot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .danke{text-align:center;padding:2.75rem 1.5rem 3rem;border-radius:1.5rem;box-shadow:0 8px 30px rgb(58 54 44/.08)} .danke .haken-gross{width:4rem;height:4rem;border-radius:50%;background:var(--accent-soft);color:#4d7a1f;display:grid;place-items:center;margin:0 auto 1.25rem;font-size:2rem;font-weight:700} .danke h2{margin:0 0 .75rem;font-size:1.6rem} .danke p{margin:.5rem auto;max-width:34rem;color:var(--text-muted)} /* Orange Fußzeile mit V-Kante, Adresse, Symbolen und Rechtlichem */ .fuss{position:relative;margin-top:auto;background:var(--secondary);color:#fff} .fuss-kante{position:absolute;left:0;right:0;top:0;width:100%;height:2rem;transform:translateY(calc(-100% + 1px));color:var(--secondary)} .fuss-innen{max-width:80rem;margin:0 auto;padding:3.5rem 1.25rem 2rem} .fuss-oben{display:flex;flex-direction:column;gap:1.75rem} .fuss-adresse{display:flex;flex-direction:column;gap:.4rem;font-style:normal;font-size:1rem;line-height:1.5} .fuss-adresse strong{font-size:1.25rem;margin-bottom:.15rem} .fuss-adresse a{display:inline-flex;align-items:center;gap:.55rem;width:fit-content;text-underline-offset:4px} .fuss-adresse a:hover{text-decoration:underline} .fuss-zeiten{display:inline-flex;align-items:center;gap:.55rem;margin-top:.35rem} .fuss-symbole{display:flex;flex-wrap:wrap;gap:.75rem;margin:0;padding:0;list-style:none} .fuss-symbole a{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:50%;background:rgb(255 255 255/.18);color:#fff;transition:background .15s,color .15s,transform .15s} .fuss-symbole a:hover{background:#fff;color:var(--secondary-hover);transform:translateY(-2px)} .fuss-symbole a:focus-visible{outline:3px solid #fff;outline-offset:3px} .fuss-unten{display:flex;flex-direction:column;gap:.75rem;margin-top:2.15rem;padding-top:1.1rem;border-top:1px solid rgb(255 255 255/.35);font-size:.9rem} .fuss-unten nav{display:flex;gap:1.5rem;font-weight:500;font-size:.9375rem} .fuss-unten nav a{text-underline-offset:4px} .fuss-unten nav a:hover{text-decoration:underline} .fuss-unten p{margin:0;font-weight:500} @media(min-width:640px){.fuss-kante{height:2.75rem}.fuss-innen{padding:3.9rem 1.5rem 1.95rem}} @media(min-width:768px){.fuss-oben{flex-direction:row;justify-content:space-between;align-items:flex-start}.fuss-symbole{justify-content:flex-end;max-width:22rem}.fuss-unten{flex-direction:row;justify-content:space-between;align-items:center}} /* Verwaltung */ body.admin{background:var(--bg)} .admin-leiste{background:var(--secondary);color:#fff} .admin-leiste div{max-width:100rem;margin:0 auto;padding:.9rem 1rem;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem} .admin-leiste strong{font-size:1.1rem;margin-right:auto} .admin-leiste a,.admin-leiste button{color:#fff;font:inherit;background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:4px;padding:0} /* Rahmen um Seitenleiste + Inhalt: eigenes max-width statt auf
selbst, damit die Leiste danaben Platz hat. */ .admin-rahmen{max-width:100rem;margin:0 auto;padding:1.5rem 1rem 3rem;display:flex;flex-direction:column;align-items:stretch;gap:1.25rem} .admin main{max-width:none;flex:1;min-width:0} .tabelle-rahmen{overflow-x:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)} table{border-collapse:collapse;width:100%;font-size:.9rem} th,td{text-align:left;padding:.7rem 1rem;border-bottom:1px solid var(--border);vertical-align:top} th{background:var(--surface-muted);font-weight:600;white-space:nowrap} tr:last-child td{border-bottom:0} tbody tr:hover{background:#faf9f4} .marke{display:inline-block;border-radius:2rem;padding:.1rem .65rem;font-size:.78rem;font-weight:600;background:var(--surface-muted)} .marke.neu{background:var(--secondary-soft);color:#8a5200} .marke.gut{background:var(--accent-soft);color:#3f6a17} .marke.schlecht{background:var(--fehler-soft);color:var(--fehler)} .werkzeuge{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-bottom:1.25rem} .werkzeuge form{display:flex;gap:.5rem} .werkzeuge input[type=text]{width:16rem} .details{display:grid;grid-template-columns:1fr;gap:.25rem 1.5rem} .details dt{font-size:.8rem;color:var(--text-muted);margin-top:.75rem} .details dd{margin:0;font-weight:500;overflow-wrap:anywhere;white-space:pre-wrap} @media(min-width:640px){.details{grid-template-columns:repeat(2,1fr)}} .login{max-width:26rem;margin:4rem auto} .admin-titel{font-size:1.4rem;margin:0 0 1rem} .marken{margin:0} .schmal{width:auto!important} .umbruch{word-break:break-all} .oben{margin-top:1.5rem} .details .voll{grid-column:1/-1} @media print{.kopf,.hero,.fuss,.admin-leiste,.werkzeuge,.absenden{display:none}} @media(prefers-reduced-motion:reduce){*{transition:none!important}} /* Bereiche der Startseite */ .bereich{margin:0 auto 3rem} .bereich-titel{margin:0 0 1.25rem;font-size:1.5rem;font-weight:600} .bereich-titel.klein{font-size:1.15rem;margin-top:2rem} main.weit,main:has(.breit){max-width:80rem} .kachel-raster{display:grid;gap:1.25rem;grid-template-columns:1fr} @media(min-width:640px){.kachel-raster{grid-template-columns:repeat(2,1fr)}} @media(min-width:1024px){.kachel-raster{grid-template-columns:repeat(3,1fr)}} .kachel{position:relative;display:flex;flex-direction:column;gap:1rem;padding:1.5rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:0 1px 2px rgb(0 0 0/.05);text-decoration:none;transition:transform .15s,border-color .15s,box-shadow .15s} a.kachel:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 8px 24px rgb(58 54 44/.1)} a.kachel:focus-visible{outline:2px solid var(--secondary);outline-offset:2px} .kachel-ikon{display:flex;width:3rem;height:3rem;align-items:center;justify-content:center;border-radius:.75rem;background:var(--accent-soft);color:#8fb45f;transition:background .15s,color .15s} a.kachel:hover .kachel-ikon{background:var(--accent);color:#fff} .kachel-text{flex:1} .kachel-text strong{display:block;font-size:1.1rem;font-weight:600} .kachel-text span{display:block;margin-top:.35rem;font-size:.9375rem;line-height:1.55;color:var(--text-muted)} .kachel-pfeil{align-self:flex-end;color:var(--text-soft);transition:color .15s} a.kachel:hover .kachel-pfeil{color:var(--secondary)} .kachel.inaktiv{opacity:.6;box-shadow:none} .kachel .marke{align-self:flex-start} .cta{display:flex;flex-direction:column;gap:1.25rem;align-items:flex-start;padding:2rem;border-radius:var(--radius);background:var(--accent-soft);border:1px solid var(--accent)} .cta h2{margin:0 0 .25rem;font-size:1.4rem} .cta p{margin:0;color:var(--text-muted)} @media(min-width:640px){.cta{flex-direction:row;align-items:center;justify-content:space-between}} .suchformular{display:flex;gap:.75rem;flex-wrap:wrap} .suchformular input{flex:1;min-width:12rem} /* Verwaltung: Ergänzungen */ .admin-leiste{background:var(--secondary)} .admin-leiste div{gap:.75rem 1.25rem} .admin-marke{display:inline-flex;align-items:center;gap:.75rem;margin-right:auto;text-decoration:none!important} .admin-marke img{height:2rem;width:auto;filter:brightness(0) invert(1)} .admin-marke strong{margin-right:0} .admin-website{display:inline-flex;align-items:center;gap:.4rem} .admin-website .symbol{transform:rotate(45deg)} .admin-wer{opacity:.9;font-size:.9rem} .admin-leiste form{margin:0} /* Verwaltung: Seitenleiste (Computer) – ersetzt die frühere lange Linkliste in der Kopfleiste. "Übersicht" oben, darunter die Bereiche als Gruppen mit ihren Unterpunkten, aktueller Standort deutlich hervorgehoben, damit auf einen Blick klar ist, wo man ist und wie man weiterkommt. Am Handy steckt dieselbe Liste (admin_nav_html()) stattdessen in einem Aufklapp-Menü direkt über dem Inhalt (siehe .admin-nav-mobil). */ .admin-seitenleiste{display:none} .admin-nav-mobil{margin-bottom:1.5rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)} .admin-nav-mobil summary{display:flex;align-items:center;gap:.6rem;padding:.9rem 1.1rem;font-weight:600;cursor:pointer;list-style:none} .admin-nav-mobil summary::-webkit-details-marker{display:none} .admin-nav-mobil summary .symbol{color:var(--secondary)} .admin-nav-mobil[open] summary{border-bottom:1px solid var(--border)} .admin-nav-mobil nav{padding:1rem 1.1rem 1.25rem} .admin-nav-link{display:flex;align-items:center;gap:.55rem;padding:.55rem .75rem;border-radius:.6rem;color:var(--text-muted);text-decoration:none!important;font-size:.92rem;font-weight:500;transition:background .15s,color .15s} .admin-nav-link:hover{background:var(--surface-muted);color:var(--text)} .admin-nav-link.aktiv{background:var(--secondary);color:#fff;font-weight:600} .admin-nav-oben{margin-bottom:1.1rem;font-size:1rem} .admin-nav-gruppe+.admin-nav-gruppe{margin-top:1.1rem} .admin-nav-titel{display:flex;align-items:center;gap:.5rem;margin:0 0 .3rem .75rem;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-soft)} .admin-nav-unter{display:flex;flex-direction:column;gap:.1rem;border-left:2px solid var(--border);margin-left:.75rem;padding-left:.55rem} @media(min-width:900px){ .admin-rahmen{flex-direction:row;align-items:flex-start;gap:2.5rem} .admin-seitenleiste{display:block;flex:0 0 15rem;position:sticky;top:1.25rem} .admin-nav-mobil{display:none} } .nowrap{white-space:nowrap} .gedaempft{color:var(--text-muted);font-size:.85rem} .breit-karte{max-width:52rem} .rechte-liste{display:grid;gap:.6rem;margin-top:.75rem} .rechte-liste .haken{margin:0} .vorlagen{display:flex;flex-wrap:wrap;gap:.5rem} .login code{background:var(--surface-muted);padding:.1rem .35rem;border-radius:.35rem;font-size:.85em} .admin main{max-width:80rem;padding-top:2rem} /* Beitragskarten (Aktuelles, Kurzinfos, Startseite) */ .bereich-kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1rem;margin-bottom:1.25rem} .bereich-kopf .bereich-titel{margin:0} .bereich-kopf a{color:var(--secondary-hover);font-weight:500;text-underline-offset:4px} .beitrag-raster{display:grid;gap:1.25rem;grid-template-columns:1fr} @media(min-width:640px){.beitrag-raster{grid-template-columns:repeat(2,1fr)}} @media(min-width:1024px){.beitrag-raster{grid-template-columns:repeat(3,1fr)}} .beitrag-karte{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:0 1px 2px rgb(0 0 0/.05);text-decoration:none;transition:transform .15s,border-color .15s,box-shadow .15s} .beitrag-karte:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 8px 24px rgb(58 54 44/.1)} .beitrag-karte:focus-visible{outline:2px solid var(--secondary);outline-offset:2px} .karte-bild{display:block;position:relative;aspect-ratio:16/10;background:var(--surface-muted);overflow:hidden} .karte-bild picture{display:contents} .karte-bild img{position:absolute;left:0;top:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover} .karte-bild.leer{display:flex;align-items:center;justify-content:center;color:var(--accent)} .karte-text{display:flex;flex-direction:column;flex:1;gap:.35rem;padding:1.1rem 1.25rem 1.4rem} /* Aktuelles/Kurzinfos: alle Karten einer Reihe gleich hoch, unabhängig von der Textlänge (Bildhöhe ist über aspect-ratio schon gleich) */ .beitrag-raster>.beitrag-karte{height:100%} .karte-datum{font-size:.9rem;font-weight:700;color:var(--gruen-text)} .karte-text strong{font-size:1.05rem;line-height:1.35} .karte-kurz{font-size:.92rem;line-height:1.5;color:var(--text-muted)} /* Kurzinfos: Vorschautext höchstens zwei Zeilen, dann "…" – so sind alle Karten gleich hoch */ .beitrag-karte.kurzinfo .karte-kurz{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden} .seiten-nav{display:flex;gap:.75rem;justify-content:center;margin-top:2rem} .liste-suche{margin-bottom:1.75rem} /* Einzelbeitrag */ .artikel-karte{max-width:70rem;margin:0 auto} @media(min-width:1024px){.artikel-karte{padding:3rem 3.5rem}} .artikel-meta{margin:0 0 .75rem;font-size:.9rem;color:var(--text-muted)} .artikel-meta .datum{color:var(--gruen-text);font-weight:700} .artikel-meta a{color:var(--secondary-hover);font-weight:500} .lead{font-size:1.15rem;line-height:1.6;color:var(--text);font-weight:500} .artikel{font-size:1.02rem;line-height:1.75;overflow-wrap:break-word} .artikel>*:first-child{margin-top:0} .artikel h2,.artikel h3,.artikel h4{line-height:1.3;margin:2rem 0 .6rem} .artikel h2{font-size:1.45rem}.artikel h3{font-size:1.2rem}.artikel h4{font-size:1.05rem} .artikel p{margin:0 0 1rem} .artikel p,.artikel li,.lead{text-align:justify;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word} .artikel ul,.artikel ol{margin:0 0 .8rem;padding-left:1.4rem} .artikel li{margin:.05rem 0;line-height:1.45} .artikel li>p{margin:0} .artikel a{color:var(--secondary-hover);text-underline-offset:3px} .artikel a:hover{color:var(--secondary)} .artikel a.datei{display:inline;color:var(--secondary-hover);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px} .artikel a.datei::before{content:"";display:inline-block;vertical-align:-.2em;width:1.15em;height:1.15em;margin-right:.3em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97f00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8zM14 3v5h5M12 11v6m-3-3l3 3 3-3'/%3E%3C/svg%3E") center/contain no-repeat} .artikel a.datei:hover{color:var(--secondary)} .artikel hr{border:0;border-top:1px solid var(--border);margin:2rem 0} .artikel figure{margin:1.5rem 0} .artikel img{display:block;max-width:100%;height:auto;border-radius:1rem} .artikel figcaption{margin-top:.4rem;font-size:.85rem;color:var(--text-muted)} .artikel .galerie{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin:1.5rem 0} .artikel .galerie figure{margin:0} @media(min-width:640px){.artikel .galerie{grid-template-columns:repeat(3,1fr)}} .artikel table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.95rem} .artikel td,.artikel th{border:1px solid var(--border);padding:.5rem .7rem;text-align:left} .artikel blockquote{margin:1.25rem 0;padding:.25rem 1.25rem;border-left:4px solid var(--accent);color:var(--text-muted)} /* Suchtreffer */ .treffer{list-style:none;margin:0;padding:0;display:grid;gap:1rem} .treffer li{padding:1.1rem 1.25rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);display:flex;flex-direction:column;gap:.25rem} .treffer a{font-weight:600;font-size:1.05rem;text-underline-offset:3px} .treffer-text{font-size:.92rem;color:var(--text-muted);line-height:1.5} /* Import */ .fortschritt{height:.6rem;margin-top:1.25rem;border-radius:1rem;background:var(--surface-muted);overflow:hidden} .fortschritt div{height:100%;width:0;background:var(--accent);transition:width .2s} .import-log{max-height:24rem;overflow:auto;margin:1rem 0 0;padding:1rem;border-radius:.75rem;background:#2b2820;color:#e9e6d8;font:12.5px/1.6 ui-monospace,Menlo,monospace;white-space:pre-wrap} .import-log .warn{color:#f3b45c}.import-log .fehler{color:#ff8a80} /* Verwaltung: Listen, Reiter, Editor */ .reiter{display:flex;gap:.5rem;margin-bottom:1rem} .reiter a{padding:.5rem 1.1rem;border-radius:.75rem;background:var(--surface-muted);text-decoration:none;font-weight:500} .reiter a.aktiv{background:var(--secondary);color:#fff} .aktionen{display:flex;flex-wrap:wrap;gap:.4rem} .inline{display:inline;margin:0} .klein-zahl{width:4.5rem!important;display:inline-block} .editor-karte{max-width:60rem} .radios{display:grid;gap:.5rem} .radios .haken{margin:0;padding:.6rem .9rem} .titelbild-feld{margin:1.25rem 0} .titelbild-hinweis{margin:.15rem 0 .75rem;font-size:.85rem} .titelbild-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem} .titelbild-zeile img{width:9rem;height:5.6rem;object-fit:cover;border-radius:.75rem;border:1px solid var(--border)} .tb-quelle{margin:.6rem 0 0;max-width:26rem} .tb-quelle input{font-size:.9rem} .editor{margin-top:.4rem;border:1px solid var(--border);border-radius:.9rem;background:#fff;overflow:hidden} .editor:focus-within{border-color:var(--secondary);box-shadow:0 0 0 3px rgb(243 146 0/.3)} .editor-leiste{display:flex;flex-wrap:wrap;gap:.25rem;padding:.5rem;background:var(--surface-muted);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:2} .editor-leiste button{border:0;border-radius:.5rem;background:#fff;padding:.35rem .65rem;font:inherit;font-size:.85rem;cursor:pointer;color:var(--text)} .editor-leiste button:hover{background:var(--secondary-soft)} .editor-leiste .trenner{width:1px;background:var(--border);margin:0 .25rem} .editor-feld{min-height:22rem;padding:1.25rem 1.5rem;outline:0} .editor-feld:empty::before{content:"Hier schreiben …";color:var(--text-soft)} [hidden]{display:none!important} /* Vorschau im Admin */ body.vorschau-offen{overflow:hidden} .vorschau-fenster{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;background:#2b2820} .vorschau-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.25rem;padding:.7rem 1rem;background:var(--surface);border-bottom:1px solid var(--border)} .vorschau-leiste .gedaempft{margin-right:auto} .vorschau-wahl{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center} .vorschau-wahl button{border:0;border-radius:.6rem;background:var(--surface-muted);padding:.4rem .85rem;font:inherit;font-size:.88rem;cursor:pointer;color:var(--text)} .vorschau-wahl button.aktiv{background:var(--secondary);color:#fff} .vorschau-wahl .trenner{width:1px;align-self:stretch;background:var(--border);margin:0 .4rem} .vorschau-buehne{flex:1;min-height:0;display:flex;justify-content:center;align-items:stretch;padding:1rem;overflow:auto} .vorschau-rahmen{border:0;background:#fff;border-radius:.6rem;height:100%;box-shadow:0 10px 40px rgb(0 0 0/.4)} .vorschau-rahmen.desktop{width:100%;max-width:1440px} .vorschau-rahmen.tablet{width:820px;max-width:100%} .vorschau-rahmen.handy{width:390px;max-width:100%;border-radius:1.6rem;border:.6rem solid #111} /* Lightbox für Bilder in Beiträgen */ .artikel:not(.editor-feld) img{cursor:zoom-in;transition:opacity .15s} .artikel:not(.editor-feld) img:hover{opacity:.92} .artikel:not(.editor-feld) img:focus-visible{outline:3px solid var(--secondary);outline-offset:3px} body.lightbox-offen{overflow:hidden} .lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgb(20 18 14/.94)} .lightbox[hidden]{display:none} .lb-bild{margin:0;display:flex;flex-direction:column;align-items:center;gap:.75rem;max-width:92vw} .lb-bild img{display:block;max-width:92vw;max-height:82vh;width:auto;height:auto;border-radius:.6rem;box-shadow:0 10px 50px rgb(0 0 0/.5);object-fit:contain} .lb-bild figcaption{color:#e9e6d8;font-size:.9rem;text-align:center;min-height:1.2em} .lb-zu,.lb-pfeil{position:absolute;border:0;border-radius:50%;background:rgb(255 255 255/.14);color:#fff;cursor:pointer;line-height:1;transition:background .15s} .lb-zu:hover,.lb-pfeil:hover{background:rgb(255 255 255/.3)} .lb-zu:focus-visible,.lb-pfeil:focus-visible{outline:3px solid #fff;outline-offset:2px} .lb-zu{top:1rem;right:1rem;width:3rem;height:3rem;font-size:2rem} .lb-pfeil{top:50%;transform:translateY(-50%);width:3.25rem;height:3.25rem;font-size:2.4rem;padding-bottom:.2rem} .lb-zurueck{left:1rem}.lb-weiter{right:1rem} .lightbox.einzeln .lb-pfeil{display:none} @media(max-width:640px){.lb-pfeil{top:auto;bottom:1.25rem;transform:none;width:2.75rem;height:2.75rem}.lb-zurueck{left:1rem}.lb-weiter{right:1rem}.lb-bild img{max-height:76vh}} /* Kurzinfos: Bild quadratisch (1:1) neben dem Text, wie bisher auf der Website */ @media(min-width:900px){.beitrag-raster.kurz{grid-template-columns:repeat(2,1fr)}} @media(min-width:640px) and (max-width:899px){.beitrag-raster.kurz{grid-template-columns:1fr}} .beitrag-karte.kurzinfo{flex-direction:row;align-items:stretch} .beitrag-karte.kurzinfo .karte-bild{flex:none;width:7rem;aspect-ratio:1/1;align-self:flex-start;margin:1rem 0 1rem 1rem;border-radius:.9rem} .beitrag-karte.kurzinfo .karte-text{padding:1.1rem 1.25rem 1.2rem;min-width:0} @media(min-width:480px){.beitrag-karte.kurzinfo .karte-bild{width:9.5rem}} /* Handy (unter 640 px): ALLE Schriftgrößen sind rem-basiert und schrumpfen gemeinsam um 12,5 % (Basis 14 statt 16 px). Nur Eingabefelder bleiben bei 16 px, sonst zoomt iPhone-Safari beim Antippen hinein. */ @media(max-width:639.98px){ html{font-size:87.5%} input,select,textarea{font-size:16px} .hero-text h1{font-size:1.45rem} .hero.kompakt .hero-text{min-height:14rem;padding:5.5rem 1rem 2.5rem} .hero-text p{margin-top:.9rem} .hero.gross .hero-text{min-height:max(24rem,62vh);padding:6.5rem 1rem 6.5rem} .hero.gross .hero-text h1{font-size:1.9rem} } /* Beiträge: schmaler Foto-Streifen ohne Überschrift, der Titel steht über dem Text */ .hero.schmal .hero-text{min-height:12rem;padding:0} @media(min-width:1200px){.hero.schmal .hero-text{min-height:14rem}} @media(max-width:639.98px){.hero.schmal .hero-text{min-height:7.5rem}} .artikel-titel{max-width:52rem;margin:0 auto 2.25rem;text-align:center;font-size:2.4rem;line-height:1.35;font-weight:700;overflow-wrap:break-word;hyphens:auto} .artikel-titel .pinsel{display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:.12em} @media(max-width:639.98px){.artikel-titel{font-size:1.6rem;margin-bottom:1.5rem}} /* Seiteninhalt (aus dem Editor) und Personen-Karten */ .seiteninhalt .artikel>p,.seiteninhalt .artikel>h2,.seiteninhalt .artikel>h3,.seiteninhalt .artikel>h4,.seiteninhalt .artikel>ul,.seiteninhalt .artikel>ol,.seiteninhalt .artikel>blockquote,.seiteninhalt .artikel>hr{margin-left:auto;margin-right:auto} .seiteninhalt .artikel>h2{text-align:center;margin-top:2.5rem} .seiteninhalt .artikel>p:has(>a.knopf){text-align:center} .seiteninhalt .artikel a.knopf{color:#fff;text-decoration:none;font-weight:600} .seiteninhalt .artikel a.knopf.hell{color:var(--text)} .person-raster{display:grid;gap:1.5rem;grid-template-columns:1fr;margin:2rem 0} @media(min-width:640px){.person-raster.karten{grid-template-columns:repeat(2,1fr)}} @media(min-width:1024px){.person-raster.karten{grid-template-columns:repeat(3,1fr)}} .person{display:flex;flex-direction:column;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 1px 2px rgb(0 0 0/.05);text-align:left} .person-inhalt{display:flex;flex-direction:column} .person-foto{aspect-ratio:4/5;background:var(--surface-muted);overflow:hidden} .person-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%;border-radius:0} .person-platz{display:flex;width:100%;height:100%;align-items:center;justify-content:center;color:var(--accent)} .person-text{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;padding:1.25rem 1.4rem 1.5rem} .person-text h3{margin:0;font-size:1.2rem;line-height:1.3} .person-funktion{margin:0;color:var(--secondary-hover);font-weight:600;font-size:.95rem} .person-zeile{display:flex;align-items:center;gap:.45rem;margin:0;font-size:.92rem;overflow-wrap:anywhere;color:var(--text-muted)} .person-zeile a{color:inherit;text-decoration:none} .person-zeile a:hover{color:var(--secondary-hover);text-decoration:underline} .person-fehlt{opacity:.5} .person-text .knopf{margin-top:.6rem} /* Endloses Karussell für Personenkarten (Präsidium, Junglehrer-Team): app.js baut das nur auf, wenn mehr Personen da sind, als auf einen Blick passen (Markierung "karussell-aktiv") – sonst bleibt es beim normalen Grid oben. Pfeile stehen über den Karten, Wischen/Ziehen per Maus und Finger geht zusätzlich. */ .person-raster.karten.karussell-aktiv{display:block;position:relative;overflow:hidden} @media(min-width:640px){ .person-raster.karten.karussell-aktiv{--peek:10%;padding:0 var(--peek);-webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--peek),#000 calc(100% - var(--peek)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 var(--peek),#000 calc(100% - var(--peek)),transparent 100%)} } @media(min-width:1024px){.person-raster.karten.karussell-aktiv{--peek:7%}} .person-karussell-bahn{display:flex;gap:12px;touch-action:pan-y;cursor:grab} .person-karussell-bahn:active{cursor:grabbing} .person-karussell-bahn,.person-karussell-bahn img{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none} .person-karussell-bahn>*{flex:0 0 100%} .person-karussell-bahn [aria-hidden="true"]{pointer-events:none} @media(min-width:640px){.person-karussell-bahn>*{flex:0 0 calc(50% - 6px)}} @media(min-width:1024px){.person-karussell-bahn>*{flex:0 0 calc((100% - 24px)/3)}} .person-karussell-pfeile{display:flex;justify-content:flex-end;gap:.6rem;margin:0 0 1rem} .person-karussell-pfeil{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;transition:background .15s,color .15s,border-color .15s} .person-karussell-pfeil:hover{background:var(--accent);color:#fff;border-color:var(--accent)} .person-karussell-pfeil svg{width:1.15rem;height:1.15rem} @media(max-width:639.98px){.person-karussell-pfeile{display:none}} /* Seiten "Das Präsidium", "CLV-FCG Junglehrer" und "Pensionisten" (body-Klasse personen-seite): gleicher, kompakterer Kartenaufbau + einheitlicher Abstandsrhythmus auf beiden Seiten (siehe body-Klasse in seite.php) – die generischen .person-Regeln oben bleiben für andere "karten"-Seiten (z. B. Personalvertretung) unverändert. Am Handy ist das Foto bewusst eher quadratisch (statt hochformatig), damit Foto + weißer Textbereich bei beiden Seiten gleich aussehen. */ body.personen-seite .person-raster.karten{gap:20px} body.personen-seite .person-inhalt{flex:1} body.personen-seite .person-foto{aspect-ratio:1/1;height:auto} body.personen-seite .person-text{flex:1;padding:20px 22px;gap:.35rem} body.personen-seite .person-text h3{font-size:1.05rem} body.personen-seite .person-zeile{font-size:.85rem} body.personen-seite .person-text .knopf{margin-top:auto;align-self:flex-start;padding:.6rem 1.4rem;font-size:.92rem;order:5} /* Reihenfolge hier: Name -> Telefon -> Mail -> Button (andere "karten"-Seiten wie Personalvertretung bleiben bei Mail vor Telefon, siehe personen.php – nur visuell per order getauscht, damit deren HTML unangetastet bleibt) */ body.personen-seite .person-zeile.tel{order:2} body.personen-seite .person-zeile.mail{order:3} /* Lange Mail-Adressen (z. B. "bernhard.prieler-preiss@bildung.gv.at") noch etwas kleiner, damit sie eher in eine Zeile passen statt umzubrechen. */ body.personen-seite .person-zeile.mail{font-size:.8rem} /* Fehlende Angabe (kein Telefon/keine Mail): Zeile auf diesen Seiten nicht zeigen, statt „–“. */ body.personen-seite .person-zeile:has(.person-fehlt){display:none} @media(max-width:639.98px){ body.seite-las main{padding-left:24px;padding-right:24px} } @media(min-width:640px){ body.personen-seite .person-raster.karten{grid-template-columns:repeat(2,1fr);gap:22px} body.personen-seite .person-foto{aspect-ratio:4/5;height:auto} } @media(min-width:1024px){body.personen-seite .person-raster.karten{grid-template-columns:repeat(3,1fr)}} /* Handy: Personen-Karten als Stapel zum seitlichen Wischen – die erste Karte steht ganz da, die nächste schaut am Rand heraus (gleiche Technik wie "Aktuelles"/"Kurzinfos" auf der Startseite, reines CSS-Scroll-Snap). */ @media(max-width:639.98px){ body.personen-seite{--rand:1rem} body.seite-las{--rand:24px} body.personen-seite .seiteninhalt .artikel>.person-raster.karten{display:flex;gap:.9rem;overflow-x:auto;margin-left:calc(-1 * var(--rand));margin-right:calc(-1 * var(--rand));padding:.25rem var(--rand) .9rem;scroll-snap-type:x mandatory;scroll-padding-left:var(--rand);-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain} body.personen-seite .seiteninhalt .artikel>.person-raster.karten::-webkit-scrollbar{display:none} body.personen-seite .person-raster.karten>.person{flex:0 0 84%;scroll-snap-align:start} } /* "Der CLV": Landesausschuss-Gruppenfoto (mit eingeblendetem Text, weiß auf dunklerem Grün) als erste Kachel in derselben Kartenreihe wie die Präsidiumsmitglieder – gleich hoch wie die Personenkarten daneben, aber im echten Seitenverhältnis des Fotos (3:2, siehe Originaldatei) und dadurch deutlich breiter, damit die ganze Gruppe zu sehen ist und niemand abgeschnitten wird. Auch am Computer per Karussell durchklickbar (app.js). Wellenschrift und Bildband folgen danach (siehe die Verschiebung oben in bausteine_rendern). */ body.seite-ueberuns .praesidium-karten{margin-top:3rem} body.seite-ueberuns .praesidium-karten .person-raster.karten{margin:0 0 3.5rem} body.seite-ueberuns .praesidium-karten .person-inhalt{flex:1} body.seite-ueberuns .praesidium-karten .person-foto{aspect-ratio:1/1;height:auto} body.seite-ueberuns .praesidium-karten .person-text{flex:1;padding:20px 22px;gap:.35rem} body.seite-ueberuns .praesidium-karten .person-text h3{font-size:1.05rem} body.seite-ueberuns .praesidium-karten .person-zeile{font-size:.85rem} body.seite-ueberuns .praesidium-karten .person-zeile.mail{font-size:.8rem} body.seite-ueberuns .praesidium-karten .person-text .knopf{margin-top:auto;align-self:flex-start;padding:.6rem 1.4rem;font-size:.92rem;order:5} body.seite-ueberuns .praesidium-karten .person-zeile.tel{order:2} body.seite-ueberuns .praesidium-karten .person-zeile.mail{order:3} body.seite-ueberuns figure.landesausschuss-kachel{position:relative;margin:0;aspect-ratio:3/2;border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 2px rgb(0 0 0/.05);background:var(--surface-muted)} .landesausschuss-kachel img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%;border-radius:0} figcaption.landesausschuss-spruch{position:absolute;left:.75rem;right:auto;bottom:.75rem;width:max-content;max-width:calc(100% - 1.5rem);margin:0;padding:.55rem .75rem;background:var(--accent);color:#fff;font-weight:800;font-size:.92rem;line-height:1.25;border-radius:.4rem;box-shadow:0 2px 8px rgb(0 0 0/.2)} /* Textbereich der ersten Kachel (Gruppenfoto) – nur am Handy sichtbar (dort ersetzt er die grüne Bildunterschrift, siehe Media Query unten); am Computer bleibt es beim reinen Foto mit Bildunterschrift. */ .landesausschuss-kachel .person-text{display:none} /* Im Karussell: nicht auf die normale Kachel-Breite zwingen, sondern die Höhe der Reihe übernehmen (flex stretch) und die Breite daraus über das Seitenverhältnis ergeben – dadurch wird sie automatisch deutlich breiter. */ .person-karussell-bahn>.landesausschuss-kachel{flex:0 0 auto;width:auto;aspect-ratio:3/2;align-self:flex-start} body.seite-ueberuns .praesidium-karten .person-karussell-bahn{align-items:flex-start} @media(min-width:640px){body.seite-ueberuns .praesidium-karten .person-raster.karten{gap:20px}} /* Der generische "Peek"-Rand (--peek, siehe oben) ist links wie rechts gleich breit, aber nur rechts wird die Lücke von der nächsten (angeschnittenen) Kachel gefüllt – links bleibt sie bei der breiten Fotokachel als Leerraum sichtbar. Hier deshalb nur rechts ein Peek/Verlauf, links beginnt das Foto bündig mit dem Inhalt. */ @media(min-width:640px){ body.seite-ueberuns .praesidium-karten .person-raster.karten.karussell-aktiv{ padding-left:0; -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - var(--peek)),transparent 100%); mask-image:linear-gradient(to right,#000 0,#000 calc(100% - var(--peek)),transparent 100%); } } @media(max-width:639.98px){ body.seite-ueberuns{--rand:1rem} body.seite-ueberuns .praesidium-karten .person-raster.karten{display:flex;gap:.9rem;overflow-x:auto;margin:0 calc(-1 * var(--rand)) 2.5rem;padding:.25rem var(--rand) .9rem;scroll-snap-type:x mandatory;scroll-padding-left:var(--rand);-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain} body.seite-ueberuns .praesidium-karten .person-raster.karten::-webkit-scrollbar{display:none} body.seite-ueberuns .praesidium-karten .person-raster.karten>.person{flex:0 0 84%;scroll-snap-align:start} /* Erste Kachel (Gruppenfoto): wie eine Personenkarte aufgebaut (Foto oben, Text darunter), nur das Bildverhältnis ist ein anderes – hier soll die ganze Gruppe zu sehen sein statt eines einzelnen Gesichts. Die grüne Bildunterschrift (Desktop-Kachel) weicht dafür einem echten Textbereich, damit alle Kacheln gleich hoch sind. */ body.seite-ueberuns .praesidium-karten .person-raster.karten>.landesausschuss-kachel{flex:0 0 84%;height:auto;aspect-ratio:auto;display:flex;flex-direction:column;scroll-snap-align:start} body.seite-ueberuns .praesidium-karten .person-raster.karten>.landesausschuss-kachel img{aspect-ratio:16/9;height:auto;flex:none} body.seite-ueberuns .praesidium-karten .person-raster.karten>.landesausschuss-kachel figcaption.landesausschuss-spruch{display:none} body.seite-ueberuns .praesidium-karten .person-raster.karten>.landesausschuss-kachel .person-text{display:flex} } /* Einheitlicher Rhythmus: Abschnitt -> Überschrift -> Text -> Karten/Bild -> nächster Abschnitt. Jede Überschrift bekommt denselben, spürbaren Abstand zum Vorherigen (auch "Das Präsidium", seit die doppelte Zwischenüberschrift darüber entfernt wurde – sonst klebt sie direkt am Einleitungstext). */ body.seite-las .seiteninhalt .artikel>h2{margin:48px 0 8px} body.seite-las .seiteninhalt .artikel>h2+p{margin-top:0} body.seite-las .seiteninhalt .artikel>p.lg-hinweis{margin-bottom:24px} body.seite-las .seiteninhalt .artikel>p:has(+figure){max-width:42rem;margin:0 auto 24px;text-align:center;color:var(--text-muted);font-size:.95rem} body.seite-las .seiteninhalt .artikel>.person-raster{margin:0 0 40px} /* Einleitungstext ganz oben (vor "Das Präsidium"): gleiche betonte, zentrierte Optik wie die Einleitung auf "Der CLV" – keine eigene Zwischenüberschrift mehr davor (die stand schon als Unterzeile im Hero). */ body.seite-las .seiteninhalt .artikel>p:has(+p), body.seite-las .seiteninhalt .artikel>p:has(+h2){max-width:52rem;margin:0 auto 1rem;text-align:center;font-size:1.08rem;line-height:1.6;color:#7a7a7a;font-weight:500} /* Gruppenfoto über die gesamte Inhaltsbreite; Ausschnitt knapp unter dem oberen Rand gewählt (nicht mittig), damit bei mehrreihigen Gruppenfotos die Köpfe der hinteren Reihe sichtbar bleiben, aber nicht zu viel Platz über den Köpfen frei bleibt (unten wird stattdessen etwas abgeschnitten). */ body.seite-las .seiteninhalt .artikel>figure{margin:0} body.seite-las .seiteninhalt .artikel>figure img{width:100%;height:auto;max-height:26rem;object-fit:cover;object-position:50% 18%} @media(min-width:640px){body.seite-las .seiteninhalt .artikel>figure img{max-height:30rem}} @media(min-width:640px){ body.seite-las .seiteninhalt .artikel>h2{margin-top:80px;margin-bottom:14px} body.seite-las .seiteninhalt .artikel>p.lg-hinweis,body.seite-las .seiteninhalt .artikel>p:has(+figure){margin-bottom:30px} body.seite-las .seiteninhalt .artikel>.person-raster{margin-bottom:68px} } /* Seite "Deine Junglehrenden-Vertretung": Zitat als Blickfang, Themen-Kacheln, Team mit Zitat je Karte. Gleicher Abstands-Rhythmus wie "Das Präsidium" (siehe body.seite-las oben), nur die zusätzlichen Bausteine kommen dazu. */ body.seite-junglehrer .seiteninhalt .artikel>h2,body.seite-pensionisten .seiteninhalt .artikel>h2,body.seite-pv .seiteninhalt .artikel>h2{margin:48px 0 8px} body.seite-junglehrer .seiteninhalt .artikel>h2+p,body.seite-pensionisten .seiteninhalt .artikel>h2+p,body.seite-pv .seiteninhalt .artikel>h2+p{margin-top:0} body.seite-junglehrer .seiteninhalt .artikel>p.lg-hinweis,body.seite-pensionisten .seiteninhalt .artikel>p.lg-hinweis,body.seite-pv .seiteninhalt .artikel>p.lg-hinweis{margin-bottom:24px;font-size:1.05rem} body.seite-junglehrer .seiteninhalt .artikel>.kachel-raster,body.seite-pensionisten .seiteninhalt .artikel>.kachel-raster,body.seite-pv .seiteninhalt .artikel>.kachel-raster{margin:0 0 40px} body.seite-junglehrer .seiteninhalt .artikel>.person-raster,body.seite-pensionisten .seiteninhalt .artikel>.person-raster,body.seite-pv .seiteninhalt .artikel>.person-raster{margin:0 0 40px} @media(min-width:640px){ body.seite-junglehrer .seiteninhalt .artikel>h2,body.seite-pensionisten .seiteninhalt .artikel>h2,body.seite-pv .seiteninhalt .artikel>h2{margin-top:80px;margin-bottom:14px} body.seite-junglehrer .seiteninhalt .artikel>p.lg-hinweis,body.seite-pensionisten .seiteninhalt .artikel>p.lg-hinweis,body.seite-pv .seiteninhalt .artikel>p.lg-hinweis{margin-bottom:30px} body.seite-junglehrer .seiteninhalt .artikel>.kachel-raster,body.seite-pensionisten .seiteninhalt .artikel>.kachel-raster,body.seite-pv .seiteninhalt .artikel>.kachel-raster{margin-bottom:56px} body.seite-junglehrer .seiteninhalt .artikel>.person-raster,body.seite-pensionisten .seiteninhalt .artikel>.person-raster,body.seite-pv .seiteninhalt .artikel>.person-raster{margin-bottom:68px} } /* Seite "Pensionisten": Einleitungstext größer, dunkelgrau und mittig, Download-Knopf, das aktuelle Programm als große Bilder (Klick = Vollbild-Ansicht, siehe Lightbox in app.js), darunter die Ansprechpartner-Karten. */ body.seite-pensionisten .seiteninhalt .artikel>p.lead,body.seite-pv .seiteninhalt .artikel>p.lead{max-width:46rem;margin:0 auto 1rem;text-align:center;hyphens:manual;-webkit-hyphens:manual;font-size:1.15rem;line-height:1.6;color:#6b6b6b;font-weight:600} @media(min-width:900px){ /* Breiter als bisher (die Seitenspalte ist hier 80rem breit), damit sich jeder der beiden Absätze auf zwei Zeilen ausgeht */ body.seite-pensionisten .seiteninhalt .artikel>p.lead,body.seite-pv .seiteninhalt .artikel>p.lead{max-width:72rem;font-size:1.1rem;text-wrap:balance} } /* Überschrift direkt vor den Personen-Karten: etwas mehr Luft als sonst (Junglehrer und Pensionisten) */ body.seite-junglehrer .seiteninhalt .artikel>h2:has(~.person-raster),body.seite-pensionisten .seiteninhalt .artikel>h2:has(~.person-raster),body.seite-pv .seiteninhalt .artikel>h2:has(~.person-raster){margin-bottom:24px} @media(min-width:640px){body.seite-junglehrer .seiteninhalt .artikel>h2:has(~.person-raster),body.seite-pensionisten .seiteninhalt .artikel>h2:has(~.person-raster){margin-bottom:36px}} body.seite-pensionisten .seiteninhalt .artikel>p:has(>a.knopf){margin:1.75rem 0 2.5rem} body.seite-pensionisten .artikel .galerie{grid-template-columns:1fr;max-width:52rem;margin:0 auto 40px;gap:20px} body.seite-pensionisten .artikel .galerie img{display:block;width:100%;height:auto;border-radius:var(--radius);box-shadow:0 2px 12px rgb(0 0 0/.12);cursor:zoom-in} @media(min-width:640px){ body.seite-pensionisten .artikel .galerie{grid-template-columns:repeat(2,1fr);margin-bottom:56px} } /* Am Handy: die beiden Programm-Seiten nebeneinander zum Durchwischen (die nächste Seite schaut am Rand heraus) */ @media(max-width:639.98px){ body.seite-pensionisten .artikel .galerie{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:12px;padding:4px 2px 12px} body.seite-pensionisten .artikel .galerie::-webkit-scrollbar{display:none} body.seite-pensionisten .artikel .galerie figure{flex:0 0 88%;scroll-snap-align:start} } /* Zitat: bewusst groß und als Blickfang direkt unter dem Kopfbild, wie schon auf der bisherigen Website. */ .artikel blockquote.jule-zitat{max-width:68rem;margin:0 auto 1.75rem;padding:0 1rem;border-left:0;font-size:1.6rem;line-height:1.45;font-style:italic;font-weight:600;text-align:center;color:var(--secondary)} .jule-zitat::before{content:"„"} .jule-zitat::after{content:"“"} @media(min-width:640px){.artikel blockquote.jule-zitat{font-size:2.25rem;margin-bottom:2.25rem}} /* Info-Kacheln zentriert statt linksbündig, wenn die letzte Zeile nicht ganz voll ist (z. B. 5 Kacheln in einem Raster mit mehr Spalten) – per flex-wrap statt Grid, damit unvollständige Zeilen mittig stehen. */ .kachel-raster.mitte{display:flex;flex-wrap:wrap;justify-content:center} .kachel-raster.mitte .kachel{flex:0 0 calc(50% - .45rem)} @media(min-width:640px){.kachel-raster.mitte .kachel{flex:0 0 calc(33.333% - .6rem)}} @media(min-width:1024px){.kachel-raster.mitte .kachel{flex:0 0 11rem}} .seiteninhalt .artikel>p.jule-link{text-align:center;margin-bottom:2.5rem} @media(min-width:640px){.seiteninhalt .artikel>p.jule-link{margin-bottom:3rem}} /* Info-Kacheln (kein Link, nur Text) bekommen trotzdem den Hover-Effekt der klickbaren Kacheln, damit die Fläche lebendig/interaktiv wirkt. */ .kachel:hover .kachel-ikon{background:var(--accent);color:#fff} /* Zitat auf der Team-Karte: kursiv, gedämpft, zwischen Funktion und Kontaktzeilen. */ .person-zitat{margin:.35rem 0 .5rem;font-style:italic;font-size:.88rem;line-height:1.45;color:var(--text-muted)} /* Gruppen mit Bezirksbild: Bild links, Person rechts */ .person-raster.bezirke{grid-template-columns:1fr} .person.mit-bezirk{flex-direction:column} .person-bezirk{position:relative;isolation:isolate;overflow:hidden;height:12rem} /* Ausschnitt (eigener Fokuspunkt für Desktop/Handy, siehe Verwaltung) wird per JS positioniert (ausschnitt() in app.js), genau wie beim Bildband – object-position rechnet den Bildausschnitt anders als die Vorschau in der Verwaltung und lag deshalb bei einigen Fotos daneben. So stimmen Vorschau und Website exakt überein. */ /* max-width:none + keine Rundung am Bild selbst: sonst kappt die allgemeine Bild-Regel (max-width:100%) die per JS berechnete Breite (Foto wird gestaucht, je nach Seitenverhältnis unterschiedlich) und rundet nur das Bild statt den Rahmen. */ .person-bezirk img{display:block;position:absolute;inset:0;width:100%;height:100%;max-width:none;border-radius:0;object-fit:cover} @media(min-width:800px){ .person.mit-bezirk{flex-direction:row;align-items:stretch} /* feste Anteile (55 % Foto / 45 % Person), unabhängig von der Textlänge (lange Mailadressen) – alle Bezirks-Fotos gleich breit */ .person.mit-bezirk .person-bezirk{flex:0 0 55%;max-width:55%;min-width:0;height:auto;min-height:27rem} /* Rundung sitzt am Rahmen: bei allen Bezirks-Fotos gleich, auch rechts unten/oben */ .person.mit-bezirk .person-bezirk{border-radius:var(--radius)} /* Einzelfoto/Portrait: kompakt, eigenes Seitenverhältnis, senkrecht mittig in der vom großen Teamfoto vorgegebenen Kartenhöhe – nicht selbst gestreckt, nicht oben klebend. */ .person.mit-bezirk .person-inhalt{flex:1 1 0;min-width:0;flex-direction:row;align-items:center;gap:1.3rem;padding:1.2rem 1.4rem} .person.mit-bezirk .person-foto{flex:none;width:9.5rem;border-radius:.8rem} .person.mit-bezirk .person-text{padding:0;gap:.4rem} .person.mit-bezirk .person-text h3{font-size:1.2rem} .person.mit-bezirk .person-funktion{font-size:1rem} .person.mit-bezirk .person-zeile{font-size:.98rem} } /* Editor: Platzhalter für Personengruppen */ .editor-feld .personen-block{margin:1rem 0;padding:1rem 1.25rem;border:2px dashed var(--accent);border-radius:.9rem;background:var(--accent-soft);text-align:center;color:var(--text-muted);user-select:all} .editor-feld .personen-block::before{content:"👥 Personen: " attr(data-name);font-weight:600} .editor-feld .personen-block:not([data-name])::before{content:"👥 Personengruppe: " attr(data-gruppe)} .editor-leiste select{border:0;border-radius:.5rem;background:#fff;padding:.35rem .5rem;font:inherit;font-size:.85rem;max-width:13rem} /* Verwaltung: Personen und Gruppen */ .mini-foto{width:2.6rem;height:3.2rem;object-fit:cover;object-position:50% 20%;border-radius:.5rem;display:block;background:var(--surface-muted)} .mini-foto.leer{display:inline-block} .inaktiv-zeile{opacity:.6} .gruppen-karte{margin-bottom:1.5rem;padding:1.25rem 1.5rem} .gruppen-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 1.5rem;align-items:center} .gruppen-form{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center} .gruppen-form input[type=text]{width:16rem} .gruppen-form select{width:auto;min-width:12rem} .gruppen-form.dazu{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)} .gruppen-werkzeuge{display:flex;gap:.35rem;align-items:center} .pfeil-knopf{border:0;border-radius:.5rem;background:var(--surface-muted);width:2rem;height:2rem;cursor:pointer;font:inherit;color:var(--text)} .pfeil-knopf:hover{background:var(--secondary-soft)} .mitglieder-liste{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.4rem} .mitglieder-liste li{display:flex;align-items:center;gap:.9rem;padding:.4rem .6rem;border:1px solid var(--border);border-radius:.75rem;background:var(--bg)} .mitglied-name{flex:1;min-width:0} .mitglied-details{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-top:.35rem} .mitglied-details input[type=text]{width:16rem;padding:.4rem .7rem;font-size:.85rem} .klein-bildfeld{display:inline-flex;align-items:center;gap:.4rem} .klein-bildfeld img{width:4rem;height:2.5rem;object-fit:cover;border-radius:.4rem;border:1px solid var(--border)} /* Bildfokus fürs Bezirksbild: kompakte Variante des Ausschnitt-Werkzeugs, eigene Zeile in der Mitgliederliste. Desktop- und Handy-Ausschnitt nebeneinander (bei schmalem Fenster untereinander), unabhängig einstellbar. */ .fokus-paar{flex:0 0 100%;display:flex;flex-wrap:wrap;gap:1rem;margin-top:.4rem} .fokus-eins{flex:1 1 15rem;max-width:18rem} .fokus-eins>small{display:block;margin-bottom:.3rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:.72rem} .klein-fokus .fokus-feld{max-width:15rem} /* Startseite: Willkommen – große Überschrift, Wörter, Knopf; rechts Teamfoto, davor die Blume */ .willkommen{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center;max-width:84rem;margin:0 auto;padding:3.5rem 1.25rem 3rem;overflow-x:clip} .willkommen-text{display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem} .willkommen-titel{margin:0;font-size:2.6rem;line-height:1.08;font-weight:700;letter-spacing:-.01em;color:#7a7a7a} .willkommen-titel .zeile{display:block} .willkommen-titel b{color:var(--secondary);font-weight:800} .willkommen-unter{margin:0;font-size:1.15rem;font-weight:500;color:#7a7a7a;line-height:1.45} .willkommen-beschreibung{margin:0;max-width:30rem;font-size:1rem;font-weight:400;color:#8f8c80;line-height:1.6} .willkommen-worte{display:block;position:relative;z-index:3;width:100%;max-width:26rem;height:auto;margin:.5rem 0 .25rem} .willkommen-text p{margin:0} .knopf.gross{padding:1.15rem 2.75rem;font-size:1rem;letter-spacing:.04em;text-transform:uppercase;font-weight:500;border-radius:.4rem} .willkommen-bild{position:relative} .willkommen-bild figure{margin:0} .willkommen-bild figure img{display:block;width:100%;height:auto;aspect-ratio:1.36/1;object-fit:cover;object-position:50% 40%;border-radius:1.5rem;cursor:zoom-in} .willkommen-blume{display:none} @media(min-width:900px){ /* Etwas kompakter als zuvor (rund 15–20 % weniger Höhe oben/unten) – zwischen Hero-Welle, CLV-Vorstellung und "Aktuelles" steckte zu viel Leerraum. */ .willkommen{grid-template-columns:1fr 1.55fr;gap:4.5rem;padding:2.75rem 2rem 5.75rem} .willkommen-titel{font-size:2.9rem} .willkommen-unter{font-size:1.2rem} .willkommen-beschreibung{font-size:1.05rem} .willkommen-blume{display:block;position:absolute;right:100%;margin-right:-2.2rem;top:-1.5%;height:103%;width:auto;pointer-events:none;z-index:1} } @media(min-width:1200px){.willkommen{gap:5.5rem}.willkommen-titel{font-size:3.3rem}.willkommen-unter{font-size:1.3rem}} @media(max-width:639.98px){.willkommen-titel{font-size:2.4rem}} /* Startseite: kleine Kacheln – nur Symbol auf grünem Grund und Titel */ .kachel-raster.klein{grid-template-columns:repeat(2,1fr);gap:.9rem} @media(min-width:640px){.kachel-raster.klein{grid-template-columns:repeat(3,1fr)}} @media(min-width:1024px){.kachel-raster.klein{grid-template-columns:repeat(6,1fr);gap:1rem}} .kachel-raster.klein .kachel{flex-direction:column;align-items:center;justify-content:center;gap:.6rem;padding:.85rem .75rem;text-align:center;border-radius:1.1rem} .kachel-raster.klein .kachel-ikon{width:3.1rem;height:3.1rem;border-radius:.9rem} .kachel-raster.klein .kachel-text{flex:none} .kachel-raster.klein .kachel-text strong{font-size:.98rem;line-height:1.3} a.kachel:hover .kachel-ikon{background:var(--accent);color:#fff} /* So sind wir organisiert: Foto mit Parallax-Effekt, dunkle Überlagerung, weißer Text */ .organisiert{position:relative;isolation:isolate;overflow:hidden;border-radius:1.5rem;background:#7a7a7a} .organisiert-bild{position:absolute;left:0;right:0;top:-35%;height:170%;z-index:-2;background:url(/assets/start/organisiert.jpg) 50% 30%/cover no-repeat;will-change:transform} .organisiert::before{content:"";position:absolute;inset:0;z-index:-1;background:rgb(122 122 122/.85)} .organisiert-inhalt{display:grid;grid-template-columns:1fr;gap:2.75rem;padding:3.5rem 1.5rem;text-align:center;color:#fff} @media(min-width:800px){.organisiert-inhalt{grid-template-columns:1fr 1fr;gap:5.5rem 6rem;padding:7.5rem 4rem;min-height:34rem;align-content:center}} .organisiert-punkt h3{margin:0 0 1.1rem;font-size:1.8rem;line-height:1.3;font-weight:700} .organisiert-punkt h3 a{color:#fff;text-decoration:none} .organisiert-punkt h3 .pinsel{display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:.15em} .organisiert-punkt p{margin:0 auto;max-width:26rem;font-size:1.02rem;line-height:1.7;text-shadow:0 1px 8px rgb(0 0 0/.25)} @media(prefers-reduced-motion:reduce){.organisiert-bild{top:0;height:100%;transform:none!important}} /* Startseite am Handy: Vorschau-Beiträge als Stapel zum seitlichen Wischen statt langer Liste */ @media(max-width:639.98px){ .beitrag-raster.slider{display:flex;gap:.9rem;overflow-x:auto;margin:0 -1rem;padding:.25rem 1rem .9rem;scroll-snap-type:x mandatory;scroll-padding-left:1rem;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain} .beitrag-raster.slider::-webkit-scrollbar{display:none} .beitrag-raster.slider .beitrag-karte{flex:0 0 76%;scroll-snap-align:start} .beitrag-raster.slider.kurz .beitrag-karte{flex:0 0 88%} /* im Flex-Slider blockiert "height:100%" (für die Desktop-Reihen gedacht) das automatische Stretching auf gleiche Höhe */ .beitrag-raster.slider>.beitrag-karte{height:auto} } /* Handy: Blume rechts hinter dem Textblock (von der Überschrift bis zum Knopf); am Desktop bleibt sie zwischen Text und Foto */ .blume-mobil{display:none} @media(max-width:899.98px){ .willkommen-text{position:relative;isolation:isolate} .blume-mobil{display:block;position:absolute;right:-.6rem;top:-.25rem;height:calc(100% + .5rem);width:auto;z-index:-1;pointer-events:none;opacity:.95} .willkommen-text>*:not(.blume-mobil){position:relative} } @media(max-width:639.98px){ .bereich-titel.mitte-mobil{text-align:center} .organisiert-punkt h3{font-size:1.3rem;white-space:nowrap} } @media(min-width:640px){.organisiert-punkt h3{font-size:1.6rem}} /* Veranstaltungen: Kalender, Terminliste, Einzeltermin */ .kal-kopf{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem} .kal-kopf h2{margin:0;font-size:1.5rem;flex:1;text-align:center} .kal-heute{margin-left:.5rem} .kalender{display:none;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden} .kal-woche{display:grid;grid-template-columns:2.6rem repeat(7,1fr)} .kal-tage div{padding:.6rem .5rem;text-align:center;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;background:var(--surface-muted);color:var(--text-muted)} .kal-tag{min-height:6.5rem;padding:.4rem .4rem .5rem;border-top:1px solid var(--border);border-left:1px solid var(--border);display:flex;flex-direction:column;gap:.25rem;min-width:0} .kal-kw{display:flex;align-items:flex-start;justify-content:center;padding-top:.45rem;font-size:.78rem;font-weight:600;color:var(--text-muted);background:var(--surface-muted);border-top:1px solid var(--border)} .kal-tage .kal-kw{border-top:0;align-items:center;padding:.6rem 0;font-size:.7rem} .kal-tag.leer{background:var(--bg)} .kal-nr{font-size:.85rem;font-weight:600;color:var(--text-muted)} .kal-tag.heute .kal-nr{display:inline-flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--secondary);color:#fff} .kal-termin{display:block;padding:.2rem .45rem;border-radius:.4rem;background:var(--accent-soft);border-left:3px solid var(--accent);color:var(--text);font-size:.78rem;line-height:1.3;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .kal-termin:hover{background:var(--accent);color:#fff} .kal-termin i{font-style:normal;font-weight:600} .kal-mehr{font-size:.75rem;color:var(--text-muted)} .kalender{display:block} @media(min-width:800px){.nur-mobil{display:none}} @media(max-width:799.98px){.nur-desktop{display:none}} .seiten-untertitel a{color:var(--secondary-hover);font-weight:600;text-decoration:underline;text-underline-offset:3px} .seiten-untertitel{max-width:44rem;margin:-.5rem auto 3.5rem;text-wrap:balance;white-space:pre-line;padding:0 1rem;text-align:center;font-size:.98rem;line-height:1.5;color:var(--text-muted)} @media(min-width:640px){.seiten-untertitel{font-size:1.2rem}} .oben.mitte{text-align:center;margin-top:2.75rem} .blaettern{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:1.25rem;font-size:.9rem;color:var(--text-muted)} .knopf.aus{opacity:.4;pointer-events:none} .kal-kopf h3{margin:0;font-size:1.5rem;flex:1;text-align:center} .termine-titel{margin-top:2.5rem} .termin-liste{display:grid;gap:1rem} @media(min-width:900px){.termin-liste{grid-template-columns:repeat(2,1fr)}} .termin{display:flex;gap:1.1rem;align-items:flex-start;padding:1.1rem 1.25rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);text-decoration:none;box-shadow:0 1px 2px rgb(0 0 0/.05);transition:transform .15s,border-color .15s,box-shadow .15s} .termin:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 8px 24px rgb(58 54 44/.1)} .termin-datum{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:3.9rem;height:3.9rem;border-radius:.9rem;background:var(--accent-soft);color:#5f8a2f;line-height:1} .termin-datum b{font-size:1.6rem;font-weight:700} .termin-datum span{margin-top:.15rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em} .termin-text{display:flex;flex-direction:column;gap:.3rem;min-width:0} .termin-text strong{font-size:1.05rem;line-height:1.35} .termin-meta{font-size:.88rem;color:var(--secondary-hover);font-weight:500} .termin-was{font-size:.9rem;color:var(--text-muted);line-height:1.5} .termin-marke{align-self:flex-start;margin-top:.15rem;padding:.1rem .6rem;border-radius:2rem;background:var(--secondary-soft);color:#8a5200;font-size:.75rem;font-weight:600} .termin-raster{display:grid;gap:2rem 2.5rem;grid-template-columns:minmax(0,1fr);grid-template-areas:"haupt" "seite" "plakat"} .termin-haupt{grid-area:haupt} .termin-plakat{grid-area:plakat;text-align:center} .termin-seite{grid-area:seite;display:flex;flex-direction:column;gap:1rem} @media(min-width:900px){.termin-raster{grid-template-columns:minmax(0,1fr) 20rem;grid-template-rows:auto 1fr;grid-template-areas:"haupt seite" "plakat seite"}.termin-seite{align-self:start}.termin-plakat{text-align:left}} .termin-plakat figure{margin:0 0 .75rem;display:inline-block;max-width:26rem} .termin-plakat img{display:block;width:100%;height:auto;border-radius:.75rem;box-shadow:0 6px 24px rgb(58 54 44/.18);cursor:zoom-in} .termin-plakat figcaption{margin-top:.4rem;font-size:.8rem;color:var(--text-muted)} .termin-plakat .knopf{width:auto} .hero.schmal.hoeher .hero-text{min-height:15rem} @media(min-width:1200px){.hero.schmal.hoeher .hero-text{min-height:18rem}} @media(max-width:639.98px){.hero.schmal.hoeher .hero-text{min-height:9.5rem}} .plakat-vorschau{display:block;max-width:12rem;margin-top:.75rem;border-radius:.5rem;box-shadow:0 2px 10px rgb(58 54 44/.2)} .plakat-vorschau[hidden]{display:none} .infobox{padding:1.1rem 1.25rem;border:1px solid var(--border);border-radius:1rem;background:var(--bg)} .infobox h2{display:flex;align-items:center;gap:.5rem;margin:0 0 .5rem;font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--secondary-hover)} .infobox p{margin:.35rem 0} .infobox.anmeldung{background:var(--accent-soft);border-color:var(--accent)} .infobox .knopf{width:100%} /* Verwaltung: Plakat */ .plakat-zone{border:2px dashed var(--accent);border-radius:1rem;padding:1rem 1.25rem 1.25rem;background:var(--accent-soft)} .plakat-status{margin:.75rem 0 0;font-size:.92rem} .plakat-status.laeuft{color:var(--secondary-hover);font-weight:600} .plakat-status.ok{color:#3f6a17;font-weight:600} .plakat-status.fehler{color:var(--fehler);font-weight:600} input.ki-gefuellt,textarea.ki-gefuellt{background:#fff8e1;border-color:#f3cf9b} /* Veranstaltungen: Nächste Termine als Schiene (zwei sichtbar, Rest per Pfeil) */ .schiene-kopf{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.25rem} .schiene-kopf .bereich-titel{margin:0} .schiene-pfeile{display:flex;gap:.5rem} .schiene-knopf{width:2.5rem;height:2.5rem;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--text);font:inherit;font-size:1.5rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0 0 .15rem} .schiene-knopf:hover:not(:disabled){background:var(--accent-soft);border-color:var(--accent)} .schiene-knopf:disabled{opacity:.35;cursor:default} .termin-schiene{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:.5rem .25rem 1rem;margin:-.5rem -.25rem -.5rem;scrollbar-width:none} .termin-schiene::-webkit-scrollbar{display:none} .termin-schiene .termin{flex:0 0 calc(50% - .5rem);scroll-snap-align:start;min-width:0} .nb{white-space:nowrap} /* Seiten-Bausteine: Einleitung, Bildband, Aufklapp-Bereiche, Lauftext */ body{overflow-x:clip} .seiteninhalt .artikel>.intro{margin:0 0 2.5rem} @media(min-width:640px){.seiteninhalt .artikel>.intro{margin-bottom:3rem}} .intro p{max-width:44rem;margin:0 auto .85rem;text-align:center;hyphens:manual;font-size:1.08rem;line-height:1.6;color:#7a7a7a;font-weight:500} .intro p:has(>a.knopf){display:none} .seiteninhalt .artikel .intro a.knopf,.seiteninhalt .artikel .link-mobil a.knopf{display:inline-block;background:none;box-shadow:none;color:var(--secondary);border:3px solid #a4c57b;border-radius:50%/65%;padding:.4rem 1.5rem;font-size:1.3rem;font-weight:600;line-height:1.3} .seiteninhalt .artikel .intro a.knopf:hover,.seiteninhalt .artikel .link-mobil a.knopf:hover{background:var(--accent-soft)} /* Hervorhebungen im Einleitungstext: u = grüne Wellenlinie, em = grüne Linie, strong = oranger Kreis, sup = orange Linie */ .intro u{text-decoration:underline wavy #a4c57b;text-decoration-thickness:2px;text-underline-offset:.28em;text-decoration-skip-ink:none} .intro em{font-style:normal;padding-bottom:.08em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8 C 60 3, 150 10, 297 4' fill='none' stroke='%23a4c57b' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100%/100% .22em;-webkit-box-decoration-break:clone;box-decoration-break:clone} .intro sup{vertical-align:baseline;font-size:inherit;line-height:inherit;padding-bottom:.08em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8 C 60 3, 150 10, 297 4' fill='none' stroke='%23f39200' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100%/100% .22em;-webkit-box-decoration-break:clone;box-decoration-break:clone} .intro strong{display:inline-block;padding:0 .45em;margin:0 -.1em;border:3px solid var(--secondary);border-radius:50%/60%;font-weight:500;color:#7a7a7a;line-height:1.25;white-space:nowrap} @media(min-width:900px){ .seiteninhalt .artikel>.intro{margin-bottom:3rem} .intro p:not(:has(>a.knopf)){font-size:1.3rem} } /* "Der CLV": Einleitungstext oben etwas breiter als der sonstige Einleitungs-Baustein, damit die Sätze in weniger, dafür längeren Zeilen stehen (weniger "Turm"-Wirkung bei mehreren aufeinanderfolgenden Sätzen). */ @media(min-width:900px){body.seite-ueberuns .intro p{max-width:60rem}} .bildband{position:relative;width:100vw;margin:0 0 3.5rem calc(50% - 50vw);aspect-ratio:16/6;max-height:28rem;overflow:hidden;background:var(--surface-muted)} body.seite-ueberuns .bildband{margin-bottom:3.5rem} @media(min-width:640px){body.seite-ueberuns .bildband{margin-bottom:5rem}} .bildband.h-klein{aspect-ratio:16/4;max-height:20rem} .bildband.h-gross{aspect-ratio:16/8;max-height:38rem} .artikel .bildband figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1s ease;max-width:none} .artikel .bildband figure.aktiv{opacity:1} .artikel .bildband img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:0;box-shadow:none;cursor:default} .band-punkte{position:absolute;left:0;right:0;bottom:.9rem;display:flex;justify-content:center;gap:.6rem;z-index:2} .band-punkte button{width:.8rem;height:.8rem;padding:0;border:2px solid #fff;border-radius:50%;background:transparent;cursor:pointer;box-shadow:0 0 4px rgb(0 0 0/.4)} .band-punkte button.aktiv{background:var(--accent)} .seiteninhalt .artikel>h2:has(~ .leitgedanken-raster){text-align:left;font-size:2.6rem;line-height:1.15;color:var(--secondary);margin-top:0;margin-bottom:1.75rem} details.aufklapp{margin:0;border-top:1px solid var(--accent)} details.aufklapp:last-of-type{border-bottom:1px solid var(--accent)} details.aufklapp summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem .25rem;font-size:1.2rem;font-weight:600;color:#7fa04f;cursor:pointer;list-style:none} details.aufklapp summary::-webkit-details-marker{display:none} details.aufklapp summary::after{content:"";flex:none;width:.6rem;height:.6rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-.15rem);transition:transform .2s} details.aufklapp[open] summary::after{transform:rotate(-135deg) translateY(-.15rem)} details.aufklapp summary:hover{color:var(--secondary-hover)} .aufklapp-inhalt{padding:0 .25rem 1.25rem;color:#7a7a7a} .aufklapp-inhalt strong{color:#7a7a7a;font-weight:600} details.aufklapp.schliesst summary::after{transform:rotate(45deg) translateY(-.15rem)} .aufklapp-inhalt p{margin:.4rem 0} .aufklapp-inhalt ul{margin:.4rem 0 .6rem;padding-left:1.4rem} .aufklapp-inhalt p:has(>a.knopf){margin:1rem 0 .4rem} /* Leitgedanken: moderne Karten statt Akkordeon (Nummer, Hauptbegriff, "macht Sinn", Plus/Minus) – geschlossen alle sechs auf einen Blick, ein Klick zeigt den bestehenden Text. Am Computer/Tablet wandert der Inhalt in einen gemeinsamen, breiten Bereich direkt unter der jeweiligen Reihe (app.js platziert ihn dort per Zeilen-Berechnung), am Handy klappt die Karte selbst auf. Immer nur eine Karte offen. */ @media(min-width:900px){.seiteninhalt .artikel>h2:has(~ .leitgedanken-raster){text-align:center;margin-top:0}} .seiteninhalt .artikel>p.lg-hinweis{max-width:40rem;margin:0 auto 1.75rem;text-align:center;color:var(--text-muted);font-size:.95rem} .leitgedanken-raster{display:grid;grid-template-columns:1fr;gap:16px} .lg-orange{--lg-farbe:var(--secondary)} .lg-gruen{--lg-farbe:#7fa04f} .lg-karte{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 1px 2px rgb(0 0 0/.05);transition:border-color .2s,box-shadow .2s} .lg-karte.lg-offen{border-color:var(--lg-farbe);box-shadow:0 4px 16px rgb(0 0 0/.07)} .lg-kopf{display:flex;align-items:center;gap:.85rem;width:100%;min-height:4.25rem;padding:.8rem 1.1rem;border:0;background:none;font:inherit;text-align:left;color:inherit;cursor:pointer} .lg-nr{flex:none;font-size:.78rem;font-weight:600;color:var(--text-soft)} .lg-titel{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem} .lg-begriff{font-size:1.15rem;font-weight:700;color:var(--lg-farbe)} .lg-sinn{font-size:.82rem;font-weight:500;color:var(--text-muted)} .lg-plus{flex:none;width:1.6rem;height:1.6rem;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--accent-soft);color:var(--lg-farbe);font-size:1.15rem;line-height:1;transition:background .2s,color .2s} .lg-plus::before{content:"+"} .lg-karte.lg-offen .lg-plus{background:var(--lg-farbe);color:#fff} .lg-karte.lg-offen .lg-plus::before{content:"\2212"} /* Sanftes Auf-/Zuklappen: der innere Wrapper wächst per Grid-Zeile von 0fr auf 1fr (Höhe muss dafür nicht bekannt sein), das äußere Element blendet zusätzlich per Opacity ein/aus – wirkt für Öffnen UND Schließen gleich. */ .lg-inhalt{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .28s ease,opacity .28s ease} .lg-inhalt.lg-zeigen{grid-template-rows:1fr;opacity:1} .lg-inhalt-innen{overflow:hidden;min-height:0} .lg-inhalt-polster{padding:0 1.25rem 1.25rem} .lg-inhalt{color:#7a7a7a;text-align:left} .lg-inhalt p,.lg-inhalt li{text-align:left;hyphens:none} .lg-inhalt p{margin:.4rem 0} .lg-inhalt ul{margin:.4rem 0 .6rem;padding-left:1.4rem} .lg-inhalt strong{color:#7a7a7a;font-weight:600} .lg-inhalt p:has(>a.knopf){margin:1rem 0 .4rem} @media(min-width:640px){ .leitgedanken-raster{grid-template-columns:repeat(2,1fr);gap:1.5rem} .lg-inhalt.lg-voll{grid-column:1/-1;background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--lg-farbe);border-radius:var(--radius);box-shadow:0 1px 2px rgb(0 0 0/.05);margin:0} .lg-inhalt.lg-voll .lg-inhalt-polster{padding:1.5rem 1.75rem} } @media(min-width:1100px){ .leitgedanken-raster{grid-template-columns:repeat(3,1fr)} } /* Wellenschrift gehört optisch noch zu den Karten (kleiner Abstand davor), danach wieder der normale Abstand zwischen den Hauptbereichen der Seite – wie auf der Startseite zwischen deren Hauptbereichen (.bereich). */ body.seite-ueberuns .artikel>.lauftext{margin:1.75rem 0 2.5rem} body.seite-ueberuns .artikel>.lauftext+h2{margin-top:0} @media(min-width:640px){body.seite-ueberuns .artikel>.lauftext{margin:2rem 0 3rem}} .seiteninhalt .artikel>p:has(>a.knopf){margin-top:2rem} .seiteninhalt .artikel>h2{font-size:2.2rem;line-height:1.2;color:#7a7a7a;margin-top:3rem;margin-bottom:1.5rem} @media(max-width:639.98px){.seiteninhalt .artikel>h2{font-size:1.7rem}} .lauftext{width:100%;margin:4.5rem 0 5rem;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)} /* Lauftext: Grafik mindestens 900px breit (am Handy mittig ausgeschnitten), Text folgt der Wellenlinie */ .lauftext svg{display:block;width:max(100%,640px);margin-left:calc(50% - max(50%,320px));height:auto;color:var(--secondary);opacity:.75} .lauftext text{font-family:Rubik,ui-sans-serif,system-ui,sans-serif;font-weight:600;font-size:34px;letter-spacing:.12em;fill:currentColor} .editor-feld .bildband-block,.editor-feld .lauftext-block{margin:1rem 0;padding:1rem 1.25rem;border:2px dashed var(--accent);border-radius:.9rem;background:var(--accent-soft);text-align:center;font-weight:600} .editor-feld .bildband-block::before{content:"🖼 Bildband (wechselnde Fotos): " attr(data-band)} .editor-feld .lauftext-block::before{content:"〰 Lauftext: " attr(data-text)} .editor-feld .aufklapp{margin:1rem 0;padding:.25rem 1rem;border:1px dashed var(--accent);border-radius:.6rem} .editor-feld .aufklapp::before{content:"Aufklapp-Bereich";font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--secondary-hover)} .editor-feld .intro{margin:1rem 0;padding:.5rem 1rem;border:1px dashed var(--secondary);border-radius:.6rem} .editor-feld .intro::before{content:"Einleitung";font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--secondary-hover)} .band-neu{margin-bottom:1.5rem} .band-form{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center} .band-form input[type=text]{flex:1;min-width:14rem} .band-liste{display:grid;gap:.75rem} .band-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding:.75rem 1rem} .band-zeile img{width:9rem;height:5rem;object-fit:cover;border-radius:.5rem} .band-alt{display:flex;flex:1;gap:.5rem;min-width:16rem} .band-alt input{flex:1} /* Personenkarten in Seiten: keine Absatz-Abstände zwischen Funktion, Telefon und Mail */ .artikel .person-text p{margin:0;text-align:left} /* Verwaltung Bildband: Ausschnitt festlegen */ .band-foto-form{flex:1;display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;min-width:20rem} .band-foto-form .band-alt{flex:1 1 100%} .band-gefahr{margin-top:1.5rem} /* Kopfbild: eigenes Foto, höhere Kopfzeile */ .hero-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} .hero.bild-eigen{--ub:0} .hero.kompakt.hoch .hero-text{min-height:31rem} .hero.kompakt.sehr-hoch .hero-text{min-height:36rem} @media(min-width:640px){.hero.kompakt.hoch .hero-text{min-height:36rem}.hero.kompakt.sehr-hoch .hero-text{min-height:43rem}} @media(min-width:1200px){.hero.kompakt.hoch .hero-text{min-height:40rem}.hero.kompakt.sehr-hoch .hero-text{min-height:48rem}} /* Bildband: Foto wird per Skript ausgeschnitten */ .artikel .bildband img{position:absolute;left:0;top:0} /* Verwaltung: Ausschnitt */ .fokus-bereich{display:flex;flex-wrap:wrap;gap:1.25rem;align-items:flex-start;width:100%} .fokus-links{flex:1 1 22rem;max-width:34rem} .fokus-rechts{flex:1 1 16rem;max-width:26rem;display:flex;flex-direction:column;gap:.4rem} .fokus-feld{position:relative;width:100%;line-height:0;cursor:grab;touch-action:none;user-select:none;overflow:hidden;border-radius:.5rem} .fokus-feld:active{cursor:grabbing} .fokus-feld img{width:100%;height:auto;border-radius:.5rem;display:block;pointer-events:none} .fokus-rahmen{position:absolute;box-sizing:border-box;border:3px solid var(--secondary);border-radius:.3rem;box-shadow:0 0 0 999px rgb(0 0 0/.45);pointer-events:none} .fokus-vorschau{position:relative;width:100%;overflow:hidden;border-radius:.5rem;border:1px solid var(--border);background:var(--surface-muted)} .fokus-vorschau img{position:absolute;left:0;top:0;max-width:none;display:block} .zoom-zeile{display:flex;align-items:center;gap:.75rem;margin-top:.6rem;font-size:.9rem;color:var(--text-muted)} .zoom-zeile input{flex:1} .datei-tausch{font-size:.85rem;color:var(--text-muted)} .kopf-einstellungen{border:1px solid var(--border);border-radius:1rem;padding:1rem 1.25rem 1.25rem;margin:0 0 1.5rem} .kopf-einstellungen legend{padding:0 .5rem;font-weight:600} /* Startseite am Handy und Tablet: "So sind wir organisiert" als wischbare Kacheln mit demselben Foto */ @media(max-width:799.98px){ .organisiert{background:none;overflow:visible;border-radius:0} .organisiert-bild,.organisiert::before{display:none} .organisiert-inhalt{display:flex;gap:.9rem;overflow-x:auto;margin:0 -1rem;padding:.25rem 1rem .9rem;text-align:left;scroll-snap-type:x mandatory;scroll-padding-left:1rem;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;min-height:0} .organisiert-inhalt::-webkit-scrollbar{display:none} .organisiert-punkt{flex:0 0 78%;max-width:24rem;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:center;min-height:15.5rem;padding:1.6rem 1.4rem;border-radius:1.25rem;color:#fff;background:linear-gradient(rgb(122 122 122/.85),rgb(122 122 122/.85)),url(/assets/start/organisiert.jpg) 50% 30%/cover no-repeat} .organisiert-punkt:nth-child(2){background-image:linear-gradient(rgb(122 122 122/.85),rgb(122 122 122/.85)),url(/uploads/ae769d7747-pv-arbeit-aps.jpg);background-position:0 0,50% 22%} .organisiert-punkt:nth-child(3){background-image:linear-gradient(rgb(122 122 122/.85),rgb(122 122 122/.85)),url(/uploads/2873e4cc01-pv-arbeit-berufsschulen.jpg);background-position:0 0,50% 30%} .organisiert-punkt:nth-child(4){background-image:linear-gradient(rgb(122 122 122/.85),rgb(122 122 122/.85)),url(/uploads/66e2decdb2-pv-arbeit-pensionen.jpg);background-position:0 0,50% 25%} .organisiert-punkt h3{font-size:1.4rem;white-space:normal;margin-bottom:.8rem} .organisiert-punkt p{margin:0;max-width:none;font-size:.98rem;line-height:1.6} } /* Veranstaltungen: Pfeile zum vorherigen/nächsten Termin, Kalenderfarben, Lauftext mit Knopf */ .termin-nav{display:flex;justify-content:flex-end;gap:.5rem;margin:-1rem auto .6rem;max-width:70rem} .termin-pfeil{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--text-muted);font-size:1.5rem;line-height:1;padding-bottom:.15rem;text-decoration:none;transition:background .15s,color .15s} a.termin-pfeil:hover{background:var(--accent-soft);color:var(--text);border-color:var(--accent)} .termin-pfeil.aus{opacity:.3} .kal-tag.we{background-image:linear-gradient(rgb(58 54 44/.065),rgb(58 54 44/.065))} .kal-tag.ferien{background-color:#e6f1f6} .kal-tag.feiertag{background-color:#fbe6e1} .kal-tag.feiertag .kal-nr{color:#b3261e} .kal-name{font-size:.68rem;line-height:1.25;color:#8a4a3f;font-weight:600} .kal-name.ferien-name{color:#3a6a86} .kal-legende{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin:.75rem 0 0;font-size:.82rem;color:var(--text-muted)} .kal-legende span{display:inline-flex;align-items:center;gap:.45rem} .kal-legende i{display:inline-block;width:.95rem;height:.95rem;border-radius:.25rem;border:1px solid var(--border)} .l-we{background:#e9e7e1} .l-feiertag{background:#fbe6e1} .l-ferien{background:#e6f1f6} .lauftext-zeile{display:flex;align-items:center;gap:1.75rem;margin:4.5rem 0 5rem} .lauftext-zeile .lauftext{flex:1;min-width:0;margin:0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 86%,transparent 100%)} .lauftext-zeile>.knopf{flex:none;text-transform:uppercase;letter-spacing:.07em;font-weight:500;font-size:1.05rem;padding:1.15rem 2.6rem} @media(max-width:639.98px){.lauftext-zeile{flex-direction:column;gap:1rem;margin:3rem 0 3.5rem}.lauftext-zeile .lauftext{width:100%}} .seiteninhalt .artikel .lauftext-zeile>a.knopf{color:#fff;text-decoration:none} /* Seite "Der CLV" am Handy */ @media(max-width:899.98px){ .seiteninhalt .artikel .intro a.knopf,.seiteninhalt .artikel .link-mobil a.knopf{font-size:1.1rem;padding:.35rem 1.3rem} } @media(max-width:639.98px){ .seiteninhalt .artikel>h2:has(~ .leitgedanken-raster){font-size:1.6rem;line-height:1.3;margin-bottom:1.25rem} .lauftext-zeile>.knopf{display:none} .lauftext-zeile{margin:2.5rem 0 3rem} /* Am Handy steht die Wellenschrift vor den Kacheln (app.js) – dadurch fehlt sonst der Abstand zwischen der letzten Kachel und dem direkt folgenden Bildband (beide würden sich sonst berühren). */ /* Gleich großer Abstand wie nach dem Bildband (vor "Der CLV in den Bezirken"), damit beide Übergänge einheitlich wirken. */ body.seite-ueberuns .leitgedanken-raster{margin-bottom:3.5rem} } /* Seite "Der CLV" – einheitlicher, kompakterer Seitenabstand (nur diese Seite, siehe body-Klasse in seite.php); "Das Präsidium" nutzt denselben Hero-Aufbau (Gruppenfoto) und bekommt denselben Abstand unter der Unterzeile. */ body.seite-ueberuns .seiten-untertitel,body.seite-las .seiten-untertitel,body.seite-junglehrer .seiten-untertitel,body.seite-pensionisten .seiten-untertitel,body.seite-pv .seiten-untertitel{margin-bottom:2rem} @media(min-width:900px){body.seite-ueberuns .seiten-untertitel,body.seite-las .seiten-untertitel,body.seite-junglehrer .seiten-untertitel,body.seite-pensionisten .seiten-untertitel,body.seite-pv .seiten-untertitel{margin-bottom:2.5rem}} @media(max-width:639.98px){ body.seite-ueberuns main{padding-bottom:2rem} body.seite-ueberuns .person-raster.bezirke{margin-bottom:.5rem} } /* Bezirke: Bild + Kopfzeile = eine Kachel; am Handy klappt Foto und Kontakt auf */ .nur-mobil-zeile{display:none} .person-kopf{display:none} @media(max-width:799.98px){ .person.mit-bezirk .person-kopf{display:flex;width:100%;align-items:center;justify-content:space-between;gap:.85rem;padding:.85rem 1.1rem;border:0;background:var(--surface);font:inherit;color:var(--text);text-align:left;cursor:pointer} .person.mit-bezirk .person-kopf[hidden]{display:none} .bz-text{display:flex;flex-direction:column;gap:.05rem} .bz-text strong{font-size:1.15rem;color:var(--secondary-hover)} .bz-text span{font-size:.98rem;color:var(--text-muted)} .person-kopf .symbol{flex:none;color:var(--secondary-hover);transition:transform .25s} .person-kopf[aria-expanded=true] .symbol{transform:rotate(180deg)} .person.mit-bezirk .person-auf.zu .person-inhalt{display:none} .person.mit-bezirk .person-inhalt{flex-direction:row;align-items:flex-start;gap:1rem;padding:.25rem 1.25rem 1.25rem} .person.mit-bezirk .person-foto{flex:none;width:7.5rem;border-radius:.8rem} .person.mit-bezirk .person-text{padding:0;min-width:0} .person.mit-bezirk .person-funktion{display:none} .person.mit-bezirk .person-text h3{font-size:1.1rem} .knopf-zeile{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem} .knopf-zeile .knopf{margin:0} .nur-mobil-zeile{display:inline-block} .person-bezirk{height:13rem} } @media(min-width:800px){.person-auf{display:contents}} /* Überschriften und Titel im helleren Grau wie auf der Startseite (nicht in der Verwaltung) */ body:not(.admin) .artikel-titel, body:not(.admin) .bereich-titel, body:not(.admin) .kal-kopf h2, body:not(.admin) .kal-kopf h3, body:not(.admin) .termin-text strong, body:not(.admin) .karte-text strong, body:not(.admin) .kachel-text strong, body:not(.admin) .person-text h3, body:not(.admin) .artikel h2, body:not(.admin) .artikel h3, body:not(.admin) .artikel h4:not(.intro h4), body:not(.admin) .infobox strong, body:not(.admin) .hinweis-titel{color:#7a7a7a} /* Handy: Kopfbilder niedriger (anderes Seitenverhältnis), Bildband im gleichen Verhältnis wie am Computer */ @media(max-width:639.98px){ .hero.kompakt.hoch .hero-text{min-height:16.5rem} .hero.kompakt.sehr-hoch .hero-text{min-height:19rem} .hero.schmal.hoeher .hero-text{min-height:8rem} } /* Bezirke aufgeklappt (Handy): Foto links (wie am Computer), Name/Mail/Nr./Buttons daneben in einer Spalte; lange Mailadressen brechen bei Bedarf sauber um (kleinere Schrift), statt die Karte zu sprengen */ @media(max-width:799.98px){ .person.mit-bezirk .person-inhalt{display:grid;grid-template-columns:7.5rem 1fr;grid-template-rows:repeat(4,auto);gap:.3rem 1rem;align-items:start;padding:.2rem 1.1rem 1.1rem} .person.mit-bezirk .person-text{display:contents} .person.mit-bezirk .person-foto{grid-row:1/5;grid-column:1} .person.mit-bezirk .person-foto img{object-position:50% 0} .person.mit-bezirk .person-text h3{grid-column:2;grid-row:1;margin:0} .person.mit-bezirk .person-zeile,.person.mit-bezirk .knopf-zeile{grid-column:2} /* Leerzeile NICHT ausblenden: sie hält die Zeile frei, wenn keine Telefonnummer da ist, damit der Kontaktieren-Button immer auf derselben Höhe (Unterkante Foto) landet, mit oder ohne Telefonnummer. */ .person.mit-bezirk .person-zeile{overflow-wrap:anywhere;font-size:.75rem} .person.mit-bezirk .knopf-zeile{margin-top:.35rem;display:flex;flex-wrap:wrap;gap:.4rem} } /* Titel: Zeilen gleichmäßig verteilen (bei langen Titeln zweizeilig, mit Silbentrennung); Pfeile zwischen Terminen mit mehr Abstand zum Titel */ .artikel-titel{text-wrap:balance;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:6 3 3} @media(max-width:639.98px){ .termin-nav{margin:.9rem auto 1rem;gap:.6rem} .termin-pfeil{width:2.75rem;height:2.75rem;font-size:1.7rem} } /* Handy: Lauftext nach der Einleitung, Kreis-Link nach den Aufklapp-Bereichen (Kopien; Originale ausgeblendet); Leitgedanken mittig */ .nur-mobil-block{display:none} @media(max-width:899.98px){ .nur-mobil-block{display:block} .kopiert{display:none!important} .seiteninhalt .artikel>p.link-mobil{text-align:center;margin:2rem 0 .5rem} .seiteninhalt .artikel>.nur-mobil-block>.lauftext{margin:2rem 0 2.5rem} .seiteninhalt .artikel>h2:has(~ .leitgedanken-raster){text-align:center} details.aufklapp summary{position:relative;justify-content:center;text-align:center;padding:1rem 2.25rem} details.aufklapp summary::after{position:absolute;right:.6rem;top:50%;margin-top:-.4rem} .aufklapp-inhalt{text-align:center} .aufklapp-inhalt p,.aufklapp-inhalt li{text-align:center} .aufklapp-inhalt ul,.aufklapp-inhalt ol{list-style-position:inside;padding-left:0} } /* Startseite AM HANDY (unter 640 px): Kopf wie eine App-Startseite – dunkles Foto, "seit CLV 1899", Leitsatz, Text, Werte, Link; die Welle schaut unten schon heraus */ .sm-seit,.sm-unten{display:none} .sm-oben{display:contents} @media(max-width:639.98px){ .sm-oben{display:block;text-align:center} body.startseite .hero-text .sm-seit{display:flex;justify-content:center;align-items:baseline;gap:1.7rem;margin:0 0 1.4rem;font-size:.82rem;font-weight:500;letter-spacing:.04em;text-transform:none;color:rgb(255 255 255/.8);text-shadow:0 1px 8px rgb(0 0 0/.4)} body.startseite .sm-seit .sm-clv{font-size:1.05rem;font-weight:700;letter-spacing:.14em;padding-left:.14em;color:#fff} body.startseite .hero.gross{background-color:#1c1a16;background-size:auto 82%;background-repeat:no-repeat;background-position:64% 50%} body.startseite .hero.gross::before{background:linear-gradient(to bottom,#1c1a16 0,#1c1a16 9%,rgb(28 26 22/.62) 17%,rgb(28 26 22/.42) 28%,rgb(28 26 22/.4) 72%,rgb(28 26 22/.66) 83%,#1c1a16 91%,#1c1a16 100%)} body.startseite .hero.gross::after{display:none} /* Feste Höhe (kleinste sichtbare Viewporthöhe, "svh"): ändert sich NICHT, wenn beim Scrollen die Safari-Werkzeugleiste ein-/ausblendet – sonst würde sich das Hintergrundfoto durch die Höhenänderung unbeabsichtigt mitverzerren/„zoomen“. */ body.startseite .hero.gross .hero-text{display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;min-height:calc(100vh - 4.6rem);min-height:calc(100svh - 4.6rem);padding:5.6rem 1.1rem 3.5rem;color:#fff} body.startseite .hero.gross h1{margin:0;font-size:min(6.9vw,1.9rem);line-height:1.25;font-weight:800;letter-spacing:-.005em;color:#fff;text-shadow:0 2px 14px rgb(0 0 0/.35);white-space:nowrap;text-align:center} body.startseite .hero.gross h1 .pinsel{padding-bottom:.16em} body.startseite .hero.gross .welle{transform:none} .sm-unten{display:block;text-align:center;color:#fff;text-shadow:0 1px 10px rgb(0 0 0/.45)} .sm-text{margin:0 auto;max-width:21rem;font-size:1.3rem;line-height:1.35;font-weight:700} .sm-text strong{font-weight:700} body.startseite .hero-text .sm-werte{display:flex;justify-content:center;align-items:center;gap:.65em;margin:1.2rem 0 0;font-size:.9rem;font-weight:400;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;opacity:.72} .sm-werte i{font-style:normal;opacity:.5} .sm-mehr{margin:2rem 0 0} .sm-mehr a{color:rgb(255 255 255/.75);font-size:.72rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgb(255 255 255/.45);padding-bottom:.12rem} body.startseite .willkommen{display:none} body.startseite .hero.gross{transform-origin:50% 50%;will-change:transform} } /* Startseite Handy: grüner Pfeil unter der Welle (Hinweis zum Weiterscrollen); der Inhalt beginnt erst unterhalb des ersten Bildschirms */ .start-pfeil{display:none} @media(max-width:639.98px){ .start-pfeil{display:flex;justify-content:center;align-items:center;height:3.6rem;margin:-2.25rem 0 8rem;color:#a4c57b;text-decoration:none} .start-pfeil .symbol{width:2.6rem;height:2.6rem;stroke-width:2.4;animation:schweben 1.8s ease-in-out infinite} } @keyframes schweben{0%,100%{transform:translateY(-6px) scale(1);opacity:.75}50%{transform:translateY(7px) scale(1.12);opacity:1}} @media(prefers-reduced-motion:reduce){.start-pfeil .symbol{animation:none}} /* Startseite: Kachel-Wrapper am Computer unsichtbar (Aufbau wie bisher); am Handy drehen sich die Kacheln beim Antippen um */ .op-innen,.op-vorne,.op-hinten{display:contents} .op-tipp,.op-link,.op-foto{display:none} @media(max-width:799.98px){ .organisiert-punkt{background:none!important;padding:0!important;min-height:0!important;perspective:1100px;cursor:pointer} .op-innen{display:block;position:relative;min-height:15.5rem;height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,.1,.2,1)} .organisiert-punkt.gedreht .op-innen{transform:rotateY(180deg)} .op-vorne,.op-hinten{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:1.5rem 1.4rem;border-radius:1.25rem;-webkit-backface-visibility:hidden;backface-visibility:hidden} .op-vorne{background:linear-gradient(rgb(122 122 122/.85),rgb(122 122 122/.85)),url(/assets/start/organisiert.jpg) 50% 30%/cover no-repeat;color:#fff} .organisiert-punkt:nth-child(2) .op-vorne{background-image:linear-gradient(rgb(122 122 122/.85),rgb(122 122 122/.85)),url(/uploads/ae769d7747-pv-arbeit-aps.jpg);background-position:0 0,50% 22%} .organisiert-punkt:nth-child(3) .op-vorne{background-image:linear-gradient(rgb(122 122 122/.85),rgb(122 122 122/.85)),url(/uploads/2873e4cc01-pv-arbeit-berufsschulen.jpg);background-position:0 0,50% 30%} .organisiert-punkt:nth-child(4) .op-vorne{background-image:linear-gradient(rgb(122 122 122/.85),rgb(122 122 122/.85)),url(/uploads/66e2decdb2-pv-arbeit-pensionen.jpg);background-position:0 0,50% 25%} .op-vorne h3{margin:0;font-size:1.55rem;line-height:1.3} .op-tipp{display:block;position:absolute;bottom:.9rem;left:0;right:0;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgb(255 255 255/.7)} .op-hinten{transform:rotateY(180deg);background:#ebe7dc;color:#5f5c52;border:1px solid #dcd7c8;gap:1rem} .organisiert-punkt .op-hinten p{margin:0;max-width:none;font-size:.98rem;line-height:1.55;color:#5f5c52;text-shadow:none;text-align:center} .op-link{display:inline-block;color:#c47500;font-weight:600;text-decoration:none;border-bottom:2px solid #f39200;padding-bottom:.1rem} .organisiert-inhalt{align-items:stretch} @media(prefers-reduced-motion:reduce){.op-innen{transition:none}} } /* Startseite Desktop: "Für dich da" als vier eigenständige Foto-Karten (statt des einen grauen Blocks mit Parallax-Foto). Vorschau per Maus: Foto mit Titel, beim Darüberfahren blendet ruhig der Text mit "Zur Seite →" ein. */ @media(min-width:800px){ .organisiert{background:none;border-radius:0} .organisiert-bild,.organisiert::before{display:none} .organisiert-inhalt{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;padding:0;text-align:left;min-height:0} .organisiert-punkt{position:relative;isolation:isolate;overflow:hidden;border-radius:1.25rem;aspect-ratio:3/4;box-shadow:0 1px 2px rgb(0 0 0/.08);transition:box-shadow .3s ease} .organisiert-punkt:hover,.organisiert-punkt:focus-within{box-shadow:0 16px 40px -12px rgb(58 54 44/.35)} .op-foto{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)} .organisiert-punkt:hover .op-foto,.organisiert-punkt:focus-within .op-foto{transform:scale(1.06)} .op-innen{position:absolute;inset:0;display:block} .op-vorne,.op-hinten{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:.85rem;padding:1.5rem;transition:opacity .4s ease} .op-vorne{background:linear-gradient(to top,rgb(20 18 14/.75) 0,rgb(20 18 14/.08) 60%,transparent 100%)} .op-vorne h3{margin:0;font-size:1.3rem;line-height:1.3} .op-vorne h3 a{color:#fff} .op-hinten{justify-content:center;text-align:center;align-items:center;opacity:0;background:linear-gradient(rgb(20 18 14/.5),rgb(20 18 14/.82))} .organisiert-punkt .op-hinten p{margin:0;max-width:none;font-size:.94rem;line-height:1.6;color:#fff;text-shadow:none;text-align:center} .op-link{display:inline-block;color:#fff;font-weight:600;text-decoration:none;border-bottom:2px solid var(--secondary)} .op-link:hover{color:rgb(255 255 255/.85)} .organisiert-punkt:hover .op-vorne,.organisiert-punkt:focus-within .op-vorne{opacity:0} .organisiert-punkt:hover .op-hinten,.organisiert-punkt:focus-within .op-hinten{opacity:1} @media(prefers-reduced-motion:reduce){.op-foto,.op-vorne,.op-hinten{transition:none}} } @media(min-width:1200px){.organisiert-punkt h3{font-size:1.4rem}} /* Solange der Cookie-Hinweis offen ist, verdeckt er am Handy sonst den Pfeil am unteren Bildschirmrand. */ html.cookie-offen .start-pfeil{visibility:hidden} /* Startseite Handy: "Alles auf einen Blick" vor "Aktuelles"; Pfeil etwas tiefer */ @media(max-width:639.98px){ body.startseite main{display:flex;flex-direction:column} body.startseite main>*{width:100%} body.startseite main>.start-pfeil{order:-3} body.startseite main>#einblick{order:-2} body.startseite .start-pfeil{margin-top:-1.35rem;margin-bottom:3.25rem} } /* Startseite Handy: Bereichsüberschriften mit Link darunter mittig; Mitglied-werden-Box mittig */ @media(max-width:639.98px){ body.startseite .cta{flex-direction:column;align-items:center;text-align:center} body.startseite .cta>div{text-align:center} } /* Startseite Handy – Reihenfolge: Kopf, Pfeil, Alles auf einen Blick, Aktuelles, Kurzinfos, Kacheln, Mitglied werden */ @media(max-width:639.98px){ body.startseite main>#aktuelles-start{order:0} body.startseite main>#kurzinfos-start{order:1} body.startseite main>#organisiert-start{order:2} body.startseite main>#mitglied-start{order:3} } /* ===== Startseite Handy: einheitliche Abstände und Kartengrößen ===== */ .t-kurz{display:none} @media(max-width:639.98px){ /* Alles auf einen Blick: 3 x 2 statt 2 x 3, schmalere Innenabstände; "Ansprechpersonen" heißt hier "Kontakte" */ body.startseite .kachel-raster.klein{grid-template-columns:repeat(3,1fr);gap:.55rem} body.startseite .kachel-raster.klein .kachel{padding:.75rem .3rem;gap:.45rem;border-radius:.95rem} body.startseite .kachel-raster.klein .kachel-ikon{width:2.5rem;height:2.5rem;border-radius:.75rem} body.startseite .kachel-raster.klein .kachel-text strong{font-size:.78rem;line-height:1.25;hyphens:auto} body.startseite .t-lang{display:none} body.startseite .t-kurz{display:inline} /* Abstände: alle Bereiche gleich */ body.startseite main{padding-bottom:3rem} body.startseite .bereich{margin:0 auto 2.25rem} body.startseite .bereich-kopf,body.startseite .bereich>.bereich-titel{margin-bottom:.9rem} body.startseite .beitrag-raster.slider,body.startseite .organisiert-inhalt{gap:.9rem} /* Kurzinfos wie Aktuelles: Foto oben (16:10), Text darunter, gleiche Kartenbreite */ body.startseite .beitrag-raster.slider .beitrag-karte,body.startseite .beitrag-raster.slider.kurz .beitrag-karte{flex:0 0 76%} body.startseite .beitrag-karte.kurzinfo{flex-direction:column} body.startseite .beitrag-karte.kurzinfo .karte-bild{width:auto;margin:0;border-radius:0;aspect-ratio:16/10;align-self:stretch} body.startseite .beitrag-karte.kurzinfo .karte-text{padding:1.1rem 1.25rem 1.2rem} body.startseite .karte-text{min-height:6.75rem} /* Vorschautext auf 2 Zeilen begrenzen, sonst werden Karten je nach Textlänge unterschiedlich hoch */ body.startseite .karte-kurz{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} /* umdrehbare Kacheln: gleiche Breite wie die Karten, Höhe ähnlich */ body.startseite .organisiert-punkt{flex:0 0 76%;max-width:none} body.startseite .op-innen{min-height:17.5rem} body.startseite .organisiert>.op-titel{display:none} } /* ===== Mobiles Menü: kompakter, klarere Pfeile, abgedunkelter Hintergrund (Kopf ≤ 1199 px) ===== */ @media(max-width:1199.98px){ body.menue-offen{overflow:hidden} .kopf.offen #hauptmenue{top:5.3rem;max-height:calc(100vh - 7.2rem);max-height:calc(100dvh - 6.8rem);padding:.35rem;box-shadow:0 25px 60px -10px rgb(0 0 0/.45)} .menue a,.menue-knopf,.menue-rechts a{min-height:2.6rem;padding:.45rem 1rem} .menue-zeile .menue-pfeil{width:3rem} .menue-knopf .symbol{width:1.35rem;height:1.35rem;stroke-width:2.4;color:var(--text);transition:transform .32s cubic-bezier(.4,0,.2,1)} .unter a{min-height:2.35rem;padding:.4rem .75rem} .menue-rechts{margin-top:.3rem;padding-top:.3rem;gap:.15rem} .burger{position:relative} .burger::after{content:"";position:absolute;inset:-.4rem} .kopf.offen .burger{background:rgb(255 255 255/.16);filter:none} } @media(min-width:640px) and (max-width:1199.98px){.kopf.offen #hauptmenue{top:6rem}} /* ===== Footer am Handy: kompakt, alle Angaben bleiben ===== */ .fuss-zeile{display:contents} @media(max-width:639.98px){ .fuss-innen{padding:2.6rem 1rem calc(1.1rem + env(safe-area-inset-bottom,0px))} .fuss-oben{gap:1.6rem;align-items:center;text-align:center} .fuss-adresse{align-items:center;gap:.3rem;font-size:.92rem;line-height:1.45} .fuss-adresse strong{font-size:1.15rem;margin-bottom:0} .fuss-adresse .fuss-zeile{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.15rem .55rem} .fuss-anschrift>span+span::before{content:"·";margin-right:.55rem} .fuss-kontakt>a+a{position:relative;margin-left:.55rem} .fuss-kontakt>a+a::before{content:"·";position:absolute;left:-.7rem;top:0} .fuss-kontakt>a{gap:.35rem} .fuss-zeiten{margin-top:0;font-size:.88rem} /* Telefon und Mail stehen oben in der Adresse schon als anklickbarer Text – die beiden Symbole dafür sind hier doppelt */ .fuss-mail-symbol,.fuss-tel-symbol{display:none} .fuss-symbole{justify-content:center;gap:.6rem} .fuss-symbole a{width:2.5rem;height:2.5rem} .fuss-symbole .symbol{width:19px;height:19px} /* Rechtliches (Impressum, Datenschutz, Copyright): gut lesbar, aber zurückhaltender als der Rest der Fußzeile */ .fuss-unten{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:.2rem .9rem;margin-top:1.1rem;padding-top:.85rem;font-size:.75rem;text-align:center;color:rgb(255 255 255/.8)} .fuss-unten nav{gap:.6rem;font-size:.75rem;font-weight:400} .fuss-unten nav a{color:inherit} .fuss-unten nav a+a{position:relative;margin-left:.3rem} .fuss-unten nav a+a::before{content:"·";position:absolute;left:-.55rem;top:0} .fuss-unten p{font-size:.75rem;font-weight:400;color:inherit} } /* Kurzform "Kontakte" in der Kachel: exakt wie die anderen Titel (Schrift, Gewicht, Farbe erben) */ .kachel-text strong .t-lang,.kachel-text strong .t-kurz{font:inherit;color:inherit;letter-spacing:inherit;line-height:inherit} /* ===== Startseite Desktop/Tablet: einheitlicherer, insgesamt etwas kompakterer Rhythmus zwischen den Hauptbereichen (nur hier – die übrige Seite behält ihren Standardabstand von 3rem, die mobile Startseite ihre eigenen Werte). ===== */ @media(min-width:640px){ body.startseite .bereich{margin:0 auto 2.75rem} } /* ===== Mobiles Menü: weiches Öffnen/Schließen (Panel, Hintergrund, Symbol, Untermenüs) ===== */ .burger .b-auf,.burger .b-zu{position:absolute;inset:0;display:inline-flex!important;align-items:center;justify-content:center;transition:opacity .22s ease,transform .38s cubic-bezier(.2,.8,.2,1)} .burger .b-zu{opacity:0;transform:rotate(-80deg) scale(.6)} .kopf.offen .burger .b-auf{opacity:0;transform:rotate(80deg) scale(.6)} .kopf.offen .burger .b-zu{opacity:1;transform:none} @media(max-width:1199.98px){ .kopf::before{content:"";position:fixed;top:0;left:0;right:0;bottom:-30vh;height:auto;height:130vh;height:100lvh;min-height:calc(100% + 30vh);z-index:-1;background:rgb(24 22 18/.62);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .32s ease,visibility 0s linear .32s} .kopf.offen::before{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s} #hauptmenue{display:block;position:fixed;top:5.3rem;left:.75rem;right:.75rem;max-height:calc(100vh - 7.2rem);max-height:calc(100dvh - 6.8rem);overflow-y:auto;background:#fff;border-radius:1rem;padding:.35rem;box-shadow:0 25px 60px -10px rgb(0 0 0/.45);outline:1px solid rgb(0 0 0/.05); visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-14px) scale(.98);transform-origin:top right; transition:opacity .26s ease,transform .38s cubic-bezier(.2,.8,.2,1),visibility 0s linear .38s} .kopf.offen #hauptmenue{visibility:visible;opacity:1;pointer-events:auto;transform:none;transition-delay:0s} .unter{display:block;max-height:0;overflow:hidden;opacity:0;margin-top:0;margin-bottom:0;transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .28s ease,margin .3s ease} .menue-punkt.offen>.unter{display:block;max-height:28rem;opacity:1;margin-bottom:.25rem} } @media(min-width:640px) and (max-width:1199.98px){#hauptmenue{left:auto;right:1.5rem;width:22rem;top:6rem}} @media(prefers-reduced-motion:reduce){#hauptmenue,.kopf::before,.unter,.burger .b-auf,.burger .b-zu{transition:none!important}} /* Startseite Handy: einheitlicher Abstand zwischen den Hauptbereichen (ca. 48–56 px); innerhalb der Bereiche unverändert */ @media(max-width:639.98px){ body.startseite #einblick, body.startseite #aktuelles-start, body.startseite #kurzinfos-start, body.startseite #organisiert-start, body.startseite #mitglied-start{margin-bottom:3.6rem} } /* Kontakt-Bereich (Seite "Kontakt CLV"): Formular links, Adresse rechts, Karte darunter */ .kontakt-bereich{max-width:72rem;margin:0 auto} .kontakt-spalten{display:grid;grid-template-columns:minmax(0,1fr);gap:2.5rem} @media(min-width:900px){.kontakt-spalten{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:3.5rem;align-items:stretch}} .kontakt-titel{margin:0 0 1rem;font-size:1.45rem;line-height:1.3;text-align:left} @media(max-width:899.98px){.kontakt-links>.kontakt-titel{text-align:center}} .kontakt-block{margin:0} .kontakt-daten{position:relative;overflow:hidden;height:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-start;padding:2rem 1.75rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:0 1px 2px rgb(0 0 0/.05)} .kontakt-daten>*{position:relative;z-index:1} .kontakt-daten>.kontakt-blume{position:absolute;z-index:0;right:-.75rem;bottom:.5rem;height:calc(82% - 1rem);width:auto;opacity:.45;pointer-events:none} @media(min-width:900px){.kontakt-daten>.kontakt-blume{right:-1rem;bottom:-.5rem;height:min(58%,25rem);opacity:.75}} @media(max-width:899.98px){.kontakt-daten{padding-bottom:2rem}.kontakt-bereich .kontakt-daten>.kontakt-spruch{display:none}} /* Spruch-Grafik: eckig und mit transparentem Hintergrund (keine Rundung/Fläche der Artikel-Bilder), unter den Kontaktdaten, Pflanze dahinter */ .kontakt-bereich .kontakt-daten>.kontakt-spruch{order:3;position:relative;z-index:2;margin:auto 0 auto -.25rem;width:min(44%,9.5rem);height:auto;border-radius:0;background:none;box-shadow:none;pointer-events:none} @media(min-width:900px){.kontakt-bereich .kontakt-daten>.kontakt-spruch{width:min(66%,14rem)}} .kontakt-name{margin:0 0 1.1rem;font-weight:700;font-size:1.15rem} .kontakt-liste{list-style:none;margin:0 0 2.5rem;padding:0;display:grid;gap:1.1rem} .kontakt-liste li{display:flex;gap:.85rem;align-items:center;line-height:1.5} .kontakt-liste a{color:var(--secondary-hover);text-decoration:none;font-weight:600;overflow-wrap:anywhere} .kontakt-liste li>span:last-child{min-width:0} .kontakt-liste a:hover{text-decoration:underline} .kontakt-ikon{flex:none;display:flex;width:2.4rem;height:2.4rem;align-items:center;justify-content:center;border-radius:.7rem;background:var(--accent-soft);color:#8fb45f} .kontakt-bereich .kontakt-karte{position:relative;margin:3.75rem 0 0;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 2px 12px rgb(0 0 0/.1);aspect-ratio:5/4;background:var(--surface-muted)} @media(min-width:640px){.kontakt-bereich .kontakt-karte{aspect-ratio:1600/560;margin-top:5rem}} .kontakt-karte>img:first-child{display:block;width:100%;height:100%;object-fit:cover} .kontakt-punkt{position:absolute;left:50%;top:50%;width:1rem;height:1rem;margin:-.5rem 0 0 -.5rem;border-radius:50%;background:var(--secondary);border:3px solid #fff;box-shadow:0 1px 6px rgb(0 0 0/.4)} .kontakt-marker{position:absolute;left:50%;top:50%;transform:translate(-50%,calc(-100% - 1.1rem));padding:.4rem .8rem;border-radius:.7rem;background:var(--secondary);color:#fff;font-size:.85rem;font-weight:600;white-space:nowrap;box-shadow:0 2px 8px rgb(0 0 0/.3)} .kontakt-marker::after{content:"";position:absolute;left:50%;top:100%;margin-left:-.4rem;border:.4rem solid transparent;border-top-color:var(--secondary)} .kontakt-karte-link,.kontakt-karte-quelle{position:absolute;padding:.3rem .7rem;border-radius:.6rem;background:rgb(255 255 255/.92);font-size:.8rem;color:var(--text);text-decoration:none;box-shadow:0 1px 4px rgb(0 0 0/.2)} .kontakt-karte-link{left:.75rem;bottom:.75rem;font-weight:600;color:var(--secondary-hover)} .kontakt-karte-quelle{right:.75rem;bottom:.75rem;font-size:.72rem;color:var(--text-muted)} .kontakt-karte-link:hover,.kontakt-karte-quelle:hover{text-decoration:underline} .kontakt-hinweis{margin:0 0 1.5rem;text-align:left!important;hyphens:manual!important;color:var(--text-muted);font-size:.95rem} .kontakt-form{display:grid;gap:1.1rem;margin-top:1rem} .kontakt-zeile{display:grid;grid-template-columns:1fr;gap:1.1rem} @media(min-width:640px){.kontakt-zeile{grid-template-columns:1fr 1fr}} .kontakt-form .feld{text-align:left} .kontakt-zustimmung{display:flex;gap:.75rem;align-items:flex-start;font-size:.9rem;line-height:1.5;color:var(--text-muted);text-align:left} .kontakt-zustimmung input{flex:0 0 auto;width:1.2rem;height:1.2rem;margin-top:.15rem;accent-color:var(--secondary)} .kontakt-senden{text-align:center;margin-top:.5rem} .kontakt-fang{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .editor-feld .kontaktformular-block{margin:1rem 0;padding:1rem 1.25rem;border:2px dashed var(--accent);border-radius:.9rem;background:var(--accent-soft);text-align:center;color:var(--text-muted);user-select:all} .editor-feld .kontaktformular-block::before{content:"✉ Kontaktformular (erscheint hier auf der Seite)";font-weight:600} .kontakt-pv-info{margin:0 0 1.5rem;text-align:left!important;hyphens:manual!important;font-size:.9rem;line-height:1.5;color:var(--text-muted)} .kontakt-pv-info a{color:var(--secondary-hover);font-weight:600;text-decoration:none;overflow-wrap:anywhere} .kontakt-pv-info a:hover{text-decoration:underline} /* Seite "Personalvertretung" (Team Lehr:Kraft): Einleitung mittig, drei Service-Kacheln, Zitat, Teamfoto, Bezirke, Newsletter */ body.seite-pv .seiteninhalt .artikel>p.lead{max-width:60rem;margin:0 auto 1.25rem;text-align:center;hyphens:manual;-webkit-hyphens:manual;font-size:1.1rem;line-height:1.65;color:#6b6b6b;font-weight:600} body.seite-pv .seiteninhalt .artikel>p:has(>a.knopf){margin:1.5rem 0 1rem;text-align:center} .pv-leistungen{display:grid;gap:1.25rem;grid-template-columns:minmax(0,1fr);margin:0 0 3rem} @media(min-width:900px){.pv-leistungen{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}} .pv-leistung{display:flex;flex-direction:column;align-items:center;gap:.9rem;padding:1.75rem 1.5rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:0 1px 2px rgb(0 0 0/.05);text-align:center} .pv-leistung h3{margin:0;font-size:1.2rem;line-height:1.3} .artikel .pv-leistung p{margin:0;text-align:center;hyphens:manual;-webkit-hyphens:manual;font-size:.95rem;line-height:1.6;color:var(--text-muted)} .pv-links{margin-top:auto;padding-top:.6rem;display:flex;flex-direction:column;align-items:center;gap:.55rem} .pv-links.reihe{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:.4rem} .pv-links.reihe .knopf{padding:.45rem .55rem;font-size:.74rem;white-space:nowrap} @media(min-width:900px){.pv-links.reihe{gap:.3rem}.pv-links.reihe .knopf{font-size:clamp(.62rem,calc(.28rem + .5vw),.8rem)}} .artikel blockquote.pv-zitat{max-width:none;margin:1.25rem auto 1rem;padding:0 1rem;border-left:0;font-style:italic;font-weight:500;font-size:1.1rem;line-height:1.7;text-align:center;color:var(--secondary)} @media(min-width:640px){.artikel blockquote.pv-zitat{font-size:1.35rem}} .pv-zitat::before{content:"„"} .pv-zitat::after{content:"“"} .artikel p.pv-zitat-name{margin:0 0 2.5rem;text-align:center;font-weight:700;color:var(--text-muted)} body.seite-pv .seiteninhalt .artikel>figure{margin:4rem 0 2rem} body.seite-pv .seiteninhalt .artikel>figure img{width:100%;height:auto;max-height:28rem;object-fit:cover;object-position:50% 40%} @media(min-width:640px){body.seite-pv .seiteninhalt .artikel>figure img{max-height:34rem}} .pv-intro{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr);align-items:center;margin:0 0 2.5rem} body.seite-pv .seiteninhalt .artikel .pv-intro-text>h2{margin:0 0 1.5rem;text-align:left} body.seite-pv .seiteninhalt .artikel .pv-intro-text>.pv-intro-inhalt>p.lead{margin-bottom:1.75rem} .pv-intro-kopf{display:none} @media(max-width:799.98px){body.seite-pv .seiteninhalt .artikel .pv-intro-text>h2{text-align:center}} @media(min-width:800px){.pv-intro{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:2.5rem}} body.seite-pv .seiteninhalt .artikel .pv-intro-text p.lead{max-width:none;margin:0 0 1rem;text-align:left;hyphens:manual;-webkit-hyphens:manual;font-size:1.1rem;line-height:1.65;color:#6b6b6b;font-weight:600} body.seite-pv .seiteninhalt .artikel .pv-intro-text p:has(>a.knopf){margin:1rem 0 0;text-align:left} @media(max-width:799.98px){ .pv-intro{gap:0} body.seite-pv .seiteninhalt .artikel .pv-intro>figure{order:-1} body.seite-pv .seiteninhalt .artikel .pv-intro>figure img{border-radius:var(--radius) var(--radius) 0 0!important} body.seite-pv .seiteninhalt .artikel .pv-intro>figure{margin-bottom:0;line-height:0} .pv-intro-text{background:var(--surface);border:1px solid var(--border);border-top:0;border-radius:0 0 var(--radius) var(--radius);overflow:hidden} body.seite-pv .seiteninhalt .artikel .pv-intro-text>h2{display:none} .pv-intro-kopf{display:flex;width:100%;align-items:center;justify-content:space-between;gap:.85rem;padding:.85rem 1.1rem;border:0;background:transparent;font:inherit;color:var(--text);text-align:left;cursor:pointer} .pv-intro-kopf .symbol{flex:none;color:var(--secondary-hover);transition:transform .25s} .pv-intro-kopf[aria-expanded=true] .symbol{transform:rotate(180deg)} .pv-intro-text.zu .pv-intro-inhalt{display:none} .pv-intro-inhalt{padding:.25rem 1.25rem 1.5rem} body.seite-pv .seiteninhalt .artikel .pv-intro-text p.lead{text-align:left;font-size:.95rem;font-weight:400;line-height:1.6;margin-bottom:1rem} body.seite-pv .seiteninhalt .artikel .pv-intro-text>.pv-intro-inhalt>p.lead{margin-bottom:1rem} body.seite-pv .seiteninhalt .artikel .pv-intro-text p:has(>a.knopf){text-align:left;margin:0} body.seite-pv .pv-intro-text a.knopf{padding:.4rem .9rem;font-size:.82rem;font-weight:600;background:transparent;color:var(--secondary-hover);border:1.5px solid var(--secondary-hover);box-shadow:none} body.seite-pv .seiteninhalt .artikel h2:not(#team-pv){font-size:1.25rem} .artikel blockquote.pv-zitat{font-size:.95rem;line-height:1.6;padding:0} .artikel p.pv-zitat-name{font-size:.9rem;margin-bottom:1.75rem} } body.seite-pv .seiteninhalt .artikel .pv-intro>figure{margin:0} body.seite-pv .seiteninhalt .artikel .pv-intro>figure img{width:100%;height:auto;max-height:none;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius);display:block} .newsletter-band{flex-direction:column;gap:1.5rem;position:relative;overflow:hidden;width:100vw;margin:1.5rem 0 3rem calc(50% - 50vw);padding:3rem 1rem;display:flex;align-items:center;justify-content:center} .artikel .newsletter-band>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;border-radius:0;object-fit:cover;object-position:50% 32%} .newsletter-band::before{content:"";position:absolute;inset:0;background:rgb(20 20 20/.5);z-index:1} .newsletter-band>h2,.newsletter-band>.newsletter-karte{position:relative;z-index:2} body .seiteninhalt .artikel .newsletter-band>h2{margin:0;color:#fff!important;text-align:center;text-shadow:0 1px 8px rgb(0 0 0/.4)} @media(min-width:800px){.newsletter-band{padding:4.5rem 2rem}} .newsletter-karte{position:relative;width:100%;max-width:64rem;margin:0 auto;padding:1.5rem 1.25rem;border-radius:calc(var(--radius) - .25rem);background:rgb(255 255 255/.88);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);box-shadow:0 4px 24px rgb(0 0 0/.18)} @media(min-width:800px){.newsletter-karte{padding:1.75rem 2rem}} .newsletter-karte .kontakt-hinweis{margin:0 0 .5rem;text-align:center!important;color:var(--text-muted);font-weight:600;font-size:.9rem} @media(min-width:1000px){.newsletter-karte .kontakt-hinweis{font-size:.95rem;white-space:nowrap}} .newsletter-felder{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)} @media(min-width:800px){.newsletter-felder{grid-template-columns:repeat(3,minmax(0,1fr))}} .newsletter-fuss{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center} @media(min-width:800px){.newsletter-fuss{flex-direction:row;justify-content:space-between;text-align:left}.newsletter-fuss .knopf{flex:0 0 auto}} .artikel .newsletter-recht{margin:0;font-size:.82rem;line-height:1.5;color:var(--text-muted);text-align:inherit;hyphens:manual;-webkit-hyphens:manual} /* Handy/Tablet schmal: die drei Service-Kacheln als Stapel zum seitlichen Wischen (gleiche Technik wie bei den Personen-Karten) */ @media(max-width:899.98px){ body.seite-pv{--rand:1rem} body.seite-pv .seiteninhalt .artikel>.pv-leistungen{display:flex;gap:.9rem;overflow-x:auto;margin-left:calc(-1 * var(--rand));margin-right:calc(-1 * var(--rand));padding:.25rem var(--rand) .9rem;scroll-snap-type:x mandatory;scroll-padding-left:var(--rand);-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain} body.seite-pv .seiteninhalt .artikel>.pv-leistungen::-webkit-scrollbar{display:none} body.seite-pv .pv-leistungen>.pv-leistung{flex:0 0 84%;scroll-snap-align:start} } @media(min-width:640px) and (max-width:899.98px){body.seite-pv .pv-leistungen>.pv-leistung{flex-basis:46%}} html:has(body.seite-pv){overflow-x:hidden} /* Seite "Deine Gewerkschaft" (GÖD): Zitat mittig, Landes-/Bundesleitung als Kacheln, Leistungen im Wechsel, GBA-Mitglieder */ .goed-kopf{max-width:60rem;margin:0 auto 2.5rem;text-align:center} .artikel .goed-kopf blockquote.pv-zitat{margin:0 auto 1rem;text-align:center} .artikel .goed-kopf p.pv-zitat-name{margin:0;text-align:center;hyphens:manual;-webkit-hyphens:manual} .goed-leitung{display:grid;gap:1.25rem;grid-template-columns:minmax(0,1fr);margin:0 0 1rem} @media(min-width:800px){.goed-leitung{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem}} .goed-leitung-karte{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:0 1px 2px rgb(0 0 0/.05);text-align:center} body.seite-goed .seiteninhalt .artikel .goed-leitung-karte figure{margin:0} body.seite-goed .seiteninhalt .artikel .goed-leitung-karte img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:0} .artikel .goed-leitung-karte h3{margin:1.25rem 1.25rem .6rem;font-size:1.15rem;color:var(--secondary-hover)} .artikel .goed-leitung-karte p{margin:0 1.25rem 1.5rem;text-align:center;font-weight:500;font-size:1rem;color:var(--text-muted);hyphens:manual;-webkit-hyphens:manual;line-height:1.7} .artikel h2.goed-ueberschrift,body.seite-goed .seiteninhalt .artikel>h2{margin-top:4rem} .goed-zeile{display:grid;gap:1.25rem;grid-template-columns:minmax(0,1fr);align-items:center;margin:0 0 2.5rem} @media(min-width:800px){ .goed-zeile{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:2.5rem} .goed-zeile:nth-of-type(even){grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)} .goed-zeile:nth-of-type(even)>figure{order:2} } body.seite-goed .seiteninhalt .artikel .goed-zeile figure{margin:0} body.seite-goed .seiteninhalt .artikel .goed-zeile img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)} .artikel .goed-text h3{margin:0 0 .75rem;font-size:1.3rem} .artikel .goed-text p{margin:0 0 1rem;text-align:left;hyphens:manual;-webkit-hyphens:manual;color:var(--text-muted);line-height:1.65} .person-weitere{display:block;margin-top:.2rem;font-size:.85rem;font-weight:400;color:var(--text-muted)} .artikel .goed-kopf p.pv-zitat-name{hyphens:manual;-webkit-hyphens:manual} body.seite-goed .seiteninhalt .artikel>h2#gba{margin-top:5rem} /* GÖD-Seite am Handy: Kacheln Landes-/Bundesleitung zuerst, Zitat darunter; die drei Leistungen zum seitlichen Wischen */ @media(max-width:799.98px){ body.seite-goed{--rand:1rem} .artikel .goed-kopf blockquote.pv-zitat{font-size:1rem;line-height:1.6;padding:0} body.seite-goed .seiteninhalt .artikel>.goed-zeilen{display:flex;gap:.9rem;overflow-x:auto;margin:0 calc(-1 * var(--rand));padding:.25rem var(--rand) .9rem;scroll-snap-type:x mandatory;scroll-padding-left:var(--rand);-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain} body.seite-goed .seiteninhalt .artikel>.goed-zeilen::-webkit-scrollbar{display:none} .goed-zeilen>.goed-zeile{flex:0 0 84%;scroll-snap-align:start;display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:0 1px 2px rgb(0 0 0/.05)} body.seite-goed .seiteninhalt .artikel .goed-zeilen .goed-zeile img{aspect-ratio:3/2;border-radius:0} .goed-zeilen .goed-text{display:flex;flex-direction:column;flex:1;padding:1rem 1.1rem 1.25rem} .artikel .goed-zeilen .goed-text h3{margin:0 0 .5rem;font-size:1.1rem} .artikel .goed-zeilen .goed-text p{font-size:.9rem;line-height:1.55} .goed-zeilen .goed-text p:last-child{margin:auto 0 0;padding-top:.5rem} body.seite-goed .seiteninhalt .artikel .goed-kopf{position:relative;margin:0;padding:1.25rem 1.25rem 1.5rem;display:flex;flex-direction:column;justify-content:center;border-radius:var(--radius);background:var(--secondary-soft);border:1px solid var(--secondary)} .artikel .goed-kopf blockquote.pv-zitat{font-weight:600;font-size:1.02rem} .goed-kopf .pv-zitat::before{content:"„";display:block;margin-bottom:-.2rem;font-size:3.2rem;line-height:1;font-style:normal;color:var(--secondary)} .goed-kopf .pv-zitat::after{content:"“"} } @media(min-width:640px) and (max-width:799.98px){.goed-zeilen>.goed-zeile{flex-basis:46%}} .goed-zeile .goed-text .knopf{white-space:nowrap} /* GÖD-Seite am Handy: Zitat und die zwei Leitungs-Kacheln in einer Reihe zum seitlichen Wischen */ @media(max-width:799.98px){ body.seite-goed .seiteninhalt .artikel>.goed-oben{display:flex;gap:.9rem;align-items:stretch;overflow-x:auto;margin:0 calc(-1 * var(--rand)) 1rem;padding:.25rem var(--rand) .9rem;scroll-snap-type:x mandatory;scroll-padding-left:var(--rand);-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain} body.seite-goed .seiteninhalt .artikel>.goed-oben::-webkit-scrollbar{display:none} .goed-oben>.goed-kopf,.goed-oben>.goed-leitung>.goed-leitung-karte{flex:0 0 84%;scroll-snap-align:start;margin:0} .goed-oben>.goed-leitung{display:contents} .artikel .goed-oben .goed-leitung-karte h3{margin:1rem .75rem .5rem;font-size:.95rem;line-height:1.3;min-height:2.6em;display:flex;align-items:center;justify-content:center} .artikel .goed-oben .goed-leitung-karte p{margin:0 .5rem auto;padding-bottom:1rem;font-size:.78rem;line-height:1.65} .artikel .goed-oben .goed-kopf blockquote.pv-zitat{font-size:.9rem;line-height:1.5} } @media(min-width:640px) and (max-width:799.98px){.goed-oben>.goed-kopf,.goed-oben>.goed-leitung>.goed-leitung-karte{flex-basis:46%}} /* Seite "Unser Service": sechs Service-Kacheln, nächste Veranstaltungen */ @media(min-width:900px){.pv-leistungen.sechs{grid-template-columns:repeat(3,minmax(0,1fr))}} .termin-liste.drei{margin-top:1rem} @media(min-width:900px){.termin-liste.drei{grid-template-columns:repeat(3,minmax(0,1fr))}} .artikel .termine-mehr{margin:1.75rem 0 0;text-align:center} .artikel .termine-leer{text-align:center;color:var(--text-muted)} body.seite-service .seiteninhalt .artikel>h2{margin-top:3.5rem} body.seite-service .seiteninhalt .artikel .pv-intro{margin-top:1rem} @media(min-width:800px){body.seite-service .pv-intro{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}} body.seite-service .seiteninhalt .artikel .pv-intro>figure img{aspect-ratio:4/3;object-position:50% 22%} body.seite-service .seiteninhalt .artikel .pv-intro-text>h2{font-size:1.9rem} body.seite-service .seiteninhalt .artikel .pv-intro-text p.lead{font-size:1.2rem;line-height:1.7} @media(max-width:799.98px){ body.seite-service .seiteninhalt .artikel .pv-intro>figure img{aspect-ratio:1/1;max-height:18rem;object-position:50% 20%} body.seite-service .seiteninhalt .artikel .pv-intro-text p.lead{font-size:.95rem;line-height:1.6} } /* Veranstaltungs-Karten überall einheitlich: Titel 1 Zeile, Zeit/Ort 1 Zeile, Vorschau 3 Zeilen (sonst mit "…" gekürzt) */ .termin-text strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .termin-meta{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .termin-was{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden} /* Seite "Unser Service": Beratung als eine große Kachel (Text links, Foto rechts – wie die Bezirke, nur gespiegelt) */ @media(min-width:800px){ body.seite-service .seiteninhalt .artikel .pv-intro{gap:0;align-items:stretch;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:0 1px 2px rgb(0 0 0/.05)} body.seite-service .seiteninhalt .artikel .pv-intro-text{display:flex;flex-direction:column;justify-content:center;padding:2rem 2.25rem} body.seite-service .seiteninhalt .artikel .pv-intro>figure{margin:0;height:100%;min-height:14rem;max-height:22rem} body.seite-service .seiteninhalt .artikel .pv-intro>figure img{height:100%;aspect-ratio:auto;border-radius:0} } @media(max-width:899.98px){.termin-liste{grid-template-columns:minmax(0,1fr)}} @media(min-width:900px){.termin-liste{grid-template-columns:repeat(2,minmax(0,1fr))}.termin-liste.drei{grid-template-columns:repeat(3,minmax(0,1fr))}} .termin{min-width:0;max-width:100%;box-sizing:border-box} /* iPhone/Safari: Hintergrund der Seite (zeigt kurz bei Overscroll bzw. hinter der unteren Browser-Leiste durch) in der normalen Seitenfarbe – nur wenn die Fußzeile im Bild ist, auf ihre Farbe umgestellt (siehe app.js), sonst kein auffälliger oranger Rand mehr, egal an welcher Kante er kurz durchscheint. Die Grundfarbe bleibt auf dem Body. */ html{background-color:var(--bg)} html.fuss-sichtbar{background-color:var(--secondary)} body{background-color:var(--bg)} /* "Der CLV": am Computer bleibt alles wie bisher (Text zuerst, dann die Leitgedanken). Am Handy fällt die Einleitung ganz weg – ihr Text (Foto, "Das ist der CLV", Vereinstext, Mitglied-werden-Button) steckt dort stattdessen in der ersten Kachel des Präsidium-Karussells (siehe bausteine.php), sonst stünde er doppelt da. */ .intro>figure{display:none} .intro>.clv-intro-titel{display:none} @media(max-width:799.98px){ body.seite-ueberuns .seiteninhalt .artikel{display:flex;flex-direction:column} body.seite-ueberuns .seiteninhalt .artikel>*{order:3} body.seite-ueberuns .seiteninhalt .artikel>.leitgedanken-raster{order:1;margin-bottom:2.5rem} body.seite-ueberuns .seiteninhalt .artikel>.intro{display:none} body.seite-ueberuns .bildband{display:none} body.seite-ueberuns .artikel>.lauftext{margin:1rem 0 1rem} } @media(max-width:799.98px){ body.seite-ueberuns .seiteninhalt .artikel>.lauftext{margin:3.5rem 0!important} body.seite-ueberuns .seiteninhalt .artikel>h2#clv-team{margin-top:0!important;padding-top:0} } /* Leitgedanken: aufgeklappt wechselt Überschrift, Plus/Minus und Rahmen von Grün auf Orange (zugeklappt wieder Grün) */ .lg-karte.lg-offen,.lg-inhalt.lg-voll{--lg-farbe:var(--secondary)} /* Kurzinfos: aufklappbare Kachel "Ausführlichere Wegweiser" über der Suche (zugeklappt schmal, aufgeklappt volle Breite) */ details.aufklapp.wegweiser-box{margin:0 0 1.5rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:0 1px 2px rgb(0 0 0/.05);overflow:hidden} details.aufklapp.wegweiser-box:last-of-type{border-bottom:1px solid var(--border)} details.aufklapp.wegweiser-box summary{padding:.9rem 1.1rem;font-size:1rem;color:var(--text)} details.aufklapp.wegweiser-box[open]{border-color:var(--secondary)} .wegweiser-kopf{display:flex;align-items:center;gap:.9rem;min-width:0} .wegweiser-kopf .kachel-ikon{flex:none;margin:0} .wegweiser-titel{display:flex;flex-direction:column;gap:.1rem;min-width:0} .wegweiser-titel strong{font-size:1.05rem;color:var(--secondary-hover)} .wegweiser-titel small{font-size:.88rem;font-weight:400;color:var(--text-muted);line-height:1.4} details.aufklapp.wegweiser-box summary:hover .wegweiser-titel strong{color:var(--secondary)} .wegweiser-box .aufklapp-inhalt{padding:0 1.1rem 1.25rem} .wegweiser-raster{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)} @media(min-width:900px){.wegweiser-raster{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}} .wegweiser-karte{display:flex;gap:1rem;align-items:flex-start;padding:1rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg)} .wegweiser-karte img{flex:none;width:5.5rem;height:auto;border-radius:.5rem;box-shadow:0 1px 6px rgb(0 0 0/.15)} .wegweiser-text{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;min-width:0} .wegweiser-text h3{margin:0;font-size:1.05rem;line-height:1.3} .wegweiser-text p{margin:0;font-size:.9rem;line-height:1.5;color:var(--text-muted)} .wegweiser-text .knopf{margin-top:.25rem} .wegweiser-text h3{overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto;font-size:1rem} .wegweiser-box summary,.wegweiser-box .aufklapp-inhalt,.wegweiser-titel,.wegweiser-text,.wegweiser-text h3,.wegweiser-text p{text-align:left} .wegweiser-karte{align-items:stretch} .wegweiser-karte img{align-self:flex-start} .wegweiser-text{flex:1;align-items:stretch;gap:.5rem} .wegweiser-text h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:1rem} .wegweiser-text p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden;min-height:6em} .wegweiser-text .knopf{margin-top:auto;align-self:flex-start} @media(max-width:899.98px){.wegweiser-karte img{width:4.5rem}.wegweiser-text h3{font-size:.95rem}.wegweiser-text p{min-height:0}} .wegweiser-karte img{width:4.75rem} .wegweiser-text h3{font-size:.92rem!important} /* Seite "Schule heute": aktuelle Ausgabe (Titelblatt + Text) und ältere Ausgaben als Karten */ .sh-aktuell{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr);align-items:center;justify-items:center;margin:0 0 1rem;padding:1.5rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:0 1px 2px rgb(0 0 0/.05)} @media(min-width:800px){.sh-aktuell{grid-template-columns:16rem minmax(0,1fr);gap:2.5rem;justify-items:stretch;padding:2rem 2.25rem}} .artikel .sh-aktuell figure{margin:0} .artikel .sh-aktuell img{display:block;width:100%;max-width:14rem;height:auto;border-radius:.6rem!important;box-shadow:0 6px 24px rgb(0 0 0/.22)} @media(min-width:800px){.artikel .sh-aktuell img{max-width:none}} .artikel .sh-text h2{margin:0 0 .75rem;font-size:1.6rem} .artikel .sh-text p{margin:0 0 1rem;text-align:left;hyphens:manual;-webkit-hyphens:manual;color:var(--text-muted);line-height:1.65} .artikel .sh-text p:last-child{margin-bottom:0} @media(max-width:799.98px){.artikel .sh-text h2{text-align:center;font-size:1.4rem}.artikel .sh-text p:has(>a.knopf){text-align:center}} .artikel>h2:has(+.sh-ausgaben){margin-top:3.5rem} .sh-ausgaben ul{list-style:none;margin:0;padding:0;display:grid;gap:.9rem;grid-template-columns:minmax(0,1fr)} @media(min-width:800px){.sh-ausgaben ul{grid-template-columns:repeat(2,minmax(0,1fr))}} .sh-ausgaben li{margin:0;padding:0} .artikel .sh-ausgaben a.datei{display:flex;align-items:center;gap:.5rem;padding:1rem 1.25rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:0 1px 2px rgb(0 0 0/.05);text-decoration:none;color:var(--text-muted);font-weight:600;transition:border-color .15s,transform .15s} .artikel .sh-ausgaben a.datei::after{content:"jetzt downloaden";margin-left:auto;padding-left:.75rem;font-size:.82rem;font-weight:600;color:var(--secondary-hover);white-space:nowrap} .artikel .sh-ausgaben a.datei:hover{border-color:var(--secondary);transform:translateY(-2px);color:var(--secondary-hover)} @media(max-width:399.98px){.artikel .sh-ausgaben a.datei::after{content:"↓"}} .unter-titel{margin:0 .75rem;padding:.75rem 0 .35rem;border-bottom:2px solid var(--accent)} .unter-titel:not(:first-child){margin-top:.6rem} .unter-titel+li{margin-top:.3rem} /* Mitglied werden (Online-Anmeldung) */ .anm-form{max-width:56rem;margin:0 auto;padding:1.75rem 1.25rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:0 1px 2px rgb(0 0 0/.05)} @media(min-width:640px){.anm-form{padding:2.25rem 2.5rem}} .anm-form fieldset{border:0;margin:0 0 2rem;padding:0;min-width:0} .anm-form legend{padding:0;margin:0 0 1rem;font-size:1.15rem;font-weight:600;display:flex;align-items:center;gap:.6rem;color:var(--text-muted)} .anm-form legend::before{content:"";width:.5rem;height:1.25rem;border-radius:.25rem;background:var(--secondary)} .anm-raster{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)} @media(min-width:640px){.anm-raster{grid-template-columns:repeat(2,minmax(0,1fr))}.anm-raster .voll,.anm-form .voll{grid-column:1/-1}.anm-raster.drittel{grid-template-columns:repeat(6,minmax(0,1fr))}.anm-raster.drittel .z2{grid-column:span 2}.anm-raster.drittel .z3{grid-column:span 3}.anm-raster.drittel .z4{grid-column:span 4}} .anm-feld{display:block;text-align:left} .anm-feld .feldkopf{display:flex;align-items:center;gap:.5rem;margin-bottom:.35rem} .anm-feld label{font-size:.95rem} .anm-feld input,.anm-feld select,.anm-feld textarea{width:100%;box-sizing:border-box} .anm-form .pflicht{color:var(--secondary-hover)} .anm-hinweis{margin:0 0 1.5rem;text-align:left!important;color:var(--text-muted);font-size:.95rem} .infotext{margin:0 0 .6rem;padding:.65rem .9rem;border-radius:.75rem;background:var(--secondary-soft);border:1px solid #f3cf9b;font-size:.85rem;line-height:1.45;color:var(--text);text-align:left} .infotext[hidden]{display:none} .anm-feld.hat-fehler input,.anm-feld.hat-fehler select,.anm-feld.hat-fehler textarea{border-color:#c0392b} .anm-feld .fehlertext{display:block;margin-top:.3rem;color:#c0392b;font-size:.85rem;font-weight:500} .anm-haken{display:flex;gap:.75rem;align-items:flex-start;padding:1rem;border:1px solid var(--border);border-radius:.9rem;background:var(--bg);font-size:.9rem;line-height:1.5;color:var(--text-muted);text-align:left;cursor:pointer} .anm-haken+.anm-haken{margin-top:.75rem} .anm-haken input{flex:none;width:1.25rem;height:1.25rem;margin:.1rem 0 0;accent-color:var(--secondary)} .anm-haken.hat-fehler{border-color:#c0392b;background:#fbeceb} .anm-haken a{color:var(--secondary-hover);font-weight:500} .anm-absenden{text-align:center;margin-top:.5rem} .anm-absenden p{margin:1rem auto 0;max-width:40rem;font-size:.82rem;line-height:1.5;color:var(--text-muted);text-align:center!important;hyphens:manual} .anm-danke{max-width:40rem;margin:0 auto;padding:2.5rem 1.5rem;text-align:center;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:0 1px 2px rgb(0 0 0/.05)} .anm-haken-gross{width:4rem;height:4rem;border-radius:50%;background:var(--accent-soft);color:#4d7a1f;display:grid;place-items:center;margin:0 auto 1.25rem;font-size:2rem;font-weight:700} .anm-danke h2{margin:0 0 .75rem;font-size:1.5rem} .anm-danke p{margin:.5rem auto;color:var(--text-muted);text-align:center!important} /* Mitgliederbereich (/mitglieder) */ .mb-leiste{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;align-items:center;justify-content:center;margin:0 0 1.75rem;font-size:.95rem} .mb-leiste a,.mb-leiste button{color:var(--secondary-hover);font-weight:600;text-decoration:none;background:none;border:0;padding:0;cursor:pointer;font:inherit;font-weight:600} .mb-leiste a:hover,.mb-leiste button:hover{text-decoration:underline} .mb-leiste form{margin:0} .mb-karte{max-width:34rem;margin:0 auto 1.5rem;padding:1.5rem 1.25rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:0 1px 2px rgb(0 0 0/.05);text-align:left} @media(min-width:640px){.mb-karte{padding:2rem}} .mb-info{max-width:44rem} .mb-formular{display:grid;gap:1rem} .mb-formular h2{margin:0 0 .25rem;font-size:1.2rem} .mb-formular input{width:100%;box-sizing:border-box} .mb-zeigen{display:flex;gap:.5rem;align-items:center;font-size:.9rem;color:var(--text-muted)} .mb-klein{font-size:.88rem;color:var(--text-muted);margin:0;text-align:left!important} .mb-klein a{color:var(--secondary-hover);font-weight:600} .mb-sperre{text-align:center} .mb-sperre .kachel-ikon{margin:0 auto 1rem} .mb-sperre p{text-align:center!important;color:var(--text-muted)} .mb-kacheln{display:grid;gap:1.25rem;grid-template-columns:minmax(0,1fr)} @media(min-width:700px){.mb-kacheln{grid-template-columns:repeat(3,minmax(0,1fr))}} .mb-kachel{display:flex;flex-direction:column;gap:1rem;padding:1.5rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:0 1px 2px rgb(0 0 0/.05);text-decoration:none;color:inherit;transition:transform .15s,border-color .15s,box-shadow .15s} .mb-kachel:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 8px 24px rgb(58 54 44/.1)} .mb-kachel-text{display:flex;flex-direction:column;gap:.35rem} .mb-kachel-text strong{font-size:1.1rem;color:var(--secondary-hover)} .mb-kachel-text span{font-size:.92rem;line-height:1.5;color:var(--text-muted)} .mb-info p,.mb-info li{text-align:left;hyphens:manual;-webkit-hyphens:manual;color:var(--text-muted);line-height:1.65} .mb-info h2,.mb-info h3{margin:1.5rem 0 .5rem;font-size:1.2rem} .mb-info code,.aufklapp-inhalt code{padding:.15rem .5rem;border-radius:.5rem;background:var(--surface-muted);font-weight:600;user-select:all} .mb-logo{display:block;max-width:14rem;max-height:6rem;width:auto;height:auto;margin:0 0 1.25rem;border-radius:.6rem} .mb-vorteil{max-width:44rem;margin:0 auto .75rem;border:1px solid var(--border)!important;border-radius:var(--radius);background:var(--surface);padding:0 1.1rem} .mb-vorteil summary{padding:1rem 0} .mb-vorteil-titel{display:flex;flex-direction:column;gap:.15rem} .mb-vorteil-titel strong{font-size:1.1rem;color:var(--secondary-hover)} .mb-vorteil-titel small{font-size:.88rem;font-weight:400;color:var(--text-muted)} .mb-vorteil .aufklapp-inhalt{padding:0 0 1.1rem} .admin-reiter{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.25rem} .admin-reiter a{padding:.4rem .9rem;border-radius:2rem;background:var(--surface-muted);color:var(--text);text-decoration:none;font-weight:600;font-size:.9rem} .admin-reiter a.aktiv{background:var(--secondary);color:#fff} form.inline{display:inline} /* Dienstrecht Assistent */ .sprung-text{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .mb-assi{max-width:48rem;margin:0 auto} .mb-assi-hinweis{margin:0 0 1.25rem;padding:.9rem 1.1rem;border:1px solid #f3cf9b;border-radius:var(--radius);background:var(--secondary-soft);font-size:.85rem;line-height:1.5;color:var(--text);text-align:left} .mb-assi-hinweis a{color:var(--secondary-hover);font-weight:600} .mb-assi-themen p{margin:0 0 .75rem;text-align:center!important;color:var(--text-muted)} .mb-assi-chips{display:grid;gap:.75rem;grid-template-columns:minmax(0,1fr);margin-bottom:1.25rem} @media(min-width:640px){.mb-assi-chips{grid-template-columns:repeat(2,minmax(0,1fr))}} .mb-assi-chip{display:flex;flex-direction:column;gap:.2rem;align-items:flex-start;padding:.85rem 1rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);text-align:left;cursor:pointer;font:inherit;transition:border-color .15s} .mb-assi-chip:hover{border-color:var(--secondary)} .mb-assi-chip strong{color:var(--secondary-hover);font-size:.95rem} .mb-assi-chip span{font-size:.85rem;color:var(--text-muted);line-height:1.4} .mb-assi-verlauf{display:flex;flex-direction:column;gap:.9rem;margin-bottom:1.25rem} .mb-assi-blase{padding:.85rem 1.1rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);text-align:left;font-size:.95rem;line-height:1.6;color:var(--text)} .mb-assi-blase.frage{align-self:flex-end;max-width:85%;background:var(--secondary-soft);border-color:#f3cf9b} .mb-assi-blase.fehler{background:var(--fehler-soft);border-color:#f0b8b3;color:#7a1a14} .mb-assi-blase p{margin:0 0 .6rem;text-align:left;hyphens:manual} .mb-assi-blase p:last-child,.mb-assi-blase ul:last-child{margin-bottom:0} .mb-assi-blase ul{margin:0 0 .6rem;padding-left:1.3rem} .mb-assi-recht{font-size:.85rem;color:var(--text-muted)} .mb-assi-quellen{margin-top:.75rem;padding-top:.6rem;border-top:1px solid var(--border);font-size:.82rem;color:var(--text-muted)} .mb-assi-quellen ul{margin:.25rem 0 0;padding-left:1.1rem} .mb-assi-quellen a{color:var(--secondary-hover)} .mb-assi-rueck{display:flex;align-items:center;gap:.5rem;margin-top:.75rem;font-size:.82rem;color:var(--text-muted)} .mb-assi-rueck button{border:1px solid var(--border);background:var(--bg);border-radius:.6rem;padding:.2rem .55rem;cursor:pointer;font-size:1rem} .mb-assi-denkt{color:var(--text-muted);font-style:italic} .mb-assi-eingabe{position:sticky;bottom:.75rem;padding:.75rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:0 4px 16px rgb(0 0 0/.1)} .mb-assi-eingabe textarea{width:100%;box-sizing:border-box;resize:vertical;min-height:3.2rem} .mb-assi-zeile{display:flex;justify-content:space-between;gap:.75rem;margin-top:.5rem} .mb-assi-zeile .knopf:last-child{margin-left:auto} .mb-assi-wartung{text-align:center} /* Feinschliff Mitgliederbereich: Vorteile mittig, Assistent als Kachel */ details.aufklapp.mb-vorteil{margin:0 auto .75rem;max-width:44rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:0 1.1rem;box-shadow:0 1px 2px rgb(0 0 0/.05)} details.aufklapp.mb-vorteil:last-of-type{border-bottom:1px solid var(--border)} details.aufklapp.mb-vorteil summary{padding:1rem 0;font-size:1rem} .mb-vorteil+p,.mb-leiste+.hinweis{text-align:center} .artikel>p:has(>a[href="/mitglieder"]){text-align:center;margin-top:1.5rem} .mb-assi{max-width:48rem;margin:0 auto 1.5rem;padding:1.5rem 1.25rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:0 1px 2px rgb(0 0 0/.05)} @media(min-width:640px){.mb-assi{padding:2rem}} .mb-assi-blase{background:var(--bg)} .mb-assi-blase.frage{background:var(--secondary-soft)} .mb-assi-chip{background:var(--bg)} .mb-assi-eingabe{box-shadow:none;background:var(--bg);bottom:.5rem} /* Mitgliederbereich: Übersicht im Stil des bisherigen Mitgliederbereichs */ .mb-hallo{max-width:80rem;margin:0 auto 2rem;text-align:left} .mb-hallo h2{margin:0 0 .35rem;font-size:1.9rem;color:var(--secondary-hover)} .mb-hallo p{margin:0;text-align:left!important;color:var(--text-muted)} .mb-ueberschrift{display:flex;align-items:center;gap:.6rem;margin:0 0 1.25rem!important;font-size:1.35rem!important;text-align:left} .mb-ueberschrift .symbol{color:var(--secondary-hover);flex:none} .mb-start .seiteninhalt .artikel{max-width:none} .mb-kachel{position:relative;min-height:12rem;padding:1.6rem} .mb-kachel .kachel-ikon{width:3rem;height:3rem;border-radius:.9rem} .mb-kachel-text{flex:1} .mb-kachel-pfeil{align-self:flex-end;color:var(--text-soft);transition:color .15s} .mb-kachel:hover .mb-kachel-pfeil{color:var(--secondary)} /* Etwas mehr visuelle Abwechslung: Kacheln mit eigenem Titelbild zeigen das Foto statt des Symbols, die übrigen wechseln reihum die Akzentfarbe des Symbol-Kreises (3 Töne aus den Markenfarben) statt immer gleich grün zu sein. */ .mb-kachel.mit-bild{padding-top:0;overflow:hidden} .mb-kachel.mit-bild .kachel-ikon{display:none} .mb-kachel-foto{display:block;margin:0 -1.6rem;aspect-ratio:16/9;overflow:hidden;background:var(--surface-muted)} .mb-kachel-foto img{display:block;width:100%;height:100%;object-fit:cover} .mb-kachel.akzent-1 .kachel-ikon{background:var(--secondary-soft);color:var(--secondary-hover)} .mb-kachel.akzent-2 .kachel-ikon{background:color-mix(in srgb,var(--accent) 55%,var(--secondary) 45%);color:var(--text)} .mb-kachel-neu{position:absolute;top:.9rem;right:.9rem;z-index:1;padding:.2rem .6rem;border-radius:2rem;background:var(--secondary);color:#fff;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;box-shadow:0 1px 4px rgb(0 0 0/.2)} /* Neuigkeiten & nächster Termin unter den Kacheln: dieselben Karten wie auf /aktuelles bzw. /veranstaltungen, damit nichts doppelt gebaut werden muss und es überall gleich aussieht. */ .mb-neuigkeiten{display:grid;gap:1.25rem;grid-template-columns:minmax(0,1fr)} @media(min-width:700px){.mb-neuigkeiten{grid-template-columns:repeat(3,minmax(0,1fr))}} .mb-neuigkeiten .beitrag-karte,.mb-neuigkeiten .termin{height:100%} /* Zwei Termine übereinander statt einer einzelnen (kleineren) Termin-Kachel neben den Beitrags-Fotos. */ .mb-termine{display:flex;flex-direction:column;gap:1.25rem} .mb-termine .termin{height:auto;flex:1} .mb-kacheln+.mb-ueberschrift{margin-top:2.75rem!important} .mb-neuigkeiten+.mb-mehr-link{display:flex;gap:.6rem 2rem;flex-wrap:wrap;margin-top:2.5rem} .mb-mehr-link a{font-weight:600;color:var(--secondary-hover);text-decoration:underline;text-underline-offset:3px} .mb-start .mb-leiste{justify-content:flex-start;margin-bottom:1.25rem} .mb-sperre{max-width:none;padding:2.25rem 1.5rem} .mb-sperre .kachel-ikon{background:var(--secondary-soft);color:var(--secondary-hover)} .mb-sperre h3{margin:0 0 .5rem;font-size:1.25rem} @media(min-width:900px){.mb-kacheln{gap:1.5rem}} /* Mitgliederbereich, Übersicht: Kopf höher, damit die Überschrift Abstand zum Menü hat */ body.mb-start .hero:not(.kompakt) .hero-text{min-height:19rem;padding-top:7rem;padding-bottom:3rem} @media(min-width:640px){body.mb-start .hero:not(.kompakt) .hero-text{min-height:38rem;padding-top:11.5rem;padding-bottom:9rem}} /* Dienstrecht Assistent – Chatfenster im Stil des bisherigen Mitgliederbereichs */ .mb-chat{position:relative;max-width:56rem;margin:0 auto 1.5rem;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:0 1px 2px rgb(0 0 0/.05);text-align:left} .mb-chat-kopf{position:relative;z-index:3;display:flex;align-items:center;gap:.85rem;padding:.85rem 1rem;border-bottom:1px solid var(--border);background:var(--surface)} @media(min-width:640px){.mb-chat-kopf{padding:.9rem 1.5rem}} .mb-chat-avatar{flex:none;display:flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border-radius:.75rem;background:var(--accent);color:#fff;box-shadow:0 1px 2px rgb(0 0 0/.1)} .mb-chat-avatar.klein{display:none} @media(min-width:640px){.mb-chat-avatar.klein{display:flex}} .mb-chat-titel{flex:1;min-width:0} .mb-chat-titel h2{display:flex;align-items:center;gap:.5rem;margin:0!important;font-size:1rem!important;line-height:1.2;text-align:left;color:var(--text)} .mb-chat-beta{padding:.1rem .5rem;border-radius:2rem;background:var(--secondary-soft);color:var(--secondary-hover);font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase} .mb-chat-link{padding:0;border:0;background:none;font:inherit;font-size:.8rem;color:var(--text-muted);text-decoration:underline;text-underline-offset:2px;cursor:pointer} .mb-chat-link:hover{color:var(--text)} .mb-chat-neu{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .8rem;border:1px solid var(--border);border-radius:.6rem;background:var(--surface);font:inherit;font-size:.85rem;font-weight:500;color:var(--text-muted);cursor:pointer} .mb-chat-neu:hover{border-color:var(--secondary);color:var(--text)} .mb-chat-info{flex:none;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:0;border-radius:50%;background:var(--accent-hover,#7fa04f);color:#fff;box-shadow:0 0 0 4px var(--accent-soft);cursor:pointer;transition:transform .15s} .mb-chat-info:hover{transform:scale(1.06)} .mb-chat-pop{position:absolute;z-index:4;top:4.4rem;left:.75rem;right:.75rem;max-height:min(60dvh,26rem);overflow-y:auto;padding:1rem;border:1px solid var(--border);border-radius:1rem;background:var(--surface);box-shadow:0 12px 32px rgb(0 0 0/.18);font-size:.88rem;line-height:1.55;color:var(--text)} .mb-chat-pop[hidden]{display:none} @media(min-width:640px){.mb-chat-pop{width:27rem;left:auto;right:1.5rem}.mb-chat-pop.links{left:1.5rem;right:auto}} .mb-chat-pop p{margin:.6rem 0 0;text-align:left!important;hyphens:manual} .mb-chat-pop a{color:var(--secondary-hover);font-weight:600} .mb-chat-pop-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem} .mb-chat-pop-kopf h3{margin:0!important;font-size:1rem!important} .mb-chat-pop-kopf button{padding:0;border:0;background:none;font:inherit;font-size:.85rem;color:var(--text-muted);text-decoration:underline;cursor:pointer} .mb-chat-rahmen{position:relative} .mb-chat-log{height:min(62dvh,40rem);min-height:22rem;overflow-y:auto;padding:1.25rem 1rem;background:rgb(245 244 238/.55)} @media(min-width:640px){.mb-chat-log{padding:1.25rem 1.5rem}} .mb-chat-log>*+*{margin-top:1.25rem} .mb-chat-start{max-width:42rem;margin:0 auto!important;padding:.5rem 0 1rem} .mb-chat-start h3{margin:.5rem 0 .4rem!important;text-align:center;font-size:1.4rem!important} .mb-chat-start>p{margin:0 auto 1.25rem;max-width:28rem;text-align:center!important;font-size:.95rem;color:var(--text-muted)} .mb-chat-start[hidden]{display:none} .mb-chat-themen{display:grid;gap:.75rem;grid-template-columns:minmax(0,1fr)} @media(min-width:640px){.mb-chat-themen{grid-template-columns:repeat(2,minmax(0,1fr))}} .mb-chat-thema{display:flex;align-items:flex-start;gap:.8rem;padding:1rem;border:1px solid var(--border);border-radius:.9rem;background:var(--surface);box-shadow:0 1px 2px rgb(0 0 0/.05);text-align:left;font:inherit;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s} .mb-chat-thema:hover{transform:translateY(-2px);border-color:var(--secondary);box-shadow:0 6px 18px rgb(58 54 44/.1)} .mb-chat-thema-ikon{flex:none;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:.6rem;background:var(--secondary-soft);color:var(--secondary-hover)} .mb-chat-thema strong{display:block;color:var(--text);font-size:.98rem} .mb-chat-thema small{display:block;margin-top:.15rem;font-size:.85rem;line-height:1.35;color:var(--text-muted)} .mb-chat-zeile{display:flex;gap:.75rem} .mb-chat-zeile.rechts{justify-content:flex-end} .mb-chat-frage{margin:0;max-width:85%;padding:.65rem 1rem;border-radius:1.1rem 1.1rem .3rem 1.1rem;background:var(--secondary);color:#fff;font-size:.97rem;line-height:1.5;white-space:pre-wrap;text-align:left!important;box-shadow:0 1px 2px rgb(0 0 0/.1)} .mb-chat-antwort{flex:1;min-width:0} .mb-chat-text{padding:.8rem 1rem;border:1px solid var(--border);border-radius:.3rem 1.1rem 1.1rem 1.1rem;background:var(--surface);font-size:.97rem;line-height:1.6;color:var(--text);box-shadow:0 1px 2px rgb(0 0 0/.05)} @media(min-width:640px){.mb-chat-text{padding:1rem 1.25rem}} .mb-chat-text p{margin:0 0 .7rem;text-align:left!important;hyphens:manual} .mb-chat-text p:last-child,.mb-chat-text ul:last-child{margin-bottom:0} .mb-chat-text ul{margin:0 0 .7rem;padding-left:1.4rem} .mb-chat-text li{margin:.2rem 0;text-align:left} .mb-chat-denkt{display:flex;align-items:center;gap:.75rem;color:var(--text-muted)} .mb-chat-punkte{display:inline-flex;gap:.25rem} .mb-chat-punkte i{width:.4rem;height:.4rem;border-radius:50%;background:var(--accent-hover,#7fa04f);animation:mb-huepf 1s infinite} .mb-chat-punkte i:nth-child(2){animation-delay:.15s}.mb-chat-punkte i:nth-child(3){animation-delay:.3s} @keyframes mb-huepf{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-.35rem)}} .mb-chat-cursor{display:inline-block;width:2px;height:1rem;margin-left:2px;vertical-align:-2px;background:var(--accent-hover,#7fa04f);animation:mb-blink 1s infinite} @keyframes mb-blink{50%{opacity:0}} @media(prefers-reduced-motion:reduce){.mb-chat-punkte i,.mb-chat-cursor{animation:none}} .mb-chat-bild{margin:1rem 0 0;overflow:hidden;border:1px solid var(--border);border-radius:.8rem;background:var(--bg)} .mb-chat-bild figcaption{padding:.6rem 1rem;font-size:.85rem;color:var(--text-muted)} .mb-chat-bild img{display:block;width:100%;height:auto} .mb-chat-fuss{padding:0 .25rem} .mb-chat-recht{display:flex;gap:.5rem;margin:.6rem 0 0;font-size:.85rem;line-height:1.5;color:var(--text-muted);text-align:left!important} .mb-chat-recht svg{flex:none;margin-top:.2rem;color:var(--accent-hover,#7fa04f)} .mb-chat-quellenzeile{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-top:.6rem} .mb-chat-quellen{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none} .mb-chat-quellen li{margin:0} .mb-chat-quellen a,.mb-chat-quellen span{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .65rem;border-radius:2rem;background:var(--accent-soft);color:var(--text);font-size:.78rem;font-weight:500;text-decoration:none} .mb-chat-quellen a:hover{background:#dbe8c9} .mb-chat-quellen svg{color:var(--accent-hover,#7fa04f)} .mb-chat-quellen small{font-weight:400;color:var(--text-muted)} .mb-chat-kopieren{margin-left:auto;display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .5rem;border:0;border-radius:.5rem;background:none;font:inherit;font-size:.78rem;font-weight:500;color:var(--text-muted);cursor:pointer} .mb-chat-kopieren:hover{background:var(--surface-muted);color:var(--text)} .mb-chat-rueck{margin-top:.6rem;font-size:.85rem;color:var(--text-muted)} .mb-chat-rueck-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem} .mb-chat-rueck-zeile button{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .7rem;border:1px solid var(--border);border-radius:.5rem;background:var(--surface);font:inherit;font-weight:500;cursor:pointer} .mb-chat-rueck-zeile button:hover{border-color:var(--secondary);color:var(--text)} .mb-chat-rueck-zeile button[aria-pressed=true]{border-color:var(--secondary);background:var(--secondary-soft);color:var(--text)} .mb-chat-rueck-box{margin-top:.5rem} .mb-chat-rueck-box:not(:empty){padding:.8rem;border:1px solid var(--border);border-radius:.8rem;background:var(--surface)} .mb-chat-rueck-box label span{font-weight:600;color:var(--text)} .mb-chat-rueck-box textarea{display:block;width:100%;box-sizing:border-box;margin-top:.4rem;resize:none} .mb-chat-klein{margin:.5rem 0 0;font-size:.75rem;line-height:1.5;color:var(--text-soft);text-align:left!important} .mb-chat-klein a{color:var(--text-muted);font-weight:500} .mb-chat-rueck-fehler{margin:.5rem 0 0;color:var(--secondary-hover);font-weight:600} .mb-chat-knoepfe{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem} .mb-chat-danke{margin:0;font-weight:600;color:var(--accent-hover,#7fa04f);text-align:left!important} .mb-chat-fehler{display:flex;gap:.75rem;padding:.8rem 1rem;border:1px solid rgb(243 146 0/.4);border-radius:.8rem;background:var(--secondary-soft);font-size:.92rem;color:var(--text)} .mb-chat-fehler svg{flex:none;margin-top:.15rem;color:var(--secondary-hover)} .mb-chat-fehler p{margin:0;text-align:left!important} .mb-chat-nochmal{display:inline-flex;align-items:center;gap:.35rem;margin-top:.5rem;padding:0;border:0;background:none;font:inherit;font-weight:600;color:var(--secondary-hover);text-decoration:underline;cursor:pointer} .mb-chat-voll{margin:1rem 0 0;padding:.8rem 1rem;border-radius:.8rem;background:var(--surface-muted);text-align:center!important;font-size:.92rem;color:var(--text-muted)} .mb-chat-voll button{padding:0;border:0;background:none;font:inherit;font-weight:600;color:var(--secondary-hover);text-decoration:underline;cursor:pointer} .mb-chat-runter{position:absolute;left:50%;bottom:.75rem;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--text-muted);box-shadow:0 2px 8px rgb(0 0 0/.15);cursor:pointer} .mb-chat-runter[hidden]{display:none} .mb-chat-form{padding:.85rem 1rem;border-top:1px solid var(--border);background:var(--surface)} @media(min-width:640px){.mb-chat-form{padding:.9rem 1.5rem}} .mb-chat-eingabe{display:flex;align-items:flex-end;gap:.5rem;padding:.5rem;border:1px solid var(--border);border-radius:1rem;background:rgb(245 244 238/.6);transition:border-color .15s,background .15s} .mb-chat-eingabe:focus-within{border-color:var(--secondary);background:var(--surface)} .mb-chat-eingabe textarea{flex:1;min-height:2.75rem;max-height:10rem;padding:.6rem .5rem;border:0;background:transparent;resize:none;font:inherit;font-size:1rem;color:var(--text);outline:none;box-sizing:border-box} .mb-chat-eingabe textarea:disabled{cursor:not-allowed} .mb-chat-senden,.mb-chat-stopp{flex:none;display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border:0;border-radius:.75rem;color:#fff;cursor:pointer;transition:background .15s} .mb-chat-senden{background:var(--secondary)} .mb-chat-senden:hover:not(:disabled){background:var(--secondary-hover)} .mb-chat-senden:disabled{background:var(--surface-muted);color:var(--text-soft);cursor:default} .mb-chat-stopp{background:var(--text)} .mb-chat-senden[hidden],.mb-chat-stopp[hidden]{display:none} .mb-chat-zaehler{margin:.4rem 0 0;text-align:right!important;font-size:.75rem;color:var(--text-soft)} .mb-chat-zaehler.voll{font-weight:700;color:var(--secondary-hover)} .mb-chat-zaehler[hidden]{display:none} /* Mitgliederbereich: Feinschliff (Kontrollkästchen in einer Zeile, kleiner Kopf auf Unterseiten) */ .mb-formular input[type=checkbox]{width:auto;flex:none} .mb-zeigen{white-space:nowrap} /* Kopf: angemeldete Mitglieder sehen "Mitgliederbereich" mit Aufklappmenü (Mein Konto, Abmelden) */ .mb-kopfmenue{position:relative;display:flex;flex-direction:column;gap:.25rem} .mb-kopfmenue-knopf{display:flex;align-items:stretch} .mb-kopfmenue-knopf .anmelden-knopf{flex:1} .mb-kopfmenue-pfeil{display:none} .mb-kopfmenue-liste{list-style:none;margin:0;padding:0 0 0 .5rem;display:block} .mb-kopfmenue-liste[hidden]{display:block} .mb-kopfmenue-liste li{margin:0} .mb-kopfmenue-liste a,.mb-kopfmenue-liste button{display:flex;width:100%;min-height:2.6rem;align-items:center;padding:.5rem 1rem;border:0;border-radius:.75rem;background:none;font:inherit;color:var(--text);text-decoration:none;cursor:pointer;text-align:left} .mb-kopfmenue-liste a:hover,.mb-kopfmenue-liste button:hover{background:var(--secondary-soft)} .mb-kopfmenue-liste form{margin:0} @media(min-width:1200px){ .mb-kopfmenue-knopf .anmelden-knopf{flex:none;border-radius:.75rem 0 0 .75rem!important} .mb-kopfmenue-pfeil{display:flex;align-items:center;justify-content:center;width:2.2rem;height:2.5rem;padding:0;border:0;border-left:1px solid rgb(255 255 255/.45);border-radius:0 .75rem .75rem 0;background:var(--accent);color:#fff;cursor:pointer} .mb-kopfmenue-pfeil:hover{background:#8fb45f} .mb-kopfmenue-pfeil .symbol{transition:transform .2s} .mb-kopfmenue-pfeil[aria-expanded=true] .symbol{transform:rotate(180deg)} .mb-kopfmenue-liste{position:absolute;right:0;top:calc(100% + .4rem);z-index:60;min-width:12rem;padding:.4rem;border-radius:1rem;background:#fff;box-shadow:0 20px 40px -12px rgb(0 0 0/.3),0 0 0 1px rgb(0 0 0/.05)} .mb-kopfmenue-liste[hidden]{display:none} } body.seite-mitglieder:not(.mb-start) .hero.schmal .hero-text{min-height:13rem} @media(min-width:1200px){body.seite-mitglieder:not(.mb-start) .hero.schmal .hero-text{min-height:16rem}} @media(max-width:639.98px){body.seite-mitglieder:not(.mb-start) .hero.schmal .hero-text{min-height:9rem}} /* Suchfenster: Lupe öffnet ein Fenster in der Mitte, die Seite dahinter wird dunkler und unscharf */ body.suche-offen{overflow:hidden} .suche-overlay{position:fixed;inset:0;z-index:2000;display:flex;align-items:flex-start;justify-content:center;padding:6rem 1rem 1rem;background:rgb(24 22 18/.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .22s ease} .suche-overlay[hidden]{display:none} .suche-overlay.offen{opacity:1} @media(min-width:900px){.suche-overlay{align-items:center;padding:2rem}} .suche-fenster{width:100%;max-width:40rem;max-height:calc(100dvh - 8rem);display:flex;flex-direction:column;overflow:hidden;border-radius:1.25rem;background:#fff;box-shadow:0 30px 70px -15px rgb(0 0 0/.55);transform:translateY(-10px) scale(.98);transition:transform .28s cubic-bezier(.2,.8,.2,1)} .suche-overlay.offen .suche-fenster{transform:none} @media(min-width:900px){.suche-fenster{max-height:min(34rem,calc(100dvh - 4rem))}} .suche-feld{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;border-bottom:1px solid var(--border);color:var(--text-muted)} .suche-feld input{flex:1;min-width:0;padding:.35rem 0;border:0;outline:0;background:none;font:inherit;font-size:1.15rem;color:var(--text);-webkit-appearance:none} .suche-feld input::-webkit-search-cancel-button{display:none} .suche-zu{flex:none;padding:.15rem .5rem;border:1px solid var(--border);border-radius:.4rem;background:var(--bg);font:inherit;font-size:.72rem;font-weight:600;color:var(--text-muted);cursor:pointer} .suche-liste{list-style:none;margin:0;padding:.35rem;overflow-y:auto} .suche-liste:empty{display:none} .suche-liste a{display:grid;gap:.1rem;padding:.6rem .85rem;border-radius:.75rem;text-decoration:none;color:var(--text)} .suche-liste a:hover,.suche-liste a.gewaehlt{background:var(--secondary-soft)} .suche-liste strong{font-size:1rem;color:var(--text)} .suche-liste .s-art{font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--secondary-hover)} .suche-liste .s-text{font-size:.85rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .suche-hinweis{margin:0;padding:.7rem 1.25rem;border-top:1px solid var(--border);font-size:.82rem;color:var(--text-muted);text-align:left!important;hyphens:manual} .suche-liste:empty+.suche-hinweis{border-top:0} .suche-hinweis a{font-weight:600;color:var(--secondary-hover)} /* Verwaltung Mitglieder: Zahlenübersicht und Startpasswort */ .mb-zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.75rem;margin:0 0 1.25rem} .mb-zahl{display:flex;flex-direction:column;gap:.15rem;padding:.85rem 1rem;border:1px solid var(--border);border-radius:.9rem;background:var(--surface,#fff);color:inherit;text-decoration:none} .mb-zahl b{font-size:1.6rem;line-height:1.1} .mb-zahl span{font-size:.82rem;color:var(--muted,#6b6b6b)} .mb-zahl.aktiv{border-color:var(--secondary);box-shadow:0 0 0 2px var(--secondary-soft)} .mb-startpw{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.95rem;background:var(--secondary-soft);padding:.1rem .45rem;border-radius:.4rem;user-select:all;white-space:nowrap} /* Mitgliederbereich mobil: die drei Hauptkacheln kompakt (Symbol links, Text, Pfeil rechts) */ @media(max-width:699.98px){ .mb-kacheln{gap:.75rem} .mb-kachel{flex-direction:row;align-items:center;gap:.9rem;min-height:0;padding:.85rem 1rem} .mb-kachel .kachel-ikon{flex:none;width:2.5rem;height:2.5rem;border-radius:.75rem} .mb-kachel-text{gap:.1rem} .mb-kachel-text strong{font-size:1rem} .mb-kachel-text span{font-size:.85rem;line-height:1.35} .mb-kachel-pfeil{align-self:center;flex:none} /* Titelbild passt nicht gut in die kompakte Handy-Zeile – dort bleibt es beim Symbol, wie bei den anderen Kacheln. */ .mb-kachel.mit-bild{padding-top:.85rem;padding-left:1rem} .mb-kachel.mit-bild .kachel-ikon{display:flex} .mb-kachel-foto{display:none} .mb-kachel-neu{top:.5rem;right:.5rem} } .seo-block{margin:1.25rem 0} .seo-felder{display:grid;gap:.9rem;padding-top:.75rem} .seo-zaehler.zu-lang{color:#b45309;font-weight:600} /* Mitgliederbereich: Mitgliedsnummer im Willkommen, "Meine Daten" im Konto */ .mb-hallo .mb-nummer{margin:0 0 .5rem;font-size:.95rem;color:var(--text-muted)} .mb-hallo .mb-nummer strong{color:var(--secondary-hover)} .mb-daten dl{display:grid;grid-template-columns:max-content 1fr;gap:.5rem 1.25rem;margin:0 0 1rem} .mb-daten dt{color:var(--text-muted);font-size:.9rem} .mb-daten dd{margin:0;font-weight:500} .mb-daten{margin-bottom:1.25rem} /* Cookie-Hinweis */ .datenhinweis{position:fixed;left:0;right:0;bottom:0;z-index:90;padding:0 .75rem calc(.75rem + env(safe-area-inset-bottom));pointer-events:none} .datenhinweis[hidden]{display:none} .dh-innen{pointer-events:auto;max-width:62rem;margin:0 auto;background:var(--surface,#fff);border:1px solid var(--border);border-radius:1rem;box-shadow:0 10px 40px rgb(24 22 18/.22);padding:1rem 1.25rem;display:flex;align-items:center;gap:1rem 1.5rem;flex-wrap:wrap} .dh-text{flex:1 1 26rem;min-width:0} .dh-text strong{display:block;margin-bottom:.2rem;color:var(--secondary-hover)} .dh-text p{margin:0;font-size:.9rem;line-height:1.5;color:var(--text-muted);text-align:left} .dh-text a{color:var(--secondary-hover);text-decoration:underline} .dh-ok{flex:none} .dh-oeffnen{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px} @media(max-width:639.98px){.dh-innen{padding:.85rem 1rem}.dh-text p{font-size:.85rem}.dh-ok{width:100%}} @media print{.datenhinweis{display:none}} /* Verwaltung: Besucherstatistik */ .stat-filter{display:flex;flex-wrap:wrap;gap:.4rem .5rem;margin:0 0 1.25rem;align-items:center} .stat-chip{padding:.35rem .9rem;border-radius:2rem;border:1px solid var(--border);background:var(--surface,#fff);color:inherit;text-decoration:none;font-size:.9rem} .stat-chip:hover{border-color:var(--secondary)} .stat-chip.aktiv{background:var(--secondary);border-color:var(--secondary);color:#fff;font-weight:600} .stat-trenner{width:1px;height:1.4rem;background:var(--border);margin:0 .4rem} .stat-karte{margin-bottom:1.25rem} .stat-zwei{display:grid;gap:1.25rem;grid-template-columns:minmax(0,1fr)} @media(min-width:800px){.stat-zwei{grid-template-columns:repeat(2,minmax(0,1fr))}} .stat-svg{display:block;width:100%;height:auto;max-height:12rem} .stat-balken{fill:var(--secondary)} .stat-balken.gruen{fill:var(--accent)} .stat-balken:hover{opacity:.75} .stat-achse{stroke:var(--border);stroke-width:1} .stat-label{font-size:11px;fill:var(--text-muted)} .stat-wert{font-size:11px;font-weight:700;fill:var(--text)} .stat-liste{list-style:none;margin:0;padding:0} .stat-liste li{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0;border-bottom:1px solid var(--border)} .stat-liste li:last-child{border-bottom:0} th.rechts,td.rechts{text-align:right} .stat-zwei>.karte{margin-top:0} .bild-quelle{margin-top:2rem;padding-top:.85rem;border-top:1px solid var(--border);font-size:.8rem;color:var(--text-muted)}