/* ============================================================================
   KOMBÜCHEN · INSTAGRAM-SEKTION (iPhone-Mockup)
   ----------------------------------------------------------------------------
   Portiert aus dem bewährten Referenz-Baustein. Damit die Datei unverändert
   bleiben kann, werden hier zunächst die benötigten Design-Tokens auf das
   Kombüchen-System gemappt. Nur dieser Block ist projektspezifisch.
   ========================================================================== */
.igabschnitt, .igbuehne {
  --akzent:        var(--gold);
  --tinte-leise:   var(--stone-2);
  --t--1:          clamp(.82rem, .79rem + .12vw, .88rem);
  --kopf-hoehe:    5.25rem;
  --raum-2:        clamp(0.50rem, 0.48rem + 0.09vw, 0.625rem);
  --raum-4:        clamp(1.00rem, 0.96rem + 0.18vw, 1.250rem);
  --raum-7:        clamp(3.00rem, 2.88rem + 0.55vw, 3.750rem);
  --raum-8:        clamp(4.00rem, 3.84rem + 0.73vw, 5.000rem);
  --raum-9:        clamp(4.50rem, 3.60rem + 4.40vw, 7.50rem);
  --radius-kreis:  50%;
  --radius-rund:   var(--r-pill);
  --kurve-aus:     var(--ease-lux);
  --zeit-zustand:          170ms;
  --zeit-zustand-langsam:  260ms;
  --zeit-vorhang:          620ms;
  --z-erhoben:     10;
  --z-klebend:     20;
  --z-kopfzeile:   30;
  --z-zeiger:      95;
}



































.igbuehne {
  
  





  
























  --telefon-hoehen-faktor: 2.0542;   
  --telefon-luft: calc(var(--kopf-hoehe) + var(--raum-8));
  --telefon-b: min(clamp(15.5rem, 10rem + 16vw, 23rem),
                   calc((100vh - var(--telefon-luft)) / 2.0542));
  --telefon-b: min(clamp(15.5rem, 10rem + 16vw, 23rem),
                   calc((100svh - var(--telefon-luft)) / 2.0542));

  --f-koerper-h:  2.0542;
  --f-rand:       0.0487;
  --f-schirm-b:   0.9026;
  --f-schirm-h:   1.9568;
  --f-r-koerper:  0.1493;
  --f-r-schirm:   0.1011;
  --f-insel-b:    0.2244;
  --f-insel-h:    0.0655;
  --f-insel-t:    0.0301;

  





















  --geraet-huelle: linear-gradient(146deg, #6E6E73 0%, #2A2A2E 16%, #101012 38%, #4A4A50 62%, #08080A 82%, #5C5C62 100%); 
  --geraet-glanz: linear-gradient(122deg, rgb(255 255 255 / 0.16) 0%, transparent 26%, transparent 74%, rgb(255 255 255 / 0.09) 100%); 
  --geraet-taste: linear-gradient(90deg, #4A4A50, #101012); 
  --geraet-punkt: radial-gradient(circle at 34% 30%, #45454B 0%, #1B1B1F 58%, #050506 100%); 
  --geraet-inselkante: rgb(255 255 255 / 0.055); 
  --geraet-schatten: 0 0 0 1px rgb(255 255 255 / 0.10) inset, 0 calc(var(--telefon-b) * 0.09) calc(var(--telefon-b) * 0.18) rgb(0 0 0 / 0.34), 0 calc(var(--telefon-b) * 0.02) calc(var(--telefon-b) * 0.05) rgb(0 0 0 / 0.22); 

  --rand:     calc(var(--telefon-b) * var(--f-rand));
  --schirm-b: calc(var(--telefon-b) * var(--f-schirm-b));
  --schirm-h: calc(var(--telefon-b) * var(--f-schirm-h));

  

  --e: calc(var(--schirm-b) / 393);

  display: flex;
  justify-content: center;
}






.igtelefon {
  position: relative;
  inline-size: var(--telefon-b);
  aspect-ratio: 1 / var(--f-koerper-h);
  border-radius: calc(var(--telefon-b) * var(--f-r-koerper));
  padding: var(--rand);
  




  background: var(--geraet-huelle);
  box-shadow: var(--geraet-schatten);
  




}

.igtelefon__glanz {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: var(--z-erhoben);
  background: var(--geraet-glanz);
}

.igtelefon__taste {
  position: absolute;
  inline-size: calc(var(--telefon-b) * 0.0075);
  border-radius: calc(var(--telefon-b) * 0.004);
  background: var(--geraet-taste);
  pointer-events: none;
}
.igtelefon__taste--stumm { inset-inline-start: calc(var(--telefon-b) * -0.006); inset-block-start: calc(var(--telefon-b) * 0.152); block-size: calc(var(--telefon-b) * 0.044); }
.igtelefon__taste--lauter { inset-inline-start: calc(var(--telefon-b) * -0.006); inset-block-start: calc(var(--telefon-b) * 0.216); block-size: calc(var(--telefon-b) * 0.064); }
.igtelefon__taste--leiser { inset-inline-start: calc(var(--telefon-b) * -0.006); inset-block-start: calc(var(--telefon-b) * 0.312); block-size: calc(var(--telefon-b) * 0.064); }
.igtelefon__taste--ein    { inset-inline-end:   calc(var(--telefon-b) * -0.006); inset-block-start: calc(var(--telefon-b) * 0.245); block-size: calc(var(--telefon-b) * 0.108); }








.igschirm {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  border-radius: calc(var(--telefon-b) * var(--f-r-schirm));
  overflow: hidden;
  isolation: isolate;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
               system-ui, sans-serif;
  font-size: calc(14 * var(--e));
  line-height: 1.34;
  letter-spacing: calc(-0.15 * var(--e));

  




  --ig-grund:   #000000; 
  --ig-tinte:   #FFFFFF; 
  --ig-tinte-2: #A8A8A8; 
  --ig-linie:   #262626; 
  --ig-linie-2: #1A1A1A; 
  --ig-neutral: #262626; 
  --ig-blau:    #4F5EFF; 
  --ig-verweis: #E0F1FF; 
  --ig-kante:   #4B535C; 
  --ig-leise:   #6E6E6E; 
  --ig-ring: conic-gradient(from 215deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5, #FEDA75); 

  


  --ig-zeiger:       rgb(255 255 255 / 0.18); 
  --ig-zeiger-kante: rgb(255 255 255 / 0.42); 
  --ig-zeiger-druck: rgb(255 255 255 / 0.32); 
  --ig-welle-kante:  rgb(255 255 255 / 0.5);  

  background: var(--ig-grund);
  color: var(--ig-tinte);
}













.iginsel {
  position: absolute;
  inset-block-start: calc(var(--telefon-b) * var(--f-insel-t));
  inset-inline: 0;
  margin-inline: auto;
  inline-size: calc(var(--telefon-b) * var(--f-insel-b));
  block-size: calc(var(--telefon-b) * var(--f-insel-h));
  border-radius: var(--radius-rund);
  background: var(--ig-grund);
  






  box-shadow: 0 0 0 1px var(--geraet-inselkante) inset;
  







  z-index: var(--z-kopfzeile);
  pointer-events: none;
}





.iginsel::after {
  content: "";
  position: absolute;
  inset-block: 0;
  margin-block: auto;
  inset-inline-end: calc(var(--telefon-b) * 0.0314);
  inline-size: calc(var(--telefon-b) * 0.019);
  block-size: calc(var(--telefon-b) * 0.019);
  border-radius: var(--radius-kreis);
  background: var(--geraet-punkt);
}

.igstatus {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-klebend);
  display: flex;
  align-items: center;
  justify-content: space-between;
  block-size: calc(54 * var(--e));
  padding-inline: calc(26 * var(--e));
  padding-block-start: calc(14 * var(--e));
  font-size: calc(14 * var(--e));
  font-weight: 600;
  letter-spacing: calc(0.2 * var(--e));
  color: var(--ig-tinte);
  background: var(--ig-grund);
  pointer-events: none;
}
.igstatus__rechts { display: flex; align-items: center; gap: calc(5 * var(--e)); }
.igstatus__zeichen { block-size: calc(11 * var(--e)); inline-size: auto; }

.igleiste {
  position: absolute;
  inset-block-start: calc(54 * var(--e));
  inset-inline: 0;
  z-index: var(--z-klebend);
  display: flex;
  align-items: center;
  gap: calc(12 * var(--e));
  block-size: calc(44 * var(--e));
  padding-inline: calc(14 * var(--e));
  background: var(--ig-grund);
  border-block-end: 0.5px solid transparent;
  transition: border-color var(--zeit-zustand) linear;
}
.igleiste.klebt { border-block-end-color: var(--ig-linie); }
.igleiste__name {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--e));
  font-size: calc(16 * var(--e));
  font-weight: 700;
  letter-spacing: calc(-0.3 * var(--e));
}
.igleiste__luecke { margin-inline-start: auto; }
.igleiste__zeichen { inline-size: calc(23 * var(--e)); block-size: calc(23 * var(--e)); color: var(--ig-tinte); }









.igfeld {
  position: absolute;
  inset-block-start: calc(98 * var(--e));
  inset-block-end: calc(49 * var(--e));
  inset-inline: 0;
  overflow: hidden;
  background: var(--ig-grund);
}
.igrolle {
  will-change: transform;
  transform: translate3d(0, 0, 0);
  padding-block-end: calc(16 * var(--e));
}

.igprofil { padding-inline: calc(16 * var(--e)); padding-block-start: calc(12 * var(--e)); }
.igprofil__kopf { display: flex; align-items: center; gap: calc(24 * var(--e)); }

.igbild {
  flex: none;
  position: relative;
  inline-size: calc(86 * var(--e));
  block-size: calc(86 * var(--e));
  border-radius: var(--radius-kreis);
  padding: calc(2.5 * var(--e));
  
  background: var(--ig-ring);
}
.igbild__innen {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border-radius: var(--radius-kreis);
  border: calc(2.5 * var(--e)) solid var(--ig-grund);
  overflow: hidden;
  background: var(--ig-linie-2);
}
.igbild__innen img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.igzahlen { display: flex; flex: 1; justify-content: space-around; gap: calc(4 * var(--e)); text-align: center; }
.igzahlen__wert {
  display: block;
  font-size: calc(17 * var(--e));
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.igzahlen__wort { font-size: calc(13 * var(--e)); line-height: 1.3; }

.igbio { padding-block-start: calc(12 * var(--e)); }
.igbio__name { font-size: calc(14 * var(--e)); font-weight: 700; }
.igbio__art  { font-size: calc(14 * var(--e)); color: var(--ig-tinte-2); }
.igbio__zeile { font-size: calc(14 * var(--e)); }
.igbio__verweis {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--e));
  padding-block-start: calc(2 * var(--e));
  font-size: calc(14 * var(--e));
  font-weight: 600;
  color: var(--ig-verweis);
}
.igbio__verweis svg { inline-size: calc(13 * var(--e)); block-size: calc(13 * var(--e)); }


.igmarken { display: flex; gap: calc(8 * var(--e)); padding-block-start: calc(10 * var(--e)); }
.igmarke {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--e));
  block-size: calc(30 * var(--e));
  padding-inline: calc(12 * var(--e));
  border: 1px solid var(--ig-linie);
  border-radius: var(--radius-rund);
  font-size: calc(13 * var(--e));
}
.igmarke svg { inline-size: calc(13 * var(--e)); block-size: calc(13 * var(--e)); }






.igtasten {
  display: flex;
  gap: calc(6 * var(--e));
  padding-inline: calc(16 * var(--e));
  padding-block-start: calc(14 * var(--e));
}

.igtaste {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(5 * var(--e));
  block-size: calc(32 * var(--e));
  border-radius: calc(8 * var(--e));
  font-size: calc(14 * var(--e));
  font-weight: 600;
  letter-spacing: calc(-0.2 * var(--e));
  white-space: nowrap;
  transition: background-color var(--zeit-zustand) var(--kurve-aus),
              color var(--zeit-zustand) var(--kurve-aus);
}
.igtaste--folgen  { flex: 1 1 auto; background: var(--ig-blau); color: var(--ig-tinte); }
.igtaste--neutral { flex: 1 1 auto; background: var(--ig-neutral); color: var(--ig-tinte); }
.igtaste--zeichen { flex: none; inline-size: calc(34 * var(--e)); background: var(--ig-neutral); color: var(--ig-tinte); }
.igtaste--zeichen svg { inline-size: calc(15 * var(--e)); block-size: calc(15 * var(--e)); }
.igtaste__winkel { inline-size: calc(10 * var(--e)); block-size: calc(10 * var(--e)); display: none; }



.igtaste--folgen.folgt { background: var(--ig-neutral); color: var(--ig-tinte); }
.igtaste__wort--folgt { display: none; }
.igtaste--folgen.folgt .igtaste__wort--folgen { display: none; }
.igtaste--folgen.folgt .igtaste__wort--folgt  { display: inline; }
.igtaste--folgen.folgt .igtaste__winkel { display: block; }


.igtaste.gedrueckt { transform: scale(0.965); transition: transform var(--zeit-zustand) var(--kurve-aus); }






.ighighlights {
  display: flex;
  gap: calc(16 * var(--e));
  padding-inline: calc(16 * var(--e));
  padding-block: calc(16 * var(--e)) calc(12 * var(--e));
  overflow: hidden;
}
.ighighlight { flex: none; inline-size: calc(64 * var(--e)); text-align: center; }
.ighighlight__ring {
  inline-size: calc(64 * var(--e));
  block-size: calc(64 * var(--e));
  border-radius: var(--radius-kreis);
  padding: calc(2 * var(--e));
  border: 1px solid var(--ig-kante);
  overflow: hidden;
}
.ighighlight__ring picture,
.ighighlight__ring img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border-radius: var(--radius-kreis);
  object-fit: cover;
}
.ighighlight__wort {
  display: block;
  margin-block-start: calc(6 * var(--e));
  font-size: calc(12 * var(--e));
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.igreiter { display: flex; border-block-start: 0.5px solid var(--ig-linie); }
.igreiter__feld {
  flex: 1;
  display: grid;
  place-items: center;
  block-size: calc(44 * var(--e));
  color: var(--ig-leise);
  border-block-end: 1px solid transparent;
}
.igreiter__feld.ist-an { color: var(--ig-tinte); border-block-end-color: var(--ig-tinte); }
.igreiter__feld svg { inline-size: calc(23 * var(--e)); block-size: calc(23 * var(--e)); }

.igraster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(1.5 * var(--e));
  padding-block-start: calc(1.5 * var(--e));
}
.igzelle {
  position: relative;
  
  aspect-ratio: 1 / 1.334;
  overflow: hidden;
  background: var(--ig-linie-2);
}
.igzelle img { inline-size: 100%; block-size: 100%; object-fit: cover; }









.igfussleiste {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: var(--z-klebend);
  display: flex;
  align-items: center;
  justify-content: space-around;
  block-size: calc(49 * var(--e));
  padding-block-end: calc(6 * var(--e));
  background: var(--ig-grund);
  border-block-start: 0.5px solid var(--ig-linie);
}
.igfussleiste svg { inline-size: calc(24 * var(--e)); block-size: calc(24 * var(--e)); color: var(--ig-tinte); }
.igfussleiste__ich {
  display: block;
  inline-size: calc(24 * var(--e));
  block-size: calc(24 * var(--e));
  border-radius: var(--radius-kreis);
  border: 1.5px solid var(--ig-tinte);
  overflow: hidden;
}
.igfussleiste__ich img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.ighausbalken {
  position: absolute;
  inset-block-end: calc(7 * var(--e));
  inset-inline: 0;
  margin-inline: auto;
  z-index: var(--z-erhoben);
  inline-size: calc(134 * var(--e));
  block-size: calc(5 * var(--e));
  border-radius: var(--radius-rund);
  background: var(--ig-tinte);
  opacity: 0.9;
  pointer-events: none;
}





.igzeiger {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: var(--z-zeiger);
  inline-size: calc(38 * var(--e));
  block-size: calc(38 * var(--e));
  border-radius: var(--radius-kreis);
  background: var(--ig-zeiger);
  border: 1.5px solid var(--ig-zeiger-kante);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-100%, -100%, 0) scale(1);
  transition: opacity var(--zeit-zustand-langsam) var(--kurve-aus);
}
.igzeiger.ist-da { opacity: 1; }
.igzeiger.drueckt { background: var(--ig-zeiger-druck); }

.igwelle {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-kreis);
  border: 1.5px solid var(--ig-welle-kante);
  opacity: 0;
}
.igzeiger.drueckt .igwelle { animation: igwelle var(--zeit-vorhang) var(--kurve-aus); }
@keyframes igwelle {
  0%   { opacity: 0.9; transform: scale(0.6); }
  100% { opacity: 0;   transform: scale(2.5); }
}






.igabschnitt .bahn { display: grid; gap: var(--raum-7); align-items: center; }
@media (min-width: 62rem) {
  






  .igabschnitt .bahn {
    grid-template-columns: minmax(0, 38rem) auto;
    justify-content: space-between;
    gap: var(--raum-9);
  }
}

.igtext { display: grid; gap: var(--raum-4); }
.igzeile {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  font-size: var(--t--1);
  color: var(--tinte-leise);
}
.igzeile__punkt {
  display: block;
  flex: none;
  inline-size: .45rem;
  block-size: .45rem;
  border-radius: var(--radius-kreis);
  

  background: var(--akzent);
}


.kein-js .igzeiger { display: none; }

@media (prefers-reduced-motion: reduce) {
  .igzeiger { display: none; }
}


/* ── Sektions-Layout im Kombüchen-Raster ─────────────────────────────────── */
.igabschnitt .container { display: grid; grid-template-columns: 1fr auto;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.igtext { max-width: 56ch; }
.igtext .eyebrow { margin-bottom: .9rem; }
.igtext h2 { margin-bottom: 1.2rem; }
.iglist { list-style: none; margin: 1.6rem 0; display: grid; gap: .75rem; }
.iglist li { position: relative; padding-left: 1.6rem; font-size: .96rem;
  color: color-mix(in srgb, var(--bone) 78%, transparent); }
.iglist li::before { content: ""; position: absolute; left: 0; top: .62em;
  inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: var(--gold); }
.ighandle { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: 1.4rem;
  font-family: var(--font-sans); font-size: .9rem; font-weight: 600; letter-spacing: .04em;
  color: var(--gold-2); }
.igbtn { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none;
  font-family: var(--font-sans); font-size: .95rem; font-weight: 600; line-height: 1;
  padding: .95rem 1.4rem; border-radius: var(--r-pill);
  color: var(--sage-deeper); background: var(--gold); border: 1px solid var(--gold);
  box-shadow: var(--shadow-gold);
  transition: background var(--dur-1) var(--ease-lux), color var(--dur-1) var(--ease-lux); }
.igbtn svg { inline-size: 1.2rem; block-size: 1.2rem; }
.igbtn:hover, .igbtn:focus-visible { background: var(--gold-2); border-color: var(--gold-2); }
.igbtn:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }

@media (max-width: 980px) {
  .igabschnitt .container { grid-template-columns: 1fr; justify-items: center; }
  .igtext { max-width: none; }
}


/* ── Korrekturen: Glyphengrößen + Instagram-Hover ────────────────────────── */
.ighandle svg, .igbtn svg { inline-size: 1.15rem; block-size: 1.15rem; flex: none; }
.igbtn { position: relative; overflow: hidden; isolation: isolate; }
/* Beim Hover nimmt der Button den originalen Instagram-Verlauf an */
.igbtn::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(circle at 28% 108%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%);
  transition: opacity var(--dur-2) var(--ease-lux); }
.igbtn:hover, .igbtn:focus-visible { color: #fff; border-color: transparent; box-shadow: 0 14px 34px -14px rgba(214,36,159,.55); }
.igbtn:hover::before, .igbtn:focus-visible::before { opacity: 1; }