/*
 * Toolio – Hauptstylesheet
 *
 * Dieses Stylesheet definiert das dunkle, elegante Layout der Anwendung.
 * Es verwendet ein Rasterlayout für die Funktionskacheln, Neon‑Akzente für
 * wichtige Elemente und kleine Transitionen für Hover‑Effekte. Alle Farben
 * und Abstände sind so gewählt, dass sie modern wirken und gleichzeitig
 * gut lesbar bleiben. Der Code ist ausführlich kommentiert, um eine
 * spätere Erweiterung zu erleichtern.
 */

/* Grundlegende Variablen für Farben und Abstände */
:root {
  --bg-color: #0b132b;
  --card-bg: #1d2541;
  --accent: #00e5ff;
  --accent-hover: #00bcd4;
  --text-light: #ffffff;
  --text-muted: #b0bcd4;
  --card-radius: 0.75rem;
  --transition-speed: 0.3s;
}

/* Globale Grundeinstellungen */
html, body {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-light);
  line-height: 1.6;
  scroll-behavior: smooth;
}

/* Hero‑Bereich */
/*
 * Hero‑Bereich
 *
 * Die Startseite verwendet einen großflächigen hero‑Container, der sich
 * über die gesamte Breite und Höhe des sichtbaren Bereichs erstreckt. Der
 * Verlauf überlagert das Hintergrundbild, sodass Text und Call‑to‑Action
 * stets gut lesbar bleiben. Durch das Cover‑Scaling wirkt das Bild
 * immer vollständig – auch auf großen Monitoren. Der überschaubare
 * Abstand garantiert, dass der Abschnitt nie abgeschnitten aussieht.
 */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Dehne den Hero‑Bereich über die volle Höhe des Viewports. Dadurch wird das
     Hintergrundbild komplett sichtbar und füllt den gesamten Rahmen aus. */
  min-height: 100vh;
  width: 100%;
  text-align: center;
  /* Kombination aus dunklem Verlauf und Hintergrundbild. */
  background-image: linear-gradient(135deg, rgba(11,19,43,0.85), rgba(29,37,65,0.85)), url('../images/hero-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Synthwave‑Hintergrund für den CTA‑Bereich */
/*
 * Synthwave‑Hintergrund für den CTA‑Bereich
 *
 * Der hervorgehobene Hintergrund unter dem Call‑to‑Action‑Button füllt
 * nun einen großen Teil des hero‑Containers. Er wird im Zentrum
 * positioniert und leicht verschwommen dargestellt, sodass der Button
 * kontrastreich hervorsticht. Auf kleinen Geräten schrumpft er automatisch
 * mit dem Container.
 */
.hero-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Nutze relative Maße, damit die Grafik an verschiedene Bildschirmgrößen
     angepasst wird. Breite und Höhe sind jeweils 80 % und 60 % des
     Containers. */
  width: 80%;
  height: 60%;
  background-image: url('../images/hero-synthwave.png');
  background-size: cover;
  background-position: center;
  filter: blur(12px) brightness(0.65) saturate(1.2);
  border-radius: 1rem;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero-content {
  z-index: 1;
  padding: 2rem;
}

.logo {
  font-size: 3rem;
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--accent);
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
}

.slogan {
  margin-top: 0.5rem;
  font-size: 1.2rem;
  color: var(--text-muted);
}

.cta-btn {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.8rem 2rem;
  background-color: var(--accent);
  color: var(--bg-color);
  border-radius: 2rem;
  text-decoration: none;
  font-weight: 600;
  transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
}

.cta-btn:hover {
  background-color: var(--accent-hover);
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.7);
}

/* Werbeflächen an den Seiten */
.ad-container {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 120px;
  background-color: #0f1933;
  border-left: 1px solid #14213d;
  border-right: 1px solid #14213d;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  text-align: center;
  padding: 1rem;
}

.left-ad {
  left: 0;
}

.right-ad {
  right: 0;
}

/* Hauptgrid mit Funktionskacheln */
.features-grid {
  display: grid;
  gap: 1.5rem;
  padding: 2rem;
  margin: 0 auto;
  max-width: 1200px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  position: relative;
  z-index: 2;
}

.feature-card {
  background-color: var(--card-bg);
  border-radius: var(--card-radius);
  padding: 1.5rem;
  text-decoration: none;
  color: var(--text-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;

  /* Anfangszustand für Fade‑In Effekt */
  opacity: 0;
  transform: translateY(20px);
}

.feature-card:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 4px 12px rgba(0, 229, 255, 0.25);
}

/* Sichtbar, sobald vom IntersectionObserver aktiviert */
.feature-card.visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--transition-speed) ease-out,
              transform var(--transition-speed) ease-out,
              box-shadow var(--transition-speed);
}

.feature-icon {
  font-size: 2rem;
  margin-bottom: 0.8rem;
  color: var(--accent);
}

.feature-card h3 {
  margin: 0.2rem 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.feature-card p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

/* Footer */
.footer {
  background-color: #07112c;
  padding: 2rem;
  text-align: center;
  margin-top: 2rem;
  border-top: 1px solid #14213d;
}

.footer nav {
  margin-bottom: 1rem;
}

.footer nav a {
  color: var(--accent);
  text-decoration: none;
  margin: 0 1rem;
  font-size: 0.9rem;
  transition: color var(--transition-speed);
}

.footer nav a:hover {
  color: var(--accent-hover);
}

.footer p {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin: 0;
}

/* Stil für die Tools‑Seiten */
.tool-header {
  max-width: 900px;
  margin: 2rem auto 1rem;
  padding: 0 1rem;
  text-align: center;
}

.tool-header h1 {
  margin: 0;
  font-size: 2rem;
  color: var(--accent);
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
}

.tool-header nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color var(--transition-speed);
}

.tool-header nav a:hover {
  color: var(--accent);
}

.tool-container {
  /* Erlaube dem Tool‑Container, nahezu die gesamte Breite einzunehmen. Die
     maximal erlaubte Breite orientiert sich an der verbleibenden Fläche zwischen den
     Werbeflächen links und rechts (je 120 px) und den Innenabständen. */
  max-width: 1000px;
  width: calc(100% - 280px);
  margin: 2rem auto;
  padding: 2rem;
  background-color: var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.tool-container input[type="file"] {
  width: 100%;
  padding: 0.7rem;
  margin-bottom: 1rem;
  background-color: #0f1933;
  border: 1px solid #14213d;
  border-radius: var(--card-radius);
  color: var(--text-muted);
}

.tool-container input[type="text"],
.tool-container input[type="number"],
.tool-container textarea {
  width: 100%;
  padding: 0.7rem;
  margin-bottom: 1rem;
  background-color: #0f1933;
  border: 1px solid #14213d;
  border-radius: var(--card-radius);
  color: var(--text-light);
}

.tool-container button {
  padding: 0.8rem 2rem;
  background-color: var(--accent);
  border: none;
  border-radius: 2rem;
  color: var(--bg-color);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
}

.tool-container button:hover {
  background-color: var(--accent-hover);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.6);
}

.tool-container a.download-link {
  display: inline-block;
  margin-top: 1rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  word-break: break-all;
}

.tool-container a.download-link:hover {
  color: var(--accent-hover);
}

/* ================================
   Vorschau-Komponenten
   ================================ */
.preview-wrapper {
  display: grid;
  /* Vergrößere das Vorschaufenster: breitere Thumbnail‑Spalte, deutlich breiterer
     Seitenbereich und großzügigere Aktionsleiste. Dies verbessert die
     Nutzbarkeit und entspricht den Nutzeranforderungen. */
  grid-template-columns: 140px 1fr 220px;
  grid-gap: 1rem;
  width: 100%;
  height: 75vh;
  margin-top: 1.5rem;
}

.thumbnail-sidebar {
  background-color: var(--card-bg);
  border-radius: var(--card-radius);
  overflow-y: auto;
  padding: 0.5rem;
}

.thumbnail {
  cursor: pointer;
  border: 1px solid #14213d;
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 0.5rem;
  position: relative; /* Ermöglicht Positionierung der Seitennummer */
}

.thumbnail img {
  width: 100%;
  height: auto;
  display: block;
}

/* Kleine Seitennummer auf Thumbnails */
.thumbnail .page-number {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.55rem;
  padding: 1px 3px;
  border-radius: 3px;
  pointer-events: none;
}

.thumbnail.selected {
  border-color: var(--accent);
  box-shadow: 0 0 6px rgba(0, 229, 255, 0.6);
}

.page-display {
  background-color: #0f1933;
  border-radius: var(--card-radius);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.action-sidebar {
  background-color: var(--card-bg);
  border-radius: var(--card-radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
}

/*
 * Drehen‑Bedienelemente
 *
 * Die Rotationsschaltflächen sind kreisförmig und fügen sich in die
 * moderne UI ein. Sie zeigen klare Pfeilsymbole, die das jeweilige
 * Rotationsziel darstellen. Ein Hover‑Effekt deutet interaktive Elemente
 * an.
 */
.rotate-buttons {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.rotate-buttons button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: 50%;
  border: none;
  background-color: var(--accent);
  color: var(--bg-color);
  font-size: 1rem;
  cursor: pointer;
  transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
}
.rotate-buttons button:hover {
  background-color: var(--accent-hover);
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.6);
}

/* Dropdown für Farbauswahl bei Schwärzung */
.color-select {
  padding: 0.5rem;
  background-color: #0f1933;
  border: 1px solid #14213d;
  border-radius: 0.5rem;
  color: var(--text-light);
  margin-bottom: 0.5rem;
}

/* Kopieren‑Button für extrahierten Text */
.copy-btn {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.5rem 1.2rem;
  background-color: var(--accent);
  border: none;
  border-radius: 1rem;
  color: var(--bg-color);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
}
.copy-btn:hover {
  background-color: var(--accent-hover);
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.6);
}

/*
 * Dropzone (Datei‑Upload)
 *
 * Ein Drag‑and‑Drop‑Feld für das Hochladen von Dateien. Das Design lehnt
 * sich an die Beispiele des Nutzers an: ein dunkler Bereich mit
 * gestricheltem Rahmen und einem Upload‑Icon. Beim Überfahren mit
 * Dateien ändert sich die Farbe dezent. Die Dropzone ist flexibel
 * einsetzbar für verschiedene Dateitypen.
 */
.dropzone {
  border: 2px dashed var(--accent);
  border-radius: 1rem;
  padding: 2rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-speed), background-color var(--transition-speed);
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  background-color: rgba(29, 37, 65, 0.8);
}
.dropzone i {
  font-size: 2rem;
  color: var(--accent);
}
.dropzone p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.dropzone.dragover {
  border-color: var(--accent-hover);
  background-color: rgba(0, 229, 255, 0.1);
}

/*
 * Delete‑Button für verschiebbare Overlays (z. B. Wasserzeichen). Der
 * Button wird über dem Overlay angezeigt und erlaubt das Löschen des
 * jeweiligen Elements. Er erscheint nur, wenn ein Overlay ausgewählt
 * ist.
 */
.delete-btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.7);
  color: var(--accent);
  cursor: pointer;
  font-size: 1.2rem;
  z-index: 10;
  /* Standardmäßig versteckt */
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-speed);
}
.delete-btn.visible {
  opacity: 1;
  pointer-events: auto;
}

.action-sidebar button {
  width: 100%;
  margin-top: 0;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
  .ad-container {
    display: none;
  }
  .features-grid {
    padding: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
  .hero {
    min-height: 50vh;
  }
  .logo {
    font-size: 2.5rem;
  }
}