/* =============================================================================
   Mini Cafe · Entwürfe v2 · Über uns – nur eigene Bausteine dieser Seite.
   Fassung 2: kein Bogen mehr (Mahdi 1.7.2). Nur Rollen-Variablen aus basis.css. Neue Bausteine:
   .uu-mosaik (drei ruhige Rechtecke), .uu-event (Karte), .uu-gruppe (Gruppenbild, Rechteck),
   .uu-bew (Bewertungs-Platzhalter), .uu-fakten, .uu-kontakt, .uu-karte (Karte erst nach Klick).
   ============================================================================= */

html[data-look] .abschnitt-kopf:has(> .abzeichen) { flex-direction: column; align-items: flex-start; gap: 12px; }
@media (min-width: 1024px) { html[data-look] .abschnitt-kopf:has(> .abzeichen) { flex-direction: row; align-items: flex-end; gap: 24px; } }

/* ---------- Startbild: Text + Mosaik aus drei Rechtecken --------------------- */
.uu-hero { display: grid; gap: var(--a-4); padding-bottom: 0; }
.uu-gruppe--hero { order: -1; }
.uu-mosaik-zeile { padding-top: var(--a-6); }
.uu-mosaik-zeile .uu-mosaik { max-width: 1100px; margin: 0 auto; aspect-ratio: 3 / 1.1; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr; }
.uu-mosaik-zeile .uu-m1 { grid-row: auto; }
@media (max-width: 1023px) { .uu-mosaik-zeile .uu-mosaik { aspect-ratio: 1 / 1; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr 1fr; } .uu-mosaik-zeile .uu-m1 { grid-row: 1 / 3; } }
.uu-hero-text { min-width: 0; }
.uu-fakten { display: grid; gap: 10px; margin-top: 22px; }
.uu-fakten li { display: flex; align-items: center; gap: 12px; font: 500 var(--gr-text)/1.3 var(--schrift); }
.uu-fakten .symbol { width: 22px; height: 22px; color: var(--haupt); }
html[data-look="dunkel"] .uu-fakten .symbol { color: var(--akzent); }
.uu-kontakt { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 26px; }
.uu-sozial { display: flex; gap: 10px; }
.uu-sozial .rund { width: 48px; height: 48px; background: var(--flaeche); }
html[data-look="dunkel"] .uu-sozial .rund { background: var(--flaeche-tief); }
.uu-mosaik { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; aspect-ratio: 1 / 1; min-width: 0; }
.uu-m { position: relative; margin: 0; overflow: hidden; border-radius: var(--rund-foto); background: var(--flaeche-tief); }
.uu-m > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.uu-m1 { grid-row: 1 / 3; }
.uu-m1 > img { object-position: 38% 50%; }
.uu-m2 > img { object-position: 50% 45%; }
.uu-m3 > img { object-position: 62% 40%; }
@media (min-width: 1024px) {
  .uu-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; align-items: center; padding-top: var(--a-2); }
  .uu-gruppe--hero { order: 0; max-width: 620px; justify-self: end; }
  .uu-mosaik { max-width: 660px; justify-self: end; width: 100%; gap: 14px; aspect-ratio: 1.05 / 1; }
  .uu-kontakt { margin-top: 34px; }
  .uu-fakten { margin-top: 32px; gap: 14px; }
}

/* ---------- Texte ----------------------------------------------------------- */
.uu-text { min-width: 0; align-content: start; }
.uu-text p { max-width: 36em; font-size: var(--gr-text); line-height: 1.55; }
.uu-text > p:first-of-type { font-size: var(--gr-lead); }
.uu-text .uu-klein { font-size: var(--gr-klein); color: var(--text-neben); }
.uu-text > .abzeichen, .uu-text > div > .abzeichen { justify-self: start; }
.uu-klaeren { display: grid; gap: 10px; justify-items: start; padding: 18px 20px; border-radius: var(--rund-karte); background: var(--flaeche); }
.uu-klaeren p { font-size: var(--gr-klein); color: var(--text-neben); }
.uu-text .stapel { gap: var(--a-3); }
@media (min-width: 1024px) {
  .uu-zwei { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 80px; }
  .uu-text { gap: var(--a-4); }
}

/* ---------- Geschichte + Woher unser Kaffee ------------------------------------- */
.uu-bild { position: relative; margin: 0; overflow: hidden; border-radius: var(--rund-gross); background: var(--flaeche-tief); }
.uu-bild > img { width: 100%; height: 100%; object-fit: cover; }
.uu-geschichte, .uu-kaffee { align-items: center; gap: var(--a-8); }
.uu-bild--geschichte { aspect-ratio: 4 / 3; }
.uu-kaffee-bilder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.uu-kaffee-bilder .uu-bild { aspect-ratio: 4 / 5; }
.uu-kaffee-bilder .uu-bild:nth-child(2) { margin-top: 28px; }
.uu-kaffee-bilder .uu-bild:nth-child(1) > img { object-position: 50% 62%; }
.uu-zeichen { gap: 8px; }
@media (min-width: 1024px) {
  .uu-geschichte { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 96px; }
  .uu-bild--geschichte { aspect-ratio: 5 / 4; }
  .uu-kaffee { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 96px; }
  .uu-kaffee-bilder { gap: 20px; }
  .uu-kaffee-bilder .uu-bild:nth-child(2) { margin-top: 48px; }
}

/* ---------- Events ------------------------------------------------------------- */
.uu-events { display: grid; gap: 16px; margin-top: 20px; }
.uu-event { display: flex; flex-direction: column; border-radius: var(--rund-karte); background: var(--flaeche); overflow: hidden; }
.uu-event-bild { position: relative; aspect-ratio: 16 / 10; background: var(--flaeche-tief); overflow: hidden; }
.uu-event-bild > img { width: 100%; height: 100%; object-fit: cover; }
.uu-event-bild--zeichen { display: grid; place-items: center; align-content: center; gap: 14px; }
.uu-baum { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: var(--flaeche); }
.uu-baum .symbol { width: 52px; height: 52px; stroke-width: 1.5; }
.uu-event-text { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 22px 24px; }
.uu-event-text p:not(.uu-datum) { font-size: var(--gr-klein); line-height: 1.5; color: var(--text-neben); }
html[data-look="dunkel"] .uu-event-text p:not(.uu-datum) { font-size: 16px; }
.uu-event-text .knopf { margin-top: auto; }
.uu-event-text > :nth-last-child(2) { margin-bottom: 6px; }
.uu-datum { display: flex; align-items: center; gap: 8px; font: 600 15px/1.2 var(--schrift); color: var(--text-neben); }
.uu-datum .symbol { width: 20px; height: 20px; }
.uu-merkmale { gap: 8px; }
.uu-merkmale .abzeichen { height: 30px; font-size: 14px; }
.uu-event.uu-ziel { animation: uu-hervor 1.4s var(--kurve-gleiten); }
@keyframes uu-hervor { 0% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--akzent) 70%, transparent); } 100% { box-shadow: 0 0 0 7px transparent; } }
@media (min-width: 1024px) {
  .uu-events { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
  .uu-event-text { padding: 28px 30px 32px; gap: 14px; }
}

/* ---------- Gruppenbild (Rechteck, höchstens ~500 px: das Original ist 975 px breit) ------- */
.uu-erinnerung { align-items: center; }
.uu-gruppe { width: 100%; max-width: 500px; margin: 0; }
.uu-gruppe-rahmen { overflow: hidden; border-radius: var(--rund-gross); background: var(--flaeche-tief); }
.uu-gruppe-rahmen > img { width: 100%; height: auto; aspect-ratio: 975 / 728; object-fit: cover; }
.uu-gruppe figcaption { margin-top: 14px; font-size: var(--gr-klein); color: var(--text-neben); }
@media (min-width: 1024px) {
  .uu-erinnerung { grid-template-columns: minmax(0, 1fr) 500px; justify-content: space-between; }
}

/* ---------- Bewertungen (nur Platzhalter) ------------------------------------------ */
.uu-bewertungen { display: grid; gap: 12px; margin-top: 20px; }
.uu-bew { display: grid; gap: 14px; align-content: start; padding: 22px; border: 1.5px dashed var(--text-still); border-radius: var(--rund-karte); }
.uu-sterne { display: flex; gap: 4px; color: var(--text-neben); }
.uu-sterne .symbol { width: 22px; height: 22px; }
.uu-bew-text { font-size: var(--gr-klein); color: var(--text-neben); }
.uu-zeilen { display: grid; gap: 9px; }
.uu-zeilen i { display: block; height: 10px; border-radius: 5px; background: var(--flaeche-tief); }
.uu-zeilen i:nth-child(1) { width: 100%; } .uu-zeilen i:nth-child(2) { width: 88%; } .uu-zeilen i:nth-child(3) { width: 58%; }
.uu-bew-name { font: 600 15px/1.2 var(--schrift); color: var(--text-neben); }
@media (min-width: 1024px) {
  .uu-bewertungen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
  .uu-bew { padding: 30px; }
}

/* ---------- Anfahrt: Fassadenfoto, Route planen ------------------------------------ */
.uu-anfahrt { align-items: center; gap: var(--a-8); }
.uu-karte-spalte { display: grid; gap: 14px; min-width: 0; }
.uu-karte-titel { font: var(--gewicht-stark) var(--gr-name)/1.2 var(--schrift); }
.uu-karte { position: relative; aspect-ratio: 4 / 3; border-radius: var(--rund-gross); overflow: hidden; background: var(--flaeche-tief); }
.uu-karte > img { width: 100%; height: 100%; object-fit: cover; }
.uu-karte > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.uu-karte-aktion { display: grid; gap: 12px; }
.uu-karte-hinweis { font-size: var(--gr-klein); line-height: 1.4; color: var(--text-neben); max-width: 34em; }
.uu-karte-aktion .knopf .symbol { width: 20px; height: 20px; }
.uu-oeffi li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; }
.uu-oeffi .symbol { width: 22px; height: 22px; margin-top: 2px; color: var(--haupt); }
html[data-look="dunkel"] .uu-oeffi .symbol { color: var(--akzent); }
.uu-oeffi-name { font-weight: var(--gewicht-stark); margin-bottom: 6px; }
@media (min-width: 1024px) {
  .uu-anfahrt { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 96px; }
}

/* Abzeichen in Textspalten nicht über die ganze Breite ziehen */
.uu-text.stapel > .abzeichen, .uu-text.stapel > div > .abzeichen { align-self: flex-start; }
.uu-text > div { min-width: 0; }
html[data-look="dunkel"] .uu-merkmale .abzeichen { background: var(--flaeche-tief); }

/* größere Hauptüberschrift am Computer */
@media (min-width: 1024px) { .uu-hero h1 { font-size: clamp(56px, 6.4vw, 96px); } .uu-event-text p:not(.uu-datum), .uu-bew-text, .uu-klaeren p { font-size: 16px; } }

/* Flyer-Karte (BMW): Ausschnitt mit den Autos */
.uu-event-bild--flyer > img { object-position: 50% 50%; }
.uu-event-bild > img[src*="matcha"] { object-position: 50% 55%; }