:root {
  --bg-1:    #e9f0f7;
  --bg-2:    #fbf1e6;
  --surface: #ffffff;
  --fg:      #16202b;
  --muted:   #61707e;
  --line:    #e2e6ea;

  --blue:   #14456e;   /* Primärfarbe, LinkedIn-Kachel */
  --orange: #c2650f;   /* Akzent, Visitenkarten-Kachel */
  --green:  #1f6b46;   /* Akzent, Impressum-Kachel + Rückmeldung "Kopiert" */
  --red:    #b3271f;   /* Reserve für Fehlermeldungen */

  --accent: var(--blue);
  --shadow: 0 1px 2px rgba(20,40,64,.05), 0 12px 32px rgba(20,40,64,.10);

  --tap: 44px;         /* Mindesthöhe für Touch-Flächen */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-1:    #0b131c;
    --bg-2:    #191309;
    --surface: #141a21;
    --fg:      #eef2f5;
    --muted:   #94a3b0;
    --line:    #26303a;

    --blue:   #6aa9dd;
    --orange: #eb9550;
    --red:    #ef8079;
    --green:  #57bd8b;

    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  color: var(--fg);
  font: 400 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;

  /* Notch und Home-Indikator auf iPhones berücksichtigen */
  padding: max(1.5rem, env(safe-area-inset-top))
           max(1.25rem, env(safe-area-inset-right))
           max(1.5rem, env(safe-area-inset-bottom))
           max(1.25rem, env(safe-area-inset-left));

  background-color: var(--bg-1);
}

.card {
  --pad: clamp(1.5rem, 5vw, 2.75rem);
  position: relative;
  width: 100%;
  max-width: 50rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: var(--pad);
  overflow: hidden;
}

/* Balken oben blau, unten orange — auf Textbreite eingerückt,
   damit sie nicht in die Eckrundung laufen. */
.card::before,
.card::after {
  content: "";
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  height: 4px;
}

.card::before { top: 0;    background: var(--blue); }
.card::after  { bottom: 0; background: var(--orange); }

.head {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

.head-text { min-width: 0; }

/* Quelldatei ist 330x440 px, dargestellt auf 150x200 —
   damit auch auf Retina-Displays scharf. */
.portrait {
  flex: none;
  width: 150px;
  height: 200px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--line);
}

h1 {
  margin: 0;
  font-size: clamp(1.55rem, 6vw, 2.1rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}

/* Die Zeilenhöhe lässt oberhalb der Buchstaben Luft. Der negative
   Versatz rückt die Oberkante der Schrift bündig zur Bildkante. */
.head-text { margin-top: -0.12em; }

.claim {
  margin: .35rem 0 0;
  color: var(--muted);
  font-size: .975rem;
}

/* Die beiden Hälften bleiben je zusammen — umgebrochen wird nur dazwischen */
.claim span { white-space: nowrap; }

.intro { margin: .85rem 0 0; }

/* Vierzeiler — Serifenschrift setzt ihn als eigene Textsorte ab.
   Georgia ist auf macOS, iOS und Windows vorhanden, die weiteren
   Angaben sind Rückfallebenen. Der Strich links bleibt grau, Blau und
   Orange sind für die Kacheln reserviert. */
.verse {
  margin: 1.1rem 0 0;
  padding-left: 1rem;
  border-left: 3px solid var(--line);
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino,
               "Times New Roman", serif;
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--fg);
  text-wrap: pretty;
}

/* Jede Verszeile auf eigener Zeile */
.verse span { display: block; }

/* ---------- Linkliste ---------- */

.links {
  margin-top: 2rem;
  display: grid;
  gap: .6rem;
}

.link {
  --tint: var(--blue);
  position: relative;
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  align-items: center;
  gap: .75rem;
  min-height: var(--tap);
  padding: .9rem 1rem .9rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: inherit;
  text-decoration: none;
  background: var(--surface);
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.link::before {
  content: "";
  position: absolute;
  left: 0; top: .55rem; bottom: .55rem;
  width: 4px;
  background: var(--tint);
}

.link--linkedin { --tint: var(--blue); }
.link--vcard    { --tint: var(--orange); }
.link--contact  { --tint: var(--green); }

.link:hover,
.link:focus-visible,
.link:active {
  border-color: color-mix(in srgb, var(--tint) 55%, var(--line));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--tint) 18%, transparent);
}

.link:hover, .link:focus-visible { transform: translateY(-1px); }

.link-label {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--tint);
}

.link-value { font-weight: 500; }
.link-arrow { color: var(--muted); font-size: .9rem; }
.link:hover .link-arrow { color: var(--tint); }

/* ---------- Textseiten ---------- */

.card--text { max-width: 44rem; }

.card--text h2 {
  margin: 2rem 0 .5rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--blue);
}

.card--text h2:first-of-type { margin-top: 1.75rem; }

.card--text p {
  margin: 0 0 .9rem;
  font-size: .95rem;
  overflow-wrap: break-word;
}

.card--text a { color: var(--blue); }

/* E-Mail-Zeile mit Kopieren-Schaltfläche */
.copy-row {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

.copy {
  font: inherit;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .25rem .6rem;
  min-height: 28px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s ease, color .15s ease;
}

.copy:hover,
.copy:focus-visible {
  color: var(--orange);
  border-color: var(--orange);
}

.copy.is-done {
  color: var(--green);
  border-color: var(--green);
}

/* ---------- Zurück-Link und Kleintext ---------- */

.back {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-bottom: .5rem;
  font-size: .875rem;
  color: var(--muted);
  text-decoration: none;
}
.back:hover { color: var(--accent); }

.privacy {
  margin-top: 1rem;
  font-size: .8rem;
  color: var(--muted);
}
.privacy a { color: var(--muted); }

/* ---------- Fußzeile ---------- */

footer {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  font-size: .85rem;
  color: var(--muted);
}

footer a {
  color: var(--muted);
  text-decoration: none;
  padding: .4rem 0;   /* grössere Trefferfläche am Touchscreen */
}

footer a:hover,
footer a:focus-visible { color: var(--orange); text-decoration: underline; }

/* Sprachumschalter rechts aussen in der Fusszeile */
.lang {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  letter-spacing: .04em;
}

.lang a { padding: .4rem .15rem; }

.lang a[aria-current="true"] {
  color: var(--blue);
  font-weight: 600;
}

.lang a[aria-current="true"]:hover { color: var(--blue); text-decoration: none; }

/* ---------- Grosse Bildschirme: breiteres, flacheres Layout ---------- */

@media (min-width: 45rem) {
  .head { gap: 1.75rem; }

  .portrait { width: 172px; height: 229px; }

  /* Alle drei Kacheln nebeneinander */
  .links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
    margin-top: 1.75rem;
  }

  .link { grid-template-columns: 1fr auto; row-gap: .1rem; }
  .link-label { grid-column: 1 / -1; }
}

/* ---------- Schmale Bildschirme: randlos ---------- */

@media (max-width: 34rem) {
  body {
    padding: 0;
    align-items: stretch;
    background: var(--surface);
  }

  .card {
    --pad: 1.25rem;
    max-width: none;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    /* Notch und Home-Indikator hier statt am body berücksichtigen */
    padding:
      max(1.75rem, calc(env(safe-area-inset-top) + 1rem))
      max(var(--pad), env(safe-area-inset-right))
      max(1.75rem, calc(env(safe-area-inset-bottom) + 1rem))
      max(var(--pad), env(safe-area-inset-left));
  }

  /* Hochkant: Bild oben, Text darunter */
  .head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .head-text { margin-top: 0; }

  .portrait { width: 132px; height: 176px; }

  .link {
    grid-template-columns: 1fr auto;
    row-gap: .1rem;
    padding: .85rem .9rem .85rem 1.2rem;
  }

  .link-label { grid-column: 1 / -1; }

  footer { margin-top: auto; padding-top: 1.5rem; }

  /* Fusszeile nach unten schieben, Inhalt oben halten */
  .card { display: flex; flex-direction: column; }
  .links { margin-bottom: 1.5rem; }
}

/* Sehr kleine Geräte (iPhone SE) */
@media (max-width: 22rem) {
  .card { --pad: 1rem; }
}

/* ---------- Querformat: alles auf einen Bildschirm ---------- */

@media (orientation: landscape) and (max-height: 30rem) {
  body { padding: 0; align-items: stretch; background: var(--surface); }

  .card {
    --pad: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: none;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding:
      1.25rem
      max(var(--pad), env(safe-area-inset-right))
      1rem
      max(var(--pad), env(safe-area-inset-left));
  }

  /* Textseiten bleiben einspaltig und scrollbar */
  .card--text {
    display: block;
    padding-top: 1.5rem;
  }

  /* Quer wieder nebeneinander — überschreibt die Hochkant-Regel oben */
  .head {
    flex-direction: row;
    align-items: flex-start;
    gap: 1.1rem;
  }

  .head-text { margin-top: -0.12em; }

  /* Alle drei Kacheln unter dem Text, nebeneinander */
  .links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    margin-top: 1.25rem;
  }

  .link {
    grid-template-columns: 1fr auto;
    row-gap: .1rem;
    padding: .7rem .9rem .7rem 1.2rem;
  }

  .link-label { grid-column: 1 / -1; }

  footer { margin-top: 1.25rem; padding-top: .75rem; }

  .portrait { width: 80px; height: 107px; }

  h1 { font-size: 1.45rem; }
  .claim, .intro { font-size: .85rem; }
  .intro { margin-top: .5rem; }

  /* Vers auf zwei Zeilen zusammenlegen, Reimpaare durch | getrennt.
     - text-wrap: pretty muss aus, es bricht sonst um, obwohl Platz bleibt
     - nowrap verhindert jeden weiteren Umbruch; der gewollte Umbruch nach
       der zweiten Zeile kommt aus dem ::after mit white-space: pre
     - die Schriftgrösse skaliert mit der Fensterbreite, damit die Zeile
       auch auf schmalen Geräten hineinpasst */
  .verse {
    margin-top: .85rem;
    padding-left: .85rem;
    font-size: clamp(.74rem, 1.82vw, 1.05rem);
    line-height: 1.7;
    text-wrap: normal;
    white-space: nowrap;
  }

  .verse span { display: inline; }

  /* Trenner nach der ersten und dritten Zeile */
  .verse span:nth-child(1)::after,
  .verse span:nth-child(3)::after {
    content: "  |  ";
    color: var(--muted);
    white-space: pre;
  }

  /* Umbruch nach der zweiten Zeile */
  .verse span:nth-child(2)::after {
    content: "\A";
    white-space: pre;
  }
}

@media (prefers-reduced-motion: reduce) {
  .link, .button { transition: none; }
  .link:hover, .button:hover, .button:active { transform: none; }
}