@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@700;800;900&family=Barlow+Semi+Condensed:wght@500;600&display=swap');
/* TCL Lienz - user.css fuer Joomla 6 / Cassiopeia - Nachbau des alten Layouts (rot/weiss) */

:root {
  --tcl-rot: #cc0000;
  --tcl-rot-dunkel: #a30000;
  --tcl-grau: #e8e8e8;
  --tcl-rand: #d5d5d5;
  --cassiopeia-color-primary: #cc0000;
  --cassiopeia-color-link: #cc0000;
  --cassiopeia-color-hover: #a30000;
}

body.site {
  background: #d9d9d9;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #333;
}

.site-grid {
  background: #fff;
  box-shadow: 0 0 12px rgba(0,0,0,.25);
}

.site-grid {
  max-width: 1200px;
  margin-inline: auto;
}

.container-header { background: #fff; }
.container-banner { margin: 0; }
/* Header-Inhalt (Grafik + Menue) exakt an Inhaltsbreite ausrichten */
.container-topbar,
.container-nav,
.container-banner,
.container-breadcrumbs {
  padding-left: 14px !important;
  padding-right: 14px !important;
  box-sizing: border-box;
}
.container-banner .mod-custom { margin: 0; }
.container-banner img {
  display: block;
  width: 100%;
  height: auto;
}

.container-header .container-nav { padding: 0; }
.container-header nav.navbar { padding: 6px 10px; background: #f5f5f5; border-top: 1px solid var(--tcl-rand); border-bottom: 1px solid var(--tcl-rand); }

.mod-menu__list.nav { gap: 4px; }

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > button,
.container-header .mod-menu > li > .nav-header {
  display: block;
  padding: 5px 12px;
  border: 1px solid var(--tcl-rand);
  border-radius: 3px;
  background: #fff;
  color: var(--tcl-rot);
  font-weight: bold;
  font-size: 13px;
  text-decoration: none;
}

.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > button:hover,
.container-header .mod-menu > li.active > a {
  background: linear-gradient(to bottom, #e13b2f, var(--tcl-rot));
  border-color: var(--tcl-rot-dunkel);
  color: #fff;
}

.container-header .mod-menu .mod-menu__sub {
  background: #fff;
  border: 1px solid var(--tcl-rand);
  box-shadow: 0 4px 8px rgba(0,0,0,.2);
  min-width: 230px;
  padding: 4px 0;
}
.container-header .mod-menu .mod-menu__sub a {
  color: #333;
  padding: 6px 14px;
  display: block;
  text-decoration: none;
}
.container-header .mod-menu .mod-menu__sub a:hover {
  background: var(--tcl-grau);
  color: var(--tcl-rot);
}

main { padding: 10px 5px; }

.item-page h1, .item-page h2, .page-header h1, .page-header h2 {
  color: var(--tcl-rot);
  font-size: 22px;
  border-bottom: 2px solid var(--tcl-rot);
  padding-bottom: 4px;
}

main a { color: #0000ff; }
main img { max-width: 100%; height: auto; }

.container-sidebar-right .card {
  border: 1px solid var(--tcl-rand);
  border-radius: 4px;
  margin-bottom: 18px;
  background: #fdfdfd;
}
.container-sidebar-right .card-header,
.container-sidebar-right h3 {
  background: var(--tcl-grau);
  color: #333;
  font-size: 15px;
  font-weight: bold;
  padding: 8px 12px;
  border-bottom: 1px solid var(--tcl-rand);
}

.container-sidebar-right ul { list-style: none; margin: 0; padding: 6px 8px; }
.container-sidebar-right ul li {
  padding: 5px 4px 5px 26px;
  border-bottom: 1px dotted var(--tcl-rand);
  position: relative;
}
.container-sidebar-right ul li:last-child { border-bottom: 0; }
.container-sidebar-right ul li::before {
  content: "\1F3BE";
  position: absolute;
  left: 4px;
  font-size: 13px;
}
.container-sidebar-right ul li a {
  color: #444;
  text-decoration: none;
  font-weight: bold;
}
.container-sidebar-right ul li a:hover { color: var(--tcl-rot); }

.container-sidebar-right .tcl-links li::before { content: ""; }
.container-sidebar-right .tcl-links li { padding-left: 8px; }
.container-sidebar-right .tcl-links a {
  color: var(--tcl-rot);
  font-style: italic;
  font-size: 15px;
}

.container-footer {
  background: #333;
  color: #ddd;
}
.container-footer a { color: #fff; }

.back-to-top-link { background: var(--tcl-rot); }


/* ===== Hauptmenue ab Tablet horizontal (Handy bleibt untereinander) ===== */
@media (min-width: 600px) {
  .container-header ul.mod-menu.nav {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 4px;
  }
  .container-header ul.mod-menu.nav > li { position: relative; display: flex; }
  .container-header ul.mod-menu.nav > li > a,
  .container-header ul.mod-menu.nav > li > .mod-menu__toggle-sub { white-space: nowrap; display: flex; align-items: center; gap: 4px; }
  .container-header ul.mod-menu.nav > li > .mod-menu__toggle-sub {
    padding: 5px 12px; border: 1px solid var(--tcl-rand); border-radius: 3px;
    background: #fff; color: var(--tcl-rot); font-weight: bold; font-size: 13px; cursor: pointer;
  }
  .container-header ul.mod-menu.nav > li > .mod-menu__toggle-sub .mod-menu__heading { color: inherit; }
  .container-header ul.mod-menu.nav > li > .mod-menu__toggle-sub:hover,
  .container-header ul.mod-menu.nav > li.active > .mod-menu__toggle-sub {
    background: linear-gradient(to bottom, #e13b2f, var(--tcl-rot));
    border-color: var(--tcl-rot-dunkel); color: #fff;
  }
  .container-header ul.mod-menu.nav .mod-menu__sub {
    position: absolute; top: 100%; left: 0; min-width: 230px;
    background: #fff; border: 1px solid var(--tcl-rand); box-shadow: 0 4px 8px rgba(0,0,0,.2);
    padding: 4px 0; margin: 0; z-index: 1000;
  }
  .container-header ul.mod-menu.nav .mod-menu__sub li { display: block; }
  .container-header ul.mod-menu.nav .mod-menu__sub a {
    display: block; padding: 6px 14px; color: #333; text-decoration: none;
    font-weight: normal; border: 0; border-radius: 0; white-space: nowrap;
  }
  .container-header ul.mod-menu.nav .mod-menu__sub a:hover { background: var(--tcl-grau); color: var(--tcl-rot); }
}


/* ===== Moderner Header (Modul in Position topbar) ===== */
.tclmh{position:relative;overflow:hidden;color:#fff;max-width:1200px;margin-left:auto;margin-right:auto;aspect-ratio:1170/300;min-height:200px;font-family:'Archivo',system-ui,Arial,sans-serif;background:linear-gradient(90deg,rgba(6,14,9,.62) 0%,rgba(6,14,9,.34) 26%,rgba(6,14,9,.08) 52%,rgba(6,14,9,0) 70%), url(/images/Layout/header-panorama.jpg) 100% 100% / cover no-repeat;}
.tclmh::before{content:'';position:absolute;top:0;left:0;z-index:2;width:0;height:0;border-top:64px solid var(--tcl-rot);border-right:64px solid transparent;}
.tclmh::after{content:'';position:absolute;left:0;right:0;bottom:0;height:5px;z-index:2;background:var(--tcl-rot);}
.tclmh-in{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:22px clamp(20px,5vw,48px) 22px clamp(80px,11vw,120px);}
.tclmh-kick{font-family:'Barlow Semi Condensed',sans-serif;font-weight:600;letter-spacing:.4em;text-transform:uppercase;font-size:clamp(10px,1.5vw,14px);color:#c8f83a;margin:0;}
.tclmh-title{position:relative;margin:0;font-weight:900;text-transform:uppercase;line-height:.94;font-size:clamp(26px,5.6vw,58px);letter-spacing:.01em;text-shadow:0 3px 16px rgba(0,0,0,.55);color:#fff;}
.tclmh-title .tclmh-red{color:var(--tcl-rot);}
.tclmh-title .tclmh-abbr{font-size:.4em;font-weight:800;color:rgba(255,255,255,.92);margin-left:.15em;}
.tclmh-title::before{content:'';position:absolute;left:clamp(-66px,-9vw,-96px);top:50%;transform:translateY(-50%);width:clamp(46px,7vw,66px);height:clamp(46px,7vw,66px);border-radius:50%;background:radial-gradient(circle at 38% 34%,#e6ff7a,#c8f83a 55%,#93c412);box-shadow:0 4px 10px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.35);}
.tclmh-title::after{content:'';display:block;width:clamp(64px,11vw,120px);height:5px;margin-top:12px;background:var(--tcl-rot);border-radius:3px;}
.tclmh-meta{font-family:'Barlow Semi Condensed',sans-serif;font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:clamp(10px,1.4vw,14px);color:rgba(255,255,255,.9);text-shadow:0 1px 6px rgba(0,0,0,.6);margin:0;}
.tclmh-badge{position:absolute;top:16px;right:clamp(16px,4vw,34px);z-index:2;background:var(--tcl-rot);color:#fff;font-weight:900;letter-spacing:.05em;font-size:clamp(14px,2vw,20px);padding:6px 12px;border-radius:8px;border:1.5px solid rgba(255,255,255,.3);box-shadow:0 4px 12px rgba(0,0,0,.4);}
@media(max-width:600px){.tclmh-badge{display:none;} .tclmh-in{padding-left:clamp(64px,18vw,80px);}}

/* Menue-Breite an Inhalt */
.container-header ul.mod-menu.nav{max-width:1200px;margin-left:auto;margin-right:auto;}