/* CO Philosophie - Editorial statt Zweispalter.

   Das Bild laeuft bis an den Seitenrand, der Textblock schiebt sich als heller
   Bogen darueber. Dazu eine feine Rahmenlinie mit Versatz wie bei einem Abzug,
   ein senkrechtes Wort am Rand und eine Nummer als Anker.

   Bildformat 3:2 - Chris fotografiert ausschliesslich quer (CO 10). */

.co-philo {
  position: relative;
  color: var(--co-tinte, #1B1A19);
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  align-items: center;
  padding: var(--co-sektion) 0;
  overflow: hidden;
}

/* Senkrechtes Wort am aeusseren Rand - ruhiger Anker, kein Schmuck. */
.co-philo__marke {
  position: absolute;
  right: clamp(10px, 1.6vw, 22px);
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 10px; letter-spacing: .42em; text-transform: uppercase;
  color: var(--co-ton, #C9AE9B);
  pointer-events: none;
  /* Etwas fetter: Bei dieser Groesse und Laufweite wirkt Gewicht 300 auf
     Sand fast wie ein Schatten. */
  font-weight: 600;
}

/* ---------- Bild ---------- */
.co-philo__bild {
  pointer-events: none;
  position: relative;
  aspect-ratio: 3 / 2;
  min-height: 380px;
  overflow: hidden;
  background: var(--co-sand-warm, #EADBCF);
  /* Laeuft bis an den Seitenrand, statt im Raster zu sitzen. */
  margin-left: calc(-1 * clamp(0px, 2vw, 40px));
}
.co-philo--rechts .co-philo__bild { order: 2; margin-left: 0; margin-right: calc(-1 * clamp(0px, 2vw, 40px)); }

.co-philo__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.1s ease, transform 4s ease-out;
  pointer-events: none;
}
/* Leichtes Heranfahren, solange ein Bild steht - gibt der Flaeche Leben,
   ohne dass etwas springt. */
.co-philo__foto.is-an { opacity: 1; transform: scale(1); }

.co-philo__bild::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(27,26,25,0) 55%, rgba(27,26,25,.55) 100%);
}

.co-philo__bu {
  position: absolute;
  /* Mehr Luft zum Rand: Das Bild laeuft bis an die Kante, die Schrift darin
     soll es nicht. */
  left: clamp(28px, 4.5vw, 72px);
  bottom: clamp(26px, 4vw, 56px);
  right: clamp(28px, 4.5vw, 72px);
  z-index: 2;
  color: var(--co-sand, #F4ECE5);
  pointer-events: none;
}
.co-philo__bu-titel {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.12;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .5);
}
.co-philo__bu-zeile {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  margin-top: 10px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
}

/* ---------- Textseite ---------- */
.co-philo__text {
  position: relative;
  z-index: 3;
  /* Schiebt sich ueber das Bild - der Versatz macht aus zwei Spalten eine Seite. */
  margin-left: clamp(-140px, -7vw, -40px);
  padding: 0 clamp(20px, 5vw, 64px) 0 0;
}
.co-philo--rechts .co-philo__text {
  margin-left: 0;
  margin-right: clamp(-140px, -7vw, -40px);
  padding: 0 0 0 clamp(20px, 5vw, 64px);
}

.co-philo__tafel {
  position: relative;
  /* Eine Spur waermer als der Seitengrund - sonst ist die Tafel unsichtbar und
     die Rahmenlinie scheint frei im Raum zu schweben. */
  background: #F8F2EC;
  padding: clamp(32px, 4vw, 64px) clamp(26px, 3.4vw, 56px);
  box-shadow: 0 30px 70px -45px rgba(27, 26, 25, .45);
}
/* Passepartout: gleichmaessiger Abstand auf allen vier Seiten.
   Der Versatz nach rechts unten sah nicht nach Absicht aus, sondern nach Fehler -
   oben und links lag die Linie fast auf der Kante, rechts und unten weit daneben. */
.co-philo__tafel::before {
  content: '';
  position: absolute;
  /* Eng an der Tafel - je knapper die Linie sitzt, desto edler wirkt sie.
     Weit aussen liest sie sich als zweiter Kasten statt als Fassung. */
  inset: -7px;
  border: 1px solid var(--co-ton, #C9AE9B);
  opacity: .75;
  pointer-events: none;
}

.co-philo__nummer {
  display: block;
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--co-ton, #C9AE9B);
  margin-bottom: clamp(14px, 1.6vw, 22px);
}

.co-philo__headline {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-weight: 400;
  font-size: clamp(25px, 2.8vw, 42px);
  line-height: 1.14;
  margin: 0 0 24px;
  text-wrap: balance;
}

.co-philo__absatz {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: clamp(15px, 1.1vw, 16.5px);
  line-height: 1.85; font-weight: 300;
  color: var(--co-tinte-2, #3D3835);
  margin: 0 0 18px;
  text-wrap: pretty;
}
/* Der erste Absatz traegt die Aussage - deshalb Serif und etwas groesser. */
.co-philo__absatz--lead {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.55;
  color: var(--co-tinte, #1B1A19);
  font-weight: 400;
}

.co-philo__signatur {
  display: flex; align-items: center; gap: 18px;
  margin-top: clamp(20px, 2.4vw, 32px);
}
.co-philo__linie { flex: 1; height: 1px; background: var(--co-ton, #C9AE9B); opacity: .7; }
.co-philo__schreib {
  font-family: var(--co-schreib, 'Alex Brush', cursive);
  font-size: clamp(26px, 2.4vw, 36px);
  color: var(--co-akzent, #8C6F5C);
  white-space: nowrap;
}

@media (max-width: 980px) {
  .co-philo { grid-template-columns: minmax(0, 1fr); padding-bottom: clamp(40px, 8vw, 80px); }
  .co-philo--rechts .co-philo__bild { order: 0; margin-right: 0; }
  .co-philo__bild { min-height: 0; margin-left: 0; }
  .co-philo__text,
  .co-philo--rechts .co-philo__text {
    margin: -48px clamp(16px, 5vw, 40px) 0;
    padding: 0;
  }
  .co-philo__marke { display: none; }
}