/* ==========================================================================
   Parto Buchungskonverter
   ========================================================================== */

:root {
  --white:          #FFFFFF;
  --ash:            #1A1A1A;
  --turquoise:      #7EBCA6;
  --turquoise-hover:#6EAF98;
  --turquoise-light:rgba(126, 188, 166, 0.08);
  --turquoise-ring: rgba(126, 188, 166, 0.25);
  --teal:           #224247;
  --teal-hover:     #2d575e;
  --sand:           #E4E7D9;
  --gray-01: #F2F3F0;
  --gray-02: #D8D9D4;
  --gray-03: #979893;
  --gray-04: #5F6159;
  --gray-05: #30312B;
  --error:    #C44141;
  --error-bg: #FDF2F2;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --text-xs:  0.75rem;
  --text-sm:  0.8125rem;
  --text-base:0.875rem;
  --text-lg:  1rem;
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem;
  --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem;
  --r-sm: 8px; --r-md: 12px; --r-full: 9999px;
  --shadow: 0 1px 3px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --ease: 150ms ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  font-size: var(--text-base);
  color: var(--ash);
  background: var(--gray-01);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}


/* ==========================================================================
   Header
   ========================================================================== */
.header {
  background: var(--white);
  border-bottom: 3px solid var(--turquoise);
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.logo { flex-shrink: 0; display: flex; }
.logo img, .logo svg { border-radius: var(--r-sm); }

.header-text { display: flex; flex-direction: column; }

.header-title {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ash);
  line-height: 1.3;
}

.header-sub {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--gray-03);
  line-height: 1.3;
}


/* ==========================================================================
   Layout
   ========================================================================== */
.main { flex: 1; }

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}


/* ==========================================================================
   Format Toggle
   ========================================================================== */
.format-toggle {
  display: flex;
  gap: 4px;
  background: var(--white);
  border: 1px solid var(--sand);
  border-radius: var(--r-full);
  padding: 4px;
  width: fit-content;
  box-shadow: var(--shadow);
}

.toggle-pill {
  padding: 6px 20px;
  font-family: var(--font);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-04);
  background: transparent;
  border: none;
  border-radius: var(--r-full);
  cursor: pointer;
  transition: all var(--ease);
}

.toggle-pill:hover:not(.active) {
  color: var(--ash);
  background: var(--gray-01);
}

.toggle-pill.active {
  color: var(--white);
  background: var(--teal);
}


/* ==========================================================================
   Two-column layout
   ========================================================================== */
.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  align-items: stretch;
}

.col {
  background: var(--white);
  border: 1px solid var(--sand);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  box-shadow: var(--shadow);
}

.col-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-04);
  margin-bottom: var(--sp-4);
}

/* Right column stacks upload + guide */
.col-right {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.col-right .col-upload {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Guide bar */
.col-guide {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--ease);
}

.col-guide:hover {
  border-color: var(--turquoise);
  box-shadow: var(--shadow-md);
}

.guide-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sand);
  border-radius: var(--r-sm);
  color: var(--teal);
  transition: all var(--ease);
}

.col-guide:hover .guide-icon {
  background: var(--teal);
  color: var(--white);
}

.guide-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.guide-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ash);
}

.guide-hint {
  font-size: var(--text-xs);
  color: var(--gray-03);
}

.guide-arrow {
  flex-shrink: 0;
  color: var(--gray-03);
  transition: all var(--ease);
}

.col-guide:hover .guide-arrow {
  color: var(--teal);
  transform: translate(2px, -2px);
}


/* ==========================================================================
   Config fields (left column) — stacked vertically
   ========================================================================== */
.fields {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.field label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ash);
  margin-bottom: var(--sp-1);
}

.field input {
  width: 100%;
  height: 40px;
  padding: 0 var(--sp-3);
  font-family: var(--font);
  font-size: var(--text-base);
  color: var(--ash);
  background: var(--gray-01);
  border: 1.5px solid transparent;
  border-radius: var(--r-sm);
  transition: all var(--ease);
  outline: none;
}

.field input::placeholder { color: var(--gray-03); }
.field input:hover { border-color: var(--gray-02); }

.field input:focus {
  background: var(--white);
  border-color: var(--turquoise);
  box-shadow: 0 0 0 3px var(--turquoise-ring);
}

.field input.invalid {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(196, 65, 65, 0.1);
}

.field select {
  width: 100%;
  height: 40px;
  padding: 0 var(--sp-3);
  font-family: var(--font);
  font-size: var(--text-base);
  color: var(--ash);
  background: var(--gray-01);
  border: 1.5px solid transparent;
  border-radius: var(--r-sm);
  transition: all var(--ease);
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235F6159' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.field select:hover { border-color: var(--gray-02); }

.field select:focus {
  background-color: var(--white);
  border-color: var(--turquoise);
  box-shadow: 0 0 0 3px var(--turquoise-ring);
}

.field-hint {
  display: block;
  font-size: 11px;
  color: var(--gray-03);
  margin-top: 3px;
}


/* ==========================================================================
   Dropzone (right column) — fills column height
   ========================================================================== */
.col-upload {
  display: flex;
  flex-direction: column;
}

.dropzone {
  flex: 1;
  border: 2px dashed var(--gray-02);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dropzone:hover, .dropzone:focus-visible {
  border-color: var(--turquoise);
  background: var(--turquoise-light);
}

.dropzone:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--turquoise-ring);
}

.dropzone.dragover {
  border-color: var(--turquoise);
  background: var(--turquoise-light);
  border-style: solid;
}

.dropzone.has-file {
  border-style: solid;
  border-color: var(--turquoise);
  background: var(--turquoise-light);
  cursor: default;
}

/* Empty state — centered vertically */
.dropzone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-6);
  text-align: center;
}

.dropzone-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sand);
  border-radius: var(--r-md);
  color: var(--teal);
  transition: all var(--ease);
}

.dropzone:hover .dropzone-icon,
.dropzone.dragover .dropzone-icon {
  background: var(--turquoise);
  color: var(--white);
}

.dropzone-text {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ash);
}

.dropzone-hint {
  font-size: var(--text-sm);
  color: var(--gray-03);
  margin-top: -6px;
}

/* File selected — also centered */
.file-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-5);
  text-align: center;
  width: 100%;
}

.file-info-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--turquoise);
  border-radius: var(--r-md);
  color: var(--white);
}

.file-name {
  display: block;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ash);
  word-break: break-all;
}

.file-size {
  font-size: var(--text-sm);
  color: var(--gray-03);
}

.file-remove {
  margin-top: var(--sp-1);
  padding: 4px 12px;
  border: 1px solid var(--gray-02);
  border-radius: var(--r-sm);
  background: var(--white);
  color: var(--gray-04);
  font-family: var(--font);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: all var(--ease);
}

.file-remove:hover {
  background: var(--error-bg);
  border-color: var(--error);
  color: var(--error);
}


/* ==========================================================================
   Convert Button
   ========================================================================== */
.convert-btn {
  width: 100%;
  height: 48px;
  font-family: var(--font);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--white);
  background: var(--teal);
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}

.convert-btn:hover:not(:disabled) {
  background: var(--teal-hover);
  box-shadow: var(--shadow-md);
}

.convert-btn:active:not(:disabled) { background: var(--ash); }

.convert-btn:disabled {
  background: var(--teal);
  color: var(--white);
  opacity: 0.7;
  cursor: wait;
}

.btn-text { display: inline-flex; align-items: center; gap: 6px; }
.btn-loading { display: flex; align-items: center; gap: var(--sp-2); }
.spinner { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }


/* ==========================================================================
   Error Banner
   ========================================================================== */
.error-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--error-bg);
  border: 1px solid rgba(196, 65, 65, 0.2);
  border-radius: var(--r-sm);
  animation: slideIn 200ms ease;
}

.error-icon { flex-shrink: 0; color: var(--error); margin-top: 1px; }

.error-text {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--error);
}

.error-close {
  flex-shrink: 0; border: none; background: none;
  color: var(--error); font-size: 18px; cursor: pointer;
  padding: 0; line-height: 1; opacity: 0.6;
  transition: opacity var(--ease);
}

.error-close:hover { opacity: 1; }


/* ==========================================================================
   Download Area — appears below after conversion
   ========================================================================== */
.download-area {
  background: var(--white);
  border: 1px solid var(--turquoise);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  box-shadow: var(--shadow);
  animation: slideIn 250ms ease;
}

.download-header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.download-check {
  flex-shrink: 0;
  color: var(--turquoise);
  margin-top: 2px;
}

.download-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--ash);
}

.download-summary {
  font-size: var(--text-sm);
  color: var(--gray-04);
  margin-top: 2px;
}

.download-files {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--gray-01);
  border-radius: var(--r-sm);
}

.result-info {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  flex: 1;
}

.result-file-icon { color: var(--teal); flex-shrink: 0; }
.result-name { font-size: var(--text-sm); font-weight: 600; color: var(--ash); }
.result-desc { font-size: var(--text-xs); color: var(--gray-03); }

.download-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-family: var(--font);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--white);
  background: var(--teal);
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--ease);
  text-decoration: none;
}

.download-btn:hover {
  background: var(--teal-hover);
  box-shadow: var(--shadow-md);
}

.download-warnings {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--sand);
}

.warnings-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gray-04);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-2);
}

.warnings-list { list-style: none; font-size: var(--text-sm); color: var(--gray-04); }
.warnings-list li { padding: 2px 0 2px var(--sp-4); position: relative; }
.warnings-list li::before { content: "\2022"; position: absolute; left: 0; color: var(--gray-03); }


/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  text-align: center;
  padding: var(--sp-3) var(--sp-6);
  font-size: 11px;
  color: var(--gray-03);
}

.footer a {
  color: var(--gray-04);
  text-decoration: none;
  transition: color var(--ease);
}

.footer a:hover {
  color: var(--teal);
  text-decoration: underline;
}


/* ==========================================================================
   Utilities
   ========================================================================== */
.hidden { display: none !important; }

@keyframes slideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15%      { transform: translateX(-6px); }
  30%      { transform: translateX(5px); }
  45%      { transform: translateX(-4px); }
  60%      { transform: translateX(3px); }
  75%      { transform: translateX(-2px); }
}

.field input.shake {
  animation: shake 0.5s ease;
  border-color: var(--error) !important;
  box-shadow: 0 0 0 3px rgba(196, 65, 65, 0.1) !important;
}


/* ==========================================================================
   Responsive — stack columns on narrow screens
   ========================================================================== */
@media (max-width: 720px) {
  .header-inner { padding: var(--sp-3) var(--sp-4); }
  .container { padding: var(--sp-4); }

  .columns {
    grid-template-columns: 1fr;
  }

  .dropzone-content { padding: var(--sp-5) var(--sp-4); }

  .result-item {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
  }

  .download-btn { justify-content: center; width: 100%; }
}