/* ==========================================================================
   Aeroclub Bonn-Hangelar e.V. – statischer Nachbau (HTML/CSS/JS)
   Optik angelehnt an das Enfold-Theme der Originalseite acbh.de
   ========================================================================== */

/* Schrift: Inter. Wenn die Dateien in /fonts liegen, werden sie genutzt,
   sonst eine lokal installierte Inter, sonst Helvetica/Arial. */
@font-face { font-family: "InterLocal"; font-weight: 300; src: local("Inter Light"), local("Inter-Light"), url("../fonts/inter-light.ttf") format("truetype"); }
@font-face { font-family: "InterLocal"; font-weight: 400; src: local("Inter"), local("Inter Regular"), local("Inter-Regular"), url("../fonts/inter-regular.ttf") format("truetype"); }
@font-face { font-family: "InterLocal"; font-weight: 600; src: local("Inter SemiBold"), local("Inter-SemiBold"), url("../fonts/inter-semibold.ttf") format("truetype"); }
@font-face { font-family: "InterLocal"; font-weight: 700; src: local("Inter Bold"), local("Inter-Bold"), url("../fonts/inter-bold.ttf") format("truetype"); }

:root {
  --blue: #4666b0;          /* Kopfleiste, Menü-Akzent */
  --link: #5e94e0;          /* Links, Buttons */
  --link-hover: #3c72c0;
  --border: #e1e1e1;
  --main-bg: #ffffff;
  --main-text: #080808;
  --main-head: #030303;
  --alt-bg: #fcfcfc;
  --alt-text: #666666;
  --alt-head: #222222;
  --alt-meta: #8f8f8f;
  --socket-bg: #333333;
  --socket-border: #444444;
  --font: "InterLocal", "Inter", Helvetica, Arial, sans-serif;
  --header-h: 88px;
  --meta-h: 30px;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 0; -webkit-text-size-adjust: 100%; scroll-padding-top: 175px; }
body {
  margin: 0; background: #fff; color: #444;
  font: 400 13px/1.65em var(--font);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; height: auto; border: 0; vertical-align: top; }
a { color: var(--link); text-decoration: none; transition: color .15s ease-out; }
a:hover { color: var(--link-hover); text-decoration: underline; }
p { margin: 0.85em 0; }
ul { margin: 0 0 20px 0; padding: 0; }
.entry-content ul, .avia_textblock ul { list-style: disc outside; margin-left: 15px; }
strong, b { font-weight: 700; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; margin: 0 0 8px; line-height: 1.1em; }
h1 { font-size: 34px; margin-bottom: 14px; letter-spacing: -1px; }
h2 { font-size: 28px; margin-bottom: 10px; text-transform: uppercase; }
h3 { font-size: 20px; margin-bottom: 8px; }
h4 { font-size: 18px; margin-bottom: 4px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }
h4:empty, h5:empty, p:empty { display: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

/* ---------- Layout-Grundgerüst ---------- */
.container { width: 100%; max-width: 1310px; margin: 0 auto; padding: 0 50px; position: relative; }
.container::after, .clearfix::after { content: ""; display: table; clear: both; }

.main_color { background: var(--main-bg); color: var(--main-text); }
.main_color h1, .main_color h2, .main_color h3, .main_color h4, .main_color h5, .main_color h6 { color: var(--main-head); }
.alternate_color { background: var(--alt-bg); color: var(--alt-text); }
.alternate_color h1, .alternate_color h2, .alternate_color h3, .alternate_color h4, .alternate_color h5, .alternate_color h6 { color: var(--alt-head); }

.section { border-top: 1px solid var(--border); position: relative; }
.section.no-border, .section:first-child { border-top: 0; }
.section > .container > .content { padding: 50px 0; }
.section.first-wrap > .container > .content { padding-top: 50px; }

/* Abschnitts-Banner mit farbiger Überlagerung (Flugzeugpark) */
.section.banner { background: #ededed; }
.section.banner > .container > .content { padding: 50px 0; }

/* ---------- Spalten ---------- */
/* Enfold-Raster: 6 % Spaltenabstand */
.row { display: flex; flex-wrap: wrap; column-gap: 6%; row-gap: 0; }
.col { min-width: 0; }
.col.full      { flex: 0 0 100%; }
.col.half      { flex: 0 0 47%; }
.col.third     { flex: 0 0 29.3333%; }
.col.two-third { flex: 0 0 64.6666%; }
.col.fourth    { flex: 0 0 20.5%; }
.col.top-margin { margin-top: 50px; }

/* ==========================================================================
   Header
   ========================================================================== */
#header { position: fixed; top: 0; left: 0; right: 0; z-index: 500; background: transparent; }
#header_meta {
  background: var(--blue); height: var(--meta-h); border-bottom: 1px solid var(--border);
  margin-bottom: -1px; position: relative; z-index: 3;
}
#header_meta .sub_menu { float: right; }
#header_meta ul { list-style: none; margin: 0; padding: 0; display: flex; }
#header_meta li { padding: 0 10px; border-left: 1px solid transparent; }
#header_meta li:first-child { border-left: 0; }
#header_meta li:last-child { padding-right: 0; }
#header_meta a {
  display: block; color: #141313; font-size: 11px; font-weight: 700; line-height: 10px;
  padding: 10px 0 9px; text-decoration: none;
}
#header_meta a:hover { color: #000; text-decoration: underline; }

#header_main {
  background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  position: relative; z-index: 2;
}
#header_main .container { height: var(--header-h); display: flex; align-items: stretch; justify-content: space-between; transition: height .2s ease-out; }
.logo { display: flex; align-items: center; height: 100%; }
.logo a { display: flex; align-items: center; height: 100%; }
.logo img { height: 100%; max-height: var(--header-h); width: auto; transition: max-height .2s ease-out; padding: 0; }

/* Hauptmenü */
.main_menu { display: flex; height: 100%; }
#avia-menu { list-style: none; display: flex; margin: 0; padding: 0; height: 100%; }
#avia-menu > li { position: relative; height: 100%; }
#avia-menu > li > a {
  display: block; height: 100%; line-height: var(--header-h); padding: 0 13px;
  font-size: 13px; font-weight: 600; color: #808080; text-decoration: none; position: relative;
  transition: line-height .2s ease-out, color .15s ease-out;
}
#avia-menu > li > a:hover, #avia-menu > li.current > a, #avia-menu > li:hover > a { color: #333; }
#avia-menu .menu-fx {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--blue);
  opacity: 0; transition: opacity .2s ease-out;
}
#avia-menu > li.current > a .menu-fx, #avia-menu > li > a:hover .menu-fx, #avia-menu > li:hover > a .menu-fx { opacity: 1; }
#avia-menu > li.current > a .menu-fx::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; margin-left: -5px;
  border: 5px solid transparent; border-bottom-color: var(--blue); display: none;
}

/* Dropdown */
#avia-menu .sub-menu {
  list-style: none; margin: 0; padding: 0; position: absolute; top: 100%; left: 0; width: 208px;
  background: #fff; border-top: 2px solid var(--blue); margin-top: -1px;
  box-shadow: 0 8px 15px rgba(0,0,0,.1); opacity: 0; visibility: hidden;
  transition: opacity .25s ease-out, visibility .25s; z-index: 10;
}
#avia-menu > li:hover > .sub-menu, #avia-menu > li:focus-within > .sub-menu, #avia-menu > li.touch-open > .sub-menu { opacity: 1; visibility: visible; }
#avia-menu .sub-menu li { border: 1px solid var(--border); border-top: 0; }
#avia-menu .sub-menu a {
  display: block; padding: 8px 15px; font-size: 12px; line-height: 23px; color: #808080;
  background: #fff; text-decoration: none;
}
#avia-menu .sub-menu a:hover { color: #333; background: #fcfcfc; }

/* Suche */
#menu-item-search > a { font-size: 17px !important; display: flex !important; align-items: center; }
#menu-item-search svg { width: 14px; height: 14px; fill: currentColor; }
.search-dropdown {
  position: absolute; right: 0; top: 100%; width: 300px; background: #fff; padding: 20px;
  border: 1px solid var(--border); border-top: 2px solid var(--blue); margin-top: -1px;
  box-shadow: 0 8px 15px rgba(0,0,0,.1); display: none; z-index: 20;
}
.search-dropdown.open { display: block; }
.search-form { display: flex; }
.search-form input[type=search] {
  flex: 1; font: inherit; font-size: 13px; padding: 10px 12px; border: 1px solid var(--border);
  border-right: 0; background: #fcfcfc; color: #666; border-radius: 2px 0 0 2px; min-width: 0;
}
.search-form button {
  width: 44px; border: 0; background: var(--link); color: #fff; cursor: pointer; border-radius: 0 2px 2px 0;
  display: flex; align-items: center; justify-content: center;
}
.search-form button svg { width: 14px; height: 14px; fill: #fff; }

/* Burger (Tablet/Mobil) */
.burger-item { display: none !important; }
.av-hamburger { display: inline-block; width: 30px; height: 20px; position: relative; vertical-align: middle; }
.av-hamburger span, .av-hamburger::before, .av-hamburger::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 3px; background: #808080; border-radius: 3px;
  transition: transform .25s, top .25s, opacity .2s;
}
.av-hamburger::before { top: 0; } .av-hamburger span { top: 8.5px; } .av-hamburger::after { top: 17px; }
.burger-open .av-hamburger::before { top: 8.5px; transform: rotate(45deg); }
.burger-open .av-hamburger span { opacity: 0; }
.burger-open .av-hamburger::after { top: 8.5px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; background: #fff; z-index: 400; overflow-y: auto;
  padding: 140px 15% 60px; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.burger-open .mobile-menu { opacity: 1; visibility: visible; }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu > ul > li { border-bottom: 1px solid var(--border); }
.mobile-menu a { display: block; padding: 12px 0; font-size: 22px; color: #333; text-decoration: none; font-weight: 400; }
.mobile-menu a:hover { color: var(--blue); }
.mobile-menu .sub-menu a { font-size: 15px; padding: 8px 0 8px 20px; color: #808080; }

/* Kopf verkleinert beim Scrollen */
.header-shrunk { --header-h: 44px; }
.header-shrunk .logo img { max-height: 44px; }

/* Platz für den fixierten Header.
   Seite mindestens bildschirmhoch, damit die Fußzeile (#socket) auch bei
   kurzen Seiten immer ganz unten sitzt. */
#wrap_all { min-height: 100vh; display: flex; flex-direction: column; }
#main { padding-top: 119px; flex: 1 0 auto; display: flex; flex-direction: column; }
#main > * { flex-shrink: 0; }

/* ==========================================================================
   Inhalt / Bausteine
   ========================================================================== */

/* Spezielle Überschrift */
.special-heading { padding-bottom: 10px; margin: 0; }
.special-heading h2, .special-heading h3 { margin: 0; }
.special-heading.mt { margin-top: 50px; }
.special-heading.modern { text-align: center; }
.special-heading.modern h3 { font-weight: 300; }
.special-heading.modern h2 { font-weight: 300; }
.special-heading + * { margin-top: 0; }

/* Textblöcke */
.avia_textblock > :first-child { margin-top: 0; }
.avia_textblock + .avia_textblock { margin-top: 0; }
.textblock-gap { margin-top: 14px; }

/* Trennlinie */
.hr { margin: 30px 0; height: 25px; position: relative; clear: both; }
.hr::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--border); }
.hr.invisible { margin: 0; height: 1px; }
.hr.invisible::before { display: none; }

/* Bilder (Platzhalter, solange keine Fotos vorhanden sind) */
.img-wrap { text-align: center; position: relative; overflow: hidden; border-radius: 3px; }
.img-wrap img, .ph {
  display: block; width: 100%; height: auto; border-radius: 3px;
}
.img-wrap.grow img { transition: transform .5s ease-out; }
.img-wrap.grow:hover img { transform: scale(1.1); }
img.missing {
  background: linear-gradient(180deg, #b9cbe2 0%, #dfe7f1 55%, #8fa36d 56%, #6f8650 100%);
  color: transparent; font-size: 0; min-height: 80px; position: relative;
}
.slideshow .slide, .gallery-big .frames {
  background: linear-gradient(180deg, #b9cbe2 0%, #dfe7f1 55%, #8fa36d 56%, #6f8650 100%);
}
.slideshow .slide img.missing, .gallery-big .frames img.missing { visibility: hidden; }
.ph-label { /* wird per JS über fehlende Bilder gelegt */
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  background: rgba(255,255,255,.85); color: #555; font-size: 11px; line-height: 1.4; padding: 4px 8px;
  border-radius: 2px; max-width: 90%; word-break: break-all; pointer-events: none; text-align: center;
}

/* ---------- Slider (Startseite) ---------- */
.fullwidth-slider { position: relative; background: #fff; border-top: 0; }
.slideshow { position: relative; overflow: hidden; aspect-ratio: 1495 / 430; background: #e9eef4; }
.slideshow .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.slideshow .slide.active { opacity: 1; z-index: 1; }
.slideshow .slide img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.slideshow .slide img.missing { min-height: 0; }
.slide-arrow {
  position: absolute; top: 50%; margin-top: -30px; width: 35px; height: 60px; z-index: 5;
  color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0;
  transition: opacity .3s ease-out; text-decoration: none !important; background: rgba(0,0,0,.0);
}
.slide-arrow svg { width: 18px; height: 30px; fill: none; stroke: #fff; stroke-width: 2.5; filter: drop-shadow(0 0 2px rgba(0,0,0,.4)); }
.slide-arrow.prev { left: 0; } .slide-arrow.next { right: 0; }
.slideshow:hover .slide-arrow { opacity: 1; }
.slide-dots { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; z-index: 5; }
.slide-dots button {
  width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; background: transparent;
  margin: 0 1px; padding: 0; cursor: pointer; opacity: .6; box-shadow: 0 0 2px rgba(0,0,0,.3);
}
.slide-dots button.active { background: #fff; opacity: 1; }

/* ---------- Galerie (Flugzeugpark) ---------- */
.gallery { position: relative; padding-bottom: 2px; }
.gallery-big {
  display: block; position: relative; background: #fff; border: 1px solid var(--border);
  border-radius: 2px 2px 0 0; padding: 7px; overflow: hidden;
}
.gallery-big .frames { position: relative; aspect-ratio: 710 / 375; }
.gallery-big img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; border-radius: 0; }
.gallery-big img.active { opacity: 1; }
.gallery-big img.missing { min-height: 0; }
.gallery-caption { position: absolute; left: 7px; right: 7px; bottom: 7px; background: rgba(0,0,0,.4); color: #fff; padding: 4px 8px; font-size: 12px; z-index: 3; }
.gallery .g-arrow {
  position: absolute; top: 50%; margin-top: -20px; width: 30px; height: 40px; z-index: 4;
  background: rgba(0,0,0,.25); color: #fff; border: 0; cursor: pointer; opacity: 0; transition: opacity .3s;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.gallery .g-arrow svg { width: 10px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.5; }
.gallery .g-arrow.prev { left: 7px; border-radius: 0 2px 2px 0; }
.gallery .g-arrow.next { right: 7px; border-radius: 2px 0 0 2px; }
.gallery:hover .g-arrow { opacity: 1; }
.gallery.single .g-arrow { display: none; }

/* Runde Icon-Links unter den Flugzeugen */
.font-icon { text-align: center; }
.font-icon .circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 90px; height: 90px; border-radius: 50%; border: 1px solid var(--border); background: #fff;
  color: #080808; transition: all .3s; text-decoration: none !important;
}
.alternate_color .font-icon .circle { background: #fff; }
.font-icon .circle svg { width: 30px; height: 30px; fill: currentColor; }
.font-icon .circle:hover { background: var(--link); border-color: var(--link); color: #fff; }
.font-icon .icon-caption { display: block; margin-top: 18px; text-align: center; }
.font-icon .icon-caption a { cursor: pointer; }

/* ---------- Untermenü (sticky) ---------- */
.submenu-wrap {
  background: var(--alt-bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  position: sticky; top: 119px; z-index: 300; transition: top .2s ease-out;
}
.header-shrunk .submenu-wrap { top: 75px; }
.submenu-wrap ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; }
.submenu-wrap li { padding: 15px 0; }
.submenu-wrap li + li a { border-left: 1px solid var(--border); }
.submenu-wrap a { display: block; padding: 0 10px 0 12px; color: var(--alt-meta); line-height: 21.45px; text-decoration: none; }
.submenu-wrap a:hover, .submenu-wrap a.active { color: var(--alt-text); }
.submenu-toggle { display: none; }

/* ---------- Icon-Liste (Informieren) ---------- */
.iconlist { list-style: none !important; margin: 0 !important; padding: 0; }
.iconlist > li { position: relative; display: flex; padding-bottom: 30px; min-height: 64px; }
.iconlist > li:last-child { padding-bottom: 0; }
.iconlist .il-icon {
  flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; background: #d0d0d0; color: #fff;
  display: flex; align-items: center; justify-content: center; margin: 0 30px 0 2px; position: relative; z-index: 2;
}
.iconlist .il-icon svg { width: 28px; height: 28px; fill: #fff; }
.iconlist .il-timeline { position: absolute; left: 34px; top: 64px; bottom: 0; width: 1px; background: #d0d0d0; opacity: .5; }
.iconlist > li:last-child .il-timeline { display: none; }
.iconlist .il-body { flex: 1; min-width: 0; padding-bottom: 4px; }
.iconlist .il-title { text-transform: uppercase; font-size: 18px; line-height: 1.1em; position: relative; top: 4px; margin: 0 0 0; }
.iconlist .il-content { color: var(--alt-meta); padding-top: 4px; }
.iconlist .il-content ul { margin: 4px 0 5px 30px; list-style: disc; }
.iconlist .il-content h4, .iconlist .il-content h5 { color: var(--alt-head); margin-top: 20px; }
.iconlist .il-content > :first-child { margin-top: 14px; }

/* ---------- Popup "Technische Details" ---------- */
.popup-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 9999; display: none;
  align-items: center; justify-content: center; padding: 20px;
}
.popup-overlay.open { display: flex; }
.popup {
  background: #fff; max-width: 700px; width: 100%; max-height: 90vh; overflow: auto; padding: 7px 25px 25px;
  border: 7px solid #fff; border-radius: 4px; box-shadow: 0 0 20px rgba(0,0,0,.4); position: relative; color: #080808;
}
.popup h1 { font-size: 26px; margin: 18px 0 14px; color: #030303; letter-spacing: 0; }
.popup table { width: 100%; border-collapse: collapse; font-size: 13px; }
.popup th, .popup td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; vertical-align: top; }
.popup th { background: #f4f4f4; font-weight: 700; }
.popup tr:nth-child(even) td { background: #fafafa; }
.popup-close {
  position: absolute; top: 4px; right: 6px; width: 30px; height: 30px; border: 0; background: transparent;
  font-size: 26px; line-height: 30px; color: #444; cursor: pointer;
}
.popup-close:hover { color: #000; }

/* ---------- Noch auszufüllende Stellen (vor Veröffentlichung ersetzen!) ---------- */
.todo { background: #fff3a0; color: #6b5300; padding: 0 4px; border-radius: 2px; font-weight: 600; }

/* ---------- Suche ---------- */
.search-results { list-style: none !important; margin: 20px 0 0 !important; }
.search-results li { padding: 18px 0; border-bottom: 1px solid var(--border); }
.search-results h3 { margin-bottom: 4px; }
.search-results p { margin: 4px 0 0; }

/* ==========================================================================
   Footer (Socket)
   ========================================================================== */
#socket {
  background: var(--socket-bg); color: #eee; border-top: 1px solid var(--socket-border);
  font-size: 11px; margin-top: auto; position: relative; z-index: 1;
}
#socket .container { display: flex; justify-content: space-between; align-items: center; padding-top: 15px; padding-bottom: 15px; }
#socket .copyright { line-height: 21.45px; }
#socket ul { list-style: none; margin: 0; padding: 0; display: flex; }
#socket li { padding: 0 10px; border-left: 1px solid var(--socket-border); line-height: 10px; }
#socket li:first-child { border-left: 0; }
#socket li:last-child { padding-right: 0; }
#socket a { color: #fff; text-decoration: none; }
#socket a:hover { color: #fff; text-decoration: underline; }

/* Nach-oben-Link */
#scroll-top-link {
  position: fixed; right: 50px; bottom: 50px; width: 50px; height: 50px; background: var(--socket-bg);
  color: #eee; border: 1px solid var(--socket-border); border-radius: 2px; z-index: 1030;
  display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden;
  transition: opacity .2s ease-out, visibility .2s; text-decoration: none !important;
}
#scroll-top-link.visible { opacity: .9; visibility: visible; }
#scroll-top-link:hover { opacity: 1; }
#scroll-top-link svg { width: 12px; height: 8px; fill: none; stroke: #eee; stroke-width: 2; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media only screen and (max-width: 989px) {
  #avia-menu > li:not(.burger-item):not(#menu-item-search) { display: none; }
  .burger-item { display: block !important; }
  .burger-item > a { display: flex !important; align-items: center; }
  .burger-open #header { z-index: 600; }
}
@media only screen and (max-width: 767px) {
  .container { padding: 0; max-width: 85%; }
  #header_meta { display: none; }
  #header { position: relative; }
  #main { padding-top: 0; }
  #header_main .container { --header-h: 80px; }
  .row { column-gap: 0; }
  .col, .col.full, .col.half, .col.third, .col.two-third, .col.fourth { flex: 0 0 100%; width: 100%; margin-bottom: 20px; }
  .col:last-child { margin-bottom: 0; }
  .col.top-margin { margin-top: 0; }
  .submenu-wrap { position: relative; top: 0 !important; }
  .submenu-wrap ul { display: none; flex-direction: column; text-align: center; padding-bottom: 10px; }
  .submenu-wrap.open ul { display: flex; }
  .submenu-wrap li { padding: 6px 0; }
  .submenu-wrap li + li a { border-left: 0; }
  .submenu-toggle { display: block; text-align: center; padding: 15px 0; color: var(--alt-meta); cursor: pointer; }
  #socket .container { display: block; text-align: center; }
  #socket ul { justify-content: center; margin-top: 8px; flex-wrap: wrap; }
  #scroll-top-link { right: 20px; bottom: 20px; }
  .iconlist .il-icon { flex-basis: 44px; width: 44px; height: 44px; margin-right: 15px; }
  .iconlist .il-icon svg { width: 20px; height: 20px; }
  .iconlist .il-timeline { left: 24px; top: 44px; }
  .slide-arrow { opacity: 1; }
  html { scroll-padding-top: 20px; }
  /* Die runden Symbole (Hersteller / Technische Details / Wikipedia)
     nebeneinander statt untereinander, etwas kleiner */
  .col.font-icon { flex: 0 0 33.333%; width: 33.333%; margin-bottom: 10px; }
  .col.font-icon.half { flex: 0 0 50%; width: 50%; }
  .font-icon .circle { width: 64px; height: 64px; }
  .font-icon .circle svg { width: 24px; height: 24px; }
  .font-icon .icon-caption { margin-top: 10px; font-size: 12px; line-height: 1.3; }
}

/* Touch-Geräte (Handy, Tablet): kein Mauszeiger, also Pfeile immer zeigen */
@media (hover: none) {
  .slide-arrow, .gallery .g-arrow { opacity: 1; }
  .img-wrap.grow:hover img { transform: none; }
}