/* ZMS Theme foxnewmedia - Defaults CSS */

/* GRAPHICS */
.ZMSGraphic div,
.ZMSGraphic img {
	max-width: 100% !important;
	height: auto !important;
	width: auto !important;
}
.ZMSGraphic .graphic {
	text-align:left !important
}
.ZMSGraphic .text,
.ZMSLinkContainer .description,
.ZMSFile .description {
	font-size:80%;
	font-style:italic;
}
.ZMSGraphic .text {
	margin-top:1em;
}

/* TEASER */
.ZMSTeaserElement .title a {
	font-weight:bold;
	color:#ffffff;
	text-decoration:none;
	background:#999;
	display:block;
	padding:.5em 1em;
	margin: 0 -1em -.5em;
}
.ZMSTeaserElement a {
	color:#03A9F4;
}

/* FILES AND LINKS */
.ZMSFile, .ZMSLinkContainer {
	border:1px solid silver;
	padding: 1em;
	border-radius:4px;
	background:#eee
}
.ZMSLinkContainer .title {
	margin-bottom:.5em;
}

div.ZMSFile, div.ZMSLinkElement {
  background-color: #f7f7f7;
  margin: 10px;
  padding: 10px;
}

div.ZMSFile.none, div.ZMSLinkElement.none {
  border: 0px none;
}
div.ZMSFile div.title, 
div.ZMSLinkElement div.title {
  white-space: normal;
  line-height: 20px;
}
div.ZMSFile div.title img {
  float: left;
  margin: 3px 7px 15px 0;
}
/*
div.ZMSLinkElement div.title:before,
div.ZMSFile div.title:before {
  font-weight: 900;
  font-family: "Font Awesome 6 Free";
  content: "\f35d"; 
  width:15px;
  }
*/
div.ZMSFile div.title a:link, div.ZMSFile div.title a:visited, 
div.ZMSLinkElement div.title a:link, div.ZMSLinkElement div.title a:visited {
  font-weight: bold;
  text-decoration: none;
  margin-top: 3px;
}
div.ZMSFile div.title span, 
div.ZMSLinkElement div.title span {
  white-space: nowrap;
}
div.ZMSFile div.text, div.ZMSLinkElement div.text,
div.ZMSFile div.description, div.ZMSLinkElement div.description {
  font-size: 100%;
  }

/* TABLES */

/* Scrollbarer Wrapper – horizontales Scrollen auf Mobilgeräten */
.ZMSTable {
  /* border-collapse: collapse ist inkompatibel mit position:sticky –
     separate + border-spacing:0 verhindert den Pixel-Artefakt beim Scrollen */
  border-collapse: separate;
  border-spacing: 0;
  margin: 1em 0;
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ZMSTable th,
.ZMSTable td {
  background-color: transparent;
  color: #e2e6ea;
  font-size: 0.78rem;
  padding: 4px 8px;
  text-align: center;
  white-space: nowrap;
}


.ZMSTable thead th,
.ZMSTable thead td {
  white-space: normal;
  background-color: transparent;
}

.ZMSTable thead th {
  border-bottom: 1px solid #dee2e6;
}



/* formulator */
.formrow {
  margin:1.5em 0;
}

.formtext .label {
  font-weight: 600;
}
.formtext .mandatory {
  color:crimson;
}
label.error {
  color:crimson;
  font-size:smaller;
}
.form-check-input {
  float:left;
  margin-right:8px!important;
}
.form-check-label {
  display:inline;
}

/* =========================================================
   Aus web.css hierher verschoben (2026-08-11): Styles fuer
   ZMS-Standardobjekte gehoeren nach Konvention in defaults.css.
   ========================================================= */

/* ZMSGraphic: Fancybox-Zoom-Hinweis */
/* ZMSGraphic: Fancybox-Zoom-Hinweis */
.ZMSGraphic .graphic a.fancybox{
  position:relative;
  cursor:zoom-in;
  display:inline-block;
  max-width:100%;
}
.ZMSGraphic .graphic a.fancybox img{
  transition:opacity .2s ease;
}
.ZMSGraphic .graphic a.fancybox:hover img{
  opacity:.92;
}
.ZMSGraphic .graphic a.fancybox::after{
  content:"\f00e"; /* fa-magnifying-glass-plus */
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  right:.55rem;
  bottom:.55rem;
  width:1.75rem;
  height:1.75rem;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.75rem;
  line-height:1;
  color:var(--fnm-white);
  background:rgba(45,52,54,.72);
  border-radius:.35rem;
  pointer-events:none;
  opacity:.85;
  transition:opacity .2s ease, background .2s ease;
}
.ZMSGraphic .graphic a.fancybox:hover::after{
  opacity:1;
  background:rgba(45,52,54,.88);
}
/* =========================================================
   ZMSFile als Blueprint-Downloadkarte (Design "Industry").
   Vorher ein einfacher Knopf; die Karte zeigt zusaetzlich Dateityp,
   Groesse und Beschreibung (Dublin Core), damit ein Download nicht
   als nackter Knopf im Raum steht.

   Das Markup kommt aus ZMSFile.standard_html und ist nicht aenderbar.
   Es steht fest:
     div.ZMSFile
       div.title       -> img(mime) + "(" + a(titlealt) + span(Groesse) + ")"
       div.text        -> Dateiname (beim Upload automatisch gesetzt)
       div.description -> attr_dc_description
   Die Karte entsteht deshalb vollstaendig aus CSS.
   ========================================================= */
.web .ZMSFile,
.web div.ZMSFile{
  position:relative;
  display:block;
  margin:0;
  padding:18px 52px 18px 20px; /* rechts Platz fuer den Download-Pfeil */
  border:1px solid var(--fnm-divider);
  border-radius:0;
  background:var(--fnm-white);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.web .ZMSFile:hover{
  border-color:var(--fnm-accent);
  box-shadow:var(--fnm-shadow);
}
/* Die vier "+"-Eckmarken der .blueprint-Optik brauchen sonst vier
   <i class="corner">-Elemente. Die kann hier niemand einfuegen, also
   zeichnet ein einziges Overlay-Pseudoelement acht Striche: je Ecke einen
   senkrechten und einen waagerechten. Masse wie .blueprint > .corner in
   web.css (11 px lang, 5 px Versatz, 6 px ausserhalb des Rahmens). */
.web .ZMSFile::after{
  content:"";
  position:absolute;
  inset:-6px;
  pointer-events:none;
  color:color-mix(in srgb, var(--fnm-charcoal) 55%, transparent);
  background-repeat:no-repeat;
  background-image:
    linear-gradient(currentColor,currentColor), linear-gradient(currentColor,currentColor),
    linear-gradient(currentColor,currentColor), linear-gradient(currentColor,currentColor),
    linear-gradient(currentColor,currentColor), linear-gradient(currentColor,currentColor),
    linear-gradient(currentColor,currentColor), linear-gradient(currentColor,currentColor);
  background-size:
    1px 11px, 11px 1px,
    1px 11px, 11px 1px,
    1px 11px, 11px 1px,
    1px 11px, 11px 1px;
  background-position:
    left 5px top 0,     left 0 top 5px,
    right 5px top 0,    right 0 top 5px,
    left 5px bottom 0,  left 0 bottom 5px,
    right 5px bottom 0, right 0 bottom 5px;
}
/* Download-Pfeil oben rechts, rutscht beim Ueberfahren ein Stueck nach unten */
.web .ZMSFile::before{
  content:"\f019"; /* fa-download */
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  top:18px;
  right:20px;
  font-size:1rem;
  line-height:1.35;
  color:var(--fnm-accent);
  opacity:.55;
  transition:opacity .15s ease, transform .15s ease;
}
.web .ZMSFile:hover::before{
  opacity:1;
  transform:translateY(3px);
}
/* font-size:0 loescht die beiden Klammern, die im Standard-Markup als
   nackter Text um die Dateigroesse stehen; die Kinder holen sich ihre
   Schriftgroesse selbst zurueck. */
.web .ZMSFile .title{
  position:static;
  display:block;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  font-size:0;
  line-height:1.35;
  white-space:normal;
}
.web .ZMSFile .title img{ display:none; }
/* Dateisymbol: allgemein ein Blatt, fuer PDF das PDF-Zeichen. Welcher Typ
   es ist, steht nur im title des ausgeblendeten Mime-Bildchens. */
.web .ZMSFile .title::before{
  content:"\f15b"; /* fa-file */
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  font-size:1.15rem;
  color:var(--fnm-accent-dark);
  margin-right:.6rem;
  vertical-align:-2px;
}
.web .ZMSFile .title:has(img[title*="pdf"])::before{ content:"\f1c1"; }
.web .ZMSFile .title a,
.web .ZMSFile .title a:link,
.web .ZMSFile .title a:visited{
  font-family:var(--fnm-font-base);
  font-size:1.02rem;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--fnm-charcoal);
  text-decoration:none;
  margin:0;
}
.web .ZMSFile:hover .title a{ color:var(--fnm-accent-dark); }
/* macht die ganze Karte klickbar (.ZMSFile ist der Bezugsrahmen) */
.web .ZMSFile .title a::after{
  content:"";
  position:absolute;
  inset:0;
}
.web .ZMSFile .title span{
  display:inline-block;
  margin-left:.6rem;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
  color:color-mix(in srgb, var(--fnm-charcoal) 55%, transparent);
  pointer-events:none;
}
/* Dateiname: sagt neben dem Titel nichts Neues */
.web .ZMSFile .text{ display:none; }
.web .ZMSFile .description{
  display:block;
  margin-top:.3rem;
  font-size:.85rem;
  font-style:normal;
  line-height:1.45;
  color:color-mix(in srgb, var(--fnm-charcoal) 62%, transparent);
}
/* ZMSVideo: Aspect-Ratio für youtube und youtube-nocookie (Inline-Style deckt nur .youtube ab) */
.video-wrapper.youtube,
.video-wrapper.youtube-nocookie,
.elastic-video.youtube,
.elastic-video.youtube-nocookie {
  position: relative;
  padding-bottom: 55%;
  padding-top: 15px;
  height: 0;
  overflow: hidden;
}
.video-wrapper.youtube iframe,
.video-wrapper.youtube-nocookie iframe,
.elastic-video.youtube iframe,
.elastic-video.youtube-nocookie iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}