/* ==========================================================================
   katzencouch.at | Startseite, Beratung, Problemberatung, Haltungsberatung und Ablauf
   Für Bootstrap 5.3. Nach default.css und kc-icons.css einbinden oder an
   default.css anhängen. Nutzt aus dem Block „Navigation und Footer“ in default.css
   die Variablen --kc-*, die Buttons .kc-btn-cta und .kc-btn-lg sowie .kc-bg-hell
   und .kc-eyebrow.

   Hier steht nur, wofür Bootstrap keine Klasse hat: Markenfarben aus dem
   Raster, Schriftgrößen zwischen den Bootstrap-Stufen, Gewicht 900, feste
   Maße, Zustände (Hover, Fokus, Sprungziel) und Zierformen.
   Alles andere steht als Bootstrap-Klasse im HTML (fw-bold, rounded-pill,
   border, text-primary, text-body-emphasis, position-relative ...).
   ========================================================================== */

.kc-seite i::before { margin-left: 0; margin-right: 0; }
.kc-seite a:focus-visible,
.kc-seite .btn:focus-visible {
  outline: 2px solid var(--kc-basaltgrau);
  outline-offset: 2px;
  box-shadow: none;
}

/* Sätze mit Link im Text kommen aus dem CKEditor und bringen ihr eigenes <p> mit.
   Bootstrap-Klassen erreichen dieses <p> nicht, deshalb nimmt der Wrapper .kc-rt dem
   letzten Absatz den Abstand (gleiche Bauart wie figcaption > p:last-child in default.css). */
.kc-rt > p:last-child { margin-bottom: 0; }

/* Die helle Fläche ist erst ab Tablet gerundet; rounded-4 kennt keine Breakpoints */
@media (min-width: 768px) { .kc-flaeche { border-radius: 1rem; } }

/* --------------------------------------------------------------------------
   Typografie nach Designsystem. Fett und Farbe kommen aus Bootstrap-Klassen,
   hier stehen Größe, Zeilenhöhe und das Gewicht 900.
   -------------------------------------------------------------------------- */
.kc-seite h1.kc-titel {
  font-size: calc(1.6rem + 1.4vw);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.kc-seite h2.kc-titel { font-size: calc(1.375rem + .6vw); line-height: 1.2; text-wrap: balance; }
@media (min-width: 1200px) {
  .kc-seite h1.kc-titel { font-size: 2.75rem; }
  .kc-seite h2.kc-titel { font-size: 1.875rem; }
}
.kc-kachel-titel { font-size: 1.375rem; line-height: 1.3; }
.kc-thema-titel { font-size: 1.0625rem; line-height: 1.3; }
.kc-thema p { font-size: .9375rem; line-height: 1.45; }
.kc-person { line-height: 1.3; }
.kc-zitat { font-size: 1.0625rem; line-height: 1.5; }
.kc-wert { font-size: 1.4375rem; line-height: 1.3; color: var(--kc-wasserblau-700); }
.kc-schritt-titel { font-size: 1.4375rem; line-height: 1.3; }

/* Zweiter Button: Umriss, dieselbe Pillenform wie .kc-btn-cta */
.kc-btn-outline {
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y: .625rem;
  --bs-btn-font-weight: 700;
  --bs-btn-font-size: 1rem;
  --bs-btn-line-height: 1.2;
  --bs-btn-border-width: 2px;
  --bs-btn-border-radius: 50rem;
  --bs-btn-color: var(--kc-wasserblau-700);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--kc-wasserblau-700);
  --bs-btn-hover-color: var(--kc-wasserblau-700);
  --bs-btn-hover-bg: var(--kc-lichtgruen-100);
  --bs-btn-hover-border-color: var(--kc-wasserblau-700);
  --bs-btn-active-color: var(--kc-wasserblau-700);
  --bs-btn-active-bg: var(--kc-lichtgruen-200);
  --bs-btn-active-border-color: var(--kc-wasserblau-700);
  min-height: 44px;
}

/* Pillen: Beispielthemen der Hubseite (mit bg-white) und Merkmale im Ablauf (mit kc-bg-hell) */
.kc-chip { padding: .25rem .75rem; line-height: 1.4; color: var(--kc-wasserblau-700); }

/* --------------------------------------------------------------------------
   Foto im Kreis mit zwei Kreisen dahinter (Kreis = Grundform der Marke)
   -------------------------------------------------------------------------- */
.kc-hero-bild { max-width: 17.5rem; aspect-ratio: 1; }
.kc-hero-bild::before,
.kc-hero-bild::after { content: ""; position: absolute; border-radius: 50%; aspect-ratio: 1; }
.kc-hero-bild::before { right: 0; top: 0; width: 72%; background: var(--kc-lichtgruen-200); }
.kc-hero-bild::after { left: 2%; top: 8%; width: 15%; background: var(--kc-goldgelb); }
/* Der Kreis mit dem Foto: ein einzelnes Bild oder die .carousel-inner mit mehreren Fotos */
.kc-hero-bild > img,
.kc-hero-kreis { left: 4%; bottom: 0; z-index: 1; width: 84%; height: auto; aspect-ratio: 1; border-width: .5rem !important; }
.kc-hero-name { bottom: 9%; z-index: 2; }

/* --------------------------------------------------------------------------
   Einstieg der Startseite: drei Fotokreise (.kc-fotos)
   Jedes Foto ist so groß wie das große und wird auf den kleinen Plätzen verkleinert und verschoben.
   So bleibt es scharf, und der Wechsel ist eine reine transform-Bewegung.
   -------------------------------------------------------------------------- */
.kc-fotos::after { content: none; } /* statt des goldgelben Kreises stehen hier die kleinen Fotos */
.kc-foto { z-index: 3; cursor: pointer; }
.kc-foto[data-kc-platz="0"] { z-index: 2; cursor: auto; }
.kc-foto[data-kc-platz="1"] { transform: translate(50%, -40.5%) scale(.34); }   /* rechts oben */
.kc-foto[data-kc-platz="2"] { transform: translate(-55%, 23.8%) scale(.34); } /* links unten */
.kc-foto[data-kc-platz="3"] { transform: translate(54.8%, 26.2%) scale(.34); }  /* rechts unten */
.kc-foto[data-kc-platz="4"] { transform: translate(-47.6%, -33.3%) scale(.34); } /* links oben */
.kc-foto[data-kc-platz="x"] { transform: scale(0); }                             /* ab dem sechsten Foto */
/* Wandert ein kleines Foto auf einen anderen kleinen Platz, läuft es hinter dem großen durch */
.kc-foto.kc-foto--hinten { z-index: 0; }
.kc-foto:not([data-kc-platz="0"]) .kc-hero-name { opacity: 0; }
/* Punkte unter den Fotos. Der durchsichtige Rand vergrößert die Klickfläche auf 28 px. */
.kc-hero-punkte { bottom: -3rem; z-index: 4; }
.kc-hero-punkte button { box-sizing: content-box; width: .75rem; height: .75rem; padding: 0; border: .5rem solid transparent; border-radius: 50%; background: var(--kc-wasserblau-700) padding-box; opacity: .5; }
.kc-hero-punkte button[aria-current="true"] { opacity: 1; }
/* Bewegung: Die Fotos gleiten auf ihre Plätze, der lichtgrüne Kreis dahinter wird sanft größer und kleiner.
   Ohne Bewegung, wenn sie im System reduziert ist. Ein Klick auf einen Punkt oder ein kleines Foto hält alles an (WCAG 2.2.2). */
@media (prefers-reduced-motion: no-preference) {
  .kc-foto { transition: transform 1.4s cubic-bezier(.45, 0, .15, 1); }
  .kc-foto .kc-hero-name { transition: opacity .3s; }
  .kc-foto[data-kc-platz="0"] .kc-hero-name { transition: opacity .6s 1s; }
  .kc-hero-bild--bewegt::before { animation: kc-atmen 5s ease-in-out infinite alternate; }
  .kc-hero-bild--angehalten::before { animation-play-state: paused; }
}
@keyframes kc-atmen { to { scale: 1.07; } }
@media (min-width: 768px) { .kc-hero-bild { max-width: 24rem; } }

/* Hubseite: die zwei Wege. Das ganze Feld ist anklickbar (stretched-link). */
.kc-tuer { transition: background-color .15s; }
.kc-tuer:hover { background: var(--kc-lichtgruen-200); }
.kc-tuer-bild { aspect-ratio: 3 / 2; object-position: center 35%; }

/* Themen zum Wiedererkennen */
.kc-thema { scroll-margin-top: 1.5rem; }
.kc-thema-bild { width: 4rem; height: 4rem; }
/* Springt eine Weiterleitung auf ein Thema, wird sein Titel hervorgehoben */
.kc-thema:target .kc-thema-titel { text-decoration: underline; text-decoration-color: var(--kc-goldgelb); text-decoration-thickness: 3px; text-underline-offset: .25em; }

/* Wer dich begleitet */
.kc-portrait { width: 7rem; height: 7rem; }
.kc-avatar { width: 4rem; height: 4rem; }
.kc-avatar + .kc-avatar { margin-left: -1rem; }

/* --------------------------------------------------------------------------
   Ablauf: nummerierter Weg und Überblick
   -------------------------------------------------------------------------- */
.kc-schritt { scroll-margin-top: 1.5rem; }
.kc-schritt:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(1.5rem - 1px);
  top: 3.5rem;
  bottom: .5rem;
  width: 2px;
  border-radius: 1px;
  background: var(--kc-lichtgruen-300);
}
.kc-schritt-nr { width: 3rem; height: 3rem; font-weight: 900; }
.kc-schritt-nr--ziel { background: var(--kc-goldgelb); }

.kc-sprung {
  padding: .375rem .875rem .375rem .375rem;
  background: #fff;
  color: var(--kc-wasserblau-700);
  font-size: .9375rem;
  line-height: 1.3;
  transition: background-color .15s, color .15s;
}
.kc-sprung:hover,
.kc-sprung:focus-visible { background: var(--kc-wasserblau-700); color: #fff; }
.kc-sprung-nr { width: 1.75rem; height: 1.75rem; background: var(--kc-lichtgruen-200); font-size: .875rem; font-weight: 900; }

/* Startseite: Blogbild am Handy klein neben dem Titel, ab Tablet groß darüber */
.kc-blog-bild { width: 6rem; height: 6rem; }
@media (min-width: 768px) { .kc-blog-bild { width: 100%; height: auto; aspect-ratio: 16 / 9; } }