<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300">
  <defs>
    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#0f172a"/>
      <stop offset="100%" stop-color="#1e293b"/>
    </linearGradient>
    <linearGradient id="freshGrad" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#38bdf8" stop-opacity="0"/>
      <stop offset="100%" stop-color="#38bdf8"/>
    </linearGradient>
    <linearGradient id="exhaustGrad" x1="1" y1="0" x2="0" y2="0">
      <stop offset="0%" stop-color="#fb923c" stop-opacity="0"/>
      <stop offset="100%" stop-color="#fb923c"/>
    </linearGradient>
    <marker id="arrowBlue" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
      <path d="M0,0 L0,6 L6,3 Z" fill="#38bdf8"/>
    </marker>
    <marker id="arrowOrange" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
      <path d="M0,0 L0,6 L6,3 Z" fill="#fb923c"/>
    </marker>
  </defs>

  <!-- Background -->
  <rect width="400" height="300" fill="url(#bg)"/>

  <!-- Outside label -->
  <text x="52" y="38" fill="#94a3b8" font-family="sans-serif" font-size="11" text-anchor="middle">Außen</text>
  <!-- Inside label -->
  <text x="348" y="38" fill="#94a3b8" font-family="sans-serif" font-size="11" text-anchor="middle">Innen</text>

  <!-- Wall -->
  <rect x="168" y="50" width="64" height="200" fill="#334155" rx="2"/>
  <text x="200" y="160" fill="#64748b" font-family="sans-serif" font-size="10" text-anchor="middle" dominant-baseline="middle">Wand</text>

  <!-- Device in wall -->
  <rect x="178" y="108" width="44" height="84" fill="#1e293b" rx="6" stroke="#475569" stroke-width="1.5"/>
  <!-- Heat exchanger ceramic core -->
  <rect x="186" y="118" width="28" height="64" fill="#0f172a" rx="3"/>
  <line x1="186" y1="126" x2="214" y2="126" stroke="#475569" stroke-width="1"/>
  <line x1="186" y1="134" x2="214" y2="134" stroke="#475569" stroke-width="1"/>
  <line x1="186" y1="142" x2="214" y2="142" stroke="#475569" stroke-width="1"/>
  <line x1="186" y1="150" x2="214" y2="150" stroke="#475569" stroke-width="1"/>
  <line x1="186" y1="158" x2="214" y2="158" stroke="#475569" stroke-width="1"/>
  <line x1="186" y1="166" x2="214" y2="166" stroke="#475569" stroke-width="1"/>
  <line x1="186" y1="174" x2="214" y2="174" stroke="#475569" stroke-width="1"/>

  <!-- Fresh air arrows (outside → inside, top) -->
  <line x1="20" y1="125" x2="175" y2="125" stroke="url(#freshGrad)" stroke-width="2.5" marker-end="url(#arrowBlue)"/>
  <line x1="217" y1="125" x2="375" y2="125" stroke="#38bdf8" stroke-width="2.5" stroke-opacity="0.7" marker-end="url(#arrowBlue)"/>

  <!-- Exhaust air arrows (inside → outside, bottom) -->
  <line x1="380" y1="165" x2="225" y2="165" stroke="url(#exhaustGrad)" stroke-width="2.5" marker-end="url(#arrowOrange)"/>
  <line x1="183" y1="165" x2="28" y2="165" stroke="#fb923c" stroke-width="2.5" stroke-opacity="0.7" marker-end="url(#arrowOrange)"/>

  <!-- Labels -->
  <text x="92" y="115" fill="#38bdf8" font-family="sans-serif" font-size="10" text-anchor="middle">Frischluft</text>
  <text x="308" y="115" fill="#38bdf8" font-family="sans-serif" font-size="10" text-anchor="middle">Frischluft</text>
  <text x="92" y="182" fill="#fb923c" font-family="sans-serif" font-size="10" text-anchor="middle">Abluft</text>
  <text x="308" y="182" fill="#fb923c" font-family="sans-serif" font-size="10" text-anchor="middle">Abluft</text>

  <!-- Heat recovery label -->
  <text x="200" y="210" fill="#94a3b8" font-family="sans-serif" font-size="9" text-anchor="middle">Wärmerückgewinnung</text>

  <!-- Title -->
  <text x="200" y="268" fill="#e2e8f0" font-family="sans-serif" font-size="13" font-weight="bold" text-anchor="middle">Dezentrale Lüftung</text>
</svg>
