/* ==========================================================================
   Weblandschaften — Campus-Anleitungen (campus-*.html)
   baut auf proto.css + portal.css auf.

   WOFUER
   Schritt-fuer-Schritt-Anleitungen im Kundenportal. Alle Anleitungen teilen
   sich diese Datei, damit sie gleich aussehen und an EINER Stelle gepflegt
   werden. Portal- und Basis-CSS bleiben unberuehrt.

   KONTRAST
   Kein color:#fff auf hellem Grund, auch nicht im :hover. Die Marken-Gruen
   #19C37D ist hell; als FLAECHE ist sie richtig (Schrift darauf ist dann
   --accent-ink, also fast schwarz), als SCHRIFT auf Weiss waere sie zu blass.
   Fuer gruene Schrift auf hellem Grund gibt es deshalb --gd-green-ink, einen
   dunklen Ton derselben Farbe.

   SCHRIFTGROESSEN fuer Handys stehen hier bewusst nicht drin. Die regelt
   portal.css zentral. Die Media-Queries unten aendern nur das Layout.
   ========================================================================== */

.gd{ --gd-green-ink:#0A6E44; max-width:960px }

/* ---- Kopf ------------------------------------------------------------- */
.gd-hero{
  padding:28px 30px;border:1px solid var(--line);border-radius:var(--r-xl);
  background:linear-gradient(150deg,var(--accent-soft),#EAF1FE);
}
.gd-hero .k{
  display:inline-flex;align-items:center;gap:9px;font-size:.76rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gd-green-ink);
}
.gd-hero .k i{width:7px;height:7px;border-radius:50%;background:var(--accent);display:block}
.gd-hero h2{font-size:1.6rem;color:var(--ink);margin:12px 0 0;line-height:1.15}
.gd-hero .lead{color:var(--muted);font-size:.98rem;line-height:1.6;margin-top:10px;max-width:60ch}
.gd-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.gd-tag{
  display:inline-flex;align-items:center;gap:8px;background:var(--canvas-2);
  border:1px solid var(--line);border-radius:999px;padding:7px 13px;
  font-size:.81rem;color:var(--muted);white-space:nowrap;
}
.gd-tag b{color:var(--ink);font-weight:600}
.gd-tag svg{width:15px;height:15px;color:var(--gd-green-ink)}

/* ---- Abschnittsueberschriften ----------------------------------------- */
.gd-h{
  margin:38px 0 12px;color:var(--ink);font-family:var(--font-d);
  font-weight:700;font-size:1.22rem;line-height:1.2;
}
.gd-h .n{color:var(--gd-green-ink);font-weight:700;margin-right:9px}
.gd-sub{color:var(--muted);font-size:.92rem;line-height:1.6;margin:-4px 0 16px;max-width:62ch}

/* ---- Textblock --------------------------------------------------------- */
.gd-panel{
  padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--canvas-2);box-shadow:var(--shadow);
}
.gd-panel p{color:var(--muted);font-size:.95rem;line-height:1.68}
.gd-panel p+p{margin-top:11px}
.gd-panel p strong,.gd-panel li strong{color:var(--ink);font-weight:600}

/* ---- Voraussetzungen / Pruefliste / Aufzaehlungen ---------------------- */
.gd-list{list-style:none;margin:0}
.gd-list li{
  display:flex;gap:13px;align-items:flex-start;padding:12px 0;
  border-bottom:1px solid var(--line);color:var(--muted);
  font-size:.93rem;line-height:1.6;
}
.gd-list li:first-child{padding-top:0}
.gd-list li:last-child{border-bottom:0;padding-bottom:0}
.gd-list li b{color:var(--ink);font-weight:600}
.gd-list .ic{
  width:24px;height:24px;border-radius:8px;flex-shrink:0;margin-top:1px;
  background:var(--accent-soft);color:var(--gd-green-ink);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;
}
.gd-list .ic svg{width:14px;height:14px}

/* ---- Fortschritt ------------------------------------------------------- */
.gd-prog{
  position:sticky;top:8px;z-index:30;display:flex;align-items:center;gap:16px;
  flex-wrap:wrap;margin:20px 0 4px;padding:14px 18px;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--canvas-2);box-shadow:var(--shadow-md);
}
.gd-prog .t{font-size:.88rem;font-weight:600;color:var(--ink);white-space:nowrap}
.gd-prog .track{flex:1;min-width:130px;height:8px;border-radius:5px;background:#EEF1F7;overflow:hidden}
.gd-prog .track i{display:block;height:100%;width:0;background:var(--accent);border-radius:5px;transition:width .25s ease}
.gd-reset{
  font-family:inherit;font-size:.82rem;font-weight:600;color:var(--muted);
  background:var(--canvas-2);border:1px solid var(--line);border-radius:9px;
  padding:8px 14px;cursor:pointer;transition:.15s;white-space:nowrap;
}
.gd-reset:hover{border-color:var(--accent);color:var(--gd-green-ink);background:var(--glass)}
.gd-reset:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gd-prog.full .t{color:var(--gd-green-ink)}

/* ---- Schritte ---------------------------------------------------------- */
.gd-steps{list-style:none;display:flex;flex-direction:column;gap:12px;margin:16px 0 0}
.gd-step{
  display:grid;grid-template-columns:auto 1fr;gap:18px;padding:21px 23px;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--canvas-2);box-shadow:var(--shadow);transition:.18s;
}
.gd-step.done{border-color:rgba(25,195,125,.42);background:linear-gradient(180deg,var(--accent-soft),var(--canvas-2) 62%)}
.gd-num{
  width:36px;height:36px;border-radius:11px;flex-shrink:0;
  background:var(--glass);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-d);font-weight:700;font-size:.94rem;color:var(--muted);
}
.gd-step.done .gd-num{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.gd-step h3{color:var(--ink);font-size:1.05rem;line-height:1.25;margin:6px 0 0}
.gd-step p{color:var(--muted);font-size:.94rem;line-height:1.68;margin-top:9px}
.gd-step ul{list-style:none;margin:11px 0 0}
.gd-step ul li{
  color:var(--muted);font-size:.92rem;line-height:1.6;
  padding-left:18px;position:relative;margin-top:7px;
}
.gd-step ul li::before{
  content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--accent);
}

/* Erledigt-Haken */
.gd-done{
  margin-top:15px;display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-size:.85rem;font-weight:600;color:var(--muted);user-select:none;
}
.gd-done input{
  appearance:none;-webkit-appearance:none;margin:0;width:21px;height:21px;flex-shrink:0;
  border:1.6px solid var(--line);border-radius:6px;background:var(--canvas-2);
  cursor:pointer;display:grid;place-items:center;transition:.15s;
}
.gd-done input:hover{border-color:var(--accent)}
.gd-done input:checked{background:var(--accent);border-color:var(--accent)}
.gd-done input:checked::after{content:"✓";color:var(--accent-ink);font-size:.82rem;font-weight:800;line-height:1}
.gd-done input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gd-step.done .gd-done{color:var(--gd-green-ink)}

/* ---- Hinweiskasten ----------------------------------------------------- */
.gd-note{
  margin-top:14px;padding:13px 16px;border-radius:var(--r-sm);
  background:var(--glass);border-left:3px solid var(--accent);
  color:var(--muted);font-size:.88rem;line-height:1.62;
}
.gd-note b{display:block;color:var(--ink);font-size:.83rem;font-weight:700;margin-bottom:4px}
.gd-note.warn{border-left-color:var(--warn);background:rgba(217,119,6,.07)}
.gd-note.info{border-left-color:var(--info);background:rgba(37,99,235,.06)}

/* ---- Pruefliste zum Abhaken -------------------------------------------- */
.gd-checks{list-style:none;margin:0}
.gd-checkrow{
  display:flex;align-items:flex-start;gap:13px;padding:12px 0;
  border-bottom:1px solid var(--line);
}
.gd-checkrow:last-child{border-bottom:0}
.gd-checkrow label{
  display:flex;align-items:flex-start;gap:13px;cursor:pointer;
  color:var(--muted);font-size:.93rem;line-height:1.6;
}
.gd-checkrow input{
  appearance:none;-webkit-appearance:none;margin:1px 0 0;width:20px;height:20px;flex-shrink:0;
  border:1.6px solid var(--line);border-radius:6px;background:var(--canvas-2);
  cursor:pointer;display:grid;place-items:center;transition:.15s;
}
.gd-checkrow input:hover{border-color:var(--accent)}
.gd-checkrow input:checked{background:var(--accent);border-color:var(--accent)}
.gd-checkrow input:checked::after{content:"✓";color:var(--accent-ink);font-size:.78rem;font-weight:800;line-height:1}
.gd-checkrow input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gd-checkrow.done label{color:var(--ink)}

/* ---- Stolpersteine (aufklappbar) --------------------------------------- */
.gd-trip{
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--canvas-2);
  box-shadow:var(--shadow);overflow:hidden;margin-bottom:10px;
}
.gd-trip summary{
  cursor:pointer;padding:16px 19px;font-weight:600;color:var(--ink);font-size:.95rem;
  display:flex;align-items:center;gap:13px;list-style:none;line-height:1.4;
}
.gd-trip summary::-webkit-details-marker{display:none}
.gd-trip summary::after{content:"+";margin-left:auto;color:var(--muted);font-weight:700;font-size:1.05rem;flex-shrink:0}
/* Minuszeichen (U+2212), kein Gedankenstrich: das hier ist ein Symbol, kein Satzzeichen. */
.gd-trip[open] summary::after{content:"−"}
.gd-trip summary:hover{background:var(--glass)}
.gd-trip summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.gd-trip .b{padding:0 19px 18px;color:var(--muted);font-size:.91rem;line-height:1.68}
.gd-trip .b p+p{margin-top:9px}
.gd-trip .b b{color:var(--ink);font-weight:600}

/* ---- Hilfe-Kasten ------------------------------------------------------ */
.gd-help{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:14px;
  padding:24px 26px;border:1px solid var(--line);border-radius:var(--r-xl);
  background:linear-gradient(135deg,var(--accent-soft),#EAF1FE);
}
.gd-help .tx{flex:1;min-width:240px}
.gd-help h3{color:var(--ink);font-size:1.12rem}
.gd-help p{color:var(--muted);font-size:.92rem;line-height:1.6;margin-top:7px;max-width:56ch}

/* ---- Verwandte Anleitungen --------------------------------------------- */
.gd-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:14px}
.gd-card{
  display:block;padding:19px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--canvas-2);box-shadow:var(--shadow);transition:.18s;
}
.gd-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.gd-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gd-card .k{
  font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gd-green-ink);font-weight:700;
}
.gd-card b{display:block;color:var(--ink);font-family:var(--font-d);font-size:.98rem;margin:9px 0 6px;line-height:1.3}
.gd-card span{display:block;color:var(--muted);font-size:.85rem;line-height:1.55}

/* ---- Links ------------------------------------------------------------- */
.gd-ext,.gd-in{
  color:var(--gd-green-ink);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
}
.gd-ext:hover,.gd-in:hover{color:var(--ink)}
.gd-ext::after{content:"↗";margin-left:4px;font-size:.8em;display:inline-block;text-decoration:none}
.gd-links{list-style:none;margin:0}
.gd-links li{padding:10px 0;border-bottom:1px solid var(--line);font-size:.91rem;color:var(--muted);line-height:1.6}
.gd-links li:last-child{border-bottom:0}
.gd-links li span{display:block;color:var(--faint-ink);font-size:.82rem;margin-top:3px}

/* ---- Stand-Hinweis ----------------------------------------------------- */
.gd-stand{
  margin-top:16px;padding:14px 17px;border:1px dashed var(--line);border-radius:var(--r-md);
  color:var(--muted);font-size:.85rem;line-height:1.62;background:var(--glass);
}
.gd-stand b{color:var(--ink)}

/* ---- Ja/Nein-Gegenueberstellung ---------------------------------------- */
.gd-vs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gd-vs .col{padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--canvas-2);box-shadow:var(--shadow)}
.gd-vs .col h4{font-size:1rem;color:var(--ink);margin-bottom:4px}
.gd-vs .col .h{font-size:.82rem;color:var(--faint-ink);margin-bottom:12px}
.gd-vs .col.yes{border-top:3px solid var(--accent)}
.gd-vs .col.no{border-top:3px solid var(--warn)}
.gd-vs .col ul{list-style:none}
.gd-vs .col li{position:relative;padding-left:19px;color:var(--muted);font-size:.91rem;line-height:1.58;margin-top:9px}
.gd-vs .col li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:2px;background:var(--accent)}
.gd-vs .col.no li::before{background:var(--warn)}

/* ---- Toast (wie im uebrigen Portal) ------------------------------------ */
.wl-toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;
  font-size:.88rem;font-weight:600;box-shadow:0 16px 40px -12px rgba(0,0,0,.4);
  opacity:0;transition:.3s;z-index:200;pointer-events:none;max-width:90vw;text-align:center;
}
.wl-toast.show{opacity:1;transform:translate(-50%,0)}

/* ---- Layout auf schmalen Bildschirmen ---------------------------------- */
@media (max-width:760px){
  .gd-vs{grid-template-columns:1fr}
}
@media (max-width:640px){
  /* Sticky-Leiste wuerde auf kleinen Displays zu viel vom Text verdecken. */
  .gd-prog{position:static;gap:12px}
  .gd-prog .track{min-width:100%;order:3}
  .gd-step{grid-template-columns:1fr;gap:12px;padding:19px}
  .gd-hero{padding:22px 20px}
  .gd-panel{padding:19px 18px}
  .gd-help{padding:20px 19px;gap:16px}
}
@media (prefers-reduced-motion:reduce){
  .gd-step,.gd-card,.gd-prog .track i{transition:none}
  .gd-card:hover{transform:none}
}