/* David & Viktoria — gemeinsames Stylesheet aller Varianten
   Die Variante steckt im <html data-variant="a|b|c">.
   Aufbau: je Person ein linksbuendiger Block (Name, darunter die Kontaktdaten),
   die beiden Bloecke stehen nebeneinander, dazwischen das kaufmaennische Und. */

:root{
  --paper:#F6F2EA; --ink:#2C2823; --ink-soft:#6E655A; --soft-rgb:110,101,90; --line:#C9BFB1;
  --name:clamp(2.5rem,11vw,5.4rem);
  --s-david:1; --s-amp:1; --s-vik:1;
  --f-david:'Cormorant Garamond',serif; --f-amp:'Cormorant Garamond',serif; --f-vik:'Cormorant Garamond',serif;
  --f-c-david:'Cormorant Garamond',serif; --f-c-vik:'Cormorant Garamond',serif;
  --w-name:300; --ls-name:.02em; --ls-c:.04em; --sz-c:1rem; --sz-c-vik:1; --lh-c:1.55rem;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --paper:#1B1917; --ink:#EAE3D8; --ink-soft:#9A9086; --soft-rgb:154,144,134; --line:#4A443C; }
}
:root[data-theme="dark"]{ --paper:#1B1917; --ink:#EAE3D8; --ink-soft:#9A9086; --soft-rgb:154,144,134; --line:#4A443C; }
:root[data-theme="light"]{ --paper:#F6F2EA; --ink:#2C2823; --ink-soft:#6E655A; --soft-rgb:110,101,90; --line:#C9BFB1; }

/* Variante A — Schreibschrift David, Schreibmaschine Viktoria */
:root[data-variant="a"]{
  --f-david:'Caveat',cursive; --f-vik:'Courier Prime',monospace; --f-amp:'Cormorant Garamond',serif;
  --f-c-david:'Caveat',cursive; --f-c-vik:'Courier Prime',monospace;
  --s-david:1.36; --s-vik:.78; --s-amp:.9;
  --w-name:400; --ls-name:0; --sz-c:1.22rem; --sz-c-vik:.74; --ls-c:.01em; --lh-c:1.75rem;
}
/* Variante B — durchgehend Kalligrafie */
:root[data-variant="b"]{
  --f-david:'Parisienne',cursive; --f-vik:'Parisienne',cursive; --f-amp:'Parisienne',cursive;
  --f-c-david:'Parisienne',cursive; --f-c-vik:'Parisienne',cursive;
  --s-david:1.16; --s-vik:1.16; --s-amp:1.16;
  --w-name:400; --ls-name:.01em; --sz-c:1.24rem; --ls-c:.02em; --lh-c:1.85rem;
}
/* Variante C — gravierte Karte */
:root[data-variant="c"]{
  --s-david:1; --s-vik:1; --s-amp:.84;
  --w-name:300; --ls-name:.07em; --sz-c:.94rem; --ls-c:.13em; --lh-c:1.5rem;
}
/* Variante D — Schreibmaschine auf feinem Papier. Das ist die gewaehlte Fassung.
   Courier laeuft breit, deshalb steht der Schriftgrad deutlich niedriger als
   bei den Serifenvarianten, sonst sprengt "Viktoria" die Zeile. */
:root[data-variant="d"]{
  --f-david:'Courier Prime',monospace; --f-vik:'Courier Prime',monospace;
  --f-amp:'Courier Prime',monospace;
  --f-c-david:'Courier Prime',monospace; --f-c-vik:'Courier Prime',monospace;
  --name:clamp(2.1rem,9vw,4.4rem);
  --s-david:1; --s-vik:1; --s-amp:.9;
  --w-name:400; --ls-name:.04em; --sz-c:.88rem; --ls-c:.02em; --lh-c:1.65rem;
}
/* Namen breiter als die Adressen darunter: dadurch bestimmt der Name die
   Spaltenbreite. Das Und rueckt von selbst dicht an beide Namen, und
   gleichzeitig entsteht zwischen den beiden Kontaktbloecken wieder Luft. */
@media (min-width:780px){ :root[data-variant="d"]{--sz-c:.82rem} }

*{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{
  background:var(--paper); color:var(--ink); font-family:var(--f-c-david);
  display:flex; flex-direction:column; min-height:100dvh;
  padding:clamp(1.6rem,6vh,3rem) 1.5rem clamp(1.6rem,6vh,3rem);
  padding-top:calc(clamp(1.6rem,6vh,3rem) + env(safe-area-inset-top));
  padding-bottom:calc(clamp(1.6rem,6vh,3rem) + env(safe-area-inset-bottom));
  opacity:0; transition:opacity .55s ease; -webkit-font-smoothing:antialiased;
}
body.ready{opacity:1}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Tag/Nacht — zeigt das Ziel, nicht den Zustand */
.theme{
  position:fixed; top:calc(.8rem + env(safe-area-inset-top)); right:.9rem;
  width:2.6rem;height:2.6rem;border:0;background:none;color:var(--ink-soft);
  cursor:pointer;opacity:.5;transition:opacity .25s;display:grid;place-items:center;
}
.theme:hover,.theme:focus-visible{opacity:1}
.theme svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.sun{display:none}
:root[data-theme="dark"] .sun{display:block}
:root[data-theme="dark"] .moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sun{display:block}
  :root:not([data-theme="light"]) .moon{display:none}
}

/* Gesamtkomposition — ein Block, mittig auf dem Bildschirm */
main{flex:1;display:flex;align-items:center;justify-content:center}
/* Die Spaltenbreite richtet sich nach der langen E-Mail-Adresse, nicht nach
   dem Namen. Ohne grosszuegigen Abstand klebt das Und deshalb am zweiten
   Namen statt zwischen beiden zu stehen. */
.pair{
  display:flex;align-items:baseline;justify-content:center;
  gap:.3rem;max-width:100%;
  font-weight:var(--w-name);letter-spacing:var(--ls-name);line-height:1.06;
}
.person{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
/* schmale Geraete: untereinander, das Und bekommt eine eigene Zeile */
@media (max-width:779px){
  .pair{flex-direction:column;align-items:flex-start;gap:1.1rem}
  .amp{align-self:flex-start;margin-left:0}
}

.nm{
  background:none;border:0;padding:0 .03em .04em;color:inherit;cursor:pointer;
  font-weight:inherit;letter-spacing:inherit;line-height:inherit;text-align:left;
}
.person[data-who="david"] .nm{font-family:var(--f-david);font-size:calc(var(--name) * var(--s-david))}
.person[data-who="viktoria"] .nm{font-family:var(--f-vik);font-size:calc(var(--name) * var(--s-vik))}
.amp{font-family:var(--f-amp);font-size:calc(var(--name) * var(--s-amp));color:var(--ink-soft);line-height:1}

/* Gepunktete Linie, dauerhaft sehr langsam pulsierend.
   Bewusst als text-decoration statt als eigenes Kaestchen: die Linie haengt
   damit an der Grundlinie der jeweiligen Schrift und sitzt bei Handschrift,
   Schreibmaschine und Serifenschrift automatisch gleich hoch. */
.nm{
  text-decoration:underline;
  text-decoration-style:dotted;
  text-decoration-thickness:1.5px;
  text-underline-offset:.16em;
  text-decoration-color:rgba(var(--soft-rgb),.35);
  animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{text-decoration-color:rgba(var(--soft-rgb),.3)}
  50%    {text-decoration-color:rgba(var(--soft-rgb),.95)}
}
.nm:hover,.nm:focus-visible,.nm[aria-expanded="true"]{
  animation:none;text-decoration-color:rgba(var(--soft-rgb),1)
}
@media (prefers-reduced-motion:reduce){
  .nm{animation:none;text-decoration-color:rgba(var(--soft-rgb),.6)}
  body,.save{transition:none}
}

/* ---- Alternative Fassung: der Name selbst pulsiert, keine Linie ----
   Gesetzt ueber <html data-hinweis="puls-atem"> bzw. "puls-herz".
   Der Deckkraftbereich ist bewusst eng: hier bewegt sich der einzige
   Inhalt der Seite, nicht mehr nur ein duenner Strich darunter. */
:root[data-hinweis^="puls"] .nm{text-decoration:none}
:root[data-hinweis="puls-atem"] .nm{animation:namensAtem 6s ease-in-out infinite}
:root[data-hinweis="puls-herz"] .nm{animation:namensHerz 2.6s ease-in-out infinite}
:root[data-hinweis^="puls"] .nm:hover,
:root[data-hinweis^="puls"] .nm:focus-visible,
:root[data-hinweis^="puls"] .nm[aria-expanded="true"]{animation:none;opacity:1}

@keyframes namensAtem{
  0%,100%{opacity:.74}
  50%    {opacity:1}
}
/* zwei kurze Schlaege, dann Ruhe - der Rhythmus macht den Herzschlag aus,
   nicht das Tempo. Ein echter Puls waere auf einer stillen Seite Terror. */
@keyframes namensHerz{
  0%  {opacity:.72}
  7%  {opacity:1}
  15% {opacity:.78}
  23% {opacity:1}
  38% {opacity:.72}
  100%{opacity:.72}
}
/* Bewegung abgeschaltet: dann muss die Linie zurueck, sonst hat der Name
   ueberhaupt keinen Hinweis mehr darauf, dass er anklickbar ist. */
@media (prefers-reduced-motion:reduce){
  :root[data-hinweis^="puls"] .nm{
    animation:none;opacity:1;
    text-decoration:underline dotted rgba(var(--soft-rgb),.6);
    text-decoration-thickness:1.5px;text-underline-offset:.16em;
  }
}

/* Kontaktdaten — linksbuendig direkt unter dem Namen */
.contact{
  display:flex;flex-direction:column;align-items:flex-start;
  margin-top:1rem;font-weight:400;
  font-size:var(--sz-c);letter-spacing:var(--ls-c);line-height:var(--lh-c);
}
.person[data-who="david"] .contact{font-family:var(--f-c-david)}
.person[data-who="viktoria"] .contact{font-family:var(--f-c-vik);font-size:calc(var(--sz-c) * var(--sz-c-vik))}
.contact a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .2s;white-space:nowrap}
.contact a:hover,.contact a:focus-visible{border-bottom-color:var(--line)}

/* Aufklappfeld "Kontakt speichern" */
.save{
  overflow:hidden;max-height:0;opacity:0;
  transition:max-height .4s ease,opacity .3s ease,margin-top .4s ease;
  display:flex;flex-direction:column;align-items:flex-start;
}
.save.open{max-height:8rem;opacity:1;margin-top:1.1rem}
.save button{
  font-family:var(--f-c-david);font-size:.9rem;letter-spacing:.06em;
  background:none;color:var(--ink-soft);border:1px solid var(--line);
  border-radius:2px;padding:.5rem 1rem;cursor:pointer;transition:color .2s,border-color .2s;
}
.save button:hover,.save button:focus-visible{color:var(--ink);border-color:var(--ink-soft)}

/* sehr schmale Geraete: Adressen duerfen nicht ueber den Rand laufen */
@media (max-width:360px){
  :root{--sz-c:.88rem}
  :root[data-variant="a"]{--sz-c:1.04rem}
  :root[data-variant="d"]{--sz-c:.82rem}
}