/* vermittlung.jobs – Variante 2 – nur /ueber-mich. Ergaenzt site.css (nach site.css laden).
   Keine Rahmenlinien: Trennung ueber Flaechen, Schatten und Goldschein. */

/* ---------- Hero: Markenkarte (Monogramm) + Arbeitsfotos auf Satin ---------- */
.ich-collage .collage__bogen { z-index: 1; right: 3%; width: 56%; height: 88%; }
.ich-collage .collage__karte--b { z-index: 2; right: 0; bottom: 2%; width: 30%; }
.ich-collage .ich-karte {
  z-index: 3;
  left: 0;
  bottom: 5%;
  width: 56%;
  aspect-ratio: 4 / 5;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: clamp(1.1rem, 2vw, 1.9rem);
  text-align: center;
  border-radius: 26px;
  overflow: hidden;
  background: radial-gradient(130% 70% at 50% 0%, rgba(22, 38, 127, .5) 0%, rgba(22, 38, 127, 0) 62%), var(--glas);
  box-shadow: var(--schatten-tief), inset 0 1px 0 rgba(198, 208, 238, .1);
  transition: box-shadow .8s var(--ease-aus);
}
.ich-karte::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(198, 208, 238, 0) 30%, rgba(198, 208, 238, .16) 47%, rgba(198, 208, 238, 0) 62%);
  transform: translateX(-120%);
  transition: transform 1.5s var(--ease-aus);
}
.ich-karte > * { position: relative; z-index: 1; }
.ich-karte__mono { width: 72%; height: auto; filter: none; transition: transform 1s var(--ease-aus), filter .8s var(--ease-weich); }
.ich-karte__name { font-size: clamp(.72rem, 6.4cqi, 1.2rem); line-height: 1.35; letter-spacing: .1em; text-wrap: balance; }
.ich-karte__slogan { font-size: clamp(.6875rem, 4cqi, .8125rem); letter-spacing: .28em; text-wrap: balance; }
@container (max-width: 240px) {
  .ich-karte__slogan { letter-spacing: .16em; }
  .ich-karte__name { letter-spacing: .07em; }
}
.ich-karte:hover { box-shadow: var(--schatten-tief), inset 0 1px 0 rgba(198, 208, 238, .16); }
.ich-karte:hover::before { transform: translateX(120%); }
.ich-karte:hover .ich-karte__mono { transform: translateY(-6px) scale(1.04); filter: none; }
@keyframes ich-band-zeichnen { to { stroke-dashoffset: 0; } }

/* Runde 6: Die Markenkarte liegt nie ueber Gesichtern – Karte unten links (<= 45 %), Bogen rechts daneben, Kreis oben
   links. Vorher verdeckte die Karte (56–76 %) den Bogen, vom Mann blieben bei 768 px nur Ohr und Hinterkopf. */
.ich-collage .collage__bogen { right: 0; top: 0; width: 54%; height: 100%; }
.ich-collage .ich-karte { left: 0; bottom: 0; width: 43%; }
.ich-collage .collage__karte--b { left: 6%; right: auto; top: 2%; bottom: auto; width: 31%; }
@media (min-width: 768px) and (max-width: 1023px) {
  .ich-collage .ich-karte { width: 44%; }
  .ich-collage .collage__bogen { width: 53%; }
}
@media (max-width: 767px) {
  .ich-collage .collage__bogen { right: 0; width: 46%; height: 100%; }
  .ich-collage .ich-karte { left: 0; bottom: 0; width: 50%; height: 100%; aspect-ratio: auto; gap: .35rem; padding: .7rem .6rem; border-radius: 20px; }
  .ich-karte__mono { width: auto; height: 42%; }
}
@media (max-width: 767px) and (max-height: 700px) {
  .ich-karte__trenner, .ich-karte__slogan { display: none; }
}
/* Knoepfe gleichwertig in einer Reihe (vorher ~270 px Champagnerbalken neben einem gequetschten 68-px-Knopf) */
@media (max-width: 1023px) {
  .ich-hero .knopfreihe > .knopf { flex: 1 1 0; }
}

/* ---------- Persoenlich: Text + Steckbrief + Foto ---------- */
@media (min-width: 1024px) {
  .ich-intro .split__raster { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}
.steckbrief { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 2rem 0 0; }
.steckbrief__eintrag {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 0;
  padding: 1.1rem 1.25rem;
  border-radius: 22px;
  background: rgba(10, 22, 96, .34);
  transition: translate .7s var(--ease-aus), background-color .5s, box-shadow .7s var(--ease-aus);
}
.steckbrief__eintrag--breit { grid-column: 1 / -1; }
.steckbrief__label { font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.steckbrief__wert { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; color: var(--ivory); }
.steckbrief__person { display: flex; align-items: center; gap: 1rem; }
.steckbrief__mono { width: 64px; height: auto; flex: none; filter: none; transition: transform .8s var(--ease-aus); }
.steckbrief__namen { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.steckbrief__namen .marke-zeile__name { font-size: clamp(.9rem, .8rem + .4vw, 1.125rem); line-height: 1.3; }
.steckbrief__namen .marke-zeile__slogan { font-size: .6875rem; }
.steckbrief__eintrag:hover { translate: 0 -5px; background-color: rgba(22, 38, 127, .45); box-shadow: 0 24px 50px -30px rgba(0, 1, 24, .9); }
.steckbrief__eintrag:hover .steckbrief__mono { transform: rotate(-5deg) scale(1.08); }
@media (max-width: 599px) {
  .steckbrief { gap: .6rem; margin-top: 1.5rem; }
  .steckbrief__eintrag { padding: .95rem 1rem; }
  .steckbrief__label { font-size: .75rem; letter-spacing: .12em; }
  .steckbrief__mono { width: 52px; }
}

/* Hinweis "Symbolbild" auf Arbeitsfotos (Fotos zeigen nie Anastasiia) */
.ich-ablauf .prozess__foto { position: relative; }
/* Nach der Enthuellung voll offen (Klasse aus seite-ueber-mich.js, siehe dort) */
.js:not(.js-ohne) [data-clip].ich-clip-offen { clip-path: none; }

/* ---------- Bildband-Kopf ---------- */
.ich-bildband__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }

/* ---------- Arbeitsweise: Fotokacheln ---------- */
.prinzipien { padding-block: var(--abschnitt); }
.prinzipien__einleitung { max-width: 24rem; color: var(--text-2); }
.prinzipien__liste { display: grid; gap: 1rem; }
@media (min-width: 600px) { .prinzipien__liste { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .prinzipien__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.prinzip {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  min-height: clamp(19rem, 26vw, 25rem);
  padding: clamp(1.4rem, 2.2vw, 2rem);
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--navy-800);
  box-shadow: var(--schatten-tief), inset 0 1px 0 rgba(198, 208, 238, .07);
  transition: translate .8s var(--ease-aus), box-shadow .8s var(--ease-aus);
}
.prinzip__foto { position: absolute; inset: 0; z-index: 0; opacity: .62; transition: opacity 1s var(--ease-weich); }
.prinzip__foto .foto__img { transform: scale(1.1); }
.prinzip__foto::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(0, 1, 24, .18) 0%, rgba(0, 1, 24, .32) 34%, rgba(0, 1, 24, .9) 72%, rgba(0, 1, 24, .97) 100%), radial-gradient(90% 60% at 20% 100%, rgba(198, 208, 238, .2), rgba(198, 208, 238, 0) 70%); }
.prinzip__nr { position: absolute; top: .9rem; right: 1.2rem; z-index: 3; font-size: clamp(3.4rem, 2.6rem + 2vw, 4.75rem); font-weight: 700; line-height: 1; letter-spacing: -.06em; background-image: var(--text-verlauf); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: .3; transition: opacity .7s, transform 1s var(--ease-aus), background-position 1.2s var(--ease-weich); }
.prinzip__icon { position: relative; z-index: 3; display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: auto; border-radius: 18px; color: var(--hell-200); background: rgba(198, 208, 238, .12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .5s, color .4s, transform .8s var(--ease-aus); }
.prinzip__titel { position: relative; z-index: 3; padding-top: 2.5rem; font-size: 1.375rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; color: var(--ivory); }
.prinzip__titel::after { content: ""; display: block; width: 2.25rem; height: 2px; margin-top: .7rem; border-radius: 2px; background-image: var(--flaeche-hell); transform-origin: left; transition: width .9s var(--ease-aus); }
.prinzip__text { position: relative; z-index: 3; margin-top: .7rem; color: var(--text-2); }
.prinzip:hover { translate: 0 -8px; box-shadow: var(--schatten-tief); }
.prinzip:hover .prinzip__foto { opacity: .95; }
.prinzip:hover .foto__img { transform: scale(1); filter: saturate(1) contrast(1.04) brightness(1); }
.prinzip:hover .foto::before { opacity: 0; }
.prinzip:hover .prinzip__nr { opacity: 1; transform: translateY(4px); background-position: 100% 50%; }
.prinzip:hover .prinzip__icon { color: var(--navy-950); background: var(--flaeche-hell); transform: rotate(-6deg); }
.prinzip:hover .prinzip__titel::after { width: 5.5rem; }
@media (max-width: 599px) {
  .prinzipien__liste { display: flex; gap: .75rem; margin-inline: calc(var(--rand) * -1); padding: .5rem var(--rand) 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); scrollbar-width: none; }
  .prinzipien__liste::-webkit-scrollbar { display: none; }
  .prinzip { flex: 0 0 min(80%, 19rem); min-height: 20rem; scroll-snap-align: start; }
}

/* ---------- CTA mit Namenszug ---------- */
.ich-cta .cta-band__marke { margin-bottom: 1rem; }
.ich-cta__marke { align-items: center; margin-bottom: 1.25rem; }

/* ===== Runde 5 (Gestaltung, 15.09.2026): Markenkarte und Kacheln ohne Glas/Glow ===== */
.ich-collage .ich-karte { background: var(--karte-fest); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--schatten-tief); }
.ich-karte::before { display: none; }
.ich-karte:hover { box-shadow: var(--schatten-tief); }
.ich-karte__mono, .ich-karte:hover .ich-karte__mono { transform: none; filter: none; }
.steckbrief__eintrag { background-color: var(--karte); }
.steckbrief__eintrag:hover { translate: none; background-color: var(--karte-2); box-shadow: none; }
.steckbrief__mono { filter: none; }
.prinzip { background: var(--karte-fest); box-shadow: none; }
.prinzip:hover { translate: 0 -3px; box-shadow: none; }
.prinzip__nr { opacity: .18; }
.prinzip:hover .prinzip__nr { opacity: .3; transform: none; }
/* Grundsaetze-Kacheln ruhiger: keine Titel-Unterstreichung, keine grosse Hintergrundzahl */
.prinzip__titel::after { display: none; }
.prinzip__nr { display: none; }