<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./support.js"></script>
</head>
<body>
<template id="__bundler_thumbnail">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><rect width="200" height="200" fill="#F5F8F5"/><circle cx="100" cy="100" r="52" fill="none" stroke="#839486" stroke-width="1.5"/><text x="100" y="114" text-anchor="middle" font-family="Georgia, serif" font-size="42" font-weight="300" fill="#26302A">bS</text></svg>
</template>
<x-dc>
<helmet>
<link rel="stylesheet" href="_ds/der-blasse-schimmer-design-system-38ab0a3c-3057-453f-b8c5-005bebada229/tokens/fonts.css">
<link rel="stylesheet" href="_ds/der-blasse-schimmer-design-system-38ab0a3c-3057-453f-b8c5-005bebada229/tokens/colors.css">
<link rel="stylesheet" href="_ds/der-blasse-schimmer-design-system-38ab0a3c-3057-453f-b8c5-005bebada229/tokens/typography.css">
<link rel="stylesheet" href="_ds/der-blasse-schimmer-design-system-38ab0a3c-3057-453f-b8c5-005bebada229/tokens/spacing.css">
<link rel="stylesheet" href="_ds/der-blasse-schimmer-design-system-38ab0a3c-3057-453f-b8c5-005bebada229/tokens/motion.css">
<link rel="stylesheet" href="_ds/der-blasse-schimmer-design-system-38ab0a3c-3057-453f-b8c5-005bebada229/styles.css">
<script src="_ds/der-blasse-schimmer-design-system-38ab0a3c-3057-453f-b8c5-005bebada229/_ds_bundle.js"></script>
<style>
  :root {
    --dbs-alabaster: #FFFFFF;
    --dbs-porcelain: #F5F8F5;
    --dbs-linen: #E6EDE6;
    --dbs-sage: #839486;
    --dbs-espresso: #26302A;
    --dbs-espresso-light: #4C574F;
    --dbs-espresso-72: rgba(38,48,42,0.72);
    --dbs-espresso-55: rgba(38,48,42,0.55);
    --dbs-espresso-40: rgba(38,48,42,0.42);
    --dbs-espresso-25: rgba(38,48,42,0.22);
    --dbs-espresso-12: rgba(38,48,42,0.11);
    --dbs-taupe: #8A8078;
    --dbs-taupe-45: rgba(138,128,120,0.45);
    --dbs-makeup: #839486;
    --dbs-skincare: #B8A99A;
  }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--dbs-alabaster); -webkit-font-smoothing: antialiased; }
  * { box-sizing: border-box; }
  a { color: var(--dbs-espresso); text-decoration: none; }
  a:hover { color: var(--dbs-espresso-72); }
  img { display: block; width: 100%; height: 100%; object-fit: cover; }
  button { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; text-align: inherit; background: none; border: 0; cursor: pointer; }
  @keyframes dbsRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes dbsFade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes dbsShimmer { 0% { background-position: -140% 0, 0 0; } 55%, 100% { background-position: 240% 0, 0 0; } }
  .dbs-shimmer { background-image: linear-gradient(100deg, transparent 34%, rgba(255,255,255,0.92) 50%, transparent 66%), linear-gradient(var(--dbs-espresso), var(--dbs-espresso)); background-size: 220% 100%, 100% 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; animation: dbsShimmer 11s var(--ease-soft, ease-in-out) 1.2s infinite; }
  @media (prefers-reduced-motion: reduce) { .dbs-shimmer { animation: none; } }
  .dbs-welt-box { transition: transform 760ms var(--ease-soft, cubic-bezier(0.4,0,0.2,1)), border-color 620ms var(--ease-soft, ease), background 620ms var(--ease-soft, ease); }
  .dbs-welt-box:hover { transform: translateY(-6px); border-color: var(--dbs-taupe-45) !important; background: var(--dbs-porcelain) !important; }
  .dbs-welt-box:hover [data-inner] { inset: 6px !important; border-color: var(--dbs-espresso-12) !important; }
  .dbs-welt-box:hover [data-tick] { opacity: 1 !important; width: 22px !important; }
  .dbs-welt-box:hover [data-welt-arrow] { opacity: 1 !important; transform: none !important; }
  .dbs-welt-box:hover [data-welt-name] { transform: translateX(6px) !important; }
  .dbs-ref-frame { transition: border-color 620ms var(--ease-soft, ease), background 620ms var(--ease-soft, ease); }
  .dbs-ref-frame:hover { border-color: var(--dbs-taupe-45) !important; }
  .dbs-ref-frame:hover [data-ref-name] { transform: translateX(6px) !important; }
  .dbs-ref-frame:hover [data-sign] { opacity: 1 !important; }
  .dbs-ref-frame[data-open="1"] { border-color: var(--dbs-taupe-45) !important; background: var(--dbs-porcelain) !important; }
  @media (max-width: 900px) { .dbs-vine { display: none !important; } }
  @media (max-width: 880px) { .dbs-about-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 48px !important; } }
  @media (max-width: 640px) {
    .dbs-welt-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .dbs-welt-box [data-welt-arrow] { opacity: 0.5 !important; transform: none !important; }
  }
  /* --- Mobile-Layoutkorrekturen (nur Layout, keine Inhalte geaendert) --- */
  @media (max-width: 880px) {
    /* Ueber mich: Portrait nicht mehr fixieren, damit es nicht ueber den Text scrollt */
    .dbs-about-grid > div:first-child { position: static !important; top: auto !important; }
    /* Artikel-Inhaltsverzeichnis: Sticky auf Mobil deaktivieren, sonst ueberlappt es den Text */
    nav[style*="position: sticky"] { position: static !important; top: auto !important; max-width: none !important; flex-basis: auto !important; margin-bottom: 12px; }
    /* Feste Breite im Bereiche-Kopf aufheben, damit nichts rechts ueberlaeuft */
    [style*="width: 410px"] { width: 100% !important; height: auto !important; }
    /* Verschobenes Zitat und Bildunterschrift zuruecksetzen */
    blockquote[style*="left: 180px"] { left: 0 !important; max-width: none !important; }
    figcaption[style*="left: 50px"] { left: 0 !important; }
  }
  @media (max-width: 640px) {
    /* Header kompakter, damit er auf dem Handy nicht den halben Screen einnimmt */
    header > div { padding: 20px 20px 16px !important; gap: 16px !important; }
    header nav { gap: 16px 22px !important; }
    /* Hero: grosse Innenabstaende an schmale Screens anpassen */
    [style*="padding: 96px 72px 100px 40px"] { padding: 52px 22px 60px 22px !important; }
  }
</style>
</helmet>

<div style="font-family: var(--dbs-font-sans); font-weight: 300; color: var(--dbs-espresso); background: var(--dbs-alabaster); min-height: 100vh;">

  

  <header style="position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,0.9); backdrop-filter: blur(14px); border-bottom: 1px solid var(--dbs-espresso-12);">
    <div style="max-width: 1180px; margin: 0 auto; padding: 30px 40px 22px; display: flex; flex-direction: column; align-items: center; gap: 24px;">
      <button onClick="{{ goStart }}" style="display: flex; align-items: center; gap: 20px;">
        <span style="width: 44px; height: 44px; flex: none;"><img src="assets/logo-mono-2026.png" alt="" style="object-fit: contain;"></span>
        <span style="font-size: clamp(19px, 2.4vw, 27px); font-weight: 300; letter-spacing: 0.3em; text-transform: uppercase; line-height: 1; color: var(--dbs-espresso);">Der blasse Schimmer</span>
      </button>
      <nav style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 36px; font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;">
        <button onClick="{{ goStart }}" style="position: relative; padding: 6px 0; transition: opacity 320ms var(--ease-soft, ease);" style-hover="opacity: 0.55;">Start<sc-if value="{{ atStart }}" hint-placeholder-val="{{ true }}"><span style="position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--dbs-espresso);"></span></sc-if></button>
        <a href="#welten" onClick="{{ goStart }}" style="padding: 6px 0; transition: opacity 320ms var(--ease-soft, ease);" style-hover="opacity: 0.55;">BEREICHE</a>
        <button onClick="{{ goUeber }}" style="position: relative; padding: 6px 0; transition: opacity 320ms var(--ease-soft, ease);" style-hover="opacity: 0.55;">Über mich<sc-if value="{{ atUeber }}" hint-placeholder-val="{{ true }}"><span style="position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--dbs-espresso);"></span></sc-if></button>
        <a href="Media Kit.html" style="padding: 6px 0; transition: opacity 320ms var(--ease-soft, ease);" style-hover="opacity: 0.55;">PR &amp; Media Kit</a>
        <a href="mailto:info@der-blasse-schimmer.de" style="padding: 8px 18px; border: 1px solid var(--dbs-espresso-25); border-radius: 999px; transition: background 380ms var(--ease-soft, ease), border-color 380ms var(--ease-soft, ease);" style-hover="background: var(--dbs-linen); border-color: var(--dbs-espresso-40);">Kontakt</a>
        <a href="https://www.instagram.com/derblasseschimmer" target="_blank" rel="noreferrer" style="padding: 8px 18px; border: 1px solid var(--dbs-espresso-25); border-radius: 999px; transition: background 380ms var(--ease-soft, ease), border-color 380ms var(--ease-soft, ease);" style-hover="background: var(--dbs-linen); border-color: var(--dbs-espresso-40);">Instagram</a>
      </nav>
    </div>
  </header>

  <sc-if value="{{ atStart }}" hint-placeholder-val="{{ true }}">
  <main>
    <section style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)); align-items: stretch; min-height: 78vh;">
      <div style="display: flex; align-items: center; padding: 96px 72px 100px 40px;">
        <div style="width: 100%; max-width: 560px; margin-left: auto; animation: dbsRise 800ms var(--ease-soft, cubic-bezier(0.4,0,0.2,1)) both;">
          <p style="margin: 0 0 30px; font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dbs-espresso-40);">BEAUTY ZWISCHEN DEN LINIEN&nbsp;</p>
          <h1 class="dbs-shimmer" style="margin: 0 0 28px; font-family: var(--dbs-font-serif); font-weight: 300; font-size: clamp(54px, 5.6vw, 86px); line-height: 1.0; letter-spacing: -0.015em; text-wrap: pretty;">Blass, heißt<br>nicht farblos</h1>
          <p style="margin: 0 0 30px; font-family: var(--dbs-font-serif); font-style: italic; font-weight: 300; font-size: 27px; line-height: 1.38; color: var(--dbs-espresso-72); max-width: 30ch;">&nbsp;- Makeup, Hautpflege, Parfum, Curls.&nbsp;</p>
          <p style="margin: 0 0 42px; font-size: 17px; line-height: 1.75; color: var(--dbs-espresso-light); max-width: 46ch;">Ich bin Flo und blogge mit familiär bedingten Unterbrechungen seit 2013. Hier findest Du neben 2-3 Artikeln, die ich auch im weiteren Verlauf aktueller erstellen werde, ein paar wissenswerte Dinge und Referenzen für Dich sowie mein Media Kit, falls Du Dich für eine Zusammenarbeit interessierst und natürlich: wie Du mich erreichen kannst.</p>
          <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 14px;">
            
            <a href="Media Kit.html" style="padding: 14px 26px; border-radius: 999px; border: 1px solid var(--dbs-espresso-25); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; transition: background 380ms var(--ease-soft, ease), border-color 380ms var(--ease-soft, ease);" style-hover="background: var(--dbs-linen); border-color: var(--dbs-espresso-40);">PR &amp; Media Kit</a>
            <a href="mailto:info@der-blasse-schimmer.de" style="padding: 14px 26px; border-radius: 999px; border: 1px solid var(--dbs-espresso-25); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; transition: background 380ms var(--ease-soft, ease), border-color 380ms var(--ease-soft, ease);" style-hover="background: var(--dbs-linen); border-color: var(--dbs-espresso-40);">Kontakt</a>
          </div>
        </div>
      </div>
      <div style="position: relative; min-height: 58vh; background: var(--dbs-porcelain); overflow: hidden; animation: dbsFade 1200ms var(--ease-soft, ease) both;">
        <img src="https://www.der-blasse-schimmer.de/wp-content/uploads/2021/09/Foreo-bear-81.jpg" alt="Flo — Der blasse Schimmer">
        <span style="position: absolute; inset: 28px; border: 1.5px solid rgba(255,255,255,0.42); pointer-events: none;"></span>
        <p style="position: absolute; left: 28px; bottom: 28px; margin: 0; padding: 9px 18px; border-radius: 999px; background: rgba(255,255,255,0.86); backdrop-filter: blur(14px); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;">FLO</p>
      </div>
    </section>

    <section id="welten" style="border-top: 1px solid var(--dbs-espresso-12); background: var(--dbs-alabaster);">
      <div style="max-width: 1180px; margin: 0 auto; padding: 88px 40px 104px;">
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 26px 80px; align-items: end; margin-bottom: 60px;">
          
          <div style="width: 410px; height: 134px">
            <p style="margin: 0 0 20px; font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dbs-espresso-40); margin-top: 0px">BEREICHE</p>
            <h2 style="margin: 0; font-family: var(--dbs-font-serif); font-weight: 300; font-size: clamp(42px, 4.6vw, 62px); line-height: 1.02; text-wrap: pretty; margin-top: 0px">BEAUTY</h2>
          </div><p style="margin: 0; font-size: 16px; line-height: 1.7; color: var(--dbs-espresso-light); max-width: 42ch;">Mit Makeup hat alles angefangen. Parfum wurde für mich zum Kleidungsstück, Hautpflege wegen eigener Probleme zum Spezialinteresse und dass ich nach all den Jahren noch mit 45 selbst Naturlocken an mir entdecke, hat mich so richtig überrascht ... und meine Erfahrungen teile ich natürlich mit Euch</p>
        </div>
        <div class="dbs-welt-grid" style="max-width: 860px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px;">
          <sc-for list="{{ welten }}" as="w" hint-placeholder-count="4">
            <a href="{{ w.href }}" onClick="{{ w.reveal }}" class="dbs-welt-box" style="--w: {{ w.dot }}; position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; min-height: 138px; padding: 24px 32px 22px; border: 1px solid var(--dbs-espresso-12); background: var(--dbs-alabaster);">
              <span data-inner="" aria-hidden="true" style="position: absolute; inset: 11px; pointer-events: none; border: 1px solid transparent; transition: inset 760ms var(--ease-soft, cubic-bezier(0.4,0,0.2,1)), border-color 620ms var(--ease-soft, ease);"></span>
              <span data-tick="" aria-hidden="true" style="position: absolute; left: -1px; top: -1px; width: 12px; height: 1px; background: var(--w); opacity: 0.55; transition: width 700ms var(--ease-soft, cubic-bezier(0.4,0,0.2,1)), opacity 620ms var(--ease-soft, ease);"></span>
              <span style="position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;">
                <span style="width: 7px; height: 7px; border-radius: 999px; background: var(--w);"></span>
                <span style="font-size: 10px; font-weight: 500; letter-spacing: 0.22em; color: var(--dbs-espresso-40);">{{ w.num }}</span>
              </span>
              <span style="position: relative; display: block;">
                <span data-welt-name="" style="display: block; margin-bottom: 12px; font-family: var(--dbs-font-serif); font-weight: 300; font-size: clamp(28px, 2.7vw, 38px); line-height: 1.0; letter-spacing: -0.01em; transition: transform 700ms var(--ease-soft, cubic-bezier(0.4,0,0.2,1));">{{ w.name }}</span>
                <span style="display: block; font-family: var(--dbs-font-serif); font-style: italic; font-weight: 300; font-size: 16px; line-height: 1.5; color: var(--dbs-espresso-72);">{{ w.claim }}</span>
              </span>
              <span data-welt-arrow="" style="position: relative; display: block; font-size: 17px; line-height: 1; color: var(--dbs-espresso-40); opacity: 0; transform: translateX(-8px); transition: opacity 620ms var(--ease-soft, ease), transform 700ms var(--ease-soft, ease);">→</span>
            </a>
          </sc-for>
        </div>
      </div>
    </section>

    <section id="profil" style="scroll-margin-top: 44px; border-top: 1px solid var(--dbs-espresso-12);">
      <div style="max-width: 1180px; margin: 0 auto; padding: 100px 40px 52px;">
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 28px 80px; align-items: end;">
          <div>
            <p style="margin: 0 0 20px; font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dbs-espresso-40);">MEIN PROFIL · REFERENZEN</p>
            <h2 style="margin: 0; font-family: var(--dbs-font-serif); font-weight: 300; font-size: clamp(44px, 4.8vw, 66px); line-height: 1.0; text-wrap: pretty;">Damit Du weißt, ob wir zusammenpassen.</h2>
          </div>
          <div>
            <p style="margin: 0 0 12px; font-size: 16px; line-height: 1.7; color: var(--dbs-espresso-light); max-width: 44ch;">Ob eine meiner Empfehlungen für Dich nutzt, hängt davon ab, ob Du Ähnlichkeiten oder Unterschiede ableiten kannst. Hier also meine eigenen Voraussetzungen, Vorlieben und Bedürfnisse</p>
          </div>
        </div>
      </div>
      <div style="max-width: 1180px; margin: 0 auto; padding: 0 40px 96px;">
        <sc-for list="{{ profile }}" as="p" hint-placeholder-count="4">
          <div id="{{ p.anchorId }}" class="dbs-ref-frame" data-open="{{ p.openAttr }}" style="--w: {{ p.dot }}; position: relative; scroll-margin-top: 180px; border: 1px solid var(--dbs-espresso-12); background: var(--dbs-alabaster); margin-bottom: 14px;">
            <span data-band="" aria-hidden="true" style="position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background: var(--w); transform: {{ p.bandTransform }}; transform-origin: top; transition: transform 760ms var(--ease-soft, cubic-bezier(0.4,0,0.2,1));"></span>
            <button type="button" onClick="{{ p.toggle }}" style="position: relative; display: flex; align-items: center; gap: 28px; width: 100%; margin: 0; padding: 26px 34px 26px 38px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;">
              <span style="display: flex; align-items: center; gap: 12px; flex: none;">
                <span style="width: 8px; height: 8px; border-radius: 999px; background: var(--w);"></span>
                <span style="font-size: 10px; font-weight: 500; letter-spacing: 0.22em; color: var(--dbs-espresso-40);">{{ p.num }}</span>
              </span>
              <span data-ref-name="" style="flex: none; font-family: var(--dbs-font-serif); font-weight: 300; font-size: clamp(27px, 2.9vw, 38px); line-height: 1.0; transition: transform 700ms var(--ease-soft, cubic-bezier(0.4,0,0.2,1));">{{ p.name }}</span>
              <span data-ref-lead="" style="flex: 1; min-width: 0; font-family: var(--dbs-font-serif); font-style: italic; font-weight: 300; font-size: 17px; line-height: 1.4; color: var(--dbs-espresso-55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: {{ p.leadOpacity }}; transition: opacity 520ms var(--ease-soft, ease);">{{ p.lead }}</span>
              <span data-sign="" aria-hidden="true" style="flex: none; width: 15px; height: 15px; position: relative; opacity: {{ p.signOpacity }}; transform: {{ p.signTransform }}; transition: transform 700ms var(--ease-soft, cubic-bezier(0.4,0,0.2,1)), opacity 520ms var(--ease-soft, ease);">
                <span style="position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--dbs-espresso);"></span>
                <span style="position: absolute; top: 0; bottom: 0; left: 7px; width: 1px; background: var(--dbs-espresso);"></span>
              </span>
            </button>
            <div data-panel="" style="display: grid; grid-template-rows: {{ p.panelRows }}; opacity: {{ p.panelOpacity }}; transition: grid-template-rows 720ms var(--ease-soft, cubic-bezier(0.4,0,0.2,1)), opacity 620ms var(--ease-soft, ease);">
              <div style="overflow: hidden;">
                <div style="position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 30px 56px; padding: 0 0 40px; border-top: 1px solid var(--dbs-espresso-12); margin: 0 34px 0 38px;">
                  <span data-ghost="" aria-hidden="true" style="position: absolute; right: 0; top: -22px; font-family: var(--dbs-font-serif); font-weight: 300; font-size: 96px; line-height: 1; color: var(--w); opacity: {{ p.ghostOpacity }}; transform: {{ p.ghostTransform }}; pointer-events: none; transition: opacity 900ms var(--ease-soft, ease), transform 900ms var(--ease-soft, ease);">{{ p.num }}</span>
                  <p style="grid-column: 1 / -1; margin: 26px 0 0; font-family: var(--dbs-font-serif); font-style: italic; font-weight: 300; font-size: 21px; line-height: 1.45; color: var(--dbs-espresso-72); max-width: 50ch; text-wrap: pretty">{{ p.lead }}</p>
                  <div>
                    <div style="display: flex; align-items: center; gap: 11px; margin-bottom: 9px;">
                      <span style="width: 18px; height: 1px; flex: none; background: var(--w);"></span>
                      <span style="font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dbs-espresso-40);">Meine Voraussetzungen</span>
                    </div>
                    <p style="margin: 0; font-size: 17px; line-height: 1.75; color: var(--dbs-espresso-light); max-width: 50ch; text-wrap: pretty;">{{ p.voraussetzung }}</p>
                  </div>
                  <div>
                    <div style="display: flex; align-items: center; gap: 11px; margin-bottom: 9px;">
                      <span style="width: 18px; height: 1px; flex: none; background: var(--w);"></span>
                      <span style="font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dbs-espresso-40);">Meine Referenzen</span>
                    </div>
                    <p style="margin: 0; font-size: 17px; line-height: 1.75; color: var(--dbs-espresso-light); max-width: 50ch; text-wrap: pretty; white-space: pre-line;">{{ p.findest }}</p>
                  </div>

              <sc-if value="{{ p.hatNicht }}" hint-placeholder-val="{{ true }}">
                <div>
                  <div style="display: flex; align-items: center; gap: 11px; margin-bottom: 9px;">
                    <span style="width: 18px; height: 1px; flex: none; background: var(--dbs-espresso-25);"></span>
                    <span style="font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dbs-espresso-40);">VORLIEBEN</span>
                  </div>
                  <p style="margin: 0; font-size: 17px; line-height: 1.75; color: var(--dbs-espresso-55); max-width: 50ch; text-wrap: pretty;">{{ p.nicht }}</p>
                </div>
              </sc-if>
              <sc-if value="{{ p.hatBedarf }}" hint-placeholder-val="{{ true }}">
                <div>
                  <div style="display: flex; align-items: center; gap: 11px; margin-bottom: 9px;">
                    <span style="width: 18px; height: 1px; flex: none; background: var(--dbs-espresso-25);"></span>
                    <span style="font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dbs-espresso-40);">Je nach Bedarf wechselnd</span>
                  </div>
                  <p style="margin: 0; font-size: 17px; line-height: 1.75; color: var(--dbs-espresso-55); max-width: 50ch; text-wrap: pretty; white-space: pre-line;">{{ p.bedarf }}</p>
                </div>
              </sc-if></div>
              </div>
            </div>
          </div>
        </sc-for>
      </div>
      <div style="border-top: 1px solid var(--dbs-espresso-12); background: var(--dbs-porcelain);">
        <div style="max-width: 1180px; margin: 0 auto; padding: 44px 40px; display: flex; align-items: baseline; justify-content: space-between; gap: 32px; flex-wrap: wrap;">
          <p style="margin: 0; font-size: 16px; line-height: 1.7; color: var(--dbs-espresso-light); max-width: 52ch;">Wenn Du mir etwas schreiben, mit mir zusammenwirken, mich auf Ideen bringen oder einfach austauschen magst, erreichst Du mich unter:</p>
          <a href="mailto:info@der-blasse-schimmer.de" style="font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; padding-bottom: 3px; border-bottom: 1px solid var(--dbs-espresso-25);">info@der-blasse-schimmer.de</a>
        </div>
      </div>
    </section>

    <section style="max-width: 1180px; margin: 0 auto; padding: 96px 40px 40px;">
      <div style="display: flex; align-items: baseline; justify-content: space-between; gap: 40px; margin-bottom: 44px; flex-wrap: wrap;">
        <div>
          <p style="margin: 0 0 18px; font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dbs-espresso-40);">Notizen</p>
          <h2 style="margin: 0; font-family: var(--dbs-font-serif); font-weight: 300; font-size: 44px; line-height: 1.06;">Drei Artikel aus dem Archiv</h2>
        </div>
        <p style="margin: 0; font-size: 15px; line-height: 1.7; color: var(--dbs-espresso-55); max-width: 34ch;">Auch wenn der Blog nicht mehr existiert, werde ich hier wechselnde kleinere Artikel online stellen zu denen ich mehr Raum möchte als mir bei Instagram zur Verfügung steht.</p>
      </div>
      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 0; border-top: 1px solid var(--dbs-espresso-12);">
        <button onClick="{{ goNotiz }}" style="display: flex; flex-direction: column; justify-content: flex-start; text-align: left; padding: 30px 30px 34px; transition: background 450ms var(--ease-soft, ease);" style-hover="background: var(--dbs-linen);">
          <div style="width: 100%; aspect-ratio: 4 / 3; background: var(--dbs-porcelain); overflow: hidden; margin-bottom: 26px; position: relative;">
            <img src="https://www.der-blasse-schimmer.de/wp-content/uploads/2019/05/Fru%CC%88hlingsdu%CC%88fte.jpg" alt="Frühlingsdüfte 2019">
            <span style="position: absolute; inset: 18px; border: 1.5px solid rgba(255,255,255,0.42); pointer-events: none;"></span>
          </div>
          <p style="margin: 0 0 14px; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dbs-scent);">Parfum · Lesezeit 7 Minuten</p>
          <h3 style="margin: 0 0 14px; font-family: var(--dbs-font-serif); font-weight: 300; font-size: 38px; line-height: 1.08; text-wrap: pretty; max-width: 22ch;">Der Frühling ruft — Frühlingsdüfte 2019</h3>
          <p style="margin: 0; font-size: 16px; line-height: 1.7; color: var(--dbs-espresso-light); max-width: 46ch;">Platz für Neues im Duftschrank, alte Favoriten wieder aktiviert. Fünf Düfte, die mit einem Zwinkern Raum und Haut erobern.</p>
        </button>
        <div style="display: flex; flex-direction: column; border-left: 1px solid var(--dbs-espresso-12);">
          <button onClick="{{ goBronze }}" style="display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; flex: 1; padding: 40px 40px 42px; border-bottom: 1px solid var(--dbs-espresso-12); transition: background 450ms var(--ease-soft, ease);" style-hover="background: var(--dbs-linen);">
            <p style="margin: 0 0 14px; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dbs-makeup);">Makeup · Lesezeit 8 Minuten</p>
            <h3 style="margin: 0 0 12px; font-family: var(--dbs-font-serif); font-weight: 400; font-size: 29px; line-height: 1.14; text-wrap: pretty;">Nachgeschminkt Juni 2018 — Summer Bronze</h3>
            <p style="margin: 0; font-size: 15px; line-height: 1.68; color: var(--dbs-espresso-72); max-width: 44ch;">Bronzer auf sehr heller Haut, ohne Bräunungsstudio der Achtziger. Weiche, goldene Züge mit minimalem Aufwand.</p>
          </button>
          <button onClick="{{ goUfo }}" style="display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; flex: 1; padding: 40px 40px 42px; transition: background 450ms var(--ease-soft, ease);" style-hover="background: var(--dbs-linen);">
            <p style="margin: 0 0 14px; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dbs-skincare);">Hautpflege · Lesezeit 9 Minuten</p>
            <h3 style="margin: 0 0 12px; font-family: var(--dbs-font-serif); font-weight: 400; font-size: 29px; line-height: 1.14; text-wrap: pretty;">Eine Handvoll Hautpflege — FOREO UFO</h3>
            <p style="margin: 0; font-size: 15px; line-height: 1.68; color: var(--dbs-espresso-72); max-width: 44ch;">Wärme, Kühlung und LED-Licht in einem Handschmeichler aus Silikon. Neunzig Sekunden, die ich gern verlängern würde.</p>
          </button>
        </div>
      </div>
    </section>

    <section style="max-width: 1180px; margin: 0 auto; padding: 84px 40px 40px;">
      <figure style="position: relative; margin: 0; padding: 76px 8% 80px;">
        <div style="position: absolute; left: 70px; top: 34px; width: 46%; height: 74%; background: var(--dbs-linen)"></div>
        <blockquote style="position: relative; margin: 0; font-family: var(--dbs-font-serif); font-weight: 300; font-style: italic; font-size: clamp(32px, 3.6vw, 50px); line-height: 1.22; text-wrap: pretty; max-width: 30ch; left: 180px; color: var(--dbs-espresso-light)">Blass, aber nicht farblos.</blockquote>
        
        <figcaption style="position: relative; margin-top: 30px; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dbs-espresso-40); left: 50px">Flo · Der blasse Schimmer</figcaption>
      </figure>
    </section>

    <section style="max-width: 1180px; margin: 0 auto; padding: 64px 40px 104px;">
      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 0; border: 1px solid var(--dbs-espresso-12);">
        <button onClick="{{ goUeber }}" style="display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; text-align: left; padding: 54px 48px 58px; border-right: 1px solid var(--dbs-espresso-12); transition: background 450ms var(--ease-soft, ease);" style-hover="background: var(--dbs-linen);">
          <p style="margin: 0 0 18px; font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dbs-espresso-40);">Über mich</p>
          <h3 style="margin: 0 0 14px; font-family: var(--dbs-font-serif); font-weight: 300; font-size: 34px; line-height: 1.1;">Wer hier schreibt</h3>
          <p style="margin: 0 0 20px; font-size: 16px; line-height: 1.7; color: var(--dbs-espresso-light); max-width: 40ch;">Blasshaut, Duftnase, Herbstliebhaberin, Mutter von zwei Kindern, detailverliebt und vielinteressiert.</p>
          <span style="font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;">Weiterlesen</span>
        </button>
        <a href="Media Kit.html" style="display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; text-align: left; padding: 54px 48px 58px; transition: background 450ms var(--ease-soft, ease);" style-hover="background: var(--dbs-linen);">
          <p style="margin: 0 0 18px; font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dbs-espresso-40);">Für Marken</p>
          <h3 style="margin: 0 0 14px; font-family: var(--dbs-font-serif); font-weight: 300; font-size: 34px; line-height: 1.1;">PR &amp; Media Kit</h3>
          <p style="margin: 0 0 20px; font-size: 16px; line-height: 1.7; color: var(--dbs-espresso-light); max-width: 40ch;">Formate, Arbeitsweise, Kennzeichnung und Zahlen sowie der Kontakt zu mir, falls Du Dich für eine Zusammenarbeit interessierst.<br></p>
          <span style="font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;">Zum Media Kit</span>
        </a>
      </div>
    </section>
  </main>
  </sc-if>

  <sc-if value="{{ atUeber }}" hint-placeholder-val="{{ false }}">
  <main style="max-width: 1180px; margin: 0 auto; padding: 88px 40px 104px;">
    <div class="dbs-about-grid" style="display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); gap: 52px; align-items: start;">
      <div style="position: sticky; top: 148px;">
        <div style="position: relative; aspect-ratio: 2 / 3;">
          <span style="position: absolute; left: 5%; right: 13.3%; top: 19%; bottom: 13%; background: rgba(138,128,120,0.13);"></span>
          <span style="position: absolute; left: calc(5% + 18px); right: calc(13.3% + 18px); top: calc(19% + 18px); bottom: calc(13% + 18px); border: 1px solid rgba(255,255,255,0.6); pointer-events: none;"></span>
          <img src="assets/flo-portrait-cutout.png" alt="Flo" style="position: absolute; left: 0; top: 0; width: 100%; height: 87%; object-fit: contain; object-position: 50% 100%;">
          <span style="position: absolute; left: calc(5% + 18px); right: calc(13.3% + 18px); bottom: calc(13% + 18px); height: 0; border-top: 1px solid rgba(255,255,255,0.75); pointer-events: none;"></span>
          <span style="position: absolute; right: calc(13.3% + 18px); top: calc(19% + 18px); bottom: calc(13% + 18px); width: 0; border-right: 1px solid rgba(255,255,255,0.75); pointer-events: none;"></span>
        </div>
        <p style="margin: 16px 0 0; font-size: 12px; letter-spacing: 0.06em; color: var(--dbs-espresso-40);">Flo, alias She-Lynx</p>
      </div>
      <div>
        <p style="margin: 0 0 24px; font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dbs-espresso-40);">Über mich</p>
        <h1 style="margin: 0 0 30px; font-family: var(--dbs-font-serif); font-weight: 300; font-size: 56px; line-height: 1.05;">Blass, aber nicht farblos.</h1>
        <p style="margin: 0 0 24px; font-family: var(--dbs-font-serif); font-style: italic; font-weight: 300; font-size: 25px; line-height: 1.45; color: var(--dbs-espresso-72); max-width: 34ch;">Hybridnerd, Traum-und-Tangotänzerin, Klugscheißer. Katzenkuschler, Blasshaut, Gedankenmacher. Eigen. Wandelbar. Buch- und Herbstliebhaberin.</p>
        <div style="max-width: 66ch; display: flex; flex-direction: column; gap: 20px; font-size: 17px; line-height: 1.78; color: var(--dbs-espresso-light);">
          <p style="margin: 0;">Ich schreibe über Beauty, seit meiner Studienzeit und meiner eigenen persönlichen Makeup- und Skincarereise. Als es damals in Deutschland noch keine hellen Foundations gab, habe ich mich in England und Frankreich umgesehen und meine Erfahrungen mit anderen geteilt.</p>
          <p style="margin: 0;">Meine Haut ist hell, empfindlich und neigt zu perioraler Dermatitis. Meine Locken habe ich erst vor kurzem entdeckt und nehme Euch natürlich gern mit auf die Reise! Und Parfum war für mich schon immer das letzte "Kleidungsstück", das ich täglich passend zu Stimmung und Styling anlege.</p>
          <p style="margin: 0;">Ich liebe die Interaktion mit meinen Leserinnen/Lesern und freue mich über die gegenseitige Bereicherung! Beruflich bin ich in einem ganz anderen Bereich selbstständig tätig und bin dankbar über den Ausgleich mit den "Beauty"Themen, der oft auch gar nicht so oberflächlich ist, wie man denken mag.</p>
        </div>
        <div style="margin-top: 48px; border-top: 1px solid var(--dbs-espresso-12);">
          <div style="display: grid; grid-template-columns: 180px 1fr; gap: 32px; padding: 22px 20px; border-bottom: 1px solid var(--dbs-espresso-12); transition: background 450ms var(--ease-soft, ease);" style-hover="background: var(--dbs-linen);">
            <p style="margin: 0; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dbs-espresso-40);">FAMILIE</p>
            <p style="margin: 0; font-size: 16px; line-height: 1.6;">Mutter von zwei Kindern</p>
          </div>
          <div style="display: grid; grid-template-columns: 180px 1fr; gap: 32px; padding: 22px 20px; border-bottom: 1px solid var(--dbs-espresso-12); transition: background 450ms var(--ease-soft, ease);" style-hover="background: var(--dbs-linen);">
            <p style="margin: 0; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dbs-espresso-40);">Neu für mich</p>
            <p style="margin: 0; font-size: 16px; line-height: 1.6;">Locken, älter werden, mich wiederfinden ´</p>
          </div>
          <div style="display: grid; grid-template-columns: 180px 1fr; gap: 32px; padding: 22px 20px; border-bottom: 1px solid var(--dbs-espresso-12); transition: background 450ms var(--ease-soft, ease);" style-hover="background: var(--dbs-linen);">
            <p style="margin: 0; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dbs-espresso-40);">ZUFÄLLIGES</p>
            <p style="margin: 0; font-size: 16px; line-height: 1.6;">Ich mag den Geruch des ersten Herbsttages im Jahr</p>
          </div>
        </div>
      </div>
    </div>
  </main>
  </sc-if>

  <sc-if value="{{ atPresse }}" hint-placeholder-val="{{ false }}">
  <main>
    <section style="max-width: 1180px; margin: 0 auto; padding: 88px 40px 72px;">
      <p style="margin: 0 0 24px; font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dbs-espresso-40);">PR &amp; Media Kit</p>
      <h1 style="margin: 0 0 28px; font-family: var(--dbs-font-serif); font-weight: 300; font-size: 60px; line-height: 1.04; max-width: 22ch;">Zusammenarbeit, die man lesen kann.</h1>
      <p style="margin: 0; font-family: var(--dbs-font-serif); font-style: italic; font-weight: 300; font-size: 25px; line-height: 1.45; color: var(--dbs-espresso-72); max-width: 40ch;">Ich schreibe über Produkte, die ich selbst benutze — ausführlich, gekennzeichnet und mit einem Urteil, das mir gehört.</p>
    </section>
    <section style="background: var(--dbs-porcelain); border-top: 1px solid var(--dbs-espresso-12); border-bottom: 1px solid var(--dbs-espresso-12);">
      <div style="max-width: 1180px; margin: 0 auto; padding: 72px 40px 80px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 72px;">
        <div>
          <h2 style="margin: 0 0 26px; font-family: var(--dbs-font-serif); font-weight: 400; font-size: 32px; line-height: 1.1;">Formate</h2>
          <div style="border-top: 1px solid var(--dbs-espresso-12);">
            <div style="padding: 20px 18px; border-bottom: 1px solid var(--dbs-espresso-12); transition: background 450ms var(--ease-soft, ease);" style-hover="background: rgba(255,255,255,0.72);">
              <h3 style="margin: 0 0 6px; font-size: 15px; font-weight: 500;">Blogartikel</h3>
              <p style="margin: 0; font-size: 14px; line-height: 1.65; color: var(--dbs-espresso-55);">Ausführlich, oft mehrteilig, mit eigenen Fotos. Bleibt dauerhaft online und wird über Jahre gefunden.</p>
            </div>
            <div style="padding: 20px 18px; border-bottom: 1px solid var(--dbs-espresso-12); transition: background 450ms var(--ease-soft, ease);" style-hover="background: rgba(255,255,255,0.72);">
              <h3 style="margin: 0 0 6px; font-size: 15px; font-weight: 500;">Instagram Carousel</h3>
              <p style="margin: 0; font-size: 14px; line-height: 1.65; color: var(--dbs-espresso-55);">Sieben Slides, redaktionell gesetzt: Hook, Vergleich, Urteil, Produkte.</p>
            </div>
            <div style="padding: 20px 18px; border-bottom: 1px solid var(--dbs-espresso-12); transition: background 450ms var(--ease-soft, ease);" style-hover="background: rgba(255,255,255,0.72);">
              <h3 style="margin: 0 0 6px; font-size: 15px; font-weight: 500;">Reel &amp; Story-Set</h3>
              <p style="margin: 0; font-size: 14px; line-height: 1.65; color: var(--dbs-espresso-55);">Anwendung in Bewegung, ruhig geschnitten, mit Untertiteln.</p>
            </div>
            <div style="padding: 20px 18px; border-bottom: 1px solid var(--dbs-espresso-12); transition: background 450ms var(--ease-soft, ease);" style-hover="background: rgba(255,255,255,0.72);">
              <h3 style="margin: 0 0 6px; font-size: 15px; font-weight: 500;">Fotografie zur Nachnutzung</h3>
              <p style="margin: 0; font-size: 14px; line-height: 1.65; color: var(--dbs-espresso-55);">Warm, helltonig, unaufgeregt. Nutzungsrechte nach Absprache.</p>
            </div>
          </div>
        </div>
        <div>
          <h2 style="margin: 0 0 26px; font-family: var(--dbs-font-serif); font-weight: 400; font-size: 32px; line-height: 1.1;">Wie ich arbeite</h2>
          <div style="display: flex; flex-direction: column; gap: 18px; font-size: 16px; line-height: 1.75; color: var(--dbs-espresso-light);">
            <p style="margin: 0;">Werbung und PR-Samples kennzeichne ich sichtbar am Anfang des Textes. Meine Eindrücke bleiben meine — vorgegebene Textbausteine übernehme ich nicht.</p>
            <p style="margin: 0;">Ich teste, bevor ich schreibe. Bei Pflege heißt das mehrere Wochen, bei Düften mindestens eine Saison. Deshalb dauert es bei mir länger, und deshalb lohnt es sich.</p>
            <p style="margin: 0;">Ein Nein gehört dazu. Wenn ein Produkt auf meiner Haut nicht funktioniert, sage ich das — oder wir lassen den Beitrag.</p>
          </div>
          <div style="margin-top: 34px; padding: 26px 28px; background: var(--dbs-linen); border-left: 1.5px solid var(--dbs-taupe);">
            <p style="margin: 0 0 8px; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dbs-espresso-40);">Reichweite</p>
            <p style="margin: 0; font-size: 15px; line-height: 1.7; color: var(--dbs-espresso-light);">Aktuelle Zahlen aus Instagram Insights und der Blog-Statistik schicke ich Dir gern direkt zu — immer aus den letzten 30 Tagen, ohne Rundungen nach oben.</p>
          </div>
        </div>
      </div>
    </section>
    <section style="max-width: 1180px; margin: 0 auto; padding: 80px 40px 104px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 72px; align-items: center;">
      <div>
        <h2 style="margin: 0 0 18px; font-family: var(--dbs-font-serif); font-weight: 300; font-size: 40px; line-height: 1.08;">Schreib mir einfach.</h2>
        <p style="margin: 0 0 28px; font-size: 17px; line-height: 1.75; color: var(--dbs-espresso-light); max-width: 42ch;">Kein Formular, kein Ticketsystem. Eine Mail mit Produkt, Zeitrahmen und Deiner Idee reicht — ich antworte innerhalb weniger Tage.</p>
        <a href="mailto:info@der-blasse-schimmer.de" style="display: inline-block; padding: 15px 28px; border-radius: 999px; background: var(--dbs-espresso); color: var(--dbs-alabaster); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; transition: background 380ms var(--ease-soft, ease);" style-hover="background: var(--dbs-espresso-light); color: var(--dbs-alabaster);">info@der-blasse-schimmer.de</a>
      </div>
      <div style="position: relative; aspect-ratio: 3 / 2; background: var(--dbs-porcelain); overflow: hidden;">
        <img src="https://www.der-blasse-schimmer.de/wp-content/uploads/2021/09/Foreo-Bear-Der-Blasse-Schimmer-Microcurrent0005.jpg" alt="Arbeitsplatz">
        <span style="position: absolute; inset: 18px; border: 1.5px solid rgba(255,255,255,0.4); pointer-events: none;"></span>
      </div>
    </section>
  </main>
  </sc-if>

  <sc-if value="{{ atNotiz }}" hint-placeholder-val="{{ false }}">
  <main style="max-width: 1180px; margin: 0 auto; padding: 56px 40px 104px;">
    <button onClick="{{ goStart }}" style="margin-bottom: 44px; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dbs-espresso-40); transition: color 320ms var(--ease-soft, ease);" style-hover="color: var(--dbs-espresso);">← Zurück</button>
    <div style="max-width: 760px; margin: 0 auto;">
      <p style="margin: 0 0 20px; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dbs-scent);">Parfum</p>
      <h1 style="margin: 0 0 22px; font-family: var(--dbs-font-serif); font-weight: 300; font-size: 52px; line-height: 1.06; text-wrap: pretty;">Der Frühling ruft — Frühlingsdüfte 2019</h1>
      <p style="margin: 0 0 34px; font-size: 12px; letter-spacing: 0.06em; color: var(--dbs-espresso-40);">She-Lynx · Fünf Düfte · Lesezeit 7 Minuten</p>
      <div style="padding: 16px 22px; margin-bottom: 40px; background: var(--dbs-linen); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dbs-espresso-light); line-height: 1.7;">Werbung | Eine Zusammenarbeit mit Douglas — eigene Produkte und PR-Samples. Meine Eindrücke sind authentisch und ehrlich.</div>
    </div>
    <div style="position: relative; aspect-ratio: 16 / 9; background: var(--dbs-porcelain); overflow: hidden; margin-bottom: 56px;">
      <img src="https://www.der-blasse-schimmer.de/wp-content/uploads/2019/05/Fru%CC%88hlingsdu%CC%88fte.jpg" alt="Frühlingsdüfte 2019">
      <span style="position: absolute; inset: 24px; border: 1.5px solid rgba(255,255,255,0.4); pointer-events: none;"></span>
    </div>
    <div style="display: flex; flex-wrap: wrap; gap: 72px; align-items: flex-start;">
      <nav style="position: sticky; top: 148px; flex: 0 1 240px; max-width: 260px;">
        <p style="margin: 0 0 16px; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dbs-espresso-40);">Inhalt</p>
        <div style="display: flex; flex-direction: column;">
          <p style="margin: 18px 0 6px; padding-left: 14px; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dbs-espresso-40);">Frische Brise</p>
          <a href="#duft-sunshine" style="padding: 9px 14px; font-size: 14px; line-height: 1.45; border-left: 1px solid var(--dbs-espresso-12); transition: background 400ms var(--ease-soft, ease);" style-hover="background: var(--dbs-linen);">Marc Jacobs — Daisy Eau So Fresh Sunshine</a>
          <a href="#duft-solarbloom" style="padding: 9px 14px; font-size: 14px; line-height: 1.45; border-left: 1px solid var(--dbs-espresso-12); transition: background 400ms var(--ease-soft, ease);" style-hover="background: var(--dbs-linen);">Clean Reserve — Solar Bloom</a>
          <a href="#duft-orangeblossom" style="padding: 9px 14px; font-size: 14px; line-height: 1.45; border-left: 1px solid var(--dbs-espresso-12); transition: background 400ms var(--ease-soft, ease);" style-hover="background: var(--dbs-linen);">Jo Malone — Orange Blossom</a>
          <p style="margin: 18px 0 6px; padding-left: 14px; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dbs-espresso-40);">Alte Liebe</p>
          <a href="#duft-apresondee" style="padding: 9px 14px; font-size: 14px; line-height: 1.45; border-left: 1px solid var(--dbs-espresso-12); transition: background 400ms var(--ease-soft, ease);" style-hover="background: var(--dbs-linen);">Guerlain — Après l’Ondée</a>
          <a href="#duft-daisy" style="padding: 9px 14px; font-size: 14px; line-height: 1.45; border-left: 1px solid var(--dbs-espresso-12); transition: background 400ms var(--ease-soft, ease);" style-hover="background: var(--dbs-linen);">Marc Jacobs — Daisy EdT</a>
          <p style="margin: 18px 0 6px; padding-left: 14px; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dbs-espresso-40);">Zum Schluss</p>
          <a href="#kap-3" style="padding: 9px 14px; font-size: 14px; line-height: 1.45; border-left: 1px solid var(--dbs-espresso-12); transition: background 400ms var(--ease-soft, ease);" style-hover="background: var(--dbs-linen);">Mein Frühling</a>
        </div>
      </nav>
      <article style="flex: 1 1 520px; max-width: 720px; font-size: 18px; line-height: 1.8; color: var(--dbs-espresso-light);">
        <p style="margin: 0 0 26px; font-family: var(--dbs-font-serif); font-style: italic; font-weight: 300; font-size: 26px; line-height: 1.45; color: var(--dbs-espresso);">Wenn der Frühling ans Fenster klopft, ist mir nach frischeren Farben und Düften, die mit einem Zwinkern und strahlenden Lächeln Raum und Haut erobern. Dieses Frühjahr habe ich einerseits Platz für Neues geschaffen in meinem Duftschrank und andererseits auch alte Favoriten aktiviert!</p>
        <p style="margin: 0 0 22px;">Nach einigem Stöbern in den <a href="https://www.douglas.de/D%C3%BCfte/index_0901.html" target="_blank" rel="noreferrer" style="border-bottom: 1px solid var(--dbs-espresso-25);">Duft-Neuheiten im Douglas Online Shop</a> habe ich mir gezielt interessante Kandidaten heraus gesucht, die ich mir unbedingt erst live vor dem Kauf anschnuppern wollte! Darunter befanden sich zunächst u.a. auch</p>
        <ul style="margin: 0 0 22px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px;">
          <li>Issey Miyake L’Eau d’Issey Shade of Sunrise</li>
          <li>Narciso Rodriguez Pure Musc</li>
          <li>Jo Malone Lupin &amp; Patchouli</li>
          <li>Jo Malone Cade &amp; Cedarwood</li>
          <li>und natürlich die neuen Frühlingsdüfte von Jo Malone, die sich an Blüten orientieren!</li>
        </ul>
        <p style="margin: 0 0 22px;">Leider habe ich vor Ort nicht alle gefunden, aber bei Douglas Online gibt es auch die limitierten Jo Malone Düfte der vorangegangenen Kollektion teilweise noch! Es lohnt sich also unbedingt, auch dort vorbei zu schauen, wenn Ihr wisst, was Ihr sucht!</p>
        <p style="margin: 0 0 22px;">Neugierig wie mein Frühling duftet? Dann lest weiter!</p>
        <h2 id="kap-1" style="scroll-margin-top: 184px; margin: 56px 0 20px; font-family: var(--dbs-font-serif); font-weight: 400; font-size: 32px; line-height: 1.15; color: var(--dbs-espresso);">Frische Brise</h2>
        <h3 id="duft-sunshine" style="scroll-margin-top: 184px; margin: 40px 0 16px; font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dbs-espresso);">Marc Jacobs Daisy Eau So Fresh Sunshine</h3>
        <p style="margin: 0 0 22px;">Ein freundliches Zwinkern in unaufdringlicher Frucht. Ein Duft, der auch für Frucht-Duft-Skeptiker wie mich ein bisschen Naivität und Unkompliziertheit in den Frühling bringt. Genau, wonach mir der Sinn stand. Die <strong>Birne</strong> gibt <strong>Mimose</strong> und <strong>Heliotrop</strong> eine schön herbe Note. Während ich schweres Marzipan als Grundlage befürchtet hatte, hält sich Heliotrop erstaunlich geborgen zurück. Eigentlich hatte ich ja sogar sehr gezielt nach Mimose gesucht, um den Duft meiner Tagespflege im Parfum einen Hauch zu wiederholen … Eau So Fresh Sunshine ähnelt dieser leider gar nicht, hat mich aber dennoch eingenommen!</p>
        <figure style="margin: 38px 0;">
          <div style="aspect-ratio: 3 / 2; background: var(--dbs-porcelain); overflow: hidden;">
            <img src="https://www.der-blasse-schimmer.de/wp-content/uploads/2019/05/Fru%CC%88hlingsdu%CC%88fte-2019-Marc-Jacobs-Eau-so-Fresh-Sunshine.jpeg" alt="Marc Jacobs Daisy Eau So Fresh Sunshine">
          </div>
          <figcaption style="margin-top: 12px; font-size: 13px; letter-spacing: 0.04em; color: var(--dbs-espresso-40);">Marc Jacobs — Daisy Eau So Fresh Sunshine</figcaption>
        </figure>
        <p style="margin: 0 0 22px;">Für mich ein Duft für einen unbeschwerten Frühlingstag, der Wärme bringen kann, aber auch an einem warmen Sommertag nicht zu schwül und schwer wirkt. Nicht zu mädchenhaft, nicht recht erwachsen. Keine Diva. Ein wenig gemütlich und sehr wohlwollend. Ich mag <strong>Birne</strong> sehr in Duftkompositionen. Sie hat eine interessante Art Süße und ist häufig etwas scheuer als andere Früchte. Insgesamt ein körpernaher Duft ohne Kapriolen aber einer gutherzigen Freundlichkeit, die mir für diesen Frühling gut gefällt. Auch ein wenig vom ursprünglichen Daisy Charakter ist wahrzunehmen.</p>
        <p style="margin: 0 0 22px;">Euch war schon lange einmal nach Frucht? Dann ist das Eau So Fresh Sunshine unbedingt einen Blick wert. Lasst Euch aber nicht von der etwas verwirrenden Namensgebung und der Ähnlichkeit der Flakons verwirren… Es gibt Sunshine… es gibt Eau Fresh und einige gelbe Blumendeckel bei Marc Jacobs… aber nur eines davon ist das Eau So Fresh Sunshine mit Birne, Mimose und Heliotrop.</p>
        <h3 id="duft-solarbloom" style="scroll-margin-top: 184px; margin: 40px 0 16px; font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dbs-espresso);">Clean Reserve Solar Bloom (PR-Sample)</h3>
        <p style="margin: 0 0 22px;">Etwas ganz Besonderes und Markantes bringt Clean Reserve Solar Bloom in den Frühling 2019. Der Auftakt ist durch die Holzkohle fast etwas bitter-herb mit leichter Zitrusnote, die auf Dauer an Kanten verliert und zu einem Gesamterleben führt, das trocken aber sanft auf der Haut zu liegen scheint. Kokoswasser schmiegt sich weich auf die Kohle und beide gemeinsam werden zu einem Duft, der eine echte Persönlichkeit ist, ohne aufdringlich zu sein.</p>
        <figure style="margin: 38px 0;">
          <div style="aspect-ratio: 3 / 2; background: var(--dbs-porcelain); overflow: hidden;">
            <img src="https://www.der-blasse-schimmer.de/wp-content/uploads/2019/05/Fru%CC%88hlingsdu%CC%88fte-2019-Clean-Reserve-Solar-Blossom.jpeg" alt="Clean Reserve Solar Bloom">
          </div>
          <figcaption style="margin-top: 12px; font-size: 13px; letter-spacing: 0.04em; color: var(--dbs-espresso-40);">Clean Reserve — Solar Bloom</figcaption>
        </figure>
        <p style="margin: 0 0 22px;">Die Blüte von Orangen scheint sich auf beeindruckend erwachsene und schnörkellose Art zu entfalten, dabei dennoch im Gesamtbild gerade durch eine fast spröde Holzbasis (Holzkohle) leuchtend wie Licht durch einen staubigen Morgen. Während Kokos sonst schnell zu einem Fruchtcocktail beiträgt, der seinen Zenit überschritten hat, findet sich hier tatsächlich eine luftig-wässrige Variante, die nur einen Hauch Geschmeidigkeit über den markanten Protagonisten beiträgt.</p>
        <p style="margin: 0 0 22px;">Ganz etwas Besonderes für Individualisten!</p>
        <h3 id="duft-orangeblossom" style="scroll-margin-top: 184px; margin: 40px 0 16px; font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dbs-espresso);">Jo Malone Orange Blossom</h3>
        <p style="margin: 0 0 22px;">Eigentlich wollte ich mir ja Jo Malone Lupin &amp; Patchouli und Jo Malone Cade &amp; Cedarwood aus der letzten Kollektion von Jo Malone ansehen, die jedoch im Douglas Mannheim nicht mehr vor Ort waren. Dafür kam ich aber wie gerufen für den Verkaufsstart der neuen Jo Malone Frühlingsdüfte! Silk Blossom, Frangipani Flower, Star Magnolia und Orange Blossom. Die letzt genannte Nuance ist eigentlich bereits im Standardsortiment von Jo Malone vertreten und für die Spring Collection 2019 nur in ein schöneres Kleid um„flakoniert“ worden. Aber es war die Nuance, die mich am meisten gefesselt hat!</p>
        <figure style="margin: 38px 0;">
          <div style="aspect-ratio: 3 / 2; background: var(--dbs-porcelain); overflow: hidden;">
            <img src="https://www.der-blasse-schimmer.de/wp-content/uploads/2019/05/Fru%CC%88hlingsdu%CC%88fte-2019-Jo-Malone-orange-Blossom.jpeg" alt="Jo Malone Orange Blossom">
          </div>
          <figcaption style="margin-top: 12px; font-size: 13px; letter-spacing: 0.04em; color: var(--dbs-espresso-40);">Jo Malone — Orange Blossom</figcaption>
        </figure>
        <p style="margin: 0 0 22px;">Ein Duft wie purer Optimismus! Herrliche gute Laune! Ein Duft, den auch jedes Kind mögen wird! Und das war mir wichtig; ein Duft, den auch meine Kleine riechen und strahlen würde! Genau, was ich gesucht habe und so klar und intensiv! Den komplexen Aufbau der Duftnoten bemerkt man gar nicht – und das auf eine gute Art! Alles fällt genau an seinen Platz und räumt Klementinenblüte und Orange das Spotlight ein ohne in sich zu konkurrieren. Dabei sind eigentlich u.a. noch Zitronengras, Wasserlilie, Holz der Schwertlilie und Eichenmoos enthalten, die ich jedoch nicht ausmachen kann.</p>
        <p style="margin: 0 0 22px;">Ich habe mich für einen kleinen „normalen“ Flakon aus der Standardserie entschieden, aber auch die Frühlingsedition ist in ihrem farbigen Gradienten wunderschön… Gute Laune in einem Flakon… ich bin gut gestimmt, wenn ich nur an den Duft denke!</p>
        <h2 id="kap-2" style="scroll-margin-top: 184px; margin: 56px 0 20px; font-family: var(--dbs-font-serif); font-weight: 400; font-size: 32px; line-height: 1.15; color: var(--dbs-espresso);">Alte Liebe</h2>
        <h3 id="duft-apresondee" style="scroll-margin-top: 184px; margin: 40px 0 16px; font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dbs-espresso);">Guerlain Après l’Ondée</h3>
        <p style="margin: 0 0 22px;">Dieser Duft ist etwas ganz besonderes für mich und war dabei gar keine Liebe auf den ersten Blick gewesen. Eines der ältesten Parfums, die es heutzutage noch zu erstehen gibt und seit 1906 erhältlich… <em>„Nach dem Regenschauer“</em> heißt es übersetzt und das drückt es gut aus… Ein Meer aus nassen floral-kräuterigen Eindrücken, hell aber intensiv vor allem durch die enthaltene Anisnote, die mich immer wieder an feuchtes Eisen erinnert… als ginge man an einer alten Mauer entlang, die von Eisenstäben besetzt ist. Dahinter eine verregnete Wiese. Ein wenig melancholisch. Und irgendwie doch letztlich sacht abgepudert.</p>
        <figure style="margin: 38px 0;">
          <div style="aspect-ratio: 3 / 2; background: var(--dbs-porcelain); overflow: hidden;">
            <img src="https://www.der-blasse-schimmer.de/wp-content/uploads/2019/05/Fru%CC%88hlingsdu%CC%88fte-2019-Guerlain-Apres-LOndee.jpeg" alt="Guerlain Après l’Ondée">
          </div>
          <figcaption style="margin-top: 12px; font-size: 13px; letter-spacing: 0.04em; color: var(--dbs-espresso-40);">Guerlain — Après l’Ondée</figcaption>
        </figure>
        <p style="margin: 0 0 22px;">Voller Widersprüche, zärtlich aber distanziert. Ätherisch und doch sehr präsent. Die Kombination ist so vielfältig wie eine stille Persönlichkeit, wie ein „stilles Wasser“. Après l’Ondée wirkt kühl und ist doch freundlich, wenn man sich die Zeit nimmt, „sie“ kennen zu lernen. Es gefällt mir an „ihr“. Wäre sie der Charakter eines Romans, … ich würde sie mögen. Sie wäre jemand mit Geheimnissen, Sehnsüchten und Zärtlichkeit, die sich aus Erinnerung nährt.</p>
        <h3 id="duft-daisy" style="scroll-margin-top: 184px; margin: 40px 0 16px; font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dbs-espresso);">Marc Jacobs Daisy EdT</h3>
        <p style="margin: 0 0 22px;">Vor kurzem war Muttertag und dieser Duft war einer der schönsten, den meine Mutter mir noch in meiner Studienzeit geschenkt hat. Genau dieser kleine nachfüllbare Flakon war damals ein Geschenk gewesen, das ich heute noch praktisch und schön finde! Ich habe ihn häufig in der Handtasche dabei und Marc Jacobs Daisy ist einer jener Düfte, die zu vielen Gelegenheiten und Lebensaltern passen. Jung, aber nicht kindisch. Modern, aber nicht hart. Unbekümmert, aber nicht einfältig.</p>
        <figure style="margin: 38px 0;">
          <div style="aspect-ratio: 3 / 2; background: var(--dbs-porcelain); overflow: hidden;">
            <img src="https://www.der-blasse-schimmer.de/wp-content/uploads/2019/05/Fru%CC%88hlingsdu%CC%88fte-2019-Marc-Jacobs-Daisy-1170x730.jpeg" alt="Marc Jacobs Daisy">
          </div>
          <figcaption style="margin-top: 12px; font-size: 13px; letter-spacing: 0.04em; color: var(--dbs-espresso-40);">Marc Jacobs — Daisy Eau de Toilette</figcaption>
        </figure>
        <p style="margin: 0 0 22px;">Er dockt ein wenig an das unbekümmerte, jugendlich Weibliche an, ohne süß oder typisch floral zu sein. Er ist spritzig und hell, besitzt aber eine unaufdringliche Tiefe und etwas, das ihn unverkennbar macht in seiner Mischung aus wilden Erdbeeren, Blüten, hellen Hölzern und Moschus. Ich liebe ihn und er darf für mich – nicht nur – im Frühling nicht fehlen!</p>
        <h2 id="kap-3" style="scroll-margin-top: 184px; margin: 56px 0 20px; font-family: var(--dbs-font-serif); font-weight: 400; font-size: 32px; line-height: 1.15; color: var(--dbs-espresso);">Mein Frühling</h2>
        <p style="margin: 0 0 22px;">Mein Frühling dieses Jahr ist auch ein wenig anders als je zuvor, denn letztes Jahr um diese Zeit war der Kleine Schimmer erst wenige Wochen alt und ich habe auf Parfum vollständig verzichtet. Dieses Jahr gilt es nun, sowohl <strong>etwas für mich</strong> zu finden als auch die <strong>Nase meiner Kleinen</strong> auf schöne Art neugierig zu machen, aber eben auch nicht mit penetranten oder zu intensiven Düften zu stören. Natürlich ist da auch Bvlgari Petits et Mamans unbedingt eine Empfehlung, über die ich jedoch schon so oft geschrieben habe. Der Duft befand sich ständig in meinen Favoriten… Wenn er Euch interessiert, lohnt sich übrigens wie bei kaum einem anderen auch der große Flakon von 100 ml, da der preisliche Unterschied sehr klein ausfällt.</p>
        <figure style="margin: 38px 0;">
          <div style="aspect-ratio: 3 / 2; background: var(--dbs-porcelain); overflow: hidden;">
            <img src="https://www.der-blasse-schimmer.de/wp-content/uploads/2019/05/Fru%CC%88hlingsdu%CC%88fte-2019.jpeg" alt="Frühlingsdüfte 2019">
          </div>
          <figcaption style="margin-top: 12px; font-size: 13px; letter-spacing: 0.04em; color: var(--dbs-espresso-40);">Mein Duftfrühling 2019 — neu und alt beieinander</figcaption>
        </figure>
        <p style="margin: 0 0 22px;">Mir war dieses Jahr nach etwas Neuem… Gerade durch die Duftabstinenz 2018 und da ich insgesamt genug Babyprodukte geschnuppert habe, wollte ich gar nicht unbedingt nur im pudrigen Segment bleiben, auch wenn ich Petits et Mamans immer noch sehr liebe. Aber ich wollte es jung und spritzig und irgendwie auch energetisierend!</p>
        <div style="margin: 40px 0; padding: 30px 34px; background: var(--dbs-porcelain); border-top: 1.5px solid var(--dbs-scent);">
          <p style="margin: 0 0 16px; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dbs-espresso-40);">So finde ich neue Düfte</p>
          <p style="margin: 0; font-size: 16px; line-height: 1.7;">Wenn ich neue Düfte suche orientiere ich mich zunächst an Duftnuancen, die ich mag, die ich aber intensiver oder anders arrangiert suche. Danach durchforste ich erst einmal das vorliegende Sortiment, lese Beschreibungen und Rezensionen und bei Möglichkeit verschaffe ich mir einen Eindruck. Besonders hilfreich ist natürlich, wenn jemand mit ähnlichem Geschmack über einen mir fremden Duft berichtet. Meist lassen sich darüber wundervolle Inspirationen holen und ein „Nasenzwilling“ bringt auf gute Ideen! Dann traue ich mich auch hier und da ganz blind zu bestellen. – Wie findet Ihr neue Düfte?</p>
        </div>
        <p style="margin: 0 0 22px;">Habt Ihr eigentlich schon die <a href="https://www.douglas.de/D%C3%BCfte/Nischend%C3%BCfte/Nischend%C3%BCfte-f%C3%BCr-Damen/index_010501.html" target="_blank" rel="noreferrer" style="border-bottom: 1px solid var(--dbs-espresso-25);">Nischendüfte im Douglas Online Shop</a> gesehen? Ich liebe ja Nischendüfte sehr. Aber es ist natürlich eine Hilfe, wenn man sie vorher einmal schnuppern kann! Für die nächsten „Duftschnupperausflüge“ in den gut sortierten Douglas einer Großstadt wären Juliette Has A Gun Sunny Side Up oder Penhaligon’s London Artemisia sicher für den Frühling auch interessant.</p>
        <p style="margin: 0 0 22px;">Aus eigener Liebe kann ich Euch für Frühling und Sommer außerdem Etro Vicolo Fiori sehr ans Herz legen. Und ich… ich suche gerade eigentlich auch etwas ganz bestimmtes: einen Duft, der dem Mimosenduft meiner Tagespflege ähnelt und falls Ihr Hinweise auf einen sehr rein-zarten Mimosenduft habt… gebt gerne Bescheid!</p>
        <p style="margin: 44px 0; padding: 0 0 0 30px; border-left: 1.5px solid var(--dbs-taupe); font-family: var(--dbs-font-serif); font-style: italic; font-weight: 300; font-size: 30px; line-height: 1.3; color: var(--dbs-espresso); text-wrap: pretty;">Mein Frühling ist gefüllt von einer Art Renaissance. Einer Wiedergeburt.</p>
        <p style="margin: 0 0 22px;">Ich beginne wieder zu arbeiten. Mein Alltag sieht jetzt völlig anders aus als vor der Geburt meiner Tochter und auch ganz anders als das erste Jahr mit ihr. Ich fühle mich nicht als die gleiche, aber auch nicht fremd. Es ist eine Zeit vom Wiederentdecken und Neuerfinden. Wie vielleicht jeder Frühling.</p>
        <p style="margin: 0 0 22px; font-family: var(--dbs-font-serif); font-style: italic; font-size: 22px; line-height: 1.5; color: var(--dbs-espresso); text-align: center">Was sind Eure Frühjahrsentdeckungen?<br>Euer Frühling… wonach duftet er?</p>
        
      </article>
    </div>
  </main>
  </sc-if>

  <sc-if value="{{ atUfo }}" hint-placeholder-val="{{ false }}">
  <main style="max-width: 1180px; margin: 0 auto; padding: 56px 40px 104px;">
    <button onClick="{{ goStart }}" style="margin-bottom: 44px; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dbs-espresso-40); transition: color 320ms var(--ease-soft, ease);" style-hover="color: var(--dbs-espresso);">← Zurück</button>
    <div style="max-width: 760px; margin: 0 auto;">
      <p style="margin: 0 0 20px; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dbs-skincare);">Hautpflege</p>
      <h1 style="margin: 0 0 22px; font-family: var(--dbs-font-serif); font-weight: 300; font-size: 52px; line-height: 1.06; text-wrap: pretty;">Eine „Handvoll“ Hautpflege — FOREO UFO</h1>
      <p style="margin: 0 0 34px; font-size: 12px; letter-spacing: 0.06em; color: var(--dbs-espresso-40);">She-Lynx · 10. März 2019 · Lesezeit 9 Minuten</p>
      <div style="padding: 16px 22px; margin-bottom: 40px; background: var(--dbs-linen); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dbs-espresso-light); line-height: 1.7;">Werbung | Eigene Produkte &amp; PR-Samples — die Produkte wurden mir zur Verfügung gestellt. Meine Eindrücke sind authentisch und ehrlich.</div>
    </div>
    <div style="position: relative; aspect-ratio: 16 / 9; background: var(--dbs-porcelain); overflow: hidden; margin-bottom: 56px;">
      <img src="https://www.der-blasse-schimmer.de/wp-content/uploads/2019/02/cover-2.jpg" alt="Eine „Handvoll“ Hautpflege — FOREO UFO">
      <span style="position: absolute; inset: 24px; border: 1.5px solid rgba(255,255,255,0.4); pointer-events: none;"></span>
    </div>
    <div style="display: flex; flex-wrap: wrap; gap: 72px; align-items: flex-start;">
      <nav style="position: sticky; top: 148px; flex: 0 1 240px; max-width: 260px;">
        <p style="margin: 0 0 16px; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dbs-espresso-40);">Inhalt</p>
        <div style="display: flex; flex-direction: column;">
          <p style="margin: 18px 0 6px; padding-left: 14px; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dbs-espresso-40);">Das Gerät</p>
          <a href="#kap-1" style="padding: 9px 14px; font-size: 14px; line-height: 1.45; border-left: 1px solid var(--dbs-espresso-12); transition: background 400ms var(--ease-soft, ease);" style-hover="background: var(--dbs-linen);">Wärme, Kühlung und Licht</a>
          <a href="#ufo-licht" style="padding: 9px 14px; font-size: 14px; line-height: 1.45; border-left: 1px solid var(--dbs-espresso-12); transition: background 400ms var(--ease-soft, ease);" style-hover="background: var(--dbs-linen);">Blaues, rotes und grünes Licht</a>
          <a href="#ufo-warmkalt" style="padding: 9px 14px; font-size: 14px; line-height: 1.45; border-left: 1px solid var(--dbs-espresso-12); transition: background 400ms var(--ease-soft, ease);" style-hover="background: var(--dbs-linen);">Warm &amp; Kalt</a>
          <p style="margin: 18px 0 6px; padding-left: 14px; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dbs-espresso-40);">In der Praxis</p>
          <a href="#kap-2" style="padding: 9px 14px; font-size: 14px; line-height: 1.45; border-left: 1px solid var(--dbs-espresso-12); transition: background 400ms var(--ease-soft, ease);" style-hover="background: var(--dbs-linen);">Die Masken</a>
          <a href="#kap-3" style="padding: 9px 14px; font-size: 14px; line-height: 1.45; border-left: 1px solid var(--dbs-espresso-12); transition: background 400ms var(--ease-soft, ease);" style-hover="background: var(--dbs-linen);">Anwendung</a>
          <p style="margin: 18px 0 6px; padding-left: 14px; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dbs-espresso-40);">Zum Schluss</p>
          <a href="#kap-4" style="padding: 9px 14px; font-size: 14px; line-height: 1.45; border-left: 1px solid var(--dbs-espresso-12); transition: background 400ms var(--ease-soft, ease);" style-hover="background: var(--dbs-linen);">Fazit</a>
        </div>
      </nav>
      <article style="flex: 1 1 520px; max-width: 720px; font-size: 18px; line-height: 1.8; color: var(--dbs-espresso-light);">
        <p style="margin: 0 0 26px; font-family: var(--dbs-font-serif); font-style: italic; font-weight: 300; font-size: 26px; line-height: 1.45; color: var(--dbs-espresso);">Bereits vor Erscheinen des FOREO UFO war ich sehr neugierig auf das nächste kleine Wunderwerk der Technik aus dem Hause FOREO.</p>
        <p style="margin: 0 0 22px;">Bislang habe ich immer mit viel Interesse die Entwicklungen begleitet und besonders in der FOREO ESPADA einen Liebling gefunden, der mir beim Verheilen vereinzelter Unreinheiten sehr geholfen hat.</p>
        <p style="margin: 0 0 22px;">Bei den ersten Meldungen zur FOREO UFO konnte ich mir noch nicht recht vorstellen, was dieser schöne Handschmeichler mit Masken und Hautpflege zu tun haben sollte… also blieb ich gespannt am Ball und habe ihn selbst inzwischen ausgiebig benutzt, um Euch berichten zu können.</p>
        <h2 id="kap-1" style="scroll-margin-top: 184px; margin: 56px 0 20px; font-family: var(--dbs-font-serif); font-weight: 400; font-size: 32px; line-height: 1.15; color: var(--dbs-espresso);">Wärme, Kühlung und Licht</h2>
        <p style="margin: 0 0 22px;">Die FOREO UFO arbeitet – ebenso wie die ESPADA – mit <strong>LED Lichttherapie</strong>, allerdings sogar mit drei verschiedenen Lichtarten: rotem, grünem und blauem Licht, die jeweils unterschiedliche Wirkung auf die Haut, bzw. auf Bakterien und Zellen haben sollen.</p>
        <p style="margin: 0 0 22px;">Insgesamt arbeitet der kleine Hautschmeichler mit WÄRME, KÜHLUNG, T-SONIC sowie UV-freien PHOTOTHERAPIEN mit rotem, grünem und blauem LED Licht, um einen <strong>nahezu professionellen Hautpflegeprozess</strong> für den Heimgebrauch zu schaffen.</p>
        <figure style="margin: 38px 0;">
          <div style="aspect-ratio: 3 / 2; background: var(--dbs-porcelain); overflow: hidden;">
            <img src="https://www.der-blasse-schimmer.de/wp-content/uploads/2019/02/FOREO-UFO0000.jpeg" alt="FOREO UFO">
          </div>
          <figcaption style="margin-top: 12px; font-size: 13px; letter-spacing: 0.04em; color: var(--dbs-espresso-40);">FOREO UFO</figcaption>
        </figure>
        <p style="margin: 0 0 22px;">Die FOREO UFO besteht aus ultrahygienischem Silikon und ist wasserfest, so dass sie auch unter der Dusche problemlos anwendbar ist. Das Silikon ist sehr fein und verhindert so die Bildung von Bakterien auf der Oberfläche. Es ist klein, handlich und kann – vollständig aufgeladen – für bis zu 40 Anwendungen genutzt werden!</p>
        <p style="margin: 0 0 22px;">Die FOREO UFO gibt es auch in einer <strong>MINI Variante</strong>, die etwa 100 Euro günstiger zu erhalten ist als die große Schwester – allerdings ohne Kühlmöglichkeit ausgestattet ist. Ich persönlich empfinde gerade die Fähigkeit, beides einsetzen zu können als großen Gewinn der FOREO UFO. Es gibt die Wahl zwischen drei verschiedenen Farben: einem satten Pink, sanften Mint oder zartem Rosa.</p>
        <h3 id="ufo-licht" style="scroll-margin-top: 184px; margin: 40px 0 16px; font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dbs-espresso);">Blaues, rotes und grünes Licht</h3>
        <p style="margin: 0 0 22px;">BLAUES LICHT fördert die Neubildung von Zellen und reagiert mit Molekülen des Akne-verursachenden Bakterienstammes Propionibacterium Acnes. Besonders für unreine Haut, die ihren Grund darin hat, ist dies natürlich besonders hilfreich.</p>
        <p style="margin: 0 0 22px;">ROTES LICHT regt die Kollagenproduktion an, hemmt Entzündungen, stimuliert die Regeneration der Zellen und erhöht die Durchblutung, was den Teint belebt und die Aufnahme sowie den Transport von Wirkstoffen verstärkt. Rotes Licht soll besonders für Anti-Aging Zwecke bei den Masken der FOREO UFO Verwendung finden.</p>
        <p style="margin: 0 0 22px;">GRÜNES LICHT wirkt beruhigend und heilend. Es hat zudem Auswirkung auf die Produktion von Melanin und kann so Hyperpigmentierung und Altersflecken minimieren. Besonders beim Thema Ebenmäßigkeit soll das grüne Licht die Masken unterstützen.</p>
        <h3 id="ufo-warmkalt" style="scroll-margin-top: 184px; margin: 40px 0 16px; font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dbs-espresso);">Warm &amp; Kalt</h3>
        <p style="margin: 0 0 22px;">Um die Poren zu öffnen, die Durchblutung anzuregen und die Wirkstoffe besser aufnehmen zu können, kann die FOREO UFO auf etwa <strong>50 °C heizen</strong> oder auf etwa <strong>5 °C herabkühlen</strong>, um z.B. Schwellungen zu reduzieren und die Haut zu beruhigen. Dass Wärme und Kühlung der Haut sehr helfen ist ein altes Prinzip, das sich hier sehr modern zu Nutze gemacht wird!</p>
        <h2 id="kap-2" style="scroll-margin-top: 184px; margin: 56px 0 20px; font-family: var(--dbs-font-serif); font-weight: 400; font-size: 32px; line-height: 1.15; color: var(--dbs-espresso);">Die Masken</h2>
        <p style="margin: 0 0 22px;">Die FOREO UFO funktioniert über das Einklemmen der separat erhältlichen kleinen, runden <strong>Tuchmasken</strong> mit dem transparenten Ring, der um den flachen Metallkörper liegt. Die Tuchmasken sind getränkt mit <strong>koreanisch inspirierten Maskenkomplexen</strong> zu unterschiedlichen Zielbereichen. Diese sind allesamt sehr dünnflüssig, wodurch die Anwendung auch bei Wärme sehr angenehm und flüssig verläuft und man auch gut gleich zwei Anwendungen direkt nacheinander absolvieren kann. Im Sachet verbleiben meist noch Reste der Maske, die man gut noch als zusätzliche Hautpflege verwenden kann.</p>
        <p style="margin: 0 0 22px;">Über die <strong>FOREO APP</strong> scannt man den EAN Code der Maske ein, damit das speziell auf diese Maske und das Themengebiet maßgeschneiderte Programm der FOREO UFO angestoßen wird… Je nachdem, welches Ziel und welche Inhaltsstoffe, findet die passende Wärme, Kühlung, phototherapeutische LED und T-SONIC Vibration statt, um die Effektivität zu optimieren.</p>
        <figure style="margin: 38px 0;">
          <div style="aspect-ratio: 3 / 2; background: var(--dbs-porcelain); overflow: hidden;">
            <img src="https://www.der-blasse-schimmer.de/wp-content/uploads/2019/02/Foreo-Ufo-0000-1024x683.jpeg" alt="FOREO UFO mit blauem Licht">
          </div>
          <figcaption style="margin-top: 12px; font-size: 13px; letter-spacing: 0.04em; color: var(--dbs-espresso-40);">Blaues Licht für die MATTE MANIAC Maske gegen Unreinheiten</figcaption>
        </figure>
        <p style="margin: 0 0 22px;">Es gibt bislang <strong>zwei „tägliche“ Masken</strong> – MAKE MY DAY und CALL IT A NIGHT. Diese beiden sind bereits für den Preis von etwa 9,99 Euro für je 7 Masken zu erhalten. <strong>Fünf Spezialmasken</strong> (19,99 € für 6 Masken) sind außerdem auf andere Bereiche angepasst: YOUTH JUNKIE, MATTE MANIC, SHIMMER FREAK, GLOW ADDICT und H2 OVERDOSE.</p>
        <p style="margin: 0 0 22px;">Neben den Masken, die mir freundlicherweise gestellt wurden (YOUTH JUNKIE &amp; MAKE MY DAY) bin ich ganz besonders von MATTE MANIAC (frische, gereinigte Haut, gegen Unreinheiten und Ölglanz) und SHIMMER FREAK (Augenmaske) angetan, die ich mir selbst ebenso wie CALL IT A NIGHT im Zuge von Neugier und freundlicher Bereitstellung entsprechender Problematiken meiner eigenen Haut zugelegt habe.</p>
        <h2 id="kap-3" style="scroll-margin-top: 184px; margin: 56px 0 20px; font-family: var(--dbs-font-serif); font-weight: 400; font-size: 32px; line-height: 1.15; color: var(--dbs-espresso);">Anwendung</h2>
        <p style="margin: 0 0 22px;">Die Installation der <strong>APP auf iPhone oder Android</strong> ist notwendig, um die Masken auf die FOREO UFO zu übertragen. Man erschafft ein Profil und beantwortet Fragen zur eigenen Haut – allerdings bin ich mir nicht sicher, inwieweit dieses wirklich später noch eine Rolle spielt. Auch die Bearbeitung des Profils bezieht sich alleinig auf die Bearbeitung des Namens im Nachhinein, was ich etwas bedauerlich finde.</p>
        <figure style="margin: 38px 0;">
          <div style="aspect-ratio: 3 / 2; background: var(--dbs-porcelain); overflow: hidden;">
            <img src="https://www.der-blasse-schimmer.de/wp-content/uploads/2019/02/FOREO-UFO0003.jpeg" alt="FOREO App">
          </div>
          <figcaption style="margin-top: 12px; font-size: 13px; letter-spacing: 0.04em; color: var(--dbs-espresso-40);">Die Übersicht der FOREO App</figcaption>
        </figure>
        <p style="margin: 0 0 22px;">Die <strong>Verbindung</strong> zwischen FOREO UFO und Handy ist schnell und verlässlich. Beim Verbinden drückt man die kleine Mulde bzw. den Knopf der elektronischen Tuchmaske für 5 Sekunden. Direkt danach hat man Zugang zur <em>UFO Steuerung</em>, aber auch der kreisförmigen Darstellung der bereits „bekannten“ Masken oder dem Scannen einer neuen Variante, um direkt mit der Behandlung zu beginnen.</p>
        <p style="margin: 44px 0; padding: 0 0 0 30px; border-left: 1.5px solid var(--dbs-taupe); font-family: var(--dbs-font-serif); font-style: italic; font-weight: 300; font-size: 30px; line-height: 1.3; color: var(--dbs-espresso); text-wrap: pretty;">Die FOREO UFO lässt sich auch rein manuell starten mit den bereits zuvor geladenen Masken!</p>
        <p style="margin: 0 0 22px;">Gleichgültig ob bekannt oder neu: zum <strong>Starten einer Maske</strong> verlangt die App das Einscannen des EAN Codes auf der Verpackung. Die Maske wird zum Kreis hinzugefügt – falls unbekannt – und startet mit angenehmer <strong>Hintergrundmusik</strong> und <strong>sanfter Stimmanleitung</strong> über die App. Ich empfinde gerade die Musik und die stimmliche Führung durch die Maskenanwendung als sehr angenehm und hilfreich beim Entspannen! Mir gefällt die Begleitung durch die App. Ist dafür aber einmal keine Zeit oder der Griff zum ständigen Handy-Begleiter unpraktisch, lassen sich die Masken auch <strong>rein manuell</strong> über die FOREO UFO aktivieren!</p>
        <figure style="margin: 38px 0;">
          <div style="aspect-ratio: 3 / 2; background: var(--dbs-porcelain); overflow: hidden;">
            <img src="https://www.der-blasse-schimmer.de/wp-content/uploads/2019/02/FOREO-UFO0002.jpeg" alt="FOREO App, FOREO UFO und Masken">
          </div>
          <figcaption style="margin-top: 12px; font-size: 13px; letter-spacing: 0.04em; color: var(--dbs-espresso-40);">FOREO App, FOREO UFO und Masken</figcaption>
        </figure>
        <p style="margin: 0 0 22px;">Zu dem sichtbaren Kreis fügen sich die Masken nach und nach hinzu. Es lohnt sich, sich die Position Eurer Lieblinge in diesem Kreis zu merken, denn durch mehrfaches Drücken nach Anschalten der FOREO UFO ohne die App kann man die passende <strong>Maske auch ohne Handy auswählen</strong>! Ein violettes Licht wandert die bekannten Maskenpositionen auf der FOREO UFO ab, so dass man nur die richtige aktivieren muss.</p>
        <figure style="margin: 38px 0;">
          <div style="aspect-ratio: 3 / 2; background: var(--dbs-porcelain); overflow: hidden;">
            <img src="https://www.der-blasse-schimmer.de/wp-content/uploads/2019/02/Foreo-Ufo-0000-1.jpeg" alt="Eingespannte Maske in der FOREO UFO">
          </div>
          <figcaption style="margin-top: 12px; font-size: 13px; letter-spacing: 0.04em; color: var(--dbs-espresso-40);">Eingespannte Maske in der FOREO UFO</figcaption>
        </figure>
        <p style="margin: 0 0 22px;">Ganz gleich ob manuell oder über die App, das zur Maske passende Programm setzt sich in Gang. Bei den Maskenbeschreibungen auf der FOREO Homepage kann man jeweils ganz unten den genauen Ablauf sehen und eine Idee der verschiedenen Prozesse im Spiel zwischen Temperatur, Vibration und Licht bekommen. Bei Verwendung der App wird man zusätzlich durch eine Stimme durch den Prozess geführt. Am Ende wäscht man die FOREO UFO unter fließendem Wasser ab. Die Masken sind so flüssig, dass man nicht das Gefühl hat, dass Rückstände darüber hinaus zurückbleiben.</p>
        <h2 id="kap-4" style="scroll-margin-top: 184px; margin: 56px 0 20px; font-family: var(--dbs-font-serif); font-weight: 400; font-size: 32px; line-height: 1.15; color: var(--dbs-espresso);">Fazit</h2>
        <p style="margin: 0 0 22px;">Von der Anwendung der FOREO UFO bin ich völlig begeistert. Manchmal bedaure ich sogar, dass die Maskenanwendung nur kurze 90 Sekunden umfasst. Selbst wenn man sie direkt wiederholt: ich hätte manchmal gerne noch länger etwas von ihr. Übrigens auch insbesondere in Kombination mit der entspannenden Musik der App! Oft ist es aber perfekt, da ich nebenbei manchmal noch meine 12 Monate alte Tochter bespaße oder kurz zu beschäftigen versuche. Maskenanwendungen sind in jedem Fall einfacher geworden mit wachem Kind in Begleitung.</p>
        <p style="margin: 0 0 22px;">Die Mischung des Gesamterlebnisses gefällt mir sehr und besonders der <strong>Kühleffekt ist mein persönlicher morgendlicher Freund</strong> an der Augenregion. Daher würde ich auch eher die FOREO UFO als die FOREO UFO Mini empfehlen. Die Technik hinter den Temperaturwechseln fände ich sehr spannend! Von kalt zu wirklich warm auf der Haut in wenigen Sekunden und auch der warme Effekt ist so wohltuend… Die Form der FOREO UFO bei der Verwendung am Auge kommt mir etwas flach vor, im restlichen Gesicht ist die Fläche und ihr Umfang aber perfekt und hat eine angenehme Größe.</p>
        <figure style="margin: 38px 0;">
          <div style="aspect-ratio: 3 / 2; background: var(--dbs-porcelain); overflow: hidden;">
            <img src="https://www.der-blasse-schimmer.de/wp-content/uploads/2019/02/Foreo-Ufo-0001.jpeg" alt="Die FOREO UFO in der Anwendung">
          </div>
          <figcaption style="margin-top: 12px; font-size: 13px; letter-spacing: 0.04em; color: var(--dbs-espresso-40);">Die FOREO UFO in der Anwendung</figcaption>
        </figure>
        <p style="margin: 0 0 22px;">Im <strong>Lieferumfang</strong> der FOREO UFO ist eine MAKE MY DAY Maske enthalten. Es lohnt sich also durchaus, sich noch 1-2 Masken zusätzlich direkt zuzulegen, um sinnvolle Eindrücke, Effekte und Genuss zu genießen. Dabei macht es natürlich Sinn, aktuelle <strong>Aktionen der Online-Shops</strong> im Auge zu behalten! Ich persönlich fände auch ein „gemischtes“ Maskenangebot interessant, um in mehrere Bereiche hinein schnuppern und so die Favoriten besser wählen zu können.</p>
        <p style="margin: 0 0 22px;">Ich habe mir fest vorgenommen, die FOREO UFO fast täglich zu verwenden – und wenn es nur für die Lichttherapie ist, mit der ich gute Erfahrungen gemacht habe. Schön fände ich, wenn es eine Möglichkeit gäbe, die Masken auch ohne die Sachets z.B. im Spender zu erstehen, so dass man sie selbst dosieren und Verpackungsmüll sparen könnte. Die Verwendung des Tuchs habe ich jedoch auch schon mehrfach als sehr positiv wahrgenommen, gelingt es ihm doch auch Hautschüppchen aufzunehmen und die Haut zusätzlich zu reinigen oder zu stimulieren.</p>
        <p style="margin: 0 0 22px;">Gerne berichte ich Euch nach einigen weiteren Wochen auch noch einmal konkret über meine Lieblingsmasken und die Langzeitauswirkungen der Nutzung! Momentan habe ich die FOREO UFO seit etwa 4 Wochen regelmäßig im Einsatz und finde, meine Haut sieht deutlich entspannter und strahlender aus.</p>
        <p style="margin: 0 0 22px;">Die Wirkmechanismen, die die FOREO UFO nutzt, sind so <strong>handlich</strong> umgesetzt! Natürlich könnte man sich warme Tücher auflegen oder einen gekühlten Löffel an die geschwollenen Augen halten, aber Temperaturunterschiede und noch zusätzlich Vibration und lichttherapeutische Wirkweisen direkt in der Hand zu halten… ist unglaublich effizient. Es ist alles da und alles passend optimiert auf die jeweilige Anwendung. Es ist perfekt.</p>
      </article>
    </div>
  </main>
  </sc-if>

  <sc-if value="{{ atBronze }}" hint-placeholder-val="{{ false }}">
  <main style="max-width: 1180px; margin: 0 auto; padding: 56px 40px 104px;">
    <button onClick="{{ goStart }}" style="margin-bottom: 44px; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dbs-espresso-40); transition: color 320ms var(--ease-soft, ease);" style-hover="color: var(--dbs-espresso);">← Zurück</button>
    <div style="max-width: 760px; margin: 0 auto;">
      <p style="margin: 0 0 20px; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dbs-makeup);">Makeup · Nachgeschminkt</p>
      <h1 style="margin: 0 0 22px; font-family: var(--dbs-font-serif); font-weight: 300; font-size: 52px; line-height: 1.06; text-wrap: pretty;">Nachgeschminkt Juni 2018 — „Summer Bronze“</h1>
      <p style="margin: 0 0 34px; font-size: 12px; letter-spacing: 0.06em; color: var(--dbs-espresso-40);">She-Lynx · 4. Juni 2018 · Lesezeit 8 Minuten</p>
      <div style="padding: 16px 22px; margin-bottom: 40px; background: var(--dbs-linen); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dbs-espresso-light); line-height: 1.7;">Werbung | Eigene Produkte &amp; PR-Samples — kosten- und bedingungslos zur Verfügung gestellt. Meine Eindrücke sind aufrichtige und persönliche Meinung.</div>
    </div>
    <div style="position: relative; aspect-ratio: 16 / 9; background: var(--dbs-porcelain); overflow: hidden; margin-bottom: 56px;">
      <img src="https://www.der-blasse-schimmer.de/wp-content/uploads/2018/06/Nachgeschminkt.jpg" alt="Nachgeschminkt Juni 2018 — „Summer Bronze“">
      <span style="position: absolute; inset: 24px; border: 1.5px solid rgba(255,255,255,0.4); pointer-events: none;"></span>
    </div>
    <div style="display: flex; flex-wrap: wrap; gap: 72px; align-items: flex-start;">
      <nav style="position: sticky; top: 148px; flex: 0 1 240px; max-width: 260px;">
        <p style="margin: 0 0 16px; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dbs-espresso-40);">Inhalt</p>
        <div style="display: flex; flex-direction: column;">
          <p style="margin: 18px 0 6px; padding-left: 14px; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dbs-espresso-40);">Der Look</p>
          <a href="#br-teint" style="padding: 9px 14px; font-size: 14px; line-height: 1.45; border-left: 1px solid var(--dbs-espresso-12); transition: background 400ms var(--ease-soft, ease);" style-hover="background: var(--dbs-linen);">Teint &amp; Bronzer</a>
          <a href="#br-augen" style="padding: 9px 14px; font-size: 14px; line-height: 1.45; border-left: 1px solid var(--dbs-espresso-12); transition: background 400ms var(--ease-soft, ease);" style-hover="background: var(--dbs-linen);">Brauen &amp; Augen</a>
          <a href="#br-wimpern" style="padding: 9px 14px; font-size: 14px; line-height: 1.45; border-left: 1px solid var(--dbs-espresso-12); transition: background 400ms var(--ease-soft, ease);" style-hover="background: var(--dbs-linen);">Wimpern</a>
          <a href="#br-lippen" style="padding: 9px 14px; font-size: 14px; line-height: 1.45; border-left: 1px solid var(--dbs-espresso-12); transition: background 400ms var(--ease-soft, ease);" style-hover="background: var(--dbs-linen);">Lippen</a>
          <p style="margin: 18px 0 6px; padding-left: 14px; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dbs-espresso-40);">Zum Schluss</p>
          <a href="#kap-2" style="padding: 9px 14px; font-size: 14px; line-height: 1.45; border-left: 1px solid var(--dbs-espresso-12); transition: background 400ms var(--ease-soft, ease);" style-hover="background: var(--dbs-linen);">Fazit</a>
          <a href="#kap-3" style="padding: 9px 14px; font-size: 14px; line-height: 1.45; border-left: 1px solid var(--dbs-espresso-12); transition: background 400ms var(--ease-soft, ease);" style-hover="background: var(--dbs-linen);">Vorlage Juli 2018</a>
        </div>
      </nav>
      <article style="flex: 1 1 520px; max-width: 720px; font-size: 18px; line-height: 1.8; color: var(--dbs-espresso-light);">
        <p style="margin: 0 0 26px; font-family: var(--dbs-font-serif); font-style: italic; font-weight: 300; font-size: 26px; line-height: 1.45; color: var(--dbs-espresso);">Der Sommer ist tatsächlich sehr wuchtig wieder da! Gute 28 °C oder heftige Sommergewitter wechseln sich ab. Jetzt darf auch #NACHGESCHMINKT sommerlich weitergehen – oder?</p>
        <p style="margin: 0 0 22px;">Ich hatte mich für das Thema <strong>BRONZER</strong> entschieden, da es dazu immer einmal wieder Fragen und Unsicherheiten gibt. Dabei kann man mit minimalem Aufwand sofort weicher und gleichzeitig strahlend wirken, ohne das Gefühl zu haben, aus einem Bräunungsstudio der 80er zu kommen. Ich finde, Bronzer ist die Basis für einen perfekten Sommerlook und trotzdem ist hier für viele eine Hemmschwelle gegeben.</p>
        <p style="margin: 0 0 22px;">Mit dem Simple Summer Bronze Makeup ist es doch eine gute Einleitung für schöne Tage und entspannte, weiche-goldene Gesichtszüge! An die Pinsel, fertig, los!</p>
        <h2 id="kap-1" style="scroll-margin-top: 184px; margin: 56px 0 20px; font-family: var(--dbs-font-serif); font-weight: 400; font-size: 32px; line-height: 1.15; color: var(--dbs-espresso);">Schminkprozess</h2>
        <h3 id="br-teint" style="scroll-margin-top: 184px; margin: 40px 0 16px; font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dbs-espresso);">Teint &amp; Bronzer</h3>
        <p style="margin: 0 0 22px;">Dann mischen wir doch mal den <strong>GLOW MON AMOUR HIGHLIGHTER</strong> von L’ORÉAL PARIS (PR-Sample) – den ich wunderschön finde, ein warmes Gold und eine großartige Ergänzung zum pinkstichigen Flüssighighlighter derselben Marke – mit <strong>LANCÔME TEINT MIRACLE</strong> 005 Foundation. Die Foundation ist eine schöne leichte und zarte Wahl im Vergleich zur ULTRA WEAR, die ich letztes Jahr sehr geliebt habe. Und die 005 ist schön hell! Wow, das sah schon im Auftrag schön aus und nicht so „speckig“ wie ich befürchtet hatte.</p>
        <figure style="margin: 38px 0;">
          <div style="aspect-ratio: 3 / 2; background: var(--dbs-porcelain); overflow: hidden;">
            <img src="https://www.der-blasse-schimmer.de/wp-content/uploads/2018/06/Nachgeschminkt-Juni-2018-_8006.jpeg" alt="Summer Bronze — Teint">
          </div>
          <figcaption style="margin-top: 12px; font-size: 13px; letter-spacing: 0.04em; color: var(--dbs-espresso-40);">Teint mit Glow Mon Amour im Lancôme Teint Miracle</figcaption>
        </figure>
        <p style="margin: 0 0 22px;">Augenringe habe ich mit dem <strong>MAYBELLINE FIT ME CONCEALER in 05</strong> abgedeckt und ihn als Highlighter verwendet. Die Nuance ist wirklich grandios hell! Mein liebster Bronzer von <strong>PHYSICIAN’S FORMULA</strong>, der <strong>MURUMURU BUTTER BRONZER</strong> in LIGHT, hat mir dann E-förmig zur Gesichtsmitte und seitlich an Hals und Schultern, wo die Sonne auf die Haut treffen würde, Wärme und Weichheit geschenkt.</p>
        <p style="margin: 0 0 22px;">Mit dem <strong>MAC MINERALIZE SKINFINISH</strong> in LIGHT habe ich die Nasenspitze, seitlich der Nase die Zone mit vergrößerten Poren und die Mitte der Stirn betupft, um auch mattere Areale zu haben. Der Vorteil dieses Puders ist, dass es nicht zu matt wird und noch sehr lebendig aussieht, gleichzeitig wollte ich den Glanz auf dem Gesicht aber auch ein wenig dirigieren und in gewollte Bahnen lenken für die nächsten Stunden.</p>
        <h3 id="br-augen" style="scroll-margin-top: 184px; margin: 40px 0 16px; font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dbs-espresso);">Brauen &amp; Augen</h3>
        <figure style="margin: 38px 0;">
          <div style="aspect-ratio: 3 / 2; background: var(--dbs-porcelain); overflow: hidden;">
            <img src="https://www.der-blasse-schimmer.de/wp-content/uploads/2018/06/Nachgeschminkt-Juni-2018-_8005.jpeg" alt="Summer Bronze — Augen">
          </div>
          <figcaption style="margin-top: 12px; font-size: 13px; letter-spacing: 0.04em; color: var(--dbs-espresso-40);">Brauen und Lidschatten</figcaption>
        </figure>
        <p style="margin: 0 0 22px;">Zunächst habe ich die Augenbrauen mit der <strong>ANASTASIA BEVERLY HILLS DIP BROW POMADE</strong> in CARAMEL gezogen. Ich mische sie mir meist mit einem Spritzer Öl an. Es lässt die Farbe etwas weicher und stimmiger zu den kupferroten Haaren werden. <strong>MAC PAINT POT</strong> in SOFT OCHRE dient als Basis für das Augenmakeup. Dann habe ich als Übergangsfarbe zunächst <strong>MAC SOFT BROWN</strong> verwendet und als Lidschatten auf dem beweglichen Lid den schönen <strong>L’ORÉAL PARIS Metallic Highlighter der CRUSHED FOIL</strong> (PR-Sample) Serie ROSE QUARTZ. Die Lidfalte wurde dann mit <strong>MAC BROWN DOWN</strong> vertieft.</p>
        <h3 id="br-wimpern" style="scroll-margin-top: 184px; margin: 40px 0 16px; font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dbs-espresso);">Wimpern</h3>
        <figure style="margin: 38px 0;">
          <div style="aspect-ratio: 3 / 2; background: var(--dbs-porcelain); overflow: hidden;">
            <img src="https://www.der-blasse-schimmer.de/wp-content/uploads/2018/06/Nachgeschminkt-Juni-2018-_8004.jpeg" alt="Summer Bronze — Wimpern">
          </div>
          <figcaption style="margin-top: 12px; font-size: 13px; letter-spacing: 0.04em; color: var(--dbs-espresso-40);">Mascara mit Primer</figcaption>
        </figure>
        <p style="margin: 0 0 22px;">Die <strong>L’ORÉAL PARIS EXTATIC MASCARA</strong> (PR-Sample) hat inzwischen auch einen separat erhältlichen Primer! Beide Produkte wurden mir zur Verfügung gestellt und ich fand es spannend, mir die Mascara mit dem <strong>PARADISE EXTATIC PRIMER</strong> (PR-Sample) noch einmal anzusehen. Dieser ist etwas feiner als die typischen Zwei-Phasen-Mascara-Primer und weißelt viel weniger. Die Wimpern werden weder beschwert noch verklumpt, was den Auftrag der Mascara selbst tatsächlich besser macht.</p>
        <p style="margin: 0 0 22px;">Die Trennung in zwei verschiedene Produkte von Primer und Mascara finde ich als Option gut, da man die Produkte unabhängig voneinander aufbrauchen oder auch mit anderen Produkten kombinieren kann. Allerdings mag ich durchaus auch ein 2in1 Produkt wie die X-FIBRE LASHES (auch von L’Oréal Paris), weil man direkt alles beisammen hat, das gut aufeinander abgestimmt ist.</p>
        <figure style="margin: 38px 0;">
          <div style="aspect-ratio: 3 / 2; background: var(--dbs-porcelain); overflow: hidden;">
            <img src="https://www.der-blasse-schimmer.de/wp-content/uploads/2018/06/Nachgeschminkt-Juni-2018-_8008.jpeg" alt="Summer Bronze — Lidinnenseite">
          </div>
          <figcaption style="margin-top: 12px; font-size: 13px; letter-spacing: 0.04em; color: var(--dbs-espresso-40);">Goldakzent auf der Lidinnenseite</figcaption>
        </figure>
        <p style="margin: 0 0 22px;">Auf der Lidinnenseite habe ich mit dem <strong>L’ORÉAL PARIS CRUSHED FOIL METALLIC LIDSCHATTEN 21 GILDED GOLD</strong> noch einen Akzent gesetzt und mich gegen falsche Wimpern entschieden. Ich bin zusehends mit der Länge meiner Wimpern wieder zufrieden. Das Serum greift endlich wieder richtig und ich wollte den Look natürlich und einfach halten.</p>
        <h3 id="br-lippen" style="scroll-margin-top: 184px; margin: 40px 0 16px; font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dbs-espresso);">Lippen</h3>
        <figure style="margin: 38px 0;">
          <div style="aspect-ratio: 3 / 2; background: var(--dbs-porcelain); overflow: hidden;">
            <img src="https://www.der-blasse-schimmer.de/wp-content/uploads/2018/06/Nachgeschminkt-Juni-2018-_8002.jpeg" alt="Summer Bronze — Lippen">
          </div>
          <figcaption style="margin-top: 12px; font-size: 13px; letter-spacing: 0.04em; color: var(--dbs-espresso-40);">Crushed Foil Lippenstift in Brass</figcaption>
        </figure>
        <p style="margin: 0 0 22px;">Der traumhafte Lippenstift, der so geschmeidig die Lippen vergoldet, ist ebenfalls aus der <strong>CRUSHED FOIL</strong> Kollektion von <strong>L’ORÉAL PARIS</strong>. Es handelt sich um <strong>BRASS (6)</strong> (PR-Sample).</p>
        <p style="margin: 0 0 22px;">Auf Blush verzichte ich häufig bei intensiveren Bronzer-Looks, da ich mir schnell damit zu bunt und gestückelt vorkomme. Der sanfte Verlauf der Sonne in Puderform gefällt mir dahingegen meist viel besser.</p>
        <h2 id="kap-2" style="scroll-margin-top: 184px; margin: 56px 0 20px; font-family: var(--dbs-font-serif); font-weight: 400; font-size: 32px; line-height: 1.15; color: var(--dbs-espresso);">Fazit</h2>
        <p style="margin: 0 0 22px;">Ich habe einige Produkte der CRUSHED FOIL Kollektion von L’ORÉAL PARIS (PR-Sample) verwendet. Diese ist online übrigens noch verfügbar! Auch die Highlighter sind ein Traum – wenn die Haut etwas dunkler ist als meine. Daher habe ich einen der Highlighter für den Look zweckentfremdet und als Lidschatten verwendet. Der metallische Charakter ist spannend und ich würde in einem Bronze Look für den täglichen Sommer immer mit glänzenden Lippen spielen! Ob Gloss oder Metallisch ist dabei eine schöne Wahl!</p>
        <figure style="margin: 38px 0;">
          <div style="aspect-ratio: 3 / 2; background: var(--dbs-porcelain); overflow: hidden;">
            <img src="https://www.der-blasse-schimmer.de/wp-content/uploads/2018/06/Nachgeschminkt-Juni-2018-_8007.jpeg" alt="Summer Bronze — fertiger Look">
          </div>
          <figcaption style="margin-top: 12px; font-size: 13px; letter-spacing: 0.04em; color: var(--dbs-espresso-40);">Der fertige Look</figcaption>
        </figure>
        <p style="margin: 0 0 22px;"><strong>Bronzer</strong> habe ich erst in den letzten 1-2 Jahren für mich entdeckt. Häufig waren mir die erhältlichen Nuancen zu orange oder dunkel und ich hatte nicht die Intention, mich „gebräunter“ zu schminken. Ich würde aus heutiger Sicht jedoch sagen, dass Bronzer einen Look sanft belebt, weicher macht und den Fokus auf das Zentrum des Gesichts richtet, ohne dabei so hart zu wirken. Da man nicht so akkurat arbeiten muss wie mit Kontur, ist Bronzer außerdem eigentlich ein guter Einstieg für eine erste „sanfte“ Formung für Makeup Liebhaber mit weniger Erfahrung.</p>
        <figure style="margin: 38px 0;">
          <div style="aspect-ratio: 3 / 2; background: var(--dbs-porcelain); overflow: hidden;">
            <img src="https://www.der-blasse-schimmer.de/wp-content/uploads/2018/06/Nachgeschminkt-Juni-2018-_8003.jpeg" alt="Summer Bronze — Detail">
          </div>
          <figcaption style="margin-top: 12px; font-size: 13px; letter-spacing: 0.04em; color: var(--dbs-espresso-40);">Weiche, goldene Gesichtszüge</figcaption>
        </figure>
        <p style="margin: 0 0 22px;">Mit dem Mischen des L’ORÉAL PARIS GLOW MON AMOUR (PR-Sample) Highlighters mit der Foundation bin ich sehr zufrieden! Das Ergebnis ließ mich sogar Highlight auf den Wangenknochen völlig vergessen und wirkte dabei nicht unangenehm glänzend. Überhaupt hatte das Makeup eine Haltbarkeit, die ich ihm nicht zugetraut hätte. Ich habe den gesamten Tag (allerdings im Haus) mit dem Makeup verbracht und empfand es selbst abends noch als schön auf der Haut. Der Highlighter hat die Foundation also nicht im Geringsten gestört oder die Haltbarkeit negativ beeinflusst.</p>
        <h2 id="kap-3" style="scroll-margin-top: 184px; margin: 56px 0 20px; font-family: var(--dbs-font-serif); font-weight: 400; font-size: 32px; line-height: 1.15; color: var(--dbs-espresso);">Vorlage Juli 2018</h2>
        <p style="margin: 0 0 22px;">Die neue Vorlage habe ich auch bereits ausgewählt für den nächsten Monat! Wir rücken einmal OMBRE BROWS in den Mittelpunkt. Es muss nicht so bunt ausfallen wie in der Vorlage, aber ich freue mich aufs Ausprobieren und wenn Ihr Lust habt, dabei zu sein!</p>
        <p style="margin: 0 0 22px;">Nachschminken könnt Ihr <strong>bis zum 07.07.2018</strong>! Sendet mir die Links zu Euren Artikeln oder – falls Ihr nur Instagram habt – den Link auf Euer Instagram Posting, bitte mitsamt allen verwendeten Produkten in der Beschreibung, denn das ist ja das Spannende an #Nachgeschminkt, und ein Bild mit einer Breite von 750px. Am 09.07.2018 wird es dann die Zusammenfassung aller Looks geben.</p>
      </article>
    </div>
  </main>
  </sc-if>

  <footer style="border-top: 1px solid var(--dbs-espresso-12); background: var(--dbs-alabaster);">
    <div style="max-width: 1180px; margin: 0 auto; padding: 56px 40px 64px; display: flex; align-items: center; justify-content: space-between; gap: 32px 44px; flex-wrap: wrap;">
      <div style="display: flex; align-items: center; gap: 16px;">
        <span style="width: 34px; height: 34px; flex: none; opacity: 0.7;"><img src="assets/logo-mono-2026.png" alt="Der blasse Schimmer" style="object-fit: contain;"></span>
        <p style="margin: 0; font-size: 13px; line-height: 1.7; color: var(--dbs-espresso-40);">Beauty zwischen den Linien · seit 2013</p>
      </div>
      <div style="display: flex; align-items: center; gap: 22px; font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;">
        <a href="https://www.instagram.com/derblasseschimmer" target="_blank" rel="noreferrer" style="transition: opacity 320ms var(--ease-soft, ease);" style-hover="opacity: 0.55;">Instagram</a>
        <a href="Impressum.html" rel="nofollow" style="transition: opacity 320ms var(--ease-soft, ease);" style-hover="opacity: 0.55;">Impressum</a>
        <a href="#datenschutz" rel="nofollow" style="transition: opacity 320ms var(--ease-soft, ease);" style-hover="opacity: 0.55;">Datenschutz</a>
      </div>
    </div>
  </footer>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props="{}">
const WELTEN = [
  {
    key: "makeup", name: "Makeup", dot: "#839486",
    claim: "Shades für sehr helle Haut. Nuancen und den veränderten Hautbedürfnissen ab 40",
    teaser: "Für sehr helle Haut ab 40,\nfrisch, elegant, stimmungsabhängig",
    tags: "NUANCEN - KONSISTENZEN - LOOKS - TECHNIKEN",
    lead: "Helle Foundations, Konsistenzen die bei Mischaut aber auch Haut ab 40 gut funktionieren.",
    voraussetzung: "Helle, neutral bis kühl unterlegte Haut. Rötungen, Schlupflider, ölige und trockene Hautstellen, Poren und Linien",
    findest: "Dior 0.5N,  Haus Labs 040,  MAC NC10, Natasha Denona N1, TirTir 13N, Nyx 03 Fair Ivory",
    nicht: "natürliches Finish, Sommersprossen, softe Kontraste, AMUs, Lippenstift",
    satz: "Nur Farbe auf die Lippen. Und plötzlich bist Du die Hauptperson."
  },
  {
    key: "skincare", name: "Haut", dot: "#B8A99A",
    claim: "Wirkstoff basiert, Anti-Aging, Erfahrung mit Hautproblemen (Urtikaria, Akne, POD)",
    teaser: "Empfindliche Haut, Erfahrungen mit Akne, Allergien und POD. Aktueller Fokus Antiaging",
    tags: "Wirkstoffe · Barriere · Geduld",
    lead: "empfindliche Mischhaut, 47 Jahre\n",
    voraussetzung: "empfindliche Mischhaut, Neigung zu Rötungen, Perioraler Dermatitis (POD), Urtikaria und (früher) Akne",
    findest: "- Feuchtigkeit\n- Anti-Aging\n- Beruhigung",
    nicht: "Koreanische & westliche wirkstoffbasierte Hautpflege, Anti-Aging ",
    satz: "Wirkstoff basiertes Anti-Aging , Western & Korean Skincare"
  },
  {
    key: "scent", name: "Parfum", dot: "#9BABB5",
    claim: "Düfte sind für mich wie Kleidungsstücke. Sie müssen für mich zum Kontext, Makeup und Kleidungswahl passen und ergänzen das Gesamtbild.",
    teaser: "Düfte sind wie Kleidungsstücke und Makeup: immer passend zu Stimmung und Gelegenheit sind sie für mich wie kleine Romane mit eigener Handlung.",
    tags: "PARFÜMERIE - NISCHE - DESIGNER",
    lead: "Düfte sind für mich wie Kleidungsstücke. Und jedes hat seine eigene Dramaturgie.",
    voraussetzung: "Warme Haut, die süße Noten verstärkt und Zitrus schnell aufbraucht. Zwei Sprüher sind bei mir schon eine Ansage.",
    findest: "ESSENTIAL PARFUMS The Musc, MASAKI MATSUSHIMA Shiro, NARCISO RODRIGUEZ Essence (disc.)",
    nicht: "warm sauber, freundlich, intim, hautnah",
    satz: "Intensität, die trotzdem körpernah bleibt."
  },
  {
    key: "curls", name: "Curls", dot: "#A8706A",
    claim: "Erst vor 2 Jahren entdeckt bin ich immer noch auf Lockenreise (hört das je auf). ",
    teaser: "Erst 2025 durch Zufall entdeckt machen wir uns immer noch vertraut miteinander. Tips und Lernweg ",
    tags: "TECHNIKEN - PRODUKTE - ERFAHRUNGEN",
    lead: "Mal kurze und mal lange Haare und den Großteil meines Lebens glatt - bis vor 2 Jahren. Feine, aber viele Haare",
    voraussetzung: "Feine bis mittlere Struktur, 2C bis 3A Locken. Gefärbte Haare. Naturhaar helles Aschblond.",
    findest: "Balea, Isana, Umberto Giannini, Bali Curls, Curlsmith, Bounce Curl Brush, Laifen Fön",
    nicht: "Definierte große Locken, wenig Arbeitsaufwand",
    satz: "Der Cast darf hart sein. Das Ergebnis wird weich."
  }
];

const WASH = {
  makeup: "rgba(131,148,134,0.15)",
  skincare: "rgba(184,169,154,0.22)",
  scent: "rgba(155,171,181,0.18)",
  curls: "rgba(168,112,106,0.12)"
};

class Component extends DCLogic {
  state = { page: "start", hover: null, open: "makeup" };

  reveal(key) { this.setState({ open: key }); }

  boxVals(w, i) {
    return {
      key: w.key,
      name: w.name,
      claim: w.claim,
      teaser: w.teaser,
      tags: w.tags,
      dot: w.dot,
      wash: WASH[w.key],
      num: "0" + (i + 1),
      offset: ["0px", "36px", "14px", "48px"][i % 4],
      reveal: () => this.reveal(w.key),
      href: "#welt-" + w.key
    };
  }

  go(page) {
    this.setState({ page }, () => {
      const root = document.documentElement;
      const prev = root.style.scrollBehavior;
      root.style.scrollBehavior = "auto";
      window.scrollTo(0, 0);
      setTimeout(() => { root.style.scrollBehavior = prev; }, 0);
    });
  }

  renderVals() {
    const hover = this.state.hover;
    return {
      atStart: this.state.page === "start",
      atUeber: this.state.page === "ueber",
      atPresse: this.state.page === "presse",
      atNotiz: this.state.page === "notiz",
      atUfo: this.state.page === "ufo",
      atBronze: this.state.page === "bronze",
      goStart: () => this.go("start"),
      goUeber: () => this.go("ueber"),
      goPresse: () => this.go("presse"),
      goNotiz: () => this.go("notiz"),
      goUfo: () => this.go("ufo"),
      goBronze: () => this.go("bronze"),
      welten: WELTEN.map((w, i) => this.boxVals(w, i)),
      profile: WELTEN.map((w, i) => {
        return {
          name: w.name,
          claim: w.claim,
          dot: w.dot,
          wash: WASH[w.key],
          num: "0" + (i + 1),
          lead: w.lead,
          voraussetzung: w.voraussetzung,
          findest: w.findest,
          nicht: w.nicht,
          hatNicht: !!(w.nicht && w.nicht.trim()),
          bedarf: w.bedarf,
          hatBedarf: !!(w.bedarf && w.bedarf.trim()),
          satz: w.satz,
          openAttr: this.state.open === w.key ? "1" : "0",
          panelRows: this.state.open === w.key ? "1fr" : "0fr",
          panelOpacity: this.state.open === w.key ? 1 : 0,
          bandTransform: this.state.open === w.key ? "scaleY(1)" : "scaleY(0)",
          signTransform: this.state.open === w.key ? "rotate(45deg)" : "rotate(0deg)",
          signOpacity: this.state.open === w.key ? 1 : 0.5,
          leadOpacity: this.state.open === w.key ? 0 : 1,
          ghostOpacity: this.state.open === w.key ? 0.5 : 0,
          ghostTransform: this.state.open === w.key ? "none" : "translateY(10px)",
          toggle: () => this.setState(st => ({ open: st.open === w.key ? null : w.key })),
          anchorId: "welt-" + w.key
        };
      })
    };
  }
}
</script>
</body>
</html>
