@charset "UTF-8";
/*
Theme Name: Neumann-Schönknecht
Theme URI: https://neumann-schoenknecht.de
Author: Juliane Neumann-Schönknecht
Description: Eigenes Theme für Trauerreden und Beratung. Farben, Schriften und Abstände folgen dem abgestimmten Entwurf. Die Schriften liegen im Theme, es wird keine Verbindung zu Google aufgebaut.
Version: 2.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: neumann-schoenknecht
*/

/* ============================================================
   1. Schriften, aus dem Theme, nicht von Google
   ============================================================ */

/* Jost */
@font-face{
  font-family:'Jost';font-style:normal;font-weight:300 500;font-display:swap;
  src:url('assets/schriften/jost-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Jost';font-style:normal;font-weight:300 500;font-display:swap;
  src:url('assets/schriften/jost-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Source Sans 3 */
@font-face{
  font-family:'Source Sans 3';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('assets/schriften/source-sans-3-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Source Sans 3';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('assets/schriften/source-sans-3-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Source Sans 3';font-style:italic;font-weight:400;font-display:swap;
  src:url('assets/schriften/source-sans-3-kursiv-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Source Sans 3';font-style:italic;font-weight:400;font-display:swap;
  src:url('assets/schriften/source-sans-3-kursiv-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Source Serif 4 */
@font-face{
  font-family:'Source Serif 4';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('assets/schriften/source-serif-4-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Source Serif 4';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('assets/schriften/source-serif-4-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   2. Grundwerte
   Regel: keine neuen Zahlenwerte, nur diese Variablen benutzen.
   ============================================================ */
:root{
  --sand:#F0BD69; --terracotta:#DA8352; --brand-bg:#E0976D; --dusk:#6B9FAF; --petrol:#347B91; --mauve:#6E557D;
  --ground:#FBF8F5; --surface:#FFFFFF; --ink:#2A2422; --ink-mute:#5C5049; --line:#E6DCD3;
  --terracotta-ink:#9E5426; --petrol-ink:#256274; --mauve-ink:#6E5A7C;
  --band-ink:#2A2422; --on-color:#FFFFFF;
  --display:"Jost",-apple-system,"Segoe UI",sans-serif;
  --body:"Source Sans 3",-apple-system,"Segoe UI",sans-serif;
  --serif:"Source Serif 4",Georgia,serif;
  --g1:.25rem;--g2:.5rem;--g3:1rem;--g4:1.5rem;--g5:2rem;--g-spalten:clamp(2rem,4vw,3rem);--measure:66ch;
  --t-label:.75rem; --t-small:.9rem; --t-body:1rem; --t-mid:1.2rem;
  --t-h2:clamp(1.6rem,3vw,2.1rem); --t-h1:clamp(2rem,4.6vw,3rem);
  --sp-label:.2em; --sp-knopf:.14em; --sp-head:.04em; --pad:clamp(1.25rem,5vw,2.5rem);
  /* Grundstellung: Trauerreden. Die Beratungsseiten stellen unten um. */
  --accent:var(--terracotta); --accent-ink:var(--terracotta-ink); --accent-soft:var(--sand); --band:#F6E8DE;
}

/* Bereichsfarben. Die Klasse setzt functions.php nach dem Titel der Seite. */
body.bereich-petrol{
  --accent:var(--petrol); --accent-ink:var(--petrol-ink); --accent-soft:var(--dusk); --band:#EAF0F2;
}
body.bereich-terracotta{
  --accent:var(--terracotta); --accent-ink:var(--terracotta-ink); --accent-soft:var(--sand); --band:#F6E8DE;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#1B1917; --surface:#232120; --ink:#EFE9E3; --ink-mute:#A99C93; --line:#3A3532;
    --band-ink:#EFE9E3;
    --sand:#E3B76D; --terracotta:#CE7C4C; --dusk:#7FAFBD; --petrol:#4E93A8; --mauve:#9C88A8;
    --terracotta-ink:#E29A6C; --petrol-ink:#79B4C8; --mauve-ink:#B7A3C2;
  }
  :root:not([data-theme="light"]) body.bereich-petrol{--band:#22292C}
  :root:not([data-theme="light"]) body,
  :root:not([data-theme="light"]) body.bereich-terracotta{--band:#2A2320}
}

/* ============================================================
   3. Grundgerüst
   ============================================================ */
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:var(--fs,19.5px);line-height:1.7;-webkit-font-smoothing:antialiased}
:root[data-fs="gross"]{--fs:22px}
:root[data-fs="sehr-gross"]{--fs:24.5px}
:root[data-fs="sehr-gross"] .top-in{gap:var(--g3)}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* WordPress legt um alles einen Behälter. Der darf nichts beschneiden. */
.wp-site-blocks{overflow:visible}
.ausblenden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Kopf ---------- */
.top{position:sticky;top:0;z-index:20;background:var(--ground);border-bottom:1px solid var(--line)}
.top-in{max-width:1180px;margin:0 auto;padding:.7rem var(--pad);display:flex;align-items:center;gap:var(--g4);flex-wrap:wrap;position:relative}
.mark{display:none;line-height:0;text-decoration:none;flex:0 0 auto}
.mark img{height:54px;width:auto;display:block;border-radius:2px}
footer .mark{display:block}
footer .mark img{height:82px}
nav{display:flex;gap:var(--g4);flex-wrap:wrap;margin-left:auto;font-family:var(--display);font-size:var(--t-body)}
nav a{text-decoration:none;color:var(--ink);padding-bottom:2px;border-bottom:2px solid transparent}
nav a.on{color:var(--ink);border-bottom-color:var(--accent)}
.head-cta{display:flex;gap:var(--g2);align-items:center;flex-wrap:wrap}
.tel{font-family:var(--display);font-size:var(--t-small);text-decoration:none;background:var(--accent);color:#fff;padding:.45rem 1rem;white-space:nowrap}
.wa{font-family:var(--display);font-size:var(--t-small);text-decoration:none;border:1px solid var(--accent);color:var(--accent-ink);padding:.4rem .95rem;white-space:nowrap}
.wa:hover{background:var(--band)}
body.seite-kontakt .top .head-cta .tel,
body.seite-kontakt .top .head-cta .wa{display:none}

/* Auf der Startseite liegt die Kopfleiste über dem Bild */
body.startseite .top{position:absolute;left:0;right:0;background:transparent;border-bottom:0;z-index:30}
body.startseite .top-in{padding-top:2.1rem;max-width:none;padding-left:max(1.25rem,3.1%)}
body.startseite .top .head-cta{display:none}

/* Menüknopf */
.burger{display:grid;gap:5px;background:none;border:0;cursor:pointer;padding:.4rem;margin-right:auto}
.burger span{display:block;width:30px;height:2px;background:var(--ink);transition:background .2s}
body.startseite .burger span{background:#fff}
.menu{background:var(--surface);border-top:1px solid var(--line)}
body.startseite .menu{background:var(--ground)}
.menu .in{max-width:1180px;margin:0 auto;padding:1.2rem var(--pad) 1.6rem;display:grid;gap:var(--g3)}
.menu nav{display:grid;gap:var(--g2);margin:0;font-size:var(--t-mid)}
.menu .head-cta{display:flex;gap:var(--g2);flex-wrap:wrap;margin-top:.6rem}

/* ---------- Bänder ---------- */
.band{padding:clamp(3rem,7vw,5.5rem) var(--pad)}
.band>.in{max-width:1180px;margin:0 auto}
.col{max-width:var(--measure)}
.band>.in.col>p,.band>.in.col>h1,.band>.in.col>h2,.band>.in.col>h3,.band>.in.col>ul,.band>.in.col>ol{max-width:var(--measure)}
.band>.in.col.center>p{margin-left:auto;margin-right:auto}
.center{margin-left:auto;margin-right:auto}
.tint{background:var(--band);color:var(--band-ink)}
.fill{background:var(--accent);color:#fff}
.fill .eyebrow,.fill .lead{color:inherit;opacity:.92}

.eyebrow{font-family:var(--display);font-weight:500;font-size:var(--t-label);letter-spacing:var(--sp-label);text-transform:uppercase;color:var(--ink-mute);margin:0 0 .9rem}
h1{font-family:var(--display);font-weight:300;font-size:var(--t-h1);line-height:1.12;margin:0 0 1rem;text-wrap:balance;letter-spacing:-.01em}
h2{font-family:var(--display);font-weight:300;font-size:var(--t-h2);line-height:1.2;margin:0 0 .9rem;text-wrap:balance}
h3{font-family:var(--display);font-weight:500;font-size:var(--t-mid);margin:0 0 .35rem}
p{margin:0 0 1.05rem}
.lead{font-size:var(--t-mid);color:var(--ink-mute)}
.quiet{color:var(--ink-mute)}
ul.plain{list-style:none;margin:0;padding:0;display:grid;gap:var(--g3)}
ul.plain li{padding-left:1.35rem;position:relative}
ul.plain li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--accent-ink);opacity:.55}
.stack{display:grid;gap:var(--g5)}

/* ---------- Bausteine ---------- */
.steps{display:grid;gap:var(--g4)}
.step{display:grid;grid-template-columns:2.6rem 1fr;gap:var(--g3);align-items:start}
.step .n{font-family:var(--display);font-size:var(--t-mid);font-weight:400;color:var(--accent-ink);line-height:1.1}
.note{border-left:2px solid var(--accent);padding:.2rem 0 .2rem 1.15rem}
.pull{font-family:var(--display);font-weight:300;font-size:var(--t-h2);line-height:1.35;text-wrap:balance}
.zitat{font-family:var(--serif)}
.pull.zitat{font-weight:400}
.voices{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--g4) var(--g5)}
.voice p{font-size:var(--t-body);margin:0}
.voice .who{font-family:var(--display);letter-spacing:var(--sp-label);text-transform:uppercase;font-size:var(--t-label);color:var(--ink-mute);margin-top:.6rem}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--g4) var(--g5);font-family:var(--display);font-weight:300}
.facts b{display:block;font-size:var(--t-h2);line-height:1.1;color:var(--accent-ink)}
.facts span{font-size:var(--t-small);color:var(--ink-mute)}
.gate{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--g3)}
.gate a,.gate .ext{display:flex;flex-direction:column;gap:var(--g2);text-decoration:none;padding:1.5rem;border:1px solid var(--line);background:var(--surface);border-top:4px solid var(--g)}
.gate .ext{border-style:dashed;border-top-style:solid;background:transparent}
.gate a:hover{border-color:var(--g)}
.gate h3{color:var(--gi,var(--g))}
.gate small{font-family:var(--display);letter-spacing:var(--sp-label);text-transform:uppercase;font-size:var(--t-label);color:var(--ink-mute);margin-top:auto;padding-top:.7rem}
.more{display:grid;gap:var(--g2);font-family:var(--display)}
.more a{text-decoration:none;border-bottom:0;padding:.35rem 0}
.more a::after{content:" →";color:var(--accent-ink)}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--g2);margin-top:1.2rem}
.cta{font-family:var(--display);font-size:var(--t-body);text-decoration:none;padding:.72rem 1.45rem;border:2px solid var(--accent);color:var(--accent-ink);white-space:nowrap}
.cta:hover{background:var(--band)}
.cta.solid{background:var(--sand);border-color:var(--sand);color:#2A2422}
.cta.solid:hover{filter:brightness(.96)}
.fill .cta.solid{background:var(--surface);border-color:var(--surface);color:var(--accent-ink)}
.fill .cta.solid:hover{filter:none;background:#F3EEE9;border-color:#F3EEE9}
.fill .cta{border-color:#FFFFFF;color:#FFFFFF}
.fill .cta:hover{background:rgba(255,255,255,.16)}
.badge-row{display:flex;gap:var(--g3);align-items:center;margin-top:1.6rem;flex-wrap:wrap}
.badge-row img{width:clamp(130px,17vw,168px);height:auto;flex:none;border-radius:50%}
.badge-row p{margin:0;flex:1 1 260px}
.invite{display:flex;gap:var(--g5);align-items:center;justify-content:space-between;flex-wrap:wrap}
.invite>div{flex:1 1 340px}
.stamp{flex:none;width:180px;height:180px;border-radius:50%;background:var(--sand);color:#2A2422;text-decoration:none;display:grid;place-content:center;text-align:center;font-family:var(--display);font-weight:300;line-height:1.3;padding:1.1rem;transform:rotate(-5deg);transition:transform .25s ease}
.stamp b{display:block;font-weight:500;font-size:var(--t-mid);margin-bottom:.25rem}
.stamp span{font-size:var(--t-small);color:#4A3D34}
.stamp:hover{transform:rotate(0) scale(1.04)}
@media(max-width:760px){.stamp{width:158px;height:158px;margin:0 auto}}
.area{display:grid;gap:var(--g3);align-content:start}
.themen{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:var(--g4) var(--g5);margin-top:1.6rem}
.themen h3{color:var(--accent-ink)}
.themen p{margin:0}
.stimmen{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--g5)}
.stimmen p{font-size:var(--t-body);margin:0}
.stimmen .who{font-family:var(--display);letter-spacing:var(--sp-label);text-transform:uppercase;font-size:var(--t-label);color:var(--ink-mute);margin-top:.7rem}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--g-spalten);align-items:center}
/* WordPress setzt zwischen Geschwisterelementen einen Abstand und verschont nur das erste.
   In meinen Rastern verschiebt das die zweite Spalte nach unten. */
.split>*,.drei-in>*,.themen>*,.voices>*,.gate>*,.steps>*,.stimmen>*,.kontaktliste>*{margin-block-start:0;margin-top:0}

/* Zwei Textspalten beginnen oben, nicht in der Mitte */
.split:has(> .area){align-items:start}
@media (max-width:760px){.split{grid-template-columns:1fr}.step{grid-template-columns:2rem 1fr}}
.price{font-family:var(--display);font-weight:300;font-size:var(--t-mid)}
table{border-collapse:collapse;width:100%;font-size:var(--t-body)}
th,td{text-align:left;padding:.6rem .8rem .6rem 0;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--display);font-weight:500}
.scroll{overflow-x:auto}

/* ============================================================
   4. Startseite
   ============================================================ */
.hero2{position:relative;min-height:min(100vh,61.5vw);min-height:100svh;display:grid;
  background-image:url('assets/bilder/kopfbild-portraet.jpg');
  background-size:cover;background-position:100% center;background-repeat:no-repeat;background-color:#8A8C8E}
@media (max-aspect-ratio:13/10){.hero2{background-position:78% center}}
.hero2-in{position:relative;max-width:none;margin:0;width:100%;
  padding:2.55rem 4% 3rem max(1.25rem,7%);display:grid;align-content:space-between;gap:var(--g5);color:#fff}
.hero2-claim{font-family:var(--display);font-weight:400;letter-spacing:var(--sp-label);text-transform:uppercase;
  font-size:clamp(.88rem,1.6vw,1.1rem);margin:0;color:#fff;padding-left:2.4%}
.hero2-titel{margin:0;padding:0;font:inherit;line-height:0}
.hero2-logo{width:min(27vw,420px);height:auto;display:block;margin:1rem 0}
.hero2-sub{font-family:var(--display);font-weight:400;letter-spacing:var(--sp-label);text-transform:uppercase;
  font-size:clamp(.85rem,1.55vw,1.08rem);line-height:1.8;margin:0;color:#fff}
@media (max-width:760px){
  .hero2{min-height:70svh;background-size:cover;background-position:88% center}
  .hero2-in{padding-left:max(1rem,6%);padding-right:3%;align-content:end;gap:var(--g3);padding-bottom:2.2rem;padding-top:4.5rem}
  .hero2-claim{padding-left:2%}
  .hero2-logo{width:50vw;margin:0}
  body.startseite .top-in{padding-left:max(.9rem,2%)}
}

/* Drei Säulen */
.drei{background:var(--band);color:#2A2422;padding:clamp(2.5rem,6vw,4.5rem) var(--pad)}
.drei-in{max-width:820px;margin:0 auto;display:grid;gap:var(--g-spalten);grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.drei-in{grid-template-columns:1fr;max-width:34rem}}
.saeule{display:flex;flex-direction:column;text-align:center}
.saeule .oben{font-family:var(--display);font-weight:500;letter-spacing:var(--sp-label);text-transform:uppercase;
  font-size:var(--t-label);margin:0 0 .5rem}
.saeule h2{font-family:var(--display);font-weight:300;letter-spacing:var(--sp-head);text-transform:uppercase;
  font-size:var(--t-h2);line-height:1.2;margin:0 0 2.1rem;color:inherit}
.saeule p{font-family:var(--body);font-size:var(--t-body);line-height:1.55;margin:0 0 1rem}
.saeule .knopf{margin-top:auto;padding-top:1.2rem}
.saeule a.knopf-l{display:block;font-family:var(--display);font-weight:500;letter-spacing:var(--sp-knopf);
  text-transform:uppercase;font-size:var(--t-small);text-decoration:none;color:#2A2422;
  background:var(--sand);padding:.85rem 1rem;text-align:center}
.saeule a.knopf-l:hover{filter:brightness(.95)}
.saeule span.knopf-l{display:block;font-family:var(--display);font-weight:500;letter-spacing:var(--sp-knopf);
  text-transform:uppercase;font-size:var(--t-small);text-align:center;padding:.85rem 1rem;
  background:#EDEAE7;color:#8C8681}
.saeule.t .oben{color:var(--terracotta-ink)}
.saeule.t a.knopf-l{background:var(--terracotta);color:#2A2422}
.saeule.b .oben{color:var(--petrol-ink)}
.saeule.b a.knopf-l{background:var(--petrol);color:#FFFFFF}

/* ============================================================
   5. Kontaktseite
   ============================================================ */
.kontaktliste{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:var(--g3)}
.kontaktliste li{display:grid;grid-template-columns:8.5rem 1fr;gap:var(--g3);align-items:baseline}
@media(max-width:560px){.kontaktliste li{grid-template-columns:1fr;gap:var(--g1)}}
.kontaktliste .was{font-family:var(--display);font-weight:500;font-size:var(--t-label);letter-spacing:var(--sp-label);text-transform:uppercase;color:var(--ink-mute)}
.kontaktliste .wert{font-family:var(--display);font-weight:300;font-size:var(--t-mid);line-height:1.35}
.kontaktliste a{color:var(--accent-ink);text-decoration:none;border-bottom:1px solid transparent}
.kontaktliste a:hover{border-bottom-color:var(--accent)}
.sozial{margin:1.6rem 0 0;display:flex;gap:var(--g4);font-family:var(--display);font-size:var(--t-small)}
.sozial a{color:var(--ink-mute);text-decoration:none;border-bottom:1px solid transparent}
.sozial a:hover{color:var(--ink);border-bottom-color:var(--line)}

/* ============================================================
   6. Fuß
   ============================================================ */
footer.seitenfuss{border-top:1px solid var(--line);padding:2.5rem var(--pad) 3.5rem;font-size:var(--t-small)}
footer.seitenfuss .in{max-width:1180px;margin:0 auto;display:grid;gap:var(--g3)}
.flinks{display:flex;flex-wrap:wrap;gap:var(--g2) var(--g4);font-family:var(--display);font-size:var(--t-small)}
.flinks a{text-decoration:none;color:var(--ink-mute);text-underline-offset:3px}
.flinks a:hover{color:var(--ink)}
.fs{display:flex;gap:var(--g1);align-items:baseline;margin-left:.4rem}
.fs button{font-family:var(--display);background:transparent;border:1px solid var(--line);color:var(--ink-mute);border-radius:999px;cursor:pointer;line-height:1;padding:.35rem .55rem}
.fs button:nth-child(1){font-size:.85rem}
.fs button:nth-child(2){font-size:1.05rem}
.fs button:nth-child(3){font-size:1.3rem}
.fs button:hover{border-color:var(--accent);color:var(--ink)}
.fs button[aria-pressed="true"]{border-color:var(--accent);color:var(--ink);background:var(--band)}
@media (max-width:760px){
  .hero2{min-height:0;display:block;background-image:none;background-color:#8A8C8E}
  .hero2::before{content:"";display:block;height:48svh;
    background-image:url('assets/bilder/kopfbild-portraet.jpg');
    background-size:cover;background-position:84% center;background-repeat:no-repeat}
  .hero2-in{background:#8A8C8E;text-align:center;justify-items:center;
    padding:1.9rem 1.1rem 2.2rem;gap:.85rem;align-content:start}
  .hero2-claim{padding-left:0}
  .hero2-logo{width:60vw;margin-inline:auto}
}
}