@font-face{font-family:"Marcellus";src:url("fonts/marcellus.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{
  --blau:#213f69; --welle:#3c5c87; --punkt:#dd9b2f;
  --weiss:#ffffff; --hell:#cfd9e8; --leise:#a8b9d2;
  --seite:#dcdde0; --schatten:rgba(14,28,50,.28);
  --serif:"Marcellus","Optima","Candara",Georgia,serif;
  --sans:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{--seite:#0f1c30;--schatten:rgba(0,0,0,.5)}}
*{box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100%;display:flex;flex-direction:column;justify-content:center;background:var(--seite);font-family:var(--sans);color:var(--weiss);
  padding:max(24px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom))}
a{color:inherit}
a:focus-visible{outline:2px solid var(--punkt);outline-offset:3px;border-radius:2px}

/* Karten */
.karten{width:100%;max-width:1720px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,560px),1fr));gap:32px;align-items:start}
.karte{background:var(--blau);aspect-ratio:85/55;position:relative;container-type:inline-size;overflow:hidden;box-shadow:0 14px 40px -18px var(--schatten)}

/* Vorderseite */
.welle{position:absolute;inset:0;width:100%;height:100%}
.welle path{fill:none;stroke:var(--welle);stroke-width:36;stroke-linecap:round;stroke-dasharray:1000;stroke-dashoffset:0}
.welle circle{fill:var(--punkt)}
.vorne h1{position:absolute;left:0;right:0;top:35.8%;margin:0;text-align:center;font-family:var(--serif);font-weight:400;font-size:9.3cqw;letter-spacing:.01em;line-height:1}
.vorne p{position:absolute;left:0;right:0;top:57.5%;margin:0;text-align:center;font-size:max(3.95cqw,13px);color:var(--hell);letter-spacing:.01em}

@media (prefers-reduced-motion:no-preference){
  .welle path{animation:zeichnen 1.8s cubic-bezier(.6,.05,.3,1) both}
  .welle circle{animation:auftauchen .5s 1.5s ease-out both;transform-origin:422px 295px}
  @keyframes zeichnen{from{stroke-dashoffset:1000}}
  @keyframes auftauchen{from{opacity:0;transform:scale(.3)}}
}

/* Rückseite */
.hinten{display:flex;align-items:center;padding:0 5% 0 8.3%;gap:5%}
.hinten address{font-style:normal;flex:1;font-size:3.3cqw;line-height:1.5}
.hinten address p{margin:0 0 .55em}
.hinten a{text-decoration:none}
.hinten a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.termine{font-family:var(--serif);color:var(--leise);font-size:3.9cqw;margin-top:1em!important}
.qr-feld{width:30.5%;flex:none;text-align:center;color:var(--hell);font-size:2.2cqw;text-decoration:none!important}
.qr-feld span{display:block;margin-top:1.1em}
.qr-box{display:block;background:#fff;border-radius:1.6cqw;padding:2.2cqw}
.qr{display:block;width:100%;height:auto}
.speichern{display:none}

/* Schmale Bildschirme: Rückseite wird zur Kontaktliste */
@media (max-width:640px){
  body{padding-left:12px;padding-right:12px}
  .karten{gap:16px}
  .karte{border-radius:6px}
  .hinten{aspect-ratio:auto;display:block;padding:32px 28px 30px}
  .hinten address{font-size:19px}
  .termine{font-size:21px}
  .qr-feld{display:none}
  .speichern{display:block;margin-top:26px;text-align:center;background:var(--welle);color:var(--weiss);font-weight:500;font-size:17px;padding:15px 20px;border-radius:999px;text-decoration:none!important}
  .speichern:active{filter:brightness(1.12)}
}

.fuss{width:100%;max-width:1720px;margin:28px auto 0;text-align:center;font-size:13px;color:#5b6b82}
@media (prefers-color-scheme:dark){.fuss{color:#8193ad}}
.fuss a{text-decoration:none;margin:0 .6em}
.fuss a:hover{text-decoration:underline}

/* Rechtstexte */
.text{width:100%;max-width:46rem;margin:0 auto;background:var(--blau);padding:clamp(28px,6vw,64px);line-height:1.6;font-size:16.5px;box-shadow:0 14px 40px -18px var(--schatten)}
.text h1{font-family:var(--serif);font-weight:400;font-size:clamp(30px,5vw,40px);margin:0 0 .8em;line-height:1.15}
.text h2{font-family:var(--serif);font-weight:400;font-size:21px;margin:2em 0 .4em;color:var(--hell)}
.text p,.text ul{margin:0 0 1em;color:#e8edf5}
.text ul{padding-left:1.2em}
.text .zurueck{display:inline-block;margin-bottom:2em;color:var(--hell);text-decoration:none;font-size:15px}
.text .zurueck:hover{text-decoration:underline}
.text .stand{margin-top:2.5em;color:var(--leise);font-size:14px}