<div class="container">
<h1 class="mb--xl display--lg">Prof. Dr. Hans-Hubertus Bleuel</h1>
<nav id="menu-subnav" class="subnav" id="subnav">
<button type="button" data-controller="disclosure" data-target="#subnav" aria-expanded="false" aria-controls="subnav" class="btn subnav__toggle">
<svg class="icon" aria-hidden="true" focusable="false" width="16" height="16">
<use xlink:href="/assets/icons.svg#i-menu" />
</svg>
<span>Unterseiten anzeigen</span>
</button>
<div class="subnav__collapse collapse" id="subnav">
<ul class="subnav__items">
<li class="subnav__item active">
<a href="#" class="subnav__link">Übersicht</a>
</li>
<li class="subnav__item">
<a href="#" class="subnav__link">Lebenslauf</a>
</li>
<li class="subnav__item">
<a href="#" class="subnav__link">Lehre</a>
</li>
<li class="subnav__item">
<a href="#" class="subnav__link">Links</a>
</li>
<li class="subnav__item">
<a href="#" class="subnav__link">Materialien</a>
</li>
<li class="subnav__item">
<a href="#" class="subnav__link">Publikationen</a>
</li>
<li class="subnav__item">
<a href="#" class="subnav__link">Studientipps</a>
</li>
<li class="subnav__item">
<a href="#" class="subnav__link">Themengebiete</a>
</li>
</ul>
</div>
</nav>
<div class="multicol">
<div class="multicol__content stack">
<div class="prose">
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque ratione voluptatum quia dolore, architecto vel eius
corporis eum pariatur autem sunt mollitia nam ullam natus soluta alias! Quas, numquam voluptate. Lorem ipsum dolor,
sit amet <strong>consectetur adipisicing</strong> elit. Nihil rem consectetur illo facilis tenetur. Quas voluptatum ab
quae. Debitis eos ut nobis magnam cupiditate odio atque quia similique? Animi, debitis. Lorem ipsum <i>dolor sit amet
consectetur</i> adipisicing elit. H<sup>2</sup>0 Quaerat iste voluptas debitis illo labore laudantium dolore harum
libero deserunt fugiat accusantium asperiores reiciendis amet eum soluta inventore natus, impedit numquam?</p>
<ul>
<li>Liste 1</li>
<li>Liste 2</li>
<li>Liste 3</li>
</ul>
<h3>Lorem ipsum dolor sit amet consectetur adipisicing elit</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque ratione voluptatum quia dolore, architecto vel eius
corporis eum pariatur autem sunt mollitia nam ullam natus soluta alias! Quas, numquam voluptate. Lorem ipsum dolor,
sit amet <u>consectetur adipisicing</u> elit. Nihil rem <s>consectetur illo facilis</s> tenetur. Quas voluptatum ab
quae. Debitis eos ut nobis magnam cupiditate odio atque quia similique? Animi, debitis. Lorem ipsum dolor sit <a href="https://hs-duesseldorf.de" target="_self">amet consectetu</a>r adipisicing elit. Quaerat iste voluptas debitis
illo labore laudantium dolore harum libero deserunt fugiat accusantium asperiores reiciendis amet eum soluta inventore
natus, impedit numquam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque ratione voluptatum quia dolore, architecto vel eius
corporis eum pariatur autem sunt mollitia nam ullam natus soluta alias! Quas, numquam voluptate. Lorem ipsum dolor,
sit amet <u>consectetur adipisicing</u> elit. Nihil rem <s>consectetur illo facilis</s> tenetur. Quas voluptatum ab
quae. Debitis eos ut nobis magnam cupiditate odio atque quia similique? Animi, debitis. Lorem ipsum dolor sit <a href="https://hs-duesseldorf.de" target="_self">amet consectetu</a>r adipisicing elit. Quaerat iste voluptas debitis
illo labore laudantium dolore harum libero deserunt fugiat accusantium asperiores reiciendis amet eum soluta inventore
natus, impedit numquam?</p>
<figure class="table">
<table>
<thead>
<tr>
<th>#</th>
<th><strong>First</strong></th>
<th><strong>Last</strong></th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Jan</td>
<td>Otto</td>
</tr>
<tr>
<th>2</th>
<td>Steve</td>
<td>Thornton</td>
</tr>
<tr>
<th>3</th>
<td>Larry</td>
<td>Meyer</td>
</tr>
</tbody>
</table>
</figure>
<h4>Lorem ipsum dolor sit amet consectetur adipisicing elit</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque ratione voluptatum quia dolore, architecto vel eius
corporis eum pariatur autem sunt mollitia nam ullam natus soluta alias! Quas, numquam voluptate. Lorem ipsum dolor,
sit amet consectetur adipisicing elit. Nihil rem consectetur illo facilis tenetur. Quas voluptatum ab quae. Debitis
eos ut nobis magnam cupiditate odio atque quia similique? Animi, debitis. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Quaerat iste voluptas debitis illo labore laudantium dolore harum libero deserunt fugiat accusantium
asperiores reiciendis amet eum soluta inventore natus, impedit numquam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque ratione voluptatum quia dolore, architecto vel eius
corporis eum pariatur autem sunt mollitia nam ullam natus soluta alias! Quas, numquam voluptate. Lorem ipsum dolor,
sit amet consectetur adipisicing elit. Nihil rem consectetur illo facilis tenetur. Quas voluptatum ab quae. Debitis
eos ut nobis magnam cupiditate odio atque quia similique? Animi, debitis. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Quaerat iste voluptas debitis illo labore laudantium dolore harum libero deserunt fugiat accusantium
asperiores reiciendis amet eum soluta inventore natus, impedit numquam?</p>
<h5>Lorem ipsum dolor sit amet consectetur adipisicing elit</h4>
<ol>
<li>Liste 1</li>
<li>Liste 2</li>
<li>Liste 3</li>
</ol>
<h6>Lorem ipsum dolor sit amet consectetur adipisicing elit</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque ratione voluptatum quia dolore, architecto vel eius
corporis eum pariatur autem sunt mollitia nam ullam natus soluta alias! Quas, numquam voluptate. Lorem ipsum dolor,
sit amet <u>consectetur adipisicing</u> elit. Nihil rem <s>consectetur illo facilis</s> tenetur. Quas voluptatum ab
quae. Debitis eos ut nobis magnam cupiditate odio atque quia similique? Animi, debitis. Lorem ipsum dolor sit amet
consectetur adipisicing elit. Quaerat iste voluptas debitis illo labore laudantium dolore harum libero deserunt fugiat
accusantium asperiores reiciendis amet eum soluta inventore natus, impedit numquam?</p>
</div>
</div>
<div class="multicol__marginal stack">
<img data-src="/placeholder/hans_bleuel.jpg" srcset="/placeholder/800x600.jpg 740w,/placeholder/1200x800.jpg 1000w" alt="Prof. Dr. Hans-Hubertus Bleuel" decoding="async" loading="lazy" class="img-fluid lazy" width=1440 height=800>
<section class="widget">
<header class="widget__header">
<h2 class="widget__title">Kontakt</h2>
</header>
<div class="widegt__body">
<dl>
<dt>Tel.</dt>
<dd>+49 211 4351-3384</dd>
<dt>E-Mail:</dt>
<dd>h.bleuel@hs-duesseldorf.de</dd>
<dt>Raumbezeichnung</dt>
<dd>
<div class="tooltip tooltip--bottom tooltip--align-center">
<button aria-describedby="room" class="tooltip__label">
03
</button>
<div role="tooltip" id="room" class="tooltip__content">Gebäude 03</div>
</div>.<div class="tooltip tooltip--bottom tooltip--align-center">
<button aria-describedby="floor" class="tooltip__label">
4
</button>
<div role="tooltip" id="floor" class="tooltip__content">Etage 4</div>
</div>.<div class="tooltip tooltip--bottom tooltip--align-center">
<button aria-describedby="room" class="tooltip__label">
027
</button>
<div role="tooltip" id="room" class="tooltip__content">Raum 027</div>
</div>
</dd>
<dt>Anschrift</dt>
<dd>Prof. Dr. Hans-Hubertus Bleuel<br>
Münsterstraße 156<br>
40476 Düsseldorf</dd>
</dl>
</div>
</section>
<section class="widget">
<header class="widget__header">
<h2 class="widget__title">Sprechstunde</h2>
</header>
<div class="widget__body">
<p>Mittwochs 14:15h-15:15h und nach Vereinbarung. Bitte melden Sie sich vorab per Mail an.</p>
</div>
</section>
</div>
</div>
</div>
<div class="container">
<h1 class="mb--xl display--lg">Prof. Dr. Hans-Hubertus Bleuel</h1>
{% include '@subnav' with {
subnav: [
{
label: 'Übersicht',
url: '#',
active: true,
},
{
label: 'Lebenslauf',
url: '#',
},
{
label: 'Lehre',
url: '#',
},
{
label: 'Links',
url: '#',
},
{
label: 'Materialien',
url: '#',
},
{
label: 'Publikationen',
url: '#',
},
{
label: 'Studientipps',
url: '#',
},
{
label: 'Themengebiete',
url: '#',
},
],
} %}
<div class="multicol">
<div class="multicol__content stack">
{% include '@b-text' %}
</div>
<div class="multicol__marginal stack">
{% include '@image' with {
'image': {
'src': '/placeholder/hans_bleuel.jpg',
'alt': 'Prof. Dr. Hans-Hubertus Bleuel',
},
'lazy': true
} %}
<section class="widget">
<header class="widget__header">
<h2 class="widget__title">Kontakt</h2>
</header>
<div class="widegt__body">
<dl>
<dt>Tel.</dt>
<dd>+49 211 4351-3384</dd>
<dt>E-Mail:</dt>
<dd>h.bleuel@hs-duesseldorf.de</dd>
<dt>Raumbezeichnung</dt>
<dd>{% include '@tooltip' with {text: '03', description: 'Gebäude 03', id: 'room'} %}.{% include '@tooltip' with {text: '4', description: 'Etage 4', id: 'floor'} %}.{% include '@tooltip' with {text: '027', description: 'Raum 027', id: 'room'} %}</dd>
<dt>Anschrift</dt>
<dd>Prof. Dr. Hans-Hubertus Bleuel<br>
Münsterstraße 156<br>
40476 Düsseldorf</dd>
</dl>
</div>
</section>
<section class="widget">
<header class="widget__header">
<h2 class="widget__title">Sprechstunde</h2>
</header>
<div class="widget__body">
<p>Mittwochs 14:15h-15:15h und nach Vereinbarung. Bitte melden Sie sich vorab per Mail an.</p>
</div>
</section>
</div>
</div>
</div>
/* No context defined. */