/* ---------------------------------------------------------------
   RUHS-Prototyp – Design 2 „LUCCINO dunkel“ (Entwürfe „Preislistendownload“, „Unser Team“,
   „Winterkollektion 2026“ des Kunden). Wird NACH ruhs.css geladen und überschreibt nur,
   was anders ist. Alle Farben stehen nur hier oben als Variablen.
   --------------------------------------------------------------- */
:root {
  --grund: #F5EFE6;
  --flaeche: #ECE3D7;
  --flaeche-tief: #DDD0BF;
  --weiss: #FBF8F3;
  --text: #2E241C;
  --text-leise: #6E6052;
  --gold: #6B5140;
  --gold-dunkel: #4C392B;
  --gold-hell: #C9AE8C;
  --dunkel: #3A2A1F;
  --dunkel-text: #F0E7DB;
  --hauch: rgba(255, 255, 255, .07);
  --verlauf-dunkel: rgba(42, 30, 22, .82);
  --verlauf-klar: rgba(42, 30, 22, 0);
  --tafel-grund: rgba(58, 42, 31, .78);
  /* Webschriften liegen im Theme (css/schriften, Lizenz OFL) – nichts von Google-Servern. Überschriften bleiben am
     Windows-PC Bodoni MT; Handy, iPad und Mac bekommen statt Didot/Georgia die gleich aussehende Bodoni Moda. */
  --schrift: "Cormorant Garamond", Garamond, Georgia, serif;
  --schrift-titel: "Bodoni MT", "Bodoni Moda", Didot, "Book Antiqua", Georgia, serif;
  --schrift-logo: "Bodoni MT", "Bodoni Moda", Didot, "Book Antiqua", Georgia, serif;
  --schrift-schreib: "Segoe Script", "Brush Script MT", "Lucida Handwriting", cursive;
}
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; size-adjust: 118%; src: url("schriften/cormorant-garamond-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; size-adjust: 118%; src: url("schriften/cormorant-garamond-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 700; font-display: swap; size-adjust: 118%; src: url("schriften/cormorant-garamond-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; size-adjust: 118%; src: url("schriften/cormorant-garamond-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400; font-display: swap; src: url("schriften/bodoni-moda-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 500; font-display: swap; src: url("schriften/bodoni-moda-500-normal.woff2") format("woff2"); }

/* Fließtext in Cormorant Garamond: per size-adjust 118 % (kleine Mittellänge) so groß wie vorher Segoe UI, mittelkräftig für gute Lesbarkeit */
body { font-weight: 500; }
strong, b { font-weight: 700; }
.knopf { font-size: .9rem; font-weight: 700; max-width: 100%; hyphens: auto; overflow-wrap: anywhere; }   /* lange Wörter (Handtascheneigenimporte) brechen am Handy um */

/* Kopf */
.l-kopf { background: var(--dunkel); color: var(--dunkel-text); border-bottom: 1px solid var(--gold-dunkel); }
.l-kopf-innen { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px 24px; padding: 22px 28px; }
.l-firma { margin: 0; font-size: .85rem; color: var(--gold-hell); line-height: 1.5; }
.l-firma strong { display: block; font: 400 1.15rem var(--schrift-titel); color: var(--dunkel-text); }
.l-logo { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--dunkel-text); }
.l-logo-wort { font: 400 clamp(2.6rem, 6vw, 4.2rem)/1 var(--schrift-logo); letter-spacing: .05em; }
.l-logo-zeile { font: 400 1.05rem var(--schrift); letter-spacing: .28em; margin-top: 6px; color: var(--gold-hell); }
.l-logo-doppel { flex-direction: row; align-items: center; gap: 28px; }
.l-marke { display: flex; flex-direction: column; align-items: center; }
.l-logo-doppel .l-logo-wort { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.l-logo-doppel .l-logo-zeile { font-size: .85rem; letter-spacing: .22em; }
.l-trenner { width: 1px; align-self: stretch; background: var(--gold-hell); opacity: .6; }
.l-kopf-rechts { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.l-spruch { margin: 0; max-width: 11em; text-align: right; font: 1.35rem/1.25 var(--schrift-schreib); color: var(--gold-hell); transform: rotate(-5deg); }

/* Seitenleiste und Inhalt */
.l-rahmen { display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.l-seite { background: var(--dunkel); color: var(--dunkel-text); padding: 20px 0 48px; display: flex; flex-direction: column; gap: 36px; }
.l-menue { display: flex; flex-direction: column; }
.l-menue a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 24px; text-decoration: none; font-size: 1rem; border-left: 3px solid transparent; }
.l-menue a::after { content: "›"; opacity: .55; }
.l-menue a:hover { background: var(--hauch); }
.l-menue a.aktiv { background: var(--gold); border-left-color: var(--gold-hell); }
.l-menue .l-menue-klein { font-size: .85rem; padding-top: 8px; padding-bottom: 8px; opacity: .75; }
.l-punkte { list-style: none; margin: 0; padding: 22px 24px 0; border-top: 1px solid var(--gold-dunkel); font: 1.05rem/1.9 var(--schrift-titel); color: var(--gold-hell); }
.l-zitat { margin: 0; padding: 0 24px; font: 1.7rem/1.35 var(--schrift-schreib); color: var(--dunkel-text); }
.l-inhalt { min-width: 0; }
.l-inhalt .breite { max-width: 1480px; padding-left: 32px; padding-right: 32px; }

/* Einstieg: Text links, rechts zwei echte Taschen aus den Katalogen mit Markenlogo */
.design-2 .einstieg { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: stretch; background: var(--dunkel); }
.design-2 .einstieg-bild { gap: 14px; padding: 28px 28px 28px 0; }
.design-2 .einstieg-bild .bildflaeche { aspect-ratio: auto; height: clamp(360px, 30vw, 520px); min-height: 0; max-height: none; object-position: 50% 45%; }
.design-2 .einstieg-text { display: flex; flex-direction: column; justify-content: center; padding: 56px 48px; color: var(--weiss); }
.design-2 .einstieg-text h1 { color: var(--weiss); font-size: clamp(2.4rem, 5vw, 3.8rem); max-width: 9em; }
.design-2 .einstieg-text .oberzeile { color: var(--gold-hell); }
.design-2 .einstieg-text p:not(.oberzeile) { font: 1.3rem/1.5 var(--schrift-titel); max-width: 16em; }
.design-2 .einstieg-text .knopf { align-self: flex-start; background: transparent; border: 1px solid var(--weiss); }
.design-2 .einstieg-text .knopf:hover { background: var(--hauch); }
.design-2 .tafel { top: 44px; bottom: auto; right: auto; left: 16px; z-index: 1; width: 150px; height: 150px; border-radius: 50%; border: 1px solid var(--gold-hell); background: var(--tafel-grund); display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; }
.design-2 .tafel .tafel-titel { font-size: 1.05rem; margin: 0; }
.design-2 .tafel p:not(.tafel-titel) { display: none; }
.design-2 .einstieg-figur { flex: 1; min-width: 0; margin: 0; display: flex; flex-direction: column; background: var(--weiss); }
.design-2 .einstieg-figur figcaption { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-leise); }
.design-2 .einstieg-figur .marke-logo { height: 22px; width: auto; }

/* Titel, Karten, Knöpfe */
.design-2 h1, .design-2 h2, .design-2 h3 { font-family: var(--schrift-titel); }
.design-2 .strich-titel::after { background: var(--gold-hell); }
.design-2 .marken-liste li { font-family: var(--schrift-titel); font-size: 1.15rem; letter-spacing: .02em; }
.design-2 .karte-kollektion { background: linear-gradient(160deg, var(--weiss), var(--flaeche-tief)); }
.design-2 .initialen { background: var(--dunkel); color: var(--dunkel-text); font-family: var(--schrift-titel); }

/* Fuß */
.l-fuss { background: var(--dunkel); color: var(--dunkel-text); border-top: 1px solid var(--gold-dunkel); }
.l-fuss-innen { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px 40px; padding: 32px 28px; }
.l-logo-klein { align-items: flex-start; }
.l-logo-klein .l-logo-wort { font-size: 2rem; }
.l-logo-klein .l-logo-zeile { font-size: .8rem; letter-spacing: .15em; }
.l-fuss-spruch { margin: 0; text-align: center; font: 1.4rem var(--schrift-schreib); color: var(--gold-hell); }
.l-fuss-menue { display: flex; gap: 20px; font-size: .9rem; }
.l-fuss-menue a { text-decoration: none; }
.l-fuss-menue a:hover { color: var(--gold-hell); }

/* Der Inhalt ist um die Seitenleiste schmäler: Raster früher umbrechen */
@media (max-width: 1300px) {
  .design-2 .geschaefte, .design-2 .zwei-spalten { grid-template-columns: minmax(0, 1fr); }
  .design-2 .drei-karten, .design-2 .standorte, .design-2 .team { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .design-2 .drei-karten .karte-kollektion { grid-column: 1 / -1; }
  .design-2 .team-zeile { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .design-2 .team-zeile h2 { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  .design-2 .einstieg { grid-template-columns: minmax(0, 1fr); }
  .design-2 .einstieg-bild { padding: 0 16px 24px; }  .design-2 .einstieg-bild .bildflaeche { height: 320px; }
  .design-2 .tafel { display: none; }
  .design-2 .einstieg-text { padding: 40px 24px 24px; }
}
@media (max-width: 820px) {
  .l-inhalt .breite { padding-left: 16px; padding-right: 16px; }
  .l-kopf-innen { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 18px 16px; }
  .l-firma, .l-spruch { display: none; }
  .l-logo-doppel { flex-direction: column; gap: 10px; }
  .l-trenner { width: 60px; height: 1px; align-self: center; }
  .l-kopf-rechts { justify-self: center; align-items: center; }
  .l-rahmen { grid-template-columns: minmax(0, 1fr); }
  .l-seite { padding: 0; gap: 0; }
  .l-menue { flex-direction: row; flex-wrap: wrap; padding: 6px 8px; }
  .l-menue a { padding: 8px 12px; border-left: 0; border-bottom: 2px solid transparent; }
  .l-menue a::after { content: none; }
  .l-menue a.aktiv { background: transparent; border-bottom-color: var(--gold-hell); }
  .l-punkte, .l-zitat { display: none; }
  .design-2 .einstieg-text { padding: 32px 16px 20px; }
  .l-fuss-innen { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
  .l-logo-klein { align-items: center; }
}
@media (max-width: 600px) {
  .design-2 .geschaefte, .design-2 .drei-karten, .design-2 .standorte, .design-2 .team, .design-2 .team-zeile { grid-template-columns: minmax(0, 1fr); }
  .design-2 .produkt-raster { grid-template-columns: 1fr 1fr; }
}