/* =====================================================
   business+design AG - Referenzen: Karten und Themenwelten

   Bewusst eine eigene Datei und nicht in style.css: solange die beiden
   Varianten zur Auswahl stehen, lässt sich hier alles ansehen, ändern
   und notfalls wegwerfen, ohne das Haupt-Stylesheet anzufassen.
   Ist eine Variante entschieden, wandert der gebrauchte Teil in
   style.css und diese Datei fällt weg.

   Eingebunden nur von referenzen.html und referenzen-variante-b.html.

   --akzent ist die Hausfarbe des jeweiligen Kunden. Sie kommt aus den
   Daten und wird auf der Karte bzw. am Themenwelt-Fenster gesetzt.
   ===================================================== */

/* .ref-list in style.css bringt unten nur 20px mit - für ein Kartenfeld
   zu wenig Luft zum Footer. */
.refwelt{
  --akzent: var(--yellow);
  padding-bottom:78px;
}

/* =====================================================
   Filterleiste
   ===================================================== */
/* Zwei Ebenen, beide ohne Kästchen - sie sprechen die Sprache der
   übrigen Seite: oben die Bereiche wie die Titel im Menü (gelbe Klammern
   beim gewählten), darunter die Leistungen wie die Stichworte auf der
   Startseite (gelber Strich fährt von links ein). */
.reffilter{ margin:0 0 42px; }

.reffilter-bereiche{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 10px;
}
.reffilter-bereich{
  --parm:8px;
  --pthick:3px;
  position:relative;
  appearance:none;
  margin:0;
  border:0;
  background:none;
  padding:5px calc(var(--parm) + 8px);
  font-family:var(--font-cond);
  font-weight:900;
  font-size:19px;
  line-height:1.15;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:#8a8a8a;
  cursor:pointer;
  transition:color .2s;
}
.reffilter-bereich .pb{ border-color:transparent; }
.reffilter-bereich:hover{ color:var(--black); }
.reffilter-bereich.is-active{ color:var(--black); }
.reffilter-bereich.is-active .pb{ border-color:var(--yellow); }
.reffilter-bereich:focus-visible{ outline:2px solid var(--yellow); outline-offset:2px; }

/* kleine Zahl: so viele Referenzen stecken dahinter */
.reffilter-zahl{
  margin-left:5px;
  font-family:var(--font);
  font-size:11px;
  font-weight:600;
  letter-spacing:.5px;
  vertical-align:super;
  line-height:0;
  color:#9a9a9a;
}

/* Zweite Ebene klappt weich auf: 0fr → 1fr lässt sich animieren,
   height:auto nicht */
.reffilter-ebene{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .45s cubic-bezier(.22,.61,.36,1);
}
.reffilter-ebene.is-open{ grid-template-rows:1fr; }
.reffilter-leistungen{
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-wrap:wrap;
  gap:0 30px;
  /* bündig mit dem Text der Bereiche, nicht mit ihren Klammern */
  padding-left:16px;
}

.reffilter-btn{
  position:relative;
  appearance:none;
  /* Abstand als Aussenrand der Knöpfe - ein Innenabstand am Container
     bliebe auch zugeklappt stehen */
  margin:18px 0 0;
  border:0;
  background:none;
  padding:4px 0;
  font-family:var(--font);
  font-size:13px;
  font-weight:600;
  letter-spacing:2.2px;
  text-transform:uppercase;
  color:#6b6b6b;
  cursor:pointer;
  opacity:0;
  transform:translateX(-10px);
  /* Einträge gleiten gestaffelt herein (--i setzt referenzen.js) */
  transition:
    color .2s,
    padding-left .24s cubic-bezier(.2,.7,.2,1),
    opacity .35s ease calc(var(--i, 0) * 60ms + 120ms),
    transform .5s cubic-bezier(.22,.61,.36,1) calc(var(--i, 0) * 60ms + 120ms);
}
.reffilter-ebene.is-open .reffilter-btn{ opacity:1; transform:none; }
.reffilter-btn::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:0;
  height:3px;
  margin-top:-1px;
  background:var(--yellow);
  transition:width .24s cubic-bezier(.2,.7,.2,1);
}
.reffilter-btn:hover,
.reffilter-btn.is-active{ color:var(--black); padding-left:24px; }
.reffilter-btn:hover::before,
.reffilter-btn.is-active::before{ width:16px; }
.reffilter-btn:focus-visible{ outline:2px solid var(--yellow); outline-offset:2px; }

.refleer{
  margin:40px 0 0;
  color:#6d6a63;
  font-size:16px;
}

/* =====================================================
   VARIANTE A - Karten-Raster
   Gleich grosse Karten, Bild oben, darunter Logo, Claim und Leistungen.
   Ruhig, gut zu überfliegen, verträgt viele Kunden.
   ===================================================== */
.refgrid--a{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

.refkarte{ display:block; }
.refkarte[hidden]{ display:none; }

.refkarte-btn{
  appearance:none;
  display:flex;
  flex-direction:column;
  width:100%;
  padding:0;
  border:1px solid #e2ded5;
  border-top:3px solid #e2ded5;
  background:var(--white);
  text-align:left;
  cursor:pointer;
  font-family:var(--font);
  height:100%;
  transition:border-top-color .2s, box-shadow .2s, transform .2s;
}
.refkarte-btn:hover,
.refkarte-btn:focus-visible{
  border-top-color:var(--akzent);
  box-shadow:0 14px 34px rgba(0,0,0,.13);
  transform:translateY(-3px);
}
.refkarte-btn:focus-visible{ outline:3px solid var(--yellow); outline-offset:3px; }

.refkarte-bild{
  position:relative;
  display:block;
  overflow:hidden;
  aspect-ratio:8 / 5;
  background:#ece8e1;
}
.refkarte-bild img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}
.refkarte-btn:hover .refkarte-bild img{ transform:scale(1.045); }

/* =====================================================
   Gemeinsame Bauteile über dem Bild
   ===================================================== */

/* Die vier Sucher-Ecken: das Hauszeichen, hier als Hover-Zustand.
   Sie fahren aus den Ecken herein, sobald das Bild angesteuert wird.
   Gleiches Markup in allen drei Varianten. */
.ref-ecken{ position:absolute; inset:14px; pointer-events:none; z-index:2; }
.ref-ecken i{
  position:absolute;
  width:22px; height:22px;
  border:3px solid var(--yellow);
  opacity:0;
  transition:opacity .22s ease, transform .22s ease;
}
.ref-ecken i:nth-child(1){ top:0; left:0;  border-right:0; border-bottom:0; transform:translate(-6px,-6px); }
.ref-ecken i:nth-child(2){ top:0; right:0; border-left:0;  border-bottom:0; transform:translate(6px,-6px); }
.ref-ecken i:nth-child(3){ bottom:0; left:0;  border-right:0; border-top:0; transform:translate(-6px,6px); }
.ref-ecken i:nth-child(4){ bottom:0; right:0; border-left:0;  border-top:0; transform:translate(6px,6px); }

.refkarte-btn:hover .ref-ecken i,
.refkarte-btn:focus-visible .ref-ecken i,
.refmosaik-btn:hover .ref-ecken i,
.refmosaik-btn:focus-visible .ref-ecken i,
.refkunde:hover .ref-ecken i,
.refkunde:focus-within .ref-ecken i{ opacity:1; transform:translate(0,0); }

/* Logo über dem Foto. Dort braucht es immer ein Feld, sonst geht es im
   Bild unter - weiss oder schwarz je nach logogrund in den Daten. */
.ref-bildlogo{
  position:absolute;
  top:18px; left:18px;
  z-index:3;
  display:flex;
  align-items:center;
  width:max-content;
  max-width:calc(100% - 36px);
  padding:9px 13px;
  background:var(--white);
}
.ref-bildlogo img{ max-height:26px; width:auto; display:block; }
.ref-bildlogo--feld-dunkel{ background:#131313; }
.ref-bildlogo--feld-hell{ background:var(--white); }
/* Ohne Logodatei bleibt die Ecke leer - der Name steht ja daneben. */
.ref-bildlogo--text{ display:none; }

.refkarte-inhalt{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  padding:22px 24px 24px;
  flex:1;
}

/* Logoplatz. Solange kein Logo da ist, steht hier der Name -
   dieselbe Fläche, damit später nichts springt.
   --feld-dunkel / --feld-hell setzt include/referenzen.js, wenn Logo
   und Untergrund nicht zusammenpassen (weisses Logo auf weisser Karte). */
.refkarte-logo{
  display:flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  min-height:30px;
}
.refkarte-logo img{ max-height:30px; width:auto; }
.refkarte-logo--feld-dunkel{ background:#131313; padding:8px 12px; min-height:46px; }
.refkarte-logo--feld-hell{ background:var(--white); padding:8px 12px; min-height:46px; border:1px solid #e2ded5; }
.refkarte-logo--text{
  font-weight:800;
  font-size:19px;
  line-height:1.15;
  color:var(--black);
  letter-spacing:-.01em;
}

.refkarte-claim{
  display:block;
  font-size:17px;
  line-height:1.4;
  color:var(--grey-text);
}

.refkarte-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:6px; }
.refkarte-tag{
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#6d6a63;
  border:1px solid #e2ded5;
  padding:3px 8px;
}

.refkarte-mehr{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:700;
  color:var(--black);
  padding-top:4px;
}
.refkarte-mehr::after{
  content:"";
  width:16px; height:2px;
  background:var(--akzent);
  transition:width .2s ease;
}
.refkarte-btn:hover .refkarte-mehr::after{ width:30px; }

/* =====================================================
   VARIANTE B - Mosaik
   Reine Bildkarten in zwei Höhen. Bildlastig, der Collage-Charakter
   beginnt schon auf der Übersicht.
   ===================================================== */
.refgrid--b{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:210px;
  gap:18px;
}

.refmosaik{ grid-row:span 2; }
.refmosaik:nth-child(4n+1),
.refmosaik:nth-child(4n+4){ grid-row:span 3; }
.refmosaik[hidden]{ display:none; }

.refmosaik-btn{
  position:relative;
  display:block;
  width:100%; height:100%;
  padding:0;
  border:0;
  background:#141414;
  overflow:hidden;
  cursor:pointer;
  font-family:var(--font);
  text-align:left;
}
.refmosaik-btn:focus-visible{ outline:3px solid var(--yellow); outline-offset:3px; }

.refmosaik-bild{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.55) contrast(1.02);
  transition:transform .6s ease, filter .4s ease;
}
.refmosaik-btn:hover .refmosaik-bild,
.refmosaik-btn:focus-visible .refmosaik-bild{ transform:scale(1.06); filter:saturate(1); }

.refmosaik-schleier{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.45) 42%, rgba(0,0,0,.05) 100%);
}

.refmosaik-inhalt{
  position:absolute;
  left:0; right:0; bottom:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:24px 26px 26px;
  color:var(--white);
}
.refmosaik-kicker{
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--akzent);
  display:flex;
  align-items:center;
  gap:9px;
}
.refmosaik-kicker::before{
  content:"";
  width:18px; height:3px;
  background:var(--akzent);
  transition:width .25s ease;
}
.refmosaik-btn:hover .refmosaik-kicker::before{ width:34px; }

.refmosaik-name{
  font-size:26px;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.015em;
}
.refmosaik-claim{
  font-size:15px;
  line-height:1.4;
  color:rgba(255,255,255,.82);
  max-width:34ch;
}

/* =====================================================
   VARIANTE C - geschlossene Referenzkarten
   Jede Referenz ist eine Karte mit feinem Rahmen: oben das Foto, unten
   links halb darüber die Logobox wie ein Etikett, darunter die
   Leistungen. Beim Überfahren läuft oben
   die gelbe Kante ein - wie bei den Leistungskarten (.offer).
   Der Kundenname steht nur noch unsichtbar als Überschrift im Markup
   (für Suchmaschinen und Screenreader) - sichtbar ist das Logo.
   ===================================================== */
.refgrid--c{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:34px 28px;
}

.refkunde{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--white);
  border:1px solid #e6e2da;
  transition:box-shadow .3s, transform .3s cubic-bezier(.2,.7,.2,1);
}
.refkunde[hidden]{ display:none; }
/* gelbe Oberkante, die beim Überfahren über die ganze Karte läuft */
.refkunde::before{
  content:"";
  position:absolute;
  top:-1px; left:-1px;
  z-index:3;
  width:0;
  height:4px;
  background:var(--yellow);
  transition:width .4s cubic-bezier(.2,.7,.2,1);
}
.refkunde:hover,
.refkunde:focus-within{ box-shadow:0 18px 38px rgba(0,0,0,.1); transform:translateY(-3px); }
.refkunde:hover::before,
.refkunde:focus-within::before{ width:calc(100% + 2px); }

.refkunde-name{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* --- Foto mit Logo-Etikett --- */
.refkunde-kopf{ position:relative; }
.refkunde-bild{
  position:relative;
  overflow:hidden;
  aspect-ratio:4 / 3;
  background:#eee;
}
.refkunde-bild img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.refkunde:hover .refkunde-bild img,
.refkunde:focus-within .refkunde-bild img{ transform:scale(1.05); }

.refkunde-logo{
  position:absolute;
  left:20px;
  bottom:-50px;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:180px;
  max-width:calc(100% - 40px);
  height:100px;
  padding:0 24px;
  background:var(--white);
  border:1px solid #e6e2da;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
}
.refkunde-logo img{
  display:block;
  max-width:100%;
  max-height:48px;
  width:auto;
  height:auto;
}
/* weisse Logos (logogrund 'dunkel') stehen in einer schwarzen Box */
.refkunde-logo--feld-dunkel{ background:#131313; border-color:#131313; }
/* ohne Logodatei steht der Name als Schriftzug im Etikett */
.refkunde-logo--text{
  font-family:var(--font-cond);
  font-weight:900;
  font-size:18px;
  text-transform:uppercase;
  color:var(--black);
}

/* --- Leistungen --- */
.refkunde-info{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:6px 16px;
  flex-wrap:wrap;
  /* Platz für die untere Hälfte des Logo-Etiketts */
  padding:70px 22px 24px;
}
.refkunde-leistungen{
  margin:0;
  font-size:12px;
  font-weight:600;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:#6b6b6b;
}
.refkunde-leistungen span + span::before{
  content:"·";
  margin:0 7px;
  color:var(--yellow);
  font-weight:900;
}

/* Unsichtbarer Knopf über der ganzen Karte - alles ist anklickbar */
.refkunde-flaeche{
  position:absolute;
  inset:0;
  z-index:4;
  appearance:none;
  border:0;
  background:transparent;
  cursor:pointer;
  font:inherit;
  color:transparent;
}
.refkunde-flaeche:focus-visible{ outline:3px solid var(--yellow); outline-offset:4px; }

/* =====================================================
   DIE THEMENWELT
   Das dunkle Fenster über der Seite. Beide Varianten benutzen es,
   es unterscheidet sich nur im Aufbau des Inhalts.
   ===================================================== */
html.tw-offen{ overflow:hidden; }

.tw{
  position:fixed;
  inset:0;
  z-index:9990;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .24s ease;
}
.tw[hidden]{ display:none !important; }
.tw.is-offen{ opacity:1; }

.tw-hintergrund{
  position:absolute; inset:0;
  background:rgba(4,4,4,.86);
  backdrop-filter:blur(3px);
  cursor:pointer;
}

.tw-fenster{
  --akzent: var(--yellow);
  position:relative;
  display:flex;
  flex-direction:column;
  width:min(1560px, calc(100vw - 48px));
  height:min(92vh, 1000px);
  background:#0c0c0c;
  color:var(--white);
  border-top:4px solid var(--akzent);
  box-shadow:0 40px 90px rgba(0,0,0,.6);
  transform:translateY(14px) scale(.985);
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
  overflow:hidden;
}
.tw.is-offen .tw-fenster{ transform:none; }

.tw-rollbahn{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#3a3a3a #0c0c0c;
}
.tw-rollbahn:focus{ outline:none; }
.tw-rollbahn::-webkit-scrollbar{ width:10px; }
.tw-rollbahn::-webkit-scrollbar-track{ background:#0c0c0c; }
.tw-rollbahn::-webkit-scrollbar-thumb{ background:#333; }

/* --- Kopfleiste ---
   Eigene Zeile über dem Inhalt. Frei schwebende Pfeile am Bildrand
   lagen über dem Text und über den Bildern - hier stören sie nie. */
.tw-kopfleiste{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  height:58px;
  padding:0 10px 0 26px;
  border-bottom:1px solid rgba(255,255,255,.13);
  background:#0c0c0c;
}
.tw-zaehler{
  margin:0;
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
}
.tw-zaehler-nr{ color:var(--akzent); font-weight:700; }

.tw-knoepfe{ display:flex; gap:6px; }
.tw-knopf{
  appearance:none;
  width:42px; height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.22);
  background:transparent;
  color:var(--white);
  font-size:26px;
  line-height:1;
  cursor:pointer;
  transition:background-color .16s, border-color .16s, color .16s;
}
.tw-knopf:hover{ background:var(--akzent); border-color:var(--akzent); color:#0c0c0c; }
.tw-knopf:focus-visible{ outline:3px solid var(--yellow); outline-offset:2px; }
.tw-knopf--zu{ font-size:30px; margin-left:8px; }

/* =====================================================
   Inhalt der Themenwelt
   ===================================================== */
.tw-inhalt{ display:grid; }

.tw-logo{
  display:flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  justify-self:start;
  min-height:38px;
  margin-bottom:22px;
}
.tw-logo img{ max-height:38px; width:auto; display:block; }
/* Ein dunkles Logo bekommt auf dem schwarzen Grund ein weisses Feld,
   ein weisses Logo steht frei. */
.tw-logo--feld-hell{ background:var(--white); padding:10px 14px; }
.tw-logo--feld-dunkel{ background:#131313; padding:10px 14px; }
.tw-logo--text{
  font-size:15px;
  font-weight:800;
  letter-spacing:.02em;
  color:#0c0c0c;
  background:var(--white);
  padding:9px 14px;
  line-height:1.1;
}

.tw-kicker{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--akzent);
}
.tw-kicker-strich{ width:26px; height:3px; background:var(--akzent); flex:none; }

.tw-name{
  margin:0 0 14px;
  font-size:40px;
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.tw-claim{
  margin:0 0 20px;
  font-size:21px;
  line-height:1.35;
  color:var(--akzent);
}
.tw-text{ color:rgba(255,255,255,.76); }
.tw-text p{ margin:0; font-size:16px; line-height:1.62; max-width:46ch; }

.tw-tags{
  display:flex; flex-wrap:wrap; gap:7px;
  list-style:none;
  margin:24px 0 0; padding:0;
}
.tw-tags li{
  font-size:12px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.22);
  padding:4px 10px;
}
.tw-jahr{
  margin:18px 0 0;
  font-size:13px;
  letter-spacing:.06em;
  color:rgba(255,255,255,.45);
}

/* --- Die Collage --- */
.tw-collage{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:170px;
  grid-auto-flow:dense;
  gap:12px;
}
.tw-kachel{ margin:0; position:relative; min-width:0; }
.tw-kachel--gross{ grid-column:span 2; grid-row:span 2; }
/* Panorama: doppelt breit, normale Höhe. Website-Header und Bilder im
   Format 3:1 würden als Quadrat nur noch aus der Bildmitte bestehen. */
.tw-kachel--breit{ grid-column:span 2; }

.tw-kachel-btn{
  position:relative;
  display:block;
  width:100%; height:100%;
  padding:0; border:0;
  background:#161616;
  overflow:hidden;
  cursor:zoom-in;
}
.tw-kachel-btn img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .45s ease, opacity .25s ease;
}
.tw-kachel-btn:hover img{ transform:scale(1.05); opacity:.88; }
.tw-kachel-btn:focus-visible{ outline:3px solid var(--yellow); outline-offset:-3px; }

.tw-play{
  position:absolute;
  top:50%; left:50%;
  width:60px; height:60px;
  margin:-30px 0 0 -30px;
  border:3px solid var(--white);
  border-radius:50%;
  background:rgba(0,0,0,.42);
  transition:background-color .18s, border-color .18s;
}
.tw-play::after{
  content:"";
  position:absolute;
  top:50%; left:54%;
  transform:translate(-50%,-50%);
  border-left:17px solid var(--white);
  border-top:11px solid transparent;
  border-bottom:11px solid transparent;
}
.tw-kachel-btn:hover .tw-play{ background:var(--akzent); border-color:var(--akzent); }
.tw-kachel-btn:hover .tw-play::after{ border-left-color:#0c0c0c; }

.tw-marke{
  position:absolute;
  left:10px; bottom:10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#0c0c0c;
  background:var(--akzent);
  padding:3px 8px;
}

.tw-kachel-titel{
  margin:7px 0 0;
  font-size:12.5px;
  letter-spacing:.02em;
  color:rgba(255,255,255,.5);
}

/* --- Aufbau A: Text links, Collage rechts --- */
.tw--a .tw-inhalt{
  grid-template-columns:380px 1fr;
  gap:52px;
  padding:44px 48px 56px;
  align-items:start;
}
.tw--a .tw-kopf{ position:sticky; top:0; }

/* --- Aufbau B: Kopf über der ganzen Breite, Collage darunter --- */
.tw--b .tw-inhalt{
  grid-template-columns:1fr;
  gap:40px;
  padding:48px 48px 56px;
}
.tw--b .tw-kopf{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 56px;
  align-items:end;
  border-bottom:1px solid rgba(255,255,255,.14);
  padding-bottom:34px;
}
.tw--b .tw-logo{ grid-column:1; grid-row:1; margin-bottom:8px; }
.tw--b .tw-kicker{ grid-column:1; grid-row:2; margin-bottom:4px; }
.tw--b .tw-name{ grid-column:1; grid-row:3; font-size:56px; margin-bottom:8px; }
.tw--b .tw-claim{ grid-column:1; grid-row:4; font-size:24px; margin:0; }
.tw--b .tw-text{ grid-column:2; grid-row:2 / span 3; align-self:end; }
.tw--b .tw-text p{ max-width:52ch; }
.tw--b .tw-tags{ grid-column:2; grid-row:5; margin-top:18px; }
.tw--b .tw-jahr{ grid-column:1; grid-row:5; margin-top:22px; align-self:center; }
.tw--b .tw-collage{ grid-auto-rows:200px; }

/* =====================================================
   Lupe - ein einzelnes Medium gross
   ===================================================== */
.tw-lupe{
  position:absolute;
  inset:0;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px;
  background:rgba(4,4,4,.94);
  opacity:0;
  transition:opacity .2s ease;
  cursor:zoom-out;
}
.tw-lupe[hidden]{ display:none !important; }
.tw-lupe.is-offen{ opacity:1; }

.tw-lupe-buehne{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  max-width:100%;
  max-height:100%;
}
.tw-lupe-medium{
  max-width:min(1200px, 100%);
  max-height:76vh;
  width:auto; height:auto;
  display:block;
  background:#111;
  cursor:default;
}
.tw-lupe-medium--video{ width:min(1200px, 100%); }

/* YouTube und Vimeo liefern einen iframe - der braucht ein Seitenformat,
   sonst hat er keine Höhe. */
.tw-lupe-rahmen{
  position:relative;
  width:min(1200px, 100%);
  aspect-ratio:16 / 9;
  max-height:76vh;
  background:#111;
  cursor:default;
}
.tw-lupe-rahmen iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}
.tw-lupe-titel{
  margin:0;
  font-size:14px;
  letter-spacing:.04em;
  color:rgba(255,255,255,.66);
  text-align:center;
}
.tw-lupe-titel--hinweis{ color:var(--yellow); }

.tw-lupe-zu{
  position:absolute;
  top:16px; right:16px;
  width:46px; height:46px;
  appearance:none;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(12,12,12,.8);
  color:var(--white);
  font-size:30px;
  line-height:1;
  cursor:pointer;
}
.tw-lupe-zu:hover{ background:var(--yellow); border-color:var(--yellow); color:#0c0c0c; }
.tw-lupe-zu:focus-visible{ outline:3px solid var(--yellow); outline-offset:2px; }

/* =====================================================
   Variantenschalter - nur für die Abstimmung, fliegt später raus
   ===================================================== */
.varianten{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin:0 0 34px;
  padding:12px 16px;
  border:1px dashed #c9c4b9;
  background:#faf8f4;
  font-size:14px;
}
.varianten b{ font-weight:700; }
.varianten a{
  color:var(--black);
  text-decoration:none;
  border-bottom:2px solid var(--yellow);
  padding-bottom:1px;
}
.varianten a:hover{ color:#6d6a63; }
.varianten .ist-hier{ border-bottom-color:transparent; color:#8d8a83; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width:1100px){
  .refgrid--a,
  .refgrid--c{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
  .refgrid--b{ grid-template-columns:repeat(2,1fr); }
  .ref-ecken{ inset:11px; }
  .ref-ecken i{ width:18px; height:18px; border-width:3px; }

  .tw-fenster{ width:calc(100vw - 24px); height:94vh; }
  .tw--a .tw-inhalt{ grid-template-columns:1fr; gap:34px; padding:40px 28px 40px; }
  .tw--a .tw-kopf{ position:static; }
  .tw--b .tw-inhalt{ padding:40px 28px 40px; }
  .tw--b .tw-kopf{ grid-template-columns:1fr; gap:14px; }
  .tw--b .tw-logo,
  .tw--b .tw-kicker,
  .tw--b .tw-name,
  .tw--b .tw-claim,
  .tw--b .tw-text,
  .tw--b .tw-tags,
  .tw--b .tw-jahr{ grid-column:1; grid-row:auto; }
  .tw--b .tw-name{ font-size:40px; }
  .tw--b .tw-claim{ font-size:21px; }
  .tw-collage{ grid-template-columns:repeat(3,1fr); grid-auto-rows:150px; }
  .tw--b .tw-collage{ grid-auto-rows:150px; }
}

@media (max-width:900px){
  .tw-kopfleiste{ height:52px; padding-left:18px; }
  .tw-knopf{ width:38px; height:38px; font-size:23px; }
  .tw-name{ font-size:32px; }
  .tw-claim{ font-size:19px; }
  .refmosaik-name{ font-size:22px; }
}

@media (max-width:600px){
  .refgrid--a,
  .refgrid--c{ grid-template-columns:minmax(0,1fr); gap:20px; }
  .refgrid--b{ grid-template-columns:1fr; grid-auto-rows:170px; }
  .refmosaik,
  .refmosaik:nth-child(4n+1),
  .refmosaik:nth-child(4n+4){ grid-row:span 2; }

  .reffilter{ margin-bottom:30px; }
  .reffilter-bereiche{ gap:2px 4px; }
  .reffilter-bereich{ font-size:16px; }
  .reffilter-leistungen{ gap:0 22px; }
  .reffilter-btn{ margin-top:12px; font-size:12px; letter-spacing:1.6px; }

  .tw-fenster{ width:100vw; height:100vh; border-top-width:3px; }
  .tw--a .tw-inhalt,
  .tw--b .tw-inhalt{ padding:30px 16px 32px; gap:26px; }
  .tw-kopfleiste{ height:50px; padding:0 8px 0 14px; }
  .tw-zaehler{ font-size:11px; letter-spacing:.06em; }
  .tw-collage{ grid-template-columns:repeat(2,1fr); grid-auto-rows:130px; gap:8px; }
  .tw--b .tw-collage{ grid-auto-rows:130px; }
  /* Auf zwei Spalten wird aus "doppelt breit" die volle Breite -
     für Panoramen genau richtig, für die grossen Kacheln zu wuchtig. */
  .tw-kachel--gross{ grid-row:span 1; }
  .tw-name,
  .tw--b .tw-name{ font-size:27px; }
  .tw-claim,
  .tw--b .tw-claim{ font-size:18px; }
  .tw-lupe{ padding:16px; }
  .tw-lupe-medium{ max-height:70vh; }
}

@media (prefers-reduced-motion:reduce){
  .tw,
  .tw-fenster,
  .tw-lupe,
  .refkarte-btn,
  .refkarte-bild img,
  .refmosaik-bild,
  .tw-kachel-btn img,
  .ref-ecken i,
  .refkunde,
  .refkunde-bild img,
  .reffilter-ebene,
  .reffilter-btn{ transition:none !important; }
  .reffilter-btn{ transform:none; }
  .refkunde:hover,
  .refkunde:focus-within{ transform:none; }
  .tw-fenster{ transform:none !important; }
  .refkarte-btn:hover{ transform:none; }
}