/* ========================================================================== Stil der Kategorieseiten. Eigene Datei statt Kopie der Startseite: diese Seiten brauchen weder Scroll-Film noch Naht noch Formular. Beim Wechsel von einer Kategorie zur naechsten liegt die Datei schon im Zwischenspeicher. ========================================================================== */ :root{ --canvas:#F3F5F9; --canvas-deep:#E2E7EF; --panel:#FFFFFF; --ink:#22303F; --ink-2:#666666; --line:#D7DDE6; --line-strong:#A6B0BD; --accent:#3366CC; --accent-hover:#2851A8; --nav-h:68px; /* Dieselbe Schriftleiter wie auf der Startseite, damit ein Wechsel zwischen Startseite und Kategorieseite nicht auffaellt. rem rechnet gegen (16px), nicht gegen die 17px am body. */ --t-mono:.7rem; /* 11,2px Feldnamen, Zaehler, Hinweise */ --t-kicker:.82rem; /* 13,1px Zeile ueber der Ueberschrift */ --t-klein:.87rem; /* 13,9px Kleingedrucktes */ --t-text:.97rem; /* 15,5px Fliesstext */ --t-lead:1.06rem; /* 17,0px Einleitung unter der Ueberschrift */ --t-titel-s:1.06rem; /* 17,0px Titel in kleinen Bloecken */ --t-titel:1.22rem; /* 19,5px Titel in Kacheln */ --t-h2:clamp(1.5rem,3.4vw,2.1rem); /* 33,6px Zwischenueberschrift */ --font-display:"Bricolage Grotesque",Georgia,serif; --font-body:"Instrument Sans",system-ui,-apple-system,sans-serif; --font-mono:"Space Mono",ui-monospace,monospace; --ease:cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;text-size-adjust:100%} html,body{overflow-x:hidden;overflow-x:clip} body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font-body); font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased} h1,h2,h3{font-family:var(--font-display);font-weight:800;line-height:1.08; letter-spacing:-.02em;margin:0; overflow-wrap:break-word} /* Getrennt wird nur in den kleinen Titeln, nicht in Ueberschriften. */ h3{-webkit-hyphens:auto;hyphens:auto} p{margin:0} img{max-width:100%} a{color:var(--accent);text-decoration:none;transition:color .3s var(--ease)} a:hover{color:var(--accent-hover)} :focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px} .wrap{width:min(1180px,92vw);margin-inline:auto} .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink); color:var(--canvas);padding:.7rem 1.1rem} .skip:focus{left:0} .mono{font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.14em; text-transform:uppercase;color:var(--ink-2)} /* ---- Kopfleiste ---- */ .nav{position:sticky;top:0;z-index:50;height:var(--nav-h); background:rgba(243,245,249,.94);backdrop-filter:blur(12px); border-bottom:1px solid var(--line)} .nav .wrap{display:flex;align-items:center;justify-content:space-between; gap:1rem;height:var(--nav-h)} .nav img{height:34px;width:auto;display:block} .nav .zurueck{font-size:var(--t-text);color:var(--ink-2)} .nav .zurueck:hover{color:var(--accent)} .navtel{font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.06em;color:var(--ink)} @media (max-width:620px){.navtel{display:none}} /* ---- Kopf der Seite ---- */ .k-kopf{padding:clamp(2.4rem,6vw,4.5rem) 0 clamp(1.6rem,3vw,2.4rem)} .k-kopf .kicker{display:flex;align-items:center;gap:.7rem;margin-bottom:.85rem; font-size:var(--t-kicker)} .k-kopf .kicker::before{content:"";width:26px;height:1px;background:var(--accent);flex:none} .k-kopf h1{font-size:clamp(1.9rem,4.4vw,2.8rem);max-width:24ch} .k-intro{margin-top:1.4rem;max-width:62ch;color:var(--ink-2);font-size:var(--t-lead)} .k-intro strong{color:var(--ink);font-weight:500} /* ---- Bildraster ---- */ .k-raster{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr); padding-bottom:clamp(2.5rem,6vw,4.5rem)} @media (max-width:900px){.k-raster{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.k-raster{grid-template-columns:1fr}} .k-bild{padding:0;border:1px solid var(--line);background:var(--canvas-deep); border-radius:12px;overflow:hidden;cursor:pointer;display:block;position:relative; transition:border-color .4s var(--ease),transform .4s var(--ease), box-shadow .4s var(--ease)} .k-bild:hover{border-color:var(--line-strong);transform:translateY(-3px); box-shadow:0 16px 38px -24px rgba(22,38,60,.45)} .k-bild img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block} /* ---- Abschluss ---- */ .k-schluss{background:var(--ink);color:#EDF1F7;padding:clamp(2.6rem,6vw,4.4rem) 0} .k-schluss h2{color:#fff;font-size:var(--t-h2);max-width:26ch} .k-schluss p{color:#AFBACA;margin-top:1rem;max-width:56ch} .k-schluss .reihe{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.9rem} .btn{display:inline-flex;align-items:center;justify-content:center; padding:.85rem 1.6rem;border-radius:999px;font-size:var(--t-text);font-weight:500; transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)} .btn-primary{background:var(--accent);color:#fff} .btn-primary:hover{background:var(--accent-hover);color:#fff} .btn-ghost{border:1px solid rgba(255,255,255,.32);color:#EDF1F7} .btn-ghost:hover{border-color:#fff;color:#fff} /* ---- Fussbereich ---- */ footer{background:var(--ink);color:#8D9BAE;padding:0 0 3.5rem;font-size:var(--t-text)} .foot{display:grid;gap:2rem;grid-template-columns:2fr 1fr 1fr;padding-top:3rem; border-top:1px solid rgba(255,255,255,.14)} @media (max-width:760px){.foot{grid-template-columns:1fr}} footer h3{color:#EDF1F7;font-size:var(--t-titel-s);margin-bottom:.8rem} .foot-mark{width:46px;height:auto;margin-bottom:1rem;opacity:.9} footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem} footer a{color:#8D9BAE} footer a:hover{color:#EDF1F7} .foot-bottom{margin-top:2.6rem;padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.1);display:flex;gap:1.2rem; flex-wrap:wrap;justify-content:space-between;font-size:var(--t-klein)} /* ---- Galerie, wie auf der Startseite ---- */ dialog.galerie{border:0;padding:0;margin:0;width:100vw;max-width:100vw; height:100dvh;max-height:100dvh;background:rgba(16,24,34,.97); color:#EDF1F7;overflow:hidden} dialog.galerie::backdrop{background:rgba(16,24,34,.9)} .g-rahmen{display:grid;grid-template-rows:auto 1fr auto;height:100%; padding:clamp(.8rem,2.5vw,1.6rem)} .g-kopf{display:flex;align-items:center;gap:1rem} .g-titel{font-family:var(--font-display);font-weight:800;font-size:var(--t-titel);margin:0;color:#fff} .g-zaehler{font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.14em; color:#93A1B4;margin:0 auto 0 0} .g-knopf{width:44px;height:44px;flex:none;display:grid;place-items:center; border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06); color:#EDF1F7;border-radius:50%;cursor:pointer; transition:background .25s var(--ease),border-color .25s var(--ease)} .g-knopf:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)} .g-knopf svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} .g-buehne{position:relative;min-height:0;margin:clamp(.6rem,2vw,1.2rem) 0} .g-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block} .g-laden{position:absolute;inset:0;display:grid;place-items:center;margin:0; font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.14em;color:#93A1B4} .g-fuss{display:flex;justify-content:center;gap:.8rem;align-items:center} .g-hinweis{font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.13em; text-transform:uppercase;color:#6E7C8D;margin:0} @media (max-width:640px){.g-titel{font-size:var(--t-titel-s)}.g-hinweis{display:none}} @media (prefers-reduced-motion:reduce){*,*::before,*::after{ animation:none !important;transition:none !important}} /* ---- Über uns: die Personen --------------------------------------- Kein Bilderraster, deshalb eigene Regeln. Die Namen sind h2, die Berufsbezeichnung steht als eigene Zeile darunter: so liest ein Vorleseprogramm erst den Namen, dann das Handwerk. */ .u-text{max-width:62ch;color:var(--ink-2);font-size:var(--t-lead); display:grid;gap:1.1rem;padding-bottom:clamp(2rem,4vw,3rem)} .u-text strong{color:var(--ink);font-weight:500} .u-leute{display:grid;gap:1.4rem;grid-template-columns:repeat(3,1fr); padding-bottom:clamp(2.5rem,6vw,4rem)} @media (max-width:860px){.u-leute{grid-template-columns:1fr}} .u-person{background:var(--panel);border:1px solid var(--line); border-radius:14px;padding:clamp(1.4rem,3vw,1.9rem)} .u-titel{font-size:var(--t-h2);margin-bottom:1.4rem} .u-person h3{font-size:var(--t-titel)} .u-person .rolle{font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.14em; text-transform:uppercase;color:var(--accent);margin:.5rem 0 .9rem} .u-person p{color:var(--ink-2);font-size:var(--t-text)}