@charset "UTF-8";
/*
 * Thermobohr AG – gemeinsame UI-Bausteine (claude/v006-stationen), auf allen Seiten eingebunden.
 * Pfeile als Linien-Icons statt Zeichen (↗ ↓ → ↑): Apple-Geräte zeigen manche Pfeilzeichen sonst als Emoji.
 * Stil wie Lucide (ISC-Lizenz, über Origin UI / Untitled UI): 24er-Raster, runde Enden, feine Linie.
 * Das Icon übernimmt Farbe (currentColor) und Grösse (font-size) seiner Umgebung.
 */
:root {
  --ico-ne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8.5 7H17v8.5'/%3E%3C/svg%3E");
  --ico-e: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E");
  --ico-s: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16M6 14l6 6 6-6'/%3E%3C/svg%3E");
  --ico-n: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V4M6 10l6-6 6 6'/%3E%3C/svg%3E");
  --ico-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H4M10 6l-6 6 6 6'/%3E%3C/svg%3E");
  --ico-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
}
.ico { display: inline-block; flex: none; width: .82em; height: .82em; vertical-align: -.1em; background-color: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ico-ne { --ico: var(--ico-ne); }
.ico-e { --ico: var(--ico-e); }
.ico-s { --ico: var(--ico-s); }
.ico-n { --ico: var(--ico-n); }
.ico-w { --ico: var(--ico-w); }

/* Unterseiten: Aufzählungszeichen (site.css setzt dort das Zeichen ↗) */
.body-copy li::before, .content-list li::before { content: "" !important; top: 1.05em; width: 10px; height: 10px; background-color: currentColor; -webkit-mask: var(--ico-ne) center / contain no-repeat; mask: var(--ico-ne) center / contain no-repeat; }

/* Schluss (ending-app.js zeichnet die Pfeile als Zeichen): Zeichen ausblenden, Icon zeigen */
#ending-panel .btn > span[aria-hidden], #ending-panel .closing-secondary > span[aria-hidden], #ending-panel .closing-bottom a > span[aria-hidden] {
  display: inline-block; flex: none; font-size: 0 !important; line-height: 0; width: 17px; height: 17px; background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
#ending-panel .btn > span[aria-hidden] { --ico: var(--ico-ne); width: 19px; height: 19px; }
#ending-panel .closing-secondary > span[aria-hidden] { --ico: var(--ico-e); width: 15px; height: 15px; }
#ending-panel .closing-bottom a > span[aria-hidden] { --ico: var(--ico-s); }

/* ---------- Startseite: Handymenü als ruhiges weisses Blatt über den ganzen Bildschirm (nach Untitled UI) ---------- */
@media (max-width: 1000px) {
  html.menu-offen { overflow: hidden; }
  .website .menu summary { position: relative; z-index: 31; transition: color .2s, border-color .2s, background-color .2s; }
  .website .menu[open] summary { color: var(--tinte); border-color: #d3dccf; background: #fff; }
  .website .header .menu nav {
    position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    padding: 0 var(--seite) calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain;
    background: #fff; color: var(--tinte); border: 0; box-shadow: none; font-size: 18px; text-align: left;
  }
  .menu-kopf { display: flex; align-items: center; flex: none; height: 82px; margin-bottom: 6px; border-bottom: 1px solid #e3e8df; }
  .menu-kopf img { display: block; width: 198px; height: auto; }
  .website .header .menu nav a {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; padding: 18px 2px;
    border-bottom: 1px solid #e9ede5; font-size: 18px; line-height: 1.3; letter-spacing: -.015em; color: var(--tinte); background: none; text-align: left;
  }
  .website .header .menu nav a:not(.nav-kontakt)::after {
    content: ""; position: static; flex: none; width: 15px; height: 15px; background-color: #9db394; transition: transform .2s;
    -webkit-mask: var(--ico-chev) center / contain no-repeat; mask: var(--ico-chev) center / contain no-repeat;
  }
  .website .header .menu nav a:not(.nav-kontakt):active::after { transform: translateX(3px); }
  .website .header .menu nav a[aria-current="page"] { color: var(--marke); }
  .website .header .menu nav .nav-kontakt { margin-top: auto; padding: 17px 20px !important; border: 0; background: var(--marke); color: #fff !important; font-size: 16px; }
  .website .header .menu nav .nav-kontakt .ico { color: #cfe6b4; }
}
@media (max-width: 1000px) and (max-height: 560px) {
  .website .header .menu nav a { padding: 12px 2px; font-size: 16px; }
  .website .header .menu nav .nav-kontakt { margin-top: 16px; }
}