/* ==========================================================================
   SchlafOase Hönig · Instagram im Telefon
   --------------------------------------------------------------------------
   Ein Gerät, das das echte Profil @schlafoase_engelskirchen zeigt und sich
   dabei selbst bedient. Kein Fremd-Skript, kein Netzaufruf, kein Zähler
   bei Meta, kein Einbettungs-Fenster. Alles, was hier zu sehen ist, liegt
   als eigene Datei auf dem eigenen Server.

   Jede Zahl und jede Zeile darin ist am 28.08.2026 vom echten Profil
   abgelesen. Beleg: 01_AUFNAHME-DES-PROFILS.md. Erfunden ist nichts.

   Alle Farben, Abstände, Radien und Schriftgrößen kommen aus den
   Eigenschaften der bestehenden Seite (--brand, --gold, --radius, --sec-y,
   --ease …). Die Rückfallwerte hinter dem Komma sind nur dafür da, dass
   die Vorschauseite auch ohne schlafoase.css richtig aussieht.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1 · Der Abschnitt
   -------------------------------------------------------------------------- */

.ig-abschnitt { overflow: clip; }

.ig-abschnitt .wrap {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}

@media (min-width: 62em) {
  .ig-abschnitt .wrap {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.ig-text { display: grid; gap: 1.25rem; align-content: start; }

/* Die Zeile über der Überschrift. Klein, ruhig, in der Markenfarbe. */
.ig-kicker {
  margin: 0;
  font-size: var(--fs-small, .875rem);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-deep, #5F6B58);
}

.ig-text h2 { margin: 0; }
.ig-text p  { margin: 0; }

/* Die Liste. Keine Punkte, sondern Linien — dieselbe Ruhe wie im
   restlichen Layout, nur mit klarer Trennung zwischen den Zeilen. */
.ig-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
/* margin: 0 ist Pflicht, nicht Geschmack: schlafoase.css setzt global
   `li { margin-bottom: .4em }`. Ohne diese Zeile bekäme jede Zeile unter
   ihrer Trennlinie einen Absatz, den es nicht geben soll. */
.ig-liste li {
  margin: 0;
  padding: .85rem 0;
  border-top: 1px solid var(--border-soft, #E9E4E2);
  font-size: var(--fs-body, 1rem);
  line-height: 1.55;
}
.ig-liste li:last-child { border-bottom: 1px solid var(--border-soft, #E9E4E2); }
.ig-liste b { font-weight: 600; color: var(--text-strong, #000); }

/* Die Standzeile. Ein Profil ändert sich; wer das nicht dazuschreibt,
   behauptet einen Stand, den er nicht halten kann. */
.ig-stand {
  display: flex; align-items: center; gap: .55rem;
  font-size: var(--fs-small, .875rem);
  color: var(--text-muted, #666977);
}
.ig-stand::before {
  content: "";
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--gold, #D6B266);
  flex: none;
}


/* --------------------------------------------------------------------------
   2 · Der Knopf zum Profil
   --------------------------------------------------------------------------
   Ruhig, solange niemand hinsieht. Beim Überfahren nimmt er den
   Instagram-Verlauf an — Instagram hat keine einzelne Farbe, sondern
   diesen Verlauf, und der ist das Wiedererkennungszeichen.
   Gebaut wie .btn-whatsapp: eine Markenfarbe auf der bestehenden
   Knopfform, nichts daneben.
   -------------------------------------------------------------------------- */

.btn-instagram {
  position: relative;
  isolation: isolate;
  background: transparent;
  color: var(--text, #232323);
  border-color: var(--border, #DCD2D0);
  overflow: hidden;
}
.btn-instagram svg { flex: 0 0 auto; width: 1.15em; height: 1.15em; fill: currentColor; }

/* Der Verlauf liegt als eigene Fläche darunter und wird eingeblendet.
   Verläufe lassen sich nicht weich überblenden — Deckkraft schon. */
.btn-instagram::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 30% 107%,
              #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%);
  opacity: 0;
  transition: opacity .28s var(--ease, cubic-bezier(.22,.61,.36,1));
}
.btn-instagram:hover,
.btn-instagram:focus-visible {
  color: #fff;
  border-color: #D6249F;
}
.btn-instagram:hover::before,
.btn-instagram:focus-visible::before { opacity: 1; }

/* Auf dunklem Grund steht der Knopf heller da, sonst verschwindet er. */
.sec--night .btn-instagram { color: var(--text-on-night, #EDEFEA); border-color: rgba(255,255,255,.34); }


/* --------------------------------------------------------------------------
   3 · Das Gerät
   --------------------------------------------------------------------------
   Maße nach iPhone 15 Pro: Gehäuse 405 × 864 pt, Rand 6 pt, Schirm
   393 × 852 pt, Dynamic Island 125 × 36 pt, 11 pt unter der Schirmkante.
   Ein einziger Wert steuert alles: --ig-pw ist die Außenbreite,
   --ig-p ist ein iOS-Punkt. Jedes Maß im Schirm hängt daran, damit das
   Gerät auf jedem Bildschirm gleich proportioniert bleibt.
   -------------------------------------------------------------------------- */

.ig-buehne { display: flex; justify-content: center; }

.ig-telefon {
  /* Breite nach Platz — nach oben aber durch die Fensterhöhe begrenzt,
     damit das Telefon nie über den Bildrand hinausragt.

     ZWEIMAL erklärt, und das mit Absicht: Safari kennt svh erst ab 15.4.
     Ein Browser, der svh nicht versteht, verwirft die ganze zweite Zeile
     samt min() — und behält die erste. Stünde nur die zweite da, hätte
     das Telefon dort gar keine Breite mehr. */
  --ig-pw: min(clamp(16rem, 60vw, 20.5rem), calc((100vh - 9rem) * 405 / 864));
  --ig-pw: min(clamp(16rem, 60vw, 20.5rem), calc((100svh - 9rem) * 405 / 864));
  --ig-p: calc(var(--ig-pw) * .9704 / 393);

  position: relative;
  width: var(--ig-pw);
  aspect-ratio: 405 / 864;
  flex: none;
  isolation: isolate;
}

.ig-schirm {
  position: absolute;
  inset: calc(var(--ig-p) * 6);
  overflow: hidden;
  border-radius: calc(var(--ig-p) * 49);
  background: #000;
  color: #fff;
  /* Der Schirm ist die Bezugsfläche für alles darin: eigene Schrift,
     eigene Größe. Die Seitentypografie hat hier nichts verloren. */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
               system-ui, sans-serif;
  font-size: calc(var(--ig-p) * 15);
  line-height: 1.32;
  letter-spacing: calc(var(--ig-p) * -.15);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

/* Der Rahmen liegt ÜBER der Oberfläche, nicht darunter: so beschneidet er
   die App sauber und die Insel sitzt garantiert obenauf. Die Gehäusefarbe
   ist ein warmes Graphit mit einem Hauch der Markenfarbe — kein grünes
   Telefon, aber auch kein fremdes Blau. */
.ig-rahmen {
  position: absolute; inset: 0;
  border: calc(var(--ig-p) * 6) solid #26251F;
  border-radius: calc(var(--ig-p) * 55);
  pointer-events: none;
  z-index: 2;
  box-shadow:
    inset 0 0 0 calc(var(--ig-p) * .9) #4A4C42,
    0 0 0 calc(var(--ig-p) * .9) #0E0E0C,
    0 calc(var(--ig-p) * 18) calc(var(--ig-p) * 44) rgba(31, 29, 26, .30),
    0 calc(var(--ig-p) * 3)  calc(var(--ig-p) * 9)  rgba(31, 29, 26, .18);
}

.ig-insel {
  position: absolute;
  top: calc(var(--ig-p) * 11);
  left: 50%;
  width: calc(var(--ig-p) * 125);
  height: calc(var(--ig-p) * 36);
  margin-left: calc(var(--ig-p) * -62.5);
  background: #000;
  border-radius: 999px;
  z-index: 3;
  pointer-events: none;
}

/* Die Tasten an der Seite. Kleinigkeit — aber ohne sie sieht der Rahmen
   wie ein Bilderrahmen aus und nicht wie ein Telefon. */
.ig-taste-seite {
  position: absolute; left: calc(var(--ig-p) * -2);
  width: calc(var(--ig-p) * 3);
  border-radius: calc(var(--ig-p) * 2) 0 0 calc(var(--ig-p) * 2);
  background: #33322B; z-index: 1;
}
.ig-taste-seite--stumm  { top: calc(var(--ig-p) * 126); height: calc(var(--ig-p) * 30); }
.ig-taste-seite--lauter { top: calc(var(--ig-p) * 178); height: calc(var(--ig-p) * 62); }
.ig-taste-seite--leiser { top: calc(var(--ig-p) * 252); height: calc(var(--ig-p) * 62); }
.ig-taste-seite--ein {
  left: auto; right: calc(var(--ig-p) * -2);
  top: calc(var(--ig-p) * 212); height: calc(var(--ig-p) * 100);
  border-radius: 0 calc(var(--ig-p) * 2) calc(var(--ig-p) * 2) 0;
}

/* Ein feiner Lichtstreifen über dem Glas. Sonst wirkt der Schirm wie
   aufgedruckt. Heißt .ig-glas und nicht .ig-glanz: Die Highlight-Kreise
   weiter unten heißen .ig-glanz, und zwei gleiche Namen für zwei ganz
   verschiedene Dinge sind der teuerste Fehler, den ein Stilblatt kennt. */
.ig-glas {
  position: absolute; inset: 0;
  border-radius: calc(var(--ig-p) * 55);
  pointer-events: none; z-index: 4;
  background: linear-gradient(122deg,
    rgba(255,255,255,.13) 0%, transparent 24%,
    transparent 76%, rgba(255,255,255,.07) 100%);
}


/* --------------------------------------------------------------------------
   4 · Die Oberfläche: Instagram, dunkler Modus
   --------------------------------------------------------------------------
   Farben aus der App: Grund #000, Tinte #FFF, zweite Tinte #A8A8A8,
   Trennlinie #262626, Folgen-Blau #0095F6, graue Taste #363636.
   Dunkel, weil das Profil dunkel aufgenommen wurde — und weil ein dunkler
   Schirm gegen ein helles Papier der stärkere Kontrast ist: Das Telefon
   wird zum Gegenstand statt zur Fläche.
   -------------------------------------------------------------------------- */

.ig-schirm {
  --ig-tinte-2: #A8A8A8;
  --ig-linie:   #262626;
}

/* iOS-Statusleiste. 9:41 ist die Uhrzeit, die Apple seit 2007 in jeder
   Abbildung zeigt. Sie steht hier genau deshalb: als offenes Zeichen,
   dass das ein Modell ist und keine Aufnahme. */
.ig-status {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  height: calc(var(--ig-p) * 54);
  padding: calc(var(--ig-p) * 14) calc(var(--ig-p) * 26) 0;
  font-size: calc(var(--ig-p) * 15);
  font-weight: 600;
  letter-spacing: calc(var(--ig-p) * -.2);
}
.ig-status__zeichen { display: flex; align-items: center; gap: calc(var(--ig-p) * 5); }
.ig-status__zeichen svg { height: calc(var(--ig-p) * 11); width: auto; fill: currentColor; }

/* Die Kopfleiste. Sie bekommt eine Linie, sobald die Rolle läuft —
   dieselbe Kleinigkeit macht die App auch. */
.ig-leiste {
  flex: none;
  display: flex; align-items: center; gap: calc(var(--ig-p) * 14);
  height: calc(var(--ig-p) * 44);
  padding: 0 calc(var(--ig-p) * 14);
  font-size: calc(var(--ig-p) * 16);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color .25s linear;
  position: relative; z-index: 2;
}
.ig-leiste.klebt { border-bottom-color: var(--ig-linie); }
.ig-leiste svg { height: calc(var(--ig-p) * 19); width: auto; flex: none; }
.ig-leiste__name { flex: 1 1 auto; }

/* Das Feld ist der Ausschnitt, die Rolle ist das, was sich darin bewegt.
   Bewusst KEIN echtes Scrollen: Eine Rolle über transform kann dem
   Betriebssystem kein Rad wegnehmen. Der Besucher scrollt die Seite die
   ganze Zeit ganz normal weiter. */
.ig-feld {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
.ig-rolle {
  position: absolute; inset-inline: 0; top: 0;
  will-change: transform;
}

/* --- Kopf des Profils --- */
.ig-kopf {
  display: flex; align-items: center; gap: calc(var(--ig-p) * 24);
  padding: calc(var(--ig-p) * 14) calc(var(--ig-p) * 16) calc(var(--ig-p) * 4);
}
.ig-bild {
  flex: none;
  width: calc(var(--ig-p) * 86); height: calc(var(--ig-p) * 86);
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
}
.ig-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ig-zahlen { flex: 1 1 auto; display: flex; justify-content: space-around; text-align: center; }
.ig-zahlen span { display: block; }
.ig-zahlen b { display: block; font-size: calc(var(--ig-p) * 17); font-weight: 700; }
.ig-zahlen i { display: block; font-style: normal; font-size: calc(var(--ig-p) * 13); }

/* --- Name, Kategorie, Kurzbeschreibung --- */
.ig-angaben { padding: calc(var(--ig-p) * 8) calc(var(--ig-p) * 16) 0; font-size: calc(var(--ig-p) * 14); }
.ig-angaben > p { margin: 0; }
.ig-name  { font-weight: 600; }
.ig-fach  { color: var(--ig-tinte-2); }
/* Die Kurzbeschreibung steht auf dem Profil in fünf Zeilen. Sie wird hier
   nicht umgebrochen, sondern übernommen — white-space: pre-line hält die
   Zeilen genau so, wie Frau Hönig sie gesetzt hat. */
.ig-bio   { white-space: pre-line; margin-top: calc(var(--ig-p) * 3) !important; }
.ig-netz  {
  display: flex; align-items: center; gap: calc(var(--ig-p) * 5);
  margin-top: calc(var(--ig-p) * 5) !important;
  color: #E0F1FF; font-weight: 600;
}
.ig-netz svg { height: calc(var(--ig-p) * 12); width: auto; flex: none; }

/* --- Die drei Tasten --- */
.ig-tasten {
  display: flex; gap: calc(var(--ig-p) * 6);
  padding: calc(var(--ig-p) * 12) calc(var(--ig-p) * 16) calc(var(--ig-p) * 4);
}
.ig-taste {
  flex: 1 1 0;
  display: flex; align-items: center; justify-content: center;
  height: calc(var(--ig-p) * 32);
  border-radius: calc(var(--ig-p) * 9);
  background: #363636;
  font-size: calc(var(--ig-p) * 14);
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.ig-taste--folgen { background: #0095F6; }
.ig-taste--eng { flex: 0 0 calc(var(--ig-p) * 40); }
.ig-taste--eng svg { height: calc(var(--ig-p) * 13); width: auto; }

/* Zwei Beschriftungen liegen übereinander; die Choreografie blendet sie
   gegeneinander aus. BEIDE liegen dauerhaft absolut übereinander — würde
   eine von beiden im Fluss stehen, stünde während der Überblendung für
   180 Millisekunden „Folgen Gefolgt" nebeneinander im Knopf. */
.ig-taste--folgen .ig-wort {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .18s linear;
}
.ig-taste--folgen .ig-wort--folgt  { opacity: 0; }
.ig-taste--folgen.folgt { background: #363636; }
.ig-taste--folgen.folgt .ig-wort--folgen { opacity: 0; }
.ig-taste--folgen.folgt .ig-wort--folgt  { opacity: 1; }
.ig-taste--folgen.gedrueckt { filter: brightness(.86); }
.ig-taste--folgen:hover, .ig-taste--folgen:focus-visible { filter: brightness(1.1); }

/* --- Highlights --- */
.ig-glanzlichter {
  display: flex; gap: calc(var(--ig-p) * 18);
  padding: calc(var(--ig-p) * 14) calc(var(--ig-p) * 16) calc(var(--ig-p) * 10);
}
.ig-glanz { flex: none; width: calc(var(--ig-p) * 64); text-align: center; }
.ig-glanz i {
  display: block;
  width: calc(var(--ig-p) * 62); height: calc(var(--ig-p) * 62);
  border-radius: 50%;
  padding: calc(var(--ig-p) * 2);
  border: 1px solid #363636;
  margin: 0 auto calc(var(--ig-p) * 6);
  overflow: hidden;
}
.ig-glanz img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.ig-glanz b {
  display: block;
  font-size: calc(var(--ig-p) * 12); font-weight: 400;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- Reiterleiste --- */
.ig-reiter {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ig-linie);
}
.ig-reiter span {
  display: grid; place-items: center;
  height: calc(var(--ig-p) * 44);
  border-bottom: 1px solid transparent;
}
.ig-reiter span:first-child { border-bottom-color: #fff; }
.ig-reiter svg { height: calc(var(--ig-p) * 22); width: auto; color: #8E8E8E; }
.ig-reiter span:first-child svg { color: #fff; }

/* --- Das Raster ---
   Drei Spalten, Seitenverhältnis 3 : 4. Genau so liegen die Kacheln
   heute auf dem Profil. */
.ig-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--ig-p) * 1.5);
  padding-bottom: calc(var(--ig-p) * 1.5);
}
.ig-zelle { position: relative; display: block; }
/* height:auto ist Pflicht, nicht Geschmack: Die Attribute width und height
   im Quelltext setzen in jedem Browser eine Höhe als Vorgabe. Ohne dieses
   auto gewinnt sie gegen aspect-ratio, und jede Kachel wäre 640 Punkte
   hoch statt hundertdreißig. */
.ig-zelle img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 4;
  object-fit: cover; background: #111;
}
/* Das Zeichen oben rechts: Clip oder Sammlung. Es steht nur dort, wo es
   auf dem echten Profil auch steht. */
.ig-zelle__zeichen {
  position: absolute; top: calc(var(--ig-p) * 6); right: calc(var(--ig-p) * 6);
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.ig-zelle__zeichen svg { height: calc(var(--ig-p) * 17); width: auto; color: #fff; display: block; }

/* --- Untere Leiste ---
   Bewusst OHNE Profilbild: In der echten Ansicht steht dort das Gesicht
   des angemeldeten Nutzers. Das hat auf einer öffentlichen Website
   nichts verloren. */
.ig-fussleiste {
  flex: none;
  display: flex; align-items: center; justify-content: space-around;
  height: calc(var(--ig-p) * 49);
  border-top: 1px solid var(--ig-linie);
  background: #000;
}
.ig-fussleiste svg { height: calc(var(--ig-p) * 24); width: auto; color: #fff; }
.ig-fussleiste span { display: block; opacity: .45; }
.ig-fussleiste span:first-child { opacity: 1; }

.ig-hausbalken {
  flex: none;
  width: calc(var(--ig-p) * 140); height: calc(var(--ig-p) * 5);
  margin: calc(var(--ig-p) * 8) auto;
  border-radius: 999px;
  background: #fff; opacity: .9;
}


/* --------------------------------------------------------------------------
   5 · Der Zeiger
   --------------------------------------------------------------------------
   Eine Fingerkuppe, kein Mauspfeil: Was hier bedient wird, ist ein Telefon.
   Er fährt in einem Bogen heran, sinkt beim Druck ein, lässt eine Welle
   auslaufen und hebt wieder ab.
   -------------------------------------------------------------------------- */

.ig-zeiger {
  position: absolute; top: 0; left: 0;
  width: calc(var(--ig-p) * 30); height: calc(var(--ig-p) * 30);
  border-radius: 50%;
  background: rgba(255, 255, 255, .30);
  box-shadow: inset 0 0 0 calc(var(--ig-p) * 1.4) rgba(255, 255, 255, .78),
              0 calc(var(--ig-p) * 2) calc(var(--ig-p) * 8) rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(1px);   /* Safari braucht die Vorsilbe noch */
  backdrop-filter: blur(1px);
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity .28s linear;
  will-change: transform;
}
.ig-zeiger.ist-da { opacity: 1; }
.ig-zeiger.drueckt { background: rgba(255, 255, 255, .5); }

.ig-welle {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: calc(var(--ig-p) * 1.5) solid rgba(255, 255, 255, .85);
  opacity: 0;
}
.ig-zeiger.drueckt .ig-welle { animation: ig-welle 620ms var(--ease, cubic-bezier(.22,.61,.36,1)) 1; }
@keyframes ig-welle {
  from { transform: scale(1);   opacity: .85; }
  to   { transform: scale(2.6); opacity: 0; }
}


/* --------------------------------------------------------------------------
   6 · Bewegungsruhe
   --------------------------------------------------------------------------
   Wer Bewegung abschaltet, will den Inhalt trotzdem sehen. Also steht das
   Profil dann vollständig da — nur still. Kein halbes Bild, kein
   weggeblendeter Inhalt. Den Zeiger nimmt das Skript zusätzlich ganz
   heraus; ohne Bewegung wäre er eine Behauptung ohne Handlung.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ig-zeiger { display: none !important; }
  .ig-rolle  { position: static; transform: none !important; }
  .ig-feld   { overflow: auto; }
  .btn-instagram::before { transition: none; }
}


/* --------------------------------------------------------------------------
   7 · Druck
   -------------------------------------------------------------------------- */

@media print {
  .ig-buehne { display: none; }
}