/* Theme CSS for informatik-gutachter.at */
@font-face{
  font-family: 'Montserrat Web';
  src: url('../fonts/Montserrat-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Montserrat Web';
  src: url('../fonts/Montserrat-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Montserrat Web';
  src: url('../fonts/Montserrat-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Merriweather Web';
  src: url('../fonts/Merriweather-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  --ig-primary: #0E2A3A;
  --ig-secondary: #4A4A4A;
  --ig-accent: #008A93;
  --ig-bg: #FFFFFF;
  --ig-text: #212529;

  --ig-font-sans: 'Montserrat Web', 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ig-font-serif: 'Merriweather Web', 'Merriweather', Georgia, 'Times New Roman', serif;

  --bs-primary: var(--ig-primary);
  --bs-secondary: var(--ig-secondary);
  --bs-link-color: var(--ig-primary);
  --bs-link-hover-color: #093040;
  --bs-border-radius: .125rem;
  --bs-border-radius-sm: .125rem;
  --bs-border-radius-lg: .2rem;
  --bs-border-radius-xl: .25rem;
}

html{scroll-behavior:smooth}
body{
  color:var(--ig-text);
  background:var(--ig-bg);
  font-family:var(--ig-font-sans);
  font-size:1rem;
  line-height:1.65;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-variant-numeric: lining-nums tabular-nums;
  text-rendering: optimizeLegibility;
}

.section p,
.section li,
.section dd,
.section dt,
.section address{
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}
h1,h2,h3,h4,
.nav-link,
.btn{hyphens:none}

body{padding-top:64px}
@media (min-width:768px){body{padding-top:72px}}

h1,h2,h3,h4{
  font-family:var(--ig-font-sans);
  font-weight:600;
  color:var(--ig-primary);
  margin-top:0;
}

.navbar, .navbar .nav-link{font-family:var(--ig-font-sans);font-weight:500}

.section{scroll-margin-top:84px}
/* Hero */
.section-hero {
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--ig-primary) 1.5%, transparent), transparent 55%),
    var(--ig-bg);
  color: var(--ig-text);
  padding-block: 5rem;
  position: relative;
  overflow: hidden;
}

.section-hero h1 {color: var(--ig-primary);}
.section-hero .lead {color: var(--ig-secondary);}

.section-hero .badge {
  background: color-mix(in oklab, var(--ig-primary) 6%, var(--ig-bg));
  color: var(--ig-primary);
  border: 1px solid color-mix(in oklab, var(--ig-primary) 12%, transparent);
  font-size: .95rem;
  font-weight: 600;
  border-radius: 50rem;
  padding: .35rem .75rem;
}

.hero-portrait-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 320px;
  border-radius: 50%;
  padding: 3px; /* thinner ring around portrait */
  background: var(--ig-primary);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
.hero-portrait {width: 100%;height: 100%;object-fit: cover;border-radius: 50%;display: block;box-shadow: 0 3px 9px rgba(0,0,0,.05)}

.section-hero .btn {border-radius: 999px; padding-inline: 1.5rem}
.section-hero small {color: var(--ig-secondary)}

@media (prefers-reduced-motion: no-preference) {
  .hero-portrait-wrap {transition: transform .4s ease}
  .hero-portrait-wrap:hover {transform: translateY(-3px)}
}

.navbar-nav{gap:.25rem}
.nav-link{display:inline-flex;align-items:center;min-height:44px;border:1px solid transparent;border-radius:.2rem;padding:.45rem .8rem;transition:color .15s ease,background .15s ease;font-size:.94rem;white-space:nowrap}
.nav-link:hover{color:var(--ig-accent);background:transparent}
.nav-link.active{color:var(--ig-accent);font-weight:600;border-bottom:2px solid var(--ig-accent)}

.navbar{padding-top:.5rem;padding-bottom:.5rem}
@media (min-width:768px){
  .navbar-nav{flex-wrap:nowrap}
}

.navbar-toggler{border:0;color:var(--ig-primary)}
.navbar-toggler .navbar-toggler-icon{color:currentColor;display:inline-block}
@media (min-width:768px){
  .navbar-toggler{display:none}
}

@media (min-width:768px){
  #mainNav .navbar-collapse{display:grid !important;grid-template-columns:1fr auto 1fr;align-items:center}
  #mainNav .nav-left{justify-content:flex-end}
  #mainNav .nav-right{justify-content:flex-start}
  #mainNav .nav-left, #mainNav .nav-right{display:flex;gap:.25rem}
  #mainNav .navbar-brand{margin:0}
}

.brand-short{display:none}
.brand-full{display:inline}
@media (max-width:1199.98px){
  .brand-subtitle{display:none}
  .brand-full{display:none}
  .brand-short{display:inline}
}

.brand-title{font-family:var(--ig-font-serif);font-weight:400;color:var(--ig-secondary)}
.brand-subtitle{color:var(--ig-secondary);font-family:var(--ig-font-sans)}
.brand-sep{color:#9ca3af}

.card{border:1px solid #e5e7eb;border-radius:var(--bs-border-radius)}
.card-title{color:#0f172a}

.footer{background:var(--ig-primary);color:#fff;border-top-color:transparent}
.footer .text-muted{color:rgba(255,255,255,.8) !important}
.footer a{color:#fff !important;text-decoration:none}
.footer a:hover{color:var(--ig-accent);text-decoration:underline}

.py-6{padding-top:4rem !important;padding-bottom:4rem !important}

.section p,
.section ul,
.section ol,
.section address,
.section .lead{max-width:68ch}

.edu-wrap{max-width:68ch}

.btn-primary{background:var(--ig-primary);border-color:var(--ig-primary);color:#fff}
.btn-primary:hover{background:#093040;border-color:#093040;color:#fff}
.btn-info{background:var(--ig-accent);border-color:var(--ig-accent);color:#fff}
.btn-info:hover{background:#008a93;border-color:#008a93;color:#fff}
.btn-outline-primary{color:var(--ig-primary);border-color:var(--ig-primary)}
.btn-outline-primary:hover{background:var(--ig-primary);border-color:var(--ig-primary);color:#fff}
.btn{min-height:44px;padding:.55rem .9rem}

.section li a{padding:.25rem 0;display:inline-block}

@media (max-width: 991.98px){
  .navbar .navbar-brand{font-size: .95rem}
  .brand-subtitle{display:none}
}

#mainNav .navbar-brand .brand-subtitle{display:none !important}

.brand-logo{width:36px;height:36px;display:inline-block}
#mainNav .brand-logo{width:48px;height:48px}
.is-scrolled .brand-title{font-size:.97em}
.is-scrolled.navbar{padding-top:.3rem;padding-bottom:.3rem}

.bg-tech{
  background-color:#ffffff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg stroke='%23f5f7fa' stroke-width='1' fill='none'%3E%3Cpath d='M0 28h56M28 0v56'/%3E%3Ccircle cx='28' cy='28' r='1' fill='%23f5f7fa'/%3E%3C/g%3E%3C/svg%3E");
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,1) 24%, rgba(0,0,0,1));
          mask-image:linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,1) 24%, rgba(0,0,0,1));
}

@media (max-width: 480px){
  .btn{padding:.7rem 1rem;min-height:48px}
}

@media (max-width: 480px){
  .section-hero h1{font-size:1.6rem;line-height:1.2;margin-bottom:.6rem}
  .section-hero{padding-top:calc(1rem + env(safe-area-inset-top));padding-bottom:1rem}
}

@media (max-width: 760px){
  .bg-tech{background-image:none !important}
}

/* Removed old mobile fade/clip for publications preview – JS now splits the list
   and controls visibility, so the overlay caused text to be hidden on small screens. */

/* Let publications preview be natural height on desktop so the button stays put;
   extra items are moved to a hidden list and toggled via JS */
.pubs-preview{overflow:visible}
.show-more-btn{display:inline-block;margin-top:.6rem}

.btn-ghost{
  display:inline-flex;
  align-items:center;
  margin:.25rem auto 1rem auto;
  padding:.25rem .5rem;
  background:none;
  border:0;
  color:var(--ig-primary);
  font-weight:500;
  cursor:pointer;
}
.btn-ghost:focus-visible{outline:3px solid var(--ig-accent);outline-offset:2px;border-radius:.2rem}
.btn-ghost .chevron{
  display:inline-block;
  width:0.6em;height:0.6em;
  margin-left:.3rem;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform .2s ease;
}
.btn-ghost[aria-expanded="true"] .chevron{transform:rotate(-135deg)}

.edu-more{margin-top:.5rem}

@media (max-width: 480px){
  .btn{padding:.7rem 1rem;min-height:48px}
}

.section ul:not(.navbar-nav):not(.list-unstyled){padding-left:1.1rem}
.section ul:not(.navbar-nav):not(.list-unstyled) li{margin-bottom:.35rem}

.btn:focus-visible,
.nav-link:focus-visible,
a:focus-visible{outline:3px solid var(--ig-accent);outline-offset:2px;border-radius:.2rem}

.navbar .nav-link:focus-visible,
.navbar .nav-link:hover{color:var(--ig-accent)}
.footer a:focus-visible{color:#fff;text-decoration:underline}

@media print{.bg-tech{background:none !important;-webkit-mask-image:none !important;mask-image:none !important}}

.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;padding:.5rem .75rem;background:#fff;border:2px solid var(--ig-accent);z-index:1050}

.contact-qr img{width:92px;height:92px;image-rendering:pixelated}

.contact-qr svg{width:92px;height:92px}

.qr-hint{color:var(--ig-primary)}
.qr-arrow{display:inline-block;color:var(--ig-accent)}
.qr-text{color:var(--ig-secondary)}