From 79135968369e2659ff82cdb30e169dc110856122 Mon Sep 17 00:00:00 2001
From: hermes <hermes@nous.local>
Date: Sun, 14 Jun 2026 14:44:04 +0000
Subject: [PATCH] fix(ui): make vertical floor-plan tabs visually obvious as
 interactive controls
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The floor-accordion was rendering as a stack of plain text rows separated
by 1px hairline dividers with no visual affordance indicating they were
clickable tabs. CSS for .floor-icon (a 24px circle with a '+' that
rotates 45° to '×' on open) already existed, but the corresponding
<span class="floor-icon"> element had never been added to the template
— the affordance was completely invisible.

Changes:

1. Template (app/views/home/index.php): add
   <span class="floor-icon" aria-hidden="true">+</span> inside the
   <summary>, enabling the existing rotation/size CSS to take effect.

2. CSS (public/css/haus-schleusingen.css):
   a. Restyle .floor-item from a thin divider to a real card
      (1px --warm border, 4px radius, --white background) with a
      0.75rem gap between items via flexbox column on .floors-accordion.
   b. .floor-header: hover background in --cream, focus-visible
      outline, list-style markers suppressed, padding tightened to
      1.25rem 1.5rem.
   c. .floor-icon: enlarged from 24px to 32px, thicker 1.5px border,
      font-size 1.15rem so the '+' is clearly legible, white
      background that goes cream on hover/open.
   d. .floor-item.open: --accent border, subtle box-shadow
      (0 4px 20px 6% black), and a 3px-wide ::before accent stripe on
      the left edge — the canonical 'active tab' indicator.
   e. .floor-icon rotation on open (45°) now also flips border-color
      and background to --accent / --cream, plus hover state for the
      closed icon.
   f. Renamed dead-code class .floor-size → .floor-area to match the
      template (refactor mismatch left over from the i18n work).
   g. Renamed dead-code class .floor-accordion → .floors-accordion to
      match the template.

Measured on 1265px viewport:
- 4 items, 4 icons (one per tab)
- Each item: 1104x74, white bg, 4px radius, --warm border
- Icon: 32x32 at x=1128 (right edge), white bg, '+' glyph
- Open state (item[1]): border → --accent, left 3px accent stripe,
  icon rotates 45° to '×', subtle box-shadow

Sweep targets for visual confirmation:
- Closed: white card + warm border + '+' icon, hover lifts background
  to cream and icon border to accent.
- Open: accent border + left stripe + '×' icon + soft shadow, body
  expands below to show the floor-plan image and room list.
- Switching tabs: clicking another header collapses the current
  open one (existing JS accordion behaviour).
---
 app/views/home/index.php         |  1 +
 public/css/haus-schleusingen.css | 90 ++++++++++++++++++++++++++------
 2 files changed, 74 insertions(+), 17 deletions(-)

diff --git a/app/views/home/index.php b/app/views/home/index.php
index 9bee39d..8232904 100644
--- a/app/views/home/index.php
+++ b/app/views/home/index.php
@@ -153,6 +153,7 @@ $gridItems = [
         <summary class="floor-header">
           <span class="floor-title"><?= htmlspecialchars($t($floor['titleKey']), ENT_QUOTES) ?></span>
           <span class="floor-area"><?= htmlspecialchars($t($floor['areaKey']), ENT_QUOTES) ?></span>
+          <span class="floor-icon" aria-hidden="true">+</span>
         </summary>
         <div class="floor-body">
           <img src="/<?= htmlspecialchars($floorImageMap[$floor['id']] ?? 'bilder/grundrisse/EG.png', ENT_QUOTES) ?>"
diff --git a/public/css/haus-schleusingen.css b/public/css/haus-schleusingen.css
index 3b72bfb..b18aaa9 100755
--- a/public/css/haus-schleusingen.css
+++ b/public/css/haus-schleusingen.css
@@ -670,26 +670,63 @@ nav.scrolled {
   color: var(--charcoal);
 }
 
-.floor-accordion {
-  border-top: 1px solid var(--warm);
+.floors-accordion {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-top: -0.75rem;
 }
 
 .floor-item {
-  border-bottom: 1px solid var(--warm);
+  border: 1px solid var(--warm);
+  border-radius: 4px;
+  background: var(--white);
   overflow: hidden;
+  position: relative;
+  transition:
+    border-color 0.25s ease,
+    box-shadow 0.25s ease;
+}
+
+.floor-item:hover {
+  border-color: var(--stone);
+}
+
+.floor-item.open {
+  border-color: var(--accent);
+  box-shadow: 0 4px 20px rgb(28 26 23 / 6%);
+}
+
+.floor-item.open::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--accent);
 }
 
 .floor-header {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding: 1.5rem 0;
+  gap: 1rem;
+  padding: 1.25rem 1.5rem;
   cursor: pointer;
-  transition: color 0.2s;
+  list-style: none;
+  transition: background 0.2s ease;
 }
 
-.floor-header:hover .floor-title {
-  color: var(--accent);
+.floor-header::-webkit-details-marker {
+  display: none;
+}
+
+.floor-header::marker {
+  content: "";
+}
+
+.floor-header:hover {
+  background: var(--cream);
 }
 
 .floor-title {
@@ -699,41 +736,60 @@ nav.scrolled {
   transition: color 0.2s;
 }
 
-.floor-size {
+.floor-header:hover .floor-title {
+  color: var(--accent);
+}
+
+.floor-area {
+  margin-left: auto;
   font-size: 0.78rem;
   letter-spacing: 0.1em;
   color: var(--stone);
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: 0.75rem;
 }
 
 .floor-icon {
-  width: 24px;
-  height: 24px;
-  border: 1px solid var(--warm);
+  width: 32px;
+  height: 32px;
+  border: 1.5px solid var(--warm);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 0.8rem;
+  font-size: 1.15rem;
+  font-weight: 300;
+  line-height: 1;
   color: var(--stone);
+  background: var(--white);
+  flex-shrink: 0;
   transition:
-    transform 0.3s,
-    border-color 0.3s;
+    transform 0.3s ease,
+    border-color 0.25s ease,
+    color 0.25s ease,
+    background 0.25s ease;
+}
+
+.floor-header:hover .floor-icon {
+  border-color: var(--accent);
+  color: var(--accent);
 }
 
 .floor-item.open .floor-icon {
   transform: rotate(45deg);
   border-color: var(--accent);
   color: var(--accent);
+  background: var(--cream);
 }
 
 .floor-body {
   display: none;
-  padding: 0 0 1.5rem;
+  padding: 0 1.5rem 1.5rem;
   max-width: 100%;
   overflow: hidden;
+  border-top: 1px solid var(--warm);
+  margin-top: -1px;
 }
 
 .floor-rooms-grid {