/* Ohringl Schmuckdesign, Stildatei.

   Warme Holztoene, weil es um Holzschmuck geht, dazu das Rotorange aus dem
   Schriftzug als einziger kraeftiger Ton. Alles andere haelt sich zurueck,
   damit die Stuecke wirken und nicht die Seite.

   Eine lange Seite mit Sprungmarken, wie bei den anderen Seiten auch.
*/

:root {
  --papier:  #faf7f2;
  --karte:   #ffffff;
  --tinte:   #2b211a;
  --leise:   #6e6058;
  --linie:   #e8e0d5;
  --holz:    #9a5b32;
  --akzent:  #c8502a;
  --schatten: 0 1px 3px rgba(43, 33, 26, .06), 0 10px 28px rgba(43, 33, 26, .06);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  /* Die Schrift des Geraets, keine geladene. Kein Netzaufruf, keine Daten an
     einen Schriftanbieter. */
  font: 17px/1.7 system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.innen { max-width: 1020px; margin: 0 auto; padding: 0 22px; }
.schmal { max-width: 660px; }

a { color: var(--holz); }
a:hover { color: var(--akzent); }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }

.springen { position: absolute; left: -9999px; background: var(--karte);
            padding: 10px 16px; border-radius: 8px; z-index: 30; }
.springen:focus { left: 12px; top: 12px; }

/* ---------------------------------------------------------------- */
/* Menue                                                            */
/* ---------------------------------------------------------------- */

.menue {
  position: sticky; top: 0; z-index: 20;
  background: rgba(250, 247, 242, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
}
.menue .innen { display: flex; align-items: center; gap: 18px; min-height: 92px; }
.marke { display: flex; align-items: center; text-decoration: none; }
/* Das Logo ist freigestellt, es hat also keinen eigenen Hintergrund mehr und
   sitzt direkt auf der Seite statt als Kachel darauf. Deshalb darf es auch
   gross sein, ohne schwer zu wirken. */
.marke img { height: 68px; width: auto; display: block; }

/* Auf dem Telefon etwas kleiner, sonst nimmt die stehende Leiste ein Viertel
   des Schirms weg. */
@media (max-width: 560px) {
  .menue .innen { min-height: 74px; }
  .marke img { height: 54px; }
}

.menue nav {
  margin-left: auto; display: flex; gap: 4px;
  overflow-x: auto; scrollbar-width: none;
}
.menue nav::-webkit-scrollbar { display: none; }
.menue nav a {
  padding: 7px 12px; border-radius: 99px; text-decoration: none;
  color: var(--leise); font-size: 15px; white-space: nowrap;
}
.menue nav a:hover, .menue nav a:focus-visible { background: var(--karte); color: var(--holz); }

/* ---------------------------------------------------------------- */
/* Aufmacher                                                        */
/* ---------------------------------------------------------------- */

.aufmacher { position: relative; }
.aufmacher > img {
  width: 100%; height: clamp(260px, 42vw, 420px);
  object-fit: cover; display: block;
}
.aufmacher .text {
  position: absolute; inset: auto 0 0 0;
  padding: 70px 0 26px;
  background: linear-gradient(to top, rgba(35, 24, 16, .84), rgba(35, 24, 16, 0));
  color: #fff;
}
.aufmacher h1 { margin: 0; font-size: clamp(26px, 4vw, 40px); line-height: 1.15; }
.aufmacher p {
  margin: 10px 0 0; font-size: clamp(16px, 2vw, 20px);
  max-width: 30em; color: #f3e9df;
}

/* ---------------------------------------------------------------- */
/* Abschnitte                                                       */
/* ---------------------------------------------------------------- */

section { padding: 56px 0 8px; }
/* Muss groesser sein als die stehende Leiste, sonst landet eine Ueberschrift
   nach dem Sprung darunter. Leiste 92, hier 100. */
section[id] { scroll-margin-top: 100px; }
@media (max-width: 560px) {
  section[id] { scroll-margin-top: 82px; }
}

h2 { margin: 0 0 8px; font-size: clamp(22px, 3vw, 30px); line-height: 1.2; }
h2 + .vorspann { margin: 0 0 26px; color: var(--leise); max-width: 42em; }
h3 { margin: 0 0 6px; font-size: 18px; }

/* ---------------------------------------------------------------- */
/* Platzhalter, solange der Inhalt noch fehlt                        */
/* ---------------------------------------------------------------- */

.platzhalter {
  border: 2px dashed var(--linie);
  border-radius: 12px;
  padding: 26px 22px;
  color: var(--leise);
  background: var(--karte);
}
.platzhalter strong { color: var(--akzent); }
.platzhalter p { margin: 0; }
.platzhalter p + p { margin-top: 8px; }

/* ---------------------------------------------------------------- */
/* Galerie                                                          */
/* ---------------------------------------------------------------- */

/* 140 statt 190 als kleinstes Mass. Damit stehen auf einem Telefon zwei
   Bilder nebeneinander statt eines. Bei sechzehn Stuecken ist das der
   Unterschied zwischen Anschauen und Scrollen. */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
  margin-top: 22px;
}
@media (min-width: 620px) {
  .galerie { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}
.galerie figure { margin: 0; }
.galerie img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 10px; display: block;
  box-shadow: var(--schatten);
  transition: transform .18s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .galerie img:hover { transform: scale(1.02); }
}

/* ---------------------------------------------------------------- */
/* Presse                                                           */
/* ---------------------------------------------------------------- */

/* Eigene Klasse und nicht die Galerie, weil Zeitungsausschnitte ihr eigenes
   Format behalten muessen. Quadratisch beschnitten waeren sie unlesbar. */
.presseliste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 22px;
  align-items: start;
}
.presseliste figure { margin: 0; }
.presseliste img {
  width: 100%; height: auto; display: block;
  border-radius: 10px; box-shadow: var(--schatten);
}
.presseliste figcaption {
  margin-top: 9px; color: var(--leise); font-size: 14px; line-height: 1.5;
}

/* ---------------------------------------------------------------- */
/* Bild und Text nebeneinander                                      */
/* ---------------------------------------------------------------- */

.paar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px; align-items: center; margin-top: 22px;
}
.paar img {
  width: 100%; height: auto; border-radius: 12px;
  display: block; box-shadow: var(--schatten);
}
.paar.gedreht > img { order: 2; }
@media (max-width: 720px) {
  .paar { grid-template-columns: 1fr; gap: 18px; }
  .paar.gedreht > img { order: 0; }
}

/* ---------------------------------------------------------------- */
/* Angaben                                                          */
/* ---------------------------------------------------------------- */

.fakten { margin: 18px 0 0; display: grid; gap: 12px; }
.fakten > div {
  display: grid; grid-template-columns: 8.5em 1fr; gap: 14px;
  padding-bottom: 12px; border-bottom: 1px solid var(--linie);
}
.fakten dt { font-weight: 700; }
.fakten dd { margin: 0; color: var(--leise); }
.fakten dd p { margin: 0; }
.fakten dd p + p { margin-top: 4px; }
@media (max-width: 560px) {
  .fakten > div { grid-template-columns: 1fr; gap: 2px; }
}

.knopf {
  display: inline-block; margin-top: 16px;
  background: var(--holz); color: #fff; text-decoration: none;
  padding: 11px 22px; border-radius: 99px; font-weight: 700;
}
.knopf:hover { background: var(--akzent); color: #fff; }

/* ---------------------------------------------------------------- */
/* Fuss                                                             */
/* ---------------------------------------------------------------- */

footer {
  margin-top: 58px; padding: 30px 0 44px;
  border-top: 1px solid var(--linie);
  color: var(--leise); font-size: 15px;
}
footer .innen { display: flex; flex-wrap: wrap; gap: 8px 20px; }
footer a { color: var(--leise); }