/* =========================================================
   ma-ki.io, Ergaenzungen der Startseite. Neu am 16.09.2026, im Stil
   des Templates "Cabe". Alles Uebrige (Kopfleiste, Eintraege,
   Lesereisen, Knoepfe, Fuss) steht in style.css.

   Reihenfolge:
     1 Kopfbereich mit Portraet
     2 Liste der neuesten Beitraege
     3 Beweiszeile
     4 Abschnittstitel
     5 Werkstatt-Hinweis
     6 Schmale Bildschirme
   ========================================================= */

/* ---------- 1 Kopfbereich ----------
   Wie Cabe: Flaeche mit 30 Pixel Rand, rundes Portraet 400 Pixel mit
   weissem Rahmen, grosse Aussage. Abweichung auf Martins Wunsch: schwarze
   Flaeche, Schrift weiss, hinter dem Portraet ein weicher Lichtschein im
   Goldgelb der Titelkarten. Kein Gitter, kein Muster. Der Schein ist ein
   Schatten am Portraet selbst und sitzt so bei jeder Breite richtig. */
.buehne{margin:30px 30px 0;padding:80px 0 50px;background-color:#111;color:#fff;overflow:hidden}
.buehne .mitte{display:grid;grid-template-columns:400px minmax(0,1fr);gap:75px;align-items:center;max-width:1060px}
.avatar{width:400px;height:400px;border-radius:50%;border:4px solid #fff;object-fit:cover;
  box-shadow:0 0 120px 40px rgba(232,197,71,.16),0 0 260px 120px rgba(232,197,71,.07);background:#fff}
.buehne .kenn{margin:0 0 18px;font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#CFCFCB}
.buehne h1{margin:0;font-size:70px;line-height:80px;font-weight:700;color:#fff;letter-spacing:0;text-wrap:balance}
.buehne h1 u{display:block;text-decoration:none;color:#E8C547}
.buehne .unter{margin:20px 0 0;font-size:32px;line-height:48px;font-weight:300;color:#fff;max-width:none}
/* Wie bei Cabe tippt sich im Satz unter der Ueberschrift ein Wort ein und
   loescht sich wieder, hier die drei Teile des Satzes in Goldgelb. Ohne
   Skript und bei "weniger Bewegung" steht der ganze Satz still da.
   Vorleseprogramme lesen immer den ganzen Satz (.unter-ganz), die
   getippte Fassung ist fuer sie ausgeblendet. */
.unter-tipp{display:none}
html.js .unter-tipp{display:inline}
html.js .unter-ganz{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.buehne .unter{min-height:96px}
.tipp{font-weight:400;color:#E8C547}
.tipp::after{content:"";display:inline-block;width:2px;height:.95em;margin-left:3px;vertical-align:-.1em;background:#E8C547;animation:tipp-strich 1s steps(1) infinite}
@keyframes tipp-strich{50%{opacity:0}}

/* Kopfbereich blendet beim Laden gestaffelt ein, wie die has-animation bei Cabe */
@keyframes buehne-herein{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.buehne picture,.buehne .kenn,.buehne h1,.buehne .unter,.buehne .symbole{animation:buehne-herein .8s cubic-bezier(.2,.7,.2,1) both}
.buehne .kenn{animation-delay:.12s}
.buehne h1{animation-delay:.22s}
.buehne .unter{animation-delay:.34s}
.buehne .symbole{animation-delay:.46s}
@media (prefers-reduced-motion:reduce){
  html.js .unter-tipp{display:none}
  html.js .unter-ganz{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}
  .buehne picture,.buehne .kenn,.buehne h1,.buehne .unter,.buehne .symbole{animation:none}
}
.symbole{display:flex;gap:12px;margin:30px 0 0;padding:0;list-style:none}
.symbole a{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.35);color:#fff;background:transparent}
.symbole a:hover,.symbole a:focus-visible{color:#111;background:#fff;border-color:#fff}
.symbole svg{width:17px;height:17px}

/* Zertifizierung unten im Kopfbereich: Siegel und Abzeichen auf weissen
   Scheiben, weil das Siegel schwarze Linien auf durchsichtigem Grund hat
   und auf Schwarz sonst verschwindet. Im Fuss steht dasselbe noch einmal. */
.buehne .mitte.zertifiziert{display:flex;align-items:center;gap:18px;margin-top:80px !important;padding-top:32px;
  border-top:1px solid rgba(255,255,255,.14);animation:buehne-herein .8s cubic-bezier(.2,.7,.2,1) .58s both}
.zert-scheibe{display:grid;place-items:center;width:92px;height:92px;border-radius:50%;background:#fff;flex:none}
.zert-scheibe img{width:70px;height:70px;object-fit:contain}
.zertifiziert p{margin:0 0 0 6px;line-height:1.5}
.zertifiziert b{display:block;font-size:19px;font-weight:700;color:#E8C547}
.zertifiziert span:not(.zert-scheibe){display:block;font-size:15px;color:#CFCFCB}
@media (prefers-reduced-motion:reduce){.zertifiziert{animation:none}}

/* Worauf das hier beruht: kurzer Absatz unter der Kopfleiste, ruhig und
   in der Breite der Beitragsliste, mit goldgelbem Strich links. */
main > section.grundlage{padding-block:56px 0}
.grundlage .mitte{max-width:960px}
.grundlage .schild{margin-bottom:12px}
.grundlage-text{margin:0;padding-left:22px;border-left:3px solid var(--gold);font-size:19px;line-height:1.75;color:#111;max-width:760px}
.grundlage-link{margin:14px 0 0 25px;font-size:14px;font-weight:500}
.grundlage-link a{color:#111;text-decoration:none;background-image:linear-gradient(var(--gold),var(--gold));background-repeat:no-repeat;background-position:0 100%;background-size:100% 2px;padding-bottom:2px}
.grundlage-link a::after{content:" →"}
.grundlage-link a:hover{background-size:100% 100%}
.grundlage + .liste{margin-top:80px;padding-top:70px;border-top:1px solid var(--linie) !important}
/* Ueberschrift ueber der Liste, buendig mit Titel und Text der Eintraege */
.liste-kopf{max-width:920px;margin:0 auto 60px;text-align:center}
.liste-kopf .abschnitt-titel{margin:0;font-size:46px;line-height:56px}

/* ---------- 2 Neueste Beitraege ---------- */
.liste{padding-block:75px 80px}
.alle{margin:70px 0 0;text-align:center}
.alle-satz{margin:16px 0 0;text-align:center;font-size:14px;color:var(--grau)}

/* ---------- 3 Beweiszeile ---------- */
.beweis{background:var(--flaeche);padding-block:55px;border-top:0 !important}
.beweis .mitte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;max-width:960px;text-align:center}
.beweis b{display:block;font-size:56px;line-height:1;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.beweis span{display:block;margin-top:12px;font-size:14px;line-height:1.5;color:var(--grau)}
.beweis + section{border-top:0 !important}

/* ---------- 4 Abschnittstitel ---------- */
.abschnitt-titel{margin:0 0 40px;font-size:36px;line-height:46px;font-weight:700;color:#000}

/* ---------- 5 Werkstatt-Hinweis ---------- */
.werkstatt-hinweis{background:var(--flaeche);padding-block:70px;border-top:0 !important}
.werkstatt-hinweis .mitte{display:flex;justify-content:space-between;align-items:center;gap:40px;max-width:960px}
.werkstatt-hinweis .abschnitt-titel{margin-bottom:14px}
.werkstatt-hinweis p:not(.schild){margin:0;max-width:56ch;color:var(--text-2)}
.werkstatt-hinweis ~ footer,main:has(.werkstatt-hinweis:last-child) + footer{border-top:1px solid var(--linie-2)}

/* ---------- 6 Schmale Bildschirme ---------- */
@media (max-width:1100px){
  .buehne .mitte{grid-template-columns:300px minmax(0,1fr);gap:50px}
  .avatar{width:300px;height:300px}
  .buehne h1{font-size:48px;line-height:58px}
  .buehne .unter{font-size:24px;line-height:38px}
}
@media (max-width:860px){
  .buehne{margin:12px 12px 0;padding:56px 0 36px}
  main > section.grundlage{padding-block:40px 0}
  .grundlage + .liste{margin-top:50px;padding-top:44px}
  .liste-kopf{margin-bottom:36px}
  .liste-kopf .abschnitt-titel{font-size:30px;line-height:38px}
  .grundlage-text{font-size:17px;padding-left:16px}
  .grundlage-link{margin-left:19px}
  .buehne .mitte{grid-template-columns:minmax(0,1fr);text-align:center;justify-items:center;gap:26px}
  .avatar{width:210px;height:210px;border-width:3px}
  .buehne h1{font-size:34px;line-height:42px}
  .buehne .unter{font-size:20px;line-height:32px;margin-inline:auto;min-height:64px}
  .symbole{justify-content:center}
  .buehne .mitte.zertifiziert{flex-wrap:wrap;justify-content:center;text-align:center;margin-top:40px !important}
  .zertifiziert p{margin:4px 0 0;flex-basis:100%}
  .liste{padding-block:50px}
  .alle{margin-top:50px}
  .beweis .mitte{grid-template-columns:minmax(0,1fr);gap:26px}
  .beweis b{font-size:44px}
  .abschnitt-titel{font-size:24px;line-height:32px;margin-bottom:24px}
  .werkstatt-hinweis .mitte{flex-direction:column;align-items:flex-start}
}