/* ============================================================
   TUTORIALS — Seitentyp /webdesign-lernen/…
   Geladen nach style.css, webdesign.css und kontakt.css.
   Präfix tu- (wie auf /webdesign-lernen/theme-umschalten/).
   Nur Tokens aus style.css, keine eigenen :root-Werte.
   Beschreibung und Markup: _docs/DESIGN.md, Abschnitt „Tutorials“.
   ============================================================ */

/* ---------- Kopf (kt-hero aus kontakt.css) ---------- */
.tu-hero{ overflow:hidden; }
.tu-hero > *:not(.tu-hero-image){ position:relative; z-index:1; }
.tu-hero .kt-hero-lead{ max-width:52ch; }
.tu-hero-image{
  position:absolute; right:6vw; bottom:60px; z-index:0;
  width:min(34vw,460px); height:auto; aspect-ratio:3/2; object-fit:cover;
  border-radius:18px; opacity:.9;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
}
.tu-crumb{ color:inherit; }
.tu-crumb:hover, .tu-crumb:focus-visible{ color:var(--glow); }

/* ---------- Artikel (dunkle Textsektion) ---------- */
.tu-article{ max-width:980px; color:#C8C8C8; font-size:1rem; line-height:1.75; }
.tu-article > * + *{ margin-top:18px; }
.tu-article h2{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.6rem,3.2vw,2.3rem); line-height:1.1; letter-spacing:-.01em;
  color:var(--red-light); margin-top:70px; scroll-margin-top:30px;
}
.tu-article h3{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.15rem,2vw,1.45rem); line-height:1.25; color:var(--white);
  margin-top:44px; scroll-margin-top:30px;
}
.tu-article h4{
  font-family:var(--font-display); font-weight:600; font-size:1.05rem;
  color:var(--glow); margin-top:30px;
}
.tu-article strong{ color:var(--white); font-weight:700; }
.tu-article a{ color:var(--glow); text-decoration:underline; text-underline-offset:3px; }
.tu-article a:hover, .tu-article a:focus-visible{ color:var(--white); }
.tu-article ul, .tu-article ol{ padding-left:1.3rem; }
.tu-article li + li{ margin-top:8px; }
.tu-article li::marker{ color:var(--red-light); }
.tu-article :not(pre) > code, .tu-article kbd{
  font-family:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size:.88em; background:rgba(255,255,255,.1); color:var(--glow);
  padding:.08em .38em; border-radius:4px; overflow-wrap:anywhere;
}
.tu-article kbd{ border:1px solid rgba(255,255,255,.25); border-bottom-width:2px; color:var(--white); }
.tu-article img{ max-width:100%; height:auto; border-radius:12px; }
.tu-article figure{ margin:30px 0; }
.tu-article figcaption{ margin-top:10px; font-size:.85rem; color:var(--text-mid); }

/* Hinweis-/Merkkasten */
.tu-note{
  border-left:3px solid var(--red-light); background:rgba(102,153,0,.1);
  padding:18px 22px; border-radius:0 12px 12px 0; color:var(--mist);
}
.tu-note p + p{ margin-top:10px; }

/* Inhaltsverzeichnis */
.tu-toc{
  border:1px solid rgba(255,255,255,.14); border-radius:16px;
  background:rgba(255,255,255,.03); padding:26px 30px; margin-bottom:20px;
}
.tu-toc-title{
  font-family:var(--font-body); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-mid);
}
.tu-toc ol{ margin-top:12px; columns:2; column-gap:40px; padding-left:1.2rem; }
.tu-toc li{ break-inside:avoid; }
.tu-toc a{ text-decoration:none; color:var(--mist); }
.tu-toc a:hover, .tu-toc a:focus-visible{ color:var(--glow); }

/* Tabellen */
.tu-table-wrap{ overflow-x:auto; border:1px solid rgba(255,255,255,.14); border-radius:12px; }
.tu-article table{ width:100%; border-collapse:collapse; font-size:.92rem; }
.tu-article th, .tu-article td{ padding:12px 16px; text-align:left; vertical-align:top; border-bottom:1px solid rgba(255,255,255,.1); }
.tu-article th{ font-family:var(--font-display); font-weight:600; color:var(--white); background:rgba(255,255,255,.05); }
.tu-article tr:last-child td{ border-bottom:none; }

/* ---------- Code-Blöcke (wie theme-umschalten.css, plus Sprachlabel) ---------- */
.tu-code-block{ margin:16px 0 28px; }
.tu-code-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.4rem; gap:12px; }
.tu-code-lang{
  font-family:var(--font-body); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-mid);
}
.tu-copy{
  border:1px solid var(--red-light); background:transparent; color:var(--glow);
  font-size:.8rem; font-weight:600; padding:.4rem .85rem; border-radius:999px;
  cursor:pointer; flex:0 0 auto; transition:background .2s ease, color .2s ease;
}
.tu-copy:hover, .tu-copy:focus-visible{ background:var(--red); border-color:var(--red); color:var(--white); }
.tu-copy.is-copied{ background:var(--red-deep); border-color:var(--red-deep); color:var(--white); }
.tu-code-block pre{
  margin:0; padding:1rem 1.1rem; border-radius:12px;
  background:var(--black-soft); border:1px solid rgba(255,255,255,.08); overflow-x:auto;
}
.tu-code-block code{
  font-family:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size:.85rem; line-height:1.55; color:#e7efe0; white-space:pre;
}

/* ---------- Live-Beispiele im Artikel ---------- */
.tu-demo-box{
  border:1px dashed rgba(153,204,0,.45); border-radius:12px; padding:16px;
  background:rgba(255,255,255,.03); margin:16px 0 6px;
}
.tu-demo-box > div > div, .tu-demo-box .tu-item{
  background:var(--red); color:var(--white); padding:14px; border-radius:8px;
  font-family:var(--font-display); font-weight:600; font-size:.9rem; text-align:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}
.tu-demo-label{
  display:block; margin-top:4px; font-size:.75rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-mid);
}

/* ---------- Tool-Sektion (helle .wdp-lst-Fläche) ---------- */
.tu-tool .tu-panel{
  max-width:1100px; background:var(--white); color:var(--black);
  border:1px solid rgba(0,0,0,.1); border-radius:18px; padding:34px;
  box-shadow:0 20px 50px -35px rgba(0,0,0,.35);
}
.tu-panel label{ display:block; font-weight:600; font-size:.9rem; margin:16px 0 6px; }
.tu-panel input[type="text"], .tu-panel input[type="url"], .tu-panel input[type="number"],
.tu-panel input[type="search"], .tu-panel textarea, .tu-panel select{
  width:100%; border:1px solid rgba(0,0,0,.2); border-radius:10px; padding:12px 14px;
  font-family:var(--font-body); font-size:.95rem; background:var(--white); color:var(--black);
}
.tu-panel textarea{ min-height:160px; font-family:"SFMono-Regular", Consolas, Menlo, monospace; font-size:.85rem; }
.tu-panel input:focus, .tu-panel textarea:focus, .tu-panel select:focus{
  outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(76,115,0,.18);
}
.tu-btn{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  border:1px solid var(--red); background:var(--red); color:var(--white);
  font-family:var(--font-body); font-weight:600; font-size:.9rem;
  padding:.7rem 1.3rem; border-radius:999px; cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.tu-btn:hover, .tu-btn:focus-visible{ background:var(--red-deep); border-color:var(--red-deep); }
.tu-btn--ghost{ background:var(--white); color:var(--red); }
.tu-btn--ghost:hover, .tu-btn--ghost:focus-visible{ color:var(--white); }
.tu-panel-grid{ display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.tu-panel .tu-out{ margin-top:16px; }
.tu-panel-hint{ font-size:.85rem; color:#5A5A5A; margin-top:8px; }

/* ---------- Übersicht /webdesign-lernen/ ---------- */
.tu-index .wdp-tut-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  overflow:visible; scroll-snap-type:none; gap:24px;
}
.tu-index .wdp-tut-grid::after{ content:none; }
.tu-index .wdp-tut-card{ flex:none; }
.tu-index .wdp-tut-media img{ height:auto; }
.tu-index .wdp-tut-card[hidden]{ display:none; }
.tu-filter{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:34px; }
.tu-filter-btn{
  border:1px solid rgba(0,0,0,.18); background:var(--white); color:var(--black);
  font-family:var(--font-body); font-size:.85rem; font-weight:600;
  padding:.5rem 1rem; border-radius:999px; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.tu-filter-btn:hover, .tu-filter-btn:focus-visible, .tu-filter-btn[aria-pressed="true"]{
  background:var(--red); border-color:var(--red); color:var(--white);
}
.tu-search{
  margin-left:auto; min-width:240px; border:1px solid rgba(0,0,0,.2); border-radius:999px;
  padding:.55rem 1.1rem; font-family:var(--font-body); font-size:.9rem; background:var(--white);
}
.tu-search:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(76,115,0,.18); }
.tu-empty{ color:#5A5A5A; margin-top:20px; }

@media (max-width:900px){
  .tu-hero-image{
    position:relative; right:auto; bottom:auto; display:block;
    width:100%; max-width:520px; margin:36px 0 0;
  }
  .tu-toc ol{ columns:1; }
  .tu-panel-grid{ grid-template-columns:1fr; }
  .tu-tool .tu-panel{ padding:22px; }
  .tu-search{ margin-left:0; width:100%; }
}

/* Tool steht vor dem Artikel (Meta tool_first) → Artikel braucht eigenen Abstand oben */
.tu-tool + .tu-article-section{ padding-top:110px; }

/* ---------- Farb-Tools (Kontrast-Checker, Farbpalette) ---------- */
.tu-color-row{ display:flex; gap:10px; align-items:center; }
.tu-panel input[type="color"]{
  width:52px; height:46px; padding:3px; border:1px solid rgba(0,0,0,.2); border-radius:10px;
  background:var(--white); cursor:pointer; flex:0 0 auto;
}
.tu-result{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:22px; }
.tu-result-box{ border:1px solid rgba(0,0,0,.12); border-radius:12px; padding:14px 16px; }
.tu-result-box span{ display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#5A5A5A; }
.tu-result-box strong{ display:block; margin-top:4px; font-family:var(--font-display); font-size:1.4rem; }
.tu-preview{ border-radius:12px; padding:22px; margin-top:16px; border:1px solid rgba(0,0,0,.12); }
.tu-preview-small{ font-size:1rem; }
.tu-preview-large{ font-size:1.5rem; font-weight:700; margin-top:8px; }
.tu-panel table{ width:100%; border-collapse:collapse; margin-top:18px; font-size:.92rem; }
.tu-panel th, .tu-panel td{ padding:10px 12px; border-bottom:1px solid rgba(0,0,0,.1); text-align:left; }
.tu-pass{ color:var(--red); font-weight:700; }
.tu-fail{ color:#B00020; font-weight:700; }

/* ---------- Autorenzeile im Tutorial-Kopf (Autor + Aktualisierungsdatum) ---------- */
.tu-byline{
  margin-top:18px; font-family:var(--font-body); font-size:.82rem; color:var(--mist);
  padding-left:24px;
}
.tu-byline a{ color:var(--white); text-decoration:underline; text-underline-offset:3px; }
.tu-byline a:hover, .tu-byline a:focus-visible{ color:var(--glow); }

/* ---------- Weiterlernen-Kasten am Artikelende (interne Verlinkung) ---------- */
.tu-more{
  margin-top:60px; padding:26px 30px; border-radius:16px;
  border:1px solid rgba(102,153,0,.45); background:rgba(102,153,0,.08);
}
.tu-more-title{
  font-family:var(--font-body); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--glow);
}
.tu-more p + p{ margin-top:12px; }
.tu-more-service{ color:var(--mist); border-top:1px solid rgba(255,255,255,.12); padding-top:12px; }

/* ---------- Hinweis-Toast beim Kopieren (tutorial.js, window.tuToast) ---------- */
.tu-toast{
  position:fixed; left:50%; bottom:28px; z-index:10000;
  transform:translate(-50%, 20px); opacity:0; pointer-events:none;
  max-width:min(92vw, 560px); padding:14px 22px; border-radius:14px;
  background:var(--black); color:var(--white); border:1px solid var(--glow);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.7);
  font-family:var(--font-body); font-size:.95rem; line-height:1.45; text-align:center;
  transition:opacity .25s ease, transform .25s ease;
}
.tu-toast.is-visible{ opacity:1; transform:translate(-50%, 0); }
.tu-toast.is-error{ border-color:#FF8A8A; }
@media (prefers-reduced-motion: reduce){ .tu-toast{ transition:none; } }