/* ===========================
   TAISMO PORTAL — LIGHT THEME
   Brand: Primary #ED8924, Secondary #072328
   Cards: #F7F7F7, Base: White, Font: Figtree
   =========================== */

/* --- Theme Variables --- */
:root{
  /* Colors */
  --color-bg:#ffffff;
  --color-surface:#F7F7F7;
  --color-surface-alt:#ffffff;
  --color-border:#E5E7EB;
  --color-text:#072328;
  --color-muted:#5F6F74;
  --color-link:#072328;
  --color-primary:#ED8924;
  --color-primary-text:#ffffff;
  --color-secondary:#072328;

  /* Shadows/Radius */
  --focus:0 0 0 3px rgba(237,137,36,.35);
  --radius:16px;
  --radius-sm:12px;
  --shadow:0 8px 24px rgba(7,35,40,.08);

  /* Layout */
  --container:1200px;

  /* Spacing scale (8px grid) */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px; --space-8:48px;
  --space-9:64px; --space-10:80px;

  /* Fonts */
  --font:"Figtree", ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
}

/* --- Reset / Base --- */
*{box-sizing:border-box}
::selection{background:rgba(237,137,36,.2)}
html,body{height:100%}
html{scroll-behavior:smooth}
body.app{
  margin:0; background:var(--color-bg); color:var(--color-text);
  font-family:var(--font); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* Typography (größer) */
h1,h2,h3,h4,h5,h6{margin:0 0 var(--space-4) 0; font-weight:700; line-height:1.2; color:var(--color-text)}
h1{font-size:clamp(32px,5vw,40px)}
h2{font-size:clamp(24px,3.8vw,30px)}
h3{font-size:clamp(20px,3vw,24px)}
p{margin:0 0 var(--space-4)}
small,.text-muted{color:var(--color-muted)}
a{color:var(--color-link); text-decoration:none}
a:hover{text-decoration:underline}
code,kbd,samp,pre{font-family:var(--font-mono); font-size:.95em}
code{background:#fff;border:1px solid var(--color-border);padding:2px 6px;border-radius:8px}
pre{background:#fff;border:1px solid var(--color-border);border-radius:12px;padding:var(--space-4);overflow:auto}

/* Text utilities */
.text-sm{font-size:.875rem}
.text-base{font-size:1rem}
.text-lg{font-size:clamp(20px,2.6vw,22px); font-weight:700}
.text-xl{font-size:clamp(22px,3vw,26px); font-weight:700}
.text-2xl{font-size:clamp(28px,4vw,34px); font-weight:800}

/* Lists */
ul,ol{padding-left:1.2rem; margin:0 0 var(--space-4)}
li+li{margin-top:6px}

/* Utilities */
.u-stack-sm>*+*{margin-top:var(--space-2)}
.u-stack>*+*{margin-top:var(--space-4)}
.u-stack-lg>*+*{margin-top:var(--space-6)}
.u-mb-0{margin-bottom:0!important}
.u-mb-2{margin-bottom:var(--space-2)!important}
.u-mb-4{margin-bottom:var(--space-4)!important}
.u-mb-6{margin-bottom:var(--space-6)!important}
.u-text-center{text-align:center!important}
.u-hide{display:none!important}
.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}

/* Section titles & Divider */
.section-title{ margin:12px 0 8px 0; font-size:clamp(22px,3vw,28px); font-weight:800; letter-spacing:.2px; }
.divider{ border:0; border-top:1px solid #e9e9e9; margin-block:var(--space-8); }
.divider--xl{ margin-block:clamp(24px, 6vw, var(--space-10)); }

/* Layout */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--space-4)}
.page{padding:var(--space-6) 0}

/* Header (weiß) */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--color-surface-alt);
  border-bottom:1px solid var(--color-border);
}
.header-inner{height:64px; display:flex; align-items:center; justify-content:space-between}
.brand img{height:28px; display:block}

/* Navigation */
.nav-toggle{
  display:none; background:none; border:0; color:var(--color-secondary);
  font-size:22px; padding:6px 8px; border-radius:8px;
}
.nav-toggle:focus{outline:none; box-shadow:var(--focus)}
.site-nav{display:flex; align-items:center; gap:14px}
.site-nav a{
  color:var(--color-secondary);
  padding:8px 10px; border-radius:10px; text-decoration:none;
}
.site-nav a:hover{background:#F3F4F6}
.nav-sep{width:1px;height:22px;background:var(--color-border);margin:0 6px}

/* Dropdown */
.dropdown{position:relative}
.btn-ghost{position:relative}
.dropdown-menu{
  display:none; position:absolute; right:0; top:calc(100% + 1px);
  background:#ffffff; border:1px solid var(--color-border);
  border-radius:12px; min-width:220px; box-shadow:var(--shadow); padding:8px;
}
.dropdown-menu a{display:block; padding:8px 10px; border-radius:10px; color:var(--color-secondary)}
.dropdown-menu a:hover{background:#F3F4F6}
.dropdown:hover .dropdown-menu{display:block}

/* Buttons */
.btn,.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; cursor:pointer; border-radius:12px; padding:10px 16px; line-height:1.1; border:0; text-decoration:none;
}
.btn{ background:var(--color-primary); color:var(--color-primary-text); box-shadow:var(--shadow); }
.btn:hover{filter:brightness(1.05)}
.btn:focus{outline:none; box-shadow:var(--focus)}
.btn-ghost{ background:#ffffff; color:var(--color-secondary); border:1px solid var(--color-border); }
.btn-ghost:hover{background:#F3F4F6}
.btn-ghost:focus{outline:none; box-shadow:var(--focus)}
.btn-secondary{ background:var(--color-secondary); color:#ffffff; }
.btn-secondary:hover{filter:brightness(1.03)}

/* Nav-Button-Farben (weiß auf dunkel/orange) */
.site-nav .btn, .site-nav .btn:visited { background: var(--color-primary); color:#fff!important; border-color: var(--color-primary) }
.site-nav .btn-ghost, .site-nav .btn-ghost:visited { background: var(--color-secondary); color:#fff!important; border-color: var(--color-secondary) }

/* Badges */
.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;line-height:1;border:1px solid var(--color-border);background:#fff;color:var(--color-secondary)}
.badge--primary{background:rgba(237,137,36,.12); color:#9a4f10; border-color:rgba(237,137,36,.35)}
.badge-pill{ border-radius:999px; padding:2px 8px; font-size:12px; }

/* Cards */
.card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  padding:var(--space-4);
  box-shadow:var(--shadow);
}

/* Hero/Service Cards (für Inline-Style-Reduktion) */
.hero-card{
  display:block; padding:28px; border:0; text-decoration:none; color:#fff;
  border-radius:16px; box-shadow:0 6px 20px rgba(0,0,0,.08);
}
.hero--jobs{ background:#ED8924; }
.hero--mkt { background:#072328; }

.service-card{
  display:block; padding:22px; text-decoration:none; border-radius:16px; background:var(--color-surface); color:var(--color-secondary);
  transition:transform .2s ease, box-shadow .2s ease;
}
.service-card:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.06); }

/* Grid */
.grid{display:grid; gap:var(--space-4)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Tables */
.table{width:100%; border-collapse:collapse; background:var(--color-surface-alt); border:1px solid var(--color-border); border-radius:12px; overflow:hidden}
.table th,.table td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--color-border)}
.table thead th{font-weight:600; color:var(--color-muted); background:#FAFAFA}
.table tbody tr:hover{background:#FAFAFA}
.table-wrap{overflow-x:auto}

/* Forms */
label{display:block; margin-bottom:6px; color:var(--color-muted); font-size:.95rem}
.input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--color-border); background:#ffffff; color:var(--color-secondary);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
textarea{min-height:120px; resize:vertical}
input::placeholder, textarea::placeholder{color:#98A4A8}
input:focus, select:focus, textarea:focus{outline:none; border-color:rgba(237,137,36,.6); box-shadow:var(--focus)}
.form-row{display:grid; gap:var(--space-4); grid-template-columns:1fr 1fr}
.form-row .col-span-2{grid-column:span 2}

/* Alerts */
.alert{
  border:1px solid var(--color-border);
  border-left:4px solid var(--color-secondary);
  background:#ffffff;
  padding:var(--space-3) var(--space-4);
  border-radius:12px;
}
.alert--success{border-left-color:var(--color-primary); background:rgba(237,137,36,.08)}
.alert--warn{border-left-color:#d97706; background:rgba(217,119,6,.08)}
.alert--error{border-left-color:#dc2626; background:rgba(220,38,38,.08)}

/* Footer */
.site-footer{
  border-top:1px solid var(--color-border);
  padding:var(--space-6) 0; margin-top:var(--space-8);
  color:var(--color-muted); background:var(--color-surface-alt);
}

/* Iframe (Jotform etc.) */
iframe{background:#ffffff; border-radius:12px; border:1px solid var(--color-border)}

/* Align helpers */
.align-center{margin-left:auto; margin-right:auto; display:block}
.align-wide{width:min(100%, 1200px); margin-left:auto; margin-right:auto}
.align-full{width:100vw; margin-left:50%; transform:translateX(-50%)}

/* Spacing utilities */
.pad-0{padding:0!important}
.pad-2{padding:var(--space-2)!important}
.pad-4{padding:var(--space-4)!important}
.pad-6{padding:var(--space-6)!important}
.mt-0{margin-top:0!important}
.mt-4{margin-top:var(--space-4)!important}
.mb-4{margin-bottom:var(--space-4)!important}
.mb-6{margin-bottom:var(--space-6)!important}

/* Focus-visible */
:where(a,button,input,select,textarea,.btn,.btn-ghost,.btn-secondary):focus-visible{
  outline:none; box-shadow:var(--focus)
}

/* Responsive Navigation */
@media (max-width:780px){
  .nav-toggle{display:inline-block}
  .site-nav{
    position:absolute; right:var(--space-4); top:64px;
    flex-direction:column; gap:8px;
    background:#ffffff; border:1px solid var(--color-border);
    border-radius:12px; padding:10px; box-shadow:var(--shadow);
    display:none; min-width:220px;
  }
  .site-nav.open{display:flex}
}

/* Responsive Grid */
@media (max-width:1024px){ .grid-4{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:900px){
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
}

/* Tabs */
.tabs { display:flex; gap:6px; background:#fff; border:1px solid var(--color-border); border-radius:12px; padding:4px }
.tab {
  appearance:none; background:transparent; border:0; cursor:pointer; border-radius:8px;
  padding:8px 12px; font-weight:600; color:var(--color-secondary);
}
.tab.is-active { background:#FAFAFA; color:var(--color-secondary); border:1px solid var(--color-border) }
.tab:focus-visible { outline:none; box-shadow:var(--focus) }
.tab-panel { display:none }
.tab-panel.is-active { display:block }

/* Jobs */
.job-card{display:flex;flex-direction:column;gap:10px}
.job-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.job-title{font-size:1.125rem;font-weight:700;color:var(--color-secondary)}
.job-meta { color:var(--color-muted); font-size:.95rem; }
.job-actions form { display:inline-block; }

/* Sidebar Tiles (News/Podcast) – enhanced */
.news-tile {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: #fff;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.news-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(7,35,40,.12);
  border-color: rgba(7,35,40,.12);
}
.news-tile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .25s ease;
}
.news-tile:hover img { transform: scale(1.02); }
.news-caption {
  padding: 10px 12px 12px;
  font-size: 15px !important;
  line-height: 1.35;
  color: var(--color-secondary);
  background: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* kleine Abstände im Sidebar-Stack */
.u-stack-sm .news-tile + .news-tile { margin-top: var(--space-2); }

.nav-hello{
  color:var(--color-secondary);
  font-weight:600;
  opacity:.9;
  padding:8px 6px;
}
.job-card-link { text-decoration:none; color:inherit; display:block; }
.job-card-link:hover { text-decoration:none; }