/* Rahmen der Rehfeldt & Massing GbR um die vier Demonstrationen.
   Wird zuletzt geladen: Schriften, Marke, Demo-Leiste, Fußbereiche, Korrekturen. */

/* Schriften: Gestaltet ist die Seite mit Segoe UI und Georgia. Wo diese installiert sind
   (Windows; Georgia auch auf Mac und iPhone), zeichnet der Browser sie sofort. Fehlen sie
   (Android, Linux; Segoe UI auch auf Apple-Geräten), springen laufweitengleiche freie Schriften
   ein (Selawik, Gelasio; SIL OFL 1.1), damit Zeilenumbrüche überall gleich bleiben. Die
   unicode-range verhindert, dass sie nur wegen eines Sonderzeichens nachgeladen werden. */
@font-face{font-family:"Selawik";font-style:normal;font-weight:300;font-display:swap;src:url("fonts/selawik-light.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Selawik";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/selawik.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Selawik";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/selawik-semibold.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Selawik";font-style:normal;font-weight:700 900;font-display:swap;src:url("fonts/selawik-bold.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Gelasio";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/gelasio.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Gelasio";font-style:italic;font-weight:400 700;font-display:swap;src:url("fonts/gelasio-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"RM Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url("fonts/spacegrotesk.woff2") format("woff2")}

:root{
  --sans:"Segoe UI",Selawik,Arial,sans-serif;
  --serif:Georgia,Gelasio,"Times New Roman",serif;
  --rm-sand:#e8e4dd;
  --rm-orange:#e8541e;
  --rm-orange-lite:#ff8a4a;
  --rm-steel:#22303d;
  --rm-ground:#111211;
  --rm-text:#efeee6;
  --rm-muted:#aeafa6;
  --rm-line:#ffffff1f
}

/* Bildrahmen: <picture> nimmt keine eigene Box ein, das Bild liegt wie zuvor direkt im Container. */
picture{display:contents}

/* Marke: Zeichen + Wortmarke wie auf rehfeldt-massing.de */
.rm-brand{display:inline-flex;align-items:center;gap:12px;color:var(--rm-sand);text-decoration:none;flex-shrink:0;line-height:1}
.rm-mark{width:32px;height:32px;flex:none;display:block}
.rm-word{font-family:"RM Grotesk",var(--sans);font-weight:700;font-size:15px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.rm-word b{color:var(--rm-orange-lite);font-weight:700}
a.rm-brand:hover .rm-word,a.rm-brand:focus-visible .rm-word{color:#fff}
.rm-brand:focus-visible,.rm-links a:focus-visible,.rm-cta:focus-visible,.demo-bar a:focus-visible,.motion-control:focus-visible{outline:2px solid var(--rm-orange-lite);outline-offset:3px}

/* Startseite: Kopf */
.showroom-header .rm-tools{display:flex;align-items:center;gap:18px}
.showroom-header .header-link span{margin-left:6px}

/* Bewegungsschalter: sitzt in Kopf bzw. Demo-Leiste statt über dem Inhalt zu schweben. */
.motion-slot{display:contents}
.motion-slot .motion-control{position:static;inset:auto;z-index:auto;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:transparent;border-color:#ffffff38;padding:6px 12px;font-size:.72rem;gap:8px;color:var(--rm-text);cursor:pointer;white-space:nowrap}
.motion-slot .motion-control:hover{border-color:#ffffff70}
.motion-slot .motion-control:disabled{cursor:default;opacity:.8}

/* Demo-Leiste über jedem Beispiel */
.demo-bar{position:relative;z-index:30;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;height:auto;min-height:48px;padding:6px var(--gutter);background:var(--rm-ground);color:var(--rm-text);font-family:var(--sans);font-size:.75rem;letter-spacing:0;border-bottom:1px solid var(--rm-line)}
body[data-page="restaurant"] .demo-bar{padding-inline:var(--gastro-gutter)}
.demo-bar>a,.demo-bar a{color:var(--rm-text);text-decoration:none}
.demo-bar .demo-back{justify-self:start;display:inline-flex;align-items:center;gap:9px;min-height:36px}
.demo-bar .demo-center{justify-self:center;display:inline-flex;align-items:center;gap:14px;letter-spacing:0;font-size:inherit}
.demo-bar .demo-center .rm-mark{width:20px;height:20px}
.demo-bar .demo-center .rm-brand{gap:9px}
.demo-bar .demo-center .rm-word{font-size:11.5px}
/* ältere Regeln für .demo-bar b / >span / >a (Showroom-Fassung) nicht auf die Marke durchschlagen lassen */
.demo-bar .rm-word b{display:inline;border:0;margin:0;padding:0;font-size:inherit;letter-spacing:inherit;font-weight:700;color:var(--rm-orange-lite)}
body[data-page] .demo-bar{font-size:.75rem}
body[data-page] .demo-bar>a.demo-back,body[data-page] .demo-bar>.demo-center,body[data-page] .demo-bar>.demo-tools{font-size:inherit;letter-spacing:0;min-width:0}
.demo-bar .demo-label{color:var(--rm-muted);font-size:.7rem;letter-spacing:.04em;border-left:1px solid #ffffff2e;padding-left:14px}
.demo-bar .demo-tools{justify-self:end;display:inline-flex;align-items:center;gap:14px;font-size:inherit;letter-spacing:0}
.demo-bar .demo-next{display:inline-flex;align-items:center;gap:8px;min-height:36px}
.demo-bar .demo-back:hover .demo-text,.demo-bar .demo-next:hover .demo-text{text-decoration:underline;text-underline-offset:3px}

/* Fußstreifen unter jedem Beispiel */
.rm-strip{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;padding:24px var(--gutter);background:var(--rm-ground);color:var(--rm-muted);font-family:var(--sans);font-size:.8rem;line-height:1.5;border-top:1px solid var(--rm-line)}
body[data-page="restaurant"] .rm-strip{padding-inline:var(--gastro-gutter)}
.rm-strip .rm-mark{width:22px;height:22px}
.rm-strip .rm-brand{gap:10px}
.rm-strip .rm-word{font-size:12px}
.rm-strip p{margin:0;flex:1 1 280px;color:var(--rm-muted)}
.rm-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px}
.rm-links a,.rm-links .text-link{color:var(--rm-text);text-decoration:none;font:inherit;font-size:.8rem;background:none;border:0;padding:0;cursor:pointer}
.rm-links a:hover,.rm-links .text-link:hover{text-decoration:underline;text-underline-offset:3px}

/* Startseite: Fuß */
.showroom-footer.rm-footer{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;padding:40px var(--gutter) 64px}
.rm-footer .rm-footer-note{margin:0;flex:1 1 240px;color:var(--rm-muted);font-size:.8rem}
.rm-footer .rm-links .text-link{margin:0}

/* Startseite: Handlungsknöpfe unter „Der Gedanke dahinter“ */
.rm-cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.rm-cta{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:12px 22px;border-radius:999px;background:var(--rm-sand);color:#131413;font-size:.9rem;font-weight:600;text-decoration:none;transition:background .2s var(--ease),transform .2s var(--ease)}
.rm-cta:hover{background:#fff;transform:translateY(-1px)}
.rm-cta-ghost{background:transparent;color:var(--rm-text);border:1px solid #ffffff45;font-weight:400}
.rm-cta-ghost:hover{background:#ffffff12}

/* Nur für Vorleseprogramme sichtbar */
.rm-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Abspielknöpfe sind bei ausgeschalteter Bewegung wirkungslos und deshalb gesperrt */
[data-bake-play]:disabled,.hero-look-picker .look-play:disabled{opacity:.45;cursor:default}

/* Touch-Geräte: Der erste Tipp auf eine Karte öffnet das Beispiel. Ohne diese Regel zeigt iOS bei Inhalten,
   die erst beim Überfahren erscheinen, zunächst nur den Überfahr-Zustand. */
@media (hover:none){
  .world-card:hover{flex:1}
  .world-card:hover .world-bottom{transform:none}
  .world-card:hover .card-discover{opacity:0;transform:translateY(10px)}
}

/* Fehlerbehebung: Leerzeichen bleiben erhalten, wenn Zeilenumbrüche auf dem Handy entfallen;
   erzwungene Umbrüche in Überschriften nur dort, wo die Zeile breit genug ist. */
.showroom-note h2{text-wrap:balance}

/* Neue Markennamen: Größen auf die längeren Wortmarken abgestimmt */
.world-bread h2{font-size:clamp(2rem,2.45vw,3.1rem);letter-spacing:-.07em}
.world-restaurant h2{white-space:normal;line-height:1.02}
.world-restaurant h2>span{vertical-align:top}
.bread-header .bread-logo{font-size:clamp(1.7rem,2.2vw,2.3rem);letter-spacing:-.07em}
.brand-footer>.bread-logo{font-size:1.9rem;letter-spacing:-.07em}
.gastro-logo strong{font-size:1.4rem;letter-spacing:.12em;padding-left:.12em}
.gastro-footer>.gastro-logo strong{font-size:1.3rem}

/* Bäckerei: Die Produktkarte ist ein <article>, „Zurücklegen“ ein echter Knopf (vorher war die ganze Karte
   ein Knopf mit Überschrift und Bild darin – ungültig und für Vorleseprogramme unbrauchbar). Die ganze Karte
   bleibt über das Pseudo-Element klickbar. */
.bread-product{cursor:pointer}
.product-cta{align-self:flex-start;background:none;border:0;padding:0;margin:0;font:inherit;font-size:.8rem;font-weight:600;color:#643523;cursor:pointer;text-align:left}
.product-cta::after{content:"";position:absolute;inset:0;z-index:1}
.product-cta:focus-visible{outline:none}
.product-cta:focus-visible::after{outline:2px solid #643523;outline-offset:-6px}

/* Fußzeilen der Beispiele: Der untere Zusatzabstand war für den früher schwebenden Bewegungsknopf. */
.brand-footer,.gastro-footer{padding-bottom:48px}

/* Bäckerei: eigene Zuschnitte statt desselben Fotos */
.bread-product .product-photo img,.bread-product:nth-child(2) .product-photo img,.bread-product:nth-child(3) .product-photo img{object-position:50% 50%;transform:none}
.bread-product:hover .product-photo img,.bread-product:nth-child(2):hover .product-photo img,.bread-product:nth-child(3):hover .product-photo img{transform:scale(1.06)}

/* Fehlerseite (404) */
.rm-fehler{padding-bottom:90px}
.rm-fehler .rm-cta-row{margin-top:8px}

@media(max-width:1200px) and (min-width:801px){.world-bread h2{font-size:3rem}}
@media(max-width:800px){
  .world-bread h2{font-size:2.35rem}
  .world-restaurant h2{font-size:1.9rem}
}
@media(max-width:600px){
  .rm-br-weit{display:none}
  .showroom-header .rm-tools{gap:12px}
  .showroom-header .rm-mark{width:28px;height:28px}
  .showroom-header .rm-word{font-size:13px}
  .motion-slot .motion-control{padding:7px 10px}
  .motion-slot #motion-state{display:none}
  .motion-slot #motion-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  .demo-bar{grid-template-columns:auto 1fr auto;gap:10px;padding-inline:16px}
  body[data-page="restaurant"] .demo-bar{padding-inline:16px}
  .demo-bar .demo-center{justify-self:center}
  .demo-bar .demo-label,.demo-bar .demo-next .demo-text{display:none}
  .demo-bar .demo-tools{gap:10px}
  /* Wortmarken wachsen mit der Schriftgröße, aber nie über Karte oder Kopfzeile hinaus (Test: 200 % Text). */
  .world-hair h2{font-size:min(2.5rem,16vw)}
  .world-electric h2{font-size:min(2.5rem,13.5vw)}
  .world-restaurant h2{font-size:min(2.4rem,15vw)}
  .world-bread h2{font-size:min(2.55rem,11vw)}
  .brand-header .hair-logo{font-size:min(1.2rem,6.4vw)}
  .brand-header .electric-logo{font-size:min(1.35rem,6.4vw)}
  .bread-header .bread-logo{font-size:min(1.7rem,8vw)}
  .brand-footer>span:first-child{font-size:min(1.25rem,7vw)}
  .brand-footer>.bread-logo{font-size:min(1.9rem,8vw)}
  .electric-closing h2{font-size:min(5.2rem,17vw)}
  .gastro-logo strong{font-size:1.4rem;letter-spacing:.12em;white-space:normal}
  /* Name bricht wie im Original zweizeilig um, damit „Reservieren“ daneben Platz hat */
  .gastro-header .gastro-logo strong{width:min-content;line-height:1.08}
  .rm-strip{gap:12px 20px;font-size:.78rem}
  .showroom-footer.rm-footer{padding:32px var(--gutter) 48px}
}
@media(max-width:380px){
  .demo-bar .demo-back .demo-text{display:none}
  .showroom-header .header-link{display:none}
}
@media(max-width:360px){
  .world-electric h2{font-size:min(2.15rem,13.5vw)}
  .world-bread h2{font-size:min(2.1rem,11vw)}
}
@media(prefers-reduced-motion:reduce){.rm-cta{transition:none}.rm-cta:hover{transform:none}}