/* umbau·konzepte – Startseite
   Desktop-Layout folgt dem Figma-Frame „umbaukonzepte startseite“ (1920 × 6397 px).
   Alle Desktop-Maße sind in Design-Pixeln angegeben und werden über --u skaliert. */

:root {
  --bg: #fff4fa;          /* zartes Rosé */
  --lavender: #ddd6f5;    /* Footer-Fläche */
  --dot: #d4cff6;         /* Punkt vor den Kurztexten */
  --ink: #23222b;         /* Text */
  --card: #ffffff;

  --serif: "Montagu Slab", Georgia, serif;
  --sans: "Outfit", system-ui, sans-serif;

  /* Seite immer hell anzeigen – auch wenn Handy/PC auf Dunkelmodus steht
     (verhindert, dass Browser die Seite automatisch abdunkeln) */
  color-scheme: only light;
}


/* Hausschriften aus dem umbaukonzepte-Brandpaket (03_Schriften), lokal eingebunden – keine Verbindung zu Google Fonts */
@font-face {
  font-family: "Montagu Slab";
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url("fonts/MontaguSlab-VariableFont_opsz-wght.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/Outfit-VariableFont_wght.woff2") format("woff2-variations");
}

*,
*::before,
*::after { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
figure { margin: 0; }
p { margin: 0; }
a { color: inherit; }

/* ---------- Logo ---------- */
.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
}
.logo__img {
  display: block;
  height: auto;
  max-width: 100%;
}

/* ---------- Robust gegen erzwungenen Dunkelmodus (Samsung-Browser) ----------
   Logo und Tür-Skizze werden weiß gezeichnet und per „Differenz“ mit dem Hintergrund
   verrechnet: auf hellem Rosé/Lavendel erscheinen sie dunkel (wie im Entwurf),
   färbt ein Handy den Hintergrund dunkel, werden sie automatisch hell. */
/* Eine zweite, graue Ebene („Sättigung“) nimmt den Farbstich heraus, der beim Verrechnen
   mit dem farbigen Hintergrund entsteht → auf Dunkel neutral weiß, auf Rosé neutral dunkel. */
.page, .legal-page { background: var(--bg); }
.logo { position: relative; }
.logo__img { color: #fff; mix-blend-mode: difference; }
.logo__img.logo__ton { position: absolute; left: 0; top: 0; color: #808080; mix-blend-mode: saturation; }
.door svg { color: #fff; fill: currentColor; mix-blend-mode: difference; }
.door svg.ton { color: #808080; mix-blend-mode: saturation; }

/* ---------- Bilder ---------- */
.pic img,
.ba__track img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Vorher/Nachher */
.ba { position: relative; overflow: hidden; outline: none; }
.ba__track { position: relative; width: 100%; height: 100%; }
.ba--sketch img { mix-blend-mode: multiply; }

/* ---------- Kurztexte mit Punkt ---------- */
.note {
  display: flex;
  align-items: flex-start;
  font-family: var(--sans);
  font-weight: 400;
}
.note__dot {
  flex: none;
  border-radius: 50%;
  background: var(--dot);
}

/* ---------- Über mich ---------- */
.about__name {
  font-family: var(--sans);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.22em;
}
.about__text {
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "opsz" 40;
}
.about__card { background: var(--card); }
.about__portrait { object-fit: cover; object-position: 50% 17%; } /* Ausschnitt so gewählt, dass über dem Kopf Luft bleibt und die Hand ganz zu sehen ist */

/* ---------- Footer ---------- */
.site-footer { background: var(--lavender); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.legal a { text-decoration: underline; text-underline-offset: 0.2em; }
.legal a:hover { text-decoration-thickness: 2px; }
/* Instagram-Icon links in der Zeile, Impressum & Co. rücken nach rechts */
.legal .legal__insta { display: inline-flex; margin-right: auto; text-decoration: none; }
.legal .legal__insta svg { display: block; transition: opacity .2s ease; }
.legal .legal__insta:hover svg { opacity: .6; }
/* Tür-Animation: die 4 Skizzen wechseln sich ab (wie das frühere GIF, ca. 1,15 s pro Tür) */
.door { position: relative; aspect-ratio: 600 / 840; }
.door svg {
  display: block;
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0;
  animation: door-cycle 4.6s infinite;
}
/* je Tür zwei Ebenen (Linien + Farbkorrektur), die gemeinsam erscheinen */
.door svg:nth-child(1), .door svg:nth-child(2) { opacity: 1; animation-delay: 0s; }
.door svg:nth-child(3), .door svg:nth-child(4) { animation-delay: 1.15s; }
.door svg:nth-child(5), .door svg:nth-child(6) { animation-delay: 2.3s; }
.door svg:nth-child(7), .door svg:nth-child(8) { animation-delay: 3.45s; }
@keyframes door-cycle {
  0%, 24.99% { opacity: 1; }
  25%, 100%  { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .door svg { animation: none; }
}

.monogram {
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  line-height: 1;
  letter-spacing: -0.04em;
}

.side {
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "opsz" 60;
  display: none;
}

.only-mob, .br-mob { display: none; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* =========================================================
   DESKTOP (ab 900 px): freie Collage nach Figma-Koordinaten
   ========================================================= */
@media (min-width: 900px) {
  .page {
    container-type: inline-size;
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
  }

  .site-header,
  .canvas { --u: calc(100cqw / 1920); }

  .site-header {
    position: absolute;
    top: calc(43 * var(--u));
    left: 0;
    right: 0;
    text-align: center;
  }
  .logo__img { width: calc(430 * var(--u)); }

  /* --end = Unterkante der Bildcollage (wird von script.js gesetzt) */
  .canvas {
    --end: 5004;
    position: relative;
    height: calc((var(--end) + 1393) * var(--u));
  }
  .canvas > * { position: absolute; }

  /* Bilder und Kurztexte: Position/Größe kommen als Design-Pixel aus script.js */
  .canvas > .pic,
  .canvas > .note {
    left: calc(var(--x) * var(--u));
    top: calc(var(--y) * var(--u));
  }
  .canvas > .pic {
    width: calc(var(--w) * var(--u));
    height: calc(var(--h) * var(--u));
  }

  .about        { left: 0; top: calc(var(--end) * var(--u)); width: 100%; height: calc(674 * var(--u)); z-index: 1; }
  .about__portrait { position: absolute; z-index: 1; left: calc(266 * var(--u)); top: 0; width: calc(358 * var(--u)); height: calc(480 * var(--u)); }
  .about__card  { position: absolute; left: calc(569 * var(--u)); top: calc(130 * var(--u)); width: calc(1164 * var(--u)); height: calc(545 * var(--u));
                  padding: calc(116 * var(--u)) calc(120 * var(--u)) 0 calc(177 * var(--u)); }
  .about__name  { font-size: calc(16 * var(--u)); line-height: 2; }
  .about__text  { font-size: calc(38.5 * var(--u)); line-height: 1.52; margin-top: calc(34 * var(--u)); max-width: calc(960 * var(--u)); }

  .note         { font-size: calc(25 * var(--u)); line-height: 1.45; gap: calc(22 * var(--u)); }
  .note__dot    { width: calc(24 * var(--u)); height: calc(24 * var(--u)); margin-top: calc(6 * var(--u)); }

  .site-footer  { left: calc(70 * var(--u)); top: calc((var(--end) + 607) * var(--u)); width: calc(1788 * var(--u)); height: calc(624 * var(--u)); }
  .site-footer__door { position: absolute; left: calc(212 * var(--u)); top: calc(92 * var(--u)); width: calc(300 * var(--u)); }
  .site-footer__body { position: absolute; left: calc(679 * var(--u)); right: calc(125 * var(--u)); top: calc(404 * var(--u)); } /* rechts bündig mit der weißen Textkarte */
  .contact      { font-size: calc(28 * var(--u)); line-height: 1.55; font-weight: 400; }
  .legal__insta svg { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
  .legal .legal__insta { margin-right: calc(44 * var(--u)); }
  .legal span   { margin-left: auto; }  /* © rechts bündig */
  .legal        { display: flex; align-items: center; gap: calc(86 * var(--u)); margin-top: calc(50 * var(--u)); font-size: calc(21 * var(--u)); font-weight: 400; }

  .monogram     { left: calc(1781 * var(--u)); top: calc((var(--end) + 1280) * var(--u)); font-size: calc(66 * var(--u)); }

  /* Seitliche Schriftzüge: bleiben beim Scrollen stehen */
  .side {
    display: block;
    position: fixed;
    top: 50%;
    z-index: 3;
    font-size: calc(min(100vw, 1920px) * 34 / 1920);
    white-space: nowrap;
    pointer-events: none;
  }
  .side--left  { left: calc((100vw - min(100vw, 1920px)) / 2 + min(100vw, 1920px) * 137 / 1920); transform: translate(-50%, -50%) rotate(-90deg); }
  .side--right { left: calc((100vw - min(100vw, 1920px)) / 2 + min(100vw, 1920px) * 1800 / 1920); transform: translate(-50%, -50%) rotate(90deg); }

  .ba { cursor: pointer; }
}

/* Vorher/Nachher (Desktop und Handy): das Vorher-Bild liegt unsichtbar über dem Nachher-Bild
   und blendet ein – am Desktop beim Hovern, auf dem Handy solange der Finger auf dem Bild liegt */
.ba__track img:nth-child(2) {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .3s ease;
}
.ba:focus-visible .ba__track img:nth-child(2),
.ba.is-before .ba__track img:nth-child(2) { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .ba:hover .ba__track img:nth-child(2) { opacity: 1; }
}
.ba img {
  -webkit-touch-callout: none;   /* kein „Bild sichern“-Menü beim Gedrückthalten */
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.ba { -webkit-tap-highlight-color: transparent; }
.ba--sketch, .ba--sketch .ba__track { overflow: visible; }
.ba--sketch .ba__track img { object-fit: contain; }
.ba--sketch .ba__track img:nth-child(2) {
  mix-blend-mode: normal;
  object-fit: cover;
  top: 12%;
  height: 76%;
}

/* =========================================================
   MOBIL (unter 900 px): eine Spalte nach Figma „Startseite - Mobil“
   ========================================================= */
@media (max-width: 899px) {
  .only-mob, .br-mob { display: inline; }
  .br-desk { display: none; }

  .site-header { text-align: center; padding: 34px 24px 34px; }
  .logo__img { width: 231px; }

  .canvas {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 24px;
  }

  .pic { width: 100%; aspect-ratio: var(--ar, 4 / 3); }
  .noscript { text-align: center; padding: 40px 0; }

  .note { font-size: 15px; line-height: 1.3; gap: 14px; margin: 14px 0; }
  .note--1 { padding-left: 12px; }
  .note--2 { padding-left: 50px; }
  .note__dot { width: 11px; height: 11px; margin-top: 5px; }

  .ba--sketch { margin: 12px 0 18px; }

  .about { position: relative; z-index: 1; margin-top: 8px; }
  .about__portrait { position: relative; z-index: 1; width: 49%; height: auto; aspect-ratio: 358 / 480; margin-left: 11%; }
  .about__card { margin-top: -30%; padding: calc(30% + 36px) 11% 30px; }
  .about__name { font-size: 11px; line-height: 1.75; }
  .about__text { font-size: 16.5px; line-height: 1.42; margin-top: 18px; }

  .site-footer {
    margin: -124px -24px 0;
    padding: 176px 24px 30px;
    display: flex;
    flex-direction: column;
  }
  .site-footer__door { width: 44%; max-width: 220px; margin: 0 auto 40px; }
  .contact { font-size: 15px; line-height: 1.45; font-weight: 400; }
  .legal { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 50px; font-size: 12.5px; font-weight: 400; }
  .legal span { flex-basis: 100%; text-align: right; }
  .legal__insta svg { width: 22px; height: 22px; }

  .monogram { align-self: flex-end; font-size: 38px; margin: 18px 0 18px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Kurztexte erst zeigen, wenn script.js sie platziert hat */
.note[data-note]:not(.note--1):not(.note--2) { visibility: hidden; }

/* Zeichnungen/Skizzen (Dateiname enthält „skizze“, „sketch“ oder „zeichnung“):
   ohne Rahmen, der weiße Hintergrund verschwindet im Rosé */
.pic--sketch img { object-fit: contain; mix-blend-mode: multiply; }
.ba--sketch .ba__track img:nth-child(2) { mix-blend-mode: normal; }