/* Hermann Püschel GmbH – Abschiedsseite. Farben und Schriften aus der bisherigen Webseite. */
@font-face{font-family:"Titillium Web";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/titillium-web-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Titillium Web";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/titillium-web-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Titillium Web";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/titillium-web-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/open-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/open-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/open-sans-latin-400-italic.woff2) format("woff2")}

:root{
  --kopf:#0d3a73; --kopf-text:#fff;
  --grund:#f3f5f8; --flaeche:#fff; --text:#2b3440; --leise:#55606e;
  --titel:#0d3a73; --akzent:#2f6db5; --linie:#dfe5ec; --kante:#0d3a73;
  --schatten:0 2px 10px rgba(13,58,115,.08);
  --ton-1:#e3eefb; --ton-2:#e2f4ee; --ton-3:#f1e9f8;
  --kraft-1:#1f5fae; --kraft-2:#17795a; --kraft-3:#6b3fa0;
  --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-thema="hell"]){
    --kopf:#0a2a52; --grund:#0e1726; --flaeche:#15233a; --text:#d6dfeb; --leise:#9aa8ba;
    --titel:#a9cdf5; --akzent:#8cbcf2; --linie:#26364f; --kante:#3b78c4; --schatten:0 2px 12px rgba(0,0,0,.35);
    --ton-1:#1c3150; --ton-2:#183a33; --ton-3:#2e2645;
    --kraft-1:#9cc6f7; --kraft-2:#86d6b6; --kraft-3:#c9aef0;
    color-scheme:dark;
  }
}
:root[data-thema="dunkel"]{
  --kopf:#0a2a52; --grund:#0e1726; --flaeche:#15233a; --text:#d6dfeb; --leise:#9aa8ba;
  --titel:#a9cdf5; --akzent:#8cbcf2; --linie:#26364f; --kante:#3b78c4; --schatten:0 2px 12px rgba(0,0,0,.35);
  --ton-1:#1c3150; --ton-2:#183a33; --ton-3:#2e2645;
  --kraft-1:#9cc6f7; --kraft-2:#86d6b6; --kraft-3:#c9aef0;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--grund);color:var(--text);font:400 17px/1.65 "Open Sans",system-ui,sans-serif;letter-spacing:.01em}
img{max-width:100%;height:auto;display:block}
a{color:var(--akzent)}
a:focus-visible,button:focus-visible{outline:3px solid #8cbcf2;outline-offset:3px;border-radius:4px}
.sprung{position:absolute;left:-999px;top:0;background:#fff;color:#0d3a73;padding:8px 14px;z-index:10}
.sprung:focus{left:16px;top:12px}

/* Kopf */
.kopf{background:var(--kopf);color:var(--kopf-text);view-transition-name:kopf}
.kopf-innen{max-width:1100px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;gap:24px}
.marke{display:flex;align-items:center;gap:16px;color:inherit;text-decoration:none;margin-right:auto}
.marke img{width:118px;height:auto}
.marke span{font:300 21px/1.25 "Titillium Web",sans-serif;letter-spacing:.03em}
.kopf nav a{color:inherit;text-decoration:none;font:400 19px/1 "Titillium Web",sans-serif;letter-spacing:.03em;padding:8px 2px;background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;transition:background-size .3s var(--ease)}
.kopf nav a:hover{background-size:100% 1px}
.thema{flex:none;width:42px;height:42px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:transparent;color:#fff;cursor:pointer;display:grid;place-items:center;transition:background-color .2s var(--ease),scale .15s var(--ease)}
.thema:hover{background:rgba(255,255,255,.12)}
.thema:active{scale:.94}
.thema svg{grid-area:1/1;width:20px;height:20px;transition:rotate .45s var(--ease),scale .45s var(--ease),opacity .3s var(--ease)}
.thema .mond{rotate:-90deg;scale:.4;opacity:0}
:root[data-ist="dunkel"] .thema .sonne{rotate:90deg;scale:.4;opacity:0}
:root[data-ist="dunkel"] .thema .mond{rotate:0deg;scale:1;opacity:1}

/* Bild */
.held{position:relative;height:clamp(300px,42vw,580px);overflow:hidden;background:#3c5a3a}
.held img{width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.held-text{position:absolute;left:max(24px,calc(50% - 526px));bottom:clamp(18px,3vw,40px);right:24px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.band{background:rgba(13,58,115,.92);color:#fff;font:300 clamp(26px,3.4vw,46px)/1.15 "Titillium Web",sans-serif;letter-spacing:.02em;text-transform:uppercase;padding:6px 20px 8px;margin:0}
.weiter{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.82);color:#0d3a73;text-decoration:none;font:400 clamp(15px,1.4vw,19px)/1 "Titillium Web",sans-serif;text-transform:uppercase;letter-spacing:.04em;padding:9px 16px;transition:background-color .25s var(--ease)}
.weiter:hover{background:#fff}
.weiter svg{width:16px;height:16px;transition:translate .3s var(--ease)}
.weiter:hover svg{translate:0 3px}

/* Inhalt */
main{display:block}
.abschied{max-width:1100px;margin:0 auto;padding:56px 24px 72px}
h1{font:300 clamp(30px,3.6vw,42px)/1.18 "Titillium Web",sans-serif;color:var(--titel);margin:0 0 20px;letter-spacing:.01em}
.lead{font-size:18px;max-width:780px;margin:0 0 14px}
.unterschrift{font-style:italic;color:var(--titel);margin:22px 0 0}
h2{font:400 clamp(26px,2.6vw,31px)/1.2 "Titillium Web",sans-serif;color:var(--titel);margin:0 0 24px}
.empf{margin-top:60px;scroll-margin-top:24px}

/* Karten mit magnetischem Bento-Hover */
.karten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative;isolation:isolate}
.karte{position:relative}
.karte::before{content:"";position:absolute;inset:0;background:var(--flaeche);box-shadow:var(--schatten);border-top:5px solid var(--kante);z-index:-2}
.karte a{display:flex;flex-direction:column;height:100%;padding:28px 26px 26px;color:var(--text);text-decoration:none;border-top:5px solid transparent}
.bereich{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--akzent);font-weight:600;margin:0 0 10px;line-height:1.45;transition:color .3s var(--ease)}
.name{font:600 24px/1.2 "Titillium Web",sans-serif;color:var(--titel);margin:0 0 14px}
.adresse{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--titel);transition:color .3s var(--ease)}
.adresse svg{width:15px;height:15px;flex:none;transition:translate .3s var(--ease)}
.karte a:hover .adresse svg,.karte a:focus-visible .adresse svg{translate:2px -2px}
.karte a:active{scale:.985;transition:scale .12s var(--ease)}
.karte:nth-of-type(1){--ton:var(--ton-1);--kraft:var(--kraft-1)}
.karte:nth-of-type(2){--ton:var(--ton-2);--kraft:var(--kraft-2)}
.karte:nth-of-type(3){--ton:var(--ton-3);--kraft:var(--kraft-3)}
.magnet{position:absolute;left:0;top:0;width:0;height:0;z-index:-1;pointer-events:none;opacity:0;background:var(--ton-1);border-top:5px solid var(--kraft-1);
  transition:translate .45s cubic-bezier(.22,.8,.24,1),width .45s cubic-bezier(.22,.8,.24,1),height .45s cubic-bezier(.22,.8,.24,1),opacity .25s var(--ease),background-color .45s var(--ease),border-color .45s var(--ease)}
.karten.aktiv .magnet{opacity:1}
@media (hover:hover){
  .karte.an .bereich,.karte.an .adresse{color:var(--kraft)}
}

/* Rechtstexte */
.text{max-width:820px;margin:0 auto;padding:56px 24px 80px}
.text h1{margin-bottom:28px}
.text h2{font-size:24px;margin:36px 0 10px}
.text p,.text ul{margin:0 0 14px}
.text ul{padding-left:22px}

/* Fuß */
.fuss{background:var(--kopf);color:#c9d6e8;font-size:14px}
.fuss-innen{max-width:1100px;margin:0 auto;padding:18px 24px;display:flex;justify-content:flex-end;gap:18px;flex-wrap:wrap}
.fuss a{color:inherit;text-decoration:none}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss a[aria-current]{color:#fff}

@media (max-width:860px){
  .karten{grid-template-columns:1fr}
  .kopf nav{display:none}
}
@media (max-width:520px){
  .kopf-innen{padding:14px 16px;gap:12px}
  .marke{gap:10px}
  .marke img{width:78px}
  .marke span{font-size:16px}
  .abschied,.text{padding-left:16px;padding-right:16px}
  .held-text{left:16px;right:16px}
  .lead{font-size:17px}
}

/* Seitenwechsel und Farbwechsel sanft überblenden */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s;animation-timing-function:var(--ease)}
::view-transition-group(kopf){animation-duration:0s}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.15s}
}

@media print{
  @page{margin:10mm}
  body{background:#fff;color:#000;padding:10mm}
  .kopf,.fuss{background:#fff;color:#000;border-bottom:1px solid #999}
  .kopf nav,.thema,.weiter,.held{display:none}
  .marke img{filter:brightness(0)}
  .karte::before{box-shadow:none;border:1px solid #999}
  .karten{grid-template-columns:1fr 1fr 1fr}
  a{color:#000}
}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
[tabindex="-1"]:focus{outline:none}