/* aufdenpunkt.ai – Artikelseiten "Wie ich denke" und Einzelseiten
   (Barrierefreiheit, Leichte Sprache).
   Von Hand gepflegt. Baut auf site.css auf (Tokens, Kopf, Fuß, Karten). */

.essay__wrap { max-width: 1200px; margin: 0 auto; padding: 0 56px; box-sizing: border-box; }

/* --- Kopf ------------------------------------------------------------ */
.essay__kopf { background: #eeebdd; border-bottom: 1px solid #e3e0cf; padding: 40px 0 64px; }
.essay__crumbs { margin-bottom: 40px; }
.essay__crumbs a { color: #736200; /* 5,05:1 auf #eeebdd */ font-weight: 600; font-size: .9375rem; }
.essay__crumbs a:hover { color: #2c2917; }
.essay__kopfgrid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: end; }
.essay__titel {
  margin: 16px 0 20px; max-width: 24ch;
  font-family: 'Source Serif 4', Georgia, serif; font-size: 3rem; font-weight: 300;
  line-height: 1.1; letter-spacing: -.02em; color: #2c2917; text-wrap: balance;
}
.essay__titel code, .essay__text code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .85em;
  background: #f1efe4; padding: 1px 6px;
}
.essay__teaser {
  margin: 0; max-width: 58ch;
  font-family: 'Source Serif 4', Georgia, serif; font-size: 1.375rem; font-weight: 300;
  line-height: 1.45; letter-spacing: -.01em; color: #676556; text-wrap: pretty;
}
.essay__meta { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 28px 0 0; font-size: .9375rem; color: #676556; max-width: none; }
.essay__meta span:first-child { font-weight: 600; color: #2c2917; }
.essay__icon { color: #2c2917; padding-bottom: 8px; }
.essay__icon .sketch { width: 96px; height: 96px; color: #2c2917; }

/* --- Text mit Kurzfassung daneben ------------------------------------ */
.essay__grid {
  display: grid; grid-template-columns: 260px minmax(0, 68ch); gap: 72px;
  padding-top: 64px; padding-bottom: 88px; justify-content: start;
}
/* Rasterelemente schrumpfen sonst nicht unter die Breite ihres breitesten
   Inhalts – eine Tabelle mit min-width sprengt dann die ganze Spalte. */
.essay__grid > *, .seite__body > * { min-width: 0; }
.essay__kurz { position: sticky; top: 104px; align-self: start; border-top: 2px solid #2c2917; padding-top: 16px; }
.essay__kurztitel {
  margin: 0 0 6px; font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #676556;
}
.essay__kurz ul { list-style: none; margin: 0; padding: 0; }
.essay__kurz li {
  position: relative; padding: 12px 0 12px 22px; border-bottom: 1px solid #ddd9c5;
  font-size: .9375rem; line-height: 1.55; color: #4a4837;
}
.essay__kurz li::before { content: ""; position: absolute; left: 0; top: 23px; width: 12px; height: 2px; background: #efcf00; }

.essay__text { font-size: 1.125rem; line-height: 1.7; color: #4a4837; }
.essay__text > * { max-width: none; }
.essay__text p { margin: 0 0 1.2em; }
.essay__text strong { font-weight: 600; color: #2c2917; }
.essay__text h2 {
  margin: 2.2em 0 .6em; font-family: 'Source Serif 4', Georgia, serif; font-size: 1.75rem; font-weight: 300;
  line-height: 1.25; letter-spacing: -.01em; color: #2c2917; text-wrap: balance;
}

/* Zitat: groß, Serif, mit dem gelben Strich der Eyebrows */
.essay__text blockquote { margin: 2em 0; padding: 0; }
.essay__text blockquote::before { content: ""; display: block; width: 40px; height: 2px; background: #efcf00; margin-bottom: 18px; }
.essay__text blockquote p {
  margin: 0; font-family: 'Source Serif 4', Georgia, serif; font-size: 1.75rem; font-weight: 300;
  line-height: 1.3; letter-spacing: -.01em; color: #2c2917; text-wrap: balance;
}

/* Handschriftliche Randnotiz wie auf der Startseite */
.essay__text .hand {
  margin: 1.6em 0; text-align: center; font-family: 'Caveat', cursive; font-size: 1.625rem; line-height: 1.3; color: #7d6b00;
}

.essay__text ul { list-style: none; margin: 0 0 1.4em; padding: 0; }
.essay__text ul li { position: relative; padding: 0 0 .5em 26px; }
.essay__text ul li::before { content: ""; position: absolute; left: 0; top: .82em; width: 14px; height: 2px; background: #efcf00; }

/* Nummerierte Schritte mit dem Sechseck der Startseite */
.essay__text ol.schritte { list-style: none; margin: 0 0 1.6em; padding: 0; counter-reset: schritt; border-bottom: 1px solid #ddd9c5; }
.essay__text ol.schritte li {
  counter-increment: schritt; position: relative; padding: 16px 0 16px 56px; border-top: 1px solid #ddd9c5;
}
.essay__text ol.schritte li::after {
  content: ""; position: absolute; left: 0; top: 14px; width: 34px; height: 39px; background: #efcf00;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.essay__text ol.schritte li::before {
  content: counter(schritt); position: absolute; z-index: 1; left: 1.5px; top: 15.75px; width: 31px; height: 35.5px;
  display: grid; place-items: center; font-family: 'Source Serif 4', Georgia, serif; font-size: 1.1875rem; color: #2c2917;
  background: #f7f5ec; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.essay__text pre {
  margin: 1.4em 0 1.6em; padding: 20px 24px; overflow-x: auto; background: #2c2917; color: #fefcf8;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .9375rem; line-height: 1.65;
}
.essay__text pre code { background: none; padding: 0; font-size: inherit; }

/* Automatisierungsspektrum: zwei Hälften, dazwischen die Linie, an der die
   Wegwahl vom Ablauf zum Modell übergeht. Bewusst als Text aufgebaut, nicht als
   Bild – so bleibt es vorlesbar und bricht auf dem Handy um. Die Hälften sind
   über ihre Stufennummern benannt, nicht über „links“ und „rechts“: Auf dem
   Handy stehen sie untereinander. */
.spektrum { margin: 2.4em 0; }
.spektrum__titel {
  margin: 0 0 16px !important; max-width: none; text-align: center;
  font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #57554a;
}
.spektrum__band { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; align-items: end; }
.spektrum__haelfte--agentisch { border-left: 2px solid #efcf00; padding-left: 24px; }
.spektrum__haelfte--agentisch .spektrum__pfeil { background: #fdf9e0; }
.spektrum__haelfte--agentisch .spektrum__nr { color: #7d6b00; }

.spektrum__label {
  margin: 0 0 4px !important; max-width: none; text-align: right;
  font-size: .9375rem; line-height: 1.4; color: #57554a;
}
.spektrum__label span { white-space: nowrap; color: #676556; }
.spektrum__haelfte--agentisch .spektrum__label { text-align: left; color: #2c2917; font-weight: 600; }
.spektrum__beginn {
  margin: 0 0 8px !important; max-width: none;
  font-size: .9375rem; font-weight: 600; color: #2c2917;
}

.spektrum ol {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px;
}
.spektrum li { display: grid; gap: 10px; align-content: start; text-align: center; }
.spektrum__pfeil {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px;
  min-height: 62px; padding: 10px 30px 10px 14px; background: #f1efe4;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
}
.spektrum li + li .spektrum__pfeil {
  padding-left: 26px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%);
}
.spektrum__nr { font-size: 1rem; font-weight: 600; color: #57554a; }
.spektrum__name {
  font-family: 'Source Serif 4', Georgia, serif; font-size: 1.0625rem; font-weight: 400;
  line-height: 1.2; letter-spacing: -.01em; color: #2c2917; text-wrap: balance;
}
.spektrum__text { font-size: .9375rem; line-height: 1.5; color: #57554a; padding: 0 4px; text-wrap: pretty; }
.spektrum figcaption { margin: 14px auto 0; max-width: 64ch; font-size: .9375rem; line-height: 1.55; color: #676556; text-align: center; }

/* Breite Bildschirme: den freien Raum rechts neben der Textspalte nutzen. */
@media (min-width: 1100px) { .spektrum { width: calc(100% + 180px); } }

@media (max-width: 860px) {
  .spektrum { width: auto; }
  /* Untereinander statt nebeneinander – aus der senkrechten Linie wird eine
     waagerechte, und „Hier beginnt agentische KI.“ steht weiter an ihr. */
  .spektrum__band { grid-template-columns: 1fr; gap: 20px; align-items: stretch; }
  .spektrum__haelfte--agentisch { border-left: 0; padding-left: 0; border-top: 2px solid #efcf00; padding-top: 16px; }
  .spektrum__label, .spektrum__haelfte--agentisch .spektrum__label { text-align: left; }
  .spektrum__label span { display: block; }
  .spektrum ol { grid-template-columns: 1fr; gap: 14px; }
  .spektrum li { text-align: left; gap: 6px; }
  .spektrum__pfeil, .spektrum li + li .spektrum__pfeil { clip-path: none; padding: 12px 16px; min-height: 0; }
  .spektrum figcaption { text-align: left; }
}

/* Tabelle: auf dem Handy waagerecht scrollbar statt gequetscht */
.tabelle { margin: 1.4em 0 1.8em; overflow-x: auto; }
.tabelle table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.55; }
/* Mindestbreite nur dort, wo die Spalte wirklich zu schmal wird. Auf dem
   Monitor ist die Textspalte breit genug – eine feste Mindestbreite erzwänge
   sonst einen Rollbalken für wenige Pixel. */
@media (max-width: 700px) { .tabelle table { min-width: 440px; } }
.tabelle caption { caption-side: bottom; text-align: left; padding-top: 10px; color: #676556; font-size: .875rem; }
.tabelle th, .tabelle td { padding: 12px 14px 12px 0; border-bottom: 1px solid #ddd9c5; text-align: left; vertical-align: top; }
.tabelle thead th { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #676556; border-bottom-color: #2c2917; }
.tabelle tbody th { font-weight: 600; color: #2c2917; }

/* --- Autor ----------------------------------------------------------- */
.essay__autor { background: #2c2917; color: rgba(254, 252, 248, .82); padding: 48px 0; }
.essay__autorgrid { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 32px; align-items: center; }
/* Volles Hochformat (3:4) statt quadratischem Ausschnitt – sonst unten angeschnitten. */
.essay__autorgrid img { width: 120px; height: auto; display: block; border: 1px solid rgba(254, 252, 248, .2); }
.essay__autortitel { margin: 0 0 6px; font-family: 'Source Serif 4', Georgia, serif; font-size: 1.375rem; font-weight: 300; color: #fefcf8; }
.essay__autor p { margin: 0; font-size: 1.0625rem; line-height: 1.62; max-width: 60ch; }
/* Offenlegung: Gedanken von Tobias, Formulierung mit KI. */
.essay__ki { margin-top: 14px !important; padding-top: 12px; border-top: 1px solid rgba(239, 207, 0, .55);
  font-size: .9375rem !important; line-height: 1.55 !important; color: rgba(254, 252, 248, .78); max-width: 62ch; }
.essay__autor :focus-visible { outline-color: #fefcf8; }

/* --- Weiterlesen ----------------------------------------------------- */
.essay__weiter { background: #e2dfcb; padding: 72px 0 84px; }
.essay__weitertitel {
  margin: 0; font-family: 'Source Serif 4', Georgia, serif; font-size: 2.5rem; font-weight: 300;
  line-height: 1.12; letter-spacing: -.02em; color: #2c2917;
}
.essay__karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }

/* --- Einzelseiten ---------------------------------------------------- */
.seite__body { padding-top: 56px; padding-bottom: 96px; }
.seite__text { max-width: 72ch; }
.seite__text mark, .essay__text mark { background: #faf3cc; color: inherit; padding: 0 4px; box-shadow: inset 0 -1px 0 #e3c84a; }
.seite__text a, .ls a { color: #2c2917; font-weight: 600; border-bottom: 1px solid #efcf00; }
.seite__text a:hover, .ls a:hover { color: #736200; }
.seite__text abbr { text-decoration: none; }

/* Leichte Sprache: große Schrift, ein Satz pro Zeile, linksbündig,
   ein Bild-Symbol je Abschnitt, viel Abstand. */
.ls { max-width: 44em; font-size: 1.25rem; font-weight: 400; line-height: 1.6; color: #2c2917; } /* normale statt dünner Schrift: besser lesbar */
.ls__abschnitt { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 28px; padding: 36px 0; border-top: 1px solid #ddd9c5; }
.ls__abschnitt:first-child { border-top: 0; padding-top: 0; }
.ls__icon .sketch { width: 56px; height: 56px; color: #2c2917; }
.ls h2 {
  margin: 0 0 16px; font-family: 'Source Serif 4', Georgia, serif; font-size: 1.875rem; font-weight: 400;
  line-height: 1.25; color: #2c2917;
}
.ls h3 {
  margin: 28px 0 10px; font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 1.375rem; font-weight: 600;
  line-height: 1.3; color: #2c2917;
}
.ls p { margin: 0 0 6px; max-width: none; }
.ls ul { list-style: none; margin: 8px 0 14px; padding: 0; }
.ls li { position: relative; padding: 4px 0 4px 30px; }
.ls li::before { content: ""; position: absolute; left: 0; top: 1em; width: 16px; height: 3px; background: #efcf00; }
.ls strong { font-weight: 600; }
.ls__merke { margin: 14px 0 !important; padding: 14px 20px; background: #eeebdd; border-left: 4px solid #2c2917; font-weight: 600; }
.seite--leicht .essay__teaser { font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 1.375rem; color: #4a4837; }

/* --- Schmal ---------------------------------------------------------- */
@media (max-width: 900px) {
  .essay__kopfgrid, .essay__grid, .essay__autorgrid, .essay__karten { grid-template-columns: 1fr; }
  .essay__grid { gap: 40px; padding-top: 40px; padding-bottom: 64px; }
  .essay__icon { display: none; }
  .essay__kurz { position: static; }
  .essay__titel { font-size: 2.25rem; }
  .essay__teaser { font-size: 1.1875rem; }
  .essay__autorgrid { gap: 20px; justify-items: start; }
  .essay__autorgrid img { width: 104px; }
  .essay__weitertitel { font-size: 2rem; }
  .spektrum ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spektrum li:nth-child(3) { border-left: 0; }
}
@media (max-width: 640px) {
  .ls__abschnitt { grid-template-columns: 1fr; gap: 12px; }
  .ls { font-size: 1.1875rem; }
  .essay__titel { font-size: 2rem; }
  .essay__text { font-size: 1.0625rem; }
  .essay__text blockquote p { font-size: 1.4rem; }
  .spektrum ol { grid-template-columns: 1fr; }
  .spektrum li { border-left: 0; }
}