/* ==========================================================================
   Geisterstift – Gestaltung (CSS)
   --------------------------------------------------------------------------
   Alle Farben stehen als Variablen ganz oben. Willst du das Aussehen an
   deine Homepage anpassen, reicht es meist, nur diese Werte zu ändern.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Schriften – liegen im Ordner "schriften" auf dem EIGENEN Server.
   Dadurch sieht der Text überall gleich aus und es werden keine Daten an
   Google & Co. übertragen (DSGVO). Lizenztexte liegen daneben.
   font-display: swap → Text ist sofort lesbar, die Schrift wird nachgereicht.
   -------------------------------------------------------------------------- */
@font-face { font-family: "Dancing Script";   src: url("schriften/dancing-script-latin-400-normal.woff2") format("woff2");   font-display: swap; }
@font-face { font-family: "Caveat";           src: url("schriften/caveat-latin-400-normal.woff2") format("woff2");           font-display: swap; }
@font-face { font-family: "Patrick Hand";     src: url("schriften/patrick-hand-latin-400-normal.woff2") format("woff2");     font-display: swap; }
@font-face { font-family: "Permanent Marker"; src: url("schriften/permanent-marker-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Great Vibes";      src: url("schriften/great-vibes-latin-400-normal.woff2") format("woff2");      font-display: swap; }

:root {
  --hintergrund: #ebe6dd;   /* Seitenhintergrund (warmes Grau) */
  --karte:       #fffdf9;   /* Hintergrund der Kästen */
  --text:        #2b2724;   /* normale Schrift */
  --text-leise:  #6d665f;   /* Nebentexte */
  --akzent:      #1f3fae;   /* Hauptfarbe für wichtige Knöpfe */
  --akzent-text: #ffffff;   /* Schrift auf Akzentfarbe */
  --rahmen:      #d8d0c4;   /* Rahmenlinien */
  --radius:      10px;      /* Eckenrundung */
}

/* Breite/Höhe inklusive Rand und Innenabstand rechnen – vermeidet Überraschungen */
* { box-sizing: border-box; }

/* "hidden"-Attribut immer durchsetzen, auch wenn ein Element sonst display:flex hat */
[hidden] { display: none !important; }

body {
  /* Der Stift darf über das Blatt hinausragen. Damit er auf dem Handy
     keinen waagerechten Scrollbalken erzeugt, wird seitlich abgeschnitten.
     ("hidden" als Rückfall für ältere Browser, "clip" für neue) */
  overflow-x: hidden;
  overflow-x: clip;
  margin: 0;
  background: var(--hintergrund);
  color: var(--text);
  /* Systemschriften: schnell, datenschutzfreundlich, kein Download nötig */
  font: 16px/1.5 system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Inhalt mittig, maximal ~1000 px breit, 16 px Rand (auch auf dem Handy) */
.app { max-width: 1040px; margin: 0 auto; padding: 16px; }

/* ----- Kopf ----- */
.kopf h1 {
  /* Handschrift-Optik mit der mitgelieferten Schrift (siehe @font-face oben) */
  font-family: "Dancing Script", cursive;
  font-weight: normal;
  font-size: clamp(2.1rem, 6vw, 3rem);     /* wächst mit der Fensterbreite */
  margin: 0.1em 0 0;
}
.unterzeile { margin: 0.2em 0 1em; color: var(--text-leise); }
.unterzeile.fehler { color: #b3261e; font-weight: 600; }

/* ----- Werkzeugleiste ----- */
.werkzeuge {
  display: flex; flex-direction: column;   /* die drei Zeilen untereinander */
  background: var(--karte);
  border: 1px solid var(--rahmen); border-radius: var(--radius);
  padding: 4px 14px; margin-bottom: 12px;
}
/* Eine Zeile: Gruppen nebeneinander; nur auf schmalen Bildschirmen Umbruch */
.zeile {
  display: flex; flex-wrap: wrap;
  align-items: center; gap: 8px 24px;
  padding: 7px 0;
}
.zeile + .zeile { border-top: 1px solid #ece6dc; }   /* feine Trennlinie zwischen den Zeilen */
.gruppe { display: flex; align-items: center; gap: 8px; }
.label {
  font-size: 0.8rem; color: var(--text-leise);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.farben, .staerken { display: flex; gap: 6px; }

/* Runde Farbknöpfe */
.farbe {
  width: 28px; height: 28px; padding: 0;
  border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--rahmen);
  cursor: pointer;
}
/* aria-pressed="true" = ausgewählt (gleichzeitig verständlich für Screenreader) */
.farbe[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--text); }

#farbeFrei { width: 32px; height: 32px; padding: 0; border: none; background: none; cursor: pointer; }

/* Knöpfe für die Strichstärke: ein Punkt in der jeweiligen Dicke */
.staerke {
  width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--rahmen); border-radius: 8px; background: #fff;
  cursor: pointer;
}
.staerke span { display: block; border-radius: 50%; background: var(--text); }
.staerke[aria-pressed="true"] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }

select {
  font: inherit; padding: 4px 8px;
  border: 1px solid var(--rahmen); border-radius: 8px; background: #fff;
}

/* Tintenbalken */
.tintenbalken { width: 110px; height: 10px; border-radius: 5px; background: #e4ddd2; overflow: hidden; }
#tinteFuell { width: 100%; height: 100%; background: var(--akzent); transition: width .2s, background-color .2s; }
#tinteFuell.knapp { background: #c8102e; }           /* wird rot, wenn die Tinte knapp ist */
.tintenbalken.leer { animation: wackeln .4s; }        /* kurzes Wackeln bei leerer Tinte */
@keyframes wackeln { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* Text-Werkzeug: füllt den freien Platz seiner Zeile, das Eingabefeld wächst mit */
.textgruppe { flex: 1 1 auto; }
#textEingabe {
  flex: 1 1 180px; min-width: 0;
  padding: 3px 10px;
  font-size: 1.2rem;                       /* groß genug, um die gewählte Schrift zu erkennen */
  border: 1px solid var(--rahmen); border-radius: 8px; background: #fff;
}
/* Kleiner Hinweis, welche Schrift zum gewählten Schreibgerät gehört */
.schrifthinweis { font-size: .85rem; color: var(--text-leise); white-space: nowrap; }

/* Solange "Text platzieren" aktiv ist, leuchtet der Knopf in der Akzentfarbe */
#btnTextSetzen[aria-pressed="true"] { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }

/* Symbol-Werkzeug: Reihe kleiner Knöpfe mit Vorschaubild */
.symbole { display: flex; flex-wrap: wrap; gap: 4px; }
.symbol {
  width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--rahmen); border-radius: 8px; background: #fff;
}
.symbol canvas { display: block; pointer-events: none; }
.symbol[aria-pressed="true"] { border-color: var(--akzent); box-shadow: inset 0 0 0 2px var(--akzent); background: #eef1fb; }

/* --------------------------------------------------------------------------
   Kompakte Werkzeugleiste: alles etwas kleiner, damit sie in ZWEI Zeilen passt.
   Steht bewusst gesammelt hier, damit man die Größen an einer Stelle anpasst.
   (".werkzeuge" vorneweg macht die Regeln stärker als die Grundregeln oben.)
   -------------------------------------------------------------------------- */
.werkzeuge               { font-size: .85rem; padding: 2px 12px; }
.werkzeuge .zeile        { gap: 6px 18px; padding: 5px 0; }
.werkzeuge .gruppe       { gap: 6px; }
.werkzeuge .label        { font-size: .66rem; letter-spacing: .04em; }
.werkzeuge select        { font-size: .82rem; padding: 2px 4px; border-radius: 6px; }
.werkzeuge .farben,
.werkzeuge .staerken     { gap: 4px; }
.werkzeuge .farbe        { width: 21px; height: 21px; }
.werkzeuge #farbeFrei    { width: 24px; height: 24px; }
.werkzeuge .staerke      { width: 26px; height: 26px; border-radius: 6px; }
.werkzeuge .tintenbalken { width: 80px; height: 8px; }
.werkzeuge .symbole      { gap: 3px; }
.werkzeuge .symbol       { width: 28px; height: 28px; border-radius: 6px; }
.werkzeuge #textEingabe  { font-size: 1.05rem; padding: 1px 8px; border-radius: 6px; flex-basis: 150px; }
.werkzeuge .schrifthinweis { font-size: .72rem; }
.werkzeuge #btnTextSetzen  { font-size: .82rem; padding: 3px 9px; border-radius: 6px; }
/* Unter 1200 px Breite: Schrift-Hinweis ausblenden (das Textfeld zeigt die
   Schrift ohnehin an, und der Name steht als Tooltip am Feld) → bleibt 2-zeilig */
@media (max-width: 1200px) { .werkzeuge .schrifthinweis { display: none; } }

/* ----- Bühne: hier liegen Papier, Tinte und Stift übereinander ----- */
.buehne {
  position: relative;                      /* Bezugspunkt für die übereinanderliegenden Ebenen */
  width: 100%;
  aspect-ratio: 10 / 7;                    /* gleiches Seitenverhältnis wie im JavaScript (1000 x 700) */
  border-radius: 6px;
  overflow: visible;                       /* der Stift darf über den Blattrand ragen – wie ein echter Stift */
  background: #fbfaf6;
  box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 12px 30px rgba(0,0,0,.14);
  user-select: none; -webkit-user-select: none;  /* beim Malen keinen Text markieren */
}
/* border-radius: inherit → auch die Canvas-Ebenen bekommen runde Ecken */
.buehne canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: inherit; }
/* Vorschau-Ebene: darf keine Klicks abfangen und ist blass. Die Blässe kommt
   vom CSS (nicht vom Canvas), damit sich überlappende Strichstücke nicht
   dunkler abzeichnen. */
#geistCanvas { pointer-events: none; opacity: .4; }

#tinteCanvas {
  touch-action: none;   /* auf Touch-Geräten: Fingerbewegung malt, statt die Seite zu scrollen */
  cursor: none;         /* Mauszeiger ausblenden – der animierte Stift IST der Zeiger */
}
.buehne.abspielen #tinteCanvas { cursor: default; }

/* Der Stift: Außen-Element wird nur verschoben, das SVG darin gedreht.
   Grund: Der Schatten (filter) soll immer nach rechts unten fallen –
   egal wie der Stift gedreht ist. Deshalb sitzt der Filter außen. */
.stift {
  --ink: #1f3fae;                          /* Stiftfarbe – wird vom JavaScript gesetzt */
  position: absolute; left: 0; top: 0;
  z-index: 3;                              /* immer ganz oben – auch über dem Hinweis für den Empfänger */
  width: 22%;                              /* Stiftlänge relativ zur Bühnenbreite (vorher 28 %) */
  pointer-events: none;                    /* Klicks gehen "durch" den Stift hindurch */
  will-change: transform, filter;          /* Hinweis an den Browser: wird ständig bewegt */
  /* Startwert des Schattens. Danach berechnet das JavaScript ihn in jedem
     Bild neu – je höher der Stift schwebt, desto weiter und weicher. */
  filter: drop-shadow(9px 16px 6px rgba(0,0,0,.22));
}
.stift svg { display: block; width: 100%; height: auto; transform-origin: 0 50%; overflow: visible; }
.stift .tinte { fill: var(--ink); }

/* Hinweisfläche für den Empfänger */
.overlay {
  position: absolute; inset: 0;
  z-index: 2;
  border-radius: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 16px; text-align: center;
  background: rgba(255,253,249,.55);
  backdrop-filter: blur(2px);
}
.overlay p { margin: 0; font-size: 1.25rem; }

/* ----- Knöpfe ----- */
.aktionen, .empfaenger, .teilenknoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
button {
  font: inherit; padding: 8px 14px;
  border: 1px solid var(--rahmen); border-radius: 8px;
  background: #fff; color: var(--text);
  cursor: pointer;
}
button:hover { border-color: var(--text-leise); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primaer { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }
button.gross { font-size: 1.15rem; padding: 12px 22px; }
/* Gut sichtbarer Fokus-Rahmen für Tastatur-Bedienung (Barrierefreiheit) */
button:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }

/* ----- Teilen-Bereich ----- */
.teilen {
  margin-top: 18px; padding: 14px 16px;
  background: var(--karte);
  border: 1px solid var(--rahmen); border-radius: var(--radius);
}
.teilen h2 { margin: 0 0 .3em; font-size: 1.2rem; }
.teilen p { margin: 0 0 .8em; }
.linkzeile { display: flex; gap: 8px; }
#linkFeld {
  flex: 1; min-width: 0;                   /* darf schrumpfen – sonst sprengt der lange Link das Layout */
  padding: 8px;
  font: .85rem ui-monospace, Consolas, monospace;
  border: 1px solid var(--rahmen); border-radius: 8px; background: #fff;
}
/* ----- QR-Code-Fenster (<dialog>) ----- */
.qrfenster {
  max-width: min(420px, calc(100vw - 32px));   /* auf dem Handy 16 px Rand je Seite */
  padding: 20px 22px;
  background: var(--karte); color: var(--text);
  border: 1px solid var(--rahmen); border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
  text-align: center;
}
.qrfenster::backdrop { background: rgba(30, 25, 20, .45); }   /* abgedunkelter Hintergrund */
.qrfenster h2 { margin: 0 0 .6em; font-size: 1.15rem; }
#qrCanvas {
  display: block; margin: 0 auto;
  width: min(300px, 70vw); height: auto;        /* groß anzeigen … */
  image-rendering: pixelated;                   /* … und dabei scharfe Kästchenkanten behalten */
  border-radius: 4px;
}
.qrinfo { font-size: .85rem; color: var(--text-leise); margin: .7em 0 .3em; }
.qrtipp { font-size: .85rem; margin: 0; }
.qrfenster .teilenknoepfe { justify-content: center; }

.hinweis { color: var(--text-leise); font-size: .9rem; min-height: 1.4em; margin: .6em 0 0; }