/* Ergänzungen zum gemeinsamen Kopf (templates/_seitenkopf.html) – gelten auf den
   Beratungsseiten (header.unified-header) und im Shop (header.sitechrome-header). */
.sehstudio-kopf .kopf-aktionen { display: flex; align-items: center; gap: 14px; }
.sehstudio-kopf .kopf-korb { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; color: inherit; text-decoration: none; }
.sehstudio-kopf .kopf-korb svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linejoin: round; }
.sehstudio-kopf .kopf-korb b { position: absolute; top: 2px; right: -2px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; background: #8d7043; color: #fff; font: 600 11px/18px Arial, sans-serif; text-align: center;
  box-sizing: border-box; }
.sehstudio-kopf .site-menu .menue-gruppe { display: block; padding: 12px 12px 4px; font: 600 .68rem Arial, sans-serif;
  letter-spacing: .14em; text-transform: uppercase; color: #8d7043; }
.sehstudio-kopf .site-menu .menue-gruppe:first-child { padding-top: 4px; }
@media (max-width: 950px) {
  .header.unified-header > .kopf-aktionen { grid-column: 2; grid-row: 1; justify-self: end; gap: 6px; }
}
@media (max-width: 1000px) {
  .sitechrome-header > .kopf-aktionen { grid-column: 2; grid-row: 1; justify-self: end; gap: 6px; }
}
/* Fuß im Shop */
.sitechrome-footer > p { margin: 0; font-size: .85rem; }
.sitechrome-footer > .fuss-links { display: flex; gap: 10px 20px; flex-wrap: wrap; font-size: .85rem; }

/* Handy: kurze Menünamen, damit Kopf und Warenkorb nicht über den Rand rutschen */
.sehstudio-kopf .kurz { display: none; }
@media (max-width: 600px) {
  .sehstudio-kopf .lang { display: none; }
  .sehstudio-kopf .kurz { display: inline; }
  .sehstudio-kopf > .primary-nav { min-width: 0; }
  .sitechrome-header.sehstudio-kopf .primary-nav a, .sitechrome-header.sehstudio-kopf .site-menu summary { font-size: .72rem; letter-spacing: .04em; }
}

/* Online-Shop als Untermenü in der Hauptnavigation (sieht aus wie „Entdecken“) */
.sehstudio-kopf .shop-menu { position: relative; }
@media (min-width: 1001px) { .sehstudio-kopf .shop-menu { margin-right: 20px; } }
.sehstudio-kopf .shop-menu summary { white-space: nowrap; gap: 4px; }
.sehstudio-kopf .shop-menu summary b { font-weight: inherit; }
.sehstudio-kopf .shop-menu summary i { font-style: normal; font-size: .8em; display: inline-block; margin-left: 2px; transition: transform .15s; }
.sehstudio-kopf .shop-menu[open] summary i { transform: rotate(180deg); }
.sehstudio-kopf .shop-menu.aktiv summary { text-decoration: underline; text-underline-offset: 5px; }
.sehstudio-kopf .shop-menu summary .kurz { display: none; }
.sehstudio-kopf .shop-menu summary .lang { display: inline; }
.sehstudio-kopf .primary-nav .shop-menu nav { position: absolute; left: 0; right: auto; top: calc(100% + 12px); z-index: 60;
  display: flex; flex-direction: column; width: 270px; max-width: calc(100vw - 32px); }
.sehstudio-kopf .primary-nav .shop-menu nav a { display: block; min-height: 0; padding: 12px; font-size: .9rem;
  line-height: 1.4; text-transform: none; letter-spacing: normal; font-family: Arial, Helvetica, sans-serif; }
.sehstudio-kopf .primary-nav .shop-menu nav a:first-child { font-weight: 600; }
@media (max-width: 600px) {
  .sehstudio-kopf .shop-menu summary .lang { display: none; }
  .sehstudio-kopf .shop-menu summary .kurz { display: inline; }
  .sehstudio-kopf .primary-nav .shop-menu nav { left: 50%; transform: translateX(-50%); }
}

/* Fußmenü mit Landingpages über dem Fuß (templates/_seitenkopf.html) */
.fuss-menue { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 32px; padding: 44px 5.5% 36px;
  background: #2b312b; color: #ebe7df; font: 14px/1.4 Arial, Helvetica, sans-serif; margin-top: 40px; }
.fuss-menue p { margin: 0 0 12px; font: 600 .72rem Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #cbb994; }
.fuss-menue a { display: block; padding: 5px 0; color: #ebe7df; text-decoration: none; }
.fuss-menue a:hover { text-decoration: underline; text-underline-offset: 4px; }
.fuss-menue + footer, .fuss-menue + .sitechrome-footer { margin-top: 0; }
@media (max-width: 900px) { .fuss-menue { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .fuss-menue { gap: 20px 16px; padding: 32px 16px 28px; font-size: 13px; } }
/* Shop-Kopf zwischen 1001 und 1300 px: mit dem Online-Shop-Untermenü wurde es 12 px zu breit */
@media (min-width: 1001px) and (max-width: 1300px) {
  .sitechrome-header.sehstudio-kopf { gap: 18px; padding-left: 4%; padding-right: 4%; }
  .sitechrome-header.sehstudio-kopf .primary-nav { gap: 18px; }
  .sitechrome-header.sehstudio-kopf .shop-menu { margin-right: 6px; }
}
/* … und bis 1200 px zweizeilig wie unter 1000 px (sonst ragt der Warenkorb rechts hinaus) */
@media (min-width: 1001px) and (max-width: 1200px) {
  .sitechrome-header.sehstudio-kopf { display: grid; grid-template-columns: 1fr auto; gap: 12px 16px; }
  .sitechrome-header.sehstudio-kopf > .wordmark { grid-column: 1; grid-row: 1; margin-right: auto; }
  .sitechrome-header.sehstudio-kopf > .kopf-aktionen { grid-column: 2; grid-row: 1; justify-self: end; }
  .sitechrome-header.sehstudio-kopf > .primary-nav { grid-column: 1; grid-row: 2; }
  .sitechrome-header.sehstudio-kopf > .site-menu { grid-column: 2; grid-row: 2; justify-self: end; }
}

/* 404-Seite (templates/fehler404.html, 14.10.2026) */
.nichtgefunden { max-width: 40rem; margin: 3rem auto 4rem; text-align: center; }
.nichtgefunden__zahl { margin: 0; font: 400 clamp(4rem, 14vw, 7rem)/1 Georgia, serif; letter-spacing: .08em; color: #c8b68f; }
.nichtgefunden h1 { font: 400 clamp(1.5rem, 4vw, 2.1rem)/1.25 Georgia, serif; margin: .6rem 0 .8rem; }
.nichtgefunden p { color: #565a50; }
.nichtgefunden__wege { list-style: none; padding: 0; margin: 1.6rem 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.nichtgefunden__wege a { display: inline-block; padding: .75rem 1.1rem; border: 1px solid #a4895e; color: #232522; text-decoration: none;
  font: .8rem Georgia, serif; letter-spacing: .1em; text-transform: uppercase; }
.nichtgefunden__wege a:hover { background: #ebe5db; }
.nichtgefunden__tel a { color: #232522; }

/* Schutz gegen das CSS der alten Beratungsseiten (website/*.css), seit dort derselbe Kopf steht
   (14.10.2026): .button.small ist dort „position: fixed“ mit Schatten und Farbfläche. */
.sitechrome-header .contact-nav { position: static; inset: auto; z-index: auto; box-shadow: none; display: inline-flex; align-items: center;
  justify-content: center; gap: 8px; background: transparent; color: #232522; border-radius: 0; }
.sitechrome-header .contact-nav:hover { background: #ebe5db; }
.sitechrome-header, .sitechrome-footer, .fuss-menue { line-height: 1.5; }
.sitechrome-header a, .sitechrome-footer a { color: inherit; }
.sitechrome-footer a { color: #ebe7df; }
.sitechrome-header p, .sitechrome-footer p { font-size: inherit; line-height: inherit; }
/* Die alte Seite hatte einen festen (fixed) Kopf und schob den Inhalt dafür nach unten; der
   gemeinsame Kopf steht im Fluss – also kein Abstand. Und ihr Abstand über der Unterzeile der Marke. */
body:has(> header.sitechrome-header.sehstudio-kopf) { padding-top: 0; }
.sitechrome-header .wordmark span, .sitechrome-footer .wordmark span { margin-top: 0; }
/* Startseite: das Titelbild ließ unter dem alten festen Kopf 116 px (am Handy 142 px) frei */
body:has(> header.sitechrome-header.sehstudio-kopf) .atelier-hero { margin-top: 0; }
/* Fuß am Handy: die alte Seite blendete den Satz aus und stellte die Links untereinander */
footer.sitechrome-footer > p { display: block; }
footer.sitechrome-footer > .fuss-links { flex-direction: row; align-items: center; }
footer.sitechrome-footer .wordmark { font-size: 1rem; }
@media (max-width: 500px) { footer.sitechrome-footer { gap: 30px; } }