<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PZXVHTSH" height="0" width="0"
style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">

<style>
#hf-calc *, #hf-calc *::before, #hf-calc *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#hf-calc {
  --hf-red: #ce1417;
  --hf-red-light: rgba(206,20,23,0.08);
  --hf-red-mid: rgba(206,20,23,0.15);
  --hf-black: #111111;
  --hf-dark: #1e1e1e;
  --hf-gray-dark: #333333;
  --hf-gray: #666666;
  --hf-gray-light: #999999;
  --hf-border: #e0e0e0;
  --hf-bg: #f7f7f7;
  --hf-white: #ffffff;
  --hf-green: #1a7f4b;
  --hf-green-light: rgba(26,127,75,0.08);
  --hf-radius: 8px;
  --hf-radius-sm: 4px;
  font-family: 'Roboto', sans-serif;
  background: var(--hf-white);
  color: var(--hf-black);
  width: 100%;
}

#hf-calc .hf-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 3rem;
}

/* Header */
#hf-calc .hf-header {
  margin-bottom: 2.5rem;
}

#hf-calc .hf-eyebrow {
  display: inline-block;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hf-red) !important;
  margin-bottom: 0.75rem;
}

#hf-calc .hf-title {
  font-size: clamp(28px, 5vw, 40px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: var(--hf-black) !important;
  margin-bottom: 0.75rem;
}

#hf-calc .hf-title span {
  color: var(--hf-red) !important;
}

#hf-calc .hf-subtitle {
  font-size: 17px !important;
  font-weight: 300 !important;
  color: var(--hf-gray) !important;
  line-height: 1.6 !important;
  max-width: 600px;
}

/* Metric pills */
#hf-calc .hf-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 2rem;
}

@media (max-width: 600px) {
  #hf-calc .hf-metrics { grid-template-columns: repeat(2, 1fr); }
}

#hf-calc .hf-metric {
  background: var(--hf-bg);
  border: 1px solid var(--hf-border);
  border-radius: var(--hf-radius);
  padding: 0.875rem 1rem;
  text-align: center;
}

#hf-calc .hf-metric-label {
  display: block;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hf-gray-light) !important;
  margin-bottom: 4px;
}

#hf-calc .hf-metric-value {
  display: block;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--hf-black) !important;
}

/* Two-column layout */
#hf-calc .hf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 700px) {
  #hf-calc .hf-grid { grid-template-columns: 1fr; }
}

/* Cards */
#hf-calc .hf-card {
  background: var(--hf-white);
  border: 1px solid var(--hf-border);
  border-radius: var(--hf-radius);
  padding: 1.25rem 1.5rem;
}

#hf-calc .hf-card-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hf-gray-light) !important;
  margin-bottom: 1.25rem;
  display: block;
}

/* Sliders */
#hf-calc .hf-field {
  margin-bottom: 1.25rem;
}

#hf-calc .hf-field:last-child { margin-bottom: 0; }

#hf-calc .hf-field-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}

#hf-calc .hf-field-label {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--hf-gray-dark) !important;
}

#hf-calc .hf-field-val {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--hf-red) !important;
}

#hf-calc .hf-field-hint {
  font-size: 13px !important;
  color: var(--hf-gray-light) !important;
  margin-bottom: 6px;
  line-height: 1.4;
  display: block;
}

#hf-calc input[type=range] {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  background: var(--hf-border);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

#hf-calc input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--hf-red);
  cursor: pointer;
  border: 2px solid var(--hf-white);
  box-shadow: 0 0 0 1px var(--hf-red);
  transition: transform 0.1s;
}

#hf-calc input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

#hf-calc input[type=range]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--hf-red);
  cursor: pointer;
  border: 2px solid var(--hf-white);
}

/* Info tooltip toggle */
#hf-calc .hf-info-toggle {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--hf-border);
  color: var(--hf-gray) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-align: center;
  line-height: 18px !important;
  cursor: pointer;
  margin-left: 5px;
  vertical-align: middle;
  user-select: none;
  flex-shrink: 0;
}

#hf-calc .hf-info-box {
  background: var(--hf-bg);
  border-left: 3px solid var(--hf-red);
  border-radius: 0 var(--hf-radius-sm) var(--hf-radius-sm) 0;
  padding: 0.625rem 0.875rem;
  margin-top: 6px;
  font-size: 14px !important;
  color: var(--hf-gray) !important;
  line-height: 1.5 !important;
  display: none;
}

#hf-calc .hf-info-box.open { display: block; }

/* Results bars */
#hf-calc .hf-results-card {
  background: var(--hf-white);
  border: 1px solid var(--hf-border);
  border-radius: var(--hf-radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}

#hf-calc .hf-bar-group {
  margin-bottom: 1.25rem;
}

#hf-calc .hf-bar-group:last-child { margin-bottom: 0; }

#hf-calc .hf-bar-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
  gap: 8px;
  flex-wrap: wrap;
}

#hf-calc .hf-bar-name {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--hf-gray-dark) !important;
  display: flex;
  align-items: center;
  gap: 0;
}

#hf-calc .hf-bar-amount {
  font-size: 16px !important;
  font-weight: 700 !important;
  white-space: nowrap;
}

#hf-calc .hf-bar-formula {
  font-size: 13px !important;
  color: var(--hf-gray-light) !important;
  margin-bottom: 6px;
  display: block;
}

#hf-calc .hf-track {
  background: var(--hf-bg);
  border-radius: 3px;
  height: 6px;
  overflow: hidden;
  margin-bottom: 4px;
}

#hf-calc .hf-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.45s cubic-bezier(0.4,0,0.2,1);
  min-width: 2%;
}

#hf-calc .hf-divider {
  border: none;
  border-top: 1px solid var(--hf-border);
  margin: 1.25rem 0;
}

#hf-calc .hf-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

#hf-calc .hf-total-label {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--hf-black) !important;
}

#hf-calc .hf-total-value {
  font-size: 36px !important;
  font-weight: 700 !important;
  color: var(--hf-red) !important;
}

/* ROI box */
#hf-calc .hf-roi-box {
  background: var(--hf-black);
  border-radius: var(--hf-radius);
  padding: 1.75rem 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  text-align: center;
  margin-bottom: 1.25rem;
}

@media (max-width: 560px) {
  #hf-calc .hf-roi-box { grid-template-columns: 1fr; text-align: left; }
}

#hf-calc .hf-roi-label {
  display: block;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45) !important;
  margin-bottom: 6px;
}

#hf-calc .hf-roi-value {
  display: block;
  font-size: clamp(22px, 3.5vw, 32px) !important;
  font-weight: 700 !important;
  color: var(--hf-white) !important;
}

#hf-calc .hf-roi-value.accent { color: #ce1417 !important; }
#hf-calc .hf-roi-value.green { color: #4ade80 !important; }

#hf-calc .hf-roi-sub {
  display: block;
  font-size: 13px !important;
  color: rgba(255,255,255,0.35) !important;
  margin-top: 3px;
}

#hf-calc .hf-roi-divider {
  width: 1px;
  background: rgba(255,255,255,0.1);
  align-self: stretch;
  display: none;
}

/* Savings breakdown */
#hf-calc .hf-savings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 1.25rem;
}

@media (max-width: 600px) {
  #hf-calc .hf-savings-grid { grid-template-columns: 1fr; }
}

#hf-calc .hf-saving-card {
  background: var(--hf-green-light);
  border: 1px solid rgba(26,127,75,0.2);
  border-radius: var(--hf-radius);
  padding: 1rem;
}

#hf-calc .hf-saving-label {
  display: block;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--hf-green) !important;
  margin-bottom: 4px;
}

#hf-calc .hf-saving-value {
  display: block;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--hf-green) !important;
  margin-bottom: 2px;
}

#hf-calc .hf-saving-sub {
  display: block;
  font-size: 13px !important;
  color: var(--hf-gray) !important;
}

/* CTA */
#hf-calc .hf-cta {
  background: var(--hf-red-light);
  border: 1px solid rgba(206,20,23,0.2);
  border-radius: var(--hf-radius);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

#hf-calc .hf-cta-text p:first-child {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--hf-black) !important;
  margin-bottom: 4px;
}

#hf-calc .hf-cta-text p:last-child {
  font-size: 15px !important;
  color: var(--hf-gray) !important;
}

#hf-calc .hf-cta-btn {
  display: inline-block;
  background: var(--hf-red);
  color: var(--hf-white) !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 0.875rem 1.75rem;
  border-radius: var(--hf-radius-sm);
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.15s;
  border: none;
  cursor: pointer;
}

#hf-calc .hf-cta-btn:hover { background: #a8100f; }

#hf-calc .hf-note {
  font-size: 13px !important;
  color: var(--hf-gray-light) !important;
  text-align: center;
  margin-top: 1.25rem;
  line-height: 1.5 !important;
}

/* Force font-family on all children */
#hf-calc, #hf-calc * {
  font-family: 'Roboto', sans-serif !important;
}
</style>

<div id="hf-calc">
  <div class="hf-wrap">

    <!-- Header -->
    <div class="hf-header">
      <span class="hf-eyebrow">Kostenrechner</span>
      <h2 class="hf-title">Was kostet die stille Krise<br><span>euer Hotel wirklich?</span></h2>
      <p class="hf-subtitle">Passt die Regler an euer Haus an — der Rechner zeigt, welches Einsparpotenzial mit einer konsequenten Social-Media-Strategie realistisch erreichbar ist.</p>
    </div>

    <!-- Live metrics -->
    <div class="hf-metrics">
      <div class="hf-metric"><span class="hf-metric-label">Zimmer</span><span class="hf-metric-value" id="hf-m-zimmer">60</span></div>
      <div class="hf-metric"><span class="hf-metric-label">Auslastung</span><span class="hf-metric-value" id="hf-m-aus">68 %</span></div>
      <div class="hf-metric"><span class="hf-metric-label">Ø Zimmerpreis</span><span class="hf-metric-value" id="hf-m-adr">135 €</span></div>
      <div class="hf-metric"><span class="hf-metric-label">Mitarbeiter</span><span class="hf-metric-value" id="hf-m-ma">28</span></div>
    </div>

    <!-- Two-column params -->
    <div class="hf-grid">

      <!-- Left: Hotel-Kennzahlen -->
      <div class="hf-card">
        <span class="hf-card-title">Hotel-Kennzahlen</span>

        <div class="hf-field">
          <div class="hf-field-top">
            <span class="hf-field-label">Anzahl Zimmer <span class="hf-info-toggle" data-target="hf-info-zimmer">i</span></span>
            <span class="hf-field-val" id="hf-v-zimmer">60</span>
          </div>
          <div class="hf-info-box" id="hf-info-zimmer">Grundlage für die Berechnung der Gesamtkapazität. Ø DACH 4-Sterne Ferienhotel: 45–90 Zimmer.</div>
          <input type="range" min="20" max="150" step="1" value="60" id="hf-s-zimmer">
        </div>

        <div class="hf-field">
          <div class="hf-field-top">
            <span class="hf-field-label">Auslastung (%) <span class="hf-info-toggle" data-target="hf-info-aus">i</span></span>
            <span class="hf-field-val" id="hf-v-aus">68 %</span>
          </div>
          <div class="hf-info-box" id="hf-info-aus">Die durchschnittliche Belegungsrate eurer Zimmer übers Jahr. Laut Destatis lag die Ø Auslastung deutscher 4-Sterne-Hotels 2023 bei 63–71 %.</div>
          <input type="range" min="40" max="90" step="1" value="68" id="hf-s-aus">
        </div>

        <div class="hf-field">
          <div class="hf-field-top">
            <span class="hf-field-label">Ø Zimmerpreis / Nacht (€) <span class="hf-info-toggle" data-target="hf-info-adr">i</span></span>
            <span class="hf-field-val" id="hf-v-adr">135 €</span>
          </div>
          <div class="hf-info-box" id="hf-info-adr">Der Average Daily Rate (ADR) — euer durchschnittlicher Erlös pro verkaufter Zimmernacht. Ø DACH 4-Sterne Ferienhotel: 110–170 €.</div>
          <input type="range" min="80" max="300" step="5" value="135" id="hf-s-adr">
        </div>

        <div class="hf-field">
          <div class="hf-field-top">
            <span class="hf-field-label">Betriebstage / Jahr <span class="hf-info-toggle" data-target="hf-info-tage">i</span></span>
            <span class="hf-field-val" id="hf-v-tage">250</span>
          </div>
          <div class="hf-info-box" id="hf-info-tage">Wie viele Tage im Jahr ist euer Haus geöffnet? Relevante Grundlage für Nächte und OTA-Volumen.</div>
          <input type="range" min="100" max="365" step="5" value="250" id="hf-s-tage">
        </div>
      </div>

      <!-- Right: Kostentreiber -->
      <div class="hf-card">
        <span class="hf-card-title">Kostentreiber</span>

        <div class="hf-field">
          <div class="hf-field-top">
            <span class="hf-field-label">OTA-Anteil (%) <span class="hf-info-toggle" data-target="hf-info-ota">i</span></span>
            <span class="hf-field-val" id="hf-v-ota">55 %</span>
          </div>
          <div class="hf-info-box" id="hf-info-ota">Wie viel Prozent eurer Buchungen kommen über Booking.com, Expedia & Co.? Branchendurchschnitt DACH: 50–60 %. Provision je Buchung: Ø 16 % (inkl. Zahlungsabwicklung).</div>
          <input type="range" min="10" max="85" step="1" value="55" id="hf-s-ota">
        </div>

        <div class="hf-field">
          <div class="hf-field-top">
            <span class="hf-field-label">Mitarbeiter gesamt <span class="hf-info-toggle" data-target="hf-info-ma">i</span></span>
            <span class="hf-field-val" id="hf-v-ma">28</span>
          </div>
          <div class="hf-info-box" id="hf-info-ma">Alle Voll- und Teilzeitbeschäftigten. Basis für die Flukturationskostenberechnung. Ø 4-Sterne Hotel mit 60 Zimmern: 20–35 Mitarbeiter.</div>
          <input type="range" min="5" max="100" step="1" value="28" id="hf-s-ma">
        </div>

        <div class="hf-field">
          <div class="hf-field-top">
            <span class="hf-field-label">Fluktuationsrate (%) <span class="hf-info-toggle" data-target="hf-info-flu">i</span></span>
            <span class="hf-field-val" id="hf-v-flu">58 %</span>
          </div>
          <div class="hf-info-box" id="hf-info-flu">Wie viele eurer Mitarbeiter verlassen das Haus pro Jahr? Laut DEHOGA liegt die Fluktuation in der Hotellerie bei 55–65 %. Jeder Abgang kostet im Schnitt 18.000 € (Recruiting, Einarbeitung, Produktivitätsverlust).</div>
          <input type="range" min="20" max="90" step="1" value="58" id="hf-s-flu">
        </div>

        <div class="hf-field">
          <div class="hf-field-top">
            <span class="hf-field-label">Preisdifferenz zu diff. Hotel (€) <span class="hf-info-toggle" data-target="hf-info-com">i</span></span>
            <span class="hf-field-val" id="hf-v-com">13 €</span>
          </div>
          <div class="hf-info-box" id="hf-info-com">Hotels, die austauschbar wirken, konkurrieren fast ausschließlich über den Preis. Die Preiselastizität im OTA-Vergleich liegt bei ca. –2,35: Bei 10 € mehr Zimmerpreis verliert ein austauschbares Hotel ~23 % seiner Buchungen. Ein differenziertes Hotel mit klarer Marke erzielt nachweislich 10–18 € höheren ADR bei gleicher Auslastung — Gäste buchen wertbasiert, nicht preisbasiert.</div>
          <input type="range" min="5" max="40" step="1" value="13" id="hf-s-com">
        </div>
      </div>
    </div>

    <!-- Results -->
    <div class="hf-results-card">
      <span class="hf-card-title">Jährliche Verlustrechnung</span>

      <div class="hf-bar-group">
        <div class="hf-bar-top">
          <span class="hf-bar-name">OTA-Provisionen <span class="hf-info-toggle" data-target="hf-info-r-ota">i</span></span>
          <span class="hf-bar-amount" style="color: #ce1417;" id="hf-t-ota">–</span>
        </div>
        <div class="hf-info-box" id="hf-info-r-ota">Berechnung: OTA-Nächte × Zimmerpreis × 16 % Provision. Direkt vermeidbar durch mehr Direktbuchungen.</div>
        <span class="hf-bar-formula" id="hf-sub-ota">–</span>
        <div class="hf-track"><div class="hf-fill" id="hf-b-ota" style="background: #ce1417;"></div></div>
      </div>

      <div class="hf-bar-group">
        <div class="hf-bar-top">
          <span class="hf-bar-name">Fachkräftefluktuation <span class="hf-info-toggle" data-target="hf-info-r-flu">i</span></span>
          <span class="hf-bar-amount" style="color: #b85c00;" id="hf-t-flu">–</span>
        </div>
        <div class="hf-info-box" id="hf-info-r-flu">Berechnung: Abgänge/Jahr × 18.000 € (DEHOGA). Kosten setzen sich zusammen aus: Stellenanzeigen ~1.500 €, Recruiting & Interviews ~2.500 €, Einarbeitung ~4.000 €, Produktivitätsverlust 3–6 Monate ~10.000 €.</div>
        <span class="hf-bar-formula" id="hf-sub-flu">–</span>
        <div class="hf-track"><div class="hf-fill" id="hf-b-flu" style="background: #c97a20;"></div></div>
      </div>

      <div class="hf-bar-group">
        <div class="hf-bar-top">
          <span class="hf-bar-name">Entgangener Umsatz durch Preiskampf <span class="hf-info-toggle" data-target="hf-info-r-com">i</span></span>
          <span class="hf-bar-amount" style="color: #555;" id="hf-t-com">–</span>
        </div>
        <div class="hf-info-box" id="hf-info-r-com">Das differenzierte Hotel nebenan mit gleicher Zimmeranzahl und Auslastung, aber klarer Markenidentität, erzielt einen höheren ADR — weil Gäste für ein unverwechselbares Erlebnis mehr zahlen. Diese Differenz multipliziert mit allen Nächten ergibt den Umsatzverlust durch fehlende Differenzierung.</div>
        <span class="hf-bar-formula" id="hf-sub-com">–</span>
        <div class="hf-track"><div class="hf-fill" id="hf-b-com" style="background: #888;"></div></div>
      </div>

      <hr class="hf-divider">

      <div class="hf-total-row">
        <span class="hf-total-label">Gesamtschaden pro Jahr</span>
        <span class="hf-total-value" id="hf-total">–</span>
      </div>
    </div>

    <!-- ROI black box -->
    <div class="hf-roi-box">
      <div>
        <span class="hf-roi-label">Gesamtschaden / Jahr</span>
        <span class="hf-roi-value accent" id="hf-roi-schaden">–</span>
        <span class="hf-roi-sub">struktureller Verlust</span>
      </div>
      <div>
        <span class="hf-roi-label">Einsparpotenzial (30 %)</span>
        <span class="hf-roi-value green" id="hf-roi-save">–</span>
        <span class="hf-roi-sub">konservative Schätzung</span>
      </div>
      <div>
        <span class="hf-roi-label">ROI-Faktor</span>
        <span class="hf-roi-value" id="hf-roi-faktor">–</span>
        <span class="hf-roi-sub" id="hf-roi-sub">€ Potenzial je € investiert</span>
      </div>
    </div>

    <!-- Savings breakdown -->
    <div class="hf-savings-grid">
      <div class="hf-saving-card">
        <span class="hf-saving-label">Weniger OTA-Kosten</span>
        <span class="hf-saving-value" id="hf-save-ota">–</span>
        <span class="hf-saving-sub">bei 30 % mehr Direktbuchungen</span>
      </div>
      <div class="hf-saving-card">
        <span class="hf-saving-label">Geringere Fluktuation</span>
        <span class="hf-saving-value" id="hf-save-flu">–</span>
        <span class="hf-saving-sub">bei 30 % niedrigerer Abgangsrate</span>
      </div>
      <div class="hf-saving-card">
        <span class="hf-saving-label">Höherer Zimmerpreis</span>
        <span class="hf-saving-value" id="hf-save-com">–</span>
        <span class="hf-saving-sub">durch wertbasierte Buchungen</span>
      </div>
    </div>

    <!-- CTA -->
    <div class="hf-cta">
      <div class="hf-cta-text">
        <p>Wo steht euer Hotel gerade wirklich?</p>
        <p>Kostenlose Analyse eures Online-Auftritts — persönlich, ehrlich, unverbindlich.</p>
      </div>
      <a href="https://hotelframe.de/social-media-analyse" target="_blank" rel="noopener" class="hf-cta-btn">Kostenlose Analyse sichern →</a>
    </div>

    <p class="hf-note">Alle Berechnungen basieren auf DEHOGA-Branchendaten, Destatis-Statistiken und Studienwerten zur Preiselastizität in der DACH-Hotellerie. Die Ergebnisse sind Richtwerte — individuelle Ergebnisse können abweichen.<br>TL Media GmbH · hotelframe.de · +49 151 4613 9691</p>

  </div>
</div>

<script>
(function() {
  function hfFmt(n) {
    return Math.round(n).toLocaleString('de-DE') + '\u00a0\u20ac';
  }

  function hfPct(n) {
    return Math.round(n) + '\u00a0%';
  }

  var toggles = document.querySelectorAll('#hf-calc .hf-info-toggle');
  toggles.forEach(function(btn) {
    btn.addEventListener('click', function() {
      var targetId = btn.getAttribute('data-target');
      var box = document.getElementById(targetId);
      if (box) box.classList.toggle('open');
    });
  });

  function hfCalc() {
    var zimmer = +document.getElementById('hf-s-zimmer').value;
    var aus    = +document.getElementById('hf-s-aus').value / 100;
    var adr    = +document.getElementById('hf-s-adr').value;
    var tage   = +document.getElementById('hf-s-tage').value;
    var ma     = +document.getElementById('hf-s-ma').value;
    var otaPct = +document.getElementById('hf-s-ota').value / 100;
    var fluPct = +document.getElementById('hf-s-flu').value / 100;
    var comDiff= +document.getElementById('hf-s-com').value;

    document.getElementById('hf-v-zimmer').textContent = zimmer;
    document.getElementById('hf-v-aus').textContent    = hfPct(aus * 100);
    document.getElementById('hf-v-adr').textContent    = adr + '\u00a0\u20ac';
    document.getElementById('hf-v-tage').textContent   = tage;
    document.getElementById('hf-v-ota').textContent    = hfPct(otaPct * 100);
    document.getElementById('hf-v-ma').textContent     = ma;
    document.getElementById('hf-v-flu').textContent    = hfPct(fluPct * 100);
    document.getElementById('hf-v-com').textContent    = comDiff + '\u00a0\u20ac';

    document.getElementById('hf-m-zimmer').textContent = zimmer;
    document.getElementById('hf-m-aus').textContent    = hfPct(aus * 100);
    document.getElementById('hf-m-adr').textContent    = adr + '\u00a0\u20ac';
    document.getElementById('hf-m-ma').textContent     = ma;

    var naechte    = Math.round(zimmer * aus * tage);
    var otaNaechte = Math.round(naechte * otaPct);
    var otaKosten  = Math.round(otaNaechte * adr * 0.16);

    var abgaenge   = Math.round(ma * fluPct);
    var fluKosten  = abgaenge * 18000;

    var comKosten  = Math.round(naechte * comDiff);

    var total = otaKosten + fluKosten + comKosten;

    function setBar(barId, tagId, subId, val, subText) {
      var pct = total > 0 ? Math.max(3, Math.round(val / total * 100)) : 3;
      document.getElementById(barId).style.width = pct + '%';
      document.getElementById(tagId).textContent = hfFmt(val);
      document.getElementById(subId).textContent = subText;
    }

    setBar('hf-b-ota', 'hf-t-ota', 'hf-sub-ota', otaKosten,
      otaNaechte.toLocaleString('de-DE') + ' OTA-N\u00e4chte \u00d7 ' + adr + '\u00a0\u20ac \u00d7 16\u00a0% Provision');
    setBar('hf-b-flu', 'hf-t-flu', 'hf-sub-flu', fluKosten,
      abgaenge + ' Abg\u00e4nge/Jahr \u00d7 18.000\u00a0\u20ac (Recruiting + Einarbeitung + Produktivit\u00e4tsverlust)');
    setBar('hf-b-com', 'hf-t-com', 'hf-sub-com', comKosten,
      naechte.toLocaleString('de-DE') + ' N\u00e4chte \u00d7 ' + comDiff + '\u00a0\u20ac entgangener ADR-Differenz');

    document.getElementById('hf-total').textContent       = hfFmt(total);
    document.getElementById('hf-roi-schaden').textContent = hfFmt(total);

    var save = Math.round(total * 0.30);
    document.getElementById('hf-roi-save').textContent    = hfFmt(save);

    var faktor = save > 0 ? (save / (save * 0.15)).toFixed(1) : '–';
    document.getElementById('hf-roi-faktor').textContent  = 'ca. ' + Math.round(total * 0.30 / (total * 0.05)) + 'x';
    document.getElementById('hf-roi-sub').textContent     = '\u20ac Potenzial je \u20ac investiert';

    document.getElementById('hf-save-ota').textContent = hfFmt(Math.round(otaKosten * 0.30));
    document.getElementById('hf-save-flu').textContent = hfFmt(Math.round(fluKosten * 0.30));
    document.getElementById('hf-save-com').textContent = hfFmt(Math.round(comKosten * 0.30));
  }

  ['hf-s-zimmer','hf-s-aus','hf-s-adr','hf-s-tage','hf-s-ota','hf-s-ma','hf-s-flu','hf-s-com'].forEach(function(id) {
    document.getElementById(id).addEventListener('input', hfCalc);
  });

  hfCalc();
})();
</script>