/* ==============================================================
   tuerschild.css  ·  Besitzer: P6 Kontakt, Formular, Tuerschild
   K33 Tuerschild (Plan 8.4, 9.4). Markup nur aus kh_tuerschild()
   (includes/tuerschild.php):
     <div class="tuerschild schild [tuerschild--gross]" data-tuerschild data-art="offen|pause|zu|vereinbarung|hinweis">
       <span class="tuerschild-name">KNOW HOW</span>
       <p class="tuerschild-status"><span class="tuerschild-punkt"></span>
          <strong class="tuerschild-titel">…</strong><span class="tuerschild-zusatz">…</span></p>
       <p class="tuerschild-quelle">laut Öffnungszeiten</p>   | <p class="tuerschild-hinweis">…</p>
     </div>
   Material: kleines Ladenschild (.schild-Tokens) an einer Schnur, die an
   einem Nagel haengt. Zustand = Punkt (gefuellt: offen/zu, Ring: Pause/
   Vereinbarung) PLUS Text - nie Farbe allein. Pendeln: tuerschild.js
   (WAAPI auf rotate), Drehpunkt ist der Nagel.
   ============================================================== */
.tuerschild[hidden]{display:none}   /* fix2: Zustand „unbekannt“ blendet das Schild aus (tuerschild.js) */
.tuerschild{
  --schnur: 22px;
  position:relative;display:block;width:fit-content;max-width:100%;min-width:min(15rem,100%);
  margin-top:calc(var(--schnur) + 6px);
  padding:.95rem 1.2rem 1rem;
  border-radius:var(--r-bogen);
  border-top:3px solid var(--platte);
  box-shadow:5px 5px 0 -1px var(--haar), var(--sh-2);
  transform-origin:50% calc(-1 * var(--schnur) - 3px);   /* Nagel */
  -webkit-tap-highlight-color:transparent;
}
/* Nagel + Schnur (V-Form) ueber dem Schild. Farbe: Ladenschild-Schwarz,
   liegt auf der hellen Flaeche darueber. Reine Deko, kein Text. */
.tuerschild::before{
  content:"";position:absolute;left:50%;top:calc(-1 * var(--schnur) - 7px);
  width:8px;height:8px;margin-left:-4px;border-radius:50%;
  background:var(--schild);pointer-events:none;
}
.tuerschild::after{
  content:"";position:absolute;left:22%;right:22%;top:calc(-1 * var(--schnur) - 3px);height:calc(var(--schnur));
  pointer-events:none;
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), var(--schild) calc(50% - 1px), var(--schild) calc(50% + .6px), transparent calc(50% + .6px)) left / 50% 100% no-repeat,
    linear-gradient(to top left,  transparent calc(50% - 1px), var(--schild) calc(50% - 1px), var(--schild) calc(50% + .6px), transparent calc(50% + .6px)) right / 50% 100% no-repeat;
}

.tuerschild-name{
  display:flex;align-items:center;gap:.55rem;
  font-family:var(--schrift-titel);font-weight:800;font-stretch:88%;
  font-size:.875rem;line-height:1.2;letter-spacing:.16em;text-transform:uppercase;color:var(--text);
}
.tuerschild-name::before{
  content:"";flex:0 0 auto;width:18px;height:3px;background:var(--platte);box-shadow:2px 2px 0 var(--haar);
}
.tuerschild-status{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:.6rem;
  margin:.6rem 0 0;
}
.tuerschild-punkt{
  grid-row:1;width:.8rem;height:.8rem;border-radius:50%;
  background:var(--accent-text);border:2px solid var(--accent-text);
}
.tuerschild[data-art="pause"] .tuerschild-punkt{background:transparent}
.tuerschild[data-art="zu"] .tuerschild-punkt,
.tuerschild[data-art="hinweis"] .tuerschild-punkt{background:var(--accent2-text);border-color:var(--accent2-text)}
.tuerschild[data-art="vereinbarung"] .tuerschild-punkt{background:transparent;border-color:var(--accent2-text)}

.tuerschild-titel{
  grid-row:1;grid-column:2;
  font-family:var(--schrift-titel);font-weight:760;font-stretch:88%;
  font-size:clamp(1.45rem, 1.3rem + .6vw, 1.75rem);line-height:1.05;letter-spacing:-.01em;color:var(--text);
}
.tuerschild-zusatz{
  grid-column:2;display:block;margin-top:.2rem;
  font-family:var(--schrift-lauf);font-size:1.0625rem;line-height:1.35;color:var(--text);
}
.tuerschild-quelle,.tuerschild-hinweis{margin:.55rem 0 0;font-family:var(--schrift-lauf);line-height:1.4}
.tuerschild-quelle{font-size:.875rem;color:var(--muted)}
.tuerschild-hinweis{font-size:1rem;color:var(--text);max-width:34ch}

/* Gross: Kontaktseite, Hero (haengt vor dem Ladenfoto) */
.tuerschild--gross{--schnur:30px;padding:1.2rem 1.5rem 1.25rem;min-width:min(19rem,100%)}
.tuerschild--gross .tuerschild-titel{font-size:clamp(1.9rem, 1.5rem + 1.5vw, 2.6rem)}
.tuerschild--gross .tuerschild-zusatz{font-size:clamp(1.0625rem, 1rem + .3vw, 1.2rem)}
.tuerschild--gross .tuerschild-punkt{width:1rem;height:1rem}

/* Zweiter axe-Lauf ohne Deko (Plan 15) */
.ohne-deko .tuerschild::before,.ohne-deko .tuerschild::after{display:none}
.ohne-deko .tuerschild{box-shadow:none}

/* Nachbesserung 25.09.2026 (Jury Befund 13): auf dem Ladenfoto liest sich
   die Aufhaengung (Nagel + Schnur) wie ein Kratzer - dort liegt das Schild
   ohnehin auf dem Bogen. */
.kh-bild .tuerschild::before,.kh-bild .tuerschild::after{display:none}
/* Seite aelter als der Fahrplan (tuerschild.js): kein Status, kein Punkt */
.tuerschild [hidden]{display:none!important}
.tuerschild[data-art="unbekannt"] .tuerschild-punkt{display:none}