/* Operation.net – Grundlayout nach dem Vorbild der Elementor-Seite */

@font-face { font-family: 'Open Sans'; font-weight: 300; font-style: normal; font-display: swap; src: url(/assets/fonts/open-sans-latin-300-normal.woff2) format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url(/assets/fonts/open-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 400; font-style: italic; font-display: swap; src: url(/assets/fonts/open-sans-latin-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url(/assets/fonts/open-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url(/assets/fonts/open-sans-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Lato'; font-weight: 400; font-style: normal; font-display: swap; src: url(/assets/fonts/lato-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Lato'; font-weight: 700; font-style: normal; font-display: swap; src: url(/assets/fonts/lato-latin-700-normal.woff2) format('woff2'); }

:root {
  --tuerkis: #1ac1b3;
  --tuerkis-rahmen: #54cdc6;
  --mint: #dff3f1;
  --text: #7a7a7a;
  --text-dunkel: #54595f;
  --linie: #e0e0e0;
  --fuss: #545454;
  --breite: 1200px;
  --abstand: clamp(16px, 3vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--text); font: 400 16px/1.6 'Open Sans', system-ui, sans-serif; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--tuerkis); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: Lato, 'Open Sans', sans-serif; font-weight: 400; color: var(--text-dunkel); line-height: 1.3; }
h2 { font-size: 1.4rem; margin: 2.2rem 0 1rem; }
h3 { font-size: 1.2rem; margin: 1.6rem 0 .8rem; }
h4 { font-size: 1.05rem; margin: 1.4rem 0 .6rem; }
p, ul, ol { margin: 0 0 1.4rem; }
ul, ol { padding-left: 3.2rem; }
li { margin: .1rem 0; }
.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 10; background: #fff; padding: .5rem 1rem; }
:target { scroll-margin-top: 1rem; }

/* Kopf */
.kopf { position: relative; background: #3c8d88 url(/assets/header.jpg) center 25% / cover no-repeat; }
.kopf__leiste { position: relative; z-index: 2; max-width: 1140px; margin: 0 auto; padding: 50px var(--abstand) 0; display: flex; align-items: stretch; }
.kopf__leiste::before { content: ''; position: absolute; inset: 50px var(--abstand) 0; background: #fff; z-index: -1; }
.logo { display: flex; align-items: center; padding: 14px 24px 14px 20px; font: 400 36px/1 'Lato', sans-serif; letter-spacing: -.5px; }
.logo:hover { text-decoration: none; }
.logo__a { color: var(--tuerkis); font-weight: 700; padding-right: 6px; border-right: 1px solid #555; }
.logo__b { color: #444; padding-left: 6px; }
.menu { margin-left: auto; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu > ul { display: flex; height: 100%; }
.menu__top { position: relative; display: flex; align-items: center; padding: 0 20px; color: var(--text-dunkel); }
.menu__top > a { color: var(--text-dunkel); padding: 22px 6px 22px 0; }
.menu__top > .icon { width: .7em; }
.menu__sub { position: absolute; top: 100%; left: 0; min-width: 240px; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.12); padding: .4rem 0; display: none; z-index: 5; }
.menu__top:hover .menu__sub, .menu__top:focus-within .menu__sub { display: block; }
.menu__sub a { display: block; padding: .45rem 1.2rem; color: var(--text-dunkel); }
.menu__sub a:hover { background: var(--mint); text-decoration: none; }
.menu-toggle { display: none; margin-left: auto; align-items: center; gap: .5rem; border: 0; background: none; font: inherit; color: var(--text-dunkel); padding: 0 20px; cursor: pointer; }
.menu-toggle .icon { width: 1.3em; height: 1.3em; }
.titelbalken { position: relative; margin-top: 240px; background: rgba(26,193,179,.7); color: #fff; padding: 18px 30px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; }
.titelbalken h1 { color: #fff; margin: 0; font-size: 26px; }
.breadcrumb { font-size: 16px; color: rgba(255,255,255,.6); }
.breadcrumb a { color: rgba(255,255,255,.6); }
.kopf--start .titelbalken { display: none; }

/* Inhalt */
.haupt { max-width: calc(var(--breite) + 2 * var(--abstand) + 2px); margin: 0 auto; padding: 40px var(--abstand) 50px; border-left: 1px solid #ccc; border-right: 1px solid #ccc; }
.artikel > :first-child { margin-top: 0; }
.artikel h2:first-child { margin-top: 0; }

/* Intro mit Inhaltsverzeichnis und Bild */
.intro { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 1.8rem 0 0; align-items: start; }
.intro--ohne-bild { grid-template-columns: 1fr; }
.inhalt { background: var(--mint); padding: 10px 10px 16px; }
.inhalt__titel { font: 400 26px/1.3 Lato, sans-serif; color: var(--text-dunkel); margin: 0 0 .6rem; }
.inhalt ol { margin: 0; padding-left: 2.6rem; }
.inhalt li { margin: .3rem 0; }
.intro__bild { width: 100%; }

/* Tipp der Redaktion */
.tipp { background: var(--tuerkis); color: #fff; padding: 15px 15px; margin: 0 0 1.8rem; }
.tipp p:last-child { margin-bottom: 0; }
.tipp strong { font-weight: 600; }
.tipp a { color: #fff; text-decoration: underline; }

/* Hervorgehobene Bereiche */
.box { margin: 0 0 1.8rem; padding: 12px; }
.box > :last-child, .spalte > :last-child { margin-bottom: 0; }
.box > h2:first-child, .box > h3:first-child { margin-top: .6rem; }
.box--rahmen { border: 2px solid var(--tuerkis-rahmen); }
.box--flaeche { background: var(--mint); }
.box--hinweis { background: #fafae1; }
.box + .tipp { margin-top: -1.8rem; }

.spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 20px; margin: 0 0 1.4rem; }
.spalte > h2:first-child, .spalte > h3:first-child { margin-top: 1rem; }
.spalte img { width: 100%; }

/* Listen mit Icons */
.iconliste ul { list-style: none; padding-left: 0; }
.iconliste li { position: relative; padding-left: 1.6rem; margin: .45rem 0; }
.iconliste li::before { content: ''; position: absolute; left: 0; top: .45em; width: .8em; height: .8em; background: var(--tuerkis); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.iconliste { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>'); }
.iconliste--check { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>'); }
.iconliste--times { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>'); }
.iconliste li.mit-icon::before { display: none; }
.iconliste li.mit-icon > .icon { position: absolute; left: 0; top: .35em; width: 1em; height: 1em; fill: var(--tuerkis); }

/* Vor- und Nachteile */
.vn { display: grid; grid-template-columns: 1fr 1fr; margin: 1.6rem 0 1rem; }
.vn__seite { display: flex; gap: 30px; }
.vn__seite--pro { border-right: 1px solid var(--linie); padding-right: 10px; }
.vn__seite--contra { padding-left: 0; }
.vn__icon { flex: none; width: 102px; height: 102px; border: 1px solid var(--tuerkis); border-radius: 50%; display: grid; place-items: center; transition: background .2s; }
.vn__icon .icon { width: 50px; height: 50px; fill: var(--tuerkis); }
.vn__seite:hover .vn__icon { background: var(--tuerkis); }
.vn__seite:hover .vn__icon .icon { fill: #fff; }
.vn__inhalt h3 { margin: .6rem 0 .8rem; }

/* Teaser auf andere Operation */
.teaser { display: flex; align-items: center; gap: 16px; margin: 0 0 1.8rem; border: 1px solid var(--linie); color: var(--text-dunkel); max-width: 520px; }
.teaser:hover { text-decoration: none; border-color: var(--tuerkis); }
.teaser img { width: 140px; aspect-ratio: 4 / 3; object-fit: cover; }
.teaser__label { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tuerkis); }
.teaser__titel { display: block; font: 400 1.2rem/1.3 Lato, sans-serif; }

/* Video mit Zwei-Klick-Lösung */
.video { position: relative; aspect-ratio: 16 / 9; background: #2b2f33; margin: 0 0 1.8rem; }
.video__start { position: absolute; inset: 0; width: 100%; border: 0; background: none; color: #fff; font: inherit; cursor: pointer; display: grid; place-content: center; justify-items: center; gap: .4rem; }
.video__start .icon { width: 56px; height: 56px; fill: var(--tuerkis); }
.video__start small { opacity: .7; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.vgwort { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* Kategorie-Übersicht */
.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 35px 30px; }
.karte { background: #fff; box-shadow: 0 0 10px rgba(0,0,0,.15); display: flex; flex-direction: column; }
.karte img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.karte__text { padding: 30px; }
.karte h2 { margin: 0 0 1rem; font-size: 1.4rem; }
.karte h2 a { color: var(--text-dunkel); }
.karte p { font-size: .9rem; margin: 0 0 1.2rem; }
.karte__mehr { font-size: .8rem; font-weight: 700; text-transform: uppercase; }

/* Fuß */
.fuss { background: var(--fuss); color: rgba(255,255,255,.75); }
.fuss__innen { max-width: 1280px; margin: 0 auto; padding: 10px 30px 30px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { margin: 0 0 .9rem; }
.fuss a { color: rgba(255,255,255,.75); font: 400 1.05rem Lato, sans-serif; }
.fuss__titel { font: 400 1.5rem Lato, sans-serif; color: #fff; margin: 0 0 .6rem; }
.suche { display: flex; height: 40px; }
.suche input { flex: 1; min-width: 0; border: 0; padding: 0 12px; background: #f1f2f3; font: inherit; }
.suche button { width: 40px; border: 0; background: #3c4046; color: #fff; cursor: pointer; }
.suche button .icon { width: 16px; height: 16px; }

@media (max-width: 1024px) {
  .menu-toggle { display: flex; }
  .menu { display: none; position: absolute; top: 100%; left: var(--abstand); right: var(--abstand); background: #fff; box-shadow: 0 8px 18px rgba(0,0,0,.15); }
  .menu.offen { display: block; }
  .menu > ul { display: block; }
  .menu__top { display: block; padding: 0; }
  .menu__top > a { display: block; padding: .8rem 1.2rem; font-weight: 600; }
  .menu__top > .icon { display: none; }
  .menu__sub { position: static; display: block; box-shadow: none; padding: 0 0 .5rem 1rem; }
  .titelbalken { margin-top: 140px; }
}

@media (max-width: 767px) {
  .logo { font-size: 26px; padding: 12px; }
  .intro, .vn { grid-template-columns: 1fr; }
  .vn__seite--pro { border-right: 0; padding-right: 0; margin-bottom: 1.4rem; }
  .vn__seite { gap: 16px; }
  .vn__icon { width: 64px; height: 64px; }
  .vn__icon .icon { width: 30px; height: 30px; }
  .haupt { border: 0; padding-top: 24px; }
  .titelbalken { padding: 14px var(--abstand); }
  .titelbalken h1 { font-size: 22px; }
  .breadcrumb { font-size: 14px; }
  .fuss__innen { grid-template-columns: 1fr; }
  ul, ol { padding-left: 1.6rem; }
}