/* Anleitungsseiten (Claude, ChatGPT - deutsch und englisch).
   Eine Datei fuer alle vier: Was hier geaendert wird, gilt ueberall.
   Vier Kopien desselben Stils laufen sonst nach dem zweiten Umbau auseinander. */
:root{
/* Cream und Teal - dieselbe Palette wie die Verkaufsseite (Variante C,
   entschieden am 08.09.2026). Begruendung und Kontrastwerte stehen in
   docs/optik-verkaufsseite.md.

   Die Regel, die man hier leicht bricht: --teal ist eine Farbe fuer FLAECHEN
   und grosse Knopfbeschriftungen. Kleiner Text in Teal - Links, Schrittzahlen,
   Beschriftungen - nimmt --teal-tief. Auf Cream bringt das helle Teal nur
   2,7:1, und ein Link damit ist im hellen Raum nicht zu lesen. */
  --teal:#0B8A7E; --teal-tief:#0A6E63; --teal-mist:#EAF6F3; --rand:#E2DACB;
  --text:#333F4E; --navy:#14233F; --grau:#5A6A78; --papier:#F7F2E8; --marker:#e95a28; --karte:#FFFCF6;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--papier); color:var(--text);
  font:17px/1.65 Inter,system-ui,-apple-system,"Segoe UI",Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:Literata,Georgia,"Times New Roman",serif;color:var(--navy);text-wrap:balance}
.seite{max-width:820px; margin:0 auto; padding:28px 20px 90px}
a{color:var(--teal-tief)}

.marke{display:flex; align-items:center; gap:12px; margin-bottom:34px}
.marke img{height:34px}
.marke a{font-weight:bold; text-decoration:none; font-size:15px}

.hero{background:var(--karte); border:1px solid var(--rand); border-radius:18px; padding:30px 30px 26px}
.hero-kopf{display:flex; gap:20px; align-items:flex-start}
.hero-kopf img{width:104px; flex:0 0 auto; margin-top:-6px}
h1{font-size:31px; line-height:1.2; margin:0 0 10px}
.unter{color:var(--grau); margin:0}
.meta{color:var(--grau)}
.small{font-size:14px}
.dauer{display:inline-block; margin-top:16px; background:var(--teal-mist); border:1px solid #b6d8c8;
       border-radius:999px; padding:5px 14px; font-size:14px; color:var(--teal-tief); font-weight:bold}

h2{font-size:21px; margin:0 0 8px}
.schritt{background:var(--karte); border:1px solid var(--rand); border-radius:18px; padding:26px 30px; margin-top:14px}
.nummer{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.nummer span{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%; background:var(--teal); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:16px;
}
.schritt p{margin:10px 0}
figure{margin:18px 0 4px}
figure img{width:100%; display:block; border:1px solid var(--rand); border-radius:12px; background:var(--karte)}
figcaption{color:var(--grau); font-size:14px; margin-top:8px}
.schmal img{max-width:520px; margin:0 auto}
.sehrschmal img{max-width:360px; margin:0 auto}

/* Die orangefarbene Markierung im Text genauso benennen wie im Bild. */
.hier{color:var(--marker); font-weight:bold; white-space:nowrap}
.hier::before{content:"◻ "; }

code{background:#eef3f0; border:1px solid var(--rand); border-radius:6px; padding:2px 7px;
     font:15px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}
/* Die Adresse mit Kopierknopf.
   Marcel am 01.09.2026: „Hier könnte nach der Adresse noch ein Kopierbutton
   sein, das macht es einfacher."

   Er hat recht, und die Seite sagt es selbst: „Ein Tippfehler ist der
   häufigste Grund, warum es nicht klappt." Wer das schreibt und dann von
   Hand markieren lässt, hat den Satz nicht ernst genommen. */
.adresse{display:flex; align-items:center; gap:10px; background:#eef3f0;
         border:1px solid var(--rand); border-radius:10px;
         padding:9px 9px 9px 16px; margin:14px 0;
         font:16px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}
.adresse code{flex:1 1 auto; min-width:0; background:none; border:0; padding:0;
              font:inherit; word-break:break-all; -webkit-user-select:all; user-select:all}
.adresse button{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  background:var(--karte); color:var(--teal-tief); border:1px solid var(--rand); border-radius:8px;
  padding:8px 13px; font:inherit; font-size:14px; font-family:inherit;
}
.adresse button:hover{border-color:var(--teal-tief)}
/* Nach dem Klick kurz gruen: ohne Rueckmeldung drueckt man ein zweites Mal
   und weiss immer noch nicht, ob es geklappt hat. */
.adresse button.fertig{background:var(--teal); color:#fff; border-color:var(--teal-tief)}
.adresse button svg{width:15px;height:15px;flex:0 0 auto}

.merke{background:var(--teal-mist); border:1px solid #b6d8c8; border-radius:12px; padding:14px 18px; margin:16px 0}
.merke b{display:block; margin-bottom:3px}
.achtung{background:#fdf6e8; border:1px solid #e8d5a3; border-radius:12px; padding:14px 18px; margin:16px 0}
.achtung b{display:block; margin-bottom:3px}

ul{margin:10px 0; padding-left:22px}
li{margin:5px 0}

.beispiele{display:grid; gap:10px; margin:16px 0}
.beispiel{background:var(--papier); border:1px solid var(--rand); border-radius:12px; padding:12px 16px}

.sessi-ecke{display:flex; gap:18px; align-items:flex-start; margin:18px 0 0}
.sessi-ecke img{width:82px; flex:0 0 auto}
.sessi-ecke.klein img{width:62px}
.sessi-ecke p{margin:0}
.schritt .nummer{position:relative}
.sprachwahl{margin-left:auto}

/* Die Sprachleiste: drei Knoepfe, die aktuelle Sprache markiert.
 *
 * Marcel am 01.09.2026: „wir brauchen die gleiche Menueleiste oben, hier
 * wird nur ENG angeboten, ES fehlt."
 *
 * Vorher war es EIN Link, der auf die jeweils andere Sprache zeigte. Bei
 * zwei Sprachen geht das; bei dreien nicht mehr - man sieht nicht, wo man
 * ist, und eine der drei fehlt immer. Deshalb jetzt: alle drei immer
 * sichtbar, die aktuelle als gefuellter Knopf. aria-current sagt einem
 * Screenreader dasselbe, was das Auge an der Farbe sieht.
 */
.sprachwahl{display:inline-flex; gap:6px; font-size:14px}
.sprachwahl a{text-decoration:none; padding:3px 10px; border:1px solid var(--rand);
              border-radius:8px; background:var(--karte); color:var(--teal-tief); font-weight:600}
.sprachwahl a:hover{border-color:var(--teal-tief)}
.sprachwahl a[aria-current="page"]{background:var(--teal); color:#fff; border-color:var(--teal-tief)}


.fuss{margin-top:40px; padding-top:22px; border-top:1px solid var(--rand); color:var(--grau); font-size:14px}
.fuss a{color:var(--grau)}

@media (max-width:600px){
  body{font-size:16px}
  .seite{padding:20px 14px 60px}
  .hero,.schritt{padding:22px 18px; border-radius:14px}
  h1{font-size:25px}
  .hero-kopf{flex-direction:column; gap:6px}
  .hero-kopf img{width:78px}
}

/* ====================================================================
   Nachbau der Anmeldeseite

   Warum kein Bildschirmfoto: Das hier ist UNSERE Seite. Als HTML bleibt
   sie scharf, laesst sich vorlesen, und - der eigentliche Grund - sie kann
   nie veralten wie ein Foto, das jemand vor drei Versionen aufgenommen hat.

   Fremde Oberflaechen (Claude, ChatGPT) werden NIE nachgebaut. Was man
   nicht selbst gebaut hat, kann man nicht wahrheitsgemaess nachzeichnen -
   da hilft nur ein echtes Bildschirmfoto.
   ==================================================================== */
.nachbau{max-width:470px; margin:18px auto 4px; background:var(--karte);
         border:1px solid var(--rand); border-radius:16px; padding:26px 28px}
.nachbau h3{font-size:19px; margin:0 0 6px}
.nachbau .meta{color:var(--grau); font-size:14px; margin:8px 0}
.nachbau .rechte{background:var(--teal-mist); border:1px solid #b6d8c8;
                 border-radius:9px; padding:12px 15px; margin:16px 0}
.nachbau .rechte>b{display:block; margin-bottom:4px}
.nachbau label{display:block; margin:16px 0 0; font-size:14px; font-weight:bold}
.nachbau .feld{height:44px; border:1px solid var(--rand); border-radius:9px;
               margin-top:6px; background:var(--karte)}
.nachbau .knopf{margin-top:20px; padding:13px; border-radius:9px; background:var(--teal);
                color:#fff; text-align:center; font-weight:bold}
.nachbau .knopf.zweit{background:var(--karte); color:var(--grau); border:1px solid var(--rand); margin-top:9px}
/* Dieselbe orangefarbene Markierung wie auf den Bildschirmfotos - der Leser
   soll nicht erst uebersetzen muessen, dass hier dasselbe gemeint ist. */
.nachbau .knopf.markiert{outline:5px solid var(--marker); outline-offset:3px}

/* Das Motiv im Kopf ist breiter als die Sessi-Figuren daneben: Sessi reicht
   Claude bzw. ChatGPT die Hand, und das Logo braucht Platz, sonst wird die
   Geste zur Briefmarke. */
.hero-kopf img.kopfbild{width:200px;margin-top:0}
@media (max-width:600px){ .hero-kopf img.kopfbild{width:190px} }

/* ---------------------------------------------------------------------------
   Rückmeldung und der Weg zurück
   ---------------------------------------------------------------------------
   Marcel am 01.09.2026, zwei Sätze, die dieselbe Wurzel haben:

     „Sag, dass die AI-Anbieter ständig Änderungen haben und dass wir zum
      Zeitpunkt der Erstellung alles getestet hatten. Vielleicht noch ein
      Button – hat geklappt / hat nicht geklappt."

     „Am Ende der Beschreibung möchte ich zur App zurück."

   Beides ist dieselbe Einsicht: Eine Anleitung endet nicht mit dem letzten
   Schritt. Sie endet, wenn der Leser wieder da ist, wo er arbeitet - und wenn
   wir wissen, ob sie getaugt hat. */
.rueckmeldung h2{font-size:19px;margin:0 0 8px}
.rueck-knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 10px}
.rueck-ja, .rueck-nein{
  display:inline-block;padding:10px 18px;border-radius:999px;
  text-decoration:none;font-weight:600;font-size:14.5px;border:1px solid transparent;
}
.rueck-ja{background:#176f4d;color:#fff}
.rueck-ja:hover{background:#12593e}
.rueck-nein{background:var(--karte);color:#444;border-color:#d6d6d6}
.rueck-nein:hover{border-color:#176f4d;color:#176f4d}

.zurueck-app{text-align:center}
.btn-app{
  display:inline-block;padding:13px 26px;border-radius:999px;
  background:#176f4d;color:#fff;text-decoration:none;font-weight:700;font-size:16px;
}
.btn-app:hover{background:#12593e}