/* ============================================================
   *nnika Portfolio — style.css
   Desktop First. Mobile folgt am Schluss des Projekts.
   Breakpoint für Mobile: 768px (wird später ergänzt)
============================================================ */


/* ------------------------------------------------------------
   1. CUSTOM PROPERTIES (Farbpalette + Typografie)
------------------------------------------------------------ */
:root {
  --linen:      #F2EDE4;
  --graphite:   #2E2E30;
  --butter:     #F0E6B2;
  --fog-blue:   #AFCBD8;
  --rouge:      #C0272D;
  --dusty-wine: #9E6B73;

  --font-main: "Avenir Next", "Avenir", "Nunito Sans", sans-serif;

  --fs-nav:    clamp(1.75rem, 2.8vw, 2.6rem);
  --fs-about:  clamp(1rem, 1.5vw, 1.4rem);

  --padding-edge: clamp(1.5rem, 3vw, 3rem);
  --nav-hover: var(--butter);
  --transition-nav: color 0.25s ease;
}


/* ------------------------------------------------------------
   2. RESET & BASE
------------------------------------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
  height: 100%;
  /* reserviert immer Platz für die Scrollbar, egal ob sie gerade
     gebraucht wird — verhindert, dass Inhalte (z.B. der Teppich-
     Hintergrund) minimal springen, wenn sich die Seitenhöhe ändert
     und die Scrollbar dadurch erscheint/verschwindet */
  scrollbar-gutter: stable;
}

body {
  width: 100%;
  min-height: 100%;
  font-family: var(--font-main);
  background-color: var(--graphite);
  color: var(--linen);
}

body.home {
  /* Fallback für ältere Browser ohne dvh-Unterstützung */
  height: 100vh;
  /* dynamic viewport height — reagiert auf die ein-/ausblendende
     Safari-Adressleiste auf iOS, im Gegensatz zu 100vh/100%, das
     dort oben/unten graue Lücken verursachen kann */
  height: 100dvh;
  overflow: hidden;
}

ul { list-style: none; }
a { text-decoration: none; color: inherit; }
img, video { display: block; max-width: 100%; }


/* ------------------------------------------------------------
   3. HOME PAGE
------------------------------------------------------------ */
.home__bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  /* Fallback + dvh, gleiche Logik wie bei body.home — falls der
     Body-Fix allein die Lücke nicht komplett schliesst, greift
     hier zusätzlich die direkte Höhen-Angabe auf dem Element selbst */
  height: 100vh;
  height: 100dvh;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.home__bg-fallback {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  background-color: var(--graphite);
  z-index: -1;
}

/* Logo — gleiche Position wie breadcrumb auf anderen Seiten
   damit kein Sprung beim Navigieren entsteht */
.home__logo {
  position: fixed;
  top: 1.2rem;           /* gleich wie site-header padding-top */
  left: var(--padding-edge);
  z-index: 10;
  height: 34px;          /* verkleinert — jetzt etwa Social-Icon-Grösse statt 60px */
  display: flex;
  align-items: center;
}

.home__logo img {
  height: 100%;
  width: auto;
  /* leichter Schatten, damit das Logo auf hellen/unruhigen
     Video-Hintergründen nicht untergeht */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.home__brand {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: clamp(220px, 28vw, 420px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.home__brand-video {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}


/* ------------------------------------------------------------
   3b. LOGO-POP-TRANSITION (Test)
   Wird von main.js gesteuert: beim Klick auf das Logo einer
   Unterseite (.breadcrumb__home) spielt das Logo dort einen
   Pop-Out, auf der Home-Seite spielt .home__logo danach einen
   Pop-In. Steuerung via sessionStorage-Flag in main.js.
------------------------------------------------------------ */
@keyframes nnikaLogoPopIn {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes nnikaLogoPopOut {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.4); opacity: 0; }
}

.logo-pop-in {
  animation: nnikaLogoPopIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* höhere Spezifität als .home__logo (Fade-In, siehe Abschnitt 6d) —
   stellt sicher, dass beim Zurück-Navigieren immer der Pop-in läuft,
   nicht der normale Seiten-Fade-In */
.home__logo.logo-pop-in {
  animation: nnikaLogoPopIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.logo-pop-out {
  animation: nnikaLogoPopOut 0.25s ease forwards;
}


/* ------------------------------------------------------------
   4. GLOBALER HEADER + BREADCRUMB (alle Seiten ausser Home)

   PIXELGENAUES MASKING via mix-blend-mode + filter:invert
   ------------------------------------------------------------
   Technik entdeckt/bestätigt bei spotagency.ch (DevTools-Analyse):

     color: #000;
     filter: invert(100%);
     mix-blend-mode: difference;

   Ablauf: Alle Header-Inhalte (Logo + Breadcrumb-Text) sind
   BASIS-FARBE Schwarz. filter:invert(100%) dreht das zu Weiss,
   BEVOR irgendwas mit dem Hintergrund passiert. mix-blend-mode:
   difference berechnet dann live |Weiss − Hintergrundfarbe| —
   über hellem Content wird's dunkel, über dunklem Content wird's
   hell. Pixelgenau, funktioniert über JEDEM Hintergrund (Fotos,
   Videos, Farbflächen), kein JS nötig.

   Bewusster Trade-off: das Ergebnis ist eine rechnerisch
   invertierte Farbe, keine exakte Markenfarbe (kein garantiertes
   Butter-Gelb) — für unseren Zweck reicht "hell genug zum Lesen",
   siehe Absprache im Chat.

   Ersetzt die alte .site-header--on-dark Zwei-Zustand-Lösung
   (JS-gesteuerter Klassenwechsel) komplett — kein header-theme.js
   mehr nötig. Funktioniert unabhängig davon, ob das Logo als
   <img src="k-logo_black.png"> oder als maskierter <span> gebaut
   ist, da filter+blend auf die gerenderte Fläche wirken, nicht
   auf die Herkunft der Pixel.

   🟡 Falls irgendwo noch ein <img onmouseover="...k-logo_yellow...">
   Farbwechsel existiert: der MUSS raus, sonst kollidiert der
   Farbwechsel mit der automatischen Invert-Berechnung (aus Gelb
   würde beim Invertieren eine unerwünschte Farbe).
------------------------------------------------------------ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1.2rem var(--padding-edge);
  filter: invert(100%);
  mix-blend-mode: difference;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.breadcrumb__home {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* Logo als maskierte Fläche statt <img> — Farbe kommt von
   background-color, PNG liefert nur die Form (Alpha-Maske).
   Funktioniert genauso mit einem klassischen <img
   src="k-logo_black.png"> — dann übernimmt einfach die eigene
   Pixel-Farbe des PNGs die Rolle von background-color hier. */
.breadcrumb__logo {
  display: block;
  width: 32px;
  height: 32px;
  background-color: #000;
  -webkit-mask-image: url('../assets/images/k-logo_black.png');
  mask-image: url('../assets/images/k-logo_black.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.breadcrumb__sep {
  font-family: var(--font-main);
  font-size: 1rem;
  font-weight: 400;
  color: #000;
  opacity: 0.5;
  user-select: none;
}

.breadcrumb__link {
  font-family: var(--font-main);
  font-size: 1rem;
  font-weight: 500;
  color: #000;
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.breadcrumb__link:hover { opacity: 1; }

.breadcrumb__current {
  font-family: var(--font-main);
  font-size: 1rem;
  font-weight: 600;
  color: #000;
}


/* ------------------------------------------------------------
   *k LOGO IM HEADER — Zoom-Hover als Klickbarkeits-Signal
   Gilt jetzt für ALLE Seiten mit diesem Header (nicht mehr nur
   Legal) — Farbwechsel-Logik ist ja jetzt überflüssig, das
   Masking oben regelt Kontrast automatisch überall.
------------------------------------------------------------ */
.breadcrumb__logo {
  transition: transform 0.2s ease;
  transform-origin: center;
}

.breadcrumb__home:hover .breadcrumb__logo {
  transform: scale(1.12);
}


/* ------------------------------------------------------------
   5. GLOBALER FOOTER (alle Seiten ausser Home)
   Dunkler Hintergrund, 3-Spalten-Grid:
   Links (Logo + Social + Bio) | Copyright (mittig, unten) | Rechts (Email + Legal Links, mittig)
------------------------------------------------------------ */
.site-footer {
  position: relative;
  z-index: 10;
  background-color: var(--graphite);
  color: var(--linen);
  padding: 3rem var(--padding-edge);
  margin-top: 4rem;
  border-top: none;
  max-width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.site-footer > div:first-child {
  grid-column: 1;
}

.site-footer__links {
  grid-column: 3;
}

/* --- Links: Logo + Social + Bio --- */
.site-footer__brand-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.site-footer__logo {
  display: block;
}

/* *k Logo + Social-Icons teilen sich eine gemeinsame Technik
   (mask-image, Farbe kommt aus background-color) — garantiert
   identisches Hover-Verhalten für alle drei. HTML pro Icon:
   <span class="site-footer__icon site-footer__icon--k / --instagram / --linkedin"> */
.site-footer__icon {
  display: block;
  width: 40px;
  height: 40px;
  background-color: var(--linen);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.site-footer__icon--k {
  -webkit-mask-image: url('../assets/images/k-logo_black.png');
  mask-image: url('../assets/images/k-logo_black.png');
}

.site-footer__icon--instagram {
  -webkit-mask-image: url('../assets/images/instagram.svg');
  mask-image: url('../assets/images/instagram.svg');
}

.site-footer__icon--linkedin {
  -webkit-mask-image: url('../assets/images/linkedin.svg');
  mask-image: url('../assets/images/linkedin.svg');
  /* etwas kleiner als *k/Instagram — wirkt bei 40px optisch zu dominant */
  width: 34px;
  height: 34px;
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

/* Ein Hover-Regelsatz für alle drei (Logo + Social) — garantiert
   identisches Verhalten statt einzeln gepflegter Effekte */
.site-footer__logo:hover .site-footer__icon,
.site-footer__social a:hover .site-footer__icon {
  background-color: var(--butter);
  transform: scale(1.1);
}

.site-footer__bio {
  font-family: var(--font-main);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--linen);
  opacity: 0.65;
  line-height: 1.4;
  max-width: 320px;
  margin-bottom: 0.7rem;
}

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

/* --- Mitte: Copyright, mittig aber am unteren Rand --- */
.site-footer__copy {
  grid-column: 2;
  justify-self: center;
  align-self: end;
  /* gleiche Optik wie Imprint/Privacy Policy Links */
  font-family: var(--font-main);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--linen);
  opacity: 0.35;
  letter-spacing: 0.02em;
}

/* --- Rechts: Email gross + Legal klein, vertikal zentriert --- */
.site-footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
}

.site-footer__link--email {
  font-family: var(--font-main);
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-weight: 800;
  color: var(--linen);
  text-decoration: none;
  letter-spacing: -0.02em;
  line-height: 1;
  transition: color 0.2s ease;
}
.site-footer__link--email:hover { color: var(--butter); }

.site-footer__legal-links {
  display: flex;
  gap: 1.2rem;
}

.site-footer__link {
  font-family: var(--font-main);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--linen);
  text-decoration: none;
  opacity: 0.35;
  transition: opacity 0.2s ease;
  letter-spacing: 0.02em;
}
.site-footer__link:hover { opacity: 0.8; }

.site-footer__divider {
  color: var(--linen);
  opacity: 0.25;
  font-size: 0.75rem;
}


/* ------------------------------------------------------------
   MOBILE FOOTER (Breakpoint 768px)
   Grid → gestapeltes, zentriertes Flex-Layout. DOM-Reihenfolge
   passt bereits (Brand+Bio → Email+Legal → Copyright), daher
   reicht ein reiner display-Wechsel ohne Umsortieren.
------------------------------------------------------------ */
@media (max-width: 768px) {
  .site-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2rem;
    padding: 3rem var(--padding-edge);
  }

  .site-footer__brand-row {
    justify-content: center;
  }

  .site-footer__middle {
    align-items: center;
  }

  .site-footer__bio {
    max-width: 100%;
    text-align: center;
  }

  .site-footer__links {
    align-items: center;
    gap: 2rem;
  }

  .site-footer__link--email {
    font-size: clamp(1.6rem, 7vw, 2rem);
  }

  .site-footer__copy {
    text-align: center;
    align-self: center;
    /* zieht den Copyright-Text näher an die Legal-Links ran, statt
       den vollen gap-Abstand des Footers zu übernehmen — macht den
       Footer insgesamt kompakter */
    margin-top: -1.2rem;
  }
}

/* ------------------------------------------------------------
   BACK TO HOME BUTTON — Portfolio Seite
------------------------------------------------------------ */
.portfolio__back {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 7rem 0;
}

.portfolio__back-btn {
  font-family: var(--font-main);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--linen);
  background: rgba(46, 46, 48, 0.45);
  border: none;
  border-radius: 100px;
  padding: 0.6em 1.4em;
  text-decoration: none;
  display: inline-block;
  box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.portfolio__back-btn:hover {
  background: rgba(46, 46, 48, 0.7);
  transform: translateY(-2px);
  box-shadow: 3px 5px 12px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
  .portfolio__back {
    /* deutlich weniger Leerraum oben/unten */
    padding: 2rem 0;
  }

  .portfolio__back-btn {
    font-size: 0.75rem;
    padding: 0.55em 1.1em;
  }
}


/* ------------------------------------------------------------
   6. HOME NAVIGATION
------------------------------------------------------------ */
.home__nav {
  position: fixed;
  bottom: var(--padding-edge);
  left: var(--padding-edge);
  z-index: 10;
}

.home__nav-main {
  display: flex;
  flex-direction: column;
  gap: 0.4em; /* meer Abstand zwischen den Links */
}

.home__nav-main a {
  font-family: var(--font-main);
  font-size: var(--fs-nav);
  font-weight: 800;
  /* Menüpunkte starten in Butter-Gelb — Logo/Animation sind
     schon weiss, so gibt's mehr Kontrast/Struktur beim ersten Blick */
  color: var(--butter);
  line-height: 1.15;
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
  letter-spacing: -0.01em;
  /* leichter Schatten, passend zum *k Logo — bessere Lesbarkeit
     auf hellen/unruhigen Video-Hintergründen */
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  /* Zoom-Effekt beim Hover soll vom linken Rand aus wachsen,
     nicht aus der Mitte (Nav ist linksbündig) */
  transform-origin: left center;
}

.home__nav-main a:hover {
  /* umgekehrt zu vorher: beim Hover wird's Weiss (Linen) */
  color: var(--linen);
  /* Zoom statt Slide — passend zum Hover-Effekt der Social-Icons */
  transform: scale(1.08);
}

.home__nav-main a:focus-visible {
  color: var(--linen);
  outline: 2px solid var(--linen);
  outline-offset: 4px;
  border-radius: 2px;
}


/* ------------------------------------------------------------
   6b. HOME SOCIAL ICONS (unten rechts, spiegelbildlich zur Nav)
   Gleiche mask-image Technik wie beim *k Logo im Header:
   die SVGs (schwarz) dienen nur als Form-Schablone, die
   sichtbare Farbe kommt von background-color.
------------------------------------------------------------ */
.home__social {
  position: fixed;
  bottom: var(--padding-edge);
  right: var(--padding-edge);
  z-index: 10;
}

.home__social-list {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.home__social-icon {
  display: block;
  width: 26px;
  height: 26px;
  background-color: var(--butter);
  transition: background-color 0.2s ease, transform 0.2s ease;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  /* gleicher Schatten wie beim *k Logo — funktioniert auch bei
     maskierten Elementen, folgt der Icon-Form statt einer Box */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.home__social-icon--instagram {
  -webkit-mask-image: url('../assets/images/instagram.svg');
  mask-image: url('../assets/images/instagram.svg');
  /* SVG hat mehr Innenabstand als linkedin.svg — Box vergrössern,
     damit die Glyphe optisch gleich hoch wirkt */
  width: 34px;
  height: 34px;
}

.home__social-icon--linkedin {
  -webkit-mask-image: url('../assets/images/linkedin.svg');
  mask-image: url('../assets/images/linkedin.svg');
}

.home__social-icon--email {
  -webkit-mask-image: url('../assets/images/email.svg');
  mask-image: url('../assets/images/email.svg');
  /* SVG hat mehr Innenabstand als linkedin.svg — Box vergrössern,
     damit die Glyphe optisch gleich hoch wirkt */
  width: 36px;
  height: 36px;
}

.home__social-list a {
  display: block;
  padding: 0.3em;
  border-radius: 6px;
  transition: transform 0.2s ease;
}

.home__social-list a:hover {
  transform: translateY(-3px) scale(1.08);
}

.home__social-list a:focus-visible {
  outline: 2px solid var(--linen);
  outline-offset: 2px;
}

.home__social-list a:hover .home__social-icon {
  /* passend zur Nav-Umkehrung: Hover wird Weiss (Linen) */
  background-color: var(--linen);
}

.home__social-list a:focus-visible .home__social-icon {
  background-color: var(--linen);
}


/* ------------------------------------------------------------
   6c. NAV + SOCIAL LEGIBILITY BACKDROP
   Leichter, weicher Schatten-Verlauf hinter Nav-Text und
   Social-Icons, damit sie auf hellen/unruhigen Foto-Hintergründen
   besser lesbar bleiben. Reines CSS, kein zusätzliches Markup
   nötig — ::before sitzt hinter dem Content (z-index: -1),
   reagiert nicht auf Klicks (pointer-events: none). Positioniert
   sich relativ zu .home__nav / .home__social selbst, die als
   position:fixed bereits einen Containing Block bilden — läuft
   automatisch mit, egal ob Desktop- oder Mobile-Layout.
------------------------------------------------------------ */
.home__nav::before,
.home__social::before {
  content: '';
  position: absolute;
  inset: -1.75rem -1.5rem;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0) 72%);
  z-index: -1;
  pointer-events: none;
}


/* ------------------------------------------------------------
   6d. HOME FADE-IN beim ersten Laden
   Logo → Brand-Animation → Nav → Social erscheinen leicht
   nacheinander verzögert, statt alles sofort auf einmal.
   Reine CSS-Animation, kein JS nötig — läuft automatisch
   beim Seitenaufruf.
------------------------------------------------------------ */
@keyframes nnikaFadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* .home__brand ist zusätzlich zentriert (translate -50%,-50%) —
   eigene Keyframes, damit die Zentrierung während/nach der
   Animation erhalten bleibt statt überschrieben zu werden */
@keyframes nnikaFadeInUpCentered {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

.home__logo,
.home__nav,
.home__social {
  opacity: 0;
  animation: nnikaFadeInUp 0.7s ease forwards;
}

.home__brand {
  opacity: 0;
  animation: nnikaFadeInUpCentered 0.7s ease forwards;
}

.home__logo   { animation-delay: 0.1s; }
.home__brand  { animation-delay: 0.3s; }
.home__nav    { animation-delay: 0.55s; }
.home__social { animation-delay: 0.7s; }

/* Nutzer mit reduzierter Bewegungspräferenz — Animation überspringen,
   Elemente sofort sichtbar */
@media (prefers-reduced-motion: reduce) {
  .home__logo,
  .home__nav,
  .home__social {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .home__brand {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}


/* ============================================================
   7. MOBILE — Home (Breakpoint 768px)
   ------------------------------------------------------------
   *k Logo oben links: unverändert (kein Override nötig)
   *nnika Brand-Animation: bleibt mittig (kein Override nötig)
   Nav: wird zentriert, grösser, unter die Brand-Animation gesetzt
   Social: wechselt auf vertikal, oben rechts

   🟡 .home__nav top-Wert (64%) ist geschätzt, damit sie ungefähr
   mittig zwischen Brand-Animation und Bildschirmunterkante sitzt —
   je nach finalem Video-Seitenverhältnis evtl. noch nachjustieren
   (live im iPhone-Screenshot prüfen).
============================================================ */
@media (max-width: 768px) {

  .home__nav {
    bottom: auto;
    top: 72%;
    left: 0;
    right: 0;
    /* Zentrierung über margin statt transform — die Fade-In-Animation
       (nnikaFadeInUp) setzt selbst eine transform-Eigenschaft
       (translateY) und würde ein transform: translateX(-50%) hier
       sonst überschreiben/zunichtemachen */
    margin-inline: auto;
    width: 90%;
    text-align: center;
  }

  .home__nav-main {
    align-items: center;
    gap: 0.5em;
  }

  .home__nav-main a {
    font-size: clamp(1.9rem, 9vw, 2.6rem);
    /* Nav ist auf Mobile zentriert (nicht linksbündig wie Desktop) —
       Zoom soll deshalb aus der Mitte wachsen */
    transform-origin: center;
  }

  .home__social {
    bottom: auto;
    top: 1.2rem;         /* gleiche Höhe wie .home__logo */
    right: var(--padding-edge);
    left: auto;
  }

  .home__social-list {
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
  }

  /* Vertikal gestapelt: gleiche Breite wichtiger als gleiche Höhe
     (überschreibt die Desktop-Anpassung, wo es umgekehrt war) */
  .home__social-icon,
  .home__social-icon--linkedin,
  .home__social-icon--email {
    width: 28px;
    height: 28px;
  }

  /* Instagram-SVG hat mehr Innenabstand — wirkt bei gleicher Box
     kleiner als LinkedIn/Mail, deshalb etwas grössere Box */
  .home__social-icon--instagram {
    width: 35px;
    height: 35px;
  }
}