/* templates/frontend/danvo/assets/css/style.css
 *
 * Nachbau eines SaaS-Landingpage-Screenshots ("Danvo") - kein echtes
 * HTML/CSS lag vor, nur ein Bild. Farbwerte per Pixel-Messung ermittelt
 * (siehe tokens.css), Layout aus der Optik abgeleitet: die ganze
 * Kopfzeile+Hero steckt in einer großen, abgerundeten Karte auf hellblauem
 * Seitenhintergrund, Pillenform-Buttons, große fette Überschrift links,
 * dekorative Formen rechts (ersetzt das Stockfoto der Vorlage durch eine
 * abstrakte Illustration, kein echtes Foto verfügbar/passend).
 *
 * Deckt zusätzlich die geteilten nx-shortcode-*/nx-alert-Klassen sowie
 * nx-field/nx-btn (Auth-Seiten) ab.
 */

@font-face { font-family: "Danvo-Poppins"; src: url("../fonts/poppins-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Danvo-Poppins"; src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Danvo-Poppins"; src: url("../fonts/poppins-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Danvo-Poppins", var(--dv-font-body);
  font-size: var(--dv-fs-base);
  line-height: 1.7;
  color: var(--dv-text);
  background: var(--dv-bg);
  padding: var(--dv-space-6);
}

a { color: var(--dv-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 { font-weight: 700; margin: 0 0 var(--dv-space-3); line-height: 1.2; }
h1 { font-size: 2.6rem; }
h2 { font-size: 1.6rem; color: var(--dv-primary); }

.dv-container { max-width: var(--dv-container-width); margin: 0 auto; }

.dv-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.dv-skip-link { position: absolute; left: -999px; top: 0; background: var(--dv-primary); color: #fff; padding: var(--dv-space-2) var(--dv-space-4); z-index: 100; border-radius: var(--dv-radius); }
.dv-skip-link:focus { left: var(--dv-space-4); top: var(--dv-space-4); }

/* Die ganze Kopfzeile+Hero steckt in einer großen, abgerundeten Karte -
   charakteristisches Merkmal des Originals. */
.dv-hero-card {
  background: var(--dv-surface-soft);
  border-radius: var(--dv-radius-lg);
  padding: var(--dv-space-6) var(--dv-space-8);
  margin-bottom: var(--dv-space-12);
}

.dv-header-inner { display: flex; align-items: center; justify-content: space-between; padding: var(--dv-space-2) 0 var(--dv-space-8); flex-wrap: wrap; gap: var(--dv-space-3); }
.dv-logo { display: flex; align-items: center; gap: var(--dv-space-2); font-weight: 700; font-size: 1.3rem; color: var(--dv-text); }
.dv-logo:hover { text-decoration: none; }
.dv-logo img { display: block; height: 34px; }

.dv-menu-toggle { display: none; background: none; border: 1px solid var(--dv-border); border-radius: var(--dv-radius); font-size: 1.3rem; padding: var(--dv-space-1) var(--dv-space-3); cursor: pointer; }

.dv-nav ul { list-style: none; display: flex; gap: var(--dv-space-2); margin: 0; padding: 0; }
.dv-nav li { position: relative; }
.dv-nav a { display: block; padding: var(--dv-space-2) var(--dv-space-4); color: var(--dv-nav-text); font-weight: 500; }
.dv-nav a:hover, .dv-nav a[aria-current="page"] { color: var(--dv-primary); text-decoration: none; }
.dv-nav .nx-submenu {
  list-style: none; position: absolute; top: 100%; left: 0; min-width: 200px;
  background: #fff; border-radius: var(--dv-radius); box-shadow: 0 8px 24px rgba(23,104,181,0.15);
  padding: var(--dv-space-2); display: none; z-index: 20;
}
.dv-nav li.is-open > .nx-submenu { display: block; }

@media (max-width: 780px) {
  .dv-menu-toggle { display: block; }
  .dv-nav { display: none; width: 100%; order: 3; }
  .dv-nav.is-open { display: block; }
  .dv-nav ul { flex-direction: column; }
  .dv-nav .nx-submenu { position: static; box-shadow: none; }
}

/* Hero-Bereich - Text links, dekorative Illustration rechts (ersetzt das
   Stockfoto der Vorlage) */
.dv-hero-grid { display: flex; align-items: center; gap: var(--dv-space-12); flex-wrap: wrap; }
.dv-hero-grid > div:first-child { flex: 1 1 380px; }
.dv-hero-grid > div:last-child { flex: 1 1 320px; text-align: center; }
.dv-hero-grid p { color: var(--dv-muted); font-size: var(--dv-fs-lg); max-width: 32rem; }

.dv-hero-illustration { width: 100%; max-width: 360px; }

main { padding-bottom: var(--dv-space-8); }
.dv-layout { display: flex; gap: var(--dv-space-8); align-items: flex-start; flex-wrap: wrap; }
.dv-layout > .dv-main { flex: 2 1 500px; min-width: 0; }
.dv-layout > aside { flex: 1 1 260px; }
aside .dv-widget { background: var(--dv-surface-soft); border-radius: var(--dv-radius); padding: var(--dv-space-4); margin-bottom: var(--dv-space-4); }

.dv-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--dv-space-6); }
.dv-card { background: var(--dv-surface-soft); border-radius: var(--dv-radius); padding: var(--dv-space-6); }
.dv-card time { color: var(--dv-nav-text); font-size: var(--dv-fs-sm); display: block; margin-bottom: var(--dv-space-2); }

.dv-btn { display: inline-block; padding: var(--dv-space-3) var(--dv-space-6); border-radius: 999px; font-weight: 600; border: 2px solid var(--dv-primary); }
.dv-btn:hover { text-decoration: none; }
.dv-btn-primary { background: var(--dv-primary); color: #fff; }
.dv-btn-primary:hover { background: var(--dv-primary-dark); border-color: var(--dv-primary-dark); }
.dv-btn-secondary { background: transparent; color: var(--dv-primary); }
.dv-btn-secondary:hover { background: var(--dv-primary); color: #fff; }
.dv-btn-ghost { border-color: transparent; color: var(--dv-primary); padding-left: 0; padding-right: 0; }

/* Formulare (Login/Registrierung/Nopaste/Upload/...) */
.nx-field, .dv-field { margin-bottom: var(--dv-space-4); }
.nx-field label, .dv-field label { display: block; font-weight: 600; margin-bottom: var(--dv-space-1); font-size: var(--dv-fs-sm); }
.nx-field input, .nx-field textarea, .nx-field select,
.dv-field input, .dv-field textarea, .dv-field select {
  width: 100%; padding: var(--dv-space-3) var(--dv-space-4); border: 1px solid var(--dv-border);
  border-radius: var(--dv-radius); font-family: inherit; font-size: var(--dv-fs-base); background: var(--dv-surface-soft);
}
.nx-field input:focus, .nx-field textarea:focus, .nx-field select:focus,
.dv-field input:focus, .dv-field textarea:focus, .dv-field select:focus { outline: 2px solid var(--dv-primary); outline-offset: 1px; }

.nx-btn { display: inline-block; padding: var(--dv-space-3) var(--dv-space-6); border-radius: 999px; font-weight: 600; border: 2px solid var(--dv-primary); cursor: pointer; }
.nx-btn:hover { text-decoration: none; }
.nx-btn-primary { background: var(--dv-primary); color: #fff; }
.nx-btn-primary:hover { background: var(--dv-primary-dark); border-color: var(--dv-primary-dark); }
.nx-btn-secondary { background: transparent; color: var(--dv-primary); }
.nx-btn-secondary:hover { background: var(--dv-primary); color: #fff; }

.nx-alert, .dv-alert { padding: var(--dv-space-3) var(--dv-space-4); border-radius: var(--dv-radius); margin-bottom: var(--dv-space-4); border: 1px solid transparent; }
.nx-alert-danger { background: #FBEAEA; border-color: #D8A0A0; color: #8A2E2E; }
.nx-alert-warning { background: #FFF6E5; border-color: #E0C080; color: #7A5A10; }
.nx-alert-success { background: #E8F5EA; border-color: #A0D0A8; color: #2E6A38; }
.nx-alert-info { background: #E9F4FB; border-color: #9BC7E0; color: #12518C; }

.dv-footer { text-align: center; padding: var(--dv-space-8) 0 var(--dv-space-4); }
.dv-footer-social { margin-bottom: var(--dv-space-3); }
.dv-footer-social a { display: inline-block; width: 34px; height: 34px; line-height: 34px; border-radius: 50%; background: var(--dv-surface-soft); color: var(--dv-primary); margin: 0 var(--dv-space-1); }
.dv-footer-social a:hover { background: var(--dv-primary); color: #fff; text-decoration: none; }
.dv-footer p { color: var(--dv-nav-text); font-size: var(--dv-fs-sm); margin: 0; }

/* Shortcode-Boxen (Zitat/Code/Alert/Download) */
.nx-shortcode-quote { margin: var(--dv-space-6) 0; padding: var(--dv-space-4) var(--dv-space-5); border-left: 4px solid var(--dv-primary); background: var(--dv-surface-soft); border-radius: 0 var(--dv-radius) var(--dv-radius) 0; }
.nx-shortcode-quote p { font-size: var(--dv-fs-lg); font-style: italic; margin: 0; }
.nx-shortcode-quote footer { margin-top: var(--dv-space-2); color: var(--dv-nav-text); font-size: var(--dv-fs-sm); }
.nx-shortcode-code { margin: var(--dv-space-6) 0; border-radius: var(--dv-radius); overflow: hidden; }
.nx-shortcode-code-lang { background: var(--dv-text); color: #fff; font-size: var(--dv-fs-sm); font-family: monospace; padding: var(--dv-space-2) var(--dv-space-4); }
.nx-shortcode-code pre { margin: 0; padding: var(--dv-space-4); background: #1E1B18; color: #F2EDE6; overflow-x: auto; }
.nx-shortcode-download { display: inline-flex; align-items: center; gap: var(--dv-space-3); margin: var(--dv-space-4) 0; padding: var(--dv-space-3) var(--dv-space-4); border-radius: var(--dv-radius); text-decoration: none; color: var(--dv-text); background: var(--dv-surface-soft); }
.nx-shortcode-download:hover { text-decoration: none; }
.nx-shortcode-download-icon { font-size: 1.4em; color: var(--dv-primary); }
.nx-shortcode-download-text { display: flex; flex-direction: column; }
.nx-shortcode-download-text small { color: var(--dv-nav-text); }