/* =========================================================================
   ISO Premium Finishes – Anpassungen nach Kunden-Doc
   Wird NACH dem Next.js-Stylesheet geladen und überschreibt es gezielt.
   Jeder Block ist einem Punkt der Doc zugeordnet.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. LINKSBÜNDIG (Referenz: iso.de)
   ---------------------------------------------------------------------- */
.text-center { text-align: left; }

main p.mx-auto,
main svg.mx-auto,
main figure.mx-auto { margin-left: 0; margin-right: 0; }

.farbtiefe { place-items: center start; }
.farbtiefe blockquote { text-align: left; }

.rotier { text-align: left; }

.cta-trust { justify-content: flex-start; }

/* Hero: lag als zentriertes Grid-Item mittig im Bild. Jetzt bündig mit der
   Navigationsleiste, also exakt auf der Kante von .container-editorial. */
.kino { place-items: center stretch; }
.kino-inhalt {
  width: 100%;
  max-width: 90rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 768px)  { .kino-inhalt { padding-inline: 2.5rem; } }
@media (min-width: 1280px) { .kino-inhalt { padding-inline: 4rem; } }
/* Inhalt selbst bleibt in ruhiger Lesebreite, beginnt aber links */
.kino-inhalt > * { max-width: 62rem; }

/* -------------------------------------------------------------------------
   2. Keine Worttrennung in Überschriften (z. B. „Architekt ur")
      Ursache im Original: ein nachgestelltes overflow-wrap:break-word hob
      das hyphens:none in derselben Regel wieder auf.
      Damit lange Komposita ohne Trennung passen, werden Überschriften in
      schmalen Rasterspalten eine Stufe kleiner gesetzt – sonst liefen sie
      aus der Spalte (z. B. „KÖNIGSDISZIPLIN", „ARCHITEKTUR").
   ---------------------------------------------------------------------- */
.display,
.h1, .h2, .h3,
h1, h2, h3 {
  -webkit-hyphens: none;
          hyphens: none;
  overflow-wrap: normal;
  word-break: keep-all;
  text-wrap: balance;
}

@media (min-width: 1024px) {
  [class*="col-span"] .display,
  [class*="col-span"] .h2 {
    font-size: clamp(1.9rem, 1rem + 2.5vw, 3.4rem);
  }
}

/* -------------------------------------------------------------------------
   3. Logo nur oben in der hellen Leiste – und deutlich größer
      Hinweis: Tailwind ist vorkompiliert, Klassen wie h-14 oder
      lg:h-[4.6rem] existieren im Stylesheet nicht. Deshalb feste Regel.
   ---------------------------------------------------------------------- */
:root { --header-h: 5rem; }
@media (min-width: 1024px) { :root { --header-h: 6.5rem; } }

.kopf-marke,
header a[href="/"] > img {
  display: block;
  height: 3.1rem;
  width: auto;
  max-width: none;
}
@media (min-width: 1024px) {
  .kopf-marke,
  header a[href="/"] > img { height: 4.4rem; }
}

/* Navigation: keine Umbrüche mitten in den Menüpunkten */
nav[aria-label="Hauptnavigation"] ul { flex-wrap: nowrap; }
nav[aria-label="Hauptnavigation"] .nav-glied { white-space: nowrap; }

/* Kopf-CTA nicht umbrechen lassen */
header .btn { white-space: nowrap; }

/* Zwischen 1024 und 1279 px wird es im Kopf eng: großes Logo + fünf
   Menüpunkte + Button passen nicht nebeneinander. Der Kopf-Button entfällt
   dort – Hero-CTA und mitlaufender CTA bleiben erreichbar. */
@media (min-width: 1024px) and (max-width: 1279px) {
  nav[aria-label="Hauptnavigation"] ul { gap: 1rem; }
  nav[aria-label="Hauptnavigation"] .nav-glied { font-size: .64rem; }
  .kopf-marke,
  header a[href="/"] > img { height: 3.6rem; }
  header .btn { display: none; }
}

/* -------------------------------------------------------------------------
   4. Bilder angleichen
      a) Bilder nebeneinander: gleiche Höhe und gleiches Format
      b) Bildspalte beginnt auf Höhe der Überschrift, nicht darüber
   ---------------------------------------------------------------------- */
.bild-gleich > * { display: flex; flex-direction: column; }
.bild-gleich .img-frame { flex: 1 1 auto; }
.bild-gleich .img-frame:not([class*="aspect-"]) { aspect-ratio: 4 / 3; }
.bild-gleich .img-frame img { width: 100%; height: 100%; object-fit: cover; }

.bild-versatz { padding-top: 2.35rem; }
@media (max-width: 1023px) { .bild-versatz { padding-top: 0; } }

/* -------------------------------------------------------------------------
   5. ISO-Kreise auf dem Bilderblock – rechts oben beim Überstreichen
      Die Datei signet-lines-dp.png ist eine sehr blasse Liniengrafik und
      verschwindet auf hellen Bildstellen. Deshalb als SVG mit Schatten.
   ---------------------------------------------------------------------- */
.streifen a { position: relative; }
.streifen .iso-kreise {
  position: absolute;
  top: 1.15rem;
  right: 1.15rem;
  z-index: 3;
  width: clamp(2.1rem, 3vw, 2.9rem);
  aspect-ratio: 76 / 116;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 116' fill='none'%3E%3Ccircle cx='38' cy='28' r='26' stroke='%23FDF8F0' stroke-width='2.6' opacity='.7'/%3E%3Ccircle cx='38' cy='58' r='26' stroke='%23FDF8F0' stroke-width='2.6' opacity='.85'/%3E%3Ccircle cx='38' cy='88' r='26' stroke='%23FDF8F0' stroke-width='2.6'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 1px 5px rgba(0, 7, 11, .65));
  opacity: 0;
  transform: translateY(-8px) scale(0.94);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22,.7,.3,1);
  pointer-events: none;
}
.streifen a:hover .iso-kreise,
.streifen a:focus-visible .iso-kreise { opacity: 1; transform: none; }

@media (hover: none) {
  .streifen .iso-kreise { opacity: .9; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .streifen .iso-kreise { transition: none; }
}

/* -------------------------------------------------------------------------
   6. Drei große Kacheln – ISO-Kreise als Signet
   ---------------------------------------------------------------------- */
.kachel { position: relative; }
.kachel-signet {
  display: block;
  width: 2.2rem;
  height: auto;
  color: var(--color-plum, #b899c8);
  margin-bottom: 1.15rem;
}

/* -------------------------------------------------------------------------
   7. Farrow & Ball, Abschnitt „Was in der Dose steckt":
      Dose nach rechts gekippt, ISO-Kreise dahinter (analog iso.de)
   ---------------------------------------------------------------------- */
.dose-spalte { display: flex; justify-content: flex-start; }
.dose-buehne {
  position: relative;
  display: block;
  width: 100%;
  max-width: min(30rem, 100%);
  padding-block: 1.5rem;
  /* Platz fuer die Drehung, sonst laeuft das Bild seitlich aus dem Raster */
  padding-inline: 1.6rem;
}
.dose-kreise {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 84%;
  transform: translate(-50%, -50%);
  z-index: 0;
  color: var(--color-plum, #b899c8);
  pointer-events: none;
}
.dose-kreise svg { display: block; width: 100%; height: auto; }
.dose-bild {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  transform: rotate(9deg);
  transform-origin: 55% 65%;
  filter: drop-shadow(0 26px 34px rgba(7, 53, 31, .18));
}
@media (prefers-reduced-motion: no-preference) {
  .dose-bild { transition: transform .8s cubic-bezier(.22,.7,.3,1); }
  .dose-buehne:hover .dose-bild { transform: rotate(6deg) translateY(-6px); }
}

/* -------------------------------------------------------------------------
   8. Lightbox der Inspiration-Galerie (ersetzt die frühere React-Variante)
   ---------------------------------------------------------------------- */
.lupe {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(0, 7, 11, .92);
}
.lupe[hidden] { display: none; }
.lupe-buehne { margin: 0; max-width: min(100%, 74rem); }
.lupe-buehne img {
  display: block;
  max-width: 100%;
  max-height: 76vh;
  margin: 0 auto;
  object-fit: contain;
}
.lupe-buehne figcaption {
  margin-top: .9rem;
  color: var(--color-cream, #fdf8f0);
  font-weight: 300;
  font-size: .88rem;
  text-align: left;
}
.lupe-zu, .lupe-nav {
  color: var(--color-cream, #fdf8f0);
  background: transparent;
  border: 1px solid rgba(253, 248, 240, .28);
  cursor: pointer;
  line-height: 1;
  transition: background-color .25s, border-color .25s;
}
.lupe-zu:hover, .lupe-nav:hover { background: rgba(253, 248, 240, .14); }
.lupe-zu {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 2.9rem;
  height: 2.9rem;
  font-size: 1.6rem;
}
.lupe-nav { width: 2.9rem; height: 4.6rem; font-size: 1.9rem; flex: 0 0 auto; }
@media (max-width: 640px) { .lupe-nav { width: 2.4rem; height: 3.6rem; } }

/* -------------------------------------------------------------------------
   9. Hinweis: Die frühere Ausnahmeregel für /designberatung/ ist entfallen.
      Seit die Seite ebenfalls dehydriert ist, wird der Reiter „Kompetenzen"
      auf allen Seiten direkt aus dem Markup entfernt – kein Ausblenden nötig.
   ---------------------------------------------------------------------- */

/* Auf schmalen Displays flacher kippen, damit nichts seitlich ausläuft */
@media (max-width: 640px) {
  .dose-bild { transform: rotate(6deg); }
  .dose-buehne { padding-inline: 2rem; }
}

/* -------------------------------------------------------------------------
   10. Premium Finishes (V12): Ankerziele der Bereiche landen nicht unter dem
       Sticky-Header, wenn von der Startseite aus verlinkt wird.
   ---------------------------------------------------------------------- */
#farrow-ball, #fugenlose-designs, #akustik { scroll-margin-top: calc(var(--header-h) + 1.25rem); }