/* =========================================================================
   style.css — Hauptseite: Header, Hero, Über mich, Skills, Kontakt, Footer
   ========================================================================= */

/* =========================================================================
   Header
   ========================================================================= */

.site-header {
   position: sticky;
   top: 0;
   z-index: var(--z-header);
   background: transparent;
   border-bottom: 1px solid transparent;
   transition: background-color var(--t-md) var(--ease-in-out), border-color var(--t-md) var(--ease-in-out),
      backdrop-filter var(--t-md) var(--ease-in-out);
}

.site-header.is-stuck {
     background: var(--header-bg);
     border-bottom-color: var(--edge);

     /* Bewusst ohne saturate() und mit kleinerem Radius: Der Header ist
        sticky, der Weichzeichner wird beim Scrollen also in jedem Frame
        neu berechnet. Das ist auf schwächeren Rechnern spürbar. */
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
}

/* Ohne Weichzeichner durchscheinender Inhalt, auf dem Telefon zusaetzlich
   mit halbtransparentem Hintergrund. Beides sieht nach Fehler aus, wenn
   beim Scrollen Text durch die Leiste wandert. Der Weichzeichner wird
   deshalb nur dort eingesetzt, wo die Geraete ihn auch koennen. */
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
   .site-header.is-stuck {
      background: var(--header-solid);
   }
}

/* Geraete ohne feinen Zeiger: Telefone und Tablets. Dort bleibt die Leiste
   deckend, weil iOS waehrend des Wischens den Zustand von is-stuck
   verspaetet nachzieht und der Inhalt sonst kurz durchscheint. */
@media (hover: none), (pointer: coarse) {
   .site-header {
      background: var(--header-solid);
      border-bottom-color: var(--edge);
   }

   .site-header.is-stuck {
      background: var(--header-solid);
   }
}

/* border-box: Die Gesamthoehe muss --header-total sein, damit der
   Inhalt weiter --header-h bekommt und die Kerbe nur dazukommt. */
.site-header__inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--sp-4);
   height: var(--header-total);
   padding-top: var(--safe-top);
}

/* ---------- Wortmarke ---------- */
.brand {
   display: inline-flex;
   align-items: center;
   gap: 0.7rem;
   min-width: 0;
   cursor: pointer;
}

.brand__mark {
   display: grid;
   place-items: center;
   width: 34px;
   height: 34px;
   flex: none;
   font-family: var(--font-display);
   font-size: 0.95rem;
   letter-spacing: 0.02em;
   color: var(--accent);
   background: var(--accent-tint);
   border: 1px solid var(--accent-line);
   border-radius: var(--r-sm);
   position: relative;
   overflow: hidden;
   transition: transform var(--t-sm) var(--ease-spring), background-color var(--t-sm) var(--ease-out);
}

.brand__mark::after {
   content: "";
   position: absolute;
   inset: 0;
   background: var(--accent);
   transform: translateY(100%);
   transition: transform var(--t-md) var(--ease-out);
}

.brand:hover .brand__mark {
   transform: rotate(-8deg) scale(1.06);
}

.brand:hover .brand__mark::after {
   transform: translateY(0);
}

.brand__mark span {
   position: relative;
   z-index: 1;
   transition: color var(--t-md) var(--ease-out);
}

.brand:hover .brand__mark span {
   color: var(--accent-ink);
}

.brand__text {
   display: flex;
   flex-direction: column;
   min-width: 0;
}

.brand__name {
   font-family: var(--font-display);
   font-size: 1.02rem;
   line-height: 1.15;
   letter-spacing: var(--track-tight);
   color: var(--ink);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.brand__role {
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-wide);
   text-transform: uppercase;
   color: var(--ink-3);
   white-space: nowrap;
}

/* ---------- Navigation ---------- */
.site-nav {
   display: flex;
   align-items: center;
   gap: var(--sp-5);
}

.site-nav__list {
   display: flex;
   align-items: center;
   gap: 0.15rem;
   position: relative;
}

.site-nav__link {
   position: relative;
   display: block;
   padding: 0.5rem 0.7rem;
   font-size: var(--fs-sm);
   color: var(--ink-2);
   white-space: nowrap;
   transition: color var(--t-xs) var(--ease-out);
}

.site-nav__link::after {
   content: "";
   position: absolute;
   left: 0.7rem;
   right: 0.7rem;
   bottom: 0.2rem;
   height: 1px;
   background: var(--accent);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform var(--t-sm) var(--ease-out);
}

.site-nav__link:hover,
.site-nav__link.is-active {
   color: var(--ink);
}

.site-nav__link:hover::after,
.site-nav__link.is-active::after {
   transform: scaleX(1);
}

.site-nav__link[aria-current="page"] {
   color: var(--accent);
}

/* ---------- Steuerleiste ---------- */
.header-controls {
   display: flex;
   align-items: center;
   gap: 0.4rem;
}

/* Theme-Umschalter */
.theme-toggle {
   position: relative;
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   height: 40px;
   padding: 0 0.7rem;
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-wide);
   text-transform: uppercase;
   color: var(--ink-2);
   border: 1px solid var(--edge);
   border-radius: var(--r-sm);
   transition: color var(--t-xs) var(--ease-out), border-color var(--t-xs) var(--ease-out);
}

.theme-toggle:hover {
   color: var(--ink);
   border-color: var(--edge-strong);
}

.theme-toggle__icons {
   position: relative;
   display: grid;
   place-items: center;
   width: 14px;
   height: 14px;
}

.theme-toggle__icons svg {
   grid-area: 1 / 1;
   width: 14px;
   height: 14px;
   stroke: currentColor;
   fill: none;
   stroke-width: 1.6;
   stroke-linecap: round;
   stroke-linejoin: round;
   transition: transform var(--t-md) var(--ease-spring), opacity var(--t-sm) var(--ease-out);
}

body.dark .theme-toggle__icons .icon-sun {
   transform: rotate(0deg) scale(1);
   opacity: 1;
}

body.dark .theme-toggle__icons .icon-moon {
   transform: rotate(-90deg) scale(0.4);
   opacity: 0;
}

body.light .theme-toggle__icons .icon-sun {
   transform: rotate(90deg) scale(0.4);
   opacity: 0;
}

body.light .theme-toggle__icons .icon-moon {
   transform: rotate(0deg) scale(1);
   opacity: 1;
}

.theme-toggle__label {
   display: none;
}

@media (min-width: 1180px) {
   .theme-toggle__label {
      display: inline;
   }
}

/* Sprachumschalter */
.lang {
   position: relative;
}

.lang__trigger {
   display: inline-flex;
   align-items: center;
   gap: 0.45rem;
   height: 40px;
   padding: 0 0.7rem;
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-wide);
   color: var(--ink-2);
   border: 1px solid var(--edge);
   border-radius: var(--r-sm);
   transition: color var(--t-xs) var(--ease-out), border-color var(--t-xs) var(--ease-out);
}

.lang__trigger:hover,
.lang__trigger[aria-expanded="true"] {
   color: var(--ink);
   border-color: var(--edge-strong);
}

.lang__trigger svg {
   width: 14px;
   height: 14px;
   stroke: currentColor;
   fill: none;
   stroke-width: 1.6;
   stroke-linecap: round;
   stroke-linejoin: round;
   transition: transform var(--t-sm) var(--ease-out);
}

/* Globus: filigran wie das Sonne/Mond-Paar, dreht sich nicht mit dem Chevron */
.lang__globe {
   opacity: 0.75;
   transition: opacity var(--t-xs) var(--ease-out), transform var(--t-md) var(--ease-out);
}

.lang__trigger:hover .lang__globe,
.lang__trigger[aria-expanded="true"] .lang__globe {
   opacity: 1;
   transform: rotate(12deg);
}

.lang__chevron {
   flex: none;
}

.lang__trigger[aria-expanded="true"] .lang__chevron {
   transform: rotate(180deg);
}

.lang__menu {
   position: absolute;
   top: calc(100% + 0.5rem);
   right: 0;
   min-width: 208px;
   padding: 0.35rem;
   background: var(--surface);
   border: 1px solid var(--edge);
   border-radius: var(--r-md);
   box-shadow: var(--shadow-lg);
   opacity: 0;
   visibility: hidden;
   transform: translateY(-6px) scale(0.98);
   transform-origin: top right;
   transition: opacity var(--t-sm) var(--ease-out), transform var(--t-sm) var(--ease-out),
      visibility var(--t-sm) var(--ease-out);
}

.lang__menu.is-open {
   opacity: 1;
   visibility: visible;
   transform: translateY(0) scale(1);
}

.lang__option {
   display: flex;
   align-items: center;
   gap: 0.7rem;
   width: 100%;
   padding: 0.55rem 0.7rem;
   font-size: var(--fs-sm);
   color: var(--ink-2);
   text-align: left;
   border-radius: var(--r-sm);
   cursor: pointer;
   transition: color var(--t-xs) var(--ease-out), background-color var(--t-xs) var(--ease-out);
}

.lang__option:hover {
   color: var(--ink);
   background: var(--surface-2);
}

.lang__option.is-active {
   color: var(--accent);
   background: var(--accent-tint);
}

.lang__code {
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-wide);
   color: var(--ink-3);
   padding: 0.1rem 0.35rem;
   border: 1px solid var(--edge);
   border-radius: var(--r-xs);
   flex: none;
}

.lang__option.is-active .lang__code {
   color: var(--accent);
   border-color: var(--accent-line);
}

.lang__check {
   margin-left: auto;
   width: 13px;
   height: 13px;
   stroke: var(--accent);
   fill: none;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
   opacity: 0;
   transition: opacity var(--t-xs) var(--ease-out);
}

.lang__option.is-active .lang__check {
   opacity: 1;
}

/* ---------- Burger ---------- */
.nav-toggle {
   display: none;
   flex-direction: column;
   justify-content: center;
   gap: 5px;
   width: 42px;
   height: 40px;
   padding: 0 10px;
   border: 1px solid var(--edge);
   border-radius: var(--r-sm);
   transition: border-color var(--t-xs) var(--ease-out);
}

.nav-toggle:hover {
   border-color: var(--edge-strong);
}

.nav-toggle span {
   display: block;
   width: 100%;
   height: 1.5px;
   background: var(--ink);
   border-radius: 2px;
   transition: transform var(--t-sm) var(--ease-out), opacity var(--t-xs) var(--ease-out),
      background-color var(--t-sm) var(--ease-out);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
   transform: translateY(6.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
   opacity: 0;
   transform: scaleX(0.2);
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
   transform: translateY(-6.5px) rotate(-45deg);
}

.scrim {
   position: fixed;
   inset: 0;
   z-index: var(--z-drawer);
   background: var(--scrim);
   backdrop-filter: blur(18px) saturate(0.75);
   -webkit-backdrop-filter: blur(18px) saturate(0.75);
   opacity: 0;
   visibility: hidden;
   transition: opacity var(--t-md) var(--ease-out), visibility var(--t-md) var(--ease-out),
      backdrop-filter var(--t-lg) var(--ease-out);
}

.scrim.is-open {
   opacity: 1;
   visibility: visible;
   backdrop-filter: blur(18px) saturate(0.75);
   -webkit-backdrop-filter: blur(18px) saturate(0.75);
}

/* Kein Blur, wenn der Nutzer das nicht will */
@media (prefers-reduced-transparency: reduce) {
   .scrim {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
   }
}

/* Der Drawer liegt innerhalb des Headers, der Scrim ist ein Sibling auf Body-Ebene.
   Ohne Anhebung übermalt der Scrim (--z-drawer) den kompletten Header-Baum samt Drawer. */
.site-header.is-nav-open {
   z-index: calc(var(--z-drawer) + 2);
}

/* Ein backdrop-filter auf dem Header wuerde ihn zum Containing Block fuer
   position: fixed machen und den Drawer nach dem Scrollen versetzen. */
.site-header.is-nav-open.is-stuck {
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
}

@media (max-width: 1024px) {
   .nav-toggle {
      display: flex;
   }

   .site-nav {
      position: fixed;
      top: 0;
      right: 0;
      z-index: calc(var(--z-drawer) + 1);
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: var(--sp-5);
      width: min(370px, 88vw);
      height: 100svh;
      padding: 1.15rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
      /* Der Drawer liegt bei top:0 und waere sonst unter der Kerbe. */
      padding-top: calc(1.15rem + var(--safe-top));
      background: var(--surface);
      border-left: 1px solid var(--edge);
      box-shadow: var(--shadow-pop);
      transform: translateX(101%);
      visibility: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      transition: transform var(--t-md) var(--ease-out), visibility var(--t-md) var(--ease-out);
   }

   .site-nav.is-open {
      transform: translateX(0);
      visibility: visible;
   }

   .site-nav__list {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      margin-top: var(--sp-3);
      border-top: 1px solid var(--edge);
   }

   .site-nav__link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 0.25rem;
      font-size: 1.05rem;
      color: var(--ink);
      border-bottom: 1px solid var(--edge);
   }

   .site-nav__link::after {
      display: none;
   }

   .site-nav__link.is-active {
      color: var(--accent);
   }

   .site-nav__link-index {
      font-family: var(--font-mono);
      font-size: var(--fs-micro);
      letter-spacing: var(--track-wide);
      color: var(--ink-3);
   }

   .site-nav__link.is-active .site-nav__link-index {
      color: var(--accent);
   }

   .header-controls--drawer {
      flex-direction: column;
      align-items: stretch;
      gap: 0.5rem;
      margin-top: auto;
      padding-top: var(--sp-5);
      border-top: 1px solid var(--edge);
   }

   .header-controls--drawer .theme-toggle,
   .header-controls--drawer .lang {
      width: 100%;
   }

   .header-controls--drawer .theme-toggle,
   .header-controls--drawer .lang__trigger {
      width: 100%;
      height: 46px;
      justify-content: center;
      font-size: var(--fs-sm);
   }

   .lang__menu {
      position: static;
      min-width: 0;
      margin-top: 0.5rem;
      opacity: 1;
      visibility: visible;
      transform: none;
      display: none;
      box-shadow: none;
      background: var(--surface-2);
   }

   .lang__menu.is-open {
      display: block;
      animation: none;
   }

   .lang__option {
      padding: 0.8rem 0.7rem;
   }

   /* Steuerleiste im mobilen Panel */
   .site-header__controls-desktop {
      display: none;
   }
}

@media (min-width: 1025px) {
   .site-nav__link-index,
   .header-controls--drawer {
      display: none;
   }

   .site-header__controls-desktop {
      display: flex;
      align-items: center;
      gap: 0.4rem;
   }
}

@media (max-width: 1024px) {
   .site-header__controls-desktop {
      display: none;
   }
}

/* =========================================================================
   Flache Fenster: Telefon quer, Tablet mit geteilter Ansicht
   Weniger Hoehe, aber reichlich Breite. Die Navigation wird kompakter und
   die Steuerleiste wandert nebeneinander, damit alles ohne Scrollen passt.
   ========================================================================= */

@media (max-height: 560px) and (max-width: 1024px) {
   :root {
      --header-h: 3.25rem;
   }

   .site-nav {
      gap: var(--sp-3);
      padding-top: 0.85rem;
      padding-bottom: calc(0.85rem + env(safe-area-inset-bottom));
   }

   .site-nav__list {
      margin-top: var(--sp-2);
   }

   .site-nav__link {
      padding: 0.45rem 0.25rem;
      font-size: 1rem;
   }

   .header-controls--drawer {
      flex-direction: row;
      align-items: stretch;
      justify-content: flex-start;
      gap: 0.5rem;
      margin-top: var(--sp-3);
      padding-top: var(--sp-3);
   }

   .header-controls--drawer .theme-toggle,
   .header-controls--drawer .lang {
      flex: 1 1 0;
      width: auto;
      height: 42px;
   }

   .header-controls--drawer .lang {
      max-width: 8.5rem;
   }

   .lang__menu {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% + 0.4rem);
      margin-top: 0;
      box-shadow: var(--shadow-md);
      background: var(--surface);
      border: 1px solid var(--edge);
      border-radius: var(--r-sm);
   }
}

/* Sehr niedrige Fenster: Kopfzeile schlank, Abschnitte weniger luftig */
@media (max-height: 420px) and (max-width: 1024px) {
   .site-nav__link {
      padding-block: 0.35rem;
   }

   .section {
      padding-block: 2.5rem;
   }

   .page-head {
      padding-block: 1.5rem 1.25rem;
   }
}

/* =========================================================================
   Hero
   ========================================================================= */

.hero {
   position: relative;
   padding-block: clamp(3.5rem, 2rem + 8vw, 8rem) clamp(3rem, 1.5rem + 6vw, 6rem);
   border-bottom: 1px solid var(--edge);
   overflow: hidden;
}

/* Feines Raster-Motiv im Hero */
.hero__grid {
   position: absolute;
   inset: 0;
   pointer-events: none;
   background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
      linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
   background-size: calc(100% / 12) 100%, 100% 96px;
   mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 15%, transparent 78%);
   -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 15%, transparent 78%);
   opacity: 0.85;
}

.hero__glow {
   position: absolute;
   top: -30%;
   right: -10%;
   width: min(760px, 90vw);
   aspect-ratio: 1;
   pointer-events: none;
   background: radial-gradient(circle, var(--accent-tint) 0%, transparent 62%);
   opacity: 0.9;
   animation: hero-drift 22s var(--ease-in-out) infinite alternate;
}

@keyframes hero-drift {
   to {
      transform: translate3d(-4%, 6%, 0) scale(1.12);
   }
}

.hero__inner {
   position: relative;
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   gap: clamp(2rem, 1rem + 4vw, 4rem);
   align-items: end;
}

.hero__content {
   max-width: 46rem;
}

.hero__status {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0.75rem 1.1rem;
   margin-bottom: clamp(1.25rem, 0.8rem + 1.5vw, 2rem);
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   text-transform: uppercase;
   letter-spacing: var(--track-caps);
   color: var(--ink-3);
}

.hero__status-sep {
   width: 3px;
   height: 3px;
   border-radius: 50%;
   background: var(--edge-strong);
}

.hero__title {
   /* Jede Zeile ist ein eigener Block und darf nicht umbrechen, sonst
      bleiben verwaiste Woerter stehen ("und" allein) oder der Bindestrich
      trennt ein Wort. Die Titelspalte ist bei ~730px gedeckelt, darum
      bringt eine groessere Schrift auf ultrabreiten Displays nichts als
      Umbruch. 5.1rem ist so gewaehlt, dass die laengste Ueberschrift
      ("Weboberflaechen und") in allen fuenf Sprachen noch passt. */
   font-size: clamp(2.35rem, 1rem + 4.85vw, 5.1rem);
   line-height: var(--lh-tight);
   letter-spacing: var(--track-display);
   hyphens: none;
   margin-bottom: clamp(1.1rem, 0.7rem + 1.4vw, 1.75rem);
}

.hero__title-line {
   display: block;
   overflow: hidden;

   /* Der Kasten schneidet alles ab, was aus der Zeile ragt — noetig,
      damit die Zeilen beim Einblenden von unten hereinschieben. Bei
      --lh-tight: 1.05 ragt aber die Unterlaenge von g, j, p, y aus der
      Zeile, und genau die wurde bei "Plugins" abgeschnitten.
      Unten etwas Luft geben und den Aussenabstand wieder wegnehmen,
      damit die Zeilenabstaende unveraendert bleiben. */
   padding-bottom: 0.22em;
   margin-bottom: -0.22em;
}

.hero__title-line > span {
   display: block;
   transform: translateY(105%);
   animation: line-rise var(--t-xl) var(--ease-out) forwards;
}

.hero__title-line:nth-child(2) > span {
   animation-delay: 110ms;
}

.hero__title-line:nth-child(3) > span {
   animation-delay: 220ms;
}

@keyframes line-rise {
   to {
      transform: translateY(0);
   }
}

.hero__title em {
   font-style: italic;
   color: var(--accent);
}

/* Name in Versalien, wie ein Kolophon */
.hero__title-caps {
   font-family: var(--font-sans);
   font-size: 0.42em;
   font-weight: 500;
   letter-spacing: 0.22em;
   text-transform: uppercase;
   color: var(--ink-3);
   display: block;
   margin-top: 0.7em;
}

.hero__lead {
   font-size: var(--fs-lead);
   line-height: var(--lh-loose);
   color: var(--ink-2);
   max-width: 46ch;
   opacity: 0;
   animation: fade-up var(--t-lg) var(--ease-out) 380ms forwards;
}

/* ---------- Kennzahlen im Hero ---------- */
.hero__stats {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, auto));
   justify-content: start;
   gap: 0 clamp(1.1rem, 0.4rem + 2vw, 2.4rem);
   margin-top: clamp(1.4rem, 1rem + 1.4vw, 2rem);
   padding-top: clamp(1rem, 0.7rem + 1vw, 1.35rem);
   border-top: 1px solid var(--edge);
   opacity: 0;
   animation: fade-up var(--t-lg) var(--ease-out) 440ms forwards;
}

.hero__stat {
   display: flex;
   flex-direction: column;
   gap: 0.28rem;
}

.hero__stat dt {
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-wide);
   text-transform: uppercase;
   color: var(--ink-3);
   white-space: nowrap;
}

.hero__stat dd {
   margin: 0;
   font-family: var(--font-mono);
   font-size: var(--fs-h3);
   font-weight: 500;
   letter-spacing: var(--track-tight);
   color: var(--ink);
   line-height: 1;
}

/* ---------- Schwerpunkte ---------- */
.hero__focus {
   display: flex;
   flex-wrap: wrap;
   gap: 0.45rem;
   margin: 0;
   padding: 0;
   list-style: none;
   margin-top: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem);
   opacity: 0;
   animation: fade-up var(--t-lg) var(--ease-out) 480ms forwards;
}

.hero__focus .pill {
   cursor: default;
}

@media (max-width: 520px) {
   .hero__stats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem clamp(1rem, 0.4rem + 2vw, 2rem);
   }
}

@keyframes fade-up {
   from {
      opacity: 0;
      transform: translateY(14px);
   }

   to {
      opacity: 1;
      transform: none;
   }
}

.hero__actions {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0.65rem;
   margin-top: clamp(1.5rem, 1rem + 2vw, 2.25rem);
   opacity: 0;
   animation: fade-up var(--t-lg) var(--ease-out) 520ms forwards;
}

/* ---------- Steckbrief-Karte rechts ---------- */
.hero__card {
   /* Etwas breiter als vorher, damit die Sprachliste in einer Zeile
      stehen bleibt statt auf zwei umzubrechen. */
   width: min(100%, 330px);
   padding: 1.1rem 1.15rem 1.15rem;
   background: var(--surface);
   border: 1px solid var(--edge);
   border-radius: var(--r-md);
   box-shadow: var(--shadow-md);
   animation: fade-up var(--t-lg) var(--ease-out) 660ms both;
}

.hero__card-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-bottom: 0.7rem;
   margin-bottom: 0.7rem;
   border-bottom: 1px solid var(--edge);
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-caps);
   text-transform: uppercase;
   color: var(--ink-3);
}

.hero__card-rows {
   display: flex;
   flex-direction: column;
   gap: 0.55rem;
}

.hero__card-row {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 1rem;
   font-size: var(--fs-sm);
}

.hero__card-row dt {
   color: var(--ink-3);
   font-size: var(--fs-xs);
}

.hero__card-row dd {
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-wide);
   color: var(--ink);
   text-align: right;
}

.hero__card-row dd.is-accent {
   color: var(--accent);
}

/* ---------- Laufband ---------- */
.marquee {
   position: relative;
   margin-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
   padding-block: 0.85rem;
   border-block: 1px solid var(--edge);
   overflow: hidden;

   /* Nur ein kurzer Auslauf an den Raendern. Mit einer breiten Blendung
      wirkt das Band am Ende leer, weil der letzte Eintrag lange gar nicht
      zu sehen ist, bevor wieder etwas einfährt. */
   mask-image: linear-gradient(to right, transparent, #000 2.5%, #000 97.5%, transparent);
   -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5%, #000 97.5%, transparent);
}

.marquee__track {
   display: flex;
   width: max-content;

   /* Die Dauer setzt main.js aus der Spurbreite, damit die
      Geschwindigkeit auf jedem Schirm gleich bleibt. */
   animation: marquee var(--marquee-duration, 42s) linear infinite;
}

.marquee:hover .marquee__track {
   animation-play-state: paused;
}

@keyframes marquee {
   to {
      transform: translateX(-50%);
   }
}

.marquee__group {
   display: flex;
   align-items: center;
   gap: 2.75rem;
   padding-right: 2.75rem;
   flex: none;
}

.marquee__item {
   display: inline-flex;
   align-items: center;
   gap: 0.6rem;
   font-family: var(--font-mono);
   font-size: var(--fs-xs);
   letter-spacing: var(--track-wide);
   text-transform: uppercase;
   color: var(--ink-3);
   white-space: nowrap;
}

.marquee__item::before {
   content: "";
   width: 4px;
   height: 4px;
   background: var(--accent);
   border-radius: 50%;
   opacity: 0.7;
   flex: none;
}

@media (max-width: 1024px) {
   .hero__inner {
      grid-template-columns: 1fr;
      align-items: start;
   }

   .hero__card {
      width: 100%;
      max-width: 380px;
   }
}

@media (max-width: 520px) {
   .hero__card {
      max-width: none;
   }
}

/* =========================================================================
   Über mich
   ========================================================================= */

.about__grid {
   display: grid;
   grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
   gap: clamp(2rem, 1rem + 4vw, 4.5rem);
   align-items: start;
}

.about__text p {
   font-size: var(--fs-lead);
   line-height: var(--lh-loose);
   color: var(--ink-2);
}

.about__text p + p {
   margin-top: 1.2em;
}

.about__text p:first-child {
   font-size: clamp(1.1rem, 1rem + 0.6vw, 1.32rem);
   color: var(--ink);
}

.about__text p:first-child::first-letter {
   float: left;
   font-family: var(--font-display);
   font-size: 3.6em;
   line-height: 0.78;
   padding: 0.08em 0.12em 0 0;
   color: var(--accent);
}

/* ---------- Namensherkunft ---------- */
.alias {
   padding: 1.35rem;
   background: var(--surface);
   border: 1px solid var(--edge);
   border-left: 2px solid var(--accent);
   border-radius: var(--r-sm);
}

.alias__label {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   margin-bottom: 0.8rem;
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-caps);
   text-transform: uppercase;
   color: var(--ink-3);
}

.alias__name {
   display: block;
   font-family: var(--font-mono);
   font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem);
   letter-spacing: 0.04em;
   color: var(--accent);
   margin-bottom: 0.75rem;
   word-break: break-word;
}

.alias__body {
   font-size: var(--fs-sm);
   line-height: var(--lh-base);
   color: var(--ink-2);
}

.alias__split {
   display: flex;
   flex-wrap: wrap;
   gap: 0.4rem;
   margin-top: 1rem;
   padding-top: 0.9rem;
   border-top: 1px dashed var(--edge);
}

/* ---------- Faktenliste ---------- */
.facts {
   margin-top: 1.5rem;
   border-top: 1px solid var(--edge);
}

.facts__row {
   display: grid;
   grid-template-columns: 9.5rem minmax(0, 1fr);
   gap: 1rem;
   align-items: baseline;
   padding: 0.8rem 0;
   border-bottom: 1px solid var(--edge);
   transition: padding-left var(--t-sm) var(--ease-out);
}

.facts__row:hover {
   padding-left: 0.5rem;
}

.facts__key {
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-wide);
   text-transform: uppercase;
   color: var(--ink-3);
}

.facts__val {
   font-size: var(--fs-sm);
   color: var(--ink);
}

@media (max-width: 900px) {
   .about__grid {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 560px) {
   .facts__row {
      grid-template-columns: 1fr;
      gap: 0.25rem;
   }
}

/* =========================================================================
   Skills
   ========================================================================= */

.skills {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
   gap: var(--sp-5);
}

.skill-panel {
   padding: clamp(1.35rem, 1rem + 1.4vw, 2rem);
   background: var(--surface);
   border: 1px solid var(--edge);
   border-radius: var(--r-md);
   transition: border-color var(--t-md) var(--ease-out), box-shadow var(--t-md) var(--ease-out);
}

.skill-panel:hover {
   border-color: var(--edge-strong);
   box-shadow: var(--shadow-md);
}

.skill-panel__head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   padding-bottom: 0.9rem;
   margin-bottom: 1.25rem;
   border-bottom: 1px solid var(--edge);
}

.skill-panel__title {
   font-size: var(--fs-h3);
}

.skill-panel__count {
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-wide);
   color: var(--ink-3);
}

/* ---------- Kompetenzzeile ---------- */
.skill {
   position: relative;
   padding-block: 0.85rem;
}

.skill + .skill {
   border-top: 1px solid var(--edge-faint);
}

.skill__top {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 1rem;
   margin-bottom: 0.6rem;
}

.skill__name {
   font-family: var(--font-mono);
   font-size: var(--fs-sm);
   letter-spacing: var(--track-tight);
   color: var(--ink);
}

.skill__meta {
   display: flex;
   align-items: baseline;
   gap: 0.5rem;
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-wide);
   color: var(--ink-3);
}

.skill__value {
   min-width: 2.4ch;
   text-align: right;
   color: var(--ink);
   font-variant-numeric: tabular-nums;
}

/* ---------- Balken ---------- */
.skill__track {
   position: relative;
   height: 4px;
   background: var(--bg-sunken);
   border-radius: 2px;
   overflow: hidden;
}

.skill__fill {
   position: absolute;
   inset: 0 auto 0 0;
   width: 0;
   background: var(--accent);
   border-radius: 2px;
   transition: width 1.4s var(--ease-out);
}

.skill__fill::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.35), transparent);
   opacity: 0;
   transition: opacity var(--t-md) var(--ease-out);
}

.skill:hover .skill__fill::after {
   opacity: 1;
}

/* Feine Ticks auf der Achse */
.skill__ticks {
   position: absolute;
   inset: 0;
   display: flex;
   justify-content: space-between;
   pointer-events: none;
}

.skill__ticks span {
   width: 1px;
   height: 100%;
   background: var(--bg);
   opacity: 0.6;
}

/* =========================================================================
   Kontakt
   ========================================================================= */

.contact {
   display: grid;
   grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
   gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
   align-items: start;
}

/* ---------- Formular ---------- */
.form {
   padding: clamp(1.35rem, 1rem + 1.6vw, 2.25rem);
   background: var(--surface);
   border: 1px solid var(--edge);
   border-radius: var(--r-md);
   box-shadow: var(--shadow-sm);
}

.form__row {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
   gap: var(--sp-4);
}

.field {
   position: relative;
   margin-bottom: 1.1rem;
}

.field__label {
   display: flex;
   align-items: baseline;
   gap: 0.4rem;
   margin-bottom: 0.45rem;
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-caps);
   text-transform: uppercase;
   color: var(--ink-3);
   transition: color var(--t-xs) var(--ease-out);
}

.field__req {
   color: var(--accent);
}

.field__control {
   width: 100%;
   padding: 0.8rem 0.9rem;
   font-size: var(--fs-sm);
   color: var(--ink);
   background: var(--bg-sunken);
   border: 1px solid var(--edge);
   border-radius: var(--r-sm);
   transition: border-color var(--t-xs) var(--ease-out), background-color var(--t-xs) var(--ease-out),
      box-shadow var(--t-xs) var(--ease-out);
}

.field__control::placeholder {
   color: var(--ink-3);
   opacity: 0.75;
}

.field__control:hover {
   border-color: var(--edge-strong);
}

.field__control:focus {
   outline: none;
   background: var(--surface);
   border-color: var(--accent);
   box-shadow: 0 0 0 3px var(--accent-tint);
}

.field:focus-within .field__label {
   color: var(--accent);
}

textarea.field__control {
   min-height: 140px;
   max-height: 340px;
   resize: vertical;
   line-height: var(--lh-base);
}

/* ---------- Zähler ---------- */
.field__counter {
   position: absolute;
   right: 0;
   bottom: -1.15rem;
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-wide);
   color: var(--ink-3);
   opacity: 0;
   transition: opacity var(--t-xs) var(--ease-out);
}

.field:focus-within .field__counter {
   opacity: 1;
}

.field__counter.is-limit {
   color: var(--accent);
}

.form__foot {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   margin-top: 1.5rem;
   padding-top: 1.25rem;
   border-top: 1px solid var(--edge);
}

.form__note {
   flex: 1 1 15rem;
   font-size: var(--fs-xs);
   line-height: 1.5;
   color: var(--ink-3);
   max-width: 30ch;
}

.form__submit {
   flex: 0 0 auto;
}

.form__submit[data-state="sending"] {
   opacity: 0.7;
   pointer-events: none;
}

.form__submit[data-state="success"] {
   --btn-bg: var(--ok);
   --btn-ink: var(--ink-inv);
   --btn-edge: var(--ok);
}

.form__submit[data-state="error"] {
   --btn-bg: var(--accent);
   --btn-ink: var(--accent-ink);
   --btn-edge: var(--accent);
}

/* ---------- Statuszeile ---------- */
.form__status {
   display: flex;
   align-items: flex-start;
   gap: 0.55rem;
   margin-top: 1rem;
   padding: 0.75rem 0.9rem;
   font-size: var(--fs-sm);
   border-radius: var(--r-sm);
   border: 1px solid var(--edge);
   background: var(--surface-2);
   color: var(--ink-2);
}

.form__status:empty {
   display: none;
}

.form__status.is-ok {
   color: var(--ok);
   background: color-mix(in srgb, var(--ok) 10%, transparent);
   border-color: color-mix(in srgb, var(--ok) 30%, transparent);
}

.form__status.is-error {
   color: var(--accent);
   background: var(--accent-tint);
   border-color: var(--accent-line);
}

/* ---------- Kontakt-Infospalte ---------- */
.contact__aside {
   display: flex;
   flex-direction: column;
   gap: var(--sp-4);
}

.contact__block {
   padding: 1.2rem 1.25rem;
   background: var(--surface);
   border: 1px solid var(--edge);
   border-radius: var(--r-md);
}

.contact__block-title {
   margin-bottom: 0.85rem;
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-caps);
   text-transform: uppercase;
   color: var(--ink-3);
}

.contact__list {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
}

.contact-link {
   position: relative;
   display: flex;
   align-items: center;
   gap: 0.85rem;
   width: 100%;
   padding: 0.7rem 0.75rem;
   text-align: left;
   border-radius: var(--r-sm);
   transition: background-color var(--t-xs) var(--ease-out);
}

.contact-link:hover {
   background: var(--surface-2);
}

.contact-link__icon {
   display: grid;
   place-items: center;
   width: 34px;
   height: 34px;
   flex: none;
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   color: var(--accent);
   background: var(--accent-tint);
   border: 1px solid var(--accent-line);
   border-radius: var(--r-sm);
}

.contact-link__icon svg {
   width: 16px;
   height: 16px;
   fill: currentColor;
}

.contact-link__text {
   min-width: 0;
}

.contact-link__label {
   display: block;
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-wide);
   text-transform: uppercase;
   color: var(--ink-3);
}

.contact-link__value {
   display: block;
   font-size: var(--fs-sm);
   color: var(--ink);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.contact-link__action {
   margin-left: auto;
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-wide);
   text-transform: uppercase;
   color: var(--ink-3);
   opacity: 0;
   transform: translateX(-4px);
   transition: opacity var(--t-xs) var(--ease-out), transform var(--t-xs) var(--ease-out);
}

.contact-link:hover .contact-link__action {
   opacity: 1;
   transform: translateX(0);
}

.contact-link.is-copied .contact-link__action {
   color: var(--ok);
   opacity: 1;
}

/* ---------- Verfügbarkeits-Notiz ---------- */
.availability {
   display: flex;
   align-items: flex-start;
   gap: 0.7rem;
   padding: 0.9rem 1rem;
   font-size: var(--fs-sm);
   line-height: 1.5;
   color: var(--ink-2);
   background: var(--surface-2);
   border: 1px dashed var(--edge);
   border-radius: var(--r-sm);
}

.availability .dot {
   margin-top: 0.45em;
}

@media (max-width: 900px) {
   .contact {
      grid-template-columns: 1fr;
   }
}

/* =========================================================================
   Footer
   ========================================================================= */

.site-footer {
   position: relative;
   padding-block: clamp(2.5rem, 1.5rem + 4vw, 4rem) 1.5rem;
   border-top: 1px solid var(--edge);
   background: var(--bg-sunken);
}

.site-footer__top {
   display: grid;
   grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(min(100%, 150px), 1fr));
   gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
   padding-bottom: 2.25rem;
   border-bottom: 1px solid var(--edge);
}

.footer-brand {
   min-width: 0;
}

.footer-brand__name {
   font-family: var(--font-display);
   font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
   line-height: 1.1;
   letter-spacing: var(--track-display);
   margin-bottom: 0.6rem;
}

.footer-brand__tag {
   font-size: var(--fs-sm);
   color: var(--ink-2);
   max-width: 34ch;
}

.footer-col__title {
   margin-bottom: 0.9rem;
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-caps);
   text-transform: uppercase;
   color: var(--ink-3);
}

.footer-col__list {
   display: flex;
   flex-direction: column;
   gap: 0.55rem;
}

.footer-col__link {
   font-size: var(--fs-sm);
   color: var(--ink-2);
   transition: color var(--t-xs) var(--ease-out), padding-left var(--t-xs) var(--ease-out);
}

.footer-col__link:hover {
   color: var(--accent);
   padding-left: 0.3rem;
}

.site-footer__bottom {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 0.75rem 1.5rem;
   padding-top: 1.25rem;
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-wide);
   color: var(--ink-3);
}

.site-footer__legal {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0.5rem 1.25rem;
}

/* ---------- KI-Hinweis ---------- */

.footer-note {
   max-width: 62ch;
   margin-top: 1.5rem;
   padding-top: 1.25rem;
   border-top: 1px solid var(--edge-faint);
   font-size: var(--fs-xs);
   line-height: var(--lh-loose);
   color: var(--ink-3);
}

/* ---------- Gebaut mit <3 ---------- */

.footer-built {
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;
   white-space: nowrap;
}

/* Apfel-Herz, pulsiert dezent */
.footer-heart {
   display: inline-block;
   font-size: 1.05em;
   line-height: 1;
   transform-origin: center;
   animation: heart-beat 2.6s var(--ease-in-out) infinite;
   transition: filter var(--t-sm) var(--ease-out);
}

.site-footer__bottom:hover .footer-heart {
   filter: drop-shadow(0 0 6px var(--accent-tint));
}

@keyframes heart-beat {
   0%,
   58%,
   100% {
      transform: scale(1);
   }

   66% {
      transform: scale(1.22);
   }

   74% {
      transform: scale(0.95);
   }

   82% {
      transform: scale(1.12);
   }

   90% {
      transform: scale(1);
   }
}

/* =========================================================================
   Fußbereich auf kleinen Bildschirmen
   Navigation und Kontakt stehen nebeneinander, die Hinweise laufen
   waagerecht durch, damit keine Spalte in zehn Zeilen umbricht.
   ========================================================================= */

@media (max-width: 700px) {
   .site-footer {
      padding-block: 2.25rem 1.25rem;
   }

   .site-footer__top {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.75rem 1.25rem;
      padding-bottom: 1.75rem;
   }

   .footer-brand {
      grid-column: 1 / -1;
   }

   .footer-brand__tag {
      max-width: none;
   }

   .footer-col__title {
      margin-bottom: 0.7rem;
   }

   /* Die Hinweise liegen quer und brechen nicht einzeln um */
   .footer-col--notes {
      grid-column: 1 / -1;
      padding-top: 1.25rem;
      border-top: 1px solid var(--edge-faint);
   }

   .footer-col--notes .footer-col__list {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 0.35rem 1.5rem;
   }

   .footer-col__link:hover {
      padding-left: 0;
   }

   .site-footer__bottom {
      gap: 0.6rem 1.25rem;
      padding-top: 1rem;
   }

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

/* Erst unterhalb von 340px wird einspaltig, sonst waere die zweispaltige
   Anordnung auf den meisten Handys wieder weg. */
@media (max-width: 340px) {
   .site-footer__top {
      grid-template-columns: minmax(0, 1fr);
   }

   .site-footer__legal {
      gap: 0.35rem 0.9rem;
   }
}

/* Große Wortmarke als Abschluss-Motiv
   ------------------------------------------------------------------
   Die Wortbreite liegt bei rund 6,6 Schriftbreiten. Damit der Zug auf
   keinem Geraet ueber den Rand laeuft, muss die Mindestgroesse unter der
   Fenstergroesse liegen, sonst greift sie auf schmalen Geraeten und der
   Text wird abgeschnitten. */
.footer-wordmark {
   display: block;
   width: 100%;
   margin-top: 2rem;
   font-family: var(--font-sans);
   font-weight: 700;
   font-size: clamp(1.75rem, 12vw, 11rem);
   line-height: 0.82;
   letter-spacing: -0.02em;
   text-align: center;
   color: transparent;
   -webkit-text-stroke: 1px var(--edge-strong);
   user-select: none;
   pointer-events: none;
   transition: -webkit-text-stroke-color var(--t-lg) var(--ease-in-out);
}

/* Auf dem Handy standen die Buchstaben so dicht, dass sich die Umrisse
   von "a" und "K" beruehrten und wie Ecken durch den Buchstaben wirkten.
   Etwas Luft dazwischen und etwas kleiner, damit nichts ans Rand geht. */
@media (max-width: 700px) {
   .footer-wordmark {
      font-size: clamp(1.7rem, 11.4vw, 7rem);
      letter-spacing: -0.005em;
      margin-top: 1.5rem;
   }
}

.footer-wordmark:hover {
   -webkit-text-stroke-color: var(--accent-line);
}

/* =========================================================================
   Easter-Egg: Name bricht auseinander
   ========================================================================= */

.brand__name .fall {
   display: inline-block;
   transform-origin: center;
}

.brand__name .fall-left {
   animation: fall-left 1.3s var(--ease-in-out) forwards;
}

.brand__name .fall-right {
   animation: fall-right 1.3s var(--ease-in-out) forwards;
}

@keyframes fall-left {
   20% {
      transform: translateY(-14px) rotate(-6deg);
   }

   100% {
      transform: translate(-140px, 90px) rotate(-70deg);
      opacity: 0;
   }
}

@keyframes fall-right {
   20% {
      transform: translateY(-14px) rotate(6deg);
   }

   100% {
      transform: translate(140px, 90px) rotate(70deg);
      opacity: 0;
   }
}

@keyframes brand-pop {
   0% {
      opacity: 0;
      transform: scale(0.7);
      filter: blur(6px);
   }

   100% {
      opacity: 1;
      transform: scale(1);
      filter: blur(0);
   }
}

.brand__name.is-reassembled {
   animation: brand-pop var(--t-md) var(--ease-out);
}

.brand__name.is-shaking {
   animation: brand-shake 420ms var(--ease-in-out);
}

@keyframes brand-shake {
   0%,
   100% {
      transform: translateX(0);
   }

   20% {
      transform: translateX(-4px);
   }

   40% {
      transform: translateX(4px);
   }

   60% {
      transform: translateX(-3px);
   }

   80% {
      transform: translateX(3px);
   }
}